diff --git a/src/components/Music.astro b/src/components/Music.astro index eb05d25..4fba620 100644 --- a/src/components/Music.astro +++ b/src/components/Music.astro @@ -2,7 +2,6 @@ id="last-track-widget" class="motion-music opacity-0 flex flex-col absolute top-0 left-0 m-8" > -

Loading music data...

diff --git a/src/js/music.ts b/src/js/music.ts index adb35e1..8a0828f 100644 --- a/src/js/music.ts +++ b/src/js/music.ts @@ -9,6 +9,44 @@ interface Scrobble { track: Track; } +interface LastFMAlbumInfo { + album: { + image: { "#text": string; size: string }[]; + }; +} + +const LASTFM_API_KEY = "0a210a4a6741f2ec8f27a791b9d5d971"; + +async function fetchAlbumCover( + artist: string, + album: string, +): Promise { + const encodedArtist = encodeURIComponent(artist); + const encodedAlbum = encodeURIComponent(album); + const url = `https://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=${LASTFM_API_KEY}&artist=${encodedArtist}&album=${encodedAlbum}&format=json`; + + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data: LastFMAlbumInfo = await response.json(); + + if (data?.album?.image) { + const largeImage = data.album.image.find( + (image) => image.size === "large", + ); + return largeImage ? largeImage["#text"] : null; + } + + return null; + } catch (error) { + console.error("Error fetching album cover:", error); + return null; + } +} + async function fetchAndDisplayLastTrack() { const container = document.getElementById("last-track-widget"); @@ -38,8 +76,22 @@ async function fetchAndDisplayLastTrack() { (a: Scrobble, b: Scrobble) => b.time - a.time, )[0].track; } + if (lastTrack) { + const albumCover = await fetchAlbumCover( + lastTrack.artists[0], + lastTrack.album.albumtitle, + ); + + let imageElement = ""; + if (albumCover) { + imageElement = `Album Cover`; + } else { + imageElement = ""; // Do not display anything + } + container.innerHTML = ` + ${imageElement}