From 11517475ede32420a863fdb60f11c433f3ff7472 Mon Sep 17 00:00:00 2001
From: nin0 <personal@nin0.dev>
Date: Mon, 21 Apr 2025 08:15:58 -0400
Subject: [PATCH] this website no longer hates TVs

---
 src/components/windows/main/SpotifyCard.astro | 60 +++++++++++--------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/components/windows/main/SpotifyCard.astro b/src/components/windows/main/SpotifyCard.astro
index 6af2242..4f26c15 100644
--- a/src/components/windows/main/SpotifyCard.astro
+++ b/src/components/windows/main/SpotifyCard.astro
@@ -1,15 +1,19 @@
 ---
-import LastFMIcon from "@assets/svg/fm.svg"
+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">
-				<filter id='sharpBlur' color-interpolation-filters="sRGB">
-					<feGaussianBlur stdDeviation='100'></feGaussianBlur>
-					<feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0'></feColorMatrix>
-					<feComposite in2='SourceGraphic' operator='in'></feComposite>
+				<filter id="sharpBlur" color-interpolation-filters="sRGB">
+					<feGaussianBlur stdDeviation="100"></feGaussianBlur>
+					<feColorMatrix
+						type="matrix"
+						values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0"
+					></feColorMatrix>
+					<feComposite in2="SourceGraphic" operator="in"
+					></feComposite>
 				</filter>
 			</svg>
 			<div class="spotify-card-background"></div>
@@ -24,7 +28,9 @@ import LastFMIcon from "@assets/svg/fm.svg"
 			</div>
 
 			<div class="links">
-				<a class="lastfm-link" href="https://www.last.fm/user/nin0dev"><LastFMIcon /></a>
+				<a class="lastfm-link" href="https://www.last.fm/user/nin0dev"
+					><LastFMIcon /></a
+				>
 			</div>
 		</div>
 	</div>
@@ -106,7 +112,8 @@ import LastFMIcon from "@assets/svg/fm.svg"
 		filter: drop-shadow(0 0 5px #0000006d);
 	}
 
-	.spotify-card-track-artist::after, .spotify-card-track-album::after {
+	.spotify-card-track-artist::after,
+	.spotify-card-track-album::after {
 		color: #ffffffa1;
 		font-weight: 500;
 		font-size: 0.85rem;
@@ -145,7 +152,9 @@ import LastFMIcon from "@assets/svg/fm.svg"
 		type FMTrack,
 		transformRawTrack
 	} from "types/lastfm";
-	const spotifyCardWrapper: HTMLElement = document.querySelector(".spotify-card-wrapper-shadow");
+	const spotifyCardWrapper: HTMLElement = document.querySelector(
+		".spotify-card-wrapper-shadow"
+	);
 
 	async function getLastFmTracks() {
 		const params = new URLSearchParams({
@@ -157,10 +166,10 @@ import LastFMIcon from "@assets/svg/fm.svg"
 			extended: "true"
 		});
 
-		const response: FMResponse = await(
+		const response: FMResponse = await (
 			await fetch(`${LASTFM_API}${params}`)
 		).json();
-		
+
 		if (
 			response.recenttracks.track.some(t => {
 				try {
@@ -173,22 +182,25 @@ import LastFMIcon from "@assets/svg/fm.svg"
 			const rawTrack: FMRawTrack = response.recenttracks.track[0];
 			const track: FMTrack = transformRawTrack(rawTrack);
 
-			mergeStyles({
-				"display": "block",
-				"--track": `'${track.name}'`,
-				"--artist": `'${track.artist}'`,
-				"--album": `'${track.album}'`,
-				"--album-art": `url("${track.albumArt}")`,
-				"--album-color": await average(
-					track.albumArt,
-					{ format: "hex" }
-				)
-			}, spotifyCardWrapper.style);
+			mergeStyles(
+				{
+					display: "block",
+					"--track": `'${track.name.replaceAll("'", "\\'")}'`,
+					"--artist": `'${track.artist.replaceAll("'", "\\'")}'`,
+					"--album": `'${track.album.replaceAll("'", "\\'")}'`,
+					"--album-art": `url("${track.albumArt}")`,
+					"--album-color": await average(track.albumArt, {
+						format: "hex"
+					})
+				},
+				spotifyCardWrapper.style
+			);
 
-			(document.querySelector(".lastfm-link") as HTMLLinkElement).href = track.url;
+			(document.querySelector(".lastfm-link") as HTMLLinkElement).href =
+				track.url;
 		}
 	}
 
 	getLastFmTracks();
 	setInterval(getLastFmTracks, 10000);
-</script>
\ No newline at end of file
+</script>