diff options
| -rw-r--r-- | client/index.html | 11 | ||||
| -rw-r--r-- | client/js/radio_emulator.js | 18 |
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(); |