From 16035bce36a4b0e2b7588057bcf8c57a05cc8431 Mon Sep 17 00:00:00 2001
From: Giorgio Gilestro <giorgio@gilest.ro>
Date: Fri, 1 May 2026 14:46:41 +0100
Subject: [PATCH] Picker: arrow keys behave the same regardless of focus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two complementary fixes:

1. Register the keydown handler on the capture phase. This ensures we
   run before the native HTML <video> element's built-in keyboard
   handler, so our preventDefault actually blocks the default seek.
   Without this, when focus was on the video, both handlers ran and
   the actual jump was the sum of both (±5 s ours + native = >1 min
   in some browsers).

2. Blur the video element on mouseup. After clicking the seekbar the
   video keeps keyboard focus, which made the symptom appear right
   after every scrub. Releasing focus on mouseup avoids that
   altogether.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 scripts/barrier_picker_app/static/index.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/scripts/barrier_picker_app/static/index.html b/scripts/barrier_picker_app/static/index.html
index f2e5bdc..fe229a7 100644
--- a/scripts/barrier_picker_app/static/index.html
+++ b/scripts/barrier_picker_app/static/index.html
@@ -461,7 +461,10 @@
       loadCursor();
     });
 
-    // Keyboard shortcuts
+    // Keyboard shortcuts.
+    // Reason: register on the *capture* phase so we run before the native
+    // <video> element's built-in handlers, which otherwise also seek by
+    // their own amount and double the actual jump.
     document.addEventListener('keydown', (e) => {
       if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
       // Don't react to picker shortcuts while either modal is open.
@@ -488,7 +491,13 @@
         case 's': stop(); submit('skip'); break;
         case 'u': stop(); submit('unusable'); break;
       }
-    });
+    }, true);  // capture phase — beats the native <video> keyboard handler
+
+    // After clicking the seekbar (or anywhere on the video), the player
+    // keeps keyboard focus and intercepts our arrow-key shortcuts. Blur it
+    // on mouseup so subsequent arrow presses go to our document-level
+    // handler unambiguously.
+    player.addEventListener('mouseup', () => player.blur());
 
     // Welcome modal — show first time, dismissable; ? button reopens it.
     const modalBackdrop = document.getElementById('modal-backdrop');