@@ -80,6 +82,16 @@ import LastFMIcon from "@assets/svg/fm.svg";
.spotify-card-art-shadow {
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 {
@@ -191,7 +203,8 @@ import LastFMIcon from "@assets/svg/fm.svg";
"--album-art": `url("${track.albumArt}")`,
"--album-color": await average(track.albumArt, {
format: "hex"
- })
+ }),
+ "--loved": track.loved ? "block" : "none"
},
spotifyCardWrapper.style
);
diff --git a/src/types/lastfm.ts b/src/types/lastfm.ts
index 1b4d2cf..b25fe56 100644
--- a/src/types/lastfm.ts
+++ b/src/types/lastfm.ts
@@ -11,6 +11,7 @@ export interface FMRawTrack {
size: string;
"#text": string;
}>;
+ loved: string;
"@attr"?: {
nowplaying?: string;
};
@@ -22,6 +23,7 @@ export interface FMTrack {
album: string;
url: string;
albumArt: string;
+ loved: boolean;
}
export interface FMResponse {
@@ -36,6 +38,7 @@ export function transformRawTrack(raw: FMRawTrack): FMTrack {
artist: raw.artist.name,
album: raw.album["#text"],
url: raw.url,
- albumArt: raw.image[1]["#text"]
+ albumArt: raw.image[1]["#text"],
+ loved: raw.loved === "1"
};
}