Add Film it to the UI so nothing needs an operator

script.html

@@ -195,6 +195,29 @@ function render(r) {
     + '<div id="places"></div>'
     + '</div>';
 
+  // Filming, from the browser. This was the last step that needed an operator.
+  var film = '';
+  if (p.status === 'approved' || p.status === 'queued_to_film'
+      || p.status === 'filming' || p.status === 'film_failed') {
+    var busy = (p.status === 'queued_to_film' || p.status === 'filming');
+    film = '<h2 class="sec" style="margin-top:34px">Film it</h2><div class="card">'
+      + '<div class="quote" style="margin-bottom:16px">'
+      + '<div><div class="big">' + ((p.segments || 4) * 8) + 's</div>'
+      + '<div class="sub">of your time credit</div></div>'
+      + '<div class="sub" id="balsec">checking your balance…</div></div>'
+      + (p.status === 'film_failed'
+          ? '<div class="warn">That did not finish: ' + esc(p.film_note || 'unknown reason')
+            + '. Your seconds were returned.</div>'
+          : '')
+      + (busy
+          ? '<p class="foot" id="filmnote">' + esc(p.film_note || 'Queued…') + '</p>'
+          : '<button type="button" class="btn" id="film">'
+            + (p.status === 'film_failed' ? 'Try filming again' : 'Film it')
+            + '</button>'
+            + '<span class="foot" style="margin-left:12px">About a minute a shot.</span>')
+      + '</div>';
+  }
+
   var post = '';
   if (p.status === 'ready' || p.cut_url) {
     post = '<h2 class="sec" style="margin-top:34px">The cut</h2><div class="card">'
@@ -227,6 +250,7 @@ function render(r) {
     + '<h2 class="sec">The shots</h2>'
     + s.segments.map(function (x) { return shotHtml(x, locked); }).join("")
     + own
+    + film
     + post
     + actions;
 
@@ -343,6 +367,7 @@ function bindPics() {
 
 function wire(locked) {
   bindPics();
+  bindFilm((DATA && DATA.project) || {});
   bindPost();
   if (locked) { bindBottom(); return; }
 
@@ -443,6 +468,43 @@ function wire(locked) {
   bindBottom();
 }
 
+async function bindFilm(p) {
+  var bal = document.getElementById("balsec");
+  if (bal) {
+    var b = await api("get_balance", { email: email });
+    var have = (b.ok && b.balance_seconds) || 0;
+    var need = (p.segments || 4) * 8;
+    bal.textContent = have + "s left" + (have < need ? " — not enough" : "");
+    if (have < need) bal.style.color = "var(--bad)";
+  }
+
+  // While it films, keep the page honest about where it has got to.
+  if (p.status === "queued_to_film" || p.status === "filming") {
+    var t = setInterval(async function () {
+      var g = await api("get_project", { email: email, project_id: pid });
+      if (!g.ok) return;
+      var st = g.project.status;
+      var note = document.getElementById("filmnote");
+      if (note) note.textContent = g.project.film_note || st;
+      if (st === "ready" || st === "film_failed") { clearInterval(t); load(); }
+    }, 8000);
+  }
+
+  var fb = document.getElementById("film");
+  if (fb) fb.onclick = async function () {
+    hideMsg("msg");
+    fb.disabled = true; fb.textContent = "Starting…";
+    var r = await api("request_render", { email: email, project_id: pid });
+    if (!r.ok) {
+      fb.disabled = false; fb.textContent = "Film it";
+      showMsg("msg", r.error || "Could not start filming.");
+      return;
+    }
+    showMsg("msg", r.status_text || "Filming.", "ok");
+    load();
+  };
+}
+
 function bindPost() {
   var sb = document.getElementById("seams");
   if (sb) sb.onclick = async function () {