Fluffy/WebsiteFluffy
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-05-29 23:03:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Button style

Browse source 
Adjust Music component JS
aurgh
This commit is contained in:
Michał Gdula 2024-05-23 20:10:08 +01:00
parent 79c55fc916
commit 6a88af6864
13 changed files with 115 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/Music.astro
View file

@ -1,44 +1,48 @@
---
---
<a id="current-music" href="https://www.last.fm/user/Fluffy_Bean_">
<img src="/leg.webp" alt="Track cover art" id="current-music-image"/>
<a class="button" id="music" href="https://www.last.fm/user/Fluffy_Bean_" target="_blank">
<img src="/leg.webp" alt="Track cover art" id="music-image"/>
<ul>
<li id="current-music-title">Track Name</li>
<li id="current-music-artist">by Artist</li>
<li id="current-music-album">on Album</li>
<li id="music-title">Track Name</li>
<li id="music-artist">by Artist</li>
<li id="music-album">on Album</li>
</ul>
</a>
<script>
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
const data = await request.json();
document.addEventListener("DOMContentLoaded", async () => {
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
const data = await request.json();
const image= document.querySelector("#current-music-image") as HTMLImageElement;
const title = document.querySelector("#current-music-title") as HTMLParagraphElement;
const artist = document.querySelector("#current-music-artist") as HTMLParagraphElement;
const album = document.querySelector("#current-music-album") as HTMLParagraphElement;
image.src = data["track"]["image"][1]["#text"];
title.innerText = `Listening to ${data["track"]["name"]}`;
artist.innerText = `by ${data["track"]["artist"]["#text"]}`;
album.innerText = `on ${data["track"]["album"]["#text"]}`;
( <HTMLImageElement>document.querySelector("#music-image") ).src = data["track"]["image"][1]["#text"];
( <HTMLParagraphElement>document.querySelector("#music-title") ).innerText = `Listening to ${data["track"]["name"]}`;
( <HTMLParagraphElement>document.querySelector("#music-artist") ).innerText = `by ${data["track"]["artist"]["#text"]}`;
( <HTMLParagraphElement>document.querySelector("#music-album") ).innerText = `on ${data["track"]["album"]["#text"]}`;
});
</script>
<style lang="scss">
@import "../styles/vars.scss";
#current-music {
#music {
padding: 16px;
width: unset;
height: unset;
display: flex;
flex-direction: row;
justify-content: unset;
align-items: unset;
text-decoration: none;
border-radius: $radius;
background-color: $gray;
color: $light;
&:before {
border-radius: $radius;
}
> img {
margin-right: 16px;
@ -64,7 +68,7 @@
}
}
#current-music-title {
#music-title {
font-weight: bold;
}
</style>