From 28831efa7255d3a7c5863ca9d5f385c5dd05d5ab Mon Sep 17 00:00:00 2001
From: gator <gatordevin@gmail.com>
Date: Mon, 7 Sep 2026 23:08:28 +0000
Subject: [PATCH] Seek by dragging the playhead or clicking the track; fix the
 stuck button

Playing to the end left the button reading "Pause" forever, because nothing
listened for the video ending. It now resets on end and on pause, shows the
current time against the total, and the track can be clicked or the playhead
dragged to reach a moment directly. Clicking a shot marker jumps to that shot.
---
 script.html | 48 +++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/script.html b/script.html
index 62956ff..0592bfe 100644
--- a/script.html
+++ b/script.html
@@ -638,15 +638,41 @@ function tlDraw() {
   document.getElementById("edlsave").disabled = !DIRTY;
 }
 
+// Move the picture to a moment without disturbing the edit.
+function seekTo(t) {
+  var v = document.getElementById("pvid");
+  if (!v || !EDL) return;
+  v.currentTime = Math.max(0, Math.min(t, EDL.duration || 0));
+  v.dispatchEvent(new Event("timeupdate"));
+}
+
 function tlBind() {
   var tl = document.getElementById("tl");
   if (!tl) return;
   var drag = null;
 
+  var strip = document.getElementById("tlshots");
+  if (strip) strip.addEventListener("click", function (e) {
+    var s = e.target.closest("[data-seek]");
+    if (s) seekTo(parseFloat(s.getAttribute("data-seek")));
+  });
+
+  function timeAt(clientX) {
+    var r = tl.getBoundingClientRect();
+    return ((clientX - r.left) / (r.width || 1)) * (EDL.duration || 0);
+  }
+
   tl.addEventListener("pointerdown", function (e) {
     var grip = e.target.closest("[data-grip]");
     var block = e.target.closest("[data-i]");
-    if (!block) return;
+    if (!block) {
+      // Empty track: scrub. This is how you get to a particular moment.
+      drag = { mode: "seek" };
+      seekTo(timeAt(e.clientX));
+      tl.setPointerCapture(e.pointerId);
+      e.preventDefault();
+      return;
+    }
     var i = parseInt((grip || block).getAttribute(grip ? "data-grip" : "data-i"), 10);
     drag = { i: i, mode: grip ? "len" : "move", x0: e.clientX,
              start0: EDL.cuts[i].start, secs0: EDL.cuts[i].seconds };
@@ -656,6 +682,7 @@ function tlBind() {
 
   tl.addEventListener("pointermove", function (e) {
     if (!drag) return;
+    if (drag.mode === "seek") { seekTo(timeAt(e.clientX)); return; }
     var dur = EDL.duration || 1, w = tl.clientWidth || 1;
     var d = ((e.clientX - drag.x0) / w) * dur;
     var c = EDL.cuts[drag.i];
@@ -698,10 +725,24 @@ function previewBind(p) {
     return null;
   }
 
+  function resetPlayButton() {
+    var b = document.getElementById("pplay");
+    if (b) b.innerHTML = "&#9654; Preview the cut";
+  }
+  // Playing to the end used to leave the button reading "Pause" for good.
+  v.addEventListener("ended", resetPlayButton);
+  v.addEventListener("pause", resetPlayButton);
+  v.addEventListener("play", function () {
+    var b = document.getElementById("pplay");
+    if (b) b.innerHTML = "&#9646;&#9646; Pause";
+  });
+
   var showing = null;
   v.addEventListener("timeupdate", function () {
     var head = document.getElementById("tlhead");
     if (head && EDL) head.style.left = ((v.currentTime / (EDL.duration || 1)) * 100) + "%";
+    var tm = document.getElementById("ptime");
+    if (tm && EDL) tm.textContent = v.currentTime.toFixed(1) + " / " + (EDL.duration || 0).toFixed(1) + "s";
     var c = activeCut(v.currentTime);
     if (c === showing) return;
     showing = c;
@@ -719,8 +760,9 @@ function previewBind(p) {
   });
 
   document.getElementById("pplay").onclick = function () {
-    if (v.paused) { v.play(); this.innerHTML = "&#9646;&#9646; Pause"; }
-    else { v.pause(); this.innerHTML = "&#9654; Preview the cut"; }
+    // Starting again from the end should start again, not sit there.
+    if (v.ended || v.currentTime >= (EDL.duration || 0) - 0.05) v.currentTime = 0;
+    if (v.paused) v.play(); else v.pause();
   };
 }