mrwnslz/diora-web
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Fix radio sidebar play buttons broken by JSON.stringify double quotes
All checks were successful
Build and push Docker image / build (push) Successful in 14s
Details
Test / test (push) Successful in 16s
Details

Browse source 
Inline onclick='playStation("url", "name", null)' broke because
JSON.stringify wraps strings in double quotes, conflicting with the
onclick attribute quotes. Replaced with data attributes + addEventListener.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
marwin 2026-04-05 17:32:05 +02:00
parent f5c141626f
commit def879de2d
1 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
static/js/app.js
View file

@ -4532,11 +4532,7 @@ function openRadioSidebar() {
const rows = [...document.querySelectorAll('#saved-tbody tr[data-id]')]; const rows = [...document.querySelectorAll('#saved-tbody tr[data-id]')];
const stationsHtml = rows.length const stationsHtml = rows.length
? rows.map(r => { ? 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('')
const url = JSON.stringify(r.dataset.url || '');
const name = JSON.stringify(r.dataset.name || '');
return `<li><button class="btn btn-sm" onclick="playStation(${url},${name},null)">${escapeHtml(r.dataset.name || '')}</button></li>`;
}).join('')
: `<li class="muted">No saved stations.</li>`; : `<li class="muted">No saved stations.</li>`;
const html = ` const html = `
@ -4545,14 +4541,27 @@ function openRadioSidebar() {
${track ? `<div class="rsb-track muted">${track}</div>` : ''} ${track ? `<div class="rsb-track muted">${track}</div>` : ''}
</div> </div>
<div class="rsb-controls"> <div class="rsb-controls">
<button class="btn ${isPlaying ? 'playing' : ''}" onclick="togglePlayStop()">${isPlaying ? '⏹ Stop' : '▶ Play'}</button> <button class="btn ${isPlaying ? 'playing' : ''}" id="rsb-playstop">${isPlaying ? '⏹ Stop' : '▶ Play'}</button>
<label class="rsb-vol">vol <input type="range" id="rsb-volume" min="0" max="255" value="${vol}" <label class="rsb-vol">vol <input type="range" id="rsb-volume" min="0" max="255" value="${vol}"></label>
oninput="const v=this.value;document.getElementById('volume').value=v;document.getElementById('volume-num').value=v;audio.volume=v/255"></label>
</div> </div>
<ul class="rsb-station-list">${stationsHtml}</ul> <ul class="rsb-station-list">${stationsHtml}</ul>
`; `;
openSidebar('Radio', html); 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));
});
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------