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>