paytolaugh/script.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Direct the shots — PayToLaugh</title>
<meta name="description" content="Read the script, set the scene and camera for each shot, then approve it.">
<link rel="stylesheet" href="/assets/app.css">
<style>
  .shot{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;
    display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start}
  @media(max-width:720px){.shot{grid-template-columns:1fr}}
  .shot .still{width:100%;aspect-ratio:9/16;border-radius:10px;border:1px solid var(--line);
    object-fit:cover;display:block;background:#000}
  .shot .noimg{width:100%;aspect-ratio:9/16;border-radius:10px;border:1px dashed var(--line);
    background:#0f1117;display:flex;align-items:center;justify-content:center;text-align:center;
    color:var(--muted);font-size:12.5px;padding:14px}
  .shot .n{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .shot .cont{font:11px/1 var(--mono);color:var(--accent2);margin-left:8px}
  .shot .line{font-size:17px;line-height:1.5;margin:10px 0 16px}
  .shot .foot{font:11.5px/1 var(--mono);color:var(--muted)}
  .mini{font-size:13px;font-weight:600;margin:0 0 5px;display:block}
  .mini span{color:var(--muted);font-weight:400}
  .shot textarea{min-height:62px}
  .warn{background:#2a2112;border:1px solid #5b4520;color:#f0d9a7;border-radius:10px;padding:13px 16px;margin-bottom:16px;font-size:14px}
  .full{background:#0f1117;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:24px;
    color:var(--muted);font-size:15.5px;line-height:1.7}
</style>
</head>
<body>
<div class="wrap">

  <header class="page">
    <h1 id="title">The script</h1>
    <p id="sub">Read it through, then direct it. Every shot can have its own setting and camera move.</p>
  </header>

  <section>
    <div class="msg" id="msg"></div>
    <div id="out"><p style="color:var(--muted)">Loading…</p></div>
  </section>

  <footer>PayToLaugh &middot; your pet has opinions.</footer>
</div>

<script src="/assets/app.js"></script>
<script>
navBar("videos");
var email = requireSession();
var pid = new URLSearchParams(location.search).get("id");
var poll = null, PRESETS = [], PHOTOS = [], DATA = null;

if (!pid) {
  document.getElementById("out").innerHTML =
    '<div class="empty">No script chosen. <a href="/videos.html">Back to my videos</a>.</div>';
}

function photoOptions(sel) {
  if (!PHOTOS.length) return '<option value="">No photos uploaded</option>';
  return PHOTOS.map(function (p) {
    var label = p.kind.charAt(0).toUpperCase() + p.kind.slice(1);
    return '<option value="' + esc(p.id) + '"' + (p.id === sel ? ' selected' : '') + '>'
      + esc(label) + '</option>';
  }).join("");
}

function shotHtml(s, locked) {
  var img = s.plate_url
    ? '<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 controls = locked ? '' :
      '<label class="mini">The setting <span>— anywhere, including places a real pet could not be</span></label>'
    + '<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>'
    + '<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>'
    + '</div>';

  return '<div class="shot">'
    + '<div>' + img + '</div>'
    + '<div>'
    + '<span class="n">Shot ' + (s.index || "") + '</span>'
    + (s.continues ? '<span class="cont">continues the last shot</span>' : '')
    + '<p class="line">' + esc(s.line || "") + '</p>'
    + '<p class="foot">' + (s.word_count || 0) + ' words · about ' + (s.est_seconds || 0) + 's</p>'
    + '<div style="margin-top:16px">' + controls + '</div>'
    + '</div></div>';
}

function render(r) {
  DATA = r;
  var p = r.project, s = r.script, out = document.getElementById("out");
  var used = parseInt(p.revisions || 0, 10);
  var left = (r.max_revisions || 3) - used;

  if (p.status === "scripting") {
    out.innerHTML = '<div class="card"><p style="margin:0;color:var(--muted)">'
      + 'Writing now. This usually takes under a minute — the page updates itself.</p></div>';
    if (!poll) poll = setInterval(load, 5000);
    return;
  }
  if (poll) { clearInterval(poll); poll = null; }

  if (p.status === "script_failed") {
    out.innerHTML = '<div class="card"><p style="margin:0 0 16px">The writer could not finish this one.</p>'
      + '<a class="btn" style="display:inline-block;text-decoration:none" href="/create.html">Start again</a></div>';
    return;
  }
  if (!s || !s.segments) { out.innerHTML = '<div class="empty">No script yet.</div>'; return; }

  document.getElementById("title").textContent = s.title || "The script";
  document.getElementById("sub").textContent = s.premise || "";

  var locked = p.status === "approved";
  var warn = (s._warnings && s._warnings.length)
    ? '<div class="warn"><strong>Worth a look:</strong> ' + s._warnings.map(esc).join(" · ") + '</div>' : "";

  var head = '<div class="quote" style="margin-bottom:22px">'
    + '<div><div class="big">$' + Number(p.price_usd || 0).toFixed(2) + '</div>'
    + '<div class="sub">' + ((p.segments || 4) * 8) + ' seconds · ' + (p.segments || 4) + ' shots</div></div>'
    + '<div class="sub">' + (locked ? "Approved" : left + " rewrite" + (left === 1 ? "" : "s") + " left") + '</div></div>';

  var full = s.full_text
    ? '<h2 class="sec">The whole piece</h2><div class="full">' + esc(s.full_text) + '</div>' : "";

  var cams = '<datalist id="cams">' + PRESETS.map(function (c) {
    return '<option value="' + esc(c) + '">'; }).join("") + '</datalist>';

  var actions = locked
    ? '<div class="card"><p style="margin:0"><strong>Approved.</strong> Filming is switched on once payment is live. Nothing has been charged.</p></div>'
    : '<div class="card">'
      + '<h2 class="sec">Change the words</h2>'
      + '<div class="field"><label for="fb">What would you change</label>'
      + '<span class="hint">Be specific. “Too polite, he would be smugger” beats “make it funnier”. '
      + 'Setting and camera you can just edit directly above.</span>'
      + '<textarea id="fb" ' + (left <= 0 ? "disabled" : "") + ' placeholder="Shot three is too wordy, and he would never admit the robot is good at anything."></textarea></div>'
      + '<button class="btn ghost" id="revise" ' + (left <= 0 ? "disabled" : "") + '>'
      + (left > 0 ? "Rewrite the words" : "No rewrites left") + '</button>'
      + '<button class="btn" id="approve" style="margin-left:10px">Approve and lock it</button>'
      + '</div>';

  out.innerHTML = cams + head + warn + full
    + '<h2 class="sec">The shots</h2>'
    + s.segments.map(function (x) { return shotHtml(x, locked); }).join("")
    + actions;

  wire(locked);
}

function wire(locked) {
  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");
    });
  });

  [].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();
}

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 || [];
  }
  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();
</script>
</body>
</html>