Song durations!

index.js

@@ -170,15 +170,37 @@ function pageUpdate() {
                 return html
             }
             if (activity.type == 2) {
-                    addedHTML += `
-                    <div class="chip activity col-md-6 testing">
-                        <img src="${getThumbor()}/256x256/${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
-                            <p>
-                                Listening to <span style="color: limegreen;">${activity.name}</span> 
-                                <br> Song: ${activity.details || " "}
-                                ${songStats()}
-                            </p>
+                var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000)
+                var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100
+                addedHTML += `
+                <div class="chip activity col-md-6 testing">
+                    <img src="${getThumbor()}/128x128/${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
+                        <p>
+                            Listening to <span style="color: limegreen;">${activity.name}</span> 
+                            <br> Song: ${activity.details || " "}
+                            ${songStats()}
+                            <br>
+                            <span class="lengthBar lengthBar${index}"><span></span></span>
+                        </p>
                     </div>
+
+                <style>
+
+                .lengthBar${index} > span {
+                    animation-name: songSlider${index};
+                    animation-duration: ${timeLeft}s;
+                    animation-timing-function: linear;
+                }
+
+                @keyframes songSlider${index} {
+                    0% {
+                        width: ${currentPercent}%;
+                    }
+                    100% {
+                        width: 100%;
+                    }
+                }
+                </style>
                 `
             } else if (activity.type == 0) {
                     var time = activity.created_at
@@ -285,4 +307,3 @@ app.use((req, res, next) => {
         <p>Uh oh... I think your lost? There's nothing here :P</p>
         `) 
 })
-  

resources/mainPage.html

@@ -58,6 +58,19 @@
         
         {MASTODON_FEED}
         {SEASONAL_EFFECT}
+
+        <div class="chip activity col-md-6 testing">
+            <img src="https://thumbor-production-0e82.up.railway.app/unsafe/256x256/https://i.scdn.co/image/ab67616d0000b27364fa1bda999f4fbd2b7c4bb7" title="Petals to Thorns">
+                <p>
+                    Listening to <span style="color: limegreen;">Spotify</span> 
+                    <br> Song: Here With Me
+                    
+        <br> Album: Petals to Thorns
+        <br> Artist: d4vd
+        <br>
+        <span class="lengthBar"><span></span></span>
+        </p>
+        </div>
     </div>
 </body>
 </html>

static/style.css

@@ -271,6 +271,26 @@ hr {
     border-radius: 5px;
 }
 
+.lengthBar {
+    background-color: rgb(50, 40, 60);
+    display: inline-block;
+    width: 80%;
+    height: 10px;
+    padding: 0;
+    overflow: hidden;
+    border-radius: 5px;
+}
+
+.lengthBar > span {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    background-color: white;
+    height: 20px;
+    display: inline-block;
+    position: relative;
+}
+
 @keyframes fade-in {
     0% {
         opacity: 0;