// Reel — shared tokens, icons, components, helpers const REEL_TOKENS = { bg: '#0a0a0a', surface: '#141414', surface2: '#1c1c1c', surface3: '#262626', border: 'rgba(255,255,255,0.08)', borderStrong: 'rgba(255,255,255,0.14)', text: '#fafafa', textDim: '#a1a1a1', textMuted: '#6b6b6b', accent: '#f59e0b', accentSoft: 'rgba(245,158,11,0.16)', red: '#ef4444', green: '#22c55e', sans: '"Manrope", system-ui, -apple-system, sans-serif', mono: '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace', }; // Empty arrays — populated per-video by player window.REEL_SUBTITLES = []; window.REEL_CHAPTERS = []; window.REEL_BOOKMARKS = []; window.REEL_FAV_SCENES = []; function fmt(secs) { const s = Math.max(0, Math.floor(secs)); const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const ss = s % 60; const pad = n => String(n).padStart(2, '0'); return h > 0 ? `${h}:${pad(m)}:${pad(ss)}` : `${m}:${pad(ss)}`; } function accentSoftColor(hex) { // Parse hex to rgba with 0.16 opacity const r = parseInt(hex.slice(1,3),16); const g = parseInt(hex.slice(3,5),16); const b = parseInt(hex.slice(5,7),16); return `rgba(${r},${g},${b},0.16)`; } function Icon({ name, size = 22, color = 'currentColor', strokeWidth = 1.7, style, text }) { const s = { width: size, height: size, display: 'inline-block', flexShrink: 0, ...style }; const c = { fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }; const skipText = text != null ? String(text) : null; switch (name) { case 'play': return ; case 'play-line': return ; case 'pause': return ; case 'next': return ; case 'prev': return ; case 'fwd10': return 2?6:7} fontFamily="ui-monospace,monospace" fontWeight="700" fill={color} textAnchor="middle" stroke="none">{skipText||'10'}; case 'back10': return 2?6:7} fontFamily="ui-monospace,monospace" fontWeight="700" fill={color} textAnchor="middle" stroke="none">{skipText||'10'}; case 'search': return ; case 'menu': return ; case 'close': return ; case 'back': return ; case 'more': return ; case 'more-h': return ; case 'folder': return ; case 'film': return ; case 'list': return ; case 'grid': return ; case 'home': return ; case 'heart': return ; case 'heart-fill': return ; case 'gear': return ; case 'cc': return ; case 'speed': return ; case 'lock': return ; case 'unlock': return ; case 'pip': return ; case 'cast': return ; case 'volume': return ; case 'volume-x': return ; case 'sun': return ; case 'moon': return ; case 'bookmark': return ; case 'bookmark-fill':return ; case 'timer': return ; case 'eq': return ; case 'plus': return ; case 'download': return ; case 'file': return ; case 'check': return ; case 'chev-right': return ; case 'chev-down': return ; case 'sort': return ; case 'aspect': return ; case 'audio': return ; case 'rotate': return ; case 'pin': return ; case 'eye': return ; case 'eye-off': return ; case 'star': return ; case 'clock': return ; case 'scan': return ; case 'history': return ; case 'cloud': return ; case 'video-rec': return ; default: return ; } } function Thumbnail({ hue = 30, label = '', aspect = '16/9', radius = 10, style }) { const reactId = React.useId ? React.useId() : Math.random().toString(36).slice(2); const pid = `rp-${reactId.replace(/:/g, '')}`; const gid = `rg-${reactId.replace(/:/g, '')}`; return (
{label && (
{label}
)}
); } function ResumeBar({ progress = 0, accent = REEL_TOKENS.accent }) { return (
); } function Chip({ active, children, onClick, style }) { return ( ); } // Bottom sheet container function Sheet({ title, sub, onClose, children, height = 'auto', actions }) { const T = REEL_TOKENS; const iconBtn = { width:38,height:38,borderRadius:19,border:'none',background:'transparent',color:T.text,display:'inline-flex',alignItems:'center',justifyContent:'center',cursor:'pointer',padding:0 }; return (
e.stopPropagation()} style={{ background:T.surface,color:T.text,borderTopLeftRadius:24,borderTopRightRadius:24,borderTop:'1px solid '+T.border,padding:'8px 0 18px',maxHeight:height==='full'?'92%':'80%',display:'flex',flexDirection:'column' }}>
{title}
{sub &&
{sub}
}
{actions}
{children}
); } // Seek bar with chapter ticks, bookmark stars, fav-scene hearts function SeekBar({ pos, duration, accent, onChange, favScenes = [], chapters = [], bookmarks = [] }) { const ref = React.useRef(null); const pct = duration > 0 ? (pos / duration) * 100 : 0; const onDown = e => { const rect = ref.current.getBoundingClientRect(); const move = ev => { const x = (ev.touches ? ev.touches[0].clientX : ev.clientX) - rect.left; onChange(Math.max(0, Math.min(1, x / rect.width)) * duration); }; move(e); const up = () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchmove', move); window.removeEventListener('touchend', up); }; window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); window.addEventListener('touchmove', move); window.addEventListener('touchend', up); }; return (
{chapters.map((c,i) =>
)} {bookmarks.map((b,i) =>
)} {favScenes.map((f,i) =>
)}
); } function useTweaks(defaults) { const KEY = 'reel-tweaks'; const [tweaks, setAll] = React.useState(() => { try { return { ...defaults, ...JSON.parse(localStorage.getItem(KEY) || '{}') }; } catch { return defaults; } }); const setTweak = React.useCallback((k, v) => { setAll(t => { const next = { ...t, [k]: v }; try { localStorage.setItem(KEY, JSON.stringify(next)); } catch {} return next; }); }, []); return [tweaks, setTweak]; } Object.assign(window, { REEL_TOKENS, fmt, accentSoftColor, Icon, Thumbnail, ResumeBar, Chip, Sheet, SeekBar, useTweaks });