diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/css/styles.css | 53 | ||||
| -rw-r--r-- | client/index.html | 358 | ||||
| -rw-r--r-- | client/js/radio_emulator.js | 10 |
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; |