); } // ─── Persistent bottom player ───────────────────────────────────────── const STREAM_URL = 'https://stream.radioscorpio.be/stream'; const WS_URL = 'wss://nowplaying.radioscorpio.be/ws'; function useNowPlaying() { const [track, setTrack] = React.useState(null); // { title, image } const [show, setShow] = React.useState(null); // { name, start, end } const [upcoming, setUpcoming] = React.useState(null); // { name, start } const wsRef = React.useRef(null); React.useEffect(() => { let destroyed = false; let retryTimer = null; function connect() { if (destroyed) return; const ws = new WebSocket(WS_URL); wsRef.current = ws; ws.onmessage = (e) => { let msg; try { msg = JSON.parse(e.data); } catch { return; } if (msg.type === 'track_change') { const s = msg.data?.stream; if (s?.title) setTrack({ title: s.title, image: s.image || null }); } else if (msg.type === 'schedule_update') { const cur = msg.data?.currentshow; const nxt = msg.data?.upcomingshow; if (cur) setShow({ name: cur.showName, start: cur.startClock, end: cur.endClock }); if (nxt) setUpcoming({ name: nxt.showName, start: nxt.startClock, end: nxt.endClock }); } }; ws.onclose = () => { if (!destroyed) retryTimer = setTimeout(connect, 5000); }; ws.onerror = () => ws.close(); } connect(); return () => { destroyed = true; clearTimeout(retryTimer); wsRef.current?.close(); }; }, []); return { track, show, upcoming }; } function Player({ playing, setPlaying, accent, nowPlaying, sessionFeed, setSessionFeed, odNow, onClearOd }) { if (odNow) return ; const [vol, setVol] = React.useState(100); const [bars] = React.useState(() => Array.from({length: 64}, () => 0.2 + Math.random() * 0.8) ); const [progress, setProgress] = React.useState(0.42); const audioRef = React.useRef(null); const { track, show, upcoming } = nowPlaying; const isSession = !!sessionFeed; // Create the live audio element once React.useEffect(() => { const audio = new Audio(STREAM_URL); audio.volume = vol / 100; audioRef.current = audio; return () => { audio.pause(); audioRef.current = null; }; }, []); // Live audio: pause whenever a session is active, otherwise follow playing state React.useEffect(() => { const audio = audioRef.current; if (!audio) return; if (isSession || !playing) { audio.pause(); } else { audio.play().catch(() => setPlaying(false)); } }, [playing, isSession]); // Sync volume React.useEffect(() => { if (audioRef.current) audioRef.current.volume = vol / 100; }, [vol]); // Media Session — register action handlers once React.useEffect(() => { if (!('mediaSession' in navigator)) return; navigator.mediaSession.setActionHandler('play', () => setPlaying(true)); navigator.mediaSession.setActionHandler('pause', () => setPlaying(false)); navigator.mediaSession.setActionHandler('stop', () => setPlaying(false)); }, []); // Media Session — update metadata when live track changes React.useEffect(() => { if (!('mediaSession' in navigator) || isSession) return; const parts = track?.title?.split(' - ') ?? []; const artist = parts.length > 1 ? parts[0].trim() : 'Radio Scorpio'; const title = parts.length > 1 ? parts.slice(1).join(' - ').trim() : (track?.title ?? 'Radio Scorpio 106 FM'); navigator.mediaSession.metadata = new MediaMetadata({ title, artist, album: 'Radio Scorpio 106 FM', artwork: track?.image ? [{ src: track.image, sizes: '250x250', type: 'image/jpeg' }] : [], }); }, [track]); // Media Session — sync playback state React.useEffect(() => { if (!('mediaSession' in navigator)) return; navigator.mediaSession.playbackState = playing ? 'playing' : 'paused'; }, [playing]); React.useEffect(() => { if (!playing) return; const t = setInterval(() => setProgress(p => (p + 0.0008) % 1), 80); return () => clearInterval(t); }, [playing]); const activeBar = Math.floor(progress * bars.length); const trackLabel = track?.title ?? '—'; // Alternate between nu: and straks: labels const [showNext, setShowNext] = React.useState(false); const [labelVisible, setLabelVisible] = React.useState(true); React.useEffect(() => { if (!upcoming) { setShowNext(false); return; } const t = setInterval(() => { setLabelVisible(false); setTimeout(() => { setShowNext(p => !p); setLabelVisible(true); }, 350); }, 4000); return () => clearInterval(t); }, [!!upcoming]); const schedLabel = (showNext && upcoming) ? <>straks: {upcoming.name} · {upcoming.start}{upcoming.end ? `–${upcoming.end}` : ''} : <>nu: {show ? `${show.name} · ${show.start}–${show.end}` : '—'}; // Mixcloud widget URL — dark=1 matches our dark player background const mixcloudSrc = isSession ? `https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&dark=1&autoplay=1&feed=${encodeURIComponent(sessionFeed.feed)}` : null; return (