diff --git a/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx b/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx index 20dac8bb0ab24..688884c50942c 100644 --- 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 ? (