From 133e79da1b8d1a159293825603773b5fcc21b8da Mon Sep 17 00:00:00 2001
From: gator <gatordevin@gmail.com>
Date: Mon, 7 Sep 2026 23:10:01 +0000
Subject: [PATCH] Put the editor behind a button, and stop the ruler clipping

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.
---
 script.html | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/script.html b/script.html
index 0592bfe..c4f8870 100644
--- a/script.html
+++ b/script.html
@@ -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");