New activity UI
This commit is contained in:
parent
498c7ae1d9
commit
97c2fc6c9f
4 changed files with 95 additions and 98 deletions
14
index.js
14
index.js
|
|
@ -52,10 +52,10 @@ if (!fs.existsSync(path.join(cachePath, "emojis"))) {
|
|||
|
||||
app.use(pageUpdater.middleWare)
|
||||
|
||||
process.on('uncaughtException', (err, origin) => {
|
||||
fs.writeSync(
|
||||
process.stderr.fd,
|
||||
`Caught exception: ${err}\n` +
|
||||
`Exception origin: ${origin}`,
|
||||
);
|
||||
});
|
||||
// process.on('uncaughtException', (err, origin) => {
|
||||
// fs.writeSync(
|
||||
// process.stderr.fd,
|
||||
// `Caught exception: ${err}\n` +
|
||||
// `Exception origin: ${origin}`,
|
||||
// );
|
||||
// });
|
||||
|
|
@ -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,63 +87,47 @@ module.exports = {
|
|||
continue
|
||||
}
|
||||
|
||||
|
||||
function get_img(activity, size = "large_image") {
|
||||
return "https://cache.violets-purgatory.dev/cached/" + get_img_url(activity, size)
|
||||
}
|
||||
|
||||
function songStats() {
|
||||
var html = ``
|
||||
|
||||
if (activity.assets && activity.assets.large_text != activity.details && activity.details.length + activity.state.length + activity.assets.large_text.length < 100) {
|
||||
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 += `
|
||||
<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()}
|
||||
function activityTime() {
|
||||
if (activity.timestamps) {
|
||||
if (activity.timestamps.start) {
|
||||
if (activity.timestamps.end) {
|
||||
var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000)
|
||||
var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100
|
||||
return `
|
||||
<br>
|
||||
<span class="lengthBar lengthBar${index}"><span></span></span>
|
||||
${timeFormatter((activity.timestamps.end - activity.timestamps.start) / 1000)}
|
||||
</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%;
|
||||
<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>
|
||||
<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 {
|
||||
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
|
||||
if (activity.timestamps) {
|
||||
time = activity.timestamps.start
|
||||
|
|
@ -152,43 +136,19 @@ module.exports = {
|
|||
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) {
|
||||
var time = activity.created_at
|
||||
if (activity.timestamps) {
|
||||
time = activity.timestamps.start
|
||||
}
|
||||
if (!activity.assets) {
|
||||
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>
|
||||
<span style="color: rgb(225, 200, 255);">${activity.name}</span>
|
||||
<br> ${(activity.details || activity.assets.large_text || " ")}
|
||||
<br> ${(activity.state || activity.assets.small_text || " ")}
|
||||
<br> ${gameTimeFormatter((Date.now() - time) / 1000)}
|
||||
<p style="text-align: left; font-size: 1.15rem;">
|
||||
<span style="font-size: 1.6rem;">${activity.name}</span>
|
||||
${onlyIfExists("<br>" + text1, text1)}
|
||||
${onlyIfExists("<br>" + text2, text2)}
|
||||
${onlyIfExists("<br>" + text3, text3)}
|
||||
${onlyIfExists("<br>" + activityTime(), activityTime())}
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue