on loading...
by loading...
at
@@ -15,28 +15,34 @@
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));
+ console.log(json);
type LastFmResource = { "#text": T }
const track = json.recenttracks.track[0] as {
+ "@attr"?: { nowplaying: boolean },
album: LastFmResource,
artist: LastFmResource,
- date: LastFmResource,
+ date?: LastFmResource,
image: LastFmResource[],
name: string,
url: string,
};
- const title = document.querySelector(".title") as HTMLHeadingElement;
+ // i think it's okay to have this be an anchor element
+ // the aria role is link if href is present, otherwise generic (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#technical_summary)
+ // also briefly stated in the html spec (https://html.spec.whatwg.org/#the-a-element)
+ const title = document.querySelector(".title a") as HTMLAnchorElement;
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;
+ title.href = track.url;
album.innerText = track.album["#text"];
artist.innerText = track.artist["#text"];
- time.innerText = new Date(track.date["#text"]).toLocaleString(undefined, {
+ time.innerText = (track.date && new Date(track.date["#text"]).toLocaleString(undefined, {
dateStyle: "medium",
timeStyle: "short"
- });
+ })) || (track["@attr"]?.nowplaying && "NOW!!!") || "epic error getting play time..";
// 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