When javascript is disabled, hide the song activity once it ends
This commit is contained in:
parent
6b3fa918a1
commit
14940834c1
3 changed files with 25 additions and 7 deletions
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue