diff options
-rw-r--r-- | client/css/styles.css | 48 | ||||
-rw-r--r-- | client/img/logo.jpg | bin | 0 -> 39213 bytes | |||
-rw-r--r-- | client/index.html | 81 | ||||
-rw-r--r-- | client/js/radio_emulator.js | 62 |
4 files changed, 117 insertions, 74 deletions
diff --git a/client/css/styles.css b/client/css/styles.css index ee8d0de..66d5585 100644 --- a/client/css/styles.css +++ b/client/css/styles.css @@ -5,6 +5,18 @@ body { padding: 2vh 4vw; } +.logo { + max-width: 128px; +} + +.header { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: start; +} + div { display: flex; flex-direction: column; @@ -32,6 +44,7 @@ button { button { background:black; color:red; + font-size: 24px; border: solid 2px; } @@ -41,9 +54,39 @@ button:hover { border: solid 2px aliceblue; } +pre { + border: 1px solid; + overflow-x: auto; + padding: 0.5vh 1vw; +} + +details { + border: 1px solid; + padding: 1vh 2vw; +} + +summary { + border-bottom: 1px solid; + padding: 0.5vh 1vw; +} + +summary:hover { + background-color: lightgreen; + color: black; +} + +.div-inline { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: baseline; + justify-content: space-evenly; +} + table { background-color: lightgreen; } + th, td { background-color: black; padding: 2px; @@ -53,7 +96,10 @@ tr { background-color: black; display: flex; flex-direction: row; - flex-wrap: wrap; + flex-wrap: nowrap; + justify-content: space-between; + border: 1px solid; + align-items: center; } audio { diff --git a/client/img/logo.jpg b/client/img/logo.jpg Binary files differnew file mode 100644 index 0000000..6727540 --- /dev/null +++ b/client/img/logo.jpg diff --git a/client/index.html b/client/index.html index f5a9b53..0e0145f 100644 --- a/client/index.html +++ b/client/index.html @@ -8,7 +8,15 @@ </head> <body> <div> - <h1>Radio Station Emulator</h1> + <div class="header"> + <img class="logo" src="./img/logo.jpg"/> + <div> + <h1>Radio Station Emulator</h1> + <em>by <a href="https://kaotisk-hund.com/" target="_blank">Kaotisk Hund</a>, for <a href="https://arching-kaos.org" target="_blank">Arching Kaos</a></em> + </div> + </div> + <details open> + <summary>Info to get you started</summary> <p> If you are visiting for the first time, you might need to "Allow Audio" first. Please do and refresh the page. @@ -23,6 +31,7 @@ Ideally, if "Listening at:" and "Show playback:" have the same value then you are in sync! </p> + </details> <div> <p>Download progress:</p> <progress class="dl-progress" max="100"></progress> @@ -32,34 +41,16 @@ <progress class="play-progress"></progress> </div> <button onclick="sync_radio()">Sync!</button> - <div style=" - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-evenly; - "> - <div style=" - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-evenly; - "> + <div class="div-inline"> + <div class="div-inline"> <p>Listening at:</p> - <pre class="listening-at"></pre> + <p class="listening-at"></p> </div> - <div style=" - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-evenly; - "> + <div class="div-inline"> <p>Show playback: </p> - <pre class="relative-time"></pre> + <p class="relative-time"></p> <p>/</p> - <pre class="show-duration"></pre> + <p class="show-duration"></p> </div> </div> <div class="radio-player"> @@ -79,43 +70,39 @@ <td class="title"></td> </tr> <tr> - <th>Starts On</th> + <th>Starts On (ms)</th> <td class="starts-on"></td> </tr> <tr> - <th>Duration</th> + <th>Duration (s)</th> <td class="show-duration"></td> </tr> </table> - <h3>Hash of current show</h3> - <p style="overflow-x: auto;" class="current-show-hash"></p> - <h3>Show info (JSON)</h3> - <pre style="overflow-x: auto;" class="show-info"></pre> </div> <h2>Sync info</h2> <div class="groups"> <table> <tr> - <th>Time elapsed since visited (seconds)</th> + <th>Time elapsed since visited (s)</th> <td class="you-are-here"></td> </tr> <tr> - <th>List started on (seconds)</th> + <th>List started on (ms)</th> <td class="started-on"></td> </tr> <tr> - <th>List duration (seconds)</th> + <th>List duration (s)</th> <td class="list-duration"></td> </tr> </table> <h3>Calculations</h3> <table> <tr> - <th>Times list played completely until now</th> + <th>Times Fully Played</th> <td class="min-played"></td> </tr> <tr> - <th>Times played until now</th> + <th>Times Played</th> <td class="max-played"></td> </tr> <tr> @@ -127,21 +114,25 @@ <td class="delta-time"></td> </tr> <tr> - <th>Initial "tune in" time (seconds)</th> + <th>Initial "tune in" time (s)</th> <td class="current-time"></td> </tr> </table> - <h3>List info (JSON)</h3> - <pre style="overflow-x: auto;" class="list-info"></pre> - </div> - <h2>Previously played:</h2> + <h2>Previously played (if any)</h2> <div class="previously-played"> </div> - <h2>Data segments</h2> - <div class="groups"> + <h2>Raw data</h2> + <details> + <summary>Data segments</summary> <h3>Hash of list</h3> - <p style="overflow-x: auto;" class="list-hash"></p> - </div> + <pre class="list-hash"></pre> + <h3>List info (JSON)</h3> + <pre class="list-info"></pre> + <h3>Hash of current show</h3> + <pre class="current-show-hash"></pre> + <h3>Show info (JSON)</h3> + <pre class="show-info"></pre> + </details> </div> <div> <a href="./data.html" target="_blank">Data</a> diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js index 17691d2..ae78258 100644 --- a/client/js/radio_emulator.js +++ b/client/js/radio_emulator.js @@ -165,24 +165,24 @@ function stopHereAndReflect() function loadShowCallback(json, params) { - const [ list, now_on_sequence, element, hash_of_list ] = params; + const [ list, now_on_sequence, listItem, hash_of_list ] = params; debugLog('loadShowCallback'); debugLog(json); - debugLog(element); + debugLog(listItem); //debugLog(params); - placeholders.currentShowHash.innerText = element.hash; + placeholders.currentShowHash.innerText = listItem.hash; placeholders.artist.innerText = json.artist; placeholders.title.innerText = json.title; setTitleMessage ( "▶️ " + json.artist + " - " + json.title ); debugLog('----------'); - placeholders.showDuration.forEach((elem)=>{elem.innerText = Math.floor(element.duration/1000)}); - placeholders.startsOn.innerText = element.starts_on; - placeholders.playProgress.max = Math.floor(element.duration/1000); + placeholders.showDuration.forEach((element)=>{element.innerText = Math.floor(listItem.duration/1000)}); + placeholders.startsOn.innerText = listItem.starts_on; + placeholders.playProgress.max = Math.floor(listItem.duration/1000); placeholders.showInfo.innerText = JSON.stringify(json, null, 2); audioElement.load(); FetchAudio(`${audioRequest}${json.hash}`, sync_radio); audioElement.type = json.mimetype; - placeholders.currentTime.innerText = Math.floor((now_on_sequence - element.starts_on)/1000); + placeholders.currentTime.innerText = Math.floor((values.now_on_sequence - listItem.starts_on)/1000); audioElement.addEventListener('ended', function(){ placeholders.currentTime.value = 0; FetchJSON(`${listRequest}`, hashCallback, [ new Date().getTime() ]); @@ -234,70 +234,76 @@ function sync_radio() return 0; } +var values = { + delta_time: 0, + min_times_played: 0, + maxTimesPlayed: 0, + Dt: 0, + now_on_sequence: 0 +} + function listCallback(json, params) { debugLog('listCallback'); debugLog(json); debugLog(params); 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; + values.delta_time = now - json.started_on; + values.min_times_played = Math.floor( values.delta_time / json.duration ); + values.max_times_to_be_played = values.delta_time / json.duration; + values.Dt = values.max_times_to_be_played - values.min_times_played; + values.now_on_sequence = values.Dt * json.duration; placeholders.listStarted.innerText = json.started_on; placeholders.listHash.innerText = hash_of_list; - placeholders.deltaTime.innerText = delta_time; - placeholders.dt.innerText = Dt; - placeholders.currentTime.innerText = now_on_sequence; + placeholders.deltaTime.innerText = values.delta_time; + placeholders.dt.innerText = values.Dt; + placeholders.currentTime.innerText = values.now_on_sequence; placeholders.listDuration.innerText = json.duration; - placeholders.minTimesPlayed.innerText = min_times_played; - placeholders.maxTimesPlayed.innerText = max_times_to_be_played; + placeholders.minTimesPlayed.innerText = values.min_times_played; + placeholders.maxTimesPlayed.innerText = values.max_times_to_be_played; placeholders.listInfo.innerText = JSON.stringify(json, null, 2); - debugLog(`now_on_sequence: ${now_on_sequence}, Dt: ${Dt}`) + debugLog(`now_on_sequence: ${values.now_on_sequence}, Dt: ${values.Dt}`) previous = { starts_on: -1 }; if ( json.list.length === 1 ) { - FetchJSON(`${jsonRequest}${json.list[0].hash}`, loadShowCallback, [json, now_on_sequence, json.list[0], hash_of_list]); + FetchJSON(`${jsonRequest}${json.list[0].hash}`, loadShowCallback, [json, values.now_on_sequence, json.list[0], hash_of_list]); } else { for ( var i = 0; i < json.list.length - 1; i++) { debugLog("getting there") - if ( now_on_sequence > json.list[i].starts_on && now_on_sequence < json.list[i+1].starts_on ) + if ( values.now_on_sequence > json.list[i].starts_on && values.now_on_sequence < json.list[i+1].starts_on ) { if( i !== 0) { var tmp = document.createElement('pre'); tmp.innerText = JSON.stringify(json.list[i-1], null, 2); - tmp.style = "overflow-x: auto;"; placeholders.previouslyPlayed.append(tmp); } - now_on_sequence = now_on_sequence - json.list[i].starts_on; - debugLog(`now_on_sequence (1updated): ${now_on_sequence}`); - FetchJSON(`${jsonRequest}${json.list[i].hash}`, loadShowCallback, [json, now_on_sequence, json.list[i], hash_of_list]); + values.now_on_sequence = values.now_on_sequence - json.list[i].starts_on; + debugLog(`now_on_sequence (1updated): ${values.now_on_sequence}`); + FetchJSON(`${jsonRequest}${json.list[i].hash}`, loadShowCallback, [json, values.now_on_sequence, json.list[i], hash_of_list]); debugLog('First!'); break; } - else if ( now_on_sequence > json.list[i].starts_on && now_on_sequence > json.list[i+1].starts_on ) + else if ( values.now_on_sequence > json.list[i].starts_on && values.now_on_sequence > json.list[i+1].starts_on ) { i++; if( i !== 0) { var tmp = document.createElement('pre'); tmp.innerText = JSON.stringify(json.list[i-1], null, 2); - tmp.style = "overflow-x: auto;"; placeholders.previouslyPlayed.append(tmp); } //now_on_sequence = now_on_sequence - json.list[i].starts_on; - FetchJSON(`${jsonRequest}${json.list[i].hash}`, loadShowCallback, [json, now_on_sequence, json.list[i], hash_of_list]); + FetchJSON(`${jsonRequest}${json.list[i].hash}`, loadShowCallback, [json, values.now_on_sequence, json.list[i], hash_of_list]); debugLog('Second!'); break; } else { - debugLog(now_on_sequence); + debugLog(values.now_on_sequence); debugLog(json.list[i].starts_on); debugLog(json.list[i-1].starts_on); debugLog('Nothing!'); |