/* live-views.jsx — Guest / DJ / TV / Lobby views for the real app */
/* eslint-disable */
// ════════════════════════════════════════════════════════════
// LOBBY — landing page when no ?role= is set
// ════════════════════════════════════════════════════════════
function Lobby({ onPickRole }) {
const [roomCode, setRoomCode] = React.useState(CFG.room);
const [clientId, setClientId] = React.useState(CFG.clientId);
const [showAdvanced, setShowAdvanced] = React.useState(false);
const apply = () => {
localStorage.setItem('sonarium.config.room', roomCode);
if (clientId) localStorage.setItem('sonarium.config.clientId', clientId);
else localStorage.removeItem('sonarium.config.clientId');
location.reload();
};
return (
{/* Header */}
Fundación San Juan de Ávila
Sonarium · Sala {roomCode}
¿Quién eres hoy?
Elige cómo abres Sonarium. Los enlaces directos se ven en cada tarjeta — guárdalos.
{/* Role cards */}
onPickRole('guest')}
/>
onPickRole('dj')}
accent
/>
onPickRole('tv')}
/>
{/* Config */}
Configuración
{CFG.clientId
? <>Spotify configurado · modo real
: <>Sin Spotify Client ID · modo demo con catálogo de muestra}
);
}
function RoleCard({ icon, title, desc, href, onClick, accent }) {
return (
{ /* let nav happen */ }} className="glass" style={{
padding: 18, textDecoration: 'none', color: '#fff', display: 'block',
border: accent ? '0.5px solid rgba(229,169,58,0.4)' : 'none',
transition: 'transform 0.15s, box-shadow 0.15s',
}}>
{icon}
{title}
{desc}
);
}
// ════════════════════════════════════════════════════════════
// GUEST VIEW — mobile flow (welcome → search → form → success → live)
// ════════════════════════════════════════════════════════════
function GuestView() {
const [room, roomApi] = useRoom(CFG.room);
const toast = useToast();
const [screen, setScreen] = React.useState('welcome');
const [track, setTrack] = React.useState(null);
const [submittedId, setSubmittedId] = React.useState(null);
// Use DJ's shared token for real Spotify search; fall back to mock
// Must be before early return to respect Rules of Hooks
const searchClient = React.useMemo(() => {
const tok = room?.djToken;
if (tok && tok.access_token && tok.expires_at && Date.now() < tok.expires_at - 30_000) {
return SpotifyClient.createSearchOnly(tok.access_token);
}
return SpotifyClient.createSearchOnly(null);
}, [room?.djToken]);
if (!room) return null;
const submit = (req) => {
const next = roomApi.submitRequest(req);
const id = next.requests[next.requests.length - 1].id;
setSubmittedId(id);
setScreen('success');
toast('¡Petición enviada!');
};
return (
setScreen('welcome')}/>
{screen === 'welcome' && setScreen('search')} onPeek={() => setScreen('live')}/>}
{screen === 'search' && { setTrack(t); setScreen('form'); }} onSkip={() => { setTrack(null); setScreen('form'); }}/>}
{screen === 'form' && setScreen('search')}/>}
{screen === 'success' && { setTrack(null); setScreen('search'); }} onPeek={() => setScreen('live')}/>}
{screen === 'live' && setScreen('welcome')}/>}
);
}
function GuestTopBar({ room, onBack }) {
return (
{onBack ? (
) :
}
Sala {room.code}
{[35, 50, 65, 80, 95].map(r => (
))}
Pon música al
encuentro.
Pide una canción, dedícasela a alguien y descúbrela sonar en la fiesta.
);
}
function GuestSearch({ spotify, onPick, onSkip }) {
return (
Busca tu canción
Escribe título, artista o álbum.
);
}
function SuggestedTracks({ spotify, onPick }) {
const [tracks, setTracks] = React.useState([]);
React.useEffect(() => {
spotify.search('españa fiesta').then(setTracks).catch(() => setTracks([]));
}, [spotify.isMock]);
return (
{tracks.slice(0, 5).map(t => (
))}
Tu petición
{/* Track card or manual fields */}
{track && !manual ? (
{track.name}
{track.artists}
) : (
setName(e.target.value)}/>
setArtist(e.target.value)}/>
)}
{/* Dedication */}
{Icon.heart(14)} Dedicatoria