// ───────────────────────────────────────────────────────────────────── // videos-edit.jsx // ───────────────────────────────────────────────────────────────────── // Adds three things to the Videos surface area: // // 1. — listens for `astro-open-video` and shows // an editable side drawer with all video metadata fields. // 2. — listens for `astro-add-video` and shows // a 3-step new-video flow (recording link → details → confirm). // 3. window.RS.upsertVideo(payload) helper that persists edits / inserts // back into window.RS.videos for the current session. // // Convention parity with the codebase: // • Backdrop overlay + right-side drawer w/ close button // • Global event listener pattern (see globals.jsx) // • All edits are session-only; we don't fake-write to disk // • Existing rich data is preserved via spread, even fields we don't surface // // Wired up: // • VideosView card click → astro-open-video {id} // • "New video" button → astro-add-video // • Recording detail panel → "Linked videos" block (videos-on-recording.jsx) // ───────────────────────────────────────────────────────────────────── (function () { const { useState, useEffect, useMemo } = React; // ── Persistence helper ───────────────────────────────────────────── // Mutates window.RS.videos in place and broadcasts a change event so // VideosView (and anything else listening) re-renders. function upsertVideo(next) { if (!window.RS) window.RS = {}; if (!Array.isArray(window.RS.videos)) window.RS.videos = []; const arr = window.RS.videos; const idx = arr.findIndex((v) => v['Video ID'] === next['Video ID']); if (idx >= 0) arr[idx] = { ...arr[idx], ...next }; else arr.unshift(next); window.dispatchEvent(new CustomEvent('astro-videos-changed', { detail: { id: next['Video ID'] } })); window.dispatchEvent(new CustomEvent('astro-toast', { detail: { msg: idx >= 0 ? `Video ${next['Video ID']} updated` : `Video ${next['Video ID']} created`, tone: 'ok' } })); return arr[idx >= 0 ? idx : 0]; } if (!window.RS) window.RS = {}; window.RS.upsertVideo = upsertVideo; // ── Generate next free RVID ──────────────────────────────────────── function nextVideoId() { const arr = (window.RS && window.RS.videos) || []; let max = 10000; for (const v of arr) { const m = (v['Video ID'] || '').match(/^RVID(\d+)$/); if (m) max = Math.max(max, parseInt(m[1], 10)); } return 'RVID' + (max + 1); } // ── YouTube ID extractor (mirrors VideosView) ────────────────────── function ytId(url) { if (!url) return null; const m1 = url.match(/youtu\.be\/([\w-]+)/); const m2 = url.match(/[?&]v=([\w-]+)/); return m1 ? m1[1] : (m2 ? m2[1] : null); } function ytThumb(url) { const id = ytId(url); return id ? `https://i.ytimg.com/vi/${id}/hqdefault.jpg` : null; } // ── Field — small reusable labelled input ────────────────────────── function Field({ label, value, onChange, mono = false, placeholder = '', hint = '', type = 'text', readOnly = false }) { return ( ); } // ── Toggle for Yes/No fields ─────────────────────────────────────── function YesNo({ label, value, onChange }) { const yes = (value || '').toLowerCase().startsWith('y'); return (
{label}
{['Yes', 'No'].map((opt) => { const active = (opt === 'Yes') === yes; return ( ); })}
); } // ── Recording typeahead — small inline picker over RECORDINGS ────── function RecordingPicker({ value, onChange }) { const [q, setQ] = useState(value || ''); const [open, setOpen] = useState(false); useEffect(() => { setQ(value || ''); }, [value]); const hits = useMemo(() => { const all = (window.RECORDINGS || []); const qq = (q || '').trim().toLowerCase(); if (!qq) return all.slice(0, 8); return all.filter((r) => (r.title || '').toLowerCase().includes(qq) || (r.isrc || '').toLowerCase().includes(qq)).slice(0, 8); }, [q]); return (
LINKED RECORDING
{ setQ(e.target.value); setOpen(true); onChange(e.target.value); }} onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 200)} placeholder="Search recording title or ISRC..." style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--rule)', background: 'var(--bg)', color: 'var(--ink)', fontSize: 13, outline: 'none' }} /> {open && hits.length > 0 && (
{hits.map((r) => ( ))}
)}
); } // ── Backdrop + drawer shell ──────────────────────────────────────── function DrawerShell({ children, onClose, width = 'min(560px,92vw)' }) { return ( <>
); } // ───────────────────────────────────────────────────────────────── // VIDEO DETAIL DRAWER // ───────────────────────────────────────────────────────────────── function VideoDrawer({ video, onClose }) { // Local working copy — only persisted on Save. const [draft, setDraft] = useState({ ...video }); useEffect(() => { setDraft({ ...video }); }, [video]); const setF = (k) => (v) => setDraft((d) => ({ ...d, [k]: v })); const dirty = useMemo(() => { return Object.keys(draft).some((k) => (draft[k] || '') !== (video[k] || '')); }, [draft, video]); const save = () => { upsertVideo(draft); onClose(); }; const thumb = ytThumb(draft['YouTube Link']); const claimed = !!draft['Content ID Claimants']; return ( {/* Hero */}
{!thumb && (
)} {/* Play overlay if YT thumb exists */} {thumb && draft['YouTube Link'] && (
)} {/* Top-left ID stamp */} VIDEO · {draft['Video ID']}
{/* Title bar */}
EDITING · MUSIC VIDEO · {draft['Recording'] || 'unlinked'}
{draft['Video Name'] || Untitled}
{claimed && (CONTENT ID CLAIMED)} {(draft['Controlled'] || '').toLowerCase().startsWith('y') && (CONTROLLED)} {draft['ISRC (Video)'] && ({draft['ISRC (Video)']})}
{/* Form */}
01 · IDENTITY
02 · RIGHTS + CONTROL
03 · DELIVERY LINKS
{/* Sticky footer */}
{dirty ? 'UNSAVED CHANGES' : 'NO CHANGES'} {window.DetailDelete && ( onClose && onClose()} variant="ghost" label="Delete" /> )}
); } function GlobalVideoDrawer() { const [video, setVideo] = useState(null); useEffect(() => { const open = (e) => { const id = e.detail && e.detail.id; if (!id) return; const v = ((window.RS && window.RS.videos) || []).find((x) => x['Video ID'] === id); if (v) setVideo(v); }; window.addEventListener('astro-open-video', open); window.addEventListener('astro-videos-changed', () => { // If our open video was just upserted, refresh from store. if (video) { const fresh = ((window.RS && window.RS.videos) || []).find((x) => x['Video ID'] === video['Video ID']); if (fresh) setVideo(fresh); } }); return () => window.removeEventListener('astro-open-video', open); }, [video]); if (!video) return null; return setVideo(null)} />; } // ───────────────────────────────────────────────────────────────── // ADD VIDEO MODAL — 3-step flow // ───────────────────────────────────────────────────────────────── function AddVideoModal() { const [open, setOpen] = useState(null); // null | { recordingTitle?, onCreated? } const [step, setStep] = useState('link'); // link → details → confirm const [draft, setDraft] = useState(null); useEffect(() => { const onOpen = (e) => { const detail = (e && e.detail) || {}; setOpen(detail); setStep('link'); setDraft({ 'Video ID': nextVideoId(), 'Video Name': '', 'Recording': detail.recordingTitle || '', 'ISRC (Video)': '', 'UPC (Video)': '', 'Controlled': 'Yes', 'Video Thumbnail': '', 'Video Release Date': '', 'Video Territories': '', 'FB Video Link': '', 'YouTube Link': '', 'Youtube Auto-Generated Audio Track': '', 'Closed Caption': '', 'Content ID Claimants': '', }); }; window.addEventListener('astro-add-video', onOpen); return () => window.removeEventListener('astro-add-video', onOpen); }, []); if (!open || !draft) return null; const setF = (k) => (v) => setDraft((d) => ({ ...d, [k]: v })); const close = () => { setOpen(null); setDraft(null); setStep('link'); }; const save = () => { // Auto-fill Video Name from recording if blank const final = { ...draft }; if (!final['Video Name'] && final['Recording']) final['Video Name'] = final['Recording']; // Auto-derive territory code if blank if (!final['Video Territories']) final['Video Territories'] = `${final['Video ID']}-2WL-I`; const saved = upsertVideo(final); if (open && typeof open.onCreated === 'function') { try { open.onCreated(saved); } catch (e) { /* noop */ } } close(); }; const stepNum = step === 'link' ? 1 : step === 'details' ? 2 : 3; return ( <>
{/* Header */}
NEW MUSIC VIDEO · {draft['Video ID']}
{step === 'link' ? 'Link to a recording' : step === 'details' ? 'Video metadata' : 'Confirm + create'}
{/* Step bar */}
{['LINK', 'DETAILS', 'CONFIRM'].map((s, i) => { const active = (i + 1) === stepNum; const done = (i + 1) < stepNum; return (
0{i + 1} · {s}
); })}
{/* Body */}
{step === 'link' && ( <>

A music video points at one Recording in your catalog. Pick the recording this video accompanies — the Work it derives from will be inferred via the recording's Work link.

)} {step === 'details' && ( <>
)} {step === 'confirm' && ( <>
SUMMARY
{[ ['ID', draft['Video ID']], ['Title', draft['Video Name'] || draft['Recording'] || '(untitled)'], ['Recording', draft['Recording'] || '(unlinked)'], ['ISRC', draft['ISRC (Video)'] || '—'], ['Released', draft['Video Release Date'] || '—'], ['Controlled', draft['Controlled'] || '—'], ['Claimant', draft['Content ID Claimants'] || '—'], ['YouTube', draft['YouTube Link'] || '—'], ].map(([k, v]) => (
{k} {v}
))}

Saving creates this record in your video catalog. You can edit any field later from the Videos tab.

)}
{/* Footer */}
{stepNum > 1 ? ( ) : }
{stepNum < 3 ? ( ) : ( )}
); } // ───────────────────────────────────────────────────────────────── // VIDEOS-ON-RECORDING — embeds in the recording detail screen // (manually mounted by ScreenRecording / RecordingDrawer if they // call window.RecordingVideosBlock). // ───────────────────────────────────────────────────────────────── function RecordingVideosBlock({ recordingTitle, recordingId }) { const [tick, setTick] = useState(0); useEffect(() => { const onChange = () => setTick((t) => t + 1); window.addEventListener('astro-videos-changed', onChange); return () => window.removeEventListener('astro-videos-changed', onChange); }, []); const videos = useMemo(() => { const all = (window.RS && window.RS.videos) || []; return all.filter((v) => (v['Recording'] || '') === (recordingTitle || '') || v['Recording'] === recordingId); }, [recordingTitle, recordingId, tick]); return (
LINKED VIDEOS · {videos.length}
{videos.length === 0 && (
No music videos linked to this recording.
)} {videos.length > 0 && (
{videos.map((v) => { const thumb = ytThumb(v['YouTube Link']); return (
window.dispatchEvent(new CustomEvent('astro-open-video', { detail: { id: v['Video ID'] } }))} style={{ display: 'grid', gridTemplateColumns: '88px 1fr auto', gap: 12, alignItems: 'center', padding: '10px', border: '1px solid var(--rule)', marginBottom: 6, cursor: 'pointer', background: 'var(--bg)' }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-2)'} onMouseLeave={(e) => e.currentTarget.style.background = 'var(--bg)'}>
{!thumb && (
)}
{v['Video Name']}
{v['Video ID']} · {v['ISRC (Video)'] || 'no ISRC'} · {v['Content ID Claimants'] || 'unclaimed'}
{v['YouTube Link'] && (YT)} {v['FB Video Link'] && (FB)} ›
); })}
)}
); } Object.assign(window, { GlobalVideoDrawer, GlobalAddVideoModal: AddVideoModal, RecordingVideosBlock, }); })();