Timeline: show what things are, and let the playhead be moved

Fixes and additions from watching it in use:

- the play button stayed on "Pause" after the video ran to the end
- there was no time readout and no way to reach a particular moment
- a cutaway was an anonymous blue rectangle, when the useful thing to show is
  the picture it will actually put on screen
- nothing marked where one shot ended and the next began, which is the whole
  reason the cutaways sit where they do

Shots are now marked above the bar with their opening frame, cutaways carry a
thumbnail of the image itself, and the playhead can be dragged or the track
clicked to move through the piece.

script.html

@@ -36,8 +36,15 @@
   .tl{position:relative;height:56px;background:#0f1117;border:1px solid var(--line);border-radius:8px;
     overflow:hidden;margin-top:12px;user-select:none;touch-action:none}
   .tlcut{position:absolute;top:6px;bottom:6px;background:#1f6feb;border-radius:5px;cursor:grab;
-    font:11px/1.5 var(--mono);color:#fff;padding:5px 7px;overflow:hidden;box-sizing:border-box}
+    font:11px/1.5 var(--mono);color:#fff;overflow:hidden;box-sizing:border-box;
+    display:flex;align-items:center;gap:6px;padding-right:11px}
   .tlcut.moved{background:#8957e5}
+  .tlcut img,.tlcut video{height:100%;width:34px;object-fit:cover;flex:0 0 auto;display:block}
+  .tlcut b{font-weight:600;white-space:nowrap;overflow:hidden;padding-left:2px}
+  .tlshots{position:relative;height:46px;margin-top:14px}
+  .tlshot{position:absolute;top:0;bottom:0;border-left:1px solid var(--line);padding-left:4px;
+    font:10px/1.3 var(--mono);color:var(--muted);overflow:hidden;box-sizing:border-box}
+  .tlshot img{height:28px;width:auto;border-radius:3px;display:block;margin-top:2px;border:1px solid var(--line)}
   .tlcut .grip{position:absolute;top:0;right:0;bottom:0;width:9px;cursor:ew-resize;background:rgba(255,255,255,.28)}
   .tlhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent2);pointer-events:none}
   .tlruler{position:absolute;left:0;right:0;bottom:0;height:14px;font:9px/14px var(--mono);color:var(--muted)}
@@ -274,7 +281,9 @@ function render(r) {
       + '<div class="ovl" id="povl"><img id="povlimg" alt="cutaway"><video id="povlvid" muted playsinline></video></div>'
       + '</div>'
       + '<button type="button" class="btn ghost" id="pplay">&#9654; Preview the cut</button>'
+      + '<span class="foot" style="margin-left:12px" id="ptime">0.0 / 0.0s</span>'
       + '<span class="foot" style="margin-left:12px">Nothing is rendered &mdash; this switches the picture as it plays.</span>'
+      + '<div class="tlshots" id="tlshots"></div>'
       + '<div class="tl" id="tl"></div>'
       + '<p class="foot" id="tlinfo" style="margin:8px 0 0"></p>'
       + '<div style="margin-top:12px">'
@@ -584,14 +593,36 @@ var EDL = null, DIRTY = false;
 function tlDraw() {
   var tl = document.getElementById("tl");
   if (!tl || !EDL) return;
-  var dur = EDL.duration || 1, w = tl.clientWidth || 1;
+  var dur = EDL.duration || 1;
+
+  // Above the bar: where each shot begins, with the frame it opens on. The end
+  // of a shot is always the start of the next one, so only starts are marked.
+  var strip = document.getElementById("tlshots");
+  if (strip) {
+    var segs = ((DATA && DATA.script && DATA.script.segments) || []);
+    strip.innerHTML = segs.map(function (s, k) {
+      var at = k * 8, wide = (8 / dur) * 100;
+      return '<div class="tlshot" style="left:' + ((at / dur) * 100).toFixed(3) + '%;width:'
+        + wide.toFixed(3) + '%" data-seek="' + at + '" title="shot ' + s.index + ' starts at ' + at + 's">'
+        + 'shot ' + s.index
+        + (s.plate_url ? '<img src="' + esc(s.plate_url) + '" alt="shot ' + s.index + ' opening frame">' : '')
+        + '</div>';
+    }).join("");
+  }
+
   var html = "";
   (EDL.cuts || []).forEach(function (c, i) {
     var left = (c.start / dur) * 100, wide = (c.seconds / dur) * 100;
+    // Show the actual picture. A plain rectangle says nothing about what is
+    // going to be on screen, which is the only thing worth judging here.
+    var thumb = c.kind === "video"
+      ? '<video src="' + esc(c.src) + '#t=' + (c["in"] || 0) + '" preload="metadata" muted></video>'
+      : '<img src="' + esc(c.src) + '" alt="">';
     html += '<div class="tlcut' + (c.moved ? ' moved' : '') + '" data-i="' + i + '" '
          + 'style="left:' + left.toFixed(3) + '%;width:' + wide.toFixed(3) + '%" '
-         + 'title="cutaway for shot ' + c.shot + '">'
-         + 'shot ' + c.shot + '<div class="grip" data-grip="' + i + '"></div></div>';
+         + 'title="cutaway over the end of shot ' + c.shot + '">'
+         + thumb + '<b>' + c.seconds + 's</b>'
+         + '<div class="grip" data-grip="' + i + '"></div></div>';
   });
   html += '<div class="tlhead" id="tlhead" style="left:0"></div>';
   html += '<div class="tlruler">';