feat: Add progress bar to spotify widget

blueprints/spotify.py

@@ -93,30 +93,7 @@ def callback():
 @spotify_bp.route("/currently-playing")
 def currently_playing():
     """Public endpoint showing your current track."""
-    token = refresh_access_token()
+    track = get_spotify_track()
-    if not token:
-        return json_response(request, {"error": "Failed to refresh access token"}, 500)
-
-    headers = {"Authorization": f"Bearer {token}"}
-    response = requests.get(SPOTIFY_CURRENTLY_PLAYING_URL, headers=headers)
-
-    if response.status_code == 204:
-        return json_response(request, {"message": "Nothing is currently playing."}, 200)
-    elif response.status_code != 200:
-        return json_response(request, {"error": "Spotify API error", "status": response.status_code}, response.status_code)
-
-    data = response.json()
-    if not data.get("item"):
-        return json_response(request, {"message": "Nothing is currently playing."}, 200)
-
-
-    track = {
-        "song_name": data["item"]["name"],
-        "artist": ", ".join([artist["name"] for artist in data["item"]["artists"]]),
-        "album_name": data["item"]["album"]["name"],
-        "album_art": data["item"]["album"]["images"][0]["url"],
-        "is_playing": data["is_playing"]
-    }
     return json_response(request, {"spotify":track}, 200)
 
 def get_spotify_track():
@@ -137,12 +114,13 @@ def get_spotify_track():
     if not data.get("item"):
         return {"error": "Nothing is currently playing."}
 
-
     track = {
         "song_name": data["item"]["name"],
         "artist": ", ".join([artist["name"] for artist in data["item"]["artists"]]),
         "album_name": data["item"]["album"]["name"],
         "album_art": data["item"]["album"]["images"][0]["url"],
-        "is_playing": data["is_playing"]
+        "is_playing": data["is_playing"],
+        "progress_ms": data.get("progress_ms",0),
+        "duration_ms": data["item"].get("duration_ms",1)
     }
     return track

curl.py

@@ -123,4 +123,9 @@ def curl_response(request):
     if os.path.exists(f"templates/{path}.html"):
         return render_template(f"{path}.html")
     
-    return error_response(request)
+    # Return curl error page
+    error = {
+        "code": 404,
+        "message": "The requested resource was not found on this server."
+    }
+    return render_template("error.ascii",header=get_header(),error=error), 404, {'Content-Type': 'text/plain; charset=utf-8'}

data/tools.json

@@ -23,6 +23,12 @@
         "url": "https://code.visualstudio.com/",
         "description": "Source-code editor developed by Microsoft"
     },
+    {
+        "name": "Vesktop",
+        "type": "Desktop Applications",
+        "url": "https://vesktop.dev/",
+        "description": "Vesktop is a customizable and privacy friendly Discord desktop app!"
+    },
     {
         "name": "Zellij",
         "type": "Terminal Tools",

templates/error.ascii

@@ -0,0 +1,9 @@
+{{header}}
+───────────────────────────────────────────────
+ ERROR: {{ error.code }} 
+────────────
+
+{{ error.message }}
+
+If you believe this is an error, please contact me via my socials listed at /contact
+

templates/index.html

@@ -294,7 +294,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
             <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM11 6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6V10C9 10.2652 9.10536 10.5196 9.29289 10.7071L12.1213 13.5355C12.5118 13.9261 13.145 13.9261 13.5355 13.5355C13.9261 13.145 13.9261 12.5118 13.5355 12.1213L11 9.58579V6Z" fill="currentColor"></path>
         </svg><span style="margin-left: 10px;font-family: 'Anonymous Pro', monospace;">{{time|safe}}</span></div><!-- Pop-out button for mobile -->
 <button id="spotify-toggle" style="
-    display: none;
+    display: block;
     position: fixed;
     bottom: 20px;
     right: 20px;
@@ -305,6 +305,8 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
     background: none;
     cursor: pointer;
     padding: 0;
+    transition: transform 0.5s ease;
+    transform: translateX(200%); /* start hidden off-screen *
 ">
 <img src="/assets/img/external/spotify.png" alt="Spotify" style="
     width: 100%;
@@ -360,6 +362,21 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
             overflow: hidden;
             text-overflow: ellipsis;
         "></div>
+        <!-- Progress Bar -->
+        <div style="
+            margin-top: 6px;
+            height: 4px;
+            background: #333;
+            border-radius: 2px;
+            overflow: hidden;
+        ">
+            <div id="spotify-progress" style="
+                width: 0%;
+                height: 100%;
+                background: #1DB954;
+                transition: width 1s linear;
+            "></div>
+        </div>
     </div>
 </div>
 
@@ -374,16 +391,17 @@ function isMobile() {
 function updateVisibility() {
     if(isMobile()){
         widget.style.transform = 'translateX(120%)'; // hidden off-screen
-        toggleBtn.style.display = 'block';
+        toggleBtn.style.transform = 'translateX(0)'; // visible
     } else {
         widget.style.transform = 'translateX(0)'; // visible
-        toggleBtn.style.display = 'none';
+        toggleBtn.style.transform = 'translateX(200%)'; // hidden off-screen
     }
 }
 
 // Toggle widget slide in/out on mobile
 toggleBtn.addEventListener('click', (e) => {
     widget.style.transform = 'translateX(0)'; // slide in
+    toggleBtn.style.transform = 'translateX(200%)'; // hide button
     e.stopPropagation();
 });
 
@@ -392,6 +410,7 @@ document.addEventListener('click', (e) => {
     if(isMobile()){
         if(!widget.contains(e.target) && e.target !== toggleBtn){
             widget.style.transform = 'translateX(120%)'; // slide out
+            toggleBtn.style.transform = 'translateX(0)'; // show button
         }
     }
 });
@@ -401,6 +420,15 @@ widget.addEventListener('click', (e) => {
     e.stopPropagation();
 });
 
+// Variable to track progress bar animation
+let progressInterval = null;
+let progressSpeed = 0;
+let lastUpdateTime = Date.now();
+let currentProgress = 0;
+let targetProgress = 0;
+let trackDuration = 0;
+let currentTrackId = null;
+
 // --- Spotify fetch ---
 async function updateSpotifyWidget() {
     try {
@@ -419,6 +447,11 @@ async function updateSpotifyWidget() {
             document.getElementById('spotify-song').textContent = 'Not Playing';
             document.getElementById('spotify-artist').textContent = '';
             document.getElementById('spotify-album').textContent = '';
+            document.getElementById('spotify-progress').style.width = '0%';
+            clearInterval(progressInterval);
+            progressInterval = null;
+            currentProgress = 0;
+            currentTrackId = null;
             return;
         }
 
@@ -429,13 +462,52 @@ async function updateSpotifyWidget() {
             firstLoad = true;
         }
 
+          // Check if track has changed (new song started)
+        const trackId = track.song_name + track.artist; // Simple track identifier
+        const isNewTrack = currentTrackId !== null && currentTrackId !== trackId;
+        
+        if (isNewTrack) {
+            // Reset progress bar instantly for new track
+            currentProgress = 0;
+            document.getElementById('spotify-progress').style.transition = 'none';
+            document.getElementById('spotify-progress').style.width = '0%';
+            // Force reflow to apply the instant reset
+            document.getElementById('spotify-progress').offsetHeight;
+            // Re-enable transition
+            document.getElementById('spotify-progress').style.transition = 'width 0.1s linear';
+        }
+        
+        currentTrackId = trackId;
+            
 
         document.getElementById('spotify-album-art').src = track.album_art;
         document.getElementById('spotify-song').textContent = track.song_name;
         document.getElementById('spotify-artist').textContent = track.artist;
         document.getElementById('spotify-album').textContent = track.album_name;
+        
+        // Update progress bar
+        if (track.is_playing) {
+            currentProgress = (track.progress_ms / track.duration_ms) * 100;
+            trackDuration = track.duration_ms;
+            lastUpdateTime = Date.now();
+            
+            document.getElementById('spotify-progress').style.width = currentProgress + '%';
+            
+            // Clear existing interval
+            if (progressInterval) {
+                clearInterval(progressInterval);
+            }
+            // Start interval to animate progress bar
+            progressInterval = setInterval(animateProgressBar, 100);
+        } else {
+            document.getElementById('spotify-progress').style.width = currentProgress + '%';
+            clearInterval(progressInterval);
+            progressInterval = null;
+        }
+        
+        // If first load and desktop, slide in the widget
         if (firstLoad) {
-            widget.style.transform = 'translateX(0)'; // slide in on first load            
+            updateVisibility();                   
         }
 
     } catch (err) {
@@ -443,6 +515,30 @@ async function updateSpotifyWidget() {
     }
 }
 
+// Animate progress bar
+function animateProgressBar() {
+    if (trackDuration === 0) return;
+    
+    const now = Date.now();
+    const elapsed = now - lastUpdateTime;
+    lastUpdateTime = now;
+    
+    // Calculate progress increment based on elapsed time
+    const progressIncrement = (elapsed / trackDuration) * 100;
+    currentProgress += progressIncrement;
+    
+    if (currentProgress >= 100) {
+        currentProgress = 100;
+        document.getElementById('spotify-progress').style.width = '100%';
+        clearInterval(progressInterval);
+        progressInterval = null;
+        // Refresh API when progress reaches 100%
+        setTimeout(updateSpotifyWidget, 500);
+    } else {
+        document.getElementById('spotify-progress').style.width = currentProgress + '%';
+    }
+}
+
 // Wait for Spotify API to have responded before initial display
 updateSpotifyWidget();
 

tests/api.hurl

@@ -6,10 +6,15 @@ GET http://127.0.0.1:5000/api/v1/ip
 HTTP 200
 [Asserts]
 jsonpath "$.ip" == "127.0.0.1"
+
 GET http://127.0.0.1:5000/api/v1/time
 HTTP 200
 GET http://127.0.0.1:5000/api/v1/timezone
 HTTP 200
+[Asserts]
+jsonpath "$.timezone" >= 10
+jsonpath "$.timezone" <= 12
+
 GET http://127.0.0.1:5000/api/v1/message
 HTTP 200
 GET http://127.0.0.1:5000/api/v1/project
@@ -18,3 +23,6 @@ GET http://127.0.0.1:5000/api/v1/tools
 HTTP 200
 [Asserts]
 jsonpath "$.tools" count > 5
+
+GET http://127.0.0.1:5000/api/v1/playing
+HTTP 200