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

Put the editor behind a button, and stop the ruler clipping

Browse source 
The first and last ruler labels were centred on the track edges, so "0s" and
"32s" were half cut off.

More importantly the page had become busy: a finished video showed the cut, the
timeline, the joins and the shots all at once. The timeline is now behind an
"Open the video editor" button next to the video, so the default view is the
finished thing and the editing bay is somewhere you choose to go.
This commit is contained in:
gator 2026-09-07 23:10:01 +00:00
parent 28831efa72
commit 133e79da1b
1 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
script.html
View file

@ -275,7 +275,8 @@ function render(r) {
: '')
+ '<p class="foot" style="margin:0 0 12px">Cutaways are laid across the joins between shots, '
+ 'so the picture changes while the voice keeps going and the join is never on screen.</p>'
+ '<div id="edlwrap" style="margin:6px 0 18px">'
+ '<button type="button" class="btn ghost" id="edlopen" style="margin-bottom:16px">Open the video editor</button>'
+ '<div id="edlwrap" style="margin:6px 0 18px;display:none">'
+ '<div class="stage" style="margin-bottom:12px">'
+ '<video id="pvid" playsinline preload="metadata"></video>'
+ '<div class="ovl" id="povl"><img id="povlimg" alt="cutaway"><video id="povlvid" muted playsinline></video></div>'
@ -627,7 +628,13 @@ function tlDraw() {
html += '<div class="tlhead" id="tlhead" style="left:0"></div>';
html += '<div class="tlruler">';
for (var t = 0; t <= dur; t += 8) {
html += '<span style="left:' + ((t / dur) * 100).toFixed(2) + '%">' + t + 's</span>';
// The end labels are centred on the track edges, so half of each falls
// outside it. Pin the first left and the last right instead.
var pos = (t / dur) * 100;
var style = t === 0 ? 'left:2px;transform:none'
: (t >= dur ? 'right:2px;left:auto;transform:none'
: 'left:' + pos.toFixed(2) + '%');
html += '<span style="' + style + '">' + t + 's</span>';
}
html += '</div>';
tl.innerHTML = html;
@ -793,7 +800,19 @@ async function loadEdl(p) {
}
function bindPost() {
if (document.getElementById("tl")) loadEdl((DATA && DATA.project) || {});
// The editing bay is opt-in. Most people want to watch the thing and leave.
var eo = document.getElementById("edlopen");
if (eo) eo.onclick = function () {
var w = document.getElementById("edlwrap");
var open = w.style.display === "none";
w.style.display = open ? "" : "none";
this.textContent = open ? "Close the video editor" : "Open the video editor";
if (open) {
if (!EDL) loadEdl((DATA && DATA.project) || {});
else tlDraw();
w.scrollIntoView({ behavior: "smooth", block: "start" });
}
};
var sb = document.getElementById("seams");
function paintSeams(r) {
var el = document.getElementById("seamout");