diff --git a/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts b/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts index b6f547603114b..2c3ab70fab516 100644 --- 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 - } -} - -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, @@ -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> => { +const waitForDataLogic = async (playerKey: string): Promise> => { 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 new file mode 100644 index 0000000000000..61f609f904d4e --- /dev/null +++ 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 + } +} + +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 index 0dbdd8d628a95..570a245c377e6 100644 --- 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)} > - + {hasSimilarRecordings && } {playlistLogic ? ( { }) }) - 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 index 0aff48444a7e9..d71d860d5a568 100644 --- 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([ 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