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 = "▶ 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"; }
- else { v.pause(); this.innerHTML = "▶ 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();
};
}