diff options
Diffstat (limited to 'client/index.html')
| -rw-r--r-- | client/index.html | 202 |
1 files changed, 2 insertions, 200 deletions
diff --git a/client/index.html b/client/index.html index 426de56..c2b889e 100644 --- a/client/index.html +++ b/client/index.html @@ -7,209 +7,11 @@ <link rel="stylesheet preload" href="./css/styles.css" type="text/css" as="style"/> </head> <body> - <div> - <div class="header"> - <img class="logo" src="./img/logo.jpg"/> - <div> - <h1>Radio Station Emulator</h1> - <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> - <div class="main"> - <div class="start-top"> - <div class="div-groups" style="flex-grow:1;"> - <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="start_radio()">Start!</button> - <button onclick="sync_radio()">Sync!</button> - </div> - </div> - </div> - <div class="previously-played"> - </div> - </div> - <div class="more-details"> - <details> - <summary>Progress 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> - <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>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>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 id="page-layout"> </div> <script src="./js/arching-kaos-generator.js"></script> <script src="./js/image_generator.js"></script> - <script src="./js/app.js"></script> <script src="./js/radio_emulator.js"></script> + <script src="./js/app.js"></script> </body> </html> |