From 14940834c10bf49bd562cd33ba282db3ef3d68b3 Mon Sep 17 00:00:00 2001
From: bingus_violet <violet@violets-purgatory.dev>
Date: Thu, 28 Nov 2024 18:23:31 -0600
Subject: [PATCH] When javascript is disabled, hide the song activity once it
 ends

---
 overcomplicatedStatuses.js | 21 ++++++++++++++-------
 static/js/lanyardSocket.js |  1 +
 static/style.css           | 10 ++++++++++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/overcomplicatedStatuses.js b/overcomplicatedStatuses.js
index 8e5ceae..fa39c06 100644
--- a/overcomplicatedStatuses.js
+++ b/overcomplicatedStatuses.js
@@ -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>
diff --git a/static/js/lanyardSocket.js b/static/js/lanyardSocket.js
index 4237be9..65e64b4 100644
--- a/static/js/lanyardSocket.js
+++ b/static/js/lanyardSocket.js
@@ -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 {
diff --git a/static/style.css b/static/style.css
index 0045aaa..b48e13f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -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;
+    }
 }
\ No newline at end of file