typed lastfm things

src/components/windows/main/SpotifyCard.astro

@@ -2,6 +2,7 @@
 import LastFMIcon from "@assets/svg/fm.svg"
 ---
 <div class="spotify-card-wrapper-shadow">
+	<h4>I'm listening to</h4>
 	<div class="spotify-card-wrapper">
 		<div class="spotify-card">
 			<svg aria-hidden="true" class="blur">
@@ -29,6 +30,11 @@ import LastFMIcon from "@assets/svg/fm.svg"
 	</div>
 </div>
 <style>
+	h4 {
+		color: var(--subtext0);
+		margin-bottom: 10px;
+	}
+
 	.blur {
 		display: none;
 	}
@@ -132,24 +138,29 @@ import LastFMIcon from "@assets/svg/fm.svg"
 <script>
 	import { mergeStyles } from "utils/mergeStyles";
 	import { average } from "color.js";
-	import { LASTFM_KEY, LASTFM_API } from "utils/constants";
+	import { LASTFM_KEY, LASTFM_API, LASTFM_USER } from "utils/constants";
+	import {
+		type FMResponse,
+		type FMRawTrack,
+		type FMTrack,
+		transformRawTrack
+	} from "types/lastfm";
 	const spotifyCardWrapper: HTMLElement = document.querySelector(".spotify-card-wrapper-shadow");
 
 	async function getLastFmTracks() {
 		const params = new URLSearchParams({
 			method: "user.getrecenttracks",
 			api_key: LASTFM_KEY,
-			user: "nin0dev",
+			user: LASTFM_USER,
 			limit: "50",
 			format: "json",
 			extended: "true"
 		});
 
-		const response = await(
+		const response: FMResponse = await(
 			await fetch(`${LASTFM_API}${params}`)
 		).json();
 		
-		// TODO: make lastfm stuff typed
 		if (
 			response.recenttracks.track.some(t => {
 				try {
@@ -159,20 +170,19 @@ import LastFMIcon from "@assets/svg/fm.svg"
 				}
 			})
 		) {
-			const track = response.recenttracks.track[0];
+			const rawTrack: FMRawTrack = response.recenttracks.track[0];
+			const track: FMTrack = transformRawTrack(rawTrack);
 
 			mergeStyles({
 				"display": "block",
-				"--album-art": `url("${track.image[1]["#text"]}")`,
 				"--track": `'${track.name}'`,
-				"--album": `'${track.album["#text"]}'`,
+				"--artist": `'${track.artist}'`,
+				"--album": `'${track.album}'`,
+				"--album-art": `url("${track.albumArt}")`,
 				"--album-color": await average(
-						`${track.image[1]["#text"]}`,
-							{
-								format: "hex"
-							}
-						),
-				"--artist": `'${track.artist.name}'`
+					track.albumArt,
+					{ format: "hex" }
+				)
 			}, spotifyCardWrapper.style);
 
 			(document.querySelector(".lastfm-link") as HTMLLinkElement).href = track.url;

src/types/lastfm.ts

@@ -0,0 +1,42 @@
+export interface FMRawTrack {
+	name: string;
+	url: string;
+	album: {
+		"#text": string;
+	};
+	artist: {
+		name: string;
+	};
+	image: Array<{
+		size: string;
+		"#text": string;
+	}>;
+	"@attr"?: {
+		nowplaying?: string;
+	};
+}
+
+export interface FMTrack {
+	name: string;
+	artist: string;
+	album: string;
+	url: string;
+	albumArt: string;
+
+}
+
+export interface FMResponse {
+	recenttracks: {
+		track: FMRawTrack[];
+	};
+};
+
+export function transformRawTrack(raw: FMRawTrack): FMTrack {
+	return {
+		name: raw.name,
+		artist: raw.artist.name,
+		album: raw.album["#text"],
+		url: raw.url,
+		albumArt: raw.image[1]["#text"]
+	};
+}

src/utils/constants.ts

@@ -1,4 +1,5 @@
 export const LASTFM_KEY: string = "3c5623fa1abbd11c49f53ca18e992ead";
 export const LASTFM_API: string = "https://ws.audioscrobbler.com/2.0/?";
+export const LASTFM_USER: string = "nin0dev";
 export const LANYARD_ID: string = "886685857560539176";
 export const LANYARD_API: string = "wss://api.lanyard.rest/socket";