diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/js/radio_emulator.js | 142 |
1 files changed, 78 insertions, 64 deletions
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js index 98138e7..56222c4 100644 --- a/client/js/radio_emulator.js +++ b/client/js/radio_emulator.js @@ -26,6 +26,7 @@ // - list // - show_info // +var debugMode = false; var audioElement = document.querySelector('audio'); var sourceElement = document.querySelector('source'); @@ -37,12 +38,29 @@ 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 startsOnP = document.querySelector('.starts-on'); +var showDurationP = document.querySelector('.show-duration'); +var relativeTime = document.querySelector('.relative-time'); + +const documentTitle = "Radio Station Emulator"; +const separator = " :: "; + +function setTitleSyncing(){ + document.title = "🔃Syncing" + separator + documentTitle; +} + +function setTitleMessage(message){ + document.title = message + separator + documentTitle; +} var seconds_here = 0; function increaseSeconds() { seconds_here = seconds_here+1; youAreHere.innerText = seconds_here; + ProgressBar.value = parseInt(currentTimeP.innerText) + seconds_here; + relativeTime.innerText = parseInt(currentTimeP.innerText) + seconds_here; return seconds_here; } function getSecondsHere() @@ -55,29 +73,21 @@ setInterval(increaseSeconds, 1000); function FetchJSON( url, callback, params ) { + setTitleSyncing(); const request = new XMLHttpRequest(); request.addEventListener("load", ()=>{ var json = JSON.parse(request.response); if(request.status !== 404){ callback(json, params); } else { - console.log(`ERROR ${request.status} while loading ${url}`); + if ( debugMode ) console.log(`ERROR ${request.status} while loading ${url}`); } }); request.addEventListener("error", ()=>{ - console.log("An error occured. While loading: "+url+" for "+callback+"."); + if ( debugMode ) console.log("An error occured. While loading: "+url+" for "+callback+"."); }); - // ProgressBar update: Interesting but not needed - // request.addEventListener("progress", (event)=>{ - // if (event.lengthComputable && progressPlaceholder){ - // httpProgressPlaceholder.value = (event.loaded / event.total) * 100; - // } else { - // httpProgressPlaceholder.value = 0; - // // console.log("Supposingly zeroed progressPlaceholder"); - // } - // }); request.addEventListener("abort", ()=>{ - console.log("Request aborted."); + if ( debugMode ) console.log("Request aborted: "+url+" for "+callback+"."); }); request.open("GET", url); request.send(); @@ -85,91 +95,97 @@ function FetchJSON( url, callback, params ) function genericCallback(json, params) { - console.log('genericCallback'); - console.log(json); - console.log(params); + if ( debugMode ) console.log('genericCallback'); + if ( debugMode ) console.log(json); + if ( debugMode ) console.log(params); } var calledLoadShowCallback = 0; function stopHereAndReflect() { - + return 0; } function loadShowCallback(json, params) { const [ list, now_on_sequence, element, hash_of_list ] = params; -// if ( calledLoadShowCallback === 0 ) -// { -// calledLoadShowCallback++; - console.log('loadShowCallback'); - console.log(json); - console.log(element); - console.log(params); - listStartedP.innerText = list.started_on; - listHash.innerText = hash_of_list; - currentShowHash.innerText = json.hash; - artistP.innerText = json.artist; - titleP.innerText = json.title; - // audioElement.pause(); - 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; - audioElement.load(); - console.log('plays here: '+(now_on_sequence - element.starts_on)/1000); - audioElement.addEventListener('canplaythrough', function(){ - 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(); - //FetchJSON('http://z.kaotisk-hund.com:8010/v0/list', hashCallback, [ new Date().getTime()]); - }); - sync_radio(); - setTimeout(sync_radio, 30000); - -// } else { -// return 0; -// } + if ( debugMode ) console.log('loadShowCallback'); + if ( debugMode ) console.log(json); + if ( debugMode ) console.log(element); + if ( debugMode ) console.log(params); + listStartedP.innerText = list.started_on; + listHash.innerText = hash_of_list; + currentShowHash.innerText = json.hash; + artistP.innerText = json.artist; + titleP.innerText = json.title; + setTitleMessage ( "▶️ " + json.artist + " - " + json.title ); + 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; + 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); + } + } } function sync_radio() { var value = currentTimeP.innerText; - var new_now = parseFloat(value) + getSecondsHere(); - console.log("Trying to sync @ "+ value + " + " +getSecondsHere() + " = " + new_now); if ( value !== "" ) { + var new_now = parseFloat(value) + getSecondsHere(); + if ( debugMode ) console.log("Trying to sync @ "+ value + " + " +getSecondsHere() + " = " + new_now); audioElement.currentTime = new_now; + return new_now; } + return 0; } function listCallback(json, params) { - console.log('listCallback'); + if ( debugMode ) console.log('listCallback'); var [ now, hash_of_list ] = params; - // var now = Date.now(); 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; - console.log(`now_on_sequence: ${now_on_sequence}, Dt: ${Dt}`) - + if ( debugMode ) console.log(`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; - console.log(now_on_sequence); + if ( debugMode ) console.log(now_on_sequence); previous = element; - console.log(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]); } }); @@ -178,11 +194,9 @@ function listCallback(json, params) function hashCallback(json, params) { var [ now ] = params; - console.log('hashCallback'); + if ( debugMode ) console.log('hashCallback'); FetchJSON('http://z.kaotisk-hund.com:8010/v0/application/json/' + json.latest_list, listCallback, [now, json.latest_list]); } FetchJSON('http://z.kaotisk-hund.com:8010/v0/list', hashCallback, [ new Date().getTime() ]); - - |