A note to the camera per shot: changes how it is filmed, not the pictures

trailer.html

@@ -78,6 +78,11 @@
   .vars .v .say{margin:4px 0;color:var(--muted);min-height:2.6em}
   .vars .v.bad .say{color:#b4531f}
   .vars .v .btn{font-size:12px;padding:3px 10px}
+  .fnote{margin:0 0 10px;font-size:12px}
+  .fnote label{display:block;color:var(--muted);margin-bottom:3px}
+  .fnote input{width:100%;box-sizing:border-box;font:inherit;font-size:12px;padding:5px 8px;
+               border:1px solid var(--line);border-radius:6px;background:transparent;color:inherit}
+  .fnote input.saved{border-color:#1f7a3a}
   .ffault{display:flex;gap:8px;margin:0 0 10px}
   .ffault input{flex:1;min-width:0;font:inherit;font-size:12px;padding:5px 8px;
                 border:1px solid var(--line);border-radius:6px;background:transparent;color:inherit}
@@ -980,6 +985,18 @@
       + '</div>';
   }
 
+  // A note to the CAMERA. It is added to what the video model is told when
+  // this shot is filmed; it redraws nothing. Useful when the still is right
+  // and the moving picture goes wrong - a hand that grows a finger, a car door
+  // that swings from the wrong edge.
+  function filmNoteHtml(s) {
+    if (!s.opening_url) return "";
+    return '<div class="fnote"><label>A note to the camera for this shot (optional) \u2014 it changes how the '
+      + 'shot is filmed, not the pictures. Press \u201cFilm\u201d again afterwards.</label>'
+      + '<input type="text" maxlength="500" data-filmnote="' + esc(s.id) + '" value="' + esc(s.film_note || "")
+      + '" placeholder="For example: his left hand stays in his jacket pocket the whole time."></div>';
+  }
+
   // Several versions of one picture, best first, each with what the checker
   // made of it. Picking the best of four needs no vocabulary at all.
   function variantsHtml(s) {
@@ -1208,6 +1225,7 @@
       + (s.continuity ? '<p class="cont">continuity: ' + esc(s.continuity) + '</p>' : '')
       + lines
       + faultsHtml(s)
+      + filmNoteHtml(s)
       + '<div class="tools">' + tools + '</div>'
       + '<textarea class="note" rows="2" data-note="' + esc(s.id) + '" '
       + 'placeholder="Your note on this shot, for the next full revision.">'
@@ -1516,6 +1534,22 @@
     step();
   }
 
+  var filmNoteTimers = {};
+  document.getElementById("pane").addEventListener("input", function (e) {
+    var el = e.target;
+    var fsid = el.getAttribute && el.getAttribute("data-filmnote");
+    if (!fsid) return;
+    el.classList.remove("saved");
+    clearTimeout(filmNoteTimers[fsid]);
+    filmNoteTimers[fsid] = setTimeout(async function () {
+      var r = await api("set_film_note", { draft_id: CUR, shot_id: fsid, note: el.value });
+      if (r.ok) {
+        el.classList.add("saved");
+        (PKG.shots || []).forEach(function (x) { if (String(x.id) === fsid) x.film_note = r.note; });
+      }
+    }, 700);
+  });
+
   var noteTimers = {};
   document.getElementById("pane").addEventListener("input", function (e) {
     var ta = e.target;