When javascript is disabled, hide the song activity once it ends

This commit is contained in:
bingus_violet 2024-11-28 18:23:31 -06:00
parent 6b3fa918a1
commit 14940834c1
3 changed files with 25 additions and 7 deletions

View file

@ -73,13 +73,13 @@ module.exports = {
var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000)
var totalTime = Math.round((activity.timestamps.end - activity.timestamps.start) / 1000)
return `
<div class="durationBarStuff">
<p style="padding-left: 0;" class="playTimeStart scriptEnabled" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((Date.now() - activity.timestamps.start))}</p>
<div class="lengthBar lengthBar${index}">
<div></div>
<div class="durationBarStuff">
<p style="padding-left: 0;" class="playTimeStart scriptEnabled" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((Date.now() - activity.timestamps.start))}</p>
<div class="lengthBar lengthBar${index}">
<div></div>
</div>
<p class="playTimeEnd" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</p>
</div>
<p class="playTimeEnd" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</p>
</div>
<style>
.lengthBar${index} > div {
animation-name: songSlider${index};
@ -90,6 +90,13 @@ module.exports = {
}
#activity${index} {
animation-name: hide;
animation-delay: ${timeLeft}s;
animation-fill-mode: forwards;
animation-timing-function: step-end;
}
@keyframes songSlider${index} {
0% {
width: 0%;
@ -128,7 +135,7 @@ module.exports = {
var text3 = onlyIfExists("On: " + activity.album, activity.album != activity.song && activity.album)
addedHTML += `
<div class="chip activity grid-child">
<div class="chip activity grid-child" id="activity${index}">
<img src="${get_img(activity)}" ${onlyIfExists(`title="${activity.assets.large_text}"`, activity.assets.large_text)}>
${onlyIfExists(`<img class="smallimg" src="${get_img(activity, "small_image")}" ${onlyIfExists(`title="${activity.assets.small_text}"`, activity.assets.small_text)}>`, activity.assets.small_image)}
<div>

View file

@ -68,6 +68,7 @@ function socketeer() {
var discFetch = await (await fetch("/discHTML")).text()
$("#activityHtml").html(discFetch)
$(".activity").css("animation-name", "none")
} else if (data.op == 3) {
lastPong = Date.now()
} else {

View file

@ -363,4 +363,14 @@ underline {
.durationBarStuff > p {
font-size: 1.15rem;
padding: 0 4px;
}
@keyframes hide {
to {
flex: 0 0 0%;
height: 0px;
position: fixed;
visibility: hidden;
display: none;
}
}