From 95ae29fe3341a2858e3c5195dbc72ed72efd8c96 Mon Sep 17 00:00:00 2001 From: kaotisk Date: Mon, 14 Oct 2024 04:29:56 +0300 Subject: Bug fixes, styling --- client/css/styles.css | 23 +++++++++++++- client/index.html | 58 ++++++++++++++++++++++++----------- client/js/radio_emulator.js | 73 ++++++++++++++++++++++++++------------------- 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 @@ -

Radio Station Emulator

+

Radio Station Emulator

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!

-
+

Download progress:

- +
-
- -

Live progress:

- +
+

Live progress:

+
-
-

Listening at:

-

-                

Show playback:

-

-                

/

-

+            
+            
+
+

Listening at:

+

+                
+
+

Show playback:

+

+                    

/

+

+                
- +
@@ -65,10 +87,10 @@ -

Show info (JSON)

-

                 

Hash of current show

+

Show info (JSON)

+

             

Sync info

@@ -110,7 +132,7 @@

List info (JSON)

-

+                

             

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; + } } } } -- cgit v1.2.3