+ + ''
+ '
';
@@ -392,2140 +394,4 @@ function render(r) {
+ 'go straight to filming.'
+ '$' + Number(p.price_usd || 0).toFixed(2) + '
'
+ + '' + videoSecondsOf(p) + ' seconds · ' + (p.segments || 4) + ' shots'
+ + (modelFor(p) ? ' · ' + esc(modelFor(p).label) : '') + '
' + (canEditScript
? left + " rewrite" + (left === 1 ? "" : "s") + " left"
: "Words approved") + '
Hear it first
' + ''
- + '
'
- + 'Filming costs real money; speaking the ' - + 'words costs about a hundredth of a cent. Run it through in your pet’s voice ' - + 'over the opening stills first, and only film once the timing and the jokes land.
' - + '' - + '' - + '' - + 'Cutting to the clock speaks the whole piece once, ' - + 'measures where every word actually falls, and moves the shot boundaries to real word ' - + 'endings. It rewrites how the lines are divided — not the words themselves.
' - + '' - + '' - + 'The shots
' - + s.segments.map(function (x) { return shotHtml(x, false); }).join("") - + own - + film; - } else if (VIEW === 3) { - body = head + film; - } else { - body = head + post + film; - } - - out.innerHTML = cams + stepper(stage, VIEW) + body; - - wire(locked); -} - -var PICS = [], SUGGESTED = []; - -function renderPics() { - var el = document.getElementById("pics"); - if (!el) return; - el.innerHTML = PICS.map(function (p) { - return ''
- + ' + ')
'
- + ''
- + ''
- + '
';
- }).join("");
- [].forEach.call(el.querySelectorAll("[data-rmpic]"), function (b) {
- b.onclick = async function () {
- var r = await api("delete_project_image", { email: email, image_id: b.getAttribute("data-rmpic") });
- if (!r.ok) { showMsg("msg", r.error || "Could not remove that."); return; }
- await loadPics();
- };
- });
-}
-
-async function loadPics() {
- var r = await api("list_project_images", { email: email, project_id: pid });
- PICS = (r.ok && r.images) || [];
- renderPics();
-}
-
-async function addPic(file) {
- hideMsg("msg");
- if (!file || !/^image\//.test(file.type)) { showMsg("msg", "That is not an image."); return; }
- // Asked for up front: a picture with no description cannot be matched to
- // anything, so it would just sit there unused.
- var desc = prompt("What is in this picture? A short description is what lets it be matched to the script.");
- if (!desc || desc.trim().length < 3) { showMsg("msg", "A description is needed to place the picture."); return; }
- var drop = document.getElementById("drop");
- if (drop) drop.textContent = "Uploading…";
- var img;
- try { img = await resizeImage(file, 1600, 0.85); }
- catch (e) { showMsg("msg", e.message || "Could not read that image."); return; }
- var r = await api("add_project_image", { email: email, project_id: pid,
- description: desc.trim(), data_b64: img.b64 });
- if (drop) drop.textContent = "Paste an image, drop one here, or click to choose";
- if (!r.ok) { showMsg("msg", r.error || "That upload did not work."); return; }
- await loadPics();
-}
-
-function bindPics() {
- var drop = document.getElementById("drop");
- if (!drop) return;
- var picker = document.getElementById("picker");
-
- drop.onclick = function () { picker.click(); };
- picker.onchange = function () {
- [].forEach.call(picker.files || [], addPic);
- picker.value = "";
- };
- drop.addEventListener("dragover", function (e) { e.preventDefault(); drop.classList.add("hot"); });
- drop.addEventListener("dragleave", function () { drop.classList.remove("hot"); });
- drop.addEventListener("drop", function (e) {
- e.preventDefault(); drop.classList.remove("hot");
- [].forEach.call((e.dataTransfer && e.dataTransfer.files) || [], addPic);
- });
- // Paste anywhere on the page, which is how people actually do this.
- document.addEventListener("paste", function (e) {
- var items = (e.clipboardData && e.clipboardData.items) || [];
- for (var i = 0; i < items.length; i++) {
- if (items[i].type && items[i].type.indexOf("image") === 0) {
- var f = items[i].getAsFile();
- if (f) { e.preventDefault(); addPic(f); }
- return;
- }
- }
- });
-
- var sg = document.getElementById("suggest");
- if (sg) sg.onclick = async function () {
- hideMsg("msg");
- if (!PICS.length) { showMsg("msg", "Add a picture first."); return; }
- sg.disabled = true; sg.textContent = "Reading the script…";
- var r = await api("suggest_image_placements", { email: email, project_id: pid });
- if (!r.ok) { sg.disabled = false; sg.textContent = "Suggest where they fit"; showMsg("msg", r.error || "Could not suggest."); return; }
- // Reading the script is a model call, far too slow to answer inside one
- // request, so it runs in the background and we wait for it here.
- if (r.pending) {
- document.getElementById("sugnote").textContent = r.status_text || "Reading the script…";
- var waited = 0;
- r = await new Promise(function (done) {
- var t = setInterval(async function () {
- waited += 4;
- var g = await api("suggest_image_placements", { email: email, project_id: pid });
- if (g.ok && !g.pending) { clearInterval(t); done(g); return; }
- if (waited > 150) { clearInterval(t); done({ ok: false, error: "That is taking unusually long." }); }
- }, 4000);
- });
- }
- sg.disabled = false; sg.textContent = "Suggest where they fit";
- document.getElementById("sugnote").textContent = r.status_text || "";
- if (!r.ok) { showMsg("msg", r.error || "Could not suggest."); return; }
- SUGGESTED = r.placements || [];
- var byId = {};
- PICS.forEach(function (p) { byId[p.id] = p; });
- document.getElementById("places").innerHTML = SUGGESTED.length
- ? SUGGESTED.map(function (x) {
- var p = byId[x.image_id] || {};
- return 'shot ' + x.index + ' · '
- + esc((p.description || "").slice(0, 60)) + ' — ' + esc(x.why || "") + '
';
- }).join("")
- + ''
- : 'No picture fitted any shot well enough to use.
'; - var ap = document.getElementById("applyp"); - if (ap) ap.onclick = async function () { - ap.disabled = true; ap.textContent = "Applying…"; - var res = await api("apply_image_placements", { email: email, project_id: pid, - placements: SUGGESTED }); - if (!res.ok) { ap.disabled = false; ap.textContent = "Use these"; showMsg("msg", res.error || "Could not apply."); return; } - showMsg("msg", res.status_text || "Placed.", "ok"); - load(); - }; - }; - - loadPics(); -} - -function wire(locked) { - [].forEach.call(document.querySelectorAll("[data-stage]"), function (b) { - b.onclick = function () { - var want = parseInt(b.getAttribute("data-stage"), 10); - if (want === VIEW) return; - VIEW = want; - hideMsg("msg"); - render(DATA); - window.scrollTo({ top: 0, behavior: "smooth" }); - }; - }); - bindPics(); - bindPreviz(); - bindAlign(); - bindFilm((DATA && DATA.project) || {}); - bindPost(); - if (locked) { bindBottom(); return; } - - // Save edits when the field loses focus, so typing is never interrupted. - [].forEach.call(document.querySelectorAll("[data-scene],[data-cam],[data-photo]"), function (el) { - var evt = el.tagName === "SELECT" ? "change" : "blur"; - el.addEventListener(evt, async function () { - var idx = el.getAttribute("data-scene") || el.getAttribute("data-cam") || el.getAttribute("data-photo"); - var body = { email: email, project_id: pid, index: parseInt(idx, 10) }; - if (el.hasAttribute("data-scene")) body.scene = el.value; - if (el.hasAttribute("data-cam")) body.camera = el.value; - if (el.hasAttribute("data-photo")) body.photo_id = el.value; - var r = await api("update_shot", body); - if (!r.ok) showMsg("msg", r.error || "That change did not save."); - else hideMsg("msg"); - }); - }); - - // 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-broll]"), function (b) { - b.addEventListener("click", async function () { - hideMsg("msg"); - var idx = parseInt(b.getAttribute("data-broll"), 10); - b.disabled = true; b.textContent = "Making…"; - var r = await api("make_broll", { email: email, project_id: pid, index: idx }); - if (!r.ok) { b.disabled = false; b.textContent = "Make cutaway"; showMsg("msg", r.error || "Could not make that."); return; } - var waited = 0; - var t = setInterval(async function () { - waited += 5; - var g = await api("get_project", { email: email, project_id: pid }); - var seg = (g.ok && g.script && g.script.segments || []).filter(function (x) { - return parseInt(x.index, 10) === idx; })[0]; - if (seg && seg.broll_url) { clearInterval(t); load(); return; } - if (waited > 180) { - clearInterval(t); - b.disabled = false; b.textContent = "Make cutaway"; - showMsg("msg", "That cutaway is taking unusually long."); - } - }, 5000); - }); - }); - - [].forEach.call(document.querySelectorAll("[data-make]"), function (b) { - b.addEventListener("click", async function () { - hideMsg("msg"); - var idx = parseInt(b.getAttribute("data-make"), 10); - // Flush any pending edits in this card before drawing from them. - var card = b.closest(".shot"); - var sc = card.querySelector("[data-scene]"), cm = card.querySelector("[data-cam]"), - ph = card.querySelector("[data-photo]"); - await api("update_shot", { email: email, project_id: pid, index: idx, - scene: sc ? sc.value : undefined, camera: cm ? cm.value : undefined, - photo_id: ph ? ph.value : undefined }); - b.disabled = true; b.textContent = "Drawing…"; - var r = await api("make_shot_image", { email: email, project_id: pid, index: idx }); - if (!r.ok) { - b.disabled = false; b.textContent = "Try again"; - showMsg("msg", r.error || "Could not make that frame."); - return; - } - // Drawing takes about half a minute and runs on the server, so the call - // above returns straight away. Watch the shot until the frame appears. - var waited = 0; - var tick = setInterval(async function () { - waited += 4; - var g = await api("get_project", { email: email, project_id: pid }); - var seg = (g.ok && g.script && g.script.segments || []).filter(function (x) { - return parseInt(x.index, 10) === idx; })[0]; - if (seg && seg.draw_error) { - clearInterval(tick); - b.disabled = false; b.textContent = "Try again"; - showMsg("msg", "That frame did not draw: " + seg.draw_error); - return; - } - if (seg && seg.plate_url) { clearInterval(tick); load(); return; } - if (waited > 120) { - clearInterval(tick); - b.disabled = false; b.textContent = "Try again"; - showMsg("msg", "That frame is taking unusually long. Try again in a moment."); - } - }, 4000); - }); - }); - - 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 = videoSecondsOf(p); - 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(); - }; -} - -// ---------------------------------------------------------------- the cut -// EDL is {duration, cuts:[{shot,start,seconds,kind,src,in,moved}], segments}. -// Only the cut positions are editable; the server composes the rest, so the -// page never has to be trusted about source urls or trim points. -var EDL = null, DIRTY = false; - -function tlDraw() { - var tl = document.getElementById("tl"); - if (!tl || !EDL) return; - 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 ''
- + 'shot ' + s.index
- + (s.plate_url ? ' + ')
' : '')
- + '
';
- }).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"
- ? ''
- : ''
- + thumb + '' + c.seconds + 's'
- + '
';
- });
- html += '';
- html += '';
- for (var t = 0; t <= dur; t += 8) {
- // The end labels are centred on the track edges, so half of each falls
- // outside it. Pin the first left and the last right instead.
- var pos = (t / dur) * 100;
- var style = t === 0 ? 'left:2px;transform:none'
- : (t >= dur ? 'right:2px;left:auto;transform:none'
- : 'left:' + pos.toFixed(2) + '%');
- html += '' + t + 's';
- }
- html += '
';
- tl.innerHTML = html;
- var n = (EDL.cuts || []).length;
- document.getElementById("tlinfo").textContent = n
- ? n + " cutaway" + (n === 1 ? "" : "s") + " over " + dur + " seconds. Drag to move one, or pull its right edge to change how long it runs. The voice underneath never stops."
- : "No cutaways on this one, so the talking head runs the whole way.";
- document.getElementById("edlsave").disabled = !DIRTY;
-}
-
-// Move the picture to a moment without disturbing the edit.
-function seekTo(t) {
- var v = document.getElementById("pvid");
- if (!v || !EDL) return;
- v.currentTime = Math.max(0, Math.min(t, EDL.duration || 0));
- v.dispatchEvent(new Event("timeupdate"));
-}
-
-function tlBind() {
- var tl = document.getElementById("tl");
- if (!tl) return;
- var drag = null;
-
- var strip = document.getElementById("tlshots");
- if (strip) strip.addEventListener("click", function (e) {
- var s = e.target.closest("[data-seek]");
- if (s) seekTo(parseFloat(s.getAttribute("data-seek")));
- });
-
- function timeAt(clientX) {
- var r = tl.getBoundingClientRect();
- return ((clientX - r.left) / (r.width || 1)) * (EDL.duration || 0);
- }
-
- tl.addEventListener("pointerdown", function (e) {
- var grip = e.target.closest("[data-grip]");
- var block = e.target.closest("[data-i]");
- if (!block) {
- // Empty track: scrub. This is how you get to a particular moment.
- drag = { mode: "seek" };
- seekTo(timeAt(e.clientX));
- tl.setPointerCapture(e.pointerId);
- e.preventDefault();
- return;
- }
- var i = parseInt((grip || block).getAttribute(grip ? "data-grip" : "data-i"), 10);
- drag = { i: i, mode: grip ? "len" : "move", x0: e.clientX,
- start0: EDL.cuts[i].start, secs0: EDL.cuts[i].seconds };
- tl.setPointerCapture(e.pointerId);
- e.preventDefault();
- });
-
- tl.addEventListener("pointermove", function (e) {
- if (!drag) return;
- if (drag.mode === "seek") { seekTo(timeAt(e.clientX)); return; }
- var dur = EDL.duration || 1, w = tl.clientWidth || 1;
- var d = ((e.clientX - drag.x0) / w) * dur;
- var c = EDL.cuts[drag.i];
- if (drag.mode === "move") {
- c.start = Math.max(0, Math.min(drag.start0 + d, dur - c.seconds));
- } else {
- c.seconds = Math.max(0.8, Math.min(drag.secs0 + d, Math.min(20, dur - c.start)));
- }
- c.start = Math.round(c.start * 20) / 20; // quarter-frame is plenty
- c.seconds = Math.round(c.seconds * 20) / 20;
- c.moved = true; DIRTY = true;
- tlDraw();
- });
-
- function end(e) {
- if (!drag) return;
- drag = null;
- try { tl.releasePointerCapture(e.pointerId); } catch (x) {}
- }
- tl.addEventListener("pointerup", end);
- tl.addEventListener("pointercancel", end);
-}
-
-// The preview never renders anything. The talking head plays with its audio
-// throughout and the picture is covered while a cutaway is due, which is
-// exactly what the finished cut does.
-function previewBind(p) {
- var v = document.getElementById("pvid");
- if (!v) return;
- if (p.video_url) v.src = p.video_url;
- var ovl = document.getElementById("povl"),
- oi = document.getElementById("povlimg"),
- ov = document.getElementById("povlvid");
-
- function activeCut(t) {
- var cs = (EDL && EDL.cuts) || [];
- for (var i = 0; i < cs.length; i++) {
- if (t >= cs[i].start && t < cs[i].start + cs[i].seconds) return cs[i];
- }
- return null;
- }
-
- function resetPlayButton() {
- var b = document.getElementById("pplay");
- if (b) b.innerHTML = "▶ Preview the cut";
- }
- // Playing to the end used to leave the button reading "Pause" for good.
- v.addEventListener("ended", resetPlayButton);
- v.addEventListener("pause", resetPlayButton);
- v.addEventListener("play", function () {
- var b = document.getElementById("pplay");
- if (b) b.innerHTML = "▮▮ Pause";
- });
-
- var showing = null;
- v.addEventListener("timeupdate", function () {
- var head = document.getElementById("tlhead");
- if (head && EDL) head.style.left = ((v.currentTime / (EDL.duration || 1)) * 100) + "%";
- var tm = document.getElementById("ptime");
- if (tm && EDL) tm.textContent = v.currentTime.toFixed(1) + " / " + (EDL.duration || 0).toFixed(1) + "s";
- var c = activeCut(v.currentTime);
- if (c === showing) return;
- showing = c;
- if (!c) { ovl.style.display = "none"; ov.pause(); return; }
- ovl.style.display = "block";
- if (c.kind === "video") {
- oi.style.display = "none"; ov.style.display = "block";
- if (ov.src !== c.src) ov.src = c.src;
- try { ov.currentTime = c["in"] || 0; } catch (x) {}
- ov.play().catch(function () {});
- } else {
- ov.style.display = "none"; ov.pause();
- oi.style.display = "block"; oi.src = c.src;
- }
- });
-
- document.getElementById("pplay").onclick = function () {
- // Starting again from the end should start again, not sit there.
- if (v.ended || v.currentTime >= (EDL.duration || 0) - 0.05) v.currentTime = 0;
- if (v.paused) v.play(); else v.pause();
- };
-}
-
-async function loadEdl(p) {
- var r = await api("preview_edl", { email: email, project_id: pid });
- if (!r.ok) return;
- EDL = r.edl; DIRTY = false;
- tlDraw(); tlBind(); previewBind(p);
-
- document.getElementById("edlsave").onclick = async function () {
- var b = this; b.disabled = true; b.textContent = "Saving…";
- var s = await api("save_edl_cuts", { email: email, project_id: pid,
- cuts: (EDL.cuts || []).map(function (c) {
- return { shot: c.shot, start: c.start, seconds: c.seconds }; }) });
- b.textContent = "Save these positions";
- if (!s.ok) { b.disabled = false; showMsg("msg", s.error || "Those positions were refused."); return; }
- hideMsg("msg");
- EDL = s.edl; DIRTY = false; tlDraw();
- showMsg("msg", s.status_text || "Saved.", "ok");
- };
-
- document.getElementById("edlreset").onclick = async function () {
- var s = await api("reset_edl_cuts", { email: email, project_id: pid });
- if (!s.ok) { showMsg("msg", s.error || "Could not reset."); return; }
- EDL = s.edl; DIRTY = false; tlDraw();
- showMsg("msg", s.status_text || "Back to the suggested cut.", "ok");
- };
-}
-
-// Every film keeps the take it replaced. Without this, a re-film to fix one
-// thing could quietly make another worse with no way back.
-async function loadTakes() {
- var el = document.getElementById("takes");
- if (!el) return;
- var r = await api("list_versions", { email: email, project_id: pid });
- if (!r.ok || !(r.versions || []).length) { el.innerHTML = ""; return; }
- el.innerHTML = 'Earlier takes
' - + '' + esc(r.status_text || "") + ' ' - + 'Bringing one back keeps the one you are leaving.
' - + ''
- + r.versions.map(function (v, i) {
- return '
';
- [].forEach.call(el.querySelectorAll("[data-restore]"), function (b) {
- b.onclick = async function () {
- if (!confirm("Bring that take back as the current video? The one you are leaving is kept.")) return;
- b.disabled = true; b.textContent = "Restoring…";
- var s = await api("restore_version", { email: email, project_id: pid,
- index: parseInt(b.getAttribute("data-restore"), 10) });
- if (!s.ok) { b.disabled = false; b.textContent = "Use this one"; showMsg("msg", s.error || "Could not restore that."); return; }
- showMsg("msg", s.status_text || "Restored.", "ok");
- load();
- };
- });
-}
-
-// The run-through: each opening still held for exactly as long as its line
-// takes to say. No video is generated, so this costs nothing to watch again.
-var PZ = null, PZTIMER = null;
-
-function pzPaint(lines) {
- var el = document.getElementById("pzout");
- if (!el) return;
- var segs = ((DATA && DATA.script && DATA.script.segments) || []);
- var byIdx = {};
- (lines || []).forEach(function (l) { byIdx[l.index] = l; });
- PZ = segs.map(function (s) {
- var l = byIdx[s.index] || {};
- return { index: s.index, url: l.url || "", seconds: l.seconds || 0,
- over: !!l.over, plate: s.plate_url || "", line: s.line || "" };
- }).filter(function (x) { return x.url; });
-
- if (!PZ.length) { el.innerHTML = ""; return; }
- var total = PZ.reduce(function (a, b) { return a + (b.seconds || 0); }, 0);
- var bought = segs.length * 8;
- // Spoken here, but filmed by Veo, which was asked to over-enunciate so the
- // mouth is readable and therefore runs slower. Measured on a real clip:
- // 17 words took 7.02s filmed against about 5.7s spoken, so ~1.25x.
- var FILMED = 1.25;
- var filmed = total * FILMED;
- var over = PZ.filter(function (x) { return (x.seconds || 0) * FILMED > 8.0; });
-
- el.innerHTML = ''
- + ''
- + '
';
- }).join("")
- + '' + esc(when(v.at) || "earlier")
- + (v.voice_name ? ' · ' + esc(v.voice_name) : '')
- + (v.cost_usd ? ' · $' + Number(v.cost_usd).toFixed(2) : '') + '
'
- + (v.note ? '' + esc(v.note) + '
' : '')
- + ''
- + ''
- + '![opening still]()
'
- + '
'
- + ''
- + ''
- + ''
- + PZ.length + ' lines · ' + total.toFixed(1) + 's spoken, about '
- + filmed.toFixed(1) + 's once filmed, against ' + bought + 's of shots'
- + (filmed > bought
- ? 'Filmed, this would run about '
- + filmed.toFixed(1) + ' seconds but only ' + bought + ' seconds are being '
- + 'shot. Something will be cut off. Shorten the words, or buy more length.
'
- : (filmed < bought * 0.88
- ? 'Filmed, this would run about '
- + filmed.toFixed(1) + ' seconds across ' + bought + ' seconds of video, '
- + 'leaving roughly ' + ((bought - filmed) / PZ.length).toFixed(1) + ' seconds '
- + 'of silence at the end of every shot. That is where trailing sound effects '
- + 'and echo come from: the model is handed a gap and fills it. More words per '
- + 'shot is the fix.
'
- : ''))
- + (over.length
- ? 'Shot' + (over.length > 1 ? 's ' : ' ')
- + over.map(function (x) { return x.index; }).join(", ")
- + ' will not fit in eight seconds once filmed: '
- + over.map(function (x) { return x.index + " would run " + (x.seconds * FILMED).toFixed(1) + "s"; }).join(", ")
- + '. Trim those lines before filming.
'
- : '')
- + ''
- + PZ.map(function (x) {
- var f = (x.seconds || 0) * FILMED;
- return '
';
-
- var img = document.getElementById("pzimg"),
- aud = document.getElementById("pzaud"),
- btn = document.getElementById("pzplay"),
- where = document.getElementById("pzwhere");
-
- function stop() {
- aud.pause();
- if (PZTIMER) { clearTimeout(PZTIMER); PZTIMER = null; }
- btn.innerHTML = "▶ Play the run-through";
- }
-
- function playFrom(i) {
- if (i >= PZ.length) { stop(); return; }
- var x = PZ[i];
- img.src = x.plate || "";
- where.textContent = "shot " + x.index + " of " + PZ.length + " · " + x.seconds.toFixed(1) + "s";
- aud.src = x.url;
- aud.onended = function () { playFrom(i + 1); };
- aud.play().catch(function () { stop(); });
- }
-
- btn.onclick = function () {
- if (!aud.paused) { stop(); return; }
- btn.innerHTML = "▮▮ Stop";
- playFrom(0);
- };
-}
-
-function bindAlign() {
- var b = document.getElementById("alignbtn");
- if (!b) return;
- var out = document.getElementById("alignout");
-
- function paint(r) {
- var bought = ((DATA && DATA.script && DATA.script.segments) || []).length * 8;
- var filmed = r.filmed || 0;
- out.innerHTML = ''
- + 'shot ' + x.index + ' · ' + x.seconds.toFixed(1) + 's spoken, ~'
- + f.toFixed(1) + 's filmed'
- + (f > 8 ? ' over' : '')
- + ' · ' + esc(x.line.slice(0, 60)) + '
';
- }).join("")
- + 'Measured: ' - + (r.spoken || 0).toFixed(1) + 's spoken, about ' + filmed.toFixed(1) - + 's filmed, against ' + bought + 's of shots.
' - + (r.audio ? '' : '') - + (r.shots || []).map(function (s) { - var fit = Math.abs((s.filmed || 0) - 8) <= 1.2; - return ''
- + 'shot ' + s.index + ' · ' + (s.start || 0).toFixed(1) + '-'
- + (s.end || 0).toFixed(1) + 's spoken · ~' + (s.filmed || 0).toFixed(1) + 's filmed'
- + (fit ? '' : ' off the clock')
- + '
' + esc(s.line || "") + '
';
- }).join("")
- + (filmed < bought - 1.5
- ? '' + esc(s.line || "") + '
The whole piece only runs about '
- + filmed.toFixed(1) + ' seconds filmed, but ' + bought + ' seconds are being shot. '
- + 'No arrangement of these words fills the video — it needs more written, or a '
- + 'shorter length.
'
- : '')
- + (filmed > bought + 1.5
- ? 'The whole piece runs about '
- + filmed.toFixed(1) + ' seconds filmed against ' + bought + ' seconds of video, so the '
- + 'end would be cut off. Trim it, or buy more length.
'
- : '');
- }
-
- b.onclick = async function () {
- hideMsg("msg");
- b.disabled = true; b.textContent = "Measuring…";
- var r = await api("align_script", { email: email, project_id: pid, refresh: true });
- if (r.ok && r.pending) {
- var waited = 0;
- r = await new Promise(function (done) {
- var t = setInterval(async function () {
- waited += 4;
- var g = await api("align_script", { email: email, project_id: pid });
- if (g.ok && !g.pending) { clearInterval(t); done(g); return; }
- if (waited > 240) { clearInterval(t); done({ ok: false, error: "That is taking unusually long." }); }
- }, 4000);
- });
- }
- b.disabled = false; b.textContent = "Cut it to the clock";
- if (!r.ok) { showMsg("msg", r.error || "Could not measure that."); return; }
- if (r.note) { showMsg("msg", r.note); return; }
- paint(r);
- showMsg("msg", "Shots re-cut at real word endings.", "ok");
- load();
- };
-
- api("align_script", { email: email, project_id: pid }).then(function (r) {
- if (r && r.ok && !r.pending && r.audio) paint(r);
- });
-}
-
-function bindPreviz() {
- var b = document.getElementById("pzmake");
- if (!b) return;
- var note = document.getElementById("pznote");
-
- async function poll() {
- var waited = 0;
- return await new Promise(function (done) {
- var t = setInterval(async function () {
- waited += 4;
- var g = await api("make_previz", { email: email, project_id: pid });
- if (g.ok && !g.pending) { clearInterval(t); done(g); return; }
- if (g.ok && g.pending && note) note.textContent = g.status_text || "";
- if (waited > 240) { clearInterval(t); done({ ok: false, error: "That is taking unusually long." }); }
- }, 4000);
- });
- }
-
- b.onclick = async function () {
- hideMsg("msg");
- b.disabled = true; b.textContent = "Speaking…";
- var r = await api("make_previz", { email: email, project_id: pid });
- if (r.ok && r.pending) { note.textContent = r.status_text || ""; r = await poll(); }
- b.disabled = false; b.textContent = "Speak it again";
- if (!r.ok) { note.textContent = ""; showMsg("msg", r.error || "Could not speak that."); return; }
- note.textContent = r.status_text || "";
- pzPaint(r.lines || []);
- };
-
- // Already spoken? Show it without asking again.
- api("make_previz", { email: email, project_id: pid }).then(function (r) {
- if (r && r.ok && !r.pending && (r.lines || []).length) {
- b.textContent = "Speak it again";
- note.textContent = r.status_text || "";
- pzPaint(r.lines);
- }
- });
-}
-
-// The picture is the hook; the link carries the video. Never the video itself
-// over MMS - carriers transcode it into mush.
-function bindShare() {
- var b = document.getElementById("sharebtn");
- if (!b) return;
- var note = document.getElementById("sharenote"),
- out = document.getElementById("shareout");
-
- // The file URL ends in /public with no filename. The headers are already
- // correct (video/mp4, filename=final.mp4) so anything that reads them is
- // fine, but clients that sniff the extension from the URL string are not.
- // A filename query is accepted and ignored by the file service.
- // Filled in by share_link, which owns the address. A link straight to the
- // file would be invisible to us; this one is counted server side.
- var SHARE_LINK = "";
- function named(url) { return SHARE_LINK || ""; }
-
- function paint(r) {
- var kb = Math.round((r.bytes || 0) / 1024);
- var link = named(r.video || "");
- var msg = ((DATA && DATA.script && DATA.script.title)
- ? DATA.script.title + " — " : "")
- + ((DATA && DATA.project && DATA.project.pet_name) || "your pet")
- + " has something to say. " + link;
- out.innerHTML = ''
- + ' + ')
'
- + '
';
- api("share_link", { email: email, project_id: pid }).then(function (s) {
- if (!(s && s.ok)) return;
- SHARE_LINK = s.url || "";
- var el = document.getElementById("viewcount");
- if (el) {
- el.innerHTML = ''
- + '
' + esc(r.size || "") + ' · ' + kb + ' KB' - + ' · well inside the 600KB most carriers allow, so it will not be ' - + 'downsampled.
' - + '' - + '' - + '' - + '' - + 'Download the picture' - + '' + esc(link) - + '
' - + '' + esc(SHARE_LINK) + '
Opened ' + (s.views || 0) - + ' time' + ((s.views === 1) ? '' : 's') + '.'; - } - var t = document.getElementById("sharemsg"); - if (t && SHARE_LINK) t.value = t.value.replace(/https?:\/\/\S+/, SHARE_LINK); - }); - var sl = document.getElementById("sharelink"); - if (sl) sl.onclick = async function () { - var title = (DATA && DATA.script && DATA.script.title) || "A video"; - // The native sheet is the shortest path into a text message on a phone. - if (navigator.share) { - try { await navigator.share({ title: title, text: msg, url: link }); return; } - catch (e) { if (e && e.name === "AbortError") return; } - } - try { - await navigator.clipboard.writeText(link); - sl.textContent = "Link copied"; - setTimeout(function () { sl.textContent = "Share the video"; }, 1600); - } catch (e) { showMsg("msg", "Copy this: " + link); } - }; - var c = document.getElementById("sharecopy"); - if (c) c.onclick = function () { - var t = document.getElementById("sharemsg"); - t.select(); - navigator.clipboard.writeText(t.value).then(function () { - c.textContent = "Copied"; - setTimeout(function () { c.textContent = "Copy the message"; }, 1600); - }).catch(function () { c.textContent = "Select it and copy"; }); - }; - } - - b.onclick = async function () { - hideMsg("msg"); - b.disabled = true; b.textContent = "Choosing a frame…"; - var r = await api("share_image", { email: email, project_id: pid, refresh: true }); - if (r.ok && r.pending) { - var waited = 0; - r = await new Promise(function (done) { - var t = setInterval(async function () { - waited += 4; - var g = await api("share_image", { email: email, project_id: pid }); - if (g.ok && !g.pending) { clearInterval(t); done(g); return; } - if (waited > 180) { clearInterval(t); done({ ok: false, error: "That is taking unusually long." }); } - }, 4000); - }); - } - b.disabled = false; b.textContent = "Pick another frame"; - if (!r.ok) { showMsg("msg", r.error || "Could not make that picture."); return; } - if (r.note) { showMsg("msg", r.note); return; } - note.textContent = r.status_text || ""; - paint(r); - }; - - api("share_image", { email: email, project_id: pid }).then(function (r) { - if (r && r.ok && !r.pending && r.image) { - b.textContent = "Pick another frame"; - note.textContent = r.status_text || ""; - paint(r); - } - }); -} - -function bindPost() { - loadTakes(); - bindShare(); - // The editing bay is opt-in. Most people want to watch the thing and leave. - var eo = document.getElementById("edlopen"); - if (eo) eo.onclick = function () { - var w = document.getElementById("edlwrap"); - var open = w.style.display === "none"; - w.style.display = open ? "" : "none"; - this.textContent = open ? "Close the video editor" : "Open the video editor"; - if (open) { - if (!EDL) loadEdl((DATA && DATA.project) || {}); - else tlDraw(); - w.scrollIntoView({ behavior: "smooth", block: "start" }); - } - }; - var sb = document.getElementById("seams"); - function paintSeams(r) { - var el = document.getElementById("seamout"); - if (!el) return; - el.innerHTML = '
' + esc(r.status_text || "") + '
' - + (r.seams || []).map(function (x) { - var col = x.verdict === "smooth" ? "var(--good)" - : (x.verdict === "visible" ? "var(--accent2)" : "var(--bad)"); - return ''
- + 'shot ' + x.after_shot + ' → ' + x.before_shot + ' at ' + x.at_seconds + 's · '
- + 'shift ' + x.shift_x + ',' + x.shift_y + ' · drift ' + x.drift + ' · '
- + '' + esc(x.verdict) + ''
- + (x.recommend_broll ? ' · worth a cutaway' : '')
- + '
';
- }).join("");
- }
-
- if (sb) sb.onclick = async function () {
- sb.disabled = true; sb.textContent = "Measuring…";
- var el = document.getElementById("seamout");
- var r = await api("seam_report", { email: email, project_id: pid });
- if (!r.ok) {
- sb.disabled = false; sb.textContent = "Measure the joins";
- showMsg("msg", r.error || "Could not measure.");
- return;
- }
- // Measuring downloads every shot and searches each join for the best
- // alignment, which is far too slow to answer inside one request.
- if (r.pending) {
- el.innerHTML = '' + esc(r.status_text || "Measuring…") + '
'; - var waited = 0; - var t = setInterval(async function () { - waited += 4; - var g = await api("seam_report", { email: email, project_id: pid }); - if (g.ok && !g.pending) { - clearInterval(t); - sb.disabled = false; sb.textContent = "Measure the joins"; - paintSeams(g); - return; - } - if (waited > 180) { - clearInterval(t); - sb.disabled = false; sb.textContent = "Measure the joins"; - showMsg("msg", "Measuring is taking unusually long."); - } - }, 4000); - return; - } - sb.disabled = false; sb.textContent = "Measure the joins"; - if (!r.seams || !r.seams.length) { - el.innerHTML = '' + esc(r.status_text || "Nothing to measure.") + '
'; - return; - } - el.innerHTML = '' + esc(r.status_text || "") + '
' - + r.seams.map(function (x) { - var col = x.verdict === "smooth" ? "var(--good)" - : (x.verdict === "visible" ? "var(--accent2)" : "var(--bad)"); - return ''
- + 'shot ' + x.after_shot + ' → ' + x.before_shot + ' at ' + x.at_seconds + 's · '
- + 'shift ' + x.shift_x + ',' + x.shift_y + ' · drift ' + x.drift + ' · '
- + '' + esc(x.verdict) + ''
- + (x.recommend_broll ? ' · worth a cutaway' : '')
- + '
';
- }).join("");
- };
-
- var cb = document.getElementById("cut");
- if (cb) cb.onclick = async function () {
- hideMsg("msg");
- cb.disabled = true; cb.textContent = "Cutting…";
- var r = await api("render_cut", { email: email, project_id: pid });
- if (!r.ok) { cb.disabled = false; cb.textContent = "Cut the B-roll in"; showMsg("msg", r.error || "Could not cut."); return; }
- var waited = 0;
- var t = setInterval(async function () {
- waited += 5;
- var g = await api("get_project", { email: email, project_id: pid });
- if (g.ok && g.project && g.project.cut_url) { clearInterval(t); load(); return; }
- if (waited > 300) {
- clearInterval(t);
- cb.disabled = false; cb.textContent = "Cut the B-roll in";
- showMsg("msg", "That is taking unusually long. Try again shortly.");
- }
- }, 5000);
- };
-}
-
-function bindBottom() {
- var rv = document.getElementById("revise");
- if (rv) rv.onclick = async function () {
- hideMsg("msg");
- var fb = document.getElementById("fb").value.trim();
- if (fb.length < 5) { showMsg("msg", "Tell us what you would like changed."); return; }
- rv.disabled = true; rv.textContent = "Sending…";
- var res = await api("revise_script", { email: email, project_id: pid, feedback: fb });
- if (!res.ok) { rv.disabled = false; rv.textContent = "Rewrite the words"; showMsg("msg", res.error || "That did not go through."); return; }
- showMsg("msg", "Rewriting now…", "ok");
- load();
- };
- var ap = document.getElementById("approve");
- if (ap) ap.onclick = async function () {
- hideMsg("msg");
- ap.disabled = true; ap.textContent = "Approving…";
- var res = await api("approve_script", { email: email, project_id: pid });
- if (!res.ok) { ap.disabled = false; ap.textContent = "Approve and lock it"; showMsg("msg", res.error || "That did not go through."); return; }
- showMsg("msg", res.status_text || "Approved.", "ok");
- load();
- };
-}
-
-async function load() {
- if (!pid || !email) return;
- if (!PRESETS.length) {
- var c = await api("camera_presets", {});
- if (c.ok) { PRESETS = c.presets || []; MODELS = c.models || []; }
- }
- var r = await api("get_project", { email: email, project_id: pid });
- if (!r.ok) { showMsg("msg", r.error || "Could not load that script."); return; }
- if (!PHOTOS.length && r.project && r.project.pet_id) {
- var ph = await api("list_photos", { email: email, pet_id: r.project.pet_id });
- if (ph.ok) PHOTOS = ph.photos || [];
- }
- render(r);
-}
-load();
-
-