Fix stream player autoplay: handle blocked play() promise
All checks were successful
Build and push Docker image / build (push) Successful in 11s
Test / test (push) Successful in 17s

window.open() doesn't transfer the user gesture to the new tab, so autoplay
is blocked. Previously play().catch(()=>{}) swallowed the error silently while
setting playing=true, leaving the UI in a broken state.

Now: if play() rejects, reset state and show "Click Play to start". The user's
click on the Play button IS a user gesture, so it succeeds on the second attempt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
marwin 2026-03-22 10:39:43 +01:00
parent ee8cfd8314
commit 9e08079dec

View file

@ -118,22 +118,28 @@
function startPlay() { function startPlay() {
audio.src = streamUrl; audio.src = streamUrl;
setVol(parseInt(slider.value, 10)); setVol(parseInt(slider.value, 10));
audio.play().catch(() => {}); audio.play().then(() => {
playing = true; playing = true;
playBtn.innerHTML = '&#9646;&#9646; Stop'; playBtn.innerHTML = '&#9646;&#9646; Stop';
// SSE metadata if (sse) sse.close();
if (sse) sse.close(); sse = new EventSource('/radio/sse/?url=' + encodeURIComponent(streamUrl));
sse = new EventSource('/radio/sse/?url=' + encodeURIComponent(streamUrl)); sse.onmessage = e => {
sse.onmessage = e => { try {
try { const data = JSON.parse(e.data);
const data = JSON.parse(e.data); if (data.track) {
if (data.track) { document.getElementById('track-name').textContent = data.track;
document.getElementById('track-name').textContent = data.track; document.title = data.track + ' — ' + stationName;
document.title = data.track + ' — ' + stationName; }
} } catch (_) {}
} catch (_) {} };
}; }).catch(() => {
// Autoplay blocked — reset state, prompt user to click
playing = false;
audio.src = '';
playBtn.innerHTML = '&#9654; Play';
document.getElementById('track-name').textContent = 'Click Play to start';
});
} }
function stopPlay() { function stopPlay() {