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

56
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">
<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,7 +166,7 @@ import LastFMIcon from "@assets/svg/fm.svg"
extended: "true"
});
const response: FMResponse = await(
const response: FMResponse = await (
await fetch(`${LASTFM_API}${params}`)
).json();
@ -173,19 +182,22 @@ 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;
}
}