diff options
| author | heqnx <root@heqnx.com> | 2025-07-05 13:47:40 +0300 |
|---|---|---|
| committer | heqnx <root@heqnx.com> | 2025-07-05 13:47:40 +0300 |
| commit | 7ff2aaef6717b97278d97e40143e0dec22924fa5 (patch) | |
| tree | 2124d5358bdb58caf9147f2a022e2dc65c8ae458 /templates/var/www/html/index.html | |
| parent | e95318bcada0feb1dcdd44773e690b2addc6de38 (diff) | |
| download | ansible-icecast2-7ff2aaef6717b97278d97e40143e0dec22924fa5.tar.gz ansible-icecast2-7ff2aaef6717b97278d97e40143e0dec22924fa5.zip | |
improvements, added metadata to script convertor, added spinnet, added track info to html
Diffstat (limited to 'templates/var/www/html/index.html')
| -rw-r--r-- | templates/var/www/html/index.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/templates/var/www/html/index.html b/templates/var/www/html/index.html new file mode 100644 index 0000000..14ed148 --- /dev/null +++ b/templates/var/www/html/index.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> + <link rel="icon" href="data:," /> + <link rel="stylesheet" href="style.css" /> + <title>{{ radio_name }}</title> +</head> +<body> + <div class="index-container"> + <div class="player-wrapper"> + <a id="radioButton" class="btn" href="#">Play</a> + <div id="info"></div> + <audio id="radioPlayer" hidden> + <source src="/stream" type="audio/ogg" /> + Your browser does not support the audio element. + </audio> + </div> + </div> + + <script> + const player = document.getElementById('radioPlayer'); + const button = document.getElementById('radioButton'); + const infoEl = document.getElementById('info'); + + button.addEventListener('click', () => { + if (player.paused) { + player.play(); + button.textContent = 'Stop'; + } else { + player.pause(); + player.currentTime = 0; + button.textContent = 'Play'; + } + }); + + let spinnerInterval; + + function startSpinner() { + const spinnerChars = ['|', '/', '-', '\\']; + let i = 0; + spinnerInterval = setInterval(() => { + infoEl.textContent = `${spinnerChars[i++ % spinnerChars.length]}`; + }, 100); + } + + function stopSpinner() { + clearInterval(spinnerInterval); + } + + let spinnerHasRun = false; + + async function fetchCurrentTrack() { + if (!spinnerHasRun) { + startSpinner(); + await new Promise(resolve => setTimeout(resolve, 3000)); + } + + try { + const response = await fetch('/info'); + if (!response.ok) throw new Error('Network response was not ok'); + + const data = await response.json(); + const source = data.icestats.source; + + const title = source.title || 'Unknown'; + const bitrate = source['ice-bitrate'] || 0; + const listeners = source.listeners || 0; + const listenerLabel = listeners === 1 ? 'listener' : 'listeners'; + + stopSpinner(); + infoEl.textContent = `${title} | ${bitrate} kbps | ${listeners} ${listenerLabel}`; + + spinnerHasRun = true; + + } catch (error) { + stopSpinner(); + infoEl.textContent = 'Error loading track info'; + console.error(error); + } + } + + fetchCurrentTrack(); + setInterval(fetchCurrentTrack, 10000); + </script> +</body> +</html> |