/* live-entry.jsx — DJ console + TV display + router + mount */ /* eslint-disable */ // ════════════════════════════════════════════════════════════ // DJ VIEW // ════════════════════════════════════════════════════════════ function DjView() { const [room, roomApi] = useRoom(CFG.room); const spotify = useSpotify(); const toast = useToast(); const [tab, setTab] = React.useState('pending'); const [playback, setPlayback] = React.useState(null); // Poll Spotify playback every 3s when authed React.useEffect(() => { if (spotify.isMock || !spotify.authed) return; let active = true; const tick = async () => { try { const p = await spotify.client.currentPlayback(); if (active) setPlayback(p); } catch (e) { /* token may have expired */ } }; tick(); const t = setInterval(tick, 3000); return () => { active = false; clearInterval(t); }; }, [spotify.authed, spotify.isMock]); // Tell the room when the DJ connects/disconnects React.useEffect(() => { if (!roomApi) return; roomApi.setDjConnected(spotify.isMock || spotify.authed, undefined); }, [spotify.authed, spotify.isMock]); // Share Spotify token with guests — runs after room loads from Supabase to avoid race condition React.useEffect(() => { if (!room || !roomApi) return; if (spotify.authed) { try { const tok = JSON.parse(localStorage.getItem('sonarium.spotify.token') || 'null'); if (tok && tok.access_token) roomApi.update({ djToken: tok }); } catch {} } }, [!!room, spotify.authed]); if (!room) return null; const pending = room.requests.filter(r => r.status === 'pending'); const queued = room.requests.filter(r => r.status === 'next' || r.status === 'queued'); const playing = room.requests.find(r => r.status === 'playing'); const approve = async (r) => { roomApi.setStatus(r.id, queued.length === 0 ? 'next' : 'queued'); if (!spotify.isMock && spotify.authed && r.track.uri) { try { await spotify.client.queue(r.track.uri); toast('Añadida a la cola de Spotify'); } catch (e) { toast('Error encolando en Spotify', 'error'); } } else { toast('Aprobada'); } }; const reject = (r) => { roomApi.setStatus(r.id, 'rejected'); toast('Rechazada'); }; const skip = async () => { if (!spotify.isMock && spotify.authed) { try { await spotify.client.next(); toast('Saltada'); } catch (e) { toast('No se pudo saltar', 'error'); } } const next = queued[0]; if (next) roomApi.setNowPlaying(next.id); }; const togglePlay = async () => { if (spotify.isMock || !spotify.authed) return; try { if (playback?.isPlaying) await spotify.client.pause(); else await spotify.client.play(); } catch (e) { toast('Control no disponible · ¿hay un dispositivo activo en Spotify?', 'error'); } }; return (
{/* Sidebar */} {/* Main */}
{tab === 'pending' && 'Pendientes de aprobar'} {tab === 'queue' && 'En cola'} {tab === 'history' && 'Historial'}
{tab === 'pending' && (pending.length ? pending.map(r => approve(r)} onReject={() => reject(r)}/>) : )} {tab === 'queue' && (queued.length ? queued.map((r, i) => roomApi.setNowPlaying(r.id)} onRemove={() => roomApi.removeRequest(r.id)}/>) : )} {tab === 'history' && r.status === 'played').length} canciones sonadas esta noche.`}/>}
{/* Right rail */}
); } function SpotifyStatus({ spotify }) { if (spotify.isMock) { const [open, setOpen] = React.useState(false); const [clientId, setClientId] = React.useState(''); const save = () => { const id = clientId.trim(); if (!id) return; localStorage.setItem('sonarium.config.clientId', id); window.location.reload(); }; return (
Sin Spotify
{open && (
Pega tu Client ID de{' '} Spotify Developer
setClientId(e.target.value)} onKeyDown={e => e.key === 'Enter' && save()} style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.02em' }} autoFocus />
)}
); } if (!spotify.authed) { return ( ); } return (
Spotify conectado
Listo para pinchar
); } function SpotifyGlyph({ size = 16, color = '#fff' }) { return ( ); } function DjNavItem({ icon, label, badge, active, highlight, onClick }) { return (
{icon} {label} {badge !== undefined && ( 0 ? 'var(--gold-500)' : 'rgba(255,255,255,0.12)', color: highlight && badge > 0 ? '#1a1208' : '#fff', fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-mono)', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>{badge} )}
); } function DjNowPlaying({ playing, playback, spotify, onTogglePlay, onSkip }) { // Prefer the live Spotify playback if available const live = playback?.track; const isPlaying = spotify.authed && playback ? playback.isPlaying : true; const track = live || playing?.track; if (!track) { return (
Sin canción sonando. Aprueba una para empezar.
); } return (
{isPlaying && (<>)} {isPlaying ? 'Sonando ahora' : 'En pausa'}
{track.name}
{track.artists} {playing && <> · de {playing.from} para {playing.to}}
{playback && (
)}
); } function DjPendingRow({ r, onApprove, onReject }) { return (
{r.track.name} · {r.track.artists}
{fmt.ago(r.createdAt)}
de {r.from} {r.to && <> para {r.to}}
{r.note && (
«{r.note}»
)}
); } function DjQueueRow({ r, index, onSkip, onRemove }) { return (
{Icon.drag(14)}
{index + 1}
{r.track.name} · {r.track.artists}
{r.from} {r.to && (<> {r.to} )}
); } function DjUpcoming({ r }) { return (
Próxima
{fmt.mmss(r.track.durationMs || 200_000)}
{r.track.name}
{r.track.artists}
{(r.from || r.to || r.note) && (
de {r.from} {r.to && <> para {r.to}}
{r.note && (
«{r.note}»
)}
)}
); } function DjStat({ label, value, tone }) { return (
{value}
{label}
); } function EmptyState({ text }) { return (
{text}
); } // ════════════════════════════════════════════════════════════ // TV VIEW // ════════════════════════════════════════════════════════════ function TvView() { const [room, roomApi] = useRoom(CFG.room); const spotify = useSpotify(); const [now, setNow] = React.useState(new Date()); const [, setTick] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setNow(new Date()), 30_000); return () => clearInterval(t); }, []); React.useEffect(() => { const t = setInterval(() => setTick(x => x + 1), 1000); return () => clearInterval(t); }, []); if (!room) return null; const playing = room.requests.find(r => r.status === 'playing'); const upNext = room.requests.filter(r => r.status === 'next' || r.status === 'queued').slice(0, 6); const ticker = room.requests.filter(r => r.from && r.to).slice(-16); const progress = playing && room.nowPlaying ? Math.min(1, (Date.now() - room.nowPlaying.startedAt) / room.nowPlaying.durationMs) : 0; const guestShort = `${location.origin + location.pathname}?role=guest&room=${room.code}`.replace(/^https?:\/\//, ''); const guestFull = `${location.origin + location.pathname}?role=guest&room=${room.code}`; const ArtBox = ({ track, size = 128 }) => { const s = { width: size, height: size, borderRadius: 14, flexShrink: 0, objectFit: 'cover', boxShadow: '0 8px 28px rgba(0,0,0,0.5)' }; if (track?.image) return ; return
; }; return (
{/* Aurora background */}
{/* ── Header ── */}
Fundación San Juan de Ávila
Sonarium · {room.code}
{now.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' })}
{/* ── Body: 2-col on ≥768px, 1-col on mobile ── */}
{/* Left: Now Playing */}
{/* Section label */}
Sonando ahora
{playing ? ( <> {/* Art + meta */}
{playing.track.name}
{playing.track.artists}
{(playing.from || playing.to || playing.note) && (
Dedicatoria
de {playing.from} {playing.to && <> para {playing.to}}
{playing.note && (
«{playing.note}»
)}
)}
{/* Progress bar */}
{fmt.mmss(progress * (playing.track.durationMs || 200_000))} {fmt.mmss(playing.track.durationMs || 200_000)}
) : (
♪
Sin música
Escanea el QR y pide la primera canción.
)}
{/* Right: Queue + QR */}
{/* Queue */}
A continuación
{upNext.length === 0 ? (
La cola está vacía.
) : upNext.map((r, i) => (
{String(i + 1).padStart(2, '0')}
{r.track.name}
{r.track.artists} {(r.from && r.to) && · {r.from} → {r.to}}
))}
{/* QR card */}
Pide tu canción
Únete a la sala
{guestShort}
{/* ── Ticker ── */} {ticker.length > 0 && (
{[...ticker, ...ticker].map((r, i) => (
♪ {r.from} dedica «{r.track.name}» a {r.to} ·
))}
)}
); } // ════════════════════════════════════════════════════════════ // QR SCREEN — pantalla proyectable con QR + sala + link // ════════════════════════════════════════════════════════════ function QrScreen() { const [room] = useRoom(CFG.room); if (!room) return null; const djName = localStorage.getItem('sonarium.config.djName') || room.djName || ''; const guestUrl = `${location.origin + location.pathname}?role=guest&room=${room.code}`; const shortUrl = guestUrl.replace(/^https?:\/\//, ''); return (
{/* Logo + DJ */}
Sonarium
{djName && (
con {djName}
)}
{/* Tarjeta principal */}
{/* QR */}
{/* Sala */}
Sala
{room.code}
{/* Divider */}
{/* URL */}
O entra desde el navegador en:
{shortUrl}
{/* Pie */}
Pide tu canción · {room.stats?.listeners ?? 1} conectados
); } // ════════════════════════════════════════════════════════════ // ROUTER + MOUNT // ════════════════════════════════════════════════════════════ function App() { // Auto-handle Spotify OAuth return: if there's a ?code= param, the // useSpotify hook in the eventual view will exchange it. We still want // to land on a role afterwards, so default to 'dj' when returning from auth. const initialRole = (() => { const u = new URL(location.href); if (u.searchParams.has('code')) return 'dj'; return CFG.role || ''; })(); const [role, setRole] = React.useState(initialRole); const view = role === 'guest' ? : role === 'dj' ? : role === 'tv' ? : role === 'qr' ? : ; return ( {view} ); } ReactDOM.createRoot(document.getElementById('root')).render();