Wire the storyboard player's controls

Jump-to scrolls to the shot and highlights it, so a note can be written
against the moment that was just heard.

trailer.html

@@ -837,6 +837,50 @@
       r = await act("draw_storyboard", { draft_id: el.getAttribute("data-draw") });
       if (r) await refresh(); return;
     }
+    if ((el = hit("data-reelgo"))) {
+      el.disabled = true;
+      var rl = await api("reel", { draft_id: CUR });
+      if (!rl.ok) { showMsg("msg", rl.error || "Could not load the storyboard."); return; }
+      if (rl.ready < rl.of) {
+        el.textContent = "Speaking every shot…";
+        r = await act("prepare_reel", { draft_id: CUR });
+        if (r) showMsg("msg", "Speaking " + r.shots + " shots. This is the same "
+          + "audio the film will use, so it is only paid for once.", "ok");
+        setTimeout(refresh, 15000);
+        return;
+      }
+      hideMsg("msg");
+      REEL = rl.shots || []; RAT = -1;
+      reelShow(0);
+      return;
+    }
+    if ((el = hit("data-reeltoggle"))) {
+      if (reelAudio.paused) { reelAudio.play().catch(function(){}); reelShow(RAT); }
+      else { reelAudio.pause(); clearInterval(RTIMER); RTIMER = null; reelPaint(); }
+      return;
+    }
+    if ((el = hit("data-reelstep"))) {
+      var d = Number(el.getAttribute("data-reelstep")) || 1;
+      reelShow(Math.max(0, Math.min((REEL || []).length - 1, RAT + d)));
+      return;
+    }
+    if ((el = hit("data-reelstop"))) { reelStop(); return; }
+    if ((el = hit("data-reeljump"))) {
+      var jid = el.getAttribute("data-reeljump");
+      clearInterval(RTIMER); RTIMER = null; reelAudio.pause();
+      var target = [...document.querySelectorAll(".shot")].find(function (x) {
+        var nu = x.querySelector(".num");
+        return nu && nu.textContent.trim() === jid; });
+      if (target) {
+        document.querySelectorAll(".shot.lit").forEach(function (x) {
+          x.classList.remove("lit"); });
+        target.classList.add("lit");
+        target.scrollIntoView({ behavior: "smooth", block: "center" });
+        var ta = target.querySelector("textarea.note");
+        if (ta) setTimeout(function () { ta.focus(); }, 500);
+      }
+      return;
+    }
     if ((el = hit("data-cuts"))) {
       el.disabled = true; el.textContent = "Working out what to drop…";
       r = await act("propose_cuts", { draft_id: el.getAttribute("data-cuts") });