feat: player control v2 (#26642)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Dec 4, 2024 · 8b483e2 · 8b483e2
1 parent 5e9ae64
commit 8b483e2
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 124 deletions.
diff --git a/frontend/__snapshots__/replay-player-success--recent-recordings--dark.png b/frontend/__snapshots__/replay-player-success--recent-recordings--dark.png
diff --git a/frontend/__snapshots__/replay-player-success--recent-recordings--light.png b/frontend/__snapshots__/replay-player-success--recent-recordings--light.png
diff --git a/frontend/__snapshots__/replay-player-success--second-recording-in-list--dark.png b/frontend/__snapshots__/replay-player-success--second-recording-in-list--dark.png
diff --git a/frontend/__snapshots__/replay-player-success--second-recording-in-list--light.png b/frontend/__snapshots__/replay-player-success--second-recording-in-list--light.png
diff --git a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx
@@ -5,14 +5,11 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { IconErrorOutline, IconSync } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { useState } from 'react'
 import { sessionRecordingPlayerLogic } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
 
 import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
 import { SessionPlayerState } from '~/types'
 
-import { PlayerUpNext } from './PlayerUpNext'
-
 const PlayerFrameOverlayContent = (): JSX.Element | null => {
     const { currentPlayerState, endReached } = useValues(sessionRecordingPlayerLogic)
     let content = null
@@ -80,26 +77,11 @@ const PlayerFrameOverlayContent = (): JSX.Element | null => {
 }
 
 export function PlayerFrameOverlay(): JSX.Element {
-    const { playlistLogic } = useValues(sessionRecordingPlayerLogic)
     const { togglePlayPause } = useActions(sessionRecordingPlayerLogic)
 
-    const [interrupted, setInterrupted] = useState(false)
-
     return (
-        <div
-            className="PlayerFrameOverlay"
-            onClick={togglePlayPause}
-            onMouseMove={() => setInterrupted(true)}
-            onMouseOut={() => setInterrupted(false)}
-        >
+        <div className="PlayerFrameOverlay" onClick={togglePlayPause}>
             <PlayerFrameOverlayContent />
-            {playlistLogic ? (
-                <PlayerUpNext
-                    playlistLogic={playlistLogic}
-                    interrupted={interrupted}
-                    clearInterrupted={() => setInterrupted(false)}
-                />
-            ) : undefined}
         </div>
     )
 }
diff --git a/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss b/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss
@@ -1,43 +1,14 @@
 .PlayerUpNext {
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
     z-index: 11;
     transition: 250ms transform ease-out;
-
-    &--enter {
-        transform: translateY(200%);
-    }
-
-    &--enter-active,
-    &--enter-done {
-        transform: translateY(0%);
-    }
-
-    &--exit {
-        transform: translateY(0%);
-    }
-
-    &--exit-active {
-        transform: translateY(200%);
-    }
 }
 
 .PlayerUpNextButton {
-    position: relative;
     display: flex;
     align-items: center;
-    min-height: 2.5rem;
-    padding: 0.25rem 0.75rem;
     overflow: hidden;
-    font-weight: 600;
-    line-height: 1.5rem;
     cursor: pointer;
-    background-color: rgb(255 255 255 / 75%);
     backdrop-filter: blur(5px);
-    border: 1px solid rgb(0 0 0 / 50%);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-elevation-3000);
 
     .PlayerUpNextButtonBackground {
         position: absolute;
@@ -46,7 +17,7 @@
         left: 0;
         width: 0;
         color: var(--primary-alt);
-        background-color: var(--bg-light);
+        background-color: var(--border-3000);
     }
 
     &.PlayerUpNextButton--animating {

diff --git a/frontend/src/scenes/session-recordings/player/PlayerUpNext.tsx b/frontend/src/scenes/session-recordings/player/PlayerUpNext.tsx
@@ -3,28 +3,39 @@ import './PlayerUpNext.scss'
 import { IconPlay } from '@posthog/icons'
 import clsx from 'clsx'
 import { BuiltLogic, useActions, useValues } from 'kea'
+import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { useEffect, useRef, useState } from 'react'
-import { CSSTransition } from 'react-transition-group'
+
+import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 
 import { sessionRecordingsPlaylistLogicType } from '../playlist/sessionRecordingsPlaylistLogicType'
 import { sessionRecordingPlayerLogic } from './sessionRecordingPlayerLogic'
 
 export interface PlayerUpNextProps {
     playlistLogic: BuiltLogic<sessionRecordingsPlaylistLogicType>
-    interrupted?: boolean
-    clearInterrupted?: () => void
 }
 
-export function PlayerUpNext({ interrupted, clearInterrupted, playlistLogic }: PlayerUpNextProps): JSX.Element | null {
+export function PlayerUpNext({ playlistLogic }: PlayerUpNextProps): JSX.Element | null {
     const timeoutRef = useRef<any>()
-    const { endReached } = useValues(sessionRecordingPlayerLogic)
-    const { reportNextRecordingTriggered } = useActions(sessionRecordingPlayerLogic)
+    const { endReached, playNextAnimationInterrupted } = useValues(sessionRecordingPlayerLogic)
+    const { reportNextRecordingTriggered, setPlayNextAnimationInterrupted } = useActions(sessionRecordingPlayerLogic)
     const [animate, setAnimate] = useState(false)
 
     const { nextSessionRecording } = useValues(playlistLogic)
     const { setSelectedRecordingId } = useActions(playlistLogic)
 
+    useKeyboardHotkeys({
+        n: {
+            action: () => {
+                if (nextSessionRecording?.id) {
+                    reportNextRecordingTriggered(false)
+                    setSelectedRecordingId(nextSessionRecording.id)
+                }
+            },
+        },
+    })
+
     const goToRecording = (automatic: boolean): void => {
         if (!nextSessionRecording?.id) {
             return
@@ -38,41 +49,45 @@ export function PlayerUpNext({ interrupted, clearInterrupted, playlistLogic }: P
 
         if (endReached && nextSessionRecording?.id) {
             setAnimate(true)
-            clearInterrupted?.()
+            setPlayNextAnimationInterrupted(false)
             timeoutRef.current = setTimeout(() => {
                 goToRecording(true)
-            }, 3000) // NOTE: Keep in sync with SCSS
+            }, 30000) // NOTE: Keep in sync with SCSS
         }
 
         return () => clearTimeout(timeoutRef.current)
     }, [endReached, !!nextSessionRecording])
 
     useEffect(() => {
-        if (interrupted) {
+        if (playNextAnimationInterrupted) {
             clearTimeout(timeoutRef.current)
             setAnimate(false)
         }
-    }, [interrupted])
+    }, [playNextAnimationInterrupted])
 
     if (!nextSessionRecording) {
         return null
     }
 
     return (
-        <CSSTransition in={endReached} timeout={250} classNames="PlayerUpNext-" mountOnEnter unmountOnExit>
-            <Tooltip title="Play the next recording (press enter)">
-                <div className="PlayerUpNext">
-                    <div
-                        className={clsx('PlayerUpNextButton', animate && 'PlayerUpNextButton--animating')}
-                        onClick={() => goToRecording(false)}
-                    >
-                        <div className="PlayerUpNextButtonBackground" />
-                        <div className="z-10 flex items-center gap-2">
-                            <IconPlay className="text-lg" /> Next recording
-                        </div>
+        <Tooltip
+            title={
+                <>
+                    Play the next recording <KeyboardShortcut n />
+                </>
+            }
+        >
+            <div className="PlayerUpNext text-xs">
+                <div
+                    className={clsx('px-1 py-0.5 PlayerUpNextButton', animate && 'PlayerUpNextButton--animating')}
+                    onClick={() => goToRecording(false)}
+                >
+                    <div className="PlayerUpNextButtonBackground" />
+                    <div className="z-10 flex items-center gap-1">
+                        <IconPlay className="text-lg" /> Play next
                     </div>
                 </div>
-            </Tooltip>
-        </CSSTransition>
+            </div>
+        </Tooltip>
     )
 }
diff --git a/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx b/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx
@@ -92,6 +92,7 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
     const { isFullScreen, explorerMode, isBuffering, messageTooLargeWarnings } = useValues(
         sessionRecordingPlayerLogic(logicProps)
     )
+    const { setPlayNextAnimationInterrupted } = useActions(sessionRecordingPlayerLogic(logicProps))
     const speedHotkeys = useMemo(() => createPlaybackSpeedKey(setSpeed), [setSpeed])
     const { isVerticallyStacked, sidebarOpen, playbackMode } = useValues(playerSettingsLogic)
 
@@ -185,6 +186,8 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
                     `SessionRecordingPlayer--${size}`
                 )}
                 onClick={incrementClickCount}
