Per-shot source toggle: photo or continue from the previous shot

script.html

@@ -69,14 +69,33 @@ function shotHtml(s, locked) {
     ? '<img class="still" src="' + esc(s.plate_url) + '" alt="Shot ' + s.index + ' opening frame">'
     : '<div class="noimg">No opening frame yet.<br>Set the scene, then make one.</div>';
 
+  var cont = s.source === "previous" && s.index > 1;
+
+  var toggle = s.index > 1
+    ? '<div class="chips" data-srcgrp="' + s.index + '" style="margin-bottom:14px">'
+      + '<span class="chip' + (cont ? '' : ' on') + '" data-src="photo">Start from a photo</span>'
+      + '<span class="chip' + (cont ? ' on' : '') + '" data-src="previous">Continue from shot ' + (s.index - 1) + '</span>'
+      + '</div>'
+    : '';
+
+  var settingLabel = cont
+    ? '<label class="mini">The setting <span>— stays as it was; the camera is what moves</span></label>'
+    : '<label class="mini">The setting <span>— anywhere, including places a real pet could not be</span></label>';
+
+  var picker = cont
+    ? '<p class="foot" style="margin:0">Continues the previous shot. Filming uses that shot&rsquo;s '
+      + 'real last frame; the still here is a preview of the camera move.</p>'
+    : '<label class="mini">Which photo of them</label>'
+      + '<select data-photo="' + s.index + '">' + photoOptions(s.photo_id) + '</select>';
+
   var controls = locked ? '' :
-      '<label class="mini">The setting <span>— anywhere, including places a real pet could not be</span></label>'
+      toggle
+    + settingLabel
     + '<textarea data-scene="' + s.index + '" placeholder="a field of tall grass at golden hour">' + esc(s.scene || "") + '</textarea>'
     + '<label class="mini" style="margin-top:12px">Camera</label>'
     + '<input type="text" list="cams" data-cam="' + s.index + '" value="' + esc(s.camera || "") + '" placeholder="tight head shot, camera static">'
     + '<div class="row" style="margin-top:12px">'
-    + '<div><label class="mini">Which photo of them</label>'
+    + '<div>' + picker + '</div>'
-    + '<select data-photo="' + s.index + '">' + photoOptions(s.photo_id) + '</select></div>'
     + '<div style="display:flex;align-items:flex-end">'
     + '<button type="button" class="btn ghost" data-make="' + s.index + '" style="width:100%">'
     + (s.plate_url ? "Remake this frame" : "Make the frame") + '</button></div>'
@@ -171,6 +190,20 @@ function wire(locked) {
     });
   });
 
+  // Switching source changes which fields apply, so redraw the card after.
+  [].forEach.call(document.querySelectorAll("[data-srcgrp]"), function (g) {
+    g.addEventListener("click", async function (e) {
+      var c = e.target.closest("[data-src]");
+      if (!c) return;
+      var idx = parseInt(g.getAttribute("data-srcgrp"), 10);
+      var r = await api("update_shot", { email: email, project_id: pid, index: idx,
+                                         source: c.getAttribute("data-src") });
+      if (!r.ok) { showMsg("msg", r.error || "Could not change that."); return; }
+      hideMsg("msg");
+      load();
+    });
+  });
+
   [].forEach.call(document.querySelectorAll("[data-make]"), function (b) {
     b.addEventListener("click", async function () {
       hideMsg("msg");