Violet/Violets-Purgatory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

21
overcomplicatedStatuses.js
View file

@ -73,13 +73,13 @@ module.exports = {
var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000) var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000)
var totalTime = Math.round((activity.timestamps.end - activity.timestamps.start) / 1000) var totalTime = Math.round((activity.timestamps.end - activity.timestamps.start) / 1000)
return ` return `
<div class="durationBarStuff"> <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> <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 class="lengthBar lengthBar${index}">
<div></div> <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> </div>
<p class="playTimeEnd" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</p>
</div>
<style> <style>
.lengthBar${index} > div { .lengthBar${index} > div {
animation-name: songSlider${index}; 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} { @keyframes songSlider${index} {
0% { 0% {
width: 0%; width: 0%;
@ -128,7 +135,7 @@ module.exports = {
var text3 = onlyIfExists("On: " + activity.album, activity.album != activity.song && activity.album) var text3 = onlyIfExists("On: " + activity.album, activity.album != activity.song && activity.album)
addedHTML += ` 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)}> <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)} ${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> <div>

1
static/js/lanyardSocket.js
View file

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

10
static/style.css
View file

@ -364,3 +364,13 @@ underline {
font-size: 1.15rem; font-size: 1.15rem;
padding: 0 4px; padding: 0 4px;
} }
@keyframes hide {
to {
flex: 0 0 0%;
height: 0px;
position: fixed;
visibility: hidden;
display: none;
}
}