Show centered play button when video is paused

index.html

@@ -149,6 +149,19 @@
     }
     .video-wrap { position: relative; background: #050506; }
     video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #050506; }
+    .video-play-toggle {
+      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+      width: 48px; height: 48px; display: grid; place-items: center;
+      border-radius: 999px; color: var(--accent-ink); background: rgba(244,244,245,.92);
+      box-shadow: 0 10px 30px rgba(0,0,0,.28); z-index: 4;
+      transition: opacity .15s ease, transform .15s ease, background .15s ease;
+    }
+    .video-play-toggle svg { width: 20px; height: 20px; margin-left: 2px; }
+    .video-play-toggle:hover { background: #fff; transform: translate(-50%, -50%) scale(1.04); }
+    .video-wrap.no-video .video-play-toggle,
+    .video-wrap.playing .video-play-toggle {
+      opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.96);
+    }
     .caption-overlay {
       position: absolute; left: 12px; right: 12px; bottom: 12px;
       padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
@@ -294,8 +307,11 @@
 
         <div class="viewer">
           <section class="stage">
-            <div class="video-wrap">
+            <div class="video-wrap no-video" id="videoWrap">
               <video id="video" controls playsinline></video>
+              <button class="video-play-toggle" id="videoPlayToggle" type="button" aria-label="Play video">
+                <i data-lucide="play"></i>
+              </button>
               <div class="caption-overlay" id="captionOverlay">
                 <small>Active caption</small>
                 <div id="activeCaption" class="empty">Run analysis to sync captions with playback.</div>
@@ -351,7 +367,9 @@
       dropEmpty: $("dropEmpty"),
       fileName: $("fileName"),
       videoInput: $("videoInput"),
+      videoWrap: $("videoWrap"),
       video: $("video"),
+      videoPlayToggle: $("videoPlayToggle"),
       taskGroup: $("taskGroup"),
       eventField: $("eventField"),
       eventInput: $("eventInput"),
@@ -419,6 +437,20 @@
       els.dropzone.classList.add("has-file");
       els.fileName.textContent = label || file?.name || "video";
       setStatus("Clip loaded", "file-video");
+      syncPlayOverlay();
+    }
+    function syncPlayOverlay() {
+      const hasVideo = Boolean(els.video.getAttribute("src"));
+      const playing = hasVideo && !els.video.paused && !els.video.ended;
+      els.videoWrap.classList.toggle("no-video", !hasVideo);
+      els.videoWrap.classList.toggle("playing", playing);
+    }
+    function toggleVideoPlayback() {
+      if (!els.video.getAttribute("src")) return;
+      if (els.video.ended) els.video.currentTime = 0;
+      if (els.video.paused) els.video.play().catch(() => {});
+      else els.video.pause();
+      syncPlayOverlay();
     }
     function playCurrentVideo() {
       els.video.muted = true;
@@ -651,9 +683,14 @@
     });
     els.eventInput.addEventListener("input", () => { state.exampleMatchesPreset = false; });
     els.video.addEventListener("timeupdate", updateActiveCaption);
+    ["play", "pause", "ended", "loadeddata", "emptied"].forEach((name) => {
+      els.video.addEventListener(name, syncPlayOverlay);
+    });
     els.video.addEventListener("loadedmetadata", () => {
       els.durationTime.textContent = seconds(els.video.duration || 0);
+      syncPlayOverlay();
     });
+    els.videoPlayToggle.addEventListener("click", toggleVideoPlayback);
     els.runBtn.addEventListener("click", analyze);
 
     resetAnalysis();