diff --git a/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx b/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx index db3a60815c494d..f5dac522783bac 100644 --- a/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx +++ b/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx @@ -8,7 +8,7 @@ import { FloatingContainerContext } from 'lib/hooks/useFloatingContainerContext' import { HotkeysInterface, useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys' import { usePageVisibility } from 'lib/hooks/usePageVisibility' import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver' -import { useMemo, useRef, useState } from 'react' +import { useMemo, useRef } from 'react' import { useNotebookDrag } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook' import { PlayerController } from 'scenes/session-recordings/player/controller/PlayerController' import { PlayerInspector } from 'scenes/session-recordings/player/inspector/PlayerInspector' @@ -21,6 +21,7 @@ import { NetworkView } from '../apm/NetworkView' import { PlayerFrameOverlay } from './PlayerFrameOverlay' import { PlayerMeta } from './PlayerMeta' import { PlayerPersonMeta } from './PlayerPersonMeta' +import { PlaybackViewMode, playerSettingsLogic } from './playerSettingsLogic' import { sessionRecordingDataLogic } from './sessionRecordingDataLogic' import { ONE_FRAME_MS, @@ -43,8 +44,6 @@ enum InspectorStacking { Horizontal = 'horizontal', } -type PlaybackViewType = 'waterfall' | 'playback' | 'inspector' - export const createPlaybackSpeedKey = (action: (val: number) => void): HotkeysInterface => { return PLAYBACK_SPEEDS.map((x, i) => ({ key: `${i}`, value: x })).reduce( (acc, x) => ({ ...acc, [x.key]: { action: () => action(x.value) } }), @@ -96,6 +95,8 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX. const { isNotFound } = useValues(sessionRecordingDataLogic(logicProps)) const { isFullScreen, explorerMode, isBuffering } = useValues(sessionRecordingPlayerLogic(logicProps)) const speedHotkeys = useMemo(() => createPlaybackSpeedKey(setSpeed), [setSpeed]) + const { preferredInspectorStacking, playbackViewMode } = useValues(playerSettingsLogic) + const { setPreferredInspectorStacking, setPlaybackViewMode } = useActions(playerSettingsLogic) const allowWaterfallView = useFeatureFlag('SESSION_REPLAY_NETWORK_VIEW') @@ -161,11 +162,6 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX. } ) - const isWidescreen = !isFullScreen && size === 'wide' - - const [preferredInspectorStacking, setPreferredInspectorStacking] = useState(InspectorStacking.Horizontal) - const [playerView, setPlayerView] = useState(isWidescreen ? 'inspector' : 'playback') - const compactLayout = size === 'small' const layoutStacking = compactLayout ? InspectorStacking.Vertical : preferredInspectorStacking const isVerticallyStacked = layoutStacking === InspectorStacking.Vertical @@ -180,19 +176,23 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX. ) } - const viewOptions: LemonSegmentedButtonOption[] = [ - { value: 'playback', label: 'Playback', 'data-attr': 'session-recording-player-view-choice-playback' }, + const viewOptions: LemonSegmentedButtonOption[] = [ + { + value: PlaybackViewMode.Playback, + label: 'Playback', + 'data-attr': 'session-recording-player-view-choice-playback', + }, ] if (!noInspector) { viewOptions.push({ - value: 'inspector', + value: PlaybackViewMode.Inspector, label: 'Inspector', 'data-attr': 'session-recording-player-view-choice-inspector', }) } if (allowWaterfallView) { viewOptions.push({ - value: 'waterfall', + value: PlaybackViewMode.Waterfall, label: (
Waterfall @@ -228,12 +228,12 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
- {playerView === 'waterfall' ? ( + {playbackViewMode === PlaybackViewMode.Waterfall ? ( ) : (
- {playerView === 'inspector' && ( + {playbackViewMode === PlaybackViewMode.Inspector && ( setPlayerView('playback')} + onClose={() => setPlaybackViewMode(PlaybackViewMode.Playback)} isVerticallyStacked={isVerticallyStacked} toggleLayoutStacking={ compactLayout diff --git a/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts b/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts index 965e6f33382e3f..80e1221a2f2d30 100644 --- a/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts +++ b/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts @@ -22,6 +22,17 @@ export enum TimestampFormat { Device = 'device', } +export enum InspectorStacking { + Vertical = 'vertical', + Horizontal = 'horizontal', +} + +export enum PlaybackViewMode { + Playback = 'playback', + Inspector = 'inspector', + Waterfall = 'waterfall', +} + const MiniFilters: SharedListMiniFilter[] = [ { tab: SessionRecordingPlayerTab.ALL, @@ -191,6 +202,8 @@ export const playerSettingsLogic = kea([ setPrefersAdvancedFilters: (prefersAdvancedFilters: boolean) => ({ prefersAdvancedFilters }), setQuickFilterProperties: (properties: string[]) => ({ properties }), setTimestampFormat: (format: TimestampFormat) => ({ format }), + setPreferredInspectorStacking: (stacking: InspectorStacking) => ({ stacking }), + setPlaybackViewMode: (mode: PlaybackViewMode) => ({ mode }), }), connect({ values: [teamLogic, ['currentTeam']], @@ -205,6 +218,20 @@ export const playerSettingsLogic = kea([ setShowFilters: (_, { showFilters }) => showFilters, }, ], + preferredInspectorStacking: [ + InspectorStacking.Horizontal as InspectorStacking, + { persist: true }, + { + setPreferredInspectorStacking: (_, { stacking }) => stacking, + }, + ], + playbackViewMode: [ + PlaybackViewMode.Playback as PlaybackViewMode, + { persist: true }, + { + setPlaybackViewMode: (_, { mode }) => mode, + }, + ], prefersAdvancedFilters: [ true, {