fix: auto-hide timers, status bar, keyframe shortcuts in Player mode

Co-authored-by: Cursor <cursoragent@cursor.com>

src/App.svelte

@@ -50,8 +50,8 @@
   let showPlayerControls = $state(true);
   let showToolbar = $state(true);
   let showPlayerTimeline = $state(false);
-  let controlsHideTimer = $state<ReturnType<typeof setTimeout> | null>(null);
-  let toolbarHideTimer = $state<ReturnType<typeof setTimeout> | null>(null);
+  let controlsHideTimer: ReturnType<typeof setTimeout> | null = null;
+  let toolbarHideTimer: ReturnType<typeof setTimeout> | null = null;
 
   // Caption state for PlayerControls
   let captionsEnabled = $state(true);
@@ -83,16 +83,10 @@
 
   $effect(() => {
     if (!isPlayerMode) return;
-    if (!session.isPlaying) {
-      // Video paused — show everything
-      showPlayerControls = true;
-      showToolbar = true;
-      if (controlsHideTimer) clearTimeout(controlsHideTimer);
-      if (toolbarHideTimer) clearTimeout(toolbarHideTimer);
-    } else {
-      // Video playing — start hide timers
-      resetControlsTimer();
-    }
+    // Read play state so this re-runs on play/pause changes —
+    // controls briefly show then auto-hide regardless of play state
+    void session.isPlaying;
+    resetControlsTimer();
   });
 
   function dispatchTransport(action: TransportKeyAction) {
@@ -152,21 +146,17 @@
   function resetControlsTimer() {
     if (controlsHideTimer) clearTimeout(controlsHideTimer);
     showPlayerControls = true;
-    if (session.isPlaying) {
-      controlsHideTimer = setTimeout(() => {
-        showPlayerControls = false;
-      }, CONTROLS_HIDE_DELAY);
-    }
+    controlsHideTimer = setTimeout(() => {
+      showPlayerControls = false;
+    }, CONTROLS_HIDE_DELAY);
   }
 
   function resetToolbarTimer() {
     if (toolbarHideTimer) clearTimeout(toolbarHideTimer);
     showToolbar = true;
-    if (session.isPlaying) {
-      toolbarHideTimer = setTimeout(() => {
-        showToolbar = false;
-      }, CONTROLS_HIDE_DELAY);
-    }
+    toolbarHideTimer = setTimeout(() => {
+      showToolbar = false;
+    }, CONTROLS_HIDE_DELAY);
   }
 
   function handlePlayerMouseMove(e: MouseEvent) {
@@ -211,11 +201,19 @@
         break;
       case ',':
         e.preventDefault();
-        dispatchTransport(e.shiftKey ? 'keyframe-back' : 'frame-back');
+        dispatchTransport('frame-back');
         break;
       case '.':
         e.preventDefault();
-        dispatchTransport(e.shiftKey ? 'keyframe-forward' : 'frame-forward');
+        dispatchTransport('frame-forward');
+        break;
+      case '<':
+        e.preventDefault();
+        dispatchTransport('keyframe-back');
+        break;
+      case '>':
+        e.preventDefault();
+        dispatchTransport('keyframe-forward');
         break;
       case 'ArrowLeft':
         e.preventDefault();
@@ -460,7 +458,9 @@
     {/if}
   </main>
 
-  <StatusBar onOpenAbout={() => (showAboutDialog = true)} />
+  {#if !isPlayerMode}
+    <StatusBar onOpenAbout={() => (showAboutDialog = true)} />
+  {/if}
 </div>
 
 <style>