86 lines
2.9 KiB
HTML
86 lines
2.9 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", "Being written"],
|
|
script_ready: ["submitted", "Script ready for you"],
|
|
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 dl = p.video_url
|
|
? '<a class="btn ghost" style="display:inline-block;text-decoration:none;margin-top:10px" 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>'
|
|
+ dl
|
|
+ '</div></div>';
|
|
}
|
|
|
|
(async function () {
|
|
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>';
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|