Revert "Use our own session recording player (#2470)" (#2477)

PostHog · Nov 23, 2020 · c601024 · c601024
1 parent 7e779a7
commit c601024
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 52 deletions.
diff --git a/frontend/src/scenes/sessions/SessionsPlayer.tsx 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<HTMLDivElement | null>(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 <div ref={target} id="sessions-player" className="ph-no-capture" />
+}
diff --git 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
@@ -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 (
         <Drawer
             title="Session recording"
-            width={window.innerWidth - 300}
+            width={1000}
             onClose={closeSessionPlayer}
             destroyOnClose={true}
             visible={true}
+            footer={
+                <>
+                    {nav.prev && (
+                        <Button style={{ marginRight: 12 }} onClick={() => nav.prev && loadSessionPlayer(nav.prev)}>
+                            Previous
+                        </Button>
+                    )}
+                    {nav.next && <Button onClick={() => nav.next && loadSessionPlayer(nav.next)}>Next</Button>}
+                </>
+            }
         >
-            <div className="ph-no-capture" style={{ height: '90%' }}>
-                {sessionPlayerDataLoading ? (
-                    <Loading />
-                ) : (
-                    <Player
-                        events={sessionPlayerData}
-                        onPrevious={nav.prev ? () => loadSessionPlayer(nav.prev!) : undefined}
-                        onNext={nav.next ? () => loadSessionPlayer(nav.next!) : undefined}
-                    />
-                )}
-            </div>
+            {sessionPlayerDataLoading ? <Loading /> : <SessionsPlayer events={sessionPlayerData} />}
         </Drawer>
     )
 }
diff --git 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
@@ -6837,18 +6837,6 @@ [email protected]:
   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"