100 lines
4 KiB
HTML
100 lines
4 KiB
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 · 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"]
|
|
};
|
|
|
|
function when(s) {
|
|
if (!s) return "";
|
|
var d = new Date(s);
|
|
return isNaN(d) ? s : d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
|
|
}
|
|
|
|
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>';
|
|
}
|
|
if (p.video_url) {
|
|
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>
|