gator/paytolaugh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Seek by dragging the playhead or clicking the track; fix the stuck button

Browse source 
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.
This commit is contained in:
gator 2026-09-07 23:08:28 +00:00
parent 930d0f4c5b
commit 28831efa72
1 changed files with 45 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
script.html
View file

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