Visual rework

3 files changed, 245 insertions, 176 deletions

diff --git a/client/css/styles.css b/client/css/styles.css
index 2d05d0e..5dce3f4 100644
--- a/client/css/styles.css
+++ b/client/css/styles.css
@@ -1,3 +1,8 @@
+* {
+  padding: 0px;
+  margin: 0;
+}
+
 body {
   background: black;
   color: lightgreen;
@@ -28,6 +33,7 @@ div {
 .div-groups-row {
     display: flex;
     flex-direction: row;
+    align-items: center;
 }
 
 progress {
@@ -46,8 +52,15 @@ button {
   background:black;
   color:red;
   border: solid 2px;
+  width: 100%;
 }
 
+.no-break {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    word-break: none;
+}
 
 button {
   background:black;
@@ -83,11 +96,49 @@ summary:hover {
     color: black;
 }
 
+.start-top {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: flex-start;
+}
+
+.previously-played {
+    flex-direction: column-reverse;
+    overflow-y: auto;
+    height: 40vh;
+    gap: 5px;
+}
+
+.div-row {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.previously-played img {
+    width: 48px;
+}
+.previously-played div {
+    border-color: purple;
+    border-style: solid;
+    border-width: 1px;
+}
+
+.div-inline-reverse {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+}
 .div-inline {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    align-items: baseline;
+    align-items: center;
     justify-content: space-evenly;
 }
 
diff --git a/client/index.html b/client/index.html
index e85a411..9c9d90b 100644
--- a/client/index.html
+++ b/client/index.html
@@ -15,179 +15,197 @@
                     <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> and for everyone.</em>
                 </div>
             </div>
-            <details open>
-                <summary>Info to get you started</summary>
-                <h2>Notice</h2>
-                <p>
-                    If you are visiting for the first time, you might need to
-                    "Allow Audio" first. Please do and refresh the page.
-                </p>
-                <h2>About</h2>
-                <p>
-                    This is a "Radio Station Emulator". We create lists with
-                    shows to be played, but since we are not doing streaming of
-                    the playlists, we offer another way of "tuning in".
-                </p>
-                <p>
-                    Providing the time a list started playing and having
-                    pre-calculated the starting timestamps of each show relevant
-                    to the list start timestamp, we can calculate which show is
-                    on and what its current time of playing is.
-                </p>
-                <p>
-                    Ultimately, you are hearing what we would be streaming, as
-                    you would do for a regular radio station.
-                </p>
-                <h2>Steps</h2>
-                <ol>
-                    <li>
-                        First, your browser is going to ask our server here,
-                        what is the current list that plays right now. It will
-                        get a response and will fetch that list.
-                    </li>
-                    <li>
-                        Based on properties of the list overall and the time of
-                        visit, your browser will start comparing each show's
-                        properties found in the list, to figure the relative
-                        time of yours on the list. A progress bar labeled "Live
-                        progress" will be indicating the correct time on the
-                        show.
-                    </li>
-                    <li>
-                        Having figured out the show that is playing, it will go
-                        and download the whole show. Progress of that would be
-                        observable via the "Download progress" bar below.
-                    </li>
-                    <li>
-                        Upon completion of the download, the "Sync" button is
-                        auto pressed and the player start playing the show from
-                        the calculated second it calculated previously.
-                    </li>
-                </ol>
-                <h2>Notes</h2>
-                <ul>
-                    <li>
-                        Sometimes, you might need to press the "Sync" button
-                        more than once. That's mostly due to bandwidth
-                        capabilities of both the server and the client. The
-                        "tune" would be right if you press it multiple times and
-                        land near the same timespace over and over.
-                    </li>
-                    <li>
-                        Ideally, if "Listening at:" and "Show playback:" have
-                        the same value then you are in sync!
-                    </li>
-                </ul>
-            </details>
-            <div>
-                <p>Download progress:</p>
-                <progress class="dl-progress" max="100"></progress>
-            </div>
-            <div>
-                <p>Live progress:</p>
-                <progress class="play-progress"></progress>
-            </div>
-            <button onclick="sync_radio()">Sync!</button>
-            <div class="div-inline">
-                <div class="div-inline">
-                    <p>Listening at:</p>
-                    <p class="listening-at"></p>
+            <div class="main">
+                <div class="start-top">
+                    <div class="div-groups">
+                        <div class="now-playing-details">
+                            <div class="div-groups-row">
+                                <img class="generated"/>
+                                <table>
+                                    <tr>
+                                        <th>Artist</th>
+                                        <td class="artist"></td>
+                                    </tr>
+                                    <tr>
+                                        <th>Title</th>
+                                        <td class="title"></td>
+                                    </tr>
+                                    <tr>
+                                        <th>Starts On (ms)</th>
+                                        <td class="starts-on"></td>
+                                    </tr>
+                                    <tr>
+                                        <th>Duration (s)</th>
+                                        <td class="show-duration"></td>
+                                    </tr>
+                                </table>
+                            </div>
+                        </div>
+                        <div class="enhanced-player">
+                            <div class="radio-player">
+                                <audio preload="auto" controls muted></audio>
+                            </div>
+                            <div class="div-row">
+                                <button onclick="sync_radio()">Sync!</button>
+                                <details style="width:100%;">
+                                    <summary>Details</summary>
+                                    <div>
+                                        <p>Download progress:</p>
+                                        <progress class="dl-progress" max="100"></progress>
+                                    </div>
+                                    <div>
+                                        <p>Live progress:</p>
+                                        <progress class="play-progress"></progress>
+                                    </div>
+                                    <div class="div-inline">
+                                        <div class="div-inline">
+                                            <p>Listening at:</p>
+                                            <p class="listening-at"></p>
+                                        </div>
+                                        <div class="div-inline">
+                                            <p>Show playback: </p>
+                                            <div class="no-break">
+                                                <p class="relative-time"></p>
+                                                <p>/</p>
+                                                <p class="show-duration"></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </details>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="previously-played">
+                    </div>
                 </div>
-                <div class="div-inline">
-                    <p>Show playback: </p>
-                    <p class="relative-time"></p>
-                    <p>/</p>
-                    <p class="show-duration"></p>
+                <div class="more-details">
+                    <h2>More details</h2>
+                    <details >
+                        <summary>Info to get you started</summary>
+                        <h2>Notice</h2>
+                        <p>
+                            If you are visiting for the first time, you might need to
+                            "Allow Audio" first. Please do and refresh the page.
+                        </p>
+                        <h2>About</h2>
+                        <p>
+                            This is a "Radio Station Emulator". We create lists with
+                            shows to be played, but since we are not doing streaming of
+                            the playlists, we offer another way of "tuning in".
+                        </p>
+                        <p>
+                            Providing the time a list started playing and having
+                            pre-calculated the starting timestamps of each show relevant
+                            to the list start timestamp, we can calculate which show is
+                            on and what its current time of playing is.
+                        </p>
+                        <p>
+                            Ultimately, you are hearing what we would be streaming, as
+                            you would do for a regular radio station.
+                        </p>
+                        <h2>Steps</h2>
+                        <ol>
+                            <li>
+                                First, your browser is going to ask our server here,
+                                what is the current list that plays right now. It will
+                                get a response and will fetch that list.
+                            </li>
+                            <li>
+                                Based on properties of the list overall and the time of
+                                visit, your browser will start comparing each show's
+                                properties found in the list, to figure the relative
+                                time of yours on the list. A progress bar labeled "Live
+                                progress" will be indicating the correct time on the
+                                show.
+                            </li>
+                            <li>
+                                Having figured out the show that is playing, it will go
+                                and download the whole show. Progress of that would be
+                                observable via the "Download progress" bar below.
+                            </li>
+                            <li>
+                                Upon completion of the download, the "Sync" button is
+                                auto pressed and the player start playing the show from
+                                the calculated second it calculated previously.
+                            </li>
+                        </ol>
+                        <h2>Notes</h2>
+                        <ul>
+                            <li>
+                                Sometimes, you might need to press the "Sync" button
+                                more than once. That's mostly due to bandwidth
+                                capabilities of both the server and the client. The
+                                "tune" would be right if you press it multiple times and
+                                land near the same timespace over and over.
+                            </li>
+                            <li>
+                                Ideally, if "Listening at:" and "Show playback:" have
+                                the same value then you are in sync!
+                            </li>
+                        </ul>
+                    </details>
+                    <details>
+                        <summary>Sync info</summary>
+                        <div class="groups">
+                            <table>
+                                <tr>
+                                    <th>Time of visit (ms)</th>
+                                    <td class="time-of-visit"></td>
+                                </tr>
+                                <tr>
+                                    <th>Time elapsed since visited (s)</th>
+                                    <td class="you-are-here"></td>
+                                </tr>
+                                <tr>
+                                    <th>List started on (ms)</th>
+                                    <td class="started-on"></td>
+                                </tr>
+                                <tr>
+                                    <th>List duration (s)</th>
+                                    <td class="list-duration"></td>
+                                </tr>
+                            </table>
+                            <h3>Calculations</h3>
+                            <table>
+                                <tr>
+                                    <th>Times Fully Played</th>
+                                    <td class="min-played"></td>
+                                </tr>
+                                <tr>
+                                    <th>Times Played</th>
+                                    <td class="max-played"></td>
+                                </tr>
+                                <tr>
+                                    <th>Dt = TP - TFP</th>
+                                    <td class="d-t"></td>
+                                </tr>
+                                <tr>
+                                    <th>Delta time</th>
+                                    <td class="delta-time"></td>
+                                </tr>
+                                <tr>
+                                    <th>Initial "tune in" time (s)</th>
+                                    <td class="current-time"></td>
+                                </tr>
+                            </table>
+                        </div>
+                    </details>
+                    <details>
+                        <summary>Data segments</summary>
+                        <h3>Hash of list</h3>
+                        <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>
+                        <div>
+                            <a href="./data.html" target="_blank">Data</a>
+                        </div>
+                    </details>
                 </div>
             </div>
-            <div class="radio-player">
-                <audio preload="auto" controls muted></audio>
-            </div>
-        </div>
-        <div>
-            <h2>Current "show" info</h2>
-            <div class="div-groups-row">
-                <img class="generated"/>
-                <table>
-                    <tr>
-                        <th>Artist</th>
-                        <td class="artist"></td>
-                    </tr>
-                    <tr>
-                        <th>Title</th>
-                        <td class="title"></td>
-                    </tr>
-                    <tr>
-                        <th>Starts On (ms)</th>
-                        <td class="starts-on"></td>
-                    </tr>
-                    <tr>
-                        <th>Duration (s)</th>
-                        <td class="show-duration"></td>
-                    </tr>
-                </table>
-            </div>
-            <h2>Sync info</h2>
-            <div class="groups">
-                <table>
-                    <tr>
-                        <th>Time of visit (ms)</th>
-                        <td class="time-of-visit"></td>
-                    </tr>
-                    <tr>
-                        <th>Time elapsed since visited (s)</th>
-                        <td class="you-are-here"></td>
-                    </tr>
-                    <tr>
-                        <th>List started on (ms)</th>
-                        <td class="started-on"></td>
-                    </tr>
-                    <tr>
-                        <th>List duration (s)</th>
-                        <td class="list-duration"></td>
-                    </tr>
-                </table>
-                <h3>Calculations</h3>
-                <table>
-                    <tr>
-                        <th>Times Fully Played</th>
-                        <td class="min-played"></td>
-                    </tr>
-                    <tr>
-                        <th>Times Played</th>
-                        <td class="max-played"></td>
-                    </tr>
-                    <tr>
-                        <th>Dt = TP - TFP</th>
-                        <td class="d-t"></td>
-                    </tr>
-                    <tr>
-                        <th>Delta time</th>
-                        <td class="delta-time"></td>
-                    </tr>
-                    <tr>
-                        <th>Initial "tune in" time (s)</th>
-                        <td class="current-time"></td>
-                    </tr>
-                </table>
-            <h2>Previously played (if any)</h2>
-            <div class="previously-played">
-            </div>
-            <h2>Raw data</h2>
-            <details>
-                <summary>Data segments</summary>
-                <h3>Hash of list</h3>
-                <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>
         </div>
         <script src="./js/radio_emulator.js"></script>
     </body>
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 2e0b5de..1bb9b76 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -29,7 +29,7 @@
 //   - list
 //   - show_info
 //
-var debugMode = true;
+var debugMode = false;
 const apiURL = "http://z.kaotisk-hund.com:8010/";
 const version = "v0";
 const listRequest = `${apiURL}${version}/list`
@@ -482,10 +482,10 @@ function createImage(pixels, hash, what)
                 for (var k = 0; k < radius; ++k)
                 {
                     var subpixel = pixel_to_be_enhanced;
-                    if ( i > radius - Math.floor(radius/2) )
-                    {
-                        debugLog(i);
-                    }
+                    // if ( i > radius - Math.floor(radius/2) )
+                    // {
+                    //     debugLog(i);
+                    // }
                     c = (x*radius)+k;
                     r = (y*radius)+i;
                     context.fillStyle = subpixel;