84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
// nowplaying.js
|
|
|
|
const NowPlaying = (() => {
|
|
function renderTrack(track) {
|
|
if (!track) return;
|
|
|
|
const trackName = track.name || "Unknown Track";
|
|
const artistName = (track.artists && track.artists.length > 0)
|
|
? track.artists[0].name
|
|
: "Unknown Artist";
|
|
const albumUri = track.album ? track.album.uri : null;
|
|
|
|
// Update text elements
|
|
const trackEl = document.getElementById("nowPlayingTrack");
|
|
const artistEl = document.getElementById("nowPlayingArtist");
|
|
if (trackEl) trackEl.textContent = trackName;
|
|
if (artistEl) artistEl.textContent = artistName;
|
|
|
|
// Get album art
|
|
if (albumUri) {
|
|
client.call("core.library.get_images", { uris: [albumUri] })
|
|
.then(images => {
|
|
if (
|
|
images &&
|
|
images[albumUri] &&
|
|
images[albumUri].length > 0
|
|
) {
|
|
// Pick the first (largest?) image
|
|
const artUri = images[albumUri][0].uri;
|
|
const artEl = document.getElementById("nowPlayingArt");
|
|
if (artEl) artEl.src = artUri;
|
|
}
|
|
})
|
|
.catch(err => console.error("Image load error:", err));
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
// On WS open, fetch current track
|
|
client.on("open", () => {
|
|
client
|
|
.call("core.playback.get_current_track")
|
|
.then(track => {
|
|
console.log("Initial now playing:", track);
|
|
renderTrack(track);
|
|
})
|
|
.catch(err => console.error("get_current_track error:", err));
|
|
});
|
|
|
|
// Listen for events on the WS
|
|
client.on("message", msg => {
|
|
if (!msg.event) return; // ignore non-event JSON
|
|
switch (msg.event) {
|
|
case "track_playback_started":
|
|
if (msg.tl_track && msg.tl_track.track) {
|
|
console.log("Now playing:", msg.tl_track.track);
|
|
renderTrack(msg.tl_track.track);
|
|
}
|
|
break;
|
|
|
|
case "track_playback_ended":
|
|
console.log("Track ended:", msg.tl_track);
|
|
break;
|
|
|
|
case "playback_state_changed":
|
|
console.log(
|
|
`Playback state changed: ${msg.old_state} → ${msg.new_state}`
|
|
);
|
|
break;
|
|
|
|
default:
|
|
// Other events are ignored for now
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
return { init };
|
|
})();
|
|
|
|
// Auto-init after DOM loads
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
NowPlaying.init();
|
|
});
|