aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--client/css/styles.css48
-rw-r--r--client/img/logo.jpgbin0 -> 39213 bytes
-rw-r--r--client/index.html81
-rw-r--r--client/js/radio_emulator.js62
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
new file mode 100644
index 0000000..6727540
--- /dev/null
+++ b/client/img/logo.jpg
Binary files differ
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!');
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 01:18:13 +0000