From 9ed100f23594bff947012e8f7563ad6378514d33 Mon Sep 17 00:00:00 2001
From: Jonathan Jackson <jjackson@dimagi.com>
Date: Tue, 19 May 2026 16:18:23 -0400
Subject: [PATCH] fix(videos): play overlay no longer blocks the native
 scrubber
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@jjackson reported: "I can't drag the time slider forward or back
successfully, it just resumes playing where it is."

Cause: PR #450 turned the play overlay into a real <button> with
`absolute inset-0`, which covered the entire video including the
native controls strip at the bottom. Before first play, the user
trying to drag the scrubber clicked the overlay button instead, which
called v.play() from the original currentTime (= 0). From the user's
perspective the seek did nothing and the video started over.

Fix: shrink the overlay to a centered round affordance (the same
visual but positioned with `top-1/2 left-1/2 -translate-*` instead of
`inset-0`). Native scrubber / play / volume / fullscreen controls
along the bottom are always reachable.

Verified geometry: with the player at 768×432px, the button is 68×68
centered, leaving 182px of clear space below it — well clear of the
~40px native controls strip.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/components/videos/FinalVideoPlayer.tsx    | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/videos/FinalVideoPlayer.tsx b/frontend/src/components/videos/FinalVideoPlayer.tsx
index 7afaee9..f0800bb 100644
--- a/frontend/src/components/videos/FinalVideoPlayer.tsx
+++ b/frontend/src/components/videos/FinalVideoPlayer.tsx
@@ -81,6 +81,15 @@ export function FinalVideoPlayer() {
         }}
       />
       {!hasPlayed && (
+        // Centered, button-sized — NOT inset-0. The previous full-bleed
+        // version covered the native controls strip at the bottom of
+        // the video, so users trying to drag the seek bar before first
+        // play hit the overlay button instead and the video would just
+        // start from currentTime=0. Now the overlay is a single round
+        // affordance over the visual middle of the player; the native
+        // scrubber / volume / fullscreen controls along the bottom are
+        // always reachable. `top-1/2 left-1/2 -translate-*` centers it
+        // without claiming the whole frame.
         <button
           type="button"
           aria-label="Play video"
@@ -88,11 +97,9 @@ export function FinalVideoPlayer() {
             e.stopPropagation();
             handlePlay();
           }}
-          className="absolute inset-0 flex cursor-pointer items-center justify-center bg-transparent focus:outline-none"
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black/55 p-4 text-white opacity-90 shadow-lg backdrop-blur-sm transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white/60"
         >
-          <span className="rounded-full bg-black/55 p-4 text-white opacity-90 shadow-lg backdrop-blur-sm transition-opacity hover:opacity-100">
-            <svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
-          </span>
+          <svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
         </button>
       )}
     </div>