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

loved tracks

Browse source
This commit is contained in:
nin0 2025-04-21 15:23:16 -04:00
parent 83c4444c8e
commit 7dbaa56b81
Signed by: nin0
SSH key fingerprint: SHA256:NOoDnFVvZNFvqfXCIhzr6oCTDImZAbTTuyAysZ8Ufk8
3 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/svg/heart.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-147q-14 0-28.5-5T426-168l-69-63q-106-97-191.5-192.5T80-634q0-94 63-157t157-63q53 0 100 22.5t80 61.5q33-39 80-61.5T660-854q94 0 157 63t63 157q0 115-85 211T602-230l-68 62q-11 11-25.5 16t-28.5 5Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 322 B

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

@ -1,5 +1,6 @@
--- ---
import LastFMIcon from "@assets/svg/fm.svg"; import LastFMIcon from "@assets/svg/fm.svg";
import HeartIcon from "@assets/svg/heart.svg";
--- ---
<div class="spotify-card-wrapper-shadow"> <div class="spotify-card-wrapper-shadow">
@ -20,6 +21,7 @@ import LastFMIcon from "@assets/svg/fm.svg";
<div class="spotify-card-art-shadow"> <div class="spotify-card-art-shadow">
<div class="spotify-card-art"></div> <div class="spotify-card-art"></div>
<HeartIcon id="loved-icon" />
</div> </div>
<div class="spotfiy-card-track-info"> <div class="spotfiy-card-track-info">
<div class="spotify-card-track-name"></div> <div class="spotify-card-track-name"></div>
@ -80,6 +82,16 @@ import LastFMIcon from "@assets/svg/fm.svg";
.spotify-card-art-shadow { .spotify-card-art-shadow {
filter: drop-shadow(0 0 5px #00000040); filter: drop-shadow(0 0 5px #00000040);
#loved-icon {
display: var(--loved);
position: absolute;
bottom: -6px;
right: -6px;
fill: var(--red);
filter: drop-shadow(0 0 5px #0000006d);
}
} }
.spotify-card-art-wrapper { .spotify-card-art-wrapper {
@ -191,7 +203,8 @@ import LastFMIcon from "@assets/svg/fm.svg";
"--album-art": `url("${track.albumArt}")`, "--album-art": `url("${track.albumArt}")`,
"--album-color": await average(track.albumArt, { "--album-color": await average(track.albumArt, {
format: "hex" format: "hex"
}) }),
"--loved": track.loved ? "block" : "none"
}, },
spotifyCardWrapper.style spotifyCardWrapper.style
); );

5
src/types/lastfm.ts
View file

@ -11,6 +11,7 @@ export interface FMRawTrack {
size: string; size: string;
"#text": string; "#text": string;
}>; }>;
loved: string;
"@attr"?: { "@attr"?: {
nowplaying?: string; nowplaying?: string;
}; };
@ -22,6 +23,7 @@ export interface FMTrack {
album: string; album: string;
url: string; url: string;
albumArt: string; albumArt: string;
loved: boolean;
} }
export interface FMResponse { export interface FMResponse {
@ -36,6 +38,7 @@ export function transformRawTrack(raw: FMRawTrack): FMTrack {
artist: raw.artist.name, artist: raw.artist.name,
album: raw.album["#text"], album: raw.album["#text"],
url: raw.url, url: raw.url,
albumArt: raw.image[1]["#text"] albumArt: raw.image[1]["#text"],
loved: raw.loved === "1"
}; };
} }