auto reload on failure

code

@@ -1 +1 @@
-AQDU_0NUgm9-EMYMDBYUTnBApWyYO6m4EDUExbHzjM_CcVkoGptsE69uePQ7ejw5NooRTCpQqIU7ZfOTfE5Nx8zj6amQBFRkgv7vMa5ViqCbH_hqos--D6mj-eG3jqW-sf-Oyq0vmPUaam6R0fB--ghWzM8EG8SRVQBGTnEN-OLf1PBX5I1sOS22GXrMud5BcFziAiYQxHn_GcnPXEyXigkHAsk60PFiWDUwW6fLdUKW2FtyJnnYH01al28eex1QEeqr2gg8e5ht9XGKfQej0ciFM62ESwIbpDZDi6bWdSk
+AQCZgUjpd41T5OxjgCR08o-WIKMoJVOkKQnnXWWyCMPfr9AF8OOauNn9wYPX4sFKpWxINeHmeimsNw7c2e1HVCu038drk_o9K-0rdgtG7QlQc02ENsbkJC5tjr3M40-oxdmoz203NA_qj1J_DyQBx6TA-FbHS8WXiDTIn9pB3IpVNCSCf8kubjn6MOvDU8w6uXyjwCDLUBN5ptfARe4yFEXKNlgxgQcbAsj0DPpS4owhvYbo-tAwINmyJPuO61-TUbQ6U5qWLN7A1UkhbAkX0kJfFd3WnCsGiDpQmgLmmb8

spotifycontroller.py

@@ -89,10 +89,13 @@ def callback():
 def appdata():
     global access_token
     stime = time.time()
+    try:
         user_headers = {
             "Authorization": "Bearer " + access_token,
             "Content-Type": "application/json"
         }
+    except NameError:
+        return { 'reload': True }
 
     currently_playing = requests.get("https://api.spotify.com/v1/me/player/currently-playing", headers=user_headers)
     if currently_playing.content:
@@ -101,7 +104,6 @@ def appdata():
                 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'):
-            
             print("FULL" + str(time.time() - stime))
             return { 'id': currently_playing.json()["item"]["id"],
                     'name': currently_playing.json()["item"]["name"],

templates/webapp.html

@@ -5,12 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SpotifyJS</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
 <style>
     .progress-container {
         width: 100%;
         background-color: #ddd;
     }
-
     .progress-bar {
         width: 0%;
         height: 4px;
@@ -51,6 +51,7 @@
     .buttons {
         display: initial;
         padding-top: 10%;
+        /* mix-blend-mode: difference; */
     }
     .total {
         display: flex;
@@ -86,7 +87,7 @@
         </div>
         </div>
     <script>
-        let id, is_playing, is_liked, duration_ms, canvas_url, lyrics;
+        let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms;
         // Function to update the values every second
         function updateValues() {
             $.ajax({
@@ -117,6 +118,12 @@
                     if (data['duration_ms'] !== undefined) {
                         duration_ms = data['duration_ms'];
                     }
+                    if (data['progress_ms'] !== undefined) {
+                        progress_ms = data['progress_ms'];
+                    }
+                    if (data['reload'] == true) {
+                        location.reload();
+                    }
 
                     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');
@@ -141,6 +148,7 @@
                         document.getElementById('canvas_url').style.display = "none";
                         document.getElementById('image').style.display = "";
                     }
+                    getColors(data['image'])
                     getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics'])
                 }
             });
@@ -191,6 +199,24 @@
                 }
             }
         }
+        function getColors(image) {
+            const colorThief = new ColorThief();
+            const img = document.getElementById('image');
+            img.crossOrigin = 'Anonymous';
+
+            if (img.complete) {
+                const color = colorThief.getColor(img);
+                document.body.style.backgroundColor = 'rgb(' + color + ')';
+            } else {
+                img.addEventListener('load', function() {
+                    const color = colorThief.getColor(img);
+                    document.body.style.backgroundColor = 'rgb(' + color + ')';
+                });
+            }
+        }
+        // function getLuminance() {
+
+        // }
         // BUTTONS
         $('#playpause').click(function() {
             $.ajax({
@@ -222,11 +248,12 @@
             });
         });
         $('#previous').click(function() {
+            console.log(progress_ms)
             $.ajax({
                 type: 'POST',
                 url: '/control',
                 // 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'},
+                data: {command: progress_ms > 5000 ? 'restart' : 'previous'},
                 success: function(response) {
                 }
             });