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

@@ -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 = "▶ 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 = "▮▮ 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 = "▮▮ Pause"; }
+    // Starting again from the end should start again, not sit there.
-    else { v.pause(); this.innerHTML = "▶ Preview the cut"; }
+    if (v.ended || v.currentTime >= (EDL.duration || 0) - 0.05) v.currentTime = 0;
+    if (v.paused) v.play(); else v.pause();
   };
 }