New activity UI

index.js

@@ -52,10 +52,10 @@ if (!fs.existsSync(path.join(cachePath, "emojis"))) {
 
 app.use(pageUpdater.middleWare)
 
-process.on('uncaughtException', (err, origin) => {
+// process.on('uncaughtException', (err, origin) => {
-    fs.writeSync(
+//     fs.writeSync(
-      process.stderr.fd,
+//       process.stderr.fd,
-      `Caught exception: ${err}\n` +
+//       `Caught exception: ${err}\n` +
-      `Exception origin: ${origin}`,
+//       `Exception origin: ${origin}`,
-    );
+//     );
-  });  
+//   });  

overcomplicatedStatuses.js

@@ -1,5 +1,5 @@
 const path = require("path"),
-fs = require("fs")
+    fs = require("fs")
 
 var constants = JSON.parse(fs.readFileSync(path.join(__dirname, 'constants.json')))
 
@@ -33,7 +33,7 @@ function makeCompat(string) {
 }
 
 function timeFormatter(seconds) {
-    seconds = Math.ceil(seconds)
+    seconds = Math.ceil(seconds / 1000)
     var minutes = Math.floor(seconds / 60)
 
     if (seconds % 60 < 10) {
@@ -44,7 +44,7 @@ function timeFormatter(seconds) {
 }
 
 function gameTimeFormatter(seconds) {
-    seconds = Math.ceil(seconds)
+    seconds = Math.ceil(seconds / 1000)
     var minutes = Math.ceil(seconds / 60)
     var hours = Math.floor(minutes / 60)
     if (seconds <= 60) {
@@ -87,46 +87,20 @@ module.exports = {
                     continue
                 }
 
-
                 function get_img(activity, size = "large_image") {
                     return "https://cache.violets-purgatory.dev/cached/" + get_img_url(activity, size)
                 }
 
-                function songStats() {
+                function activityTime() {
-                    var html = ``
+                    if (activity.timestamps) {
-
+                        if (activity.timestamps.start) {
-                    if (activity.assets && activity.assets.large_text != activity.details && activity.details.length + activity.state.length + activity.assets.large_text.length < 100) {
+                            if (activity.timestamps.end) {
-                        html += `
-                        <br> Album: ${makeCompat(activity.assets.large_text || " ")}
-                        <br> Artist: ${makeCompat(activity.state || " ")}
-                        `
-                    } else {
-                        html += "<br>"
-                        if (activity.state.includes(";")) 
-                            { html += "Artists: " }
-                        else { html += "Artist: " }
-                        html += `${makeCompat(activity.state || " ")}`
-                    }
-
-                    return html
-                }
-                if (activity.type == 2) {
                                 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 += `
+                                return `
-                    <div class="chip activity grid-child">
-                        <img src="${get_img(activity)}" title="${activity.assets.large_text || activity.assets.small_text || activity.state || ""}">
-                            <p>
-                                Listening to ${activity.name}
-                                <br> Song: ${makeCompat(activity.details || " ")}
-                                ${songStats()}
                                 <br>
-                                <span class="lengthBar lengthBar${index}"><span></span></span>
+                                <span style="text-align: center;"><span class="lengthBar lengthBar${index}"><span></span></span><span class="durationBarFormatter" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((Date.now() - activity.timestamps.start))}/${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</span></span>
-                                ${timeFormatter((activity.timestamps.end - activity.timestamps.start) / 1000)}
-                            </p>
-                        </div>
                                     <style>
-    
                                         .lengthBar${index} > span {
                                             animation-name: songSlider${index};
                                             animation-duration: ${timeLeft}s;
@@ -143,36 +117,17 @@ module.exports = {
                                         }
                                     </style>
                                 `
-                } else if (activity.type == 0 && activity.assets) {
+                            } else {
-                    var time = activity.created_at
+                                return `
-                    if (activity.timestamps) {
+                                <span class="timeEstimate" data-start="${activity.timestamps.start}">${gameTimeFormatter((Date.now() - activity.timestamps.start))}</span>
-                        time = activity.timestamps.start
-                    }
-                    if (!activity.assets) {
-                        activity.assets = { "large_text": " ", "small_text": " " }
-                    }
-
-                    function smch() {
-                        if (get_img_url(activity, "small_image")) {
-                            return `<img class="smallimg" src="${get_img(activity, "small_image")}" title="${activity.assets.small_text}">`
-                        }
-                        return ""
-                    }
-
-
-                    addedHTML += `
-                        <div class="chip activity grid-child">
-                            <img src="${get_img(activity)}" title="${activity.assets.large_text}">
-                            ${smch()}
-                            <p>
-                                Playing ${activity.name} 
-                                ${onlyIfExists("<br>" + (activity.details || activity.assets.large_text), activity.details || activity.assets.large_text)}
-                                ${onlyIfExists("<br>" + (activity.state || activity.assets.small_text), activity.state || activity.assets.small_text)}
-                                <br> ${gameTimeFormatter((Date.now() - time) / 1000)}
-                            </p>
-                        </div>
                                 `
-                } else if (activity.type != 4 && activity.assets) {
+                            }
+                        }
+                    }
+                }
+
+                if (activity.type != 4 && activity.assets) {
+
                     var time = activity.created_at
                     if (activity.timestamps) {
                         time = activity.timestamps.start
@@ -181,14 +136,19 @@ module.exports = {
                         activity.assets = { "large_text": " ", "small_text": " " }
                     }
 
+                    var text1 = onlyIfExists("<br><span style='font-size: 1.3rem;'>" + activity.song + "</span>", activity.song) || activity.details || activity.assets.large_text
+                    var text2 = onlyIfExists("By: " + activity.artist, activity.artist) || activity.state || activity.assets.small_text
+                    var text3 = onlyIfExists("On: " + activity.album, activity.album)
+
                     addedHTML += `
                         <div class="chip activity grid-child">
                             <img src="${get_img(activity)}" title="${activity.assets.large_text || activity.assets.small_text}">
-                            <p>
+                            <p style="text-align: left; font-size: 1.15rem;">
-                                <span style="color: rgb(225, 200, 255);">${activity.name}</span> 
+                                <span style="font-size: 1.6rem;">${activity.name}</span>
-                                <br> ${(activity.details || activity.assets.large_text || " ")}
+                                ${onlyIfExists("<br>" + text1, text1)}
-                                <br> ${(activity.state || activity.assets.small_text || " ")}
+                                ${onlyIfExists("<br>" + text2, text2)}
-                                <br> ${gameTimeFormatter((Date.now() - time) / 1000)}
+                                ${onlyIfExists("<br>" + text3, text3)}
+                                ${onlyIfExists("<br>" + activityTime(), activityTime())}
                             </p>
                         </div>
                     `

static/main.js

@@ -61,7 +61,32 @@ function lerp(a, b, t) {
     return a * (1 - t) + b * t
 }
 
-function spinLoop() {
+function gameTimeFormatter(seconds) {
+    seconds = Math.ceil(seconds / 1000)
+    var minutes = Math.ceil(seconds / 60)
+    var hours = Math.floor(minutes / 60)
+    if (seconds <= 60) {
+        return 'about ' + seconds + ' seconds'
+    } else if (minutes < 60) {
+        return `${minutes} Minutes`
+    }
+
+    return `${hours} hours and ${minutes % 60} minutes`
+
+}
+
+function timeFormatter(seconds) {
+    seconds = Math.ceil(seconds / 1000)
+    var minutes = Math.floor(seconds / 60)
+
+    if (seconds % 60 < 10) {
+        return `${minutes}:0${seconds % 60}`
+    } else {
+        return `${minutes}:${seconds % 60}`
+    }
+}
+
+function loop() {
     spinWaiting = true
     setTimeout(() => {
         spinWaiting = false
@@ -100,7 +125,18 @@ function spinLoop() {
             spins = lerp(spins, Math.round(spins), 1 / spinSpeed * 3)
         }
         $(".pfp").css("rotate", (spins * 360) + "deg")
-        spinLoop()
+
+        $(".durationBarFormatter").each((_, item) => {
+            item = $(item)
+            item.text(`${timeFormatter((Date.now() - item.attr("data-start")))}/${timeFormatter((item.attr("data-end") - item.attr("data-start")))}`)
+        })
+
+        $(".timeEstimate").each((_, item) => {
+            item = $(item)
+            item.text(gameTimeFormatter(Date.now() - item.attr("data-start")))
+        })
+
+        loop()
     }, 1/spinSpeed * 1000);
 }
 
@@ -113,7 +149,7 @@ window.onload = function () {
 
     pfp = $(".pfp")
 
-    spinLoop()
+    loop()
 
     pfp.on("mousedown", () => {
         // if (!spinWaiting) {

static/style.css

@@ -182,7 +182,7 @@ br {
     margin: 3px 0;
 }
 
-@media screen and (min-width: 850px) {
+@media screen and (min-width: 1000px) {
     .activity-container {
         display: flex;
         flex-wrap: wrap;
@@ -268,7 +268,8 @@ li {
 .lengthBar {
     background-color: rgb(50, 40, 60);
     display: inline-block;
-    width: 80%;
+    margin: auto;
+    width: 65%;
     height: 10px;
     padding: 0;
     overflow: hidden;