Fluffy/website
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-01-14 10:35:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve Music component

Browse source
This commit is contained in:
Michał 2024-05-31 22:28:07 +01:00
parent a68a074854
commit 34415569b9
2 changed files with 37 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Music.astro
View file

@ -9,7 +9,15 @@ import leg from "../assets/leg.webp";
height="64" height="64"
loading="eager" loading="eager"
alt="Track cover art" alt="Track cover art"
id="music-image" class="music-img music-bg"
/>
<img
src={leg.src}
width="64"
height="64"
loading="eager"
alt="Track cover art"
class="music-img music-cover"
/> />
<ul> <ul>
<li id="music-title" style="font-weight: 600;">Track Name</li> <li id="music-title" style="font-weight: 600;">Track Name</li>
@ -23,7 +31,9 @@ import leg from "../assets/leg.webp";
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song"); const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
const data = await request.json(); const data = await request.json();
( document.querySelector("#music-image") as HTMLImageElement ).src = data["track"]["image"][2]["#text"]; ( document.querySelectorAll(".music-img") as HTMLImageElement[] ).forEach((img) => {
img.src = data["track"]["image"][2]["#text"];
});
( document.querySelector("#music-title") as HTMLParagraphElement ).innerText = `${data["track"]["name"]}`; ( document.querySelector("#music-title") as HTMLParagraphElement ).innerText = `${data["track"]["name"]}`;
( document.querySelector("#music-artist") as HTMLParagraphElement ).innerText = `by ${data["track"]["artist"]["#text"]}`; ( document.querySelector("#music-artist") as HTMLParagraphElement ).innerText = `by ${data["track"]["artist"]["#text"]}`;
( document.querySelector("#music-album") as HTMLParagraphElement ).innerText = `on ${data["track"]["album"]["#text"]}`; ( document.querySelector("#music-album") as HTMLParagraphElement ).innerText = `on ${data["track"]["album"]["#text"]}`;

31
src/styles/_music.scss
View file

@ -20,25 +20,37 @@
border-radius: $radius; border-radius: $radius;
} }
> img { .music-bg {
width: auto; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
//border-radius: $radius; filter: blur(1px) saturate(110%);
mask-image: linear-gradient( mask-image: linear-gradient(
to right, to right,
rgba(#fff, 0.5), rgba(#fff, 0.4),
rgba(#fff, 0) 80% rgba(#fff, 0)
); );
object-fit: cover; object-fit: cover;
z-index: +1; z-index: +1;
} }
.music-cover {
margin-right: 4px;
width: 80px;
height: 80px;
border-radius: $radius;
object-fit: cover;
z-index: +2;
}
> ul { > ul {
position: relative; position: relative;
@ -54,3 +66,10 @@
} }
} }
} }
@media only screen and (max-width: 500px) {
#music {
flex-direction: column;
}
}