Fix flickering on reaload spotify page

Add the first api call to the template of the page, so it is in one file
WISVCH · Jan 21, 2024 · f93310f · f93310f
1 parent 7f0e406
commit f93310f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/narrowcast_content/spotify_now_playing/__init__.py b/narrowcast_content/spotify_now_playing/__init__.py
@@ -36,7 +36,7 @@ def index():
     """
     Render the player page.
     """
-    return render_template("spotify_now_playing/index.jinja2")
+    return render_template("spotify_now_playing/index.jinja2", initial_data=currently_playing())
 
 
 @spotify_now_playing.route("/currently_playing")

diff --git a/narrowcast_content/spotify_now_playing/static/js/index.js b/narrowcast_content/spotify_now_playing/static/js/index.js
@@ -1,36 +1,38 @@
+function update_player(data) {
+    if (data.authorized === false) {
+        document.querySelector('.song').style.display = 'none';
+        document.querySelector('.unauthorized').style.display = 'grid';
+        document.querySelector('.not_playing').style.display = 'none';
+    } else if (data.anything_playing === false) {
+        document.querySelector('.song').style.display = 'none';
+        document.querySelector('.unauthorized').style.display = 'none';
+        document.querySelector('.not_playing').style.display = 'grid';
+    } else {
+        document.querySelector('.song').style.display = 'grid';
+        document.querySelector('.unauthorized').style.display = 'none';
+        document.querySelector('.not_playing').style.display = 'none';
+        document.querySelector('.title').textContent = data.title;
+        document.querySelector('.artist').textContent = data.artist;
+        document.querySelector('.album_cover img').src = data["album_cover"];
+        if (data.is_playing === true) {
+            document.querySelector('.playing_symbol').classList.add('playing');
+        } else {
+            document.querySelector('.playing_symbol').classList.remove('playing');
+        }
+    }
+}
+
 // Function to update the now playing information
 function updateNowPlaying() {
     fetch('currently_playing',)
         .then(response => response.json())
         .then(data => {
-            if (data.authorized === false) {
-                document.querySelector('.song').style.display = 'none';
-                document.querySelector('.unauthorized').style.display = 'grid';
-                document.querySelector('.not_playing').style.display = 'none';
-            } else if (data.anything_playing === false) {
-                document.querySelector('.song').style.display = 'none';
-                document.querySelector('.unauthorized').style.display = 'none';
-                document.querySelector('.not_playing').style.display = 'grid';
-            } else {
-                document.querySelector('.song').style.display = 'grid';
-                document.querySelector('.unauthorized').style.display = 'none';
-                document.querySelector('.not_playing').style.display = 'none';
-                document.querySelector('.title').textContent = data.title;
-                document.querySelector('.artist').textContent = data.artist;
-                document.querySelector('.album_cover img').src = data["album_cover"];
-                if (data.is_playing === true){
-                    document.querySelector('.playing_symbol').classList.add('playing');
-                } else {
-                    document.querySelector('.playing_symbol').classList.remove('playing');
-                }
-            }
-
+            update_player(data);
         })
         .catch(error => console.error('Error fetching data:', error));
 }
 
 // Call updateNowPlaying every 5 seconds
 setInterval(updateNowPlaying, 5000);
 
-// Initial call to populate the information
-updateNowPlaying();
+update_player(initial_data)
diff --git a/narrowcast_content/spotify_now_playing/templates/spotify_now_playing/index.jinja2 b/narrowcast_content/spotify_now_playing/templates/spotify_now_playing/index.jinja2
@@ -8,6 +8,10 @@
     <link rel="stylesheet" href="{{ url_for('spotify_now_playing.static', filename='css/style.css') }}">
 </head>
 <body>
+<script type="text/javascript">
+    const initial_data = {{ initial_data|tojson|safe }}
+</script>
+
 <div class="container song">
     <div class="album_cover main_image">
         <img alt="album cover">
@@ -20,13 +24,13 @@
     <div class="title main_text">Title</div>
     <div class="artist sub_text">Artist</div>
 </div>
-<div class="container unauthorized">
+<div class="container unauthorized" style="display: none">
     <div class="spotify_logo main_image">
         <img src="{{ url_for('spotify_now_playing.static', filename='spotify_icon.svg') }}">
     </div>
     <div class="unauthorized_text main_text">Unauthorized</div>
 </div>
-<div class="container not_playing">
+<div class="container not_playing" style="display: none">
     <div class="spotify_logo main_image">
         <img src="{{ url_for('spotify_now_playing.static', filename='spotify_icon.svg') }}">
     </div>