added progress bar and patched some minor bugs

j0ell1 · Oct 13, 2024 · 9bd8992 · 9bd8992
1 parent ac80c1b
commit 9bd8992
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -49,7 +49,8 @@
   <div class="container">
     <img id="albumArt" src="" alt="Album Art" style="display:none;" />
     <div class="separator"></div>
-    <p id="activity">Activity: Loading...</p>
+    <p id="activity">loading...</p>
+    <progress id="progressBar" value="0" max="100" style="width: 100%;"></progress>
   </div>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>

diff --git a/lanyard.js b/lanyard.js
@@ -1,4 +1,6 @@
 let ws;
+let progressInterval; // To hold the interval reference for updating progress
+let songEndTimeout; // To reset the UI when the song ends
 
 function connectToLanyard() {
   ws = new WebSocket("wss://api.lanyard.rest/socket");
@@ -25,29 +27,59 @@ function connectToLanyard() {
       // Update HTML content dynamically
       const activityElement = document.getElementById("activity");
       const albumArtElement = document.getElementById("albumArt");
-      const separatorElement = document.querySelector(".separator"); // Select the separator element
+      const separatorElement = document.querySelector(".separator");
+      const progressBar = document.getElementById("progressBar");
+
+      // Clear any existing progress interval or song end timeout
+      if (progressInterval) clearInterval(progressInterval);
+      if (songEndTimeout) clearTimeout(songEndTimeout);
 
       // Update the activity text and display Spotify data
       if (presence.listening_to_spotify) {
         const spotifyData = presence.spotify;
         activityElement.textContent = `${spotifyData.song} - ${spotifyData.artist}`;
 
         // Load album art with CORS
-        albumArtElement.crossOrigin = "Anonymous"; // Set CORS attribute
-        albumArtElement.src = spotifyData.album_art_url; // Update album art URL
-        albumArtElement.style.display = "block"; // Show the album art
-        separatorElement.style.display = "block"; // Show the separator when a song is playing
+        albumArtElement.crossOrigin = "Anonymous";
+        albumArtElement.src = spotifyData.album_art_url;
+        albumArtElement.style.display = "block";
+        separatorElement.style.display = "block";
+        progressBar.style.display = "block";
+
+        // Get the start and end timestamps of the song
+        const startTime = spotifyData.timestamps.start;
+        const endTime = spotifyData.timestamps.end;
+        const duration = endTime - startTime;
+
+        // Update the progress bar in real time
+        const updateProgress = () => {
+          const currentTime = Date.now();
+          const elapsed = currentTime - startTime;
+          const progress = (elapsed / duration) * 100;
+          progressBar.value = progress;
+
+          if (progress >= 100) clearInterval(progressInterval); // Stop updating when the song is over
+        };
+
+        // Update the progress bar every second
+        updateProgress();
+        progressInterval = setInterval(updateProgress, 1000);
 
-        // Wait for the album art to fully load before extracting the colors
+        // Set a timeout to reset the UI when the song ends
+        songEndTimeout = setTimeout(() => {
+          resetSongDisplay();
+        }, duration); // Reset after the song's duration
+
+        // Extract colors and set gradient background
         albumArtElement.onload = function () {
           try {
             const colorThief = new ColorThief();
             if (albumArtElement.complete && albumArtElement.naturalHeight !== 0) {
               const dominantColor = colorThief.getColor(albumArtElement);
-              const palette = colorThief.getPalette(albumArtElement, 2);
+              const palette = colorThief.getPalette(albumArtElement, 3);
 
               const gradient = `linear-gradient(135deg, rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]}), rgb(${palette[1][0]}, ${palette[1][1]}, ${palette[1][2]}))`;
-              document.body.style.background = gradient; // Set the new gradient background
+              document.body.style.background = gradient;
             } else {
               console.error("Image not loaded properly.");
             }
@@ -56,20 +88,29 @@ function connectToLanyard() {
           }
         };
 
-        // Handle image load errors
-        albumArtElement.onerror = function () {
-          console.error("Failed to load the album art image.");
-        };
       } else {
-        activityElement.textContent = "offline :(";
-        albumArtElement.style.display = "none"; // Hide the album art if not listening to Spotify
-        separatorElement.style.display = "none"; // Hide the separator when no song is playing
+        // Reset if no Spotify activity
+        resetSongDisplay();
       }
     }
   };
 }
 
+// Function to reset the song display (called when the song ends)
+function resetSongDisplay() {
+  const activityElement = document.getElementById("activity");
+  const albumArtElement = document.getElementById("albumArt");
+  const separatorElement = document.querySelector(".separator");
+  const progressBar = document.getElementById("progressBar");
+
+  activityElement.textContent = "offline :(";
+  albumArtElement.style.display = "none";
+  separatorElement.style.display = "none";
+  progressBar.style.display = "none";
+  progressBar.value = 0; // Reset progress bar
+}
+
 // Start the WebSocket connection after the DOM is fully loaded
 document.addEventListener("DOMContentLoaded", () => {
   connectToLanyard();
-});
+});