66 lines
2.3 KiB
Text
66 lines
2.3 KiB
Text
---
|
|
---
|
|
|
|
<div class="lastfm">
|
|
<img class="cover" src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg">
|
|
<div class="info">
|
|
<h3 class="title">loading...</h3>
|
|
on <span class="album"><strong>loading...</strong></span><br>
|
|
by <span class="artist"><strong>loading...</strong></span><br>
|
|
at <time class="time"><strong>loading...</strong></time>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// load bearing noelle
|
|
const json = await fetch("https://lastfm.nkko.workers.dev/?method=user.getRecentTracks&user=reidlab")
|
|
.then(res => res.json())
|
|
.catch(err => console.error("last.fm fail:", err));
|
|
type LastFmResource<T> = { "#text": T }
|
|
const track = json.recenttracks.track[0] as {
|
|
album: LastFmResource<string>,
|
|
artist: LastFmResource<string>,
|
|
date: LastFmResource<string>,
|
|
image: LastFmResource<string>[],
|
|
name: string,
|
|
url: string,
|
|
};
|
|
|
|
const title = document.querySelector(".title") as HTMLHeadingElement;
|
|
const album = document.querySelector(".album strong") as HTMLElement;
|
|
const artist = document.querySelector(".artist strong") as HTMLElement;
|
|
const time = document.querySelector(".time strong") as HTMLTimeElement;
|
|
const cover = document.querySelector(".cover") as HTMLImageElement;
|
|
title.innerText = track.name;
|
|
album.innerText = track.album["#text"];
|
|
artist.innerText = track.artist["#text"];
|
|
time.innerText = new Date(track.date["#text"]).toLocaleString(undefined, {
|
|
dateStyle: "medium",
|
|
timeStyle: "short"
|
|
});
|
|
|
|
// i chose a random thing from my library missing an album cover for this
|
|
// but apparently this goes for any missing track? cuz everyone else is doing it
|
|
// https://github.com/search?q=c6f59c1e5e7240a4c0d427abd71f3dbb&type=code
|
|
cover.src = track.image.at(-1)?.["#text"] ?? "https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg";
|
|
cover.alt = track.name;
|
|
</script>
|
|
<style>
|
|
.lastfm {
|
|
display: flex;
|
|
gap: 1em;
|
|
}
|
|
|
|
.cover {
|
|
display: block;
|
|
width: 8em;
|
|
height: min-content;
|
|
float: left;
|
|
}
|
|
|
|
.info {
|
|
word-break: break-all;
|
|
}
|
|
.title {
|
|
size: 1.2em;
|
|
}
|
|
</style>
|