diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx index 9306afef52bbd..919fa8b6bd042 100644 --- a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx +++ b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx @@ -163,7 +163,11 @@ function FullScreen(): JSX.Element { setIsFullScreen(!isFullScreen)} - tooltip={`${!isFullScreen ? 'Go' : 'Exit'} full screen (F)`} + tooltip={ + <> + {!isFullScreen ? 'Go' : 'Exit'} full screen + + } > @@ -194,7 +198,11 @@ function Maximise(): JSX.Element { + {isMaximised ? 'Open' : 'Close'} other panels + + } icon={isMaximised ? : } /> ) diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx index 53ac102c92028..417dba1109ce4 100644 --- a/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx +++ b/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx @@ -7,6 +7,9 @@ import { capitalizeFirstLetter, colonDelimitedDuration } from 'lib/utils' import { SimpleTimeLabel } from 'scenes/session-recordings/components/SimpleTimeLabel' import { ONE_FRAME_MS, sessionRecordingPlayerLogic } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic' +import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut' +import { HotKeyOrModifier } from '~/types' + import { playerSettingsLogic, TimestampFormat } from '../playerSettingsLogic' import { seekbarLogic } from './seekbarLogic' @@ -44,10 +47,14 @@ export function SeekSkip({ direction }: { direction: 'forward' | 'backward' }): const altKeyHeld = useKeyHeld('Alt') const jumpTimeSeconds = altKeyHeld ? 1 : jumpTimeMs / 1000 - const altKeyName = navigator.platform.includes('Mac') ? '⌥' : 'Alt' - const arrowSymbol = direction === 'forward' ? '→' : '←' - const arrowName = direction === 'forward' ? 'right' : 'left' + const arrowKey: Partial> = {} + if (direction === 'forward') { + arrowKey.arrowright = true + } + if (direction === 'backward') { + arrowKey.arrowleft = true + } return ( {!altKeyHeld ? ( <> - {capitalizeFirstLetter(direction)} {jumpTimeSeconds}s ( - - {arrowSymbol} {arrowName} arrow - - )
+ {capitalizeFirstLetter(direction)} {jumpTimeSeconds}s +
) : null} - {capitalizeFirstLetter(direction)} 1 frame ({ONE_FRAME_MS}ms) ( - - {altKeyName} + {arrowSymbol} - - ) + {capitalizeFirstLetter(direction)} 1 frame ({ONE_FRAME_MS}ms){' '} + } >