add album display (cover art tooltip)

This commit is contained in:
2025-07-21 16:00:49 -04:00
parent 2247c69259
commit e709c35bc1

View File

@@ -33,6 +33,7 @@ export function Player() {
const [trackTitle, setTrackTitle] = useState("");
const [trackArtist, setTrackArtist] = useState("");
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);
@@ -131,6 +132,7 @@ useEffect(() => {
if (lastStationData.current !== "offline") {
setTrackTitle("Offline");
setTrackArtist("");
setTrackAlbum("");
setTrackGenre("");
setCoverArt("/images/radio_art_default.jpg");
setElapsed(0);
@@ -153,6 +155,7 @@ useEffect(() => {
setTrackTitle(data.song);
setTrackArtist(data.artist);
setTrackGenre(data.genre !== "N/A" ? data.genre : "");
setTrackAlbum(data.album);
setCoverArt(`${API_URL}/radio/album_art?station=${activeStation}&_=${Date.now()}`);
setElapsed(data.elapsed);
setDuration(data.duration);
@@ -201,7 +204,10 @@ const progressColorClass =
<div className="c-containter">
<div className="music-container mt-8">
<section className="album-cover">
<img src={coverArt} className="cover" alt="Cover Art" />
<img src={coverArt}
className="cover"
title={`"${trackAlbum}" Cover Art`}
alt={`"${trackAlbum}" Cover Art`} />
</section>
<section className="music-player">
<h1 className="music-player__header">serious.FM</h1>