Speed up stream information loading/rendering

player.html

@@ -130,8 +130,7 @@
   <script>
     var UPDATE_INTERVAL = window.setInterval(renderStreamInfo, 10000)
 
-    function titleLine(data, width) {
+    function buildTitleLine(width, title) {
-      title = data["icestats"]["host"]
       width = width - 2 // Subtracting 2 here to account for "|"
       spacing = Math.floor((width - title.length)/2)
       line = "|" + " ".repeat(spacing) + title + " ".repeat(spacing)
@@ -190,48 +189,61 @@
 
     function buildDownloadLine(width, url) {
       line = "|   Download: "
-      line = line + "<a href='" + url + ".m3u" + "'>M3U</a>"
+      if (url != "") {
-      line = line + "/"
+        line = line + "<a href='" + url + ".m3u" + "'>M3U</a>"
-      line = line + "<a href='" + url + ".xspf" + "'>XSPF</a>"
+        line = line + "/"
-      line = line + " ".repeat(width - 24) + " |"
+        line = line + "<a href='" + url + ".xspf" + "'>XSPF</a>"
+        line = line + " ".repeat(width - 24) + " |"
+      } else {
+        line = line + " ".repeat(width) + " |"
+      }
       return line
     }
 
-    function renderStreamInfo() {
+    function updateStreamInfo() {
       var statusXMLHTTP = new XMLHttpRequest();
       statusXMLHTTP.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
           var streamData = JSON.parse(this.responseText);
-          width = 60
+          title = streamData["icestats"]["host"]
-          songNameLine = buildLine(width, fetchText(streamData, "title"), " Song Title: ")
+          songName = fetchText(streamData, "title")
-          listenersLine = buildLine(width, fetchText(streamData, "listeners"), "  Listeners: ")
+          listeners = fetchText(streamData, "listeners")
-          downloadLine = buildDownloadLine(width, fetchText(streamData, "streamurl"))
+          streamURL = fetchText(streamData, "streamurl")
-          var streamInfo = []
+          renderStreamInfo(title, songName, listeners, streamURL)
-          streamInfo.push("/" + "-".repeat(width - 2) + "\\")
-          streamInfo.push(titleLine(streamData, width))
-          if(songNameLine.match(/Song Title: \S/)) {
-            streamInfo.push("|" + " ".repeat(width - 2) + "|")
-            streamInfo.push(songNameLine)
-            streamInfo.push(listenersLine)
-            streamInfo.push(downloadLine)
-            streamInfo.push("|" + " ".repeat(width - 2) + "|")
-          }
-          streamInfo.push("\\" + "-".repeat(width - 2) + "/")
-          document.getElementById("stream-info").innerHTML = streamInfo.join("\n")
         }
       };
       statusXMLHTTP.open("GET", "/status-json.xsl", true);
       statusXMLHTTP.send();
     }
 
+    function renderStreamInfo(title="", songName="", listeners="", streamURL="") {
+      width = 60
+      titleLine = buildTitleLine(width, title)
+      songNameLine = buildLine(width, songName, " Song Title: ")
+      listenersLine = buildLine(width, listeners, "  Listeners: ")
+      downloadLine = buildDownloadLine(width, streamURL)
+
+      var streamLines = []
+      streamLines.push("/" + "-".repeat(width - 2) + "\\")
+      streamLines.push(titleLine)
+      streamLines.push("|" + " ".repeat(width - 2) + "|")
+      streamLines.push(songNameLine)
+      streamLines.push(listenersLine)
+      streamLines.push(downloadLine)
+      streamLines.push("|" + " ".repeat(width - 2) + "|")
+      streamLines.push("\\" + "-".repeat(width - 2) + "/")
+
+      document.getElementById("stream-info").innerHTML = streamLines.join("\n")
+    }
+
     function setUpdateInterval(interval) {
       window.clearInterval(UPDATE_INTERVAL)
-      UPDATE_INTERVAL = window.setInterval(renderStreamInfo, interval)
+      UPDATE_INTERVAL = window.setInterval(updateStreamInfo, interval)
-      renderStreamInfo()
+      updateStreamInfo()
     }
 
     window.onload = function(){
-      renderStreamInfo()
+      updateStreamInfo()
     }
 
     streamSelection.onchange = function() {
@@ -242,16 +254,19 @@
     }
 
     player.onwaiting = function() {
+      updateStreamInfo()
       setUpdateInterval(100)
       playButton.innerHTML = "Loading..."
       return;
     }
     player.onplaying = function() {
+      updateStreamInfo()
       setUpdateInterval(10000)
       playButton.innerHTML = "Pause"
       return;
     }
     player.onpause = function() {
+      updateStreamInfo()
       setUpdateInterval(60000)
       playButton.innerHTML = "Play"
       return;