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 = `
`;
+ } else {
+ imageElement = ""; // Do not display anything
+ }
+
container.innerHTML = `
+ ${imageElement}