feat: Allow pausing whilst buffering (#17951)

PostHog · Oct 12, 2023 · 503e13b · 503e13b
1 parent 45d5794
commit 503e13b
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 50 deletions.
diff --git a/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts b/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts
@@ -138,7 +138,7 @@ export const sessionRecordingFilePlaybackLogic = kea<sessionRecordingFilePlaybac
 
             const snapshots = prepareRecordingSnapshots(values.sessionRecording.snapshots)
 
-            dataLogic.actions.loadRecordingSnapshotsV2Success({
+            dataLogic.actions.loadRecordingSnapshotsSuccess({
                 snapshots,
             })
 

diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx
@@ -16,7 +16,7 @@ import { More } from 'lib/lemon-ui/LemonButton/More'
 import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 
 export function PlayerController(): JSX.Element {
-    const { currentPlayerState, logicProps, isFullScreen } = useValues(sessionRecordingPlayerLogic)
+    const { playingState, logicProps, isFullScreen } = useValues(sessionRecordingPlayerLogic)
     const { togglePlayPause, exportRecordingToFile, openExplorer, setIsFullScreen } =
         useActions(sessionRecordingPlayerLogic)
 
@@ -25,9 +25,7 @@ export function PlayerController(): JSX.Element {
 
     const mode = logicProps.mode ?? SessionRecordingPlayerMode.Standard
 
-    const showPause = [SessionPlayerState.PLAY, SessionPlayerState.SKIP, SessionPlayerState.BUFFER].includes(
-        currentPlayerState
-    )
+    const showPause = playingState === SessionPlayerState.PLAY
 
     return (
         <div className="bg-bg-light flex flex-col select-none">

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts
@@ -217,8 +217,8 @@ describe('sessionRecordingDataLogic', () => {
                 logic.actions.loadRecordingSnapshots()
             })
                 .toDispatchActionsInAnyOrder([
-                    'loadRecordingSnapshotsV2',
-                    'loadRecordingSnapshotsV2Success',
+                    'loadRecordingSnapshots',
+                    'loadRecordingSnapshotsSuccess',
                     'loadEvents',
                     'loadEventsSuccess',
                 ])

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
@@ -20,8 +20,6 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { eventWithTime } from '@rrweb/types'
 import { Dayjs, dayjs } from 'lib/dayjs'
 import type { sessionRecordingDataLogicType } from './sessionRecordingDataLogicType'
-import { teamLogic } from 'scenes/teamLogic'
-import { userLogic } from 'scenes/userLogic'
 import { chainToElements } from 'lib/utils/elements-chain'
 import { captureException } from '@sentry/react'
 import { createSegments, mapSnapshotsToWindowId } from './utils/segmenter'
@@ -135,7 +133,6 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
     key(({ sessionRecordingId }) => sessionRecordingId || 'no-session-recording-id'),
     connect({
         logic: [eventUsageLogic],
-        values: [teamLogic, ['currentTeamId'], userLogic, ['hasAvailableFeature']],
     }),
     defaults({
         sessionPlayerMetaData: null as SessionRecordingType | null,
@@ -144,10 +141,7 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
         setFilters: (filters: Partial<RecordingEventsFilters>) => ({ filters }),
         loadRecordingMeta: true,
         maybeLoadRecordingMeta: true,
-        loadRecordingSnapshotsV2: (source?: SessionRecordingSnapshotSource) => ({ source }),
-        loadRecordingSnapshots: true,
-        loadRecordingSnapshotsSuccess: true,
-        loadRecordingSnapshotsFailure: true,
+        loadRecordingSnapshots: (source?: SessionRecordingSnapshotSource) => ({ source }),
         loadEvents: true,
         loadFullEventData: (event: RecordingEventType) => ({ event }),
         reportViewed: true,
@@ -185,15 +179,9 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
             }
         },
         loadRecordingSnapshots: () => {
-            if (values.sessionPlayerSnapshotDataLoading) {
-                return
-            }
-            if (!values.sessionPlayerSnapshotData?.snapshots) {
-                actions.loadRecordingSnapshotsV2()
-            }
             actions.loadEvents()
         },
-        loadRecordingSnapshotsV2Success: () => {
+        loadRecordingSnapshotsSuccess: () => {
             const { snapshots, sources } = values.sessionPlayerSnapshotData ?? {}
             if (snapshots && !snapshots.length && sources?.length === 1) {
                 // We got only a snapshot response for realtime, and it was empty
@@ -204,25 +192,19 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                 return
             }
 
-            actions.loadRecordingSnapshotsSuccess()
-
-            const nextSourceToLoad = sources?.find((s) => !s.loaded)
-
-            if (nextSourceToLoad) {
-                actions.loadRecordingSnapshotsV2(nextSourceToLoad)
-            }
-        },
-        loadRecordingSnapshotsSuccess: () => {
             cache.firstPaintDurationRow = {
                 size: (values.sessionPlayerSnapshotData?.snapshots ?? []).length,
                 duration: Math.round(performance.now() - cache.snapshotsStartTime),
             }
 
             actions.reportViewed()
             actions.reportUsageIfFullyLoaded()
-        },
-        loadRecordingSnapshotsV2Failure: () => {
-            actions.loadRecordingSnapshotsFailure()
+
+            const nextSourceToLoad = sources?.find((s) => !s.loaded)
+
+            if (nextSourceToLoad) {
+                actions.loadRecordingSnapshots(nextSourceToLoad)
+            }
         },
         loadEventsSuccess: () => {
             actions.reportUsageIfFullyLoaded()
@@ -303,7 +285,7 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
         sessionPlayerSnapshotData: [
             null as SessionPlayerSnapshotData | null,
             {
-                loadRecordingSnapshotsV2: async ({ source }, breakpoint): Promise<SessionPlayerSnapshotData | null> => {
+                loadRecordingSnapshots: async ({ source }, breakpoint): Promise<SessionPlayerSnapshotData | null> => {
                     if (!props.sessionRecordingId) {
                         return values.sessionPlayerSnapshotData
                     }
@@ -514,7 +496,6 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                 s.sessionPlayerMetaDataLoading,
                 s.sessionPlayerSnapshotDataLoading,
                 s.sessionEventsDataLoading,
-                s.hasAvailableFeature,
             ],
             (
                 sessionPlayerSnapshotData,

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.test.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.test.ts
@@ -99,11 +99,10 @@ describe('sessionRecordingPlayerLogic', () => {
             expect(logic.values.sessionPlayerData).toMatchSnapshot()
 
             await expectLogic(logic).toDispatchActions([
-                sessionRecordingDataLogic({ sessionRecordingId: '2' }).actionTypes.loadRecordingSnapshots,
                 // once to gather sources
-                sessionRecordingDataLogic({ sessionRecordingId: '2' }).actionTypes.loadRecordingSnapshotsV2,
+                sessionRecordingDataLogic({ sessionRecordingId: '2' }).actionTypes.loadRecordingSnapshots,
                 // once to load source from that
-                sessionRecordingDataLogic({ sessionRecordingId: '2' }).actionTypes.loadRecordingSnapshotsV2,
+                sessionRecordingDataLogic({ sessionRecordingId: '2' }).actionTypes.loadRecordingSnapshots,
                 sessionRecordingDataLogic({ sessionRecordingId: '2' }).actionTypes.loadRecordingSnapshotsSuccess,
             ])
 

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts
@@ -108,7 +108,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
             playerSettingsLogic,
             ['speed', 'skipInactivitySetting'],
             userLogic,
-            ['hasAvailableFeature'],
+            ['user', 'hasAvailableFeature'],
             preflightLogic,
             ['preflight'],
             featureFlagLogic,
@@ -762,15 +762,8 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
         },
 
         togglePlayPause: () => {
-            // If buffering, toggle is a noop
-            if (values.currentPlayerState === SessionPlayerState.BUFFER) {
-                return
-            }
             // If paused, start playing
-            if (
-                values.currentPlayerState === SessionPlayerState.PAUSE ||
-                values.currentPlayerState === SessionPlayerState.READY
-            ) {
+            if (values.playingState === SessionPlayerState.PAUSE) {
                 actions.setPlay()
             }
             // If playing, pause
@@ -873,7 +866,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
                 return
             }
 
-            if (!values.hasAvailableFeature(AvailableFeature.RECORDINGS_FILE_EXPORT)) {
+            if (!values.user?.is_impersonated && !values.hasAvailableFeature(AvailableFeature.RECORDINGS_FILE_EXPORT)) {
                 openBillingPopupModal({
                     title: 'Unlock recording exports',
                     description:
@@ -896,7 +889,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
                 const payload = createExportedSessionRecording(sessionRecordingDataLogic(props))
 
                 const recordingFile = new File(
-                    [JSON.stringify(payload)],
+                    [JSON.stringify(payload, null, 2)],
                     `export-${props.sessionRecordingId}.ph-recording.json`,
                     { type: 'application/json' }
                 )

diff --git a/...nd/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss b/...nd/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    height: calc(100vh - 3.5rem - 2rem);
+    height: 100%;
     padding: 0.5rem;
     overflow: hidden;