diora-web/static/js/app/80-radio-sidebar.js

45 lines
2 KiB
JavaScript
Raw Normal View History

'use strict';
// ---------------------------------------------------------------------------
// Radio sidebar (compact player)
// ---------------------------------------------------------------------------
function openRadioSidebar() {
const stationName = currentStation ? escapeHtml(currentStation.name) : '— kein Sender —';
const track = currentTrack ? escapeHtml(currentTrack) : '';
const vol = document.getElementById('volume')?.value ?? 204;
const rows = [...document.querySelectorAll('#saved-tbody tr[data-id]')];
const stationsHtml = rows.length
? rows.map(r => `<li><button class="btn btn-sm rsb-play-btn" data-url="${escapeHtml(r.dataset.url || '')}" data-name="${escapeHtml(r.dataset.name || '')}">${escapeHtml(r.dataset.name || '')}</button></li>`).join('')
: `<li class="muted">Keine gespeicherten Sender.</li>`;
const html = `
<div class="rsb-nowplaying">
<div class="rsb-station-name">${stationName}</div>
${track ? `<div class="rsb-track muted">${track}</div>` : ''}
</div>
<div class="rsb-controls">
<button class="btn ${isPlaying ? 'playing' : ''}" id="rsb-playstop">${isPlaying ? '⏹ Stopp' : '▶ Abspielen'}</button>
<label class="rsb-vol">Lautst. <input type="range" id="rsb-volume" min="0" max="255" value="${vol}"></label>
</div>
<ul class="rsb-station-list">${stationsHtml}</ul>
`;
openSidebar('Radio', html);
const body = $('sidebar-body');
body.querySelector('#rsb-playstop').addEventListener('click', togglePlayStop);
body.querySelector('#rsb-volume').addEventListener('input', function () {
const v = this.value;
const mainSlider = document.getElementById('volume');
const mainNum = document.getElementById('volume-num');
if (mainSlider) mainSlider.value = v;
if (mainNum) mainNum.value = v;
audio.volume = v / 255;
});
body.querySelectorAll('.rsb-play-btn').forEach(btn => {
btn.addEventListener('click', () => playStation(btn.dataset.url, btn.dataset.name, null));
});
}