From c601024e4dbe69d475c66f05a73b14c848cd6257 Mon Sep 17 00:00:00 2001 From: Paolo D'Amico Date: Mon, 23 Nov 2020 13:22:42 -0500 Subject: [PATCH] Revert "Use our own session recording player (#2470)" (#2477) --- .../src/scenes/sessions/SessionsPlayer.tsx | 37 ++++++++++++++++ .../scenes/sessions/SessionsPlayerButton.tsx | 1 + .../scenes/sessions/SessionsPlayerDrawer.tsx | 30 ++++++------- package.json | 2 +- yarn.lock | 44 ++++--------------- 5 files changed, 62 insertions(+), 52 deletions(-) create mode 100644 frontend/src/scenes/sessions/SessionsPlayer.tsx diff --git a/frontend/src/scenes/sessions/SessionsPlayer.tsx b/frontend/src/scenes/sessions/SessionsPlayer.tsx new file mode 100644 index 0000000000000..6618a49a40f7b --- /dev/null +++ b/frontend/src/scenes/sessions/SessionsPlayer.tsx @@ -0,0 +1,37 @@ +import { useActions, useValues } from 'kea' +import React, { useEffect, useRef } from 'react' +import rrwebPlayer from 'rrweb-player' +import 'rrweb-player/dist/style.css' +import { eventWithTime } from 'rrweb/typings/types' +import { sessionsTableLogic } from 'scenes/sessions/sessionsTableLogic' + +export default function SessionsPlayer({ events }: { events: eventWithTime[] }): JSX.Element { + const target = useRef(null) + + const { sessionsPlayerSpeed } = useValues(sessionsTableLogic) + const { setPlayerSpeed } = useActions(sessionsTableLogic) + + useEffect(() => { + if (target.current && events) { + const player = new rrwebPlayer({ + target: target.current, + // eslint-disable-next-line + // @ts-ignore + props: { + width: 952, + events, + autoPlay: true, + }, + }) + player.setSpeed(sessionsPlayerSpeed) + + player.getReplayer().on('state-change', () => { + setPlayerSpeed(player.getReplayer().config.speed) + }) + + return () => player.pause() + } + }, []) + + return
+} diff --git a/frontend/src/scenes/sessions/SessionsPlayerButton.tsx b/frontend/src/scenes/sessions/SessionsPlayerButton.tsx index 7a5a1f2d3fb27..274273f075220 100644 --- a/frontend/src/scenes/sessions/SessionsPlayerButton.tsx +++ b/frontend/src/scenes/sessions/SessionsPlayerButton.tsx @@ -10,6 +10,7 @@ interface SessionsPlayerButtonProps { } export default function SessionsPlayerButton({ session }: SessionsPlayerButtonProps): JSX.Element | null { + // TODO: Work around no clickhouse support yet for session recording if (!session.session_recording_ids) { return null } diff --git a/frontend/src/scenes/sessions/SessionsPlayerDrawer.tsx b/frontend/src/scenes/sessions/SessionsPlayerDrawer.tsx index c4c1ddbed5d0f..9d41ab66fed3f 100644 --- a/frontend/src/scenes/sessions/SessionsPlayerDrawer.tsx +++ b/frontend/src/scenes/sessions/SessionsPlayerDrawer.tsx @@ -1,11 +1,9 @@ import React from 'react' -import { Drawer } from 'antd' +import { Button, Drawer } from 'antd' import { useActions, useValues } from 'kea' import { Loading } from 'lib/utils' import { sessionsTableLogic } from 'scenes/sessions/sessionsTableLogic' -import { Player } from 'posthog-react-rrweb-player' - -import 'posthog-react-rrweb-player/dist/index.css' +import SessionsPlayer from 'scenes/sessions/SessionsPlayer' export default function SessionsPlayerDrawer(): JSX.Element { const { sessionPlayerData, sessionPlayerDataLoading, sessionRecordingNavigation: nav } = useValues( @@ -16,22 +14,22 @@ export default function SessionsPlayerDrawer(): JSX.Element { return ( + {nav.prev && ( + + )} + {nav.next && } + + } > -
- {sessionPlayerDataLoading ? ( - - ) : ( - loadSessionPlayer(nav.prev!) : undefined} - onNext={nav.next ? () => loadSessionPlayer(nav.next!) : undefined} - /> - )} -
+ {sessionPlayerDataLoading ? : } ) } diff --git a/package.json b/package.json index 03a9447c7e73b..2d4ade9193d18 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,6 @@ "posthog-js": "1.7.0-alpha.1", "posthog-js-lite": "^0.0.3", "posthog-plugins": "0.1.3", - "posthog-react-rrweb-player": "^1.0.3", "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.12.0", @@ -67,6 +66,7 @@ "redux": "^4.0.5", "reselect": "^4.0.0", "rrweb": "^0.9.9", + "rrweb-player": "^0.6.2", "sass": "^1.26.2", "zxcvbn": "^4.4.2" }, diff --git a/yarn.lock b/yarn.lock index 67397e30aa870..4e2279ee2af20 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6837,18 +6837,6 @@ posthog-plugins@0.1.3: resolved "https://registry.yarnpkg.com/posthog-plugins/-/posthog-plugins-0.1.3.tgz#3a47f1303733720c308f33f67162ca2823845bbf" integrity sha512-6VElUUux/AA+uetGWk9p0+cep8+ByE0P0Zv8cypT9z/3hLUhueTjrvQZDL835656BOPtVRdBOxjBqQ7fYog57g== -posthog-react-rrweb-player@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/posthog-react-rrweb-player/-/posthog-react-rrweb-player-1.0.3.tgz#3431829ec6e033534a3172a5532c1b8b854b4d1a" - integrity sha512-uIx9Hkv8pEPGDMY0c2ezUBlr0zfw+N/fkPJ1wI0ZtA405ZS0v16rNPmtT/UULDg3oHWsS9JCt/EiXy1ZpQ69+Q== - dependencies: - rc-slider "^9.6.2" - react-transition-group "^4.4.1" - rrweb "^0.9.9" - screenfull "^5.0.2" - use-debounce "^5.1.0" - use-local-storage-state "^6.0.0" - prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -7305,17 +7293,6 @@ rc-select@~11.4.0: rc-virtual-list "^3.2.0" warning "^4.0.3" -rc-slider@^9.6.2: - version "9.6.4" - resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-9.6.4.tgz#19af39ad22927de2f6d524e0a14f3b1cf17ba659" - integrity sha512-TgmfOh1Jj9fHsW2eDeldFy4mOKwyHn4krl4K6gqbXhGFND7jVRdfA0m7TDUx3gGeX7A17fM1QZymMO/NRJmoLw== - dependencies: - "@babel/runtime" "^7.10.1" - classnames "^2.2.5" - rc-tooltip "^5.0.1" - rc-util "^5.0.0" - shallowequal "^1.1.0" - rc-slider@~9.6.1: version "9.6.1" resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-9.6.1.tgz#bfa8b3dc3b5d2c4600889af47a72f678d8878805" @@ -7585,7 +7562,7 @@ react-toastify@^5.5.0: prop-types "^15.7.2" react-transition-group "^4" -react-transition-group@^4, react-transition-group@^4.4.1: +react-transition-group@^4: version "4.4.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== @@ -7918,6 +7895,13 @@ ripemd160@^2.0.0, ripemd160@^2.0.1: hash-base "^3.0.0" inherits "^2.0.1" +rrweb-player@^0.6.2: + version "0.6.4" + resolved "https://registry.yarnpkg.com/rrweb-player/-/rrweb-player-0.6.4.tgz#0335f1e968b6c1013987dd660eb44ef8981db793" + integrity sha512-h2XJfkSv0gqTxxVrWrqQ5BnBBjIpjkUrh3GEJNiIKnI3k+1YMt02alMl+jy+1k4XssTeXnvwnkj2KHthHdO/LQ== + dependencies: + rrweb "^0.9.9" + rrweb-snapshot@^0.8.4: version "0.8.4" resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.4.tgz#3f8bf1270975f9dfad60321a29067d2ea39e3c39" @@ -8040,7 +8024,7 @@ schema-utils@^3.0.0: ajv "^6.12.5" ajv-keywords "^3.5.2" -screenfull@^5.0.0, screenfull@^5.0.2: +screenfull@^5.0.0: version "5.0.2" resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.0.2.tgz#b9acdcf1ec676a948674df5cd0ff66b902b0bed7" integrity sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ== @@ -9100,16 +9084,6 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" -use-debounce@^5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-5.1.0.tgz#3df34bd7449da7dd2dbb10a6513efe701fc79d02" - integrity sha512-fU7O7iel2bA19fxSiPfRkieVGxrow503phSUAGZ/EqiJtCPrU9AdUdrKOAdgh803IrjdIzhj+8eDsDGn4OPy8g== - -use-local-storage-state@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/use-local-storage-state/-/use-local-storage-state-6.0.0.tgz#017c69c64178faa336a2c02ea7910fc146e8168a" - integrity sha512-lLql7/6CFNM6xDz5xpNDsK8oxVjjskRDMm3gKhLkWT+mJ2zePbH4XtDp1x+sOhtVr4INPtDcb41/ut8iQ+SKFg== - use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"