Improve "now playing" page

public/css/styles.css

@@ -20,17 +20,33 @@
 }
 
 .now-playing {
+    padding: 0;
+    margin: 0;
     background-color: black;
     color: white;
 }
 .now-playing-cover {
-    padding: 2em;
+    padding: 1em;
+}
+.now-playing-loading,
+.now-playing-nothing {
+    padding-top: 2em;
+    padding-bottom: 2em;
+    text-align: center;
+    font-size: 300%;
+}
+.now-playing-data {
+    padding: 1em 0.5em;
 }
 .now-playing-title {
-    padding-top: 4em;
-    font-size: 400%;
+    padding-top: 1em;
+    font-size: 300%;
     font-weight: bolder;
+    line-height: 1.2em;
 }
 .now-playing-artists {
+    padding-top: 0.5em;
+    padding-bottom: 1em;
     font-size: 200%;
+    line-height: 1.2em;
 }

public/js/now-playing.js

+var lastFetchedNowPlayingData = "";
+
 function updateNowPlaying() {
     var apiUrl = "now-playing?api";
 
@@ -6,9 +8,11 @@ function updateNowPlaying() {
             return response.json();
         })
         .then(function (data) {
-            var nowPlayingBlock = document.getElementById("now-playing");
-            newContent = buildNowPlayingBlock(data);
-            nowPlayingBlock.innerHTML = newContent;
+            if (hasChanged(data)) {
+                var nowPlayingBlock = document.getElementById("now-playing");
+                newContent = buildNowPlayingBlock(data);
+                nowPlayingBlock.innerHTML = newContent;
+            }
         })
         .catch(function (err) {
             console.warn("Something went wrong.", err);
@@ -19,16 +23,30 @@ function updateNowPlaying() {
         });
 }
 
+function hasChanged(data) {
+    if (data && data["playing"] && data["playing"]["item"]) {
+        var dataAsString = JSON.stringify(data["playing"]["item"]);
+        if (dataAsString !== lastFetchedNowPlayingData) {
+            lastFetchedNowPlayingData = dataAsString;
+            return true;
+        }
+    }
+
+    return false;
+}
+
 function buildNowPlayingBlock(apiResponse) {
     var html = `
   <div class="container-fluid now-playing">
     <div class="row">
-      <div class="col">
+      <div class="col-12 col-md-6">
         <div class="now-playing-cover"><img src="COVER_URL" class="img-fluid"></div>
       </div>
-      <div class="col">
-        <div class="now-playing-title">TITLE</div>
-        <div class="now-playing-artists">ARTISTS</div>
+      <div class="col-12 col-md-6">
+        <div class="now-playing-data">
+          <div class="now-playing-title">TITLE</div>
+          <div class="now-playing-artists">ARTISTS</div>
+        </div>
       </div>
     </div>
   </div>`;
@@ -36,7 +54,15 @@ function buildNowPlayingBlock(apiResponse) {
     var nowPlayingData = apiResponse["playing"];
 
     if (!nowPlayingData) {
-        return '<div class="alert alert-info">No currently playing track...</div>';
+        return `
+        <div class="container-fluid now-playing">
+          <div class="row">
+            <div class="col">
+              <div class="now-playing-nothing">🔇</div>
+            </div>
+          </div>
+        </div>
+      `;
     }
 
     var item = nowPlayingData["item"];
@@ -49,9 +75,10 @@ function buildNowPlayingBlock(apiResponse) {
 
     html = html.replace("TITLE", trackName);
     html = html.replace("ARTISTS", artistNames);
-    html = html.replace("COVER_URL",  coverUrl);
+    html = html.replace("COVER_URL", coverUrl);
 
     return html;
 }
 
+updateNowPlaying();
 setInterval(updateNowPlaying, 2000);

template.php

@@ -232,7 +232,11 @@
 
     <?php if ($templateData['page'] === 'now-playing') { ?>
       <div id="now-playing">
-        ⏳
+        <div class="container-fluid now-playing">
+          <div class="col">
+            <div class="now-playing-loading">⏳</div>
+          </div>
+        </div>
       </div>
       <script src="js/now-playing.js"></script>
     <?php } ?>