From cf228d47f3a979fb81f900361865560a6b071811 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Wed, 4 Dec 2024 21:01:31 +0000
Subject: [PATCH] feat: keyboard shortcut component

---
 .../player/controller/PlayerController.tsx    | 12 +++++++--
 .../controller/PlayerControllerTime.tsx       | 27 ++++++++++---------
 2 files changed, 24 insertions(+), 15 deletions(-)

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 {
         <LemonButton
             size="xsmall"
             onClick={() => setIsFullScreen(!isFullScreen)}
-            tooltip={`${!isFullScreen ? 'Go' : 'Exit'} full screen (F)`}
+            tooltip={
+                <>
+                    {!isFullScreen ? 'Go' : 'Exit'} full screen <KeyboardShortcut f />
+                </>
+            }
         >
             <IconFullScreen className={clsx('text-2xl', isFullScreen ? 'text-link' : 'text-primary-alt')} />
         </LemonButton>
@@ -194,7 +198,11 @@ function Maximise(): JSX.Element {
         <LemonButton
             size="xsmall"
             onClick={onChangeMaximise}
-            tooltip={`${isMaximised ? 'Open' : 'Close'} other panels (M)`}
+            tooltip={
+                <>
+                    {isMaximised ? 'Open' : 'Close'} other panels <KeyboardShortcut m />
+                </>
+            }
             icon={isMaximised ? <IconCollapse45 className="text-lg" /> : <IconExpand45 className="text-lg" />}
         />
     )
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<Record<HotKeyOrModifier, true>> = {}
+    if (direction === 'forward') {
+        arrowKey.arrowright = true
+    }
+    if (direction === 'backward') {
+        arrowKey.arrowleft = true
+    }
 
     return (
         <Tooltip
@@ -56,18 +63,12 @@ export function SeekSkip({ direction }: { direction: 'forward' | 'backward' }):
                 <div className="text-center">
                     {!altKeyHeld ? (
                         <>
-                            {capitalizeFirstLetter(direction)} {jumpTimeSeconds}s (
-                            <kbd>
-                                {arrowSymbol} {arrowName} arrow
-                            </kbd>
-                            ) <br />
+                            {capitalizeFirstLetter(direction)} {jumpTimeSeconds}s <KeyboardShortcut {...arrowKey} />
+                            <br />
                         </>
                     ) : null}
-                    {capitalizeFirstLetter(direction)} 1 frame ({ONE_FRAME_MS}ms) (
-                    <kbd>
-                        {altKeyName} + {arrowSymbol}
-                    </kbd>
-                    )
+                    {capitalizeFirstLetter(direction)} 1 frame ({ONE_FRAME_MS}ms){' '}
+                    <KeyboardShortcut option {...arrowKey} />
                 </div>
             }
         >