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 += '<button type="button" class="btn" style="margin-top:10px;margin-left:8px" '
        + 'data-share="' + encodeURIComponent(p.id) + '">Share</button>';
    cta += '<a class="btn ghost" 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>';
  }

  // The file URL ends in /public with no filename. Headers are already right
  // (video/mp4), but clients that sniff the URL string are not, and a filename
  // query is accepted and ignored by the file service.
  window.__shareUrl = window.__shareUrl || function (p) {
    var u = p.cut_url || p.video_url || "";
    if (!u) return "";
    var slug = ((p.pet_name || "video") + " " + (p.title || "")).toLowerCase()
      .replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40) || "video";
    return u + (u.indexOf("?") < 0 ? "?" : "&") + "v=" + slug + ".mp4";
  };

  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>';
  var byId = {};
  r.projects.forEach(function (p) { byId[p.id] = p; });
  [].forEach.call(out.querySelectorAll("[data-share]"), function (b) {
    b.onclick = async function () {
      var p = byId[decodeURIComponent(b.getAttribute("data-share"))];
      if (!p) return;
      var link = window.__shareUrl(p);
      if (!link) { showMsg("msg", "That one has no video yet."); return; }
      var title = p.title || ((p.pet_name || "Your pet") + " has something to say");
      // The native sheet is the shortest path into a text message on a phone.
      if (navigator.share) {
        try { await navigator.share({ title: title, text: title, url: link }); return; }
        catch (e) { if (e && e.name === "AbortError") return; }
      }
      try {
        await navigator.clipboard.writeText(link);
        b.textContent = "Copied";
        setTimeout(function () { b.textContent = "Share"; }, 1600);
      } catch (e) { showMsg("msg", "Copy this: " + link); }
    };
  });
  // 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>