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(-) (limited to 'client') 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