Paid shorts: full-screen vertical video feed over the video inventory, earn per watched short

- /shorts page: no-seek full-screen player, server-clock watch, credit + swipe to next - Reuses /api/my/videos + /api/my/videowatch (same fraud model, daily cap, self-exclusion) - Linked from Earn credits > Watch videos Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-06 09:02:29 -05:00
parent b7e9fdf656
commit c5dd5c685b
4 changed files with 103 additions and 1 deletions
@@ -0,0 +1,52 @@
+// Paid shorts: a full-screen vertical feed over the video-ad inventory. You must
+// watch each short's required time (server-clock enforced, no seek) to earn,
+// then advance to the next. Reuses /api/my/videos + /api/my/videowatch.
+(function () {
+  const $ = id => document.getElementById(id);
+  const st = { token: null, secs: 0, maxSeen: 0, credited: false, done: false };
+  function j(url, body) {
+    return fetch(url, body
+      ? { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }
+      : undefined).then(r => r.json());
+  }
+  async function load() {
+    st.token = null; st.maxSeen = 0; st.credited = false; st.done = false;
+    $('shOver').hidden = true; $('shCta').hidden = true; $('shNext').hidden = true;
+    let r = null;
+    try { r = await j('/api/my/videos'); } catch (e) {}
+    if (!r || r.error) { $('shVideo').hidden = true; $('shMsg').hidden = false; $('shMsg').textContent = 'Sign in on the dashboard to watch shorts and earn.'; return; }
+    $('shStat').textContent = 'today: ' + (r.status.count || 0) + ' / ' + r.status.cap;
+    if (!r.ad) {
+      $('shVideo').hidden = true; $('shMsg').hidden = false;
+      $('shMsg').textContent = r.status.left <= 0 ? 'That\'s today\'s shorts. Come back tomorrow.' : 'No shorts in rotation right now. Check back soon.';
+      return;
+    }
+    st.token = r.token; st.secs = r.ad.watchSecs;
+    const v = $('shVideo');
+    $('shMsg').hidden = true; v.hidden = false;
+    v.src = r.ad.videoUrl; v.currentTime = 0;
+    $('shTitle').textContent = r.ad.title || '';
+    $('shCta').href = r.ad.ctaUrl; $('shCta').textContent = r.ad.ctaLabel || 'Learn more';
+    $('shOver').hidden = false; $('shCta').hidden = false;
+    v.onseeking = () => { if (v.currentTime > st.maxSeen + 0.5) v.currentTime = st.maxSeen; };
+    v.ontimeupdate = () => {
+      if (v.currentTime > st.maxSeen) st.maxSeen = v.currentTime;
+      const left = Math.max(0, Math.ceil(st.secs - st.maxSeen));
+      $('shTimer').textContent = left > 0 ? 'Watch ' + left + 's more to earn' : 'Earned — swipe to the next';
+      if (!st.done && st.maxSeen >= st.secs) { st.done = true; credit(); }
+    };
+    v.play().catch(() => {});
+  }
+  async function credit() {
+    if (st.credited) return; st.credited = true;
+    try {
+      const r = await j('/api/my/videowatch', { token: st.token });
+      if (r.credited) { $('shStat').textContent = 'today: ' + (r.status.count || 0) + ' / ' + (r.status.cap || 0) + ' · +' + r.credited; }
+    } catch (e) {}
+    $('shNext').hidden = false;
+  }
+  $('shNext').addEventListener('click', load);
+  // tap the video to pause/resume
+  $('shVideo').addEventListener('click', () => { const v = $('shVideo'); if (v.paused) v.play(); else v.pause(); });
+  load();
+})();