From b8866f1b2877ded4a582e63aa7f2110ca2bb620e Mon Sep 17 00:00:00 2001
From: kaotisk
Date: Sun, 13 Oct 2024 19:22:22 +0300
Subject: Fixed a bug where nothing would happen after playlist playback, added
download progress bar
---
client/index.html | 11 +++++++----
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
@@ -23,9 +23,14 @@
Ideally, if "Listening at:" and "Show playback:" have the same value then you are
in sync!
+
Sync!
-
+
Live progress:
+
Listening at:
@@ -36,9 +41,7 @@
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();
--
cgit v1.2.3