codey/codey.lol
1
0
Fork 0
Code Issues Pull Requests Activity

add album display (cover art tooltip)

Browse Source
This commit is contained in:
codey
2025-07-21 16:00:49 -04:00
parent 2247c69259
commit e709c35bc1
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AudioPlayer.jsx
View File

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