From 980f31a4141eebdeec52650dc823199f6f3f3918 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Tue, 22 Sep 2026 19:44:48 -0400
Subject: [PATCH] fix: auto-hide timers, status bar, keyframe shortcuts in
 Player mode

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/App.svelte | 50 +++++++++++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 479bbbd..8b29354 100644
--- a/src/App.svelte
+++ b/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>