+                onMouseMove={() => setPlayNextAnimationInterrupted(true)}
+                onMouseOut={() => setPlayNextAnimationInterrupted(false)}
             >
                 <FloatingContainerContext.Provider value={playerRef}>
                     {explorerMode ? (

diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx
@@ -1,4 +1,4 @@
-import { IconCollapse45, IconExpand45, IconPause, IconPlay, IconSearch } from '@posthog/icons'
+import { IconClock, IconCollapse45, IconExpand45, IconPause, IconPlay, IconSearch } from '@posthog/icons'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
@@ -10,11 +10,13 @@ import {
     SettingsMenu,
     SettingsToggle,
 } from 'scenes/session-recordings/components/PanelSettings'
-import { playerSettingsLogic } from 'scenes/session-recordings/player/playerSettingsLogic'
+import { playerSettingsLogic, TimestampFormat } from 'scenes/session-recordings/player/playerSettingsLogic'
+import { PlayerUpNext } from 'scenes/session-recordings/player/PlayerUpNext'
 import {
     PLAYBACK_SPEEDS,
     sessionRecordingPlayerLogic,
 } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
+import { TimestampFormatToLabel } from 'scenes/session-recordings/utils'
 
 import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 import { SessionPlayerState } from '~/types'
@@ -117,12 +119,39 @@ function InspectDOM(): JSX.Element {
 }
 
 function PlayerBottomSettings(): JSX.Element {
+    const { timestampFormat } = useValues(playerSettingsLogic)
+    const { setTimestampFormat } = useActions(playerSettingsLogic)
+
     return (
-        <SettingsBar border="top">
-            <SkipInactivity />
-            <ShowMouseTail />
-            <SetPlaybackSpeed />
-            <InspectDOM />
+        <SettingsBar border="top" className="justify-between">
+            <div className="flex flex-row gap-0.5">
+                <SkipInactivity />
+                <ShowMouseTail />
+                <SetPlaybackSpeed />
+                <SettingsMenu
+                    highlightWhenActive={false}
+                    items={[
+                        {
+                            label: 'UTC',
+                            onClick: () => setTimestampFormat(TimestampFormat.UTC),
+                            active: timestampFormat === TimestampFormat.UTC,
+                        },
+                        {
+                            label: 'Device',
+                            onClick: () => setTimestampFormat(TimestampFormat.Device),
+                            active: timestampFormat === TimestampFormat.Device,
+                        },
+                        {
+                            label: 'Relative',
+                            onClick: () => setTimestampFormat(TimestampFormat.Relative),
+                            active: timestampFormat === TimestampFormat.Relative,
+                        },
+                    ]}
+                    icon={<IconClock />}
+                    label={TimestampFormatToLabel[timestampFormat]}
+                />
+                <InspectDOM />
+            </div>
         </SettingsBar>
     )
 }
@@ -166,31 +195,33 @@ function Maximise(): JSX.Element {
             size="xsmall"
             onClick={onChangeMaximise}
             tooltip={`${isMaximised ? 'Open' : 'Close'} other panels (M)`}
-            icon={isMaximised ? <IconCollapse45 /> : <IconExpand45 />}
-            className="text-2xl"
+            icon={isMaximised ? <IconCollapse45 className="text-lg" /> : <IconExpand45 className="text-lg" />}
         />
     )
 }
 
 export function PlayerController(): JSX.Element {
+    const { playlistLogic } = useValues(sessionRecordingPlayerLogic)
+
     return (
         <div className="bg-bg-light flex flex-col select-none">
             <Seekbar />
-            <div className="w-full flex flex-row gap-0.5 px-2 py-1 items-center">
-                <div className="flex flex-row flex-1 gap-2 justify-start">
+            <div className="w-full px-2 py-1 relative flex items-center justify-center">
+                <div className="absolute left-2">
                     <Timestamp />
-
-                    <div className="flex gap-0.5 items-center justify-center">
-                        <SeekSkip direction="backward" />
-                        <PlayPauseButton />
-                        <SeekSkip direction="forward" />
-                    </div>
                 </div>
-                <div className="flex justify-items-end">
+                <div className="flex gap-0.5 items-center justify-center">
+                    <SeekSkip direction="backward" />
+                    <PlayPauseButton />
+                    <SeekSkip direction="forward" />
+                </div>
+                <div className="absolute right-2 flex justify-end items-center">
+                    {playlistLogic ? <PlayerUpNext playlistLogic={playlistLogic} /> : undefined}
                     <Maximise />
                     <FullScreen />
                 </div>
             </div>
+
             <PlayerBottomSettings />
         </div>
     )

diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx
@@ -4,7 +4,6 @@ import { useActions, useValues } from 'kea'
 import { useKeyHeld } from 'lib/hooks/useKeyHeld'
 import { IconSkipBackward } from 'lib/lemon-ui/icons'
 import { capitalizeFirstLetter, colonDelimitedDuration } from 'lib/utils'
-import { useCallback } from 'react'
 import { SimpleTimeLabel } from 'scenes/session-recordings/components/SimpleTimeLabel'
 import { ONE_FRAME_MS, sessionRecordingPlayerLogic } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
 
@@ -16,39 +15,26 @@ export function Timestamp(): JSX.Element {
         useValues(sessionRecordingPlayerLogic)
     const { isScrubbing, scrubbingTime } = useValues(seekbarLogic(logicProps))
     const { timestampFormat } = useValues(playerSettingsLogic)
-    const { setTimestampFormat } = useActions(playerSettingsLogic)
 
     const startTimeSeconds = ((isScrubbing ? scrubbingTime : currentPlayerTime) ?? 0) / 1000
     const endTimeSeconds = Math.floor(sessionPlayerData.durationMs / 1000)
 
     const fixedUnits = endTimeSeconds > 3600 ? 3 : 2
 
-    const rotateTimestampFormat = useCallback(() => {
-        setTimestampFormat(
-            timestampFormat === 'relative'
-                ? TimestampFormat.UTC
-                : timestampFormat === TimestampFormat.UTC
-                ? TimestampFormat.Device
-                : TimestampFormat.Relative
-        )
-    }, [timestampFormat])
-
     return (
-        <LemonButton data-attr="recording-timestamp" onClick={rotateTimestampFormat} active size="xsmall">
-            <span className="text-center whitespace-nowrap font-mono text-xs">
-                {timestampFormat === TimestampFormat.Relative ? (
-                    <div className="flex gap-0.5">
-                        <span>{colonDelimitedDuration(startTimeSeconds, fixedUnits)}</span>
-                        <span>/</span>
-                        <span>{colonDelimitedDuration(endTimeSeconds, fixedUnits)}</span>
-                    </div>
-                ) : currentTimestamp ? (
-                    <SimpleTimeLabel startTime={currentTimestamp} isUTC={timestampFormat === TimestampFormat.UTC} />
-                ) : (
-                    '--/--/----, 00:00:00'
-                )}
-            </span>
-        </LemonButton>
+        <div data-attr="recording-timestamp" className="text-center whitespace-nowrap font-mono text-xs">
+            {timestampFormat === TimestampFormat.Relative ? (
+                <div className="flex gap-0.5">
+                    <span>{colonDelimitedDuration(startTimeSeconds, fixedUnits)}</span>
+                    <span>/</span>
+                    <span>{colonDelimitedDuration(endTimeSeconds, fixedUnits)}</span>
+                </div>
+            ) : currentTimestamp ? (
+                <SimpleTimeLabel startTime={currentTimestamp} isUTC={timestampFormat === TimestampFormat.UTC} />
+            ) : (
+                '--/--/----, 00:00:00'
+            )}
+        </div>
     )
 }