ranger/rangerhq-radio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(0.3.0): dark theme, mute, media keys, current-track + 2nd-look fixes

Browse Source 
Closes the gaps from a UI review of v0.2.0.

Added
- Mute toggle: speaker icon is now a button; remembers prior volume.
- MediaSession API: OS media keys / headphone buttons / lock-screen
  widget play/pause the radio. Metadata exposes station + SomaFM + genre.
- Current-track display: polls https://somafm.com/songs/{code}.json every
  30s while playing; shown as `♪ Title — Artist` under the description.
  Best-effort — silently hidden if CORS-blocked / unreachable.

Fixed (2nd-look)
- Dark theme now actually renders. v0.2.0 saved the dropdown but had no
  CSS — add `admin_body_class` filter + `radio-theme-{auto,light,dark}`
  CSS for the player + about-cards. `auto` follows OS prefers-color-scheme.
- Settings-page volume slider: removed inline `oninput`; wired in radio.js
  via `bindSettingsSlider()`. Cleaner under strict CSP.
- Save errors surface as a transient notice instead of being swallowed.
- Gitea changelog URL moved into `RADIO_GITEA_URL` constant.
- Genre badge restyled as an inline pill (was using `margin-left: auto`
  which wrapped poorly on narrow widget widths).

Files
- radio.php (version, constant, strings, body-class filter)
- inc/about.php (use constant, add 0.3.0 history entry)
- inc/settings.php (drop inline oninput)
- inc/admin-page.php + inc/dashboard-widget.php (mute button, track slot)
- assets/css/radio.css (pill, mute, track, dark-theme rules)
- assets/js/radio.js (rewrite: mute, MediaSession, track polling,
  settings slider, save-error surfacing)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
David Keane
2026-05-29 22:56:57 +01:00
parent 3e6994461e
commit c5a4b28b29
8 changed files with 353 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/radio.js
+168 -41
View File
@@ -6,15 +6,25 @@
* surface). Persists station + volume changes via AJAX so they survive
* page reloads.
*
* No build step. No dependencies. Plain ES5 + a few ES6 features that
* every browser supporting <audio> already has.
* v0.3.0 additions:
* - Mute toggle on the speaker icon (preserves prior volume).
* - MediaSession API integration — OS media keys (F8 on Mac, headphone
* buttons, lock-screen widget) control the player.
* - SomaFM current-track polling (every 30s while playing). Best-effort:
* silently hidden if the API is unavailable / CORS-blocked.
* - Save errors surface to the user as a transient notice rather than
* being swallowed silently.
* - Settings-page volume slider live-label is wired here (no inline
* `oninput` in settings.php).
*
* No build step. No dependencies.
*/
(function () {
'use strict';
if (typeof window.RadioPlugin === 'undefined') { return; }
var cfg = window.RadioPlugin;
var cfg = window.RadioPlugin;
var stations = Array.isArray(cfg.stations) ? cfg.stations : [];
/** Look up a station by id. */
@@ -25,33 +35,45 @@
return null;
}
/** Persist a state patch back to the server. Best-effort: a failed
* save doesn't block the local UI from updating. */
function saveState(patch) {
/** Extract the SomaFM short-code from a stream URL.
* e.g. https://ice1.somafm.com/groovesalad-128-mp3 → "groovesalad".
* Used for the current-track JSON endpoint. */
function getSomaCode(station) {
if (!station || !station.url) { return null; }
var m = station.url.match(/somafm\.com\/([^/]+?)-\d+-mp3/);
return m ? m[1] : null;
}
/** Persist a state patch back to the server. On failure, surface a
* transient notice on the originating player surface (if given) so
* the user knows their preference didn't save. */
function saveState(patch, surface) {
if (!cfg.ajaxUrl || !cfg.nonce) { return; }
var fd = new FormData();
fd.append('action', 'radio_save_state');
fd.append('nonce', cfg.nonce);
Object.keys(patch).forEach(function (k) {
fd.append(k, patch[k]);
});
Object.keys(patch).forEach(function (k) { fd.append(k, patch[k]); });
fetch(cfg.ajaxUrl, {
method: 'POST',
method: 'POST',
credentials: 'same-origin',
body: fd
}).catch(function () { /* swallow — local UI already updated */ });
body: fd
}).then(function (r) {
if (!r.ok) { throw new Error('save failed: HTTP ' + r.status); }
}).catch(function (err) {
if (window.console && console.warn) { console.warn('Radio:', err); }
if (surface) {
showError(surface, cfg.strings.saveError || 'Preferences not saved.');
setTimeout(function () { showError(surface, null); }, 3500);
}
});
}
/** Update play/pause button icon + label to reflect current audio state. */
function setPlayIcon(btn, playing) {
var icon = btn.querySelector('.dashicons');
var icon = btn.querySelector('.dashicons');
var label = btn.querySelector('[data-radio-play-label]');
if (icon) {
icon.className = 'dashicons ' + (playing ? 'dashicons-controls-pause' : 'dashicons-controls-play');
}
if (label) {
label.textContent = playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play');
}
if (icon) { icon.className = 'dashicons ' + (playing ? 'dashicons-controls-pause' : 'dashicons-controls-play'); }
if (label) { label.textContent = playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'); }
btn.setAttribute('title', playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'));
}
@@ -68,6 +90,86 @@
}
}
/** Update the MediaSession metadata + handlers so OS media keys work. */
function updateMediaSession(audio, station) {
if (!('mediaSession' in navigator) || !station) { return; }
try {
if (typeof window.MediaMetadata === 'function') {
navigator.mediaSession.metadata = new window.MediaMetadata({
title: station.name,
artist: 'SomaFM',
album: station.genre || ''
});
}
navigator.mediaSession.setActionHandler('play', function () { audio.play(); });
navigator.mediaSession.setActionHandler('pause', function () { audio.pause(); });
} catch (e) { /* ignore — older browsers / locked-down contexts */ }
}
/** SomaFM current-track polling. Best-effort: stays hidden if the API
* is unreachable / CORS-blocked (the plugin keeps working regardless). */
function startTrackPolling(player, station) {
stopTrackPolling(player);
var trackEl = player.querySelector('[data-radio-track]');
if (!trackEl) { return; }
var code = getSomaCode(station);
if (!code) { trackEl.hidden = true; return; }
var url = 'https://somafm.com/songs/' + code + '.json';
function fetchTrack() {
fetch(url, { credentials: 'omit', cache: 'no-store' })
.then(function (r) { return r.ok ? r.json() : null; })
.then(function (data) {
if (!data || !data.songs || !data.songs.length) { trackEl.hidden = true; return; }
var s = data.songs[0];
var title = (s.title || '').trim();
var artist = (s.artist || '').trim();
if (!title && !artist) { trackEl.hidden = true; return; }
trackEl.textContent = artist ? (title + ' — ' + artist) : title;
trackEl.hidden = false;
})
.catch(function () { trackEl.hidden = true; });
}
fetchTrack();
player._trackTimer = setInterval(fetchTrack, 30000);
}
function stopTrackPolling(player) {
if (player._trackTimer) {
clearInterval(player._trackTimer);
player._trackTimer = null;
}
var trackEl = player.querySelector('[data-radio-track]');
if (trackEl) { trackEl.hidden = true; trackEl.textContent = ''; }
}
/** Mute toggle. Remembers the volume at mute-time so unmute restores it. */
function bindMute(player, audio, volumeIn, volPctEl) {
var muteBtn = player.querySelector('[data-radio-mute]');
if (!muteBtn) { return; }
muteBtn.addEventListener('click', function () {
var icon = muteBtn.querySelector('.dashicons');
if (audio.muted || audio.volume === 0) {
// Unmute → restore stored prior volume (default 0.6 if we never had one)
var prev = parseFloat(muteBtn.dataset.prevVolume || '0.6');
audio.muted = false;
audio.volume = prev;
if (volumeIn) { volumeIn.value = Math.round(prev * 100); }
if (volPctEl) { volPctEl.textContent = Math.round(prev * 100) + '%'; }
muteBtn.classList.remove('radio-player__mute--muted');
muteBtn.setAttribute('aria-label', cfg.strings.mute || 'Mute');
if (icon) { icon.className = 'dashicons dashicons-controls-volumeon'; }
} else {
// Mute → store current volume, drop to 0
muteBtn.dataset.prevVolume = String(audio.volume);
audio.muted = true;
muteBtn.classList.add('radio-player__mute--muted');
muteBtn.setAttribute('aria-label', cfg.strings.unmute || 'Unmute');
if (icon) { icon.className = 'dashicons dashicons-controls-volumeoff'; }
}
});
}
/** Wire up one .radio-player surface (widget or main). */
function bindPlayer(player) {
var audio = player.querySelector('[data-radio-audio]');
@@ -80,16 +182,14 @@
if (!audio || !playBtn || !stationSel) { return; }
var currentId = stationSel.value;
var station = findStation(currentId);
var currentId = stationSel.value;
var station = findStation(currentId);
if (station) {
audio.src = station.url;
audio.src = station.url;
audio.volume = parseFloat(cfg.state && cfg.state.volume != null ? cfg.state.volume : 0.6);
updateMediaSession(audio, station);
}
if (volumeIn) {
volumeIn.value = Math.round(audio.volume * 100);
}
if (volumeIn) { volumeIn.value = Math.round(audio.volume * 100); }
playBtn.addEventListener('click', function () {
showError(player, null);
@@ -98,9 +198,6 @@
if (p && p.catch) {
p.catch(function (err) {
if (err && err.name === 'NotAllowedError') {
// Autoplay was blocked — user has to click play first.
// Since this IS the click handler, this branch is rare;
// log it and surface a polite message.
showError(player, cfg.strings.error || 'Click play again to start.');
} else {
showError(player, cfg.strings.error || 'Stream error.');
@@ -112,14 +209,24 @@
}
});
audio.addEventListener('play', function () { setPlayIcon(playBtn, true); });
audio.addEventListener('pause', function () { setPlayIcon(playBtn, false); });
audio.addEventListener('error', function () { showError(player, cfg.strings.error || 'Stream error.'); setPlayIcon(playBtn, false); });
audio.addEventListener('play', function () {
setPlayIcon(playBtn, true);
startTrackPolling(player, findStation(stationSel.value));
});
audio.addEventListener('pause', function () {
setPlayIcon(playBtn, false);
stopTrackPolling(player);
});
audio.addEventListener('error', function () {
showError(player, cfg.strings.error || 'Stream error.');
setPlayIcon(playBtn, false);
stopTrackPolling(player);
});
audio.addEventListener('canplay', function () { showError(player, null); });
stationSel.addEventListener('change', function () {
var newId = stationSel.value;
var s = findStation(newId);
var s = findStation(newId);
if (!s) { return; }
var wasPlaying = !audio.paused;
audio.pause();
@@ -129,9 +236,10 @@
if (descEl) { descEl.textContent = s.description || ''; }
var genreEl = player.querySelector('[data-radio-genre]');
if (genreEl) { genreEl.textContent = s.genre || ''; }
// Mirror selection to any OTHER .radio-player surfaces on the page.
stopTrackPolling(player); // clear last station's track
updateMediaSession(audio, s);
mirrorSelection(player, newId);
saveState({ station_id: newId });
saveState({ station_id: newId }, player);
if (wasPlaying) {
audio.play().catch(function () { showError(player, cfg.strings.error || 'Stream error.'); });
}
@@ -141,16 +249,25 @@
volumeIn.addEventListener('input', function () {
var pct = parseInt(volumeIn.value, 10) || 0;
var vol = Math.max(0, Math.min(100, pct)) / 100;
audio.muted = false;
audio.volume = vol;
if (volPctEl) { volPctEl.textContent = pct + '%'; }
// Manual volume change exits mute state visibly.
var muteBtn = player.querySelector('[data-radio-mute]');
if (muteBtn) {
muteBtn.classList.remove('radio-player__mute--muted');
var icon = muteBtn.querySelector('.dashicons');
if (icon) { icon.className = 'dashicons dashicons-controls-volumeon'; }
}
mirrorVolume(player, pct);
// Debounced save — save once 400ms after the user stops dragging.
clearTimeout(volumeIn._saveTimer);
volumeIn._saveTimer = setTimeout(function () {
saveState({ volume: vol });
saveState({ volume: vol }, player);
}, 400);
});
}
bindMute(player, audio, volumeIn, volPctEl);
}
/** Keep all .radio-player surfaces on the same station. */
@@ -183,16 +300,26 @@
var label = other.querySelector('[data-radio-volume-pct]');
if (label) { label.textContent = pct + '%'; }
var au = other.querySelector('[data-radio-audio]');
if (au) { au.volume = pct / 100; }
if (au) { au.volume = pct / 100; au.muted = false; }
}
});
}
/** Wire the Settings page volume slider's live percentage label.
* Replaces the inline `oninput` attribute removed in v0.3.0. */
function bindSettingsSlider() {
var slider = document.getElementById('default_volume');
var label = document.getElementById('default_volume_label');
if (!slider || !label) { return; }
slider.addEventListener('input', function () {
label.textContent = slider.value + '%';
});
}
function init() {
var players = document.querySelectorAll('.radio-player');
for (var i = 0; i < players.length; i++) {
bindPlayer(players[i]);
}
for (var i = 0; i < players.length; i++) { bindPlayer(players[i]); }
bindSettingsSlider();
}
if (document.readyState === 'loading') {