chore: renaming and moving snapshot loading (#21207)

PostHog · Mar 28, 2024 · 668ea16 · 668ea16
1 parent ead1438
commit 668ea16
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 38 deletions.
diff --git a/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts b/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts
@@ -1,5 +1,4 @@
 import { lemonToast } from '@posthog/lemon-ui'
-import { eventWithTime } from '@rrweb/types'
 import { BuiltLogic, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import { beforeUnload } from 'kea-router'
@@ -10,7 +9,7 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
-import { Breadcrumb, PersonType, RecordingSnapshot, ReplayTabs, SessionRecordingType } from '~/types'
+import { Breadcrumb, ReplayTabs } from '~/types'
 
 import {
     deduplicateSnapshots,
@@ -19,23 +18,7 @@ import {
 } from '../player/sessionRecordingDataLogic'
 import type { sessionRecordingDataLogicType } from '../player/sessionRecordingDataLogicType'
 import type { sessionRecordingFilePlaybackLogicType } from './sessionRecordingFilePlaybackLogicType'
-
-export type ExportedSessionRecordingFileV1 = {
-    version: '2022-12-02'
-    data: {
-        person: PersonType | null
-        snapshotsByWindowId: Record<string, eventWithTime[]>
-    }
-}
-
-export type ExportedSessionRecordingFileV2 = {
-    version: '2023-04-28'
-    data: {
-        id: SessionRecordingType['id']
-        person: SessionRecordingType['person']
-        snapshots: RecordingSnapshot[]
-    }
-}
+import { ExportedSessionRecordingFileV1, ExportedSessionRecordingFileV2 } from './types'
 
 export const createExportedSessionRecording = (
     logic: BuiltLogic<sessionRecordingDataLogicType>,
@@ -95,7 +78,7 @@ export const parseExportedSessionRecording = (fileData: string): ExportedSession
  * in practice, it will only wait for 1-2 retries
  * but a timeout is provided to avoid waiting forever when something breaks
  */
-const waitForDataLogic = async (playerKey: string): Promise<BuiltLogic<any>> => {
+const waitForDataLogic = async (playerKey: string): Promise<BuiltLogic<sessionRecordingDataLogicType>> => {
     const maxRetries = 20 // 2 seconds / 100 ms per retry
     let retries = 0
     let dataLogic = null

diff --git a/frontend/src/scenes/session-recordings/file-playback/types.ts b/frontend/src/scenes/session-recordings/file-playback/types.ts
@@ -0,0 +1,20 @@
+import { eventWithTime } from '@rrweb/types'
+
+import { PersonType, RecordingSnapshot, SessionRecordingType } from '~/types'
+
+export type ExportedSessionRecordingFileV1 = {
+    version: '2022-12-02'
+    data: {
+        person: PersonType | null
+        snapshotsByWindowId: Record<string, eventWithTime[]>
+    }
+}
+
+export type ExportedSessionRecordingFileV2 = {
+    version: '2023-04-28'
+    data: {
+        id: SessionRecordingType['id']
+        person: SessionRecordingType['person']
+        snapshots: RecordingSnapshot[]
+    }
+}
diff --git a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx
@@ -15,11 +15,8 @@ import { SessionPlayerState } from '~/types'
 import { PlayerUpNext } from './PlayerUpNext'
 import { SimilarRecordings } from './SimilarRecordings'
 
-const PlayerFrameOverlayContent = ({
-    currentPlayerState,
-}: {
-    currentPlayerState: SessionPlayerState
-}): JSX.Element | null => {
+const PlayerFrameOverlayContent = (): JSX.Element | null => {
+    const { currentPlayerState } = useValues(sessionRecordingPlayerLogic)
     let content = null
     const pausedState =
         currentPlayerState === SessionPlayerState.PAUSE || currentPlayerState === SessionPlayerState.READY
@@ -81,7 +78,7 @@ const PlayerFrameOverlayContent = ({
 }
 
 export function PlayerFrameOverlay(): JSX.Element {
-    const { currentPlayerState, playlistLogic } = useValues(sessionRecordingPlayerLogic)
+    const { playlistLogic } = useValues(sessionRecordingPlayerLogic)
     const { togglePlayPause } = useActions(sessionRecordingPlayerLogic)
     const hasSimilarRecordings = useFeatureFlag('REPLAY_SIMILAR_RECORDINGS')
 
@@ -94,7 +91,7 @@ export function PlayerFrameOverlay(): JSX.Element {
             onMouseMove={() => setInterrupted(true)}
             onMouseOut={() => setInterrupted(false)}
         >
-            <PlayerFrameOverlayContent currentPlayerState={currentPlayerState} />
+            <PlayerFrameOverlayContent />
             {hasSimilarRecordings && <SimilarRecordings />}
             {playlistLogic ? (
                 <PlayerUpNext

diff --git a/...src/scenes/session-recordings/player/__snapshots__/sessionRecordingDataLogic.test.ts.snap b/...src/scenes/session-recordings/player/__snapshots__/sessionRecordingDataLogic.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`sessionRecordingDataLogic prepareRecordingSnapshots should match snapshot 1`] = `
+exports[`sessionRecordingDataLogic deduplicateSnapshots should match snapshot 1`] = `
 [
   {
     "data": {

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts
@@ -292,7 +292,7 @@ describe('sessionRecordingDataLogic', () => {
         })
     })
 
-    describe('prepareRecordingSnapshots', () => {
+    describe('deduplicateSnapshots', () => {
         it('should remove duplicate snapshots and sort by timestamp', () => {
             const snapshots = convertSnapshotsByWindowId(sortedRecordingSnapshotsJson.snapshot_data_by_window_id)
             const snapshotsWithDuplicates = snapshots
@@ -309,7 +309,7 @@ describe('sessionRecordingDataLogic', () => {
             // these two snapshots are not duplicates but have the same timestamp and delay
             // this regression test proves that we deduplicate them against themselves
             // prior to https://github.com/PostHog/posthog/pull/20019
-            // each time prepareRecordingSnapshots was called with this input
+            // each time deduplicateSnapshots was called with this input
             // the result would be one event longer, introducing, instead of removing, a duplicate
             const verySimilarSnapshots: RecordingSnapshot[] = [
                 {

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
@@ -53,10 +53,6 @@ import { createSegments, mapSnapshotsToWindowId } from './utils/segmenter'
 const IS_TEST_MODE = process.env.NODE_ENV === 'test'
 const BUFFER_MS = 60000 // +- before and after start and end of a recording to query for.
 const DEFAULT_REALTIME_POLLING_MILLIS = 3000
-const REALTIME_POLLING_PARAMS = {
-    source: SnapshotSourceType.realtime,
-    version: '2',
-}
 
 let postHogEEModule: PostHogEE
 
@@ -475,10 +471,9 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
             null as SessionPlayerSnapshotData | null,
             {
                 pollRecordingSnapshots: async (_, breakpoint: BreakPointFunction) => {
-                    const params = { ...REALTIME_POLLING_PARAMS }
-
-                    if (values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_V3_INGESTION_PLAYBACK]) {
-                        params.version = '3'
+                    const params = {
+                        version: values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_V3_INGESTION_PLAYBACK] ? '3' : '2',
+                        source: SnapshotSourceType.realtime,
                     }
 
                     await breakpoint(1) // debounce