Changed way of loading the audio, some improvements, some refactoring.

1 files changed, 97 insertions, 51 deletions

diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 27e8ba2..59e49ec 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -26,10 +26,22 @@
 //   - list
 //   - show_info
 //
-var debugMode = false;
+var debugMode = true;
+const apiURL = "http://z.kaotisk-hund.com:8010/";
+const version = "v0";
+const listRequest = `${apiURL}${version}/list`
+const jsonRequest = `${apiURL}${version}/application/json/`
+const audioRequest = `${apiURL}${version}/audio/ogg/`
+
+
+
+function debugLog(message)
+{
+    if ( debugMode ) console.log(message);
+}
 
 var audioElement = document.querySelector('audio');
-var sourceElement = document.querySelector('source');
+// var sourceElement = document.querySelector('source');
 var currentTimeP = document.querySelector('.current-time');
 var listStartedP = document.querySelector('.started-on');
 var currentShowHash = document.querySelector('.current-show-hash');
@@ -60,7 +72,9 @@ function increaseSeconds()
 {
     seconds_here = seconds_here+1;
     youAreHere.innerText = seconds_here;
-    ProgressBar.value = (parseInt(currentTimeP.innerText) === NaN) ? 0 : parseInt(currentTimeP.innerText) + parseInt(seconds_here);
+    var progressbarValue = isNaN(parseInt(currentTimeP.innerText)) ? 0 : parseInt(currentTimeP.innerText) + parseInt(seconds_here);
+    debugLog(`${typeof(progressbarValue)} progressbarValue = ${progressbarValue}`)
+    ProgressBar.value = progressbarValue;
     relativeTime.innerText = parseInt(currentTimeP.innerText) + seconds_here;
     listeningAt.innerText = Math.floor(audioElement.currentTime);
     return seconds_here;
@@ -82,14 +96,38 @@ function FetchJSON( url, callback, params )
         if(request.status !== 404){
             callback(json, params);
         } else {
-            if ( debugMode ) console.log(`ERROR ${request.status} while loading ${url}`);
+            debugLog(`ERROR ${request.status} while loading ${url}`);
+        }
+    });
+    request.addEventListener("error", ()=>{
+        debugLog("An error occured. While loading: "+url+" for "+callback+".");
+    });
+    request.addEventListener("abort", ()=>{
+        debugLog("Request aborted: "+url+" for "+callback+".");
+    });
+    request.open("GET", url);
+    request.send();
+}
+
+function FetchAudio(url)
+{
+    const request = new XMLHttpRequest();
+    request.responseType = 'blob';
+    request.addEventListener("load", ()=>{
+        if(request.status === 200){
+            debugLog("Got it... trying!")
+            audioElement.src = URL.createObjectURL(request.response);
+            audioElement.play();
+            debugLog("Tried... did it work?");
+        } else {
+            debugLog(`ERROR ${request.status} while loading ${url}`);
         }
     });
     request.addEventListener("error", ()=>{
-        if ( debugMode ) console.log("An error occured. While loading: "+url+" for "+callback+".");
+        debugLog("An error occured. While loading: "+url+" for "+callback+".");
     });
     request.addEventListener("abort", ()=>{
-        if ( debugMode ) console.log("Request aborted: "+url+" for "+callback+".");
+        debugLog("Request aborted: "+url+" for "+callback+".");
     });
     request.open("GET", url);
     request.send();
@@ -97,9 +135,9 @@ function FetchJSON( url, callback, params )
 
 function genericCallback(json, params)
 {
-    if ( debugMode ) console.log('genericCallback');
-    if ( debugMode ) console.log(json);
-    if ( debugMode ) console.log(params);
+    debugLog('genericCallback');
+    debugLog(json);
+    debugLog(params);
 }
 
 var calledLoadShowCallback = 0;
@@ -112,10 +150,10 @@ function stopHereAndReflect()
 function loadShowCallback(json, params)
 {
     const [ list, now_on_sequence, element, hash_of_list ] = params;
-    if ( debugMode ) console.log('loadShowCallback');
-    if ( debugMode ) console.log(json);
-    if ( debugMode ) console.log(element);
-    if ( debugMode ) console.log(params);
+    debugLog('loadShowCallback');
+    debugLog(json);
+    debugLog(element);
+    debugLog(params);
     listStartedP.innerText = list.started_on;
     listHash.innerText = hash_of_list;
     currentShowHash.innerText = json.hash;
@@ -125,36 +163,40 @@ function loadShowCallback(json, params)
     showDurationP.innerText = Math.floor(element.duration/1000);
     startsOnP.innerText = element.starts_on;
     ProgressBar.max = Math.floor(element.duration/1000);
-    sourceElement.src = "http://z.kaotisk-hund.com:8010/v0/audio/ogg/" + json.hash + "#t=" + Math.floor((now_on_sequence - element.starts_on)/1000);
-    sourceElement.type = json.mimetype;
+    // sourceElement.src = "http://z.kaotisk-hund.com:8010/v0/audio/ogg/" + json.hash + "#t=" + Math.floor((now_on_sequence - element.starts_on)/1000);
     audioElement.load();
-    if ( debugMode ) console.log('plays here: '+(now_on_sequence - element.starts_on)/1000);
-    audioElement.addEventListener('canplaythrough', function(){
-        if ( debugMode ) console.log('CAN PLAY THROUGH');
-        if ( calledLoadShowCallback < 100 )
-        {
-            calledLoadShowCallback++;
-            currentTimeP.innerText = ((now_on_sequence - element.starts_on)/1000);
-            audioElement.currentTime = ((now_on_sequence - element.starts_on)/1000);
-            audioElement.play();
-        }
-    });
-    audioElement.addEventListener('ended', function(){
-        location.reload();
-    });
-    var synced_at = sync_radio();
-    if ( debugMode ) console.log("Synced initially at : "+synced_at);
-    if ( synced_at === 0 )
-    {
-        if ( synced_at > audioElement.currentTime )
-        {
-            if ( debugMode ) console.log('Good sync!');
-        }
-        else
-        {
-            setTimeout(sync_radio, 10000);
-        }
-    }
+    FetchAudio(`${audioRequest}${json.hash}`);
+    audioElement.type = json.mimetype;
+    // debugLog('plays here: '+(now_on_sequence - element.starts_on)/1000);
+    // audioElement.addEventListener('canplaythrough', function(){
+    //     debugLog('CAN PLAY THROUGH');
+    //     if ( calledLoadShowCallback < 100 )
+    //     {
+    //         calledLoadShowCallback++;
+             currentTimeP.innerText = ((now_on_sequence - element.starts_on)/1000);
+    //         audioElement.currentTime = ((now_on_sequence - element.starts_on)/1000);
+    //         audioElement.play();
+    //     }
+    // }, {passive: true});
+    // audioElement.addEventListener('ended', function(){
+    //     location.reload();
+    // });
+    // audioElement.addEventListener('complete', ()=>{
+    //     debugLog("Download completed!")
+    //     var synced_at = sync_radio();
+    //     debugLog("Synced initially at : "+synced_at);
+    //     if ( synced_at === 0 )
+    //     {
+    //         if ( synced_at > audioElement.currentTime )
+    //         {
+    //             debugLog('Good sync!');
+    //         }
+    //         else
+    //         {
+                 setTimeout(sync_radio, 10000);
+    //         }
+    //     }
+    // }, {passive: true});
 }
 
 function sync_radio()
@@ -163,8 +205,12 @@ function sync_radio()
     if ( value !== "" )
     {
         var new_now = parseFloat(value) + getSecondsHere();
-        if ( debugMode ) console.log("Trying to sync @ "+ value + " + " +getSecondsHere() + " = " + new_now);
+        debugLog("Trying to sync @ "+ value + " + " +getSecondsHere() + " = " + new_now);
         audioElement.currentTime = new_now;
+        audioElement.play();
+        audioElement.muted = false;
+        for ( av = 0.1; av === 1; av = av+0.1 )
+            audioElement.volume = 0.1;
         return new_now;
     }
     return 0;
@@ -172,23 +218,23 @@ function sync_radio()
 
 function listCallback(json, params)
 {
-    if ( debugMode ) console.log('listCallback');
+    debugLog('listCallback');
     var [ now, hash_of_list ] = params;
     var delta_time = now - json.started_on;
     var min_times_played = Math.floor( delta_time / json.duration );
     var max_times_to_be_played = delta_time / json.duration;
     var Dt = max_times_to_be_played - min_times_played;
     var now_on_sequence = Dt * json.duration;
-    if ( debugMode ) console.log(`now_on_sequence: ${now_on_sequence}, Dt: ${Dt}`)
+    debugLog(`now_on_sequence: ${now_on_sequence}, Dt: ${Dt}`)
     previous = { starts_on: 0 };
     json.list.forEach((element)=>{
         if ( now_on_sequence < element.starts_on && now_on_sequence > previous.starts_on){
         } else {
             now_on_sequence = now_on_sequence - previous.starts_on;
-            if ( debugMode ) console.log(now_on_sequence);
+            debugLog(now_on_sequence);
             previous = element;
-            if ( debugMode ) console.log(element);
-            FetchJSON("http://z.kaotisk-hund.com:8010/v0/application/json/" + element.hash, loadShowCallback, [json, now_on_sequence, element, hash_of_list]);
+            debugLog(element);
+            FetchJSON(`${jsonRequest}${element.hash}`, loadShowCallback, [json, now_on_sequence, element, hash_of_list]);
         }
     });
 }
@@ -196,9 +242,9 @@ function listCallback(json, params)
 function hashCallback(json, params)
 {
     var [ now ] = params;
-    if ( debugMode ) console.log('hashCallback');
-    FetchJSON('http://z.kaotisk-hund.com:8010/v0/application/json/' + json.latest_list, listCallback, [now, json.latest_list]);
+    debugLog('hashCallback');
+    FetchJSON(`${jsonRequest}${json.latest_list}`, listCallback, [now, json.latest_list]);
 }
 
-FetchJSON('http://z.kaotisk-hund.com:8010/v0/list', hashCallback, [ new Date().getTime() ]);
+FetchJSON(`${listRequest}`, hashCallback, [ new Date().getTime() ]);