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(); }; }