martbost
a634f83a8e
- Videos now carry client-detected pixel dimensions (videoW/videoH) captured at campaign create (upload or direct link). serveVideo takes an orientation filter: Shorts reel (/shorts) serves portrait (height>width); the Watch videos tab serves landscape, including legacy/unknown-dimension videos so nothing is orphaned. - shorts.js requests the portrait feed and has a client guard that skips any landscape video that slips through. Create form shows the detected orientation. - Achievement badge share image: member name now renders in gold with a dark outline (was low-contrast dark ink) and sits centered on the ribbon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
60 lines
3.1 KiB
JavaScript
60 lines
3.1 KiB
JavaScript
// 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, skips: 0 };
|
|
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?orientation=portrait'); } 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;
|
|
// safety net: this reel is portrait-only. If a landscape video slips through, skip to the next.
|
|
v.onloadedmetadata = () => {
|
|
if (v.videoWidth && v.videoHeight && v.videoWidth > v.videoHeight) {
|
|
if (st.skips++ < 4) { load(); return; }
|
|
v.hidden = true; $('shMsg').hidden = false; $('shMsg').textContent = 'No shorts in rotation right now. Check back soon.';
|
|
} else { st.skips = 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();
|
|
})();
|