aboutsummaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/css/styles.css23
-rw-r--r--client/index.html58
-rw-r--r--client/js/radio_emulator.js73
3 files changed, 104 insertions, 50 deletions
diff --git a/client/css/styles.css b/client/css/styles.css
index 08b28dc..b759445 100644
--- a/client/css/styles.css
+++ b/client/css/styles.css
@@ -1,6 +1,16 @@
body {
background: black;
color: lightgreen;
+ margin: 0px;
+}
+
+div {
+ display: flex;
+ flex-direction: column;
+}
+
+progress {
+ width: auto;
}
a {
@@ -33,7 +43,18 @@ button:hover {
table {
background-color: lightgreen;
}
-th, tr, td {
+th, td {
background-color: black;
padding: 2px;
}
+
+tr {
+ background-color: black;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+audio {
+ width: auto;
+}
diff --git a/client/index.html b/client/index.html
index 4205746..f5a9b53 100644
--- a/client/index.html
+++ b/client/index.html
@@ -7,8 +7,8 @@
<link rel="stylesheet preload" href="./css/styles.css" type="text/css" as="style"/>
</head>
<body>
- <h1>Radio Station Emulator</h1>
<div>
+ <h1>Radio Station Emulator</h1>
<p>
If you are visiting for the first time, you might need to "Allow Audio" first.
Please do and refresh the page.
@@ -23,25 +23,47 @@
Ideally, if "Listening at:" and "Show playback:" have the same value then you are
in sync!
</p>
- <div style="display: flex; flex-direction: row; align-items: center; gap: 3px;">
+ <div>
<p>Download progress:</p>
- <progress class="dl-progress" max="100" style="width: 100%;"></progress>
+ <progress class="dl-progress" max="100"></progress>
</div>
- <div style="display: flex; flex-direction: row; align-items: center; gap: 3px;">
- <button onclick="sync_radio()">Sync!</button>
- <p>Live progress:</p>
- <progress class="play-progress" style="width: 100%;"></progress>
+ <div>
+ <p>Live progress:</p>
+ <progress class="play-progress"></progress>
</div>
- <div style="display:flex; flex-direction:row; align-items: center; gap: 3px; justify-content: space-around;">
- <p>Listening at:</p>
- <pre class="listening-at"></pre>
- <p>Show playback: </p>
- <pre class="relative-time"></pre>
- <p>/</p>
- <pre class="show-duration"></pre>
+ <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;
+ ">
+ <p>Listening at:</p>
+ <pre class="listening-at"></pre>
+ </div>
+ <div style="
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: baseline;
+ justify-content: space-evenly;
+ ">
+ <p>Show playback: </p>
+ <pre class="relative-time"></pre>
+ <p>/</p>
+ <pre class="show-duration"></pre>
+ </div>
</div>
<div class="radio-player">
- <audio preload="auto" controls muted style="width: 100%;"></audio>
+ <audio preload="auto" controls muted></audio>
</div>
</div>
<div>
@@ -65,10 +87,10 @@
<td class="show-duration"></td>
</tr>
</table>
- <h3>Show info (JSON)</h3>
- <pre class="show-info"></pre>
<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">
@@ -110,7 +132,7 @@
</tr>
</table>
<h3>List info (JSON)</h3>
- <pre class="list-info"></pre>
+ <pre style="overflow-x: auto;" class="list-info"></pre>
</div>
<h2>Previously played:</h2>
<div class="previously-played">
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 7064a5e..aafed52 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -135,7 +135,7 @@ function FetchAudio(url)
request.addEventListener("progress", (event)=>{
if (event.lengthComputable)
{
- dlProgressBar.value = (event.loaded/event.total)*100;
+ placeholders.dlProgress.value = (event.loaded/event.total)*100;
}
});
request.addEventListener("error", ()=>{
@@ -258,38 +258,49 @@ function listCallback(json, params)
{
FetchJSON(`${jsonRequest}${json.list[0].hash}`, loadShowCallback, [json, now_on_sequence, json.list[0], hash_of_list]);
}
- for ( var i = 1; i < json.list.length; i++)
+ else
{
- debugLog("getting there")
- if ( now_on_sequence < json.list[i].starts_on && now_on_sequence > json.list[i-1].starts_on )
- {
-
- var tmp = document.createElement('pre');
- tmp.innerText = JSON.stringify(json.list[i-1], null, 2);
- placeholders.previouslyPlayed.append(tmp);
- now_on_sequence = now_on_sequence - previous.starts_on;
- debugLog(`now_on_sequence (1updated): ${now_on_sequence}`);
- previous = json.list[i-1];
- FetchJSON(`${jsonRequest}${previous.hash}`, loadShowCallback, [json, now_on_sequence, previous, 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 )
- {
- var tmp = document.createElement('pre');
- tmp.innerText = JSON.stringify(json.list[i-1], null, 2);
- placeholders.previouslyPlayed.append(tmp);
- FetchJSON(`${jsonRequest}${json.list[i].hash}`, loadShowCallback, [json, now_on_sequence, json.list[i], hash_of_list]);
- debugLog('Second!');
- break;
- }
- else
+ for ( var i = 0; i < json.list.length - 1; i++)
{
- debugLog(now_on_sequence);
- debugLog(json.list[i].starts_on);
- debugLog(json.list[i-1].starts_on);
- debugLog('Nothing!');
- continue;
+ debugLog("getting there")
+ if ( now_on_sequence > json.list[i].starts_on && 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}${previous.hash}`, loadShowCallback, [json, 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 )
+ {
+ 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]);
+ debugLog('Second!');
+ break;
+ }
+ else
+ {
+ debugLog(now_on_sequence);
+ debugLog(json.list[i].starts_on);
+ debugLog(json.list[i-1].starts_on);
+ debugLog('Nothing!');
+ continue;
+ }
}
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 12:56:07 +0000