diff options
| author | kaotisk <kaotisk@arching-kaos.org> | 2024-10-12 05:49:49 +0300 |
|---|---|---|
| committer | kaotisk <kaotisk@arching-kaos.org> | 2024-10-12 05:49:49 +0300 |
| commit | 279fed865c9033f0127dd4c3871f2a1315178efc (patch) | |
| tree | 358c1752cd67516acde0501439aa02150ac1d25b /client | |
| parent | a73479cf89327512e886cfc0a6b829fbb0319231 (diff) | |
| download | arching-kaos-radio-279fed865c9033f0127dd4c3871f2a1315178efc.tar.gz arching-kaos-radio-279fed865c9033f0127dd4c3871f2a1315178efc.tar.bz2 arching-kaos-radio-279fed865c9033f0127dd4c3871f2a1315178efc.zip | |
Look and feel enhance
Diffstat (limited to 'client')
| -rw-r--r-- | client/index.html | 24 | ||||
| -rw-r--r-- | client/js/radio_emulator.js | 2 |
2 files changed, 18 insertions, 8 deletions
diff --git a/client/index.html b/client/index.html index 1025d69..daa861b 100644 --- a/client/index.html +++ b/client/index.html @@ -17,17 +17,25 @@ Sometimes, you will 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. Three to four times would be enough. + over. </p> - <button onclick="sync_radio()">Sync!</button> - <progress></progress> - <div style="display:flex; flex-direction:row; align-items: center; gap: 3px;"> + <p> + 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;"> + <button onclick="sync_radio()">Sync!</button> + <progress style="width: 100%;"></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> </div> - <div class="radio-player" hidden> + <div class="radio-player"> <audio preload="auto" controls style="width: 100%;"> <source src=""/> </audio> @@ -40,7 +48,7 @@ <tr> <th>Artist</th> <th>Title</th> - <th>Duration</th> + <th>Starts On</th> </tr> <tr> <td class="artist"></td> @@ -67,9 +75,9 @@ <h2>Data segments</h2> <div class="groups"> <h3>Hash of current show</h3> - <p class="current-show-hash"></p> + <p style="overflow-x: auto;" class="current-show-hash"></p> <h3>Hash of list</h3> - <p class="list-hash"></p> + <p style="overflow-x: auto;" class="list-hash"></p> </div> </div> <div> diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js index 56222c4..2df187b 100644 --- a/client/js/radio_emulator.js +++ b/client/js/radio_emulator.js @@ -42,6 +42,7 @@ var ProgressBar = document.querySelector('progress'); var startsOnP = document.querySelector('.starts-on'); var showDurationP = document.querySelector('.show-duration'); var relativeTime = document.querySelector('.relative-time'); +var listeningAt = document.querySelector('.listening-at'); const documentTitle = "Radio Station Emulator"; const separator = " :: "; @@ -61,6 +62,7 @@ function increaseSeconds() youAreHere.innerText = seconds_here; ProgressBar.value = parseInt(currentTimeP.innerText) + seconds_here; relativeTime.innerText = parseInt(currentTimeP.innerText) + seconds_here; + listeningAt.innerText = Math.floor(audioElement.currentTime); return seconds_here; } function getSecondsHere() |