paytolaugh/videos.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My videos — PayToLaugh</title>
<meta name="description" content="Everything you have submitted, and every video that has come back.">
<link rel="stylesheet" href="/assets/app.css">
</head>
<body>
<div class="wrap">

  <header class="page">
    <h1>My videos</h1>
    <p>Everything you have submitted, newest first.</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 LABEL = {
  submitted:    ["submitted", "In the queue"],
  scripting:    ["submitted", "Writing the script"],
  script_ready: ["ready",     "Script ready to review"],
  script_failed:["failed",    "Script did not write"],
  approved:     ["ready",     "Approved, waiting to film"],
  rendering:    ["submitted", "Filming"],
  ready:        ["ready",     "Ready"],
  failed:       ["failed",    "Did not work"]
};

// when() lives in app.js and includes the time. A local copy here used to
// shadow it and print the date alone, which makes several videos made on one
// day impossible to tell apart.

function card(p) {
  var st = LABEL[p.status] || ["submitted", p.status || "In the queue"];
  var media = p.video_url
    ? '<video controls playsinline preload="metadata" src="' + esc(p.video_url) + '"></video>'
    : '<div class="ph">Not filmed yet</div>';

  var cta = "";
  if (p.status === "script_ready") {
    cta = '<a class="btn" style="display:inline-block;text-decoration:none;margin-top:10px" href="/script.html?id='
        + encodeURIComponent(p.id) + '">Review the script</a>';
  } else if (p.status === "scripting") {
    cta = '<a class="btn ghost" style="display:inline-block;text-decoration:none;margin-top:10px" href="/script.html?id='
        + encodeURIComponent(p.id) + '">Watch it being written</a>';
  } else if (p.status === "approved" || p.status === "script_failed") {
    cta = '<a class="btn ghost" style="display:inline-block;text-decoration:none;margin-top:10px" href="/script.html?id='
        + encodeURIComponent(p.id) + '">See the script</a>';
  } else if (p.status === "draft") {
    cta = '<a class="btn" style="display:inline-block;text-decoration:none;margin-top:10px" href="/create.html?id='
        + encodeURIComponent(p.id) + '">Finish setting it up</a>';
  }
  if (p.video_url) {
    // A finished video was a dead end here: watch or download, and no way back
    // into the shots, the cutaways or the cut without knowing the URL.
    cta += '<a class="btn" style="display:inline-block;text-decoration:none;margin-top:10px;margin-left:8px" href="/script.html?id='
        + encodeURIComponent(p.id) + '">Edit</a>';
    cta += '<a class="btn ghost" style="display:inline-block;text-decoration:none;margin-top:10px;margin-left:8px" href="'
        + esc(p.video_url) + '" download>Download</a>';
  }

  return '<div class="item">'
    + '<div>' + media + '</div>'
    + '<div>'
    + '<span class="badge ' + st[0] + '">' + esc(st[1]) + '</span>'
    + '<h3>' + esc(p.pet_name || "Your pet") + ' reacts</h3>'
    + '<p class="meta">' + (p.source_url ? '<a href="' + esc(p.source_url) + '" rel="noopener noreferrer nofollow" target="_blank">' + esc(p.source_url) + '</a>' : "") + '</p>'
    + '<p class="meta">' + esc(p.owner_notes || "") + '</p>'
    + '<p class="meta">' + ((p.segments || 4) * 8) + ' seconds · '
    + (p.price_usd != null ? "$" + Number(p.price_usd).toFixed(2) : "") + ' · ' + esc(when(p.created_at)) + '</p>'
    + cta
    + '</div></div>';
}

async function load() {
  if (!email) return;
  var r = await api("list_projects", { email: email });
  var out = document.getElementById("out");
  if (!r.ok) { out.innerHTML = ""; showMsg("msg", r.error || "Could not load your videos."); return; }
  if (!r.projects || !r.projects.length) {
    out.innerHTML = '<div class="empty"><p style="margin:0 0 16px">Nothing here yet.</p>'
      + '<a class="btn" style="display:inline-block;text-decoration:none" href="/create.html">Make your first video</a></div>';
    return;
  }
  out.innerHTML = '<div class="list">' + r.projects.map(card).join("") + '</div>';
  // Anything still being written will change shortly; refresh so the button appears.
  if (r.projects.some(function (p) { return p.status === "scripting"; })) setTimeout(load, 6000);
}
load();
</script>
</body>
</html>