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)
|
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}`,
|
||||||
);
|
// );
|
||||||
});
|
// });
|
|
@ -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,46 +87,20 @@ 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 += `
|
|
||||||
<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 timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000)
|
||||||
var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100
|
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>
|
<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>
|
<style>
|
||||||
|
|
||||||
.lengthBar${index} > span {
|
.lengthBar${index} > span {
|
||||||
animation-name: songSlider${index};
|
animation-name: songSlider${index};
|
||||||
animation-duration: ${timeLeft}s;
|
animation-duration: ${timeLeft}s;
|
||||||
|
@ -143,36 +117,17 @@ module.exports = {
|
||||||
}
|
}
|
||||||
</style>
|
</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
|
var time = activity.created_at
|
||||||
if (activity.timestamps) {
|
if (activity.timestamps) {
|
||||||
time = activity.timestamps.start
|
time = activity.timestamps.start
|
||||||
|
@ -181,14 +136,19 @@ module.exports = {
|
||||||
activity.assets = { "large_text": " ", "small_text": " " }
|
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 += `
|
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>
|
||||||
`
|
`
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue