Song durations!

This commit is contained in:
Bingus_Violet 2024-01-25 22:24:09 -06:00
parent 2c620209ad
commit a493263f72
3 changed files with 64 additions and 10 deletions

View file

@ -170,15 +170,37 @@ function pageUpdate() {
return html
}
if (activity.type == 2) {
var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000)
var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100
addedHTML += `
<div class="chip activity col-md-6 testing">
<img src="${getThumbor()}/256x256/${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
<img src="${getThumbor()}/128x128/${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
<p>
Listening to <span style="color: limegreen;">${activity.name}</span>
<br> Song: ${activity.details || " "}
${songStats()}
<br>
<span class="lengthBar lengthBar${index}"><span></span></span>
</p>
</div>
<style>
.lengthBar${index} > span {
animation-name: songSlider${index};
animation-duration: ${timeLeft}s;
animation-timing-function: linear;
}
@keyframes songSlider${index} {
0% {
width: ${currentPercent}%;
}
100% {
width: 100%;
}
}
</style>
`
} else if (activity.type == 0) {
var time = activity.created_at
@ -285,4 +307,3 @@ app.use((req, res, next) => {
<p>Uh oh... I think your lost? There's nothing here :P</p>
`)
})

View file

@ -58,6 +58,19 @@
{MASTODON_FEED}
{SEASONAL_EFFECT}
<div class="chip activity col-md-6 testing">
<img src="https://thumbor-production-0e82.up.railway.app/unsafe/256x256/https://i.scdn.co/image/ab67616d0000b27364fa1bda999f4fbd2b7c4bb7" title="Petals to Thorns">
<p>
Listening to <span style="color: limegreen;">Spotify</span>
<br> Song: Here With Me
<br> Album: Petals to Thorns
<br> Artist: d4vd
<br>
<span class="lengthBar"><span></span></span>
</p>
</div>
</div>
</body>
</html>

View file

@ -271,6 +271,26 @@ hr {
border-radius: 5px;
}
.lengthBar {
background-color: rgb(50, 40, 60);
display: inline-block;
width: 80%;
height: 10px;
padding: 0;
overflow: hidden;
border-radius: 5px;
}
.lengthBar > span {
margin: 0;
padding: 0;
width: 100%;
background-color: white;
height: 20px;
display: inline-block;
position: relative;
}
@keyframes fade-in {
0% {
opacity: 0;