Fixed a bug where nothing would happen after playlist playback, added download progress bar

2 files changed, 20 insertions, 9 deletions

diff --git a/client/index.html b/client/index.html
index 661f081..3f5c809 100644
--- a/client/index.html
+++ b/client/index.html
@@ -24,8 +24,13 @@
                 in sync!
             </p>
             <div style="display: flex; flex-direction: row; align-items: center; gap: 3px;">
+                <p>Download progress:</p>
+                <progress class="dl-progress" max="100" style="width: 100%;"></progress>
+            </div>
+            <div style="display: flex; flex-direction: row; align-items: center; gap: 3px;">
                 <button onclick="sync_radio()">Sync!</button>
-                <progress style="width: 100%;"></progress>
+                        <p>Live progress:</p>
+                        <progress class="play-progress" style="width: 100%;"></progress>
             </div>
             <div style="display:flex; flex-direction:row; align-items: center; gap: 3px; justify-content: space-around;">
                 <p>Listening at:</p>
@@ -36,9 +41,7 @@
                 <pre class="show-duration"></pre>
             </div>
             <div class="radio-player">
-                <audio preload="auto" controls muted style="width: 100%;">
-                    <!--    <source src=""/> -->
-                </audio>
+                <audio preload="auto" controls muted style="width: 100%;"></audio>
             </div>
         </div>
         <div>
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 59e49ec..3e1e03b 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -50,11 +50,12 @@ var artistP = document.querySelector('.artist');
 var titleP = document.querySelector('.title');
 var radioPlayerDiv = document.querySelector('.radio-player');
 var youAreHere = document.querySelector('.you-are-here');
-var ProgressBar = document.querySelector('progress');
+var ProgressBar = document.querySelector('.play-progress');
 var startsOnP = document.querySelector('.starts-on');
 var showDurationP = document.querySelector('.show-duration');
 var relativeTime = document.querySelector('.relative-time');
 var listeningAt = document.querySelector('.listening-at');
+var dlProgressBar = document.querySelector('.dl-progress');
 
 const documentTitle = "Radio Station Emulator";
 const separator = " :: ";
@@ -73,7 +74,7 @@ function increaseSeconds()
     seconds_here = seconds_here+1;
     youAreHere.innerText = seconds_here;
     var progressbarValue = isNaN(parseInt(currentTimeP.innerText)) ? 0 : parseInt(currentTimeP.innerText) + parseInt(seconds_here);
-    debugLog(`${typeof(progressbarValue)} progressbarValue = ${progressbarValue}`)
+    // debugLog(`${typeof(progressbarValue)} progressbarValue = ${progressbarValue}`)
     ProgressBar.value = progressbarValue;
     relativeTime.innerText = parseInt(currentTimeP.innerText) + seconds_here;
     listeningAt.innerText = Math.floor(audioElement.currentTime);
@@ -116,6 +117,7 @@ function FetchAudio(url)
     request.addEventListener("load", ()=>{
         if(request.status === 200){
             debugLog("Got it... trying!")
+            dlProgressBar.value = 100;
             audioElement.src = URL.createObjectURL(request.response);
             audioElement.play();
             debugLog("Tried... did it work?");
@@ -123,6 +125,12 @@ function FetchAudio(url)
             debugLog(`ERROR ${request.status} while loading ${url}`);
         }
     });
+    request.addEventListener("progress", (event)=>{
+        if (event.lengthComputable)
+        {
+            dlProgressBar.value = (event.loaded/event.total)*100;
+        }
+    });
     request.addEventListener("error", ()=>{
         debugLog("An error occured. While loading: "+url+" for "+callback+".");
     });
@@ -178,9 +186,9 @@ function loadShowCallback(json, params)
     //         audioElement.play();
     //     }
     // }, {passive: true});
-    // audioElement.addEventListener('ended', function(){
-    //     location.reload();
-    // });
+    audioElement.addEventListener('ended', function(){
+         location.reload();
+    });
     // audioElement.addEventListener('complete', ()=>{
     //     debugLog("Download completed!")
     //     var synced_at = sync_radio();