Adding now / recently played to the audio page

assets/js/pages/audio.js

@@ -77,3 +77,107 @@ if (document.getElementById("starfield")) {
     });
   });
 })();
+
+// Audio page Last.fm integration (separate from media page)
+(function() {
+  const container = document.getElementById("recent-tracks");
+  if (!container) return;
+
+  const AUDIO_LASTFM_API_URL = "https://ws.audioscrobbler.com/2.0/";
+  const AUDIO_LASTFM_USER = "ritualplays";
+  const AUDIO_LASTFM_API_KEY = "3a4fef48fecc593d25e0f9a40df1fefe";
+  const AUDIO_TRACK_LIMIT = 6; // Fetch 6 to have enough after filtering
+
+  // Fetch recent tracks from Last.fm for audio page
+  async function fetchAudioRecentTracks() {
+    const url = `${AUDIO_LASTFM_API_URL}?method=user.getrecenttracks&user=${AUDIO_LASTFM_USER}&api_key=${AUDIO_LASTFM_API_KEY}&format=json&limit=${AUDIO_TRACK_LIMIT}`;
+
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error("Failed to fetch tracks");
+
+      const data = await response.json();
+      return data.recenttracks.track;
+    } catch (error) {
+      console.error("Error fetching Last.fm data:", error);
+      return null;
+    }
+  }
+
+  // Render recent tracks for audio page (horizontal layout)
+  function renderRecentTracks(tracks) {
+    if (!tracks || tracks.length === 0) {
+      container.innerHTML =
+        '<div class="track-loading">No recent tracks found</div>';
+      return;
+    }
+
+    container.innerHTML = "";
+
+    // Check if first track is now playing
+    const hasNowPlaying = tracks[0] && tracks[0]["@attr"] && tracks[0]["@attr"].nowplaying;
+
+    // Filter and limit tracks
+    let tracksToShow;
+    if (hasNowPlaying) {
+      // Show now playing + 4 latest (excluding duplicates of now playing)
+      const nowPlayingTrack = tracks[0];
+      const nowPlayingId = `${nowPlayingTrack.name}-${nowPlayingTrack.artist["#text"]}`;
+
+      // Get remaining tracks, excluding duplicates of now playing
+      const remainingTracks = tracks.slice(1).filter(track => {
+        const trackId = `${track.name}-${track.artist["#text"]}`;
+        return trackId !== nowPlayingId;
+      });
+
+      tracksToShow = [nowPlayingTrack, ...remainingTracks.slice(0, 4)];
+    } else {
+      // No now playing, show 5 latest
+      tracksToShow = tracks.slice(0, 5);
+    }
+
+    tracksToShow.forEach((track) => {
+      const isNowPlaying = track["@attr"] && track["@attr"].nowplaying;
+      const trackElement = document.createElement("a");
+      trackElement.href = track.url;
+      trackElement.target = "_blank";
+      trackElement.rel = "noopener noreferrer";
+      trackElement.className = `recent-track ${isNowPlaying ? "now-playing" : ""}`;
+
+      // Get album art (use largest available)
+      const albumArt = track.image[3]["#text"];
+      const hasArt = albumArt && albumArt.trim() !== "";
+
+      trackElement.innerHTML = `
+        <div class="track-cover ${!hasArt ? "no-art" : ""}">
+          ${hasArt ? `<img src="${albumArt}" alt="${track.name}" loading="lazy">` : '<div class="cover-placeholder">♪</div>'}
+        </div>
+        <div class="track-details">
+          <div class="track-title">${track.name}</div>
+          <div class="track-artist">${track.artist["#text"]}</div>
+        </div>
+      `;
+
+      container.appendChild(trackElement);
+    });
+  }
+
+  // Initialize Last.fm feed for audio page
+  async function initAudioRecentTracks() {
+    const tracks = await fetchAudioRecentTracks();
+    renderRecentTracks(tracks);
+
+    // Update every 30 seconds
+    setInterval(async () => {
+      const updatedTracks = await fetchAudioRecentTracks();
+      renderRecentTracks(updatedTracks);
+    }, 30000);
+  }
+
+  // Initialize recent tracks when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initAudioRecentTracks);
+  } else {
+    initAudioRecentTracks();
+  }
+})();