introduced icons to replace buttons, loading indicators, cut down unessesary data traffic

code

@@ -1 +1 @@
-AQA8p4IgPYH0j9TIUFR4m5zAKPgvPzhvW07iCLAUYq-7sWyhxTTDRiWZaocH01HomhYoGZnVarc2SGUH4Buu9ox22lQ0e7z4AnglirOqF8I24v4zZveuiOPuLjet4YFY9rCY9TdtGmaUE1Y710tdgF7_ZBT4V2fuFSM0i9qXML37rZBS_DVmWlbVyLi-RKOeT-EIktYsTNfV45ajoe-GCB7eL5eFit8nGGjBokIXM0w14m004GtnvjfcazBaJqS6XlqU80VB82OTQauN7fyckTEYMUalhfM20ZE2p8D7qCg
+AQBtjZ5AgmaU073h9RsK82t8w2XMeQ_HTSbqbAyd3PNVQe2YNnkM883WOcpbDfKt4ll2xu0LoUWEMX5sEUmtPSWCgFs1k_3GFUxtUJV8VslZUvgIYBUSSbqNWrxZqRtGJ-cL_Rdq6gbBKttHkkMdnZVeO2jUtJM2zCHSYEW49o-aoRpcMkzPm66_H88O9S8hVEegS7nG4uP0AUYwe0EiW6YMvFkCVG6XJ7AJpcO97U0tP0PhRbBrx1Y5lRAequ5YaY-BC4FFHwBcA8XePKvAnuDku0sbRd1vbw6dahcRdco

spotifycontroller.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template, request, url_for, redirect
+from flask import Flask, render_template, request, url_for, redirect, send_from_directory
 import time
 import requests
 from urllib.parse import urlencode
@@ -28,11 +28,11 @@ token_headers = {
     "Content-Type": "application/x-www-form-urlencoded"
 }
 
-song_info = {
-    'name': "None",
-    'artist': "None",
-    'album': "None",
-    'image': "None"
+data = {
+    'name': "Loading...",
+    'artist': "",
+    'album': "",
+    'image': "https://cdn.pixabay.com/animation/2023/05/02/04/29/04-29-03-511_512.gif"
 }
 
 @app.route('/')
@@ -75,7 +75,7 @@ def webapp():
         return redirect(url_for('index'))
     access_token = access_object.json()["access_token"]
 
-    return render_template('webapp.html', song_info=song_info)
+    return render_template('webapp.html', data=data)
 
 @app.route('/callback', methods=['GET'])
 def callback():
@@ -94,9 +94,11 @@ def appdata():
     }
 
     currently_playing = requests.get("https://api.spotify.com/v1/me/player/currently-playing", headers=user_headers)
-    
-
-    if currently_playing.json()["is_playing"] == True:
+    if currently_playing.content:
+        if currently_playing.json()["is_playing"] is True and currently_playing.json()["item"]["id"] == request.args.get('id'):
+                return { 'progress_ms': currently_playing.json()["progress_ms"]
+                        }
+        elif currently_playing.json()["is_playing"] is True and currently_playing.json()["item"]["id"] != request.args.get('id'):
             return { 'id': currently_playing.json()["item"]["id"],
                     'name': currently_playing.json()["item"]["name"],
                     'artist': currently_playing.json()["item"]["artists"][0]["name"],
@@ -107,17 +109,18 @@ def appdata():
                     'duration_ms': currently_playing.json()["item"]["duration_ms"],
                     'is_liked': requests.get("https://api.spotify.com/v1/me/tracks/contains?ids=" + currently_playing.json()["item"]["id"], headers=user_headers).json()[0]
                     }
-    elif currently_playing.json()["is_playing"] == False:
+        elif currently_playing.json()["is_playing"] is False:
             return { 'name': "Not Playing",
-                'artist': "Not Playing",
-                'album': "Not Playing",
-                'image': "Not Playing"
+                    'is_playing': False
                     }
         else:
             return { 'name': "Error",
-                'artist': "Error",  
-                'album': "Error",
-                'image': "Error"
+                    'artist': "Error"
+                    }
+    else:
+        return { 'name': "Not Playing",
+                'image': "https://cdn.psychologytoday.com/sites/default/files/styles/article-inline-half-caption/public/field_blog_entry_images/2022-02/pause.png",
+                'is_playing': False
                 }
 
 @app.route('/control', methods=['POST'])
@@ -130,8 +133,10 @@ def control():
 
     if request.form.get('command') == "pause":
         requests.put("https://api.spotify.com/v1/me/player/pause", headers=user_headers)
+        return { 'is_playing': False }
     elif request.form.get('command') == "play":
         requests.put("https://api.spotify.com/v1/me/player/play", headers=user_headers)
+        return { 'is_playing': True }
     elif request.form.get('command') == "next":
         requests.post("https://api.spotify.com/v1/me/player/next", headers=user_headers)
     elif request.form.get('command') == "previous":
@@ -140,11 +145,19 @@ def control():
         requests.put("https://api.spotify.com/v1/me/player/seek?position_ms=0", headers=user_headers)
     elif request.form.get('command') == "like":
         requests.put("https://api.spotify.com/v1/me/tracks?ids=" + request.form.get('id'), headers=user_headers)
+        return { 'is_liked': True }
     elif request.form.get('command') == "unlike":
         requests.delete("https://api.spotify.com/v1/me/tracks?ids=" + request.form.get('id'), headers=user_headers)
+        return { 'is_liked': False }
 
     print(request.form.get('command'))
     return ('', 204)
 
+@app.route('/icons/<path:filename>')
+def icons(filename):
+    return send_from_directory('icons', filename)
+
+
+
 if __name__ == '__main__':
     app.run(port=8888, debug=True)

templates/webapp.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Updating Value</title>
+    <title>SpotifyJS</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <style>
     .progress-container {
@@ -20,6 +20,7 @@
         color: white;
     }
     .song-text {
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         font-size: 20px;
         font-weight: bold;
         text-align: center;
@@ -27,6 +28,7 @@
         padding-right: 20px;
     }
     .artist-text {
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         font-size: 15px;
         text-align: center;
         padding-left: 20px;
@@ -42,30 +44,31 @@
 </style>
 </head>
 <body>
-    <img id="image" src="{{ song_info['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 300px; max-height: 300px;">
+    <!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
+    <img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 300px; max-height: 300px;">
     <div class="middle">
-        <p id="name" class="song-text">{{ song_info['name'] }}</p>
-        <p id="artist" class="artist-text">{{ song_info['artist'] }}</p>
-        <!-- <p id="album" class="song-info">{{ song_info['album'] }}</p>
-        <p id="progress_ms">{{ song_info['progress_ms'] }}</p>
-        <p id="duration_ms">{{ song_info['duration_ms'] }}</p> -->
+        <p id="name" class="song-text">{{ data['name'] }}</p>
+        <p id="artist" class="artist-text">{{ data['artist'] }}</p>
+        <!-- <p id="album" class="song-info">{{ data['album'] }}</p>
+        <p id="progress_ms">{{ data['progress_ms'] }}</p>
+        <p id="duration_ms">{{ data['duration_ms'] }}</p> -->
         <p>
-        <button id="playpause">Play/Pause</button>
-        <button id="previous">Previous</button>
-        <button id="next">Next</button>
-        <button id="like">Like/Unlike</button>
+        <a><img id="previous" src="http://127.0.0.1:8888/icons/previous-black.png" style="width:96px;height:96px;"></a>
+        <a><img id="playpause" src="http://127.0.0.1:8888/icons/play-black.png" style="width:96px;height:96px;"></a>
+        <a><img id="next" src="http://127.0.0.1:8888/icons/next-black.png" style="width:96px;height:96px;"></a>
+        <a><img id="like" src="http://127.0.0.1:8888/icons/heart-black.png" style="width:96px;height:96px;"></a>
         </p>
     </div>
     <div class="progress-container">
         <div id="progress_bar" class="progress-bar"></div>
     </div>
     <script>
-        var is_playing = false
-        var id = ''
+        let id, is_playing, is_liked, duration_ms;
         // Function to update the values every second
         function updateValues() {
             $.ajax({
                 url: '/appdata',
+                data: { id: id }, // Add the 'id' variable to the data object
                 success: function(data) {
                     $('#name').text(data['name']);
                     $('#artist').text(data['artist']);
@@ -80,26 +83,35 @@
                     // $('#duration_sec').text(Math.floor(data['duration_ms'] / 1000) % 60);
                     $('#is_liked').text(data['is_liked']);
 
+                    if (data['id'] !== undefined) {
                         id = data['id'];
+                    }
+                    if (data['is_playing'] !== undefined) {
                         is_playing = data['is_playing'];
+                    }
+                    if (data['is_liked'] !== undefined) {
                         is_liked = data['is_liked'];
+                    }
+                    if (data['duration_ms'] !== undefined) {
+                        duration_ms = data['duration_ms'];
+                    }
 
-                    document.getElementById('progress_bar').style.width = (data['progress_ms'] / data['duration_ms']) * 100 + '%';
+                    document.getElementById('progress_bar').style.width = (data['progress_ms'] / duration_ms) * 100 + '%';
                     // document.getElementById('progress_bar').textContent = (Math.floor(data['progress_ms'] / (1000 * 60)) % 60) + ':' + (Math.floor((data['progress_ms'] / 1000) % 60)).toString().padStart(2, '0');
 
                     if (is_playing) {
                     // Change button to play icon
-                        document.getElementById('playpause').textContent = 'Pause';
+                        document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/pause-black.png';
                     } else {
                     // Change button to pause icon
-                        document.getElementById('playpause').textContent = 'Play';
+                        document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/play-black.png';
                     }
                     if (is_liked) {
                         // Change button to unlike text
-                        document.getElementById('like').textContent = 'Unlike';
+                        document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-on-black.png';
                     } else {
                         // Change button to like text
-                        document.getElementById('like').textContent = 'Like';
+                        document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-black.png';
                     }
                 }
             });
@@ -114,6 +126,8 @@
                 url: '/control',
                 data: {command: (is_playing ? 'pause' : 'play')}, // Predefined command
                 success: function(response) {
+                    $('#is_playing').text(response['is_playing']);
+                    is_playing = response['is_playing'];
                 }
             });
         });
@@ -139,7 +153,8 @@
             $.ajax({
                 type: 'POST',
                 url: '/control',
-                data: {command: (progress_ms < 5000) ? 'restart' : 'previous'},
+                // data: {command: (data['progress_ms'] < 5000) ? 'restart' : 'previous'}, // FIX THIS: IT DOESNT SEE THE DATA VARIABLE SO CANT CHECK THE PROGRESS MS
+                data: {command: (1 == 1) ? 'restart' : 'previous'},
                 success: function(response) {
                 }
             });
@@ -150,6 +165,14 @@
                 url: '/control',
                 data: {command: (is_liked ? 'unlike' : 'like'), id: id},
                 success: function(response) {
+                    // if (is_liked) {
+                    //     is_liked = false;
+                    // }
+                    // else {
+                    //     is_liked = true;
+                    // }
+                    $('#is_liked').text(response['is_liked']);
+                    is_liked = response['is_liked'];
                 }
             });
         });