feat(index): add song cover art
All checks were successful
build dist / build-dist (push) Successful in 26s
All checks were successful
build dist / build-dist (push) Successful in 26s
This commit is contained in:
parent
fdf6aa9b37
commit
83cc39767c
2 changed files with 52 additions and 1 deletions
|
@ -2,7 +2,6 @@
|
||||||
id="last-track-widget"
|
id="last-track-widget"
|
||||||
class="motion-music opacity-0 flex flex-col absolute top-0 left-0 m-8"
|
class="motion-music opacity-0 flex flex-col absolute top-0 left-0 m-8"
|
||||||
>
|
>
|
||||||
<p>Loading music data...</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/src/js/music.ts"></script>
|
<script src="/src/js/music.ts"></script>
|
||||||
|
|
|
@ -9,6 +9,44 @@ interface Scrobble {
|
||||||
track: Track;
|
track: Track;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface LastFMAlbumInfo {
|
||||||
|
album: {
|
||||||
|
image: { "#text": string; size: string }[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const LASTFM_API_KEY = "596e4b8f593080597d5637be3173e670"; // Replace with your API key
|
||||||
|
|
||||||
|
async function fetchAlbumCover(
|
||||||
|
artist: string,
|
||||||
|
album: string,
|
||||||
|
): Promise<string | null> {
|
||||||
|
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() {
|
async function fetchAndDisplayLastTrack() {
|
||||||
const container = document.getElementById("last-track-widget");
|
const container = document.getElementById("last-track-widget");
|
||||||
|
|
||||||
|
@ -38,8 +76,22 @@ async function fetchAndDisplayLastTrack() {
|
||||||
(a: Scrobble, b: Scrobble) => b.time - a.time,
|
(a: Scrobble, b: Scrobble) => b.time - a.time,
|
||||||
)[0].track;
|
)[0].track;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (lastTrack) {
|
if (lastTrack) {
|
||||||
|
const albumCover = await fetchAlbumCover(
|
||||||
|
lastTrack.artists[0],
|
||||||
|
lastTrack.album.albumtitle,
|
||||||
|
);
|
||||||
|
|
||||||
|
let imageElement = "";
|
||||||
|
if (albumCover) {
|
||||||
|
imageElement = `<img src="${albumCover}" alt="Album Cover" class="mb-2 rounded shadow-md w-32 h-32 object-cover">`;
|
||||||
|
} else {
|
||||||
|
imageElement = ""; // Do not display anything
|
||||||
|
}
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
|
${imageElement}
|
||||||
<span class="mb-2 flex gap-2">
|
<span class="mb-2 flex gap-2">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>
|
||||||
<span class="text-sm text-primary">
|
<span class="text-sm text-primary">
|
||||||
|
|
Loading…
Add table
Reference in a new issue