diff options
Diffstat (limited to 'client/index.html')
| -rw-r--r-- | client/index.html | 358 |
1 files changed, 188 insertions, 170 deletions
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> |