chore: only show recording as invalid when no warnings present (#23339)

PostHog · Jul 1, 2024 · 088a132 · 088a132
1 parent aacce8d
commit 088a132
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx b/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx
@@ -4,6 +4,7 @@ import { LemonButton, LemonSegmentedButton, LemonSegmentedButtonOption, LemonTag
 import clsx from 'clsx'
 import { BindLogic, useActions, useValues } from 'kea'
 import { BuilderHog2 } from 'lib/components/hedgehogs'
+import { dayjs } from 'lib/dayjs'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { FloatingContainerContext } from 'lib/hooks/useFloatingContainerContext'
 import { HotkeysInterface, useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
@@ -93,9 +94,11 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
         setSpeed,
         closeExplorer,
     } = useActions(sessionRecordingPlayerLogic(logicProps))
-    const { isNotFound, snapshotsInvalid } = useValues(sessionRecordingDataLogic(logicProps))
+    const { isNotFound, snapshotsInvalid, start } = useValues(sessionRecordingDataLogic(logicProps))
     const { loadSnapshots } = useActions(sessionRecordingDataLogic(logicProps))
-    const { isFullScreen, explorerMode, isBuffering } = useValues(sessionRecordingPlayerLogic(logicProps))
+    const { isFullScreen, explorerMode, isBuffering, messageTooLargeWarnings } = useValues(
+        sessionRecordingPlayerLogic(logicProps)
+    )
     const speedHotkeys = useMemo(() => createPlaybackSpeedKey(setSpeed), [setSpeed])
     const { preferredInspectorStacking, playbackViewMode } = useValues(playerSettingsLogic)
     const { setPreferredInspectorStacking, setPlaybackViewMode } = useActions(playerSettingsLogic)
@@ -168,6 +171,9 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
     const layoutStacking = compactLayout ? InspectorStacking.Vertical : preferredInspectorStacking
     const isVerticallyStacked = layoutStacking === InspectorStacking.Vertical
 
+    const lessThanFiveMinutesOld = dayjs().diff(start, 'minute') <= 5
+    const cannotPlayback = snapshotsInvalid && lessThanFiveMinutesOld && !messageTooLargeWarnings
+
     const { draggable, elementProps } = useNotebookDrag({ href: urls.replaySingle(sessionRecordingId) })
 
     if (isNotFound) {
@@ -244,7 +250,7 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
                                     })}
                                     ref={playerMainRef}
                                 >
-                                    {snapshotsInvalid ? (
+                                    {cannotPlayback ? (
                                         <div className="flex flex-1 flex-col items-center justify-center">
                                             <BuilderHog2 height={200} />
                                             <h1>We're still working on it</h1>

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
@@ -855,9 +855,7 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                     })
                 }
 
-                const minutesSinceRecording = dayjs().diff(start, 'minute')
-
-                return everyWindowMissingFullSnapshot && minutesSinceRecording <= 5
+                return everyWindowMissingFullSnapshot
             },
         ],
-Original file line number
+Diff line change
@@ Expand Up @@
                         })
                     }
-                    const minutesSinceRecording = dayjs().diff(start, 'minute')
-                    return everyWindowMissingFullSnapshot && minutesSinceRecording <= 5
+                    return everyWindowMissingFullSnapshot
                 },
             ],
@@ Expand Down @@