Files
btmx/static/radio.js

67 lines
2.4 KiB
JavaScript

// radio.js — floating radio player (bottom-left).
//
// Markup comes from render.lua (only when the radio feature is enabled);
// the channel list is lazily fetched by HTMX from /radio/channels on the
// first expand. Volume and last-played channel persist in localStorage.
(function () {
function init() {
var player = document.getElementById('radio-player');
if (!player) return;
var audio = document.getElementById('radio-audio');
var play = document.getElementById('radio-play');
var vol = document.getElementById('radio-vol');
var expand = document.getElementById('radio-expand');
var channels = document.getElementById('radio-channels');
function markActive() {
channels.querySelectorAll('.radio-ch').forEach(function (b) {
b.classList.toggle('radio-ch-active', b.dataset.url === audio.src);
});
}
// Restore persisted state.
var savedVol = parseFloat(localStorage.getItem('radio_vol'));
if (!isNaN(savedVol)) vol.value = Math.round(savedVol * 100);
audio.volume = vol.value / 100;
var savedSrc = localStorage.getItem('radio_src');
if (savedSrc) {
audio.src = savedSrc;
play.disabled = false;
}
play.addEventListener('click', function () {
if (audio.paused) audio.play(); else audio.pause();
});
audio.addEventListener('play', function () { player.classList.add('radio-playing'); });
audio.addEventListener('pause', function () { player.classList.remove('radio-playing'); });
vol.addEventListener('input', function () {
audio.volume = vol.value / 100;
localStorage.setItem('radio_vol', String(audio.volume));
});
expand.addEventListener('click', function () {
var opening = channels.hidden;
channels.hidden = !opening;
expand.setAttribute('aria-expanded', opening ? 'true' : 'false');
expand.classList.toggle('radio-open', opening);
});
channels.addEventListener('click', function (e) {
var btn = e.target.closest('.radio-ch');
if (!btn) return;
audio.src = btn.dataset.url;
audio.play();
play.disabled = false;
localStorage.setItem('radio_src', audio.src);
markActive();
});
// Highlight the saved channel once HTMX loads the list.
channels.addEventListener('htmx:afterSwap', markActive);
}
document.addEventListener('DOMContentLoaded', init);
})();