Refactor AudioPlayer component: streamline state management, add lyric display, and improve stream handling
This commit is contained in:
@@ -15,17 +15,6 @@ const STATIONS = {
|
||||
pop: { label: "Pop" },
|
||||
};
|
||||
|
||||
let activeInterval = null;
|
||||
let currentStationForInterval = null;
|
||||
|
||||
function clearGlobalMetadataInterval() {
|
||||
if (activeInterval) {
|
||||
clearInterval(activeInterval);
|
||||
activeInterval = null;
|
||||
currentStationForInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function Player() {
|
||||
const [activeStation, setActiveStation] = useState("main");
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
@@ -34,39 +23,51 @@ export function Player() {
|
||||
const [trackGenre, setTrackGenre] = useState("");
|
||||
const [trackAlbum, setTrackAlbum] = useState("");
|
||||
const [coverArt, setCoverArt] = useState("/images/radio_art_default.jpg");
|
||||
const [elapsed, setElapsed] = useState(0);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [lyrics, setLyrics] = useState([]);
|
||||
const [currentLyricIndex, setCurrentLyricIndex] = useState(0);
|
||||
const [elapsedTime, setElapsedTime] = useState(0);
|
||||
const [trackDuration, setTrackDuration] = useState(0);
|
||||
|
||||
const audioRef = useRef(null);
|
||||
const hlsRef = useRef(null);
|
||||
const uuidRef = useRef(null);
|
||||
const lastStationData = useRef(null);
|
||||
const audioElement = useRef(null);
|
||||
const hlsInstance = useRef(null);
|
||||
const currentTrackUuid = useRef(null);
|
||||
const baseTrackElapsed = useRef(0);
|
||||
const lastUpdateTimestamp = useRef(Date.now());
|
||||
|
||||
const formatTime = (seconds) => {
|
||||
const m = String(Math.floor(seconds / 60)).padStart(2, "0");
|
||||
const s = String(Math.floor(seconds % 60)).padStart(2, "0");
|
||||
return `${m}:${s}`;
|
||||
const mins = String(Math.floor(seconds / 60)).padStart(2, "0");
|
||||
const secs = String(Math.floor(seconds % 60)).padStart(2, "0");
|
||||
return `${mins}:${secs}`;
|
||||
};
|
||||
|
||||
const progress = duration > 0 ? (elapsed / duration) * 100 : 0;
|
||||
|
||||
const playStream = () => {
|
||||
const lcStation = activeStation.toLowerCase();
|
||||
const streamUrl = `https://stream.codey.lol/hls/${lcStation}/${lcStation}.m3u8?t=${Date.now()}`;
|
||||
|
||||
// Cleanup
|
||||
if (hlsRef.current) {
|
||||
hlsRef.current.destroy();
|
||||
hlsRef.current = null;
|
||||
}
|
||||
|
||||
const audio = audioRef.current;
|
||||
// Initialize or switch HLS stream
|
||||
const initializeStream = (station) => {
|
||||
const audio = audioElement.current;
|
||||
if (!audio) return;
|
||||
const streamUrl = `https://stream.codey.lol/hls/${station}/${station}.m3u8`;
|
||||
|
||||
// Clean up previous HLS
|
||||
if (hlsInstance.current) {
|
||||
hlsInstance.current.destroy();
|
||||
hlsInstance.current = null;
|
||||
}
|
||||
audio.pause();
|
||||
audio.removeAttribute("src");
|
||||
audio.load();
|
||||
|
||||
// Handle audio load errors
|
||||
audio.onerror = () => {
|
||||
setTrackTitle("Offline");
|
||||
setIsPlaying(false);
|
||||
};
|
||||
|
||||
if (audio.canPlayType("application/vnd.apple.mpegurl")) {
|
||||
audio.src = streamUrl;
|
||||
audio.load();
|
||||
audio.play().then(() => setIsPlaying(true)).catch(console.error);
|
||||
audio.play().then(() => setIsPlaying(true)).catch(() => {
|
||||
setTrackTitle("Offline");
|
||||
setIsPlaying(false);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -75,197 +76,187 @@ export function Player() {
|
||||
return;
|
||||
}
|
||||
|
||||
const hls = new Hls({
|
||||
maxBufferLength: 30,
|
||||
maxMaxBufferLength: 60,
|
||||
autoStartLoad: true,
|
||||
startLevel: -1,
|
||||
});
|
||||
|
||||
const hls = new Hls({ lowLatencyMode: true, abrEnabled: false });
|
||||
hlsInstance.current = hls;
|
||||
hls.attachMedia(audio);
|
||||
|
||||
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
|
||||
hls.loadSource(streamUrl);
|
||||
});
|
||||
|
||||
hls.on(Hls.Events.MEDIA_ATTACHED, () => hls.loadSource(streamUrl));
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
audio.play().then(() => setIsPlaying(true)).catch(console.error);
|
||||
audio.play().then(() => setIsPlaying(true)).catch(() => {
|
||||
setTrackTitle("Offline");
|
||||
setIsPlaying(false);
|
||||
});
|
||||
});
|
||||
|
||||
hls.on(Hls.Events.ERROR, (event, data) => {
|
||||
console.warn("HLS error:", data);
|
||||
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
case Hls.ErrorTypes.NETWORK_ERROR:
|
||||
case Hls.ErrorTypes.MEDIA_ERROR:
|
||||
case Hls.ErrorTypes.OTHER_ERROR:
|
||||
console.error("Fatal HLS error, attempting recovery…");
|
||||
try {
|
||||
hls.destroy();
|
||||
hlsRef.current = null;
|
||||
setIsPlaying(false);
|
||||
// Delay before trying to reconnect
|
||||
setTimeout(() => {
|
||||
playStream();
|
||||
}, 3000);
|
||||
} catch (e) {
|
||||
console.error("HLS recovery failed:", e);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
hls.destroy();
|
||||
hlsRef.current = null;
|
||||
setIsPlaying(false);
|
||||
}
|
||||
hls.destroy();
|
||||
hlsInstance.current = null;
|
||||
setTrackTitle("Offline");
|
||||
setIsPlaying(false);
|
||||
}
|
||||
});
|
||||
|
||||
hlsRef.current = hls;
|
||||
};
|
||||
|
||||
// Update elapsed time smoothly
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const audio = audioRef.current;
|
||||
if (audio && isPlaying && audio.readyState < 2) {
|
||||
console.warn("Playback seems stalled. Reloading stream.");
|
||||
playStream();
|
||||
}
|
||||
}, 15000); // Check every 15 seconds
|
||||
if (!isPlaying) return;
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isPlaying]);
|
||||
const intervalId = setInterval(() => {
|
||||
const now = Date.now();
|
||||
const deltaSec = (now - lastUpdateTimestamp.current) / 1000;
|
||||
let liveElapsed = baseTrackElapsed.current + deltaSec;
|
||||
if (trackDuration && liveElapsed > trackDuration) liveElapsed = trackDuration;
|
||||
setElapsedTime(liveElapsed);
|
||||
}, 200);
|
||||
|
||||
const togglePlayback = () => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
return () => clearInterval(intervalId);
|
||||
}, [isPlaying, trackDuration]);
|
||||
|
||||
if (isPlaying) {
|
||||
audio.pause();
|
||||
setIsPlaying(false);
|
||||
} else {
|
||||
audio.play().then(() => setIsPlaying(true)).catch(console.error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Use both base elapsed and audio time for precise lyric syncing
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current;
|
||||
if (audio) {
|
||||
audio.pause();
|
||||
audio.src = "";
|
||||
setIsPlaying(false);
|
||||
}
|
||||
if (!isPlaying || !lyrics.length) return;
|
||||
|
||||
playStream();
|
||||
|
||||
return () => {
|
||||
if (hlsRef.current) {
|
||||
hlsRef.current.destroy();
|
||||
hlsRef.current = null;
|
||||
const lyricsInterval = setInterval(() => {
|
||||
let newIndex = 0;
|
||||
for (let i = 0; i < lyrics.length; i++) {
|
||||
if (elapsedTime >= lyrics[i].timestamp) newIndex = i;
|
||||
else break;
|
||||
}
|
||||
};
|
||||
setCurrentLyricIndex(newIndex);
|
||||
}, 200);
|
||||
|
||||
return () => clearInterval(lyricsInterval);
|
||||
}, [isPlaying, lyrics, elapsedTime]);
|
||||
|
||||
|
||||
|
||||
|
||||
// Scroll active lyric into view
|
||||
useEffect(() => {
|
||||
const activeElement = document.querySelector('.lrc-line.active');
|
||||
if (activeElement) {
|
||||
activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, [currentLyricIndex]);
|
||||
|
||||
// Handle station changes: reset and start new stream
|
||||
useEffect(() => {
|
||||
setIsPlaying(false);
|
||||
setTrackTitle("");
|
||||
setTrackArtist("");
|
||||
setTrackGenre("");
|
||||
setTrackAlbum("");
|
||||
setCoverArt("/images/radio_art_default.jpg");
|
||||
|
||||
setLyrics([]);
|
||||
setCurrentLyricIndex(0);
|
||||
setElapsedTime(0);
|
||||
setTrackDuration(0);
|
||||
|
||||
currentTrackUuid.current = null;
|
||||
baseTrackElapsed.current = 0;
|
||||
lastUpdateTimestamp.current = Date.now();
|
||||
|
||||
initializeStream(activeStation);
|
||||
}, [activeStation]);
|
||||
|
||||
// Fetch metadata and lyrics periodically
|
||||
useEffect(() => {
|
||||
clearGlobalMetadataInterval();
|
||||
currentStationForInterval = activeStation;
|
||||
|
||||
const setPageTitle = (artist, song) => {
|
||||
document.title = `${metaData.title} - Radio - ${artist} - ${song} [${activeStation}]`;
|
||||
};
|
||||
|
||||
const fetchTrackData = async () => {
|
||||
const fetchMetadataAndLyrics = async () => {
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/radio/np?station=${activeStation}`, {
|
||||
method: "POST",
|
||||
});
|
||||
const data = await response.json();
|
||||
const response = await fetch(`${API_URL}/radio/np?station=${activeStation}`, { method: 'POST' });
|
||||
const trackData = await response.json();
|
||||
|
||||
if (currentStationForInterval !== activeStation) return;
|
||||
|
||||
if (data.artist === "N/A" && data.song === "N/A") {
|
||||
if (lastStationData.current !== "offline") {
|
||||
setTrackTitle("Offline");
|
||||
setTrackArtist("");
|
||||
setTrackAlbum("");
|
||||
setTrackGenre("");
|
||||
setCoverArt("/images/radio_art_default.jpg");
|
||||
setElapsed(0);
|
||||
setDuration(0);
|
||||
lastStationData.current = "offline";
|
||||
}
|
||||
if (trackData.artist === 'N/A') {
|
||||
setTrackTitle('Offline');
|
||||
setLyrics([]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.uuid === uuidRef.current) {
|
||||
if (lastStationData.current === data.uuid) {
|
||||
setElapsed(data.elapsed);
|
||||
setDuration(data.duration);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (trackData.uuid !== currentTrackUuid.current) {
|
||||
currentTrackUuid.current = trackData.uuid;
|
||||
|
||||
uuidRef.current = data.uuid;
|
||||
lastStationData.current = data.uuid;
|
||||
setTrackTitle(data.song);
|
||||
setTrackArtist(data.artist);
|
||||
setTrackGenre(data.genre !== "N/A" ? data.genre : "");
|
||||
setTrackAlbum(data.album);
|
||||
setPageTitle(data.artist, data.song);
|
||||
setCoverArt(`${API_URL}/radio/album_art?station=${activeStation}&_=${Date.now()}`);
|
||||
setElapsed(data.elapsed);
|
||||
setDuration(data.duration);
|
||||
setTrackTitle(trackData.song);
|
||||
setTrackArtist(trackData.artist);
|
||||
setTrackGenre(trackData.genre || '');
|
||||
setTrackAlbum(trackData.album);
|
||||
setCoverArt(`${API_URL}/radio/album_art?station=${activeStation}&_=${Date.now()}`);
|
||||
|
||||
baseTrackElapsed.current = trackData.elapsed;
|
||||
lastUpdateTimestamp.current = Date.now();
|
||||
setElapsedTime(trackData.elapsed);
|
||||
|
||||
setTrackDuration(trackData.duration);
|
||||
|
||||
setLyrics([]);
|
||||
setCurrentLyricIndex(0);
|
||||
|
||||
// Fetch lyrics as before
|
||||
const lyricsResponse = await fetch(`${API_URL}/lyric/search`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
a: trackData.artist,
|
||||
s: trackData.song,
|
||||
excluded_sources: [],
|
||||
extra: false,
|
||||
lrc: true,
|
||||
src: 'WEB-RADIO',
|
||||
}),
|
||||
});
|
||||
const lyricsData = await lyricsResponse.json();
|
||||
if (!lyricsData.err && Array.isArray(lyricsData.lrc)) {
|
||||
const parsedLyrics = lyricsData.lrc.map(({ timeTag, words }) => {
|
||||
const [mins, rest] = timeTag.split(':');
|
||||
const secs = parseFloat(rest);
|
||||
return { timestamp: Number(mins) * 60 + secs, line: words };
|
||||
});
|
||||
setLyrics(parsedLyrics);
|
||||
setCurrentLyricIndex(0);
|
||||
}
|
||||
} else {
|
||||
// Same track - do not update elapsed or elapsed base here
|
||||
setTrackDuration(trackData.duration);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch track data:", error);
|
||||
console.error('Error fetching metadata:', error);
|
||||
setTrackTitle('Offline');
|
||||
setLyrics([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTrackData();
|
||||
activeInterval = setInterval(fetchTrackData, 1000);
|
||||
|
||||
return () => clearGlobalMetadataInterval();
|
||||
fetchMetadataAndLyrics();
|
||||
const metadataInterval = setInterval(fetchMetadataAndLyrics, 700);
|
||||
return () => clearInterval(metadataInterval);
|
||||
}, [activeStation]);
|
||||
|
||||
const remaining = duration - elapsed;
|
||||
|
||||
const progressColorClass =
|
||||
progress >= 90
|
||||
? "bg-red-500 dark:bg-red-400"
|
||||
: progress >= 75 || remaining <= 20
|
||||
? "bg-yellow-400 dark:bg-yellow-300"
|
||||
: "bg-blue-500 dark:bg-blue-400";
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="station-tabs flex gap-2 justify-center mb-4 flex-wrap z-10 relative">
|
||||
{Object.entries(STATIONS).map(([key, { label }]) => (
|
||||
{Object.entries(STATIONS).map(([stationKey, { label }]) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`px-3 py-1 rounded-full text-sm font-semibold transition-colors ${
|
||||
activeStation === key
|
||||
? "bg-neutral-800 text-white dark:bg-white dark:text-black"
|
||||
: "bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
|
||||
}`}
|
||||
onClick={() => setActiveStation(key)}
|
||||
aria-pressed={activeStation === key}
|
||||
key={stationKey}
|
||||
onClick={() => setActiveStation(stationKey)}
|
||||
className={`px-3 py-1 rounded-full text-sm font-semibold transition-colors ${activeStation === stationKey
|
||||
? 'bg-neutral-800 text-white dark:bg-white dark:text-black'
|
||||
: 'bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white'
|
||||
}`}
|
||||
aria-pressed={activeStation === stationKey}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="c-containter">
|
||||
<div className="music-container mt-8">
|
||||
<section className="album-cover">
|
||||
<div className="music-player__album" title="Album">{trackAlbum}</div>
|
||||
<img
|
||||
src={coverArt}
|
||||
className="cover"
|
||||
title={trackAlbum ? `"${trackAlbum}" Cover Art` : "Cover Art"}
|
||||
alt={trackAlbum ? `"${trackAlbum}" Cover Art` : "Cover Art"}
|
||||
/>
|
||||
<div className="music-player__album" title="Album">
|
||||
{trackAlbum}
|
||||
</div>
|
||||
<img src={coverArt} className="cover" alt="Cover Art" />
|
||||
</section>
|
||||
|
||||
<section className="music-player">
|
||||
<h1 className="music-player__header">serious.FM</h1>
|
||||
<h1 className="music-player__title">{trackTitle}</h1>
|
||||
@@ -273,32 +264,48 @@ export function Player() {
|
||||
{trackGenre && <h2 className="music-player__genre">{trackGenre}</h2>}
|
||||
|
||||
<div className="music-time">
|
||||
<p className="music-time__current">{formatTime(elapsed)}</p>
|
||||
<p className="music-time__last">{formatTime(remaining)}</p>
|
||||
<p className="music-time__current">{formatTime(elapsedTime)}</p>
|
||||
<p className="music-time__last">{formatTime(trackDuration - elapsedTime)}</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-2 rounded bg-neutral-300 dark:bg-neutral-700 overflow-hidden">
|
||||
<div className="progress-bar-container w-full h-2 rounded bg-neutral-300 overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-200 ${progressColorClass}`}
|
||||
style={{ width: `${progress}%` }}
|
||||
></div>
|
||||
className="progress-bar-fill h-full transition-all duration-200 bg-blue-500"
|
||||
style={{ width: `${(elapsedTime / trackDuration) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="lrc-text">
|
||||
{lyrics.map((lyricObj, index) => (
|
||||
<p
|
||||
key={index}
|
||||
className={`lrc-line ${index === currentLyricIndex ? 'active' : ''}`}
|
||||
>
|
||||
{lyricObj.line}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="music-control">
|
||||
<div
|
||||
className="music-control__play"
|
||||
onClick={togglePlayback}
|
||||
onClick={() => {
|
||||
const audio = audioElement.current;
|
||||
if (!audio) return;
|
||||
if (isPlaying) {
|
||||
audio.pause();
|
||||
setIsPlaying(false);
|
||||
} else {
|
||||
audio.play().then(() => setIsPlaying(true));
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-pressed={isPlaying}
|
||||
>
|
||||
{!isPlaying ? <Play /> : <Pause />}
|
||||
{isPlaying ? <Pause /> : <Play />}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<audio ref={audioRef} preload="none" />
|
||||
<audio ref={audioElement} preload="none" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user