// video-player.jsx — Full-page video player + Reddit-style Comments sheet. // // Used for the "Watch post-game presser" quest and any other tap-to-play // video card (Continue Watching, For You, Headlines). // // Props: // video: { title, episode, coach, sub, duration, views, drop, poster, comments } // (typically the active tenant's `PRESSER` config) // onClose: () => void — fired when the user dismisses the player. // App-level wiring fires +50 pts on close. const RW_AVATARS_VP = Array.from({ length: 10 }).map((_, i) => `mountaineer/assets/rewards/avatar-${String(i + 1).padStart(2, '0')}.png`); // ───────────────────────────────────────────────────────────────────── // FullScreenVideoPlayer // ───────────────────────────────────────────────────────────────────── function FullScreenVideoPlayer({ video, onClose }) { const v = video || {}; const duration = v.duration || '22:14'; // Parse duration "MM:SS" into total seconds const totalSec = React.useMemo(() => { const [m, s] = String(duration).split(':').map(n => parseInt(n, 10) || 0); return m * 60 + s; }, [duration]); const [playing, setPlaying] = React.useState(true); const [muted, setMuted] = React.useState(false); const [elapsed, setElapsed] = React.useState(0); // seconds const [showComments, setShowComments] = React.useState(false); const [showChrome, setShowChrome] = React.useState(true); // Auto-open the comments sheet 1s after the player mounts so the discussion // is the first thing people see. (Prototype — demonstrates the chat feature.) React.useEffect(() => { const t = setTimeout(() => setShowComments(true), 1000); return () => clearTimeout(t); }, []); // "Playback" advances the scrubber while playing React.useEffect(() => { if (!playing) return; const iv = setInterval(() => { setElapsed(e => { const next = e + 1; // Loop back when we hit the end so the prototype keeps running return next >= totalSec ? 0 : next; }); }, 1000); return () => clearInterval(iv); }, [playing, totalSec]); // Auto-hide chrome after 3s of inactivity for a cinematic feel React.useEffect(() => { if (!showChrome) return; const t = setTimeout(() => setShowChrome(false), 3500); return () => clearTimeout(t); }, [showChrome, elapsed]); const tapVideo = () => setShowChrome(s => !s); const fmt = (sec) => { const m = Math.floor(sec / 60); const s = sec % 60; return `${m}:${String(s).padStart(2, '0')}`; }; const pct = totalSec ? (elapsed / totalSec) * 100 : 0; const [posterOk, setPosterOk] = React.useState(true); return (
{/* ─── Poster image (the "video frame") ─── */}
{posterOk && v.poster ? ( {v.title setPosterOk(false)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', // Subtle Ken Burns zoom while playing animation: playing ? 'mtnKenBurns 28s ease-out infinite alternate' : 'none', }} /> ) : (
📹
)} {/* Dim overlay so chrome is legible */}
{/* Ken Burns keyframes */} {/* ─── Top chrome: close + title + ⋯ ─── */}
{v.episode || 'Ep. 12'}
{v.title || 'Post-Game Presser'}
{/* ─── Center play/pause overlay ─── */} {showChrome && ( )} {/* ─── Bottom chrome: scrubber + controls + episode meta ─── */}
{/* Episode meta */}
{v.sub || 'After the K-State win · 22 min'}
{v.views || '14.2K views'} · {v.drop || '2 hours ago'}
{/* Scrubber */}
{ // Seek visually based on click position const rect = e.currentTarget.getBoundingClientRect(); const ratio = (e.clientX - rect.left) / rect.width; setElapsed(Math.round(ratio * totalSec)); }}>
{fmt(elapsed)} -{fmt(Math.max(0, totalSec - elapsed))}
{/* Control row */}
{/* ─── Comments bottom sheet ─── */} {showComments && ( setShowComments(false)} /> )}
); } const iconBtnStyle = (active) => ({ width: 38, height: 38, borderRadius: 19, background: active ? 'rgba(234,170,0,0.18)' : 'rgba(255,255,255,0.10)', border: `0.5px solid ${active ? 'rgba(234,170,0,0.5)' : 'rgba(255,255,255,0.16)'}`, color: '#fff', cursor: 'pointer', padding: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, }); const iconBtn = iconBtnStyle; // ───────────────────────────────────────────────────────────────────── // CommentsSheet — Reddit/Threads-style bottom sheet // ───────────────────────────────────────────────────────────────────── function CommentsSheet({ comments = [], videoTitle, onClose }) { const [sort, setSort] = React.useState('top'); // 'top' | 'new' const [votes, setVotes] = React.useState({}); // { id: 'up' | 'down' | null } const [expanded, setExpanded] = React.useState({}); // { id: true } for "Read more" // Apply sort const sorted = React.useMemo(() => { const arr = comments.slice(); if (sort === 'top') { arr.sort((a, b) => { const av = (a.votes || 0) + adjustment(votes[a.id]); const bv = (b.votes || 0) + adjustment(votes[b.id]); return bv - av; }); } else { // 'new' — assume input order is roughly newest at bottom for 't' strings // Reverse so "1m ago" surfaces first arr.reverse(); } return arr; }, [comments, sort, votes]); function adjustment(v) { if (v === 'up') return 1; if (v === 'down') return -1; return 0; } const toggleVote = (id, direction) => { setVotes(prev => ({ ...prev, [id]: prev[id] === direction ? null : direction })); }; return (
e.stopPropagation()} style={{ width: '100%', height: '74%', background: '#15151B', color: '#fff', borderTopLeftRadius: 22, borderTopRightRadius: 22, boxShadow: '0 -12px 40px rgba(0,0,0,0.6)', animation: 'mtnSheetUp 320ms cubic-bezier(0.22, 1, 0.36, 1)', display: 'flex', flexDirection: 'column', overflow: 'hidden', }}> {/* Drag handle */}
{/* Header */}
Comments
{/* Sort pills */}
{/* Comments list (scrollable) */}
{sorted.map((c, idx) => { const myVote = votes[c.id] || null; const voteCount = (c.votes || 0) + adjustment(myVote); const showFull = expanded[c.id] || !c.truncate; const body = showFull ? c.body : (c.body.length > 90 ? c.body.slice(0, 88) : c.body); const avatarUrl = RW_AVATARS_VP[(c.avatarIdx ?? idx) % 10]; return (
{/* Avatar with brand-ring */}
{/* handle + timestamp + unread dot + ⋯ */}
{c.h} · {c.t} {c.unread && ( )}
{/* Body */}
{body} {c.truncate && !showFull && ( <> … setExpanded(e => ({ ...e, [c.id]: true }))} style={{ color: 'rgba(255,255,255,0.5)', cursor: 'pointer', fontWeight: 600, }} >Read more )}
{/* Action row: up / count / down / reply */}
{voteCount.toLocaleString()}
); })}
{/* Compose row */}
Add a comment…
); } function pillStyle(active) { return { padding: '7px 14px', borderRadius: 999, background: active ? '#E5202C' : 'rgba(255,255,255,0.10)', border: 'none', color: '#fff', fontFamily: DS.sans, fontSize: 13, fontWeight: 700, letterSpacing: '-0.005em', cursor: 'pointer', }; } function voteBtnStyle(active) { return { minWidth: 28, height: 28, padding: '0 4px', background: active ? 'rgba(234,170,0,0.12)' : 'transparent', border: 'none', color: active ? WVU.gold : 'rgba(255,255,255,0.55)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 6, }; } Object.assign(window, { FullScreenVideoPlayer, CommentsSheet });