From b7f1c07a259dafaf2cc92659d0c615507cb76c93 Mon Sep 17 00:00:00 2001
From: human insan <insan@human.org>
Date: Thu, 27 Aug 2026 23:24:29 +0100
Subject: [PATCH] Simplify player controls

---
 index.html | 34 +---------------------------------
 1 file changed, 1 insertion(+), 33 deletions(-)

diff --git a/index.html b/index.html
index ba51b50..f8689f5 100644
--- a/index.html
+++ b/index.html
@@ -34,14 +34,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; }
-
-    /* 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; }
+    .controls-bar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); padding: 18px 12px 10px; }
 
     /* control row */
     .ctrl-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
@@ -135,10 +128,6 @@
     <div class="empty-state" id="empty-state"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h10a2 2 0 0 1 2 2v2.2l3-1.7v9l-3-1.7V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 2v10h10V7H4zm12 4.5v2.1l1-.6v-1z"/></svg><span>Select a recording from the timeline</span></div>
     <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>
@@ -201,9 +190,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;
@@ -378,22 +364,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;
@@ -512,7 +482,6 @@
     document.querySelector("#clock").textContent = "--:--:--";
     document.querySelector("#time-cur").textContent = "--:--:--";
     document.querySelector("#time-dur").textContent = "0:00";
-    scrubFill.style.width = "0%";
     drawTimeline();
     loadHighlights();
     loadSystemHighlights();
@@ -534,7 +503,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", () => {