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

New activity UI

Browse source
This commit is contained in:
bingus_violet 2024-06-29 17:34:54 -05:00
parent 498c7ae1d9
commit 97c2fc6c9f
4 changed files with 95 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.js
View file

@ -52,10 +52,10 @@ if (!fs.existsSync(path.join(cachePath, "emojis"))) {
app.use(pageUpdater.middleWare) 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}`,
); // );
}); // });

130
overcomplicatedStatuses.js
View file

@ -1,5 +1,5 @@
const path = require("path"), const path = require("path"),
fs = require("fs") fs = require("fs")
var constants = JSON.parse(fs.readFileSync(path.join(__dirname, 'constants.json'))) var constants = JSON.parse(fs.readFileSync(path.join(__dirname, 'constants.json')))
@ -33,7 +33,7 @@ function makeCompat(string) {
} }
function timeFormatter(seconds) { function timeFormatter(seconds) {
seconds = Math.ceil(seconds) seconds = Math.ceil(seconds / 1000)
var minutes = Math.floor(seconds / 60) var minutes = Math.floor(seconds / 60)
if (seconds % 60 < 10) { if (seconds % 60 < 10) {
@ -44,7 +44,7 @@ function timeFormatter(seconds) {
} }
function gameTimeFormatter(seconds) { function gameTimeFormatter(seconds) {
seconds = Math.ceil(seconds) seconds = Math.ceil(seconds / 1000)
var minutes = Math.ceil(seconds / 60) var minutes = Math.ceil(seconds / 60)
var hours = Math.floor(minutes / 60) var hours = Math.floor(minutes / 60)
if (seconds <= 60) { if (seconds <= 60) {
@ -87,63 +87,47 @@ module.exports = {
continue continue
} }
function get_img(activity, size = "large_image") { function get_img(activity, size = "large_image") {
return "https://cache.violets-purgatory.dev/cached/" + get_img_url(activity, size) 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 += ` var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000)
<br> Album: ${makeCompat(activity.assets.large_text || " ")} var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100
<br> Artist: ${makeCompat(activity.state || " ")} return `
`
} 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 += `
<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> <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)} <style>
</p> .lengthBar${index} > span {
</div> animation-name: songSlider${index};
<style> animation-duration: ${timeLeft}s;
animation-timing-function: linear;
}
.lengthBar${index} > span { @keyframes songSlider${index} {
animation-name: songSlider${index}; 0% {
animation-duration: ${timeLeft}s; width: ${currentPercent}%;
animation-timing-function: linear; }
} 100% {
width: 100%;
@keyframes songSlider${index} { }
0% { }
width: ${currentPercent}%; </style>
} `
100% { } else {
width: 100%; return `
<span class="timeEstimate" data-start="${activity.timestamps.start}">${gameTimeFormatter((Date.now() - activity.timestamps.start))}</span>
`
}
} }
} }
</style> }
`
} else if (activity.type == 0 && activity.assets) { if (activity.type != 4 && activity.assets) {
var time = activity.created_at var time = activity.created_at
if (activity.timestamps) { if (activity.timestamps) {
time = activity.timestamps.start time = activity.timestamps.start
@ -152,43 +136,19 @@ module.exports = {
activity.assets = { "large_text": " ", "small_text": " " } activity.assets = { "large_text": " ", "small_text": " " }
} }
function smch() { var text1 = onlyIfExists("<br><span style='font-size: 1.3rem;'>" + activity.song + "</span>", activity.song) || activity.details || activity.assets.large_text
if (get_img_url(activity, "small_image")) { var text2 = onlyIfExists("By: " + activity.artist, activity.artist) || activity.state || activity.assets.small_text
return `<img class="smallimg" src="${get_img(activity, "small_image")}" title="${activity.assets.small_text}">` var text3 = onlyIfExists("On: " + activity.album, activity.album)
}
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) {
var time = activity.created_at
if (activity.timestamps) {
time = activity.timestamps.start
}
if (!activity.assets) {
activity.assets = { "large_text": " ", "small_text": " " }
}
addedHTML += ` addedHTML += `
<div class="chip activity grid-child"> <div class="chip activity grid-child">
<img src="${get_img(activity)}" title="${activity.assets.large_text || activity.assets.small_text}"> <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> </p>
</div> </div>
` `

42
static/main.js
View file

@ -61,7 +61,32 @@ function lerp(a, b, t) {
return a * (1 - t) + 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 spinWaiting = true
setTimeout(() => { setTimeout(() => {
spinWaiting = false spinWaiting = false
@ -100,7 +125,18 @@ function spinLoop() {
spins = lerp(spins, Math.round(spins), 1 / spinSpeed * 3) spins = lerp(spins, Math.round(spins), 1 / spinSpeed * 3)
} }
$(".pfp").css("rotate", (spins * 360) + "deg") $(".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); }, 1/spinSpeed * 1000);
} }
@ -113,7 +149,7 @@ window.onload = function () {
pfp = $(".pfp") pfp = $(".pfp")
spinLoop() loop()
pfp.on("mousedown", () => { pfp.on("mousedown", () => {
// if (!spinWaiting) { // if (!spinWaiting) {

5
static/style.css
View file

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