I'm currently working a auto-updating timeelapsed spotify feature for my website but having some difficulties making it autoupdate the time elasped, and also clear upon new PRESENCE_UPDATE which is send by the lanyard socket.
What I have tried is:
function spotifyUpdate(spotify) {
const timeElapsed = currentTime - spotify.timestamps.start;
// I dont know how to implement the clearInterval or make it do as needed
setInterval(() => {
spotifyUpdate(spotify);
}, 1000);
return timeElapsed;
}
Full Code
var spotifyListening = document.getElementById("spotifyListening");
const lanyard = new WebSocket("wss://api.lanyard.rest/socket");
const currentTime = new Date().getTime();
var api = {};
var received = false;
lanyard.onclose = function () {
lanyard.send(
JSON.stringify({
op: 2,
d: {
subscribe_to_id: "937051733773938689",
},
})
);
};
lanyard.onopen = function () {
lanyard.send(
JSON.stringify({
op: 2,
d: {
subscribe_to_id: "937051733773938689",
},
})
);
};
function bday(d1, d2) {
//console.log(d2)
let date1 = new Date(d1);
let date2 = new Date(d2);
let yearsDiff = date2.getFullYear() - date1.getFullYear();
return yearsDiff;
}
function spotifyUpdate(spotify) {
const timeElapsed = currentTime - spotify.timestamps.start;
setInterval(() => {
spotifyUpdate(spotify);
}, 1000);
return timeElapsed;
}
setInterval(() => {
if (received) {
lanyard.send(
JSON.stringify({
op: 3,
})
);
}
}, 30000);
lanyard.onmessage = function (event) {
received = true;
api = JSON.parse(event.data);
switch (api.t) {
case "INIT_STATE":
case "PRESENCE_UPDATE":
update_presence();
break;
}
};
function update_presence() {
//console.log(api.d);
let status;
switch (api.d.discord_status) {
case "dnd":
status =
'<div style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: red;"></div>';
break;
case "idle":
status =
'<div style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: yellow;"></div>';
break;
case "online":
status =
'<div style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: green;"></div>';
break;
case "offline":
status =
'<div style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: grey;"></div>';
break;
}
let spotify = api.d.spotify;
if (api.d.listening_to_spotify == true) {
const songLength = spotify.timestamps.end - spotify.timestamps.start;
function msToMinSeconds(millis) {
var minutes = Math.floor(millis / 60000);
var seconds = Number(((millis % 60000) / 1000).toFixed(0));
return seconds == 60
? minutes + 1 + ":00"
: minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
let newData = spotifyUpdate(spotify)
var artist = `${spotify.artist.split(";")[0].split(",")[0]}`;
var song = `${spotify.song.split("(")[0]}`;
spotifyListening.innerHTML = `sh ./portfolio.sh<br><i class="fab fa-spotify spotify ml-1 mr-1"></i> Listening to <a href="https://open.spotify.com/track/${spotify.track_id}" target="_blank" class="hover:text-gray-500 text-d-yes" style="color: grey;">${song}</a> by ${artist}<br> ${msToMinSeconds(newData)} - ${msToMinSeconds(songLength)}<span id="terminal__prompt--cursor"></span>`;
}
}