init

nowplaying.js

@@ -0,0 +1,84 @@
+// 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();
+});