Simplify player controls

index.html

@@ -30,14 +30,7 @@
     .big-play svg { width: 28px; height: 28px; }
 
     /* bottom gradient */
-    .controls-bar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); padding: 30px 12px 10px; }
+    .controls-bar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); padding: 18px 12px 10px; }
-
-    /* scrub bar */
-    .scrub { position: relative; height: 4px; background: rgba(255,255,255,.2); cursor: pointer; margin-bottom: 8px; border-radius: 2px; transition: height .1s; }
-    .scrub:hover { height: 6px; }
-    .scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); border-radius: 2px; pointer-events: none; }
-    .scrub-hover { position: absolute; top: -28px; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; padding: 3px 7px; border-radius: 3px; pointer-events: none; white-space: nowrap; display: none; }
-    .scrub:hover .scrub-hover { display: block; }
 
     /* control row */
     .ctrl-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
@@ -130,10 +123,6 @@
     <video id="video" playsinline></video>
     <div class="big-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
     <div class="controls-bar">
-      <div class="scrub" id="scrub">
-        <div class="scrub-fill" id="scrub-fill"></div>
-        <div class="scrub-hover" id="scrub-hover">00:00</div>
-      </div>
       <div class="ctrl-row">
         <button id="btn-play" aria-label="Play">
           <svg id="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
@@ -196,9 +185,6 @@
   const wrap = document.querySelector("#player-wrap");
   const dateSelect = document.querySelector("#date");
   const timeline = document.querySelector("#timeline");
-  const scrub = document.querySelector("#scrub");
-  const scrubFill = document.querySelector("#scrub-fill");
-  const scrubHover = document.querySelector("#scrub-hover");
   let clips = [];
   let activeClip = null;
   let initialOffset = 0;
@@ -373,22 +359,6 @@
     loadHighlights();
   };
 
-  // scrub bar
-  function updateScrub() {
-    if (!activeClip || !video.duration) { scrubFill.style.width = "0%"; return; }
-    scrubFill.style.width = (video.currentTime / video.duration * 100) + "%";
-  }
-  scrub.addEventListener("click", e => {
-    if (!activeClip || !video.duration) return;
-    video.currentTime = (e.offsetX / scrub.clientWidth) * video.duration;
-  });
-  scrub.addEventListener("mousemove", e => {
-    if (!activeClip || !video.duration) return;
-    const t = (e.offsetX / scrub.clientWidth) * video.duration;
-    scrubHover.textContent = fmt(t);
-    scrubHover.style.left = e.offsetX + "px";
-  });
-
   // seek buttons
   function seekBy(sec) {
     if (!activeClip) return;
@@ -507,7 +477,6 @@
     document.querySelector("#clock").textContent = "--:--:--";
     document.querySelector("#time-cur").textContent = "--:--:--";
     document.querySelector("#time-dur").textContent = "0:00";
-    scrubFill.style.width = "0%";
     drawTimeline();
     loadHighlights();
     loadSystemHighlights();
@@ -528,7 +497,6 @@
     if (!activeClip) return;
     document.querySelector("#clock").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
     document.querySelector("#time-cur").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
-    updateScrub();
     drawTimeline();
   });
   video.addEventListener("loadedmetadata", () => {