How would I do a Time Elapsed Update and Clear on new PRESENCE_UPDATE

Viewed 16

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>`;
  }
}
0 Answers
Related