aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorkaotisk <kaotisk@arching-kaos.org>2024-10-13 19:22:22 +0300
committerkaotisk <kaotisk@arching-kaos.org>2024-10-13 19:22:22 +0300
commitb8866f1b2877ded4a582e63aa7f2110ca2bb620e (patch)
tree15ce0d3dfdcb85100db3671596481261281cc4df
parentdfaa831adfebbd4ab904636f1065bf2cff642f24 (diff)
downloadarching-kaos-radio-b8866f1b2877ded4a582e63aa7f2110ca2bb620e.tar.gz
arching-kaos-radio-b8866f1b2877ded4a582e63aa7f2110ca2bb620e.tar.bz2
arching-kaos-radio-b8866f1b2877ded4a582e63aa7f2110ca2bb620e.zip
Fixed a bug where nothing would happen after playlist playback, added download progress bar
-rw-r--r--client/index.html11
-rw-r--r--client/js/radio_emulator.js18
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();