diff --git a/narrowcast_content/spotify_now_playing/__init__.py b/narrowcast_content/spotify_now_playing/__init__.py index 7aefd17..4ee5bd1 100644 --- 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 index b2215d4..b4b1c17 100644 --- a/narrowcast_content/spotify_now_playing/static/js/index.js +++ b/narrowcast_content/spotify_now_playing/static/js/index.js @@ -1,30 +1,33 @@ +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)); } @@ -32,5 +35,4 @@ function updateNowPlaying() { // Call updateNowPlaying every 5 seconds setInterval(updateNowPlaying, 5000); -// Initial call to populate the information -updateNowPlaying(); \ No newline at end of file +update_player(initial_data) \ No newline at end of file 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 index 7e513ce..440af99 100644 --- 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 @@ + +
album cover @@ -20,13 +24,13 @@
Title
Artist
-
+ -
+