nin0/website
1
0
Fork 3
Code Pull requests Packages 1 Activity

this website no longer hates TVs

Browse source
This commit is contained in:
nin0 2025-04-21 08:15:58 -04:00
parent 83cb45f9f8
commit 11517475ed
Signed by: nin0
SSH key fingerprint: SHA256:NOoDnFVvZNFvqfXCIhzr6oCTDImZAbTTuyAysZ8Ufk8
1 changed files with 36 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/windows/main/SpotifyCard.astro
View file

@ -1,15 +1,19 @@
--- ---
import LastFMIcon from "@assets/svg/fm.svg" import LastFMIcon from "@assets/svg/fm.svg";
--- ---
<div class="spotify-card-wrapper-shadow"> <div class="spotify-card-wrapper-shadow">
<h4>I'm listening to</h4>
<div class="spotify-card-wrapper"> <div class="spotify-card-wrapper">
<div class="spotify-card"> <div class="spotify-card">
<svg aria-hidden="true" class="blur"> <svg aria-hidden="true" class="blur">
<filter id='sharpBlur' color-interpolation-filters="sRGB"> <filter id="sharpBlur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation='100'></feGaussianBlur> <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> <feColorMatrix
<feComposite in2='SourceGraphic' operator='in'></feComposite> 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> </filter>
</svg> </svg>
<div class="spotify-card-background"></div> <div class="spotify-card-background"></div>
@ -24,7 +28,9 @@ import LastFMIcon from "@assets/svg/fm.svg"
</div> </div>
<div class="links"> <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> </div>
</div> </div>
@ -106,7 +112,8 @@ import LastFMIcon from "@assets/svg/fm.svg"
filter: drop-shadow(0 0 5px #0000006d); 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; color: #ffffffa1;
font-weight: 500; font-weight: 500;
font-size: 0.85rem; font-size: 0.85rem;
@ -145,7 +152,9 @@ import LastFMIcon from "@assets/svg/fm.svg"
type FMTrack, type FMTrack,
transformRawTrack transformRawTrack
} from "types/lastfm"; } from "types/lastfm";
const spotifyCardWrapper: HTMLElement = document.querySelector(".spotify-card-wrapper-shadow"); const spotifyCardWrapper: HTMLElement = document.querySelector(
".spotify-card-wrapper-shadow"
);
async function getLastFmTracks() { async function getLastFmTracks() {
const params = new URLSearchParams({ const params = new URLSearchParams({
@ -157,10 +166,10 @@ import LastFMIcon from "@assets/svg/fm.svg"
extended: "true" extended: "true"
}); });
const response: FMResponse = await( const response: FMResponse = await (
await fetch(`${LASTFM_API}${params}`) await fetch(`${LASTFM_API}${params}`)
).json(); ).json();
if ( if (
response.recenttracks.track.some(t => { response.recenttracks.track.some(t => {
try { try {
@ -173,22 +182,25 @@ import LastFMIcon from "@assets/svg/fm.svg"
const rawTrack: FMRawTrack = response.recenttracks.track[0]; const rawTrack: FMRawTrack = response.recenttracks.track[0];
const track: FMTrack = transformRawTrack(rawTrack); const track: FMTrack = transformRawTrack(rawTrack);
mergeStyles({ mergeStyles(
"display": "block", {
"--track": `'${track.name}'`, display: "block",
"--artist": `'${track.artist}'`, "--track": `'${track.name.replaceAll("'", "\\'")}'`,
"--album": `'${track.album}'`, "--artist": `'${track.artist.replaceAll("'", "\\'")}'`,
"--album-art": `url("${track.albumArt}")`, "--album": `'${track.album.replaceAll("'", "\\'")}'`,
"--album-color": await average( "--album-art": `url("${track.albumArt}")`,
track.albumArt, "--album-color": await average(track.albumArt, {
{ format: "hex" } format: "hex"
) })
}, spotifyCardWrapper.style); },
spotifyCardWrapper.style
);
(document.querySelector(".lastfm-link") as HTMLLinkElement).href = track.url; (document.querySelector(".lastfm-link") as HTMLLinkElement).href =
track.url;
} }
} }
getLastFmTracks(); getLastFmTracks();
setInterval(getLastFmTracks, 10000); setInterval(getLastFmTracks, 10000);
</script> </script>