Bug fixes, styling

author: kaotisk <kaotisk@arching-kaos.org> 2024-10-14 04:29:56 +0300
committer: kaotisk <kaotisk@arching-kaos.org> 2024-10-14 04:29:56 +0300
commit: 95ae29fe3341a2858e3c5195dbc72ed72efd8c96 (patch)
tree: b196386f8d18c181a6669c2bd8c22d479cd619c4
parent: 30475d7b4d0b4e7aa49435050fb95c932278c10d (diff)
download: arching-kaos-radio-95ae29fe3341a2858e3c5195dbc72ed72efd8c96.tar.gz
arching-kaos-radio-95ae29fe3341a2858e3c5195dbc72ed72efd8c96.tar.bz2
arching-kaos-radio-95ae29fe3341a2858e3c5195dbc72ed72efd8c96.zip
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;
+            }
         }
     }
 }
author	kaotisk <kaotisk@arching-kaos.org>	2024-10-14 04:29:56 +0300
committer	kaotisk <kaotisk@arching-kaos.org>	2024-10-14 04:29:56 +0300
commit	95ae29fe3341a2858e3c5195dbc72ed72efd8c96 (patch)
tree	b196386f8d18c181a6669c2bd8c22d479cd619c4
parent	30475d7b4d0b4e7aa49435050fb95c932278c10d (diff)
download	arching-kaos-radio-95ae29fe3341a2858e3c5195dbc72ed72efd8c96.tar.gz arching-kaos-radio-95ae29fe3341a2858e3c5195dbc72ed72efd8c96.tar.bz2 arching-kaos-radio-95ae29fe3341a2858e3c5195dbc72ed72efd8c96.zip