// ───────────────────────────────────────────────────────────────────── // VideosView — Catalog · Videos tab // ───────────────────────────────────────────────────────────────────── // Renders music-video records sourced from window.RS.videos (88 records // from the RS export). Each video points at a Recording (and through it // at a Work). Surfaces: // • KPI strip (total videos, controlled %, with-ISRC, with-YouTube) // • Toolbar w/ view toggle (grid|table) and Content-ID filter // • Grid: thumbnail card → links to YouTube + recording row // • Table: ID · TITLE · RECORDING · ISRC · LINKS · CONTROLLED · CLAIMANT // // Click → opens the underlying recording in catalog (ScreenRecording). // If a YouTube link exists we also render a quick-launch external icon. // ───────────────────────────────────────────────────────────────────── (function () { function VideosView({ go, q = '', view = 'grid' }) { const all = (window.RS && window.RS.videos) || []; // ── Filters ──────────────────────────────────────────────────────── const [contentIdFilter, setContentIdFilter] = React.useState('any'); // any | claimed | none const [linkFilter, setLinkFilter] = React.useState('any'); // any | youtube | facebook | both | none // ── Search + filter pipeline ────────────────────────────────────── const filtered = React.useMemo(() => { const qq = (q || '').trim().toLowerCase(); return all.filter((v) => { if (qq) { const hay = [ v['Video Name'], v['Video ID'], v['Recording'], v['ISRC (Video)'], v['Content ID Claimants'], ].filter(Boolean).join(' ').toLowerCase(); if (!hay.includes(qq)) return false; } if (contentIdFilter === 'claimed' && !v['Content ID Claimants']) return false; if (contentIdFilter === 'none' && v['Content ID Claimants']) return false; const hasYT = !!v['YouTube Link']; const hasFB = !!v['FB Video Link']; if (linkFilter === 'youtube' && !hasYT) return false; if (linkFilter === 'facebook' && !hasFB) return false; if (linkFilter === 'both' && !(hasYT && hasFB)) return false; if (linkFilter === 'none' && (hasYT || hasFB)) return false; return true; }); }, [all, q, contentIdFilter, linkFilter]); // ── KPIs ────────────────────────────────────────────────────────── const kpis = React.useMemo(() => { const total = all.length; const controlled = all.filter((v) => (v['Controlled'] || '').toLowerCase().startsWith('y')).length; const withIsrc = all.filter((v) => v['ISRC (Video)']).length; const withYt = all.filter((v) => v['YouTube Link']).length; return { total, controlled, withIsrc, withYt }; }, [all]); // ── Helpers ─────────────────────────────────────────────────────── const ytEmbedThumb = (url) => { if (!url) return null; // youtu.be/ID or youtube.com/watch?v=ID let id = null; const m1 = url.match(/youtu\.be\/([\w-]+)/); const m2 = url.match(/[?&]v=([\w-]+)/); if (m1) id = m1[1]; else if (m2) id = m2[1]; return id ? `https://i.ytimg.com/vi/${id}/hqdefault.jpg` : null; }; // Card click → open the video drawer (editable). Holding shift opens // the linked recording in catalog instead. const openRecording = (v, e) => { if (e && (e.shiftKey || e.metaKey)) { const recId = v['Recording']; const rec = (window.RECORDINGS || []).find((r) => r.title === recId || r.id === recId); if (rec) window.dispatchEvent(new CustomEvent('astro-open-recording', { detail: { id: rec.id } })); return; } window.dispatchEvent(new CustomEvent('astro-open-video', { detail: { id: v['Video ID'] } })); }; // ── Header KPI strip ────────────────────────────────────────────── const kpiStrip = (
{[ { l: 'TOTAL VIDEOS', v: kpis.total.toLocaleString(), sub: 'in catalog' }, { l: 'CONTROLLED', v: kpis.controlled, sub: kpis.total ? `${Math.round(100 * kpis.controlled / kpis.total)}% of catalog` : '—' }, { l: 'WITH ISRC', v: kpis.withIsrc, sub: kpis.total ? `${Math.round(100 * kpis.withIsrc / kpis.total)}% registered` : '—' }, { l: 'YOUTUBE LINKED', v: kpis.withYt, sub: kpis.total ? `${Math.round(100 * kpis.withYt / kpis.total)}% live` : '—' }, ].map((s, i, arr) => (
{s.l}
{s.v}
{s.sub}
))}
); // ── Filter chips bar ────────────────────────────────────────────── const FilterChip = ({ active, onClick, children }) => ( ); const filtersRow = (
{filtered.length} VIDEO{filtered.length === 1 ? '' : 'S'}{filtered.length !== all.length && ` · OF ${all.length}`}
CONTENT ID
setContentIdFilter('any')}>ANY setContentIdFilter('claimed')}>CLAIMED setContentIdFilter('none')}>UNCLAIMED
LINKS
setLinkFilter('any')}>ANY setLinkFilter('youtube')}>YT setLinkFilter('facebook')}>FB setLinkFilter('both')}>BOTH setLinkFilter('none')}>NONE
); // ── Empty state ─────────────────────────────────────────────────── const empty = (
NO VIDEOS MATCH
Try clearing search or filters.
); // ── Grid card ───────────────────────────────────────────────────── const Card = ({ v }) => { const yt = v['YouTube Link']; const fb = v['FB Video Link']; const thumb = ytEmbedThumb(yt); const claimed = !!v['Content ID Claimants']; const controlled = (v['Controlled'] || '').toLowerCase().startsWith('y'); return (
openRecording(v, e)} style={{ borderRight: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', cursor: 'pointer', position: 'relative', background: 'var(--bg)', }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-2)'} onMouseLeave={(e) => e.currentTarget.style.background = 'var(--bg)'}> {/* Thumbnail / placeholder */}
{!thumb && (
)} {/* Play overlay */} {thumb && (
)} {/* Top-right badges */}
{claimed && ( CID )} {controlled && ( CTRL )}
{/* Bottom-left ID stamp */} {v['Video ID']}
{/* Body */}
{v['Video Name']}
{v['ISRC (Video)'] && (<> {v['ISRC (Video)']} · )} {v['Content ID Claimants'] || 'unclaimed'}
{/* Footer: link icons */}
{yt && ( e.stopPropagation()} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 7px', border: '1px solid var(--rule)', fontSize: 10, color: 'var(--ink-2)', textDecoration: 'none' }} className="ff-mono upper"> YT )} {fb && ( e.stopPropagation()} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 7px', border: '1px solid var(--rule)', fontSize: 10, color: 'var(--ink-2)', textDecoration: 'none' }} className="ff-mono upper"> FB )} {!yt && !fb && ( NO LINKS )}
); }; // ── Table row ───────────────────────────────────────────────────── const TableRow = ({ v }) => { const yt = v['YouTube Link']; const fb = v['FB Video Link']; const claimed = !!v['Content ID Claimants']; return (
openRecording(v, e)} style={{ display: 'grid', gridTemplateColumns: '110px 1.6fr 1.4fr 130px 110px 90px 1fr', gap: 14, padding: '12px 14px', borderBottom: '1px solid var(--rule-soft)', alignItems: 'center', cursor: 'pointer', }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-2)'} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}> {v['Video ID']} {v['Video Name']} {v['Recording'] || '—'} {v['ISRC (Video)'] || —}
{yt && ( e.stopPropagation()} className="ff-mono upper" style={{ fontSize: 10, padding: '2px 6px', border: '1px solid var(--rule)', color: 'var(--ink-2)', textDecoration: 'none' }}>YT)} {fb && ( e.stopPropagation()} className="ff-mono upper" style={{ fontSize: 10, padding: '2px 6px', border: '1px solid var(--rule)', color: 'var(--ink-2)', textDecoration: 'none' }}>FB)} {!yt && !fb && (—)}
{v['Controlled'] || '—'} {v['Content ID Claimants'] || UNCLAIMED}
); }; return (
{kpiStrip} {filtersRow} {filtered.length === 0 && empty} {filtered.length > 0 && view === 'grid' && (
{filtered.map((v) => )}
)} {filtered.length > 0 && view === 'table' && (
VIDEO IDTITLERECORDING ISRCLINKSCTRLCID CLAIMANT
{filtered.map((v) => )}
)}
); } Object.assign(window, { VideosView }); })();