From def879de2db612a11b239d0e9b73ba0f140b49f0 Mon Sep 17 00:00:00 2001
From: marwin <marwin@creamfresh.xyz>
Date: Sun, 5 Apr 2026 17:32:05 +0200
Subject: [PATCH] Fix radio sidebar play buttons broken by JSON.stringify
 double quotes

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>
---
 static/js/app.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index dcdee81..4230479 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -4532,11 +4532,7 @@ function openRadioSidebar() {
 
   const rows = [...document.querySelectorAll('#saved-tbody tr[data-id]')];
   const stationsHtml = rows.length
-    ? rows.map(r => {
-        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('')
+    ? 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">No saved stations.</li>`;
 
   const html = `
@@ -4545,14 +4541,27 @@ function openRadioSidebar() {
       ${track ? `<div class="rsb-track muted">${track}</div>` : ''}
     </div>
     <div class="rsb-controls">
-      <button class="btn ${isPlaying ? 'playing' : ''}" onclick="togglePlayStop()">${isPlaying ? '⏹ Stop' : '▶ Play'}</button>
-      <label class="rsb-vol">vol <input type="range" id="rsb-volume" min="0" max="255" value="${vol}"
-        oninput="const v=this.value;document.getElementById('volume').value=v;document.getElementById('volume-num').value=v;audio.volume=v/255"></label>
+      <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>
     </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));
+  });
 }
 
 // ---------------------------------------------------------------------------