feat(0.3.0): dark theme, mute, media keys, current-track + 2nd-look fixes
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:
@@ -9,6 +9,32 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
|
||||
|
||||
---
|
||||
|
||||
## [0.3.0] — 2026-05-29 — Dark theme + mute + media keys + current-track display
|
||||
|
||||
A polish pass that closes the gaps surfaced by a UI review. Two categories: **2nd-look fixes** (things the previous release implied but didn't actually deliver) and **nice-to-haves** (small upgrades that lift the admin-player feel).
|
||||
|
||||
### Added — features
|
||||
- **Mute toggle on the speaker icon.** The icon next to the volume slider is now a button. Click to mute (icon flips to `dashicons-controls-volumeoff`, tinted red); click again to restore the prior volume. Remembers volume across mute/unmute via `data-prev-volume`.
|
||||
- **MediaSession API integration.** OS media keys (F8/F9 on Mac, Bluetooth headphone buttons, lock-screen widget on supported platforms) now play/pause the radio. The currently-playing station name, "SomaFM" as artist, and the genre as album are exposed as `MediaMetadata` so they show on the OS overlays.
|
||||
- **Current-track display.** Polls `https://somafm.com/songs/{code}.json` every 30 seconds **while playing only** and shows the track as `♪ Title — Artist` under the station description. Best-effort: silently hidden if the endpoint is unreachable / CORS-blocked, so the plugin keeps working regardless.
|
||||
|
||||
### Fixed — 2nd-look
|
||||
- **Dark theme is now actually wired through.** v0.2.0 saved the Theme dropdown (auto / light / dark) but had no CSS to render anything other than light. v0.3.0 adds `admin_body_class` filter → `radio-theme-{auto,light,dark}` body class → corresponding dark-palette CSS for the player + about-cards. `auto` follows the OS via `prefers-color-scheme: dark`.
|
||||
- **Settings-page volume slider** no longer uses an inline `oninput=""` handler — the listener moved into `assets/js/radio.js` (`bindSettingsSlider`). Cleaner under strict-CSP environments.
|
||||
- **Save errors are surfaced.** AJAX state-save failures were previously swallowed silently — the local UI updated but the user had no signal if the server dropped the request. The plugin now shows a brief notice ("Preferences not saved — check your connection.") in the player's error slot for 3.5 s, then auto-clears.
|
||||
- **Hardcoded Gitea URL** in the About page replaced with a `RADIO_GITEA_URL` constant defined in `radio.php`. One place to update if the repo ever moves.
|
||||
- **Genre badge layout fix.** Was using `margin-left: auto` inside a wrap-enabled flex row, which caused it to land on its own line on narrow widget widths. Now styled as a small inline pill (rounded `rgba(0,0,0,0.06)` background) that flows naturally next to the station name.
|
||||
|
||||
### Other
|
||||
- Plugin version bumped to **0.3.0**.
|
||||
- New localized strings: `mute`, `unmute`, `saveError` (for the JS-driven UI).
|
||||
- The mute button has a visible focus ring (`outline: 2px solid var(--wp-admin-theme-color)`) for keyboard navigation.
|
||||
- Volume slider input now also exits mute state (sets `audio.muted = false` on drag), so dragging the slider always overrides a prior mute click.
|
||||
|
||||
**Files changed:** `radio.php` (version, constant, strings, `admin_body_class` filter), `inc/about.php` (constant for changelog URL), `inc/settings.php` (removed inline `oninput`), `inc/admin-page.php` + `inc/dashboard-widget.php` (speaker icon → mute button, added track slot), `assets/css/radio.css` (genre badge pill, mute button, track display, dark-theme rules incl. `prefers-color-scheme` for `auto`), `assets/js/radio.js` (full rewrite incl. `bindMute`, `bindSettingsSlider`, `startTrackPolling`/`stopTrackPolling`, `updateMediaSession`, save-error surfacing).
|
||||
|
||||
---
|
||||
|
||||
## [0.2.0] — 2026-05-26
|
||||
|
||||
### Changed — UI rebuilt to WordPress admin standards
|
||||
|
||||
+119
-3
@@ -44,11 +44,31 @@
|
||||
}
|
||||
|
||||
.radio-player__station-genre {
|
||||
font-size: 11px;
|
||||
color: #646970;
|
||||
font-size: 10px;
|
||||
color: #50575e;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
margin-left: auto;
|
||||
font-weight: 600;
|
||||
margin-left: 4px;
|
||||
padding: 1px 7px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Current track (poll SomaFM songs endpoint when playing). Hidden when
|
||||
we have no track info — the slot still exists in the DOM so JS can
|
||||
show/hide without layout shift on first load. */
|
||||
.radio-player__track {
|
||||
flex: 1 1 100%;
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
color: #50575e;
|
||||
font-style: italic;
|
||||
}
|
||||
.radio-player__track::before {
|
||||
content: '♪ ';
|
||||
opacity: 0.6;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/* Controls — single row, native button + slider */
|
||||
@@ -88,6 +108,26 @@
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Mute toggle — the speaker icon is a button. No chrome, just the icon,
|
||||
like a YouTube/Spotify mute affordance. Red when muted to make the
|
||||
state obvious. */
|
||||
.radio-player__mute {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
color: #646970;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.radio-player__mute:hover { color: #1d2327; }
|
||||
.radio-player__mute:focus { outline: 2px solid var(--wp-admin-theme-color, #2271b1); outline-offset: 1px; }
|
||||
.radio-player__mute--muted { color: #b32d2e; }
|
||||
.radio-player__mute--muted:hover { color: #8a2424; }
|
||||
|
||||
.radio-player__volume input[type="range"] {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
@@ -274,3 +314,79 @@
|
||||
.radio-about-changelog-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────
|
||||
* Dark theme — body.radio-theme-dark forces dark; body.radio-theme-auto
|
||||
* follows the OS via `prefers-color-scheme`. body.radio-theme-light is a
|
||||
* no-op (the existing rules above are light).
|
||||
*
|
||||
* Scope is the player + the about-cards. The WP postbox chrome stays
|
||||
* under WordPress's own admin colour scheme — we only retint surfaces
|
||||
* we own.
|
||||
* ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.radio-theme-dark .radio-player__now {
|
||||
border-bottom-color: #3c434a;
|
||||
}
|
||||
.radio-theme-dark .radio-player__station-name { color: #f0f0f1; }
|
||||
.radio-theme-dark .radio-player__label,
|
||||
.radio-theme-dark .radio-player__station-genre,
|
||||
.radio-theme-dark .radio-player__volume-pct,
|
||||
.radio-theme-dark .radio-player__credit,
|
||||
.radio-theme-dark .radio-player__mute,
|
||||
.radio-theme-dark .radio-player__station-select label,
|
||||
.radio-theme-dark .radio-player__volume .dashicons {
|
||||
color: #a7aaad;
|
||||
}
|
||||
.radio-theme-dark .radio-player__mute:hover { color: #f0f0f1; }
|
||||
.radio-theme-dark .radio-player__mute--muted { color: #ff8b8b; }
|
||||
.radio-theme-dark .radio-player__station-desc,
|
||||
.radio-theme-dark .radio-player__track,
|
||||
.radio-theme-dark .radio-intro {
|
||||
color: #c3c4c7;
|
||||
}
|
||||
.radio-theme-dark .radio-player__station-genre {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.radio-theme-dark .radio-player__error {
|
||||
background: rgba(179, 45, 46, 0.18);
|
||||
color: #ff9b9b;
|
||||
}
|
||||
.radio-theme-dark .radio-about-card {
|
||||
background: #1d2327;
|
||||
border-color: #3c434a;
|
||||
color: #c3c4c7;
|
||||
}
|
||||
.radio-theme-dark .radio-about-card h2 {
|
||||
background: #2c3338;
|
||||
color: #f0f0f1;
|
||||
border-bottom-color: #3c434a;
|
||||
}
|
||||
.radio-theme-dark #radio_dashboard_widget .radio-player__credit {
|
||||
border-top-color: #3c434a;
|
||||
}
|
||||
|
||||
/* Auto — same dark rules behind prefers-color-scheme. Duplicated rather
|
||||
than nested in @media-inside-selector (CSS doesn't allow that), kept
|
||||
line-for-line in sync with the .radio-theme-dark block above. */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.radio-theme-auto .radio-player__now { border-bottom-color: #3c434a; }
|
||||
.radio-theme-auto .radio-player__station-name { color: #f0f0f1; }
|
||||
.radio-theme-auto .radio-player__label,
|
||||
.radio-theme-auto .radio-player__station-genre,
|
||||
.radio-theme-auto .radio-player__volume-pct,
|
||||
.radio-theme-auto .radio-player__credit,
|
||||
.radio-theme-auto .radio-player__mute,
|
||||
.radio-theme-auto .radio-player__station-select label,
|
||||
.radio-theme-auto .radio-player__volume .dashicons { color: #a7aaad; }
|
||||
.radio-theme-auto .radio-player__mute:hover { color: #f0f0f1; }
|
||||
.radio-theme-auto .radio-player__mute--muted { color: #ff8b8b; }
|
||||
.radio-theme-auto .radio-player__station-desc,
|
||||
.radio-theme-auto .radio-player__track,
|
||||
.radio-theme-auto .radio-intro { color: #c3c4c7; }
|
||||
.radio-theme-auto .radio-player__station-genre { background: rgba(255, 255, 255, 0.08); }
|
||||
.radio-theme-auto .radio-player__error { background: rgba(179, 45, 46, 0.18); color: #ff9b9b; }
|
||||
.radio-theme-auto .radio-about-card { background: #1d2327; border-color: #3c434a; color: #c3c4c7; }
|
||||
.radio-theme-auto .radio-about-card h2 { background: #2c3338; color: #f0f0f1; border-bottom-color: #3c434a; }
|
||||
.radio-theme-auto #radio_dashboard_widget .radio-player__credit { border-top-color: #3c434a; }
|
||||
}
|
||||
|
||||
+168
-41
@@ -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') {
|
||||
|
||||
+6
-2
@@ -48,7 +48,11 @@ function radio_render_about_page() {
|
||||
<h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="ver">v0.2.0</span> — 26 May 2026 <span class="latest">latest</span><br>
|
||||
<span class="ver">v0.3.0</span> — 29 May 2026 <span class="latest">latest</span><br>
|
||||
<?php esc_html_e( 'Dark theme actually wired through (auto / light / dark — auto follows OS prefers-color-scheme). Mute toggle on the speaker icon. OS media keys (F8 / headphone buttons / lock-screen) play and pause via MediaSession. Current track polled from SomaFM and shown under the station description while playing. Save errors surface as a brief notice instead of being swallowed. Genre badge restyled as an inline pill.', 'radio' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
<span class="ver">v0.2.0</span> — 26 May 2026<br>
|
||||
<?php esc_html_e( 'UI rebuilt to WordPress admin standards. Postbox container, native Play/Pause button with text label, picks up your admin colour scheme via var(--wp-admin-theme-color), genre badge moved inline, dashboard widget no longer renders a card-inside-a-card. Functionality identical to v0.1.0 — purely visual polish.', 'radio' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
@@ -57,7 +61,7 @@ function radio_render_about_page() {
|
||||
</li>
|
||||
</ul>
|
||||
<a class="radio-about-changelog-link"
|
||||
href="https://git.davidtkeane.com/ranger/a-radio/src/branch/main/CHANGELOG.md"
|
||||
href="<?php echo esc_url( RADIO_GITEA_URL . '/src/branch/main/CHANGELOG.md' ); ?>"
|
||||
target="_blank" rel="noopener">
|
||||
<?php esc_html_e( 'View the full CHANGELOG.md →', 'radio' ); ?>
|
||||
</a>
|
||||
|
||||
+4
-1
@@ -45,6 +45,7 @@ function radio_render_main_page() {
|
||||
<span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></span>
|
||||
<span class="radio-player__station-genre" data-radio-genre><?php echo esc_html( $station['genre'] ); ?></span>
|
||||
<p class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
|
||||
<p class="radio-player__track" data-radio-track hidden></p>
|
||||
</div>
|
||||
|
||||
<div class="radio-player__controls">
|
||||
@@ -54,7 +55,9 @@ function radio_render_main_page() {
|
||||
</button>
|
||||
|
||||
<div class="radio-player__volume">
|
||||
<span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
|
||||
<button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'radio' ); ?>">
|
||||
<span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
|
||||
</button>
|
||||
<input type="range" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" data-radio-volume aria-label="<?php esc_attr_e( 'Volume', 'radio' ); ?>">
|
||||
<span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
|
||||
</div>
|
||||
|
||||
@@ -38,6 +38,7 @@ function radio_render_dashboard_widget() {
|
||||
<span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></span>
|
||||
<span class="radio-player__station-genre" data-radio-genre><?php echo esc_html( $station['genre'] ); ?></span>
|
||||
<p class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
|
||||
<p class="radio-player__track" data-radio-track hidden></p>
|
||||
</div>
|
||||
|
||||
<div class="radio-player__controls">
|
||||
@@ -47,7 +48,9 @@ function radio_render_dashboard_widget() {
|
||||
</button>
|
||||
|
||||
<div class="radio-player__volume">
|
||||
<span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
|
||||
<button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'radio' ); ?>">
|
||||
<span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
|
||||
</button>
|
||||
<input type="range" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" data-radio-volume aria-label="<?php esc_attr_e( 'Volume', 'radio' ); ?>">
|
||||
<span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -82,7 +82,7 @@ function radio_render_settings_page() {
|
||||
<label for="default_volume"><?php esc_html_e( 'Default volume', 'radio' ); ?></label>
|
||||
</th>
|
||||
<td>
|
||||
<input type="range" id="default_volume" name="default_volume" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" oninput="document.getElementById('default_volume_label').textContent = this.value + '%'">
|
||||
<input type="range" id="default_volume" name="default_volume" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" aria-describedby="default_volume_label">
|
||||
<span id="default_volume_label"><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
* Plugin Name: Radio
|
||||
* Plugin URI: https://icanhelp.ie/radio
|
||||
* Description: A small, focused, free radio player for your WordPress admin. 44 SomaFM stations grouped by 10 genres — ambient, electronic, lounge, rock, metal, jazz, world, reggae, holiday, specials. Plays via HTML5 audio; volume + station choice persist per-user.
|
||||
* Version: 0.2.0
|
||||
* Version: 0.3.0
|
||||
* Requires at least: 5.0
|
||||
* Requires PHP: 7.4
|
||||
* Author: David Keane
|
||||
@@ -20,11 +20,12 @@
|
||||
if ( ! defined( 'ABSPATH' ) ) { exit; }
|
||||
|
||||
// Plugin coordinates.
|
||||
if ( ! defined( 'RADIO_VERSION' ) ) { define( 'RADIO_VERSION', '0.2.0' ); }
|
||||
if ( ! defined( 'RADIO_FILE' ) ) { define( 'RADIO_FILE', __FILE__ ); }
|
||||
if ( ! defined( 'RADIO_PATH' ) ) { define( 'RADIO_PATH', plugin_dir_path( __FILE__ ) ); }
|
||||
if ( ! defined( 'RADIO_URL' ) ) { define( 'RADIO_URL', plugin_dir_url( __FILE__ ) ); }
|
||||
if ( ! defined( 'RADIO_BASENAME' ) ) { define( 'RADIO_BASENAME', plugin_basename( __FILE__ ) ); }
|
||||
if ( ! defined( 'RADIO_VERSION' ) ) { define( 'RADIO_VERSION', '0.3.0' ); }
|
||||
if ( ! defined( 'RADIO_FILE' ) ) { define( 'RADIO_FILE', __FILE__ ); }
|
||||
if ( ! defined( 'RADIO_PATH' ) ) { define( 'RADIO_PATH', plugin_dir_path( __FILE__ ) ); }
|
||||
if ( ! defined( 'RADIO_URL' ) ) { define( 'RADIO_URL', plugin_dir_url( __FILE__ ) ); }
|
||||
if ( ! defined( 'RADIO_BASENAME' ) ) { define( 'RADIO_BASENAME', plugin_basename( __FILE__ ) ); }
|
||||
if ( ! defined( 'RADIO_GITEA_URL' ) ) { define( 'RADIO_GITEA_URL', 'https://git.davidtkeane.com/ranger/a-radio' ); }
|
||||
|
||||
// Includes — each file owns one concern.
|
||||
require_once RADIO_PATH . 'inc/stations.php'; // the 44-station array + genre helpers
|
||||
@@ -124,6 +125,9 @@ function radio_enqueue_admin_assets( $hook ) {
|
||||
'pause' => __( 'Pause', 'radio' ),
|
||||
'loading' => __( 'Loading…', 'radio' ),
|
||||
'error' => __( 'Stream error — try another station.', 'radio' ),
|
||||
'saveError' => __( 'Preferences not saved — check your connection.', 'radio' ),
|
||||
'mute' => __( 'Mute', 'radio' ),
|
||||
'unmute' => __( 'Unmute', 'radio' ),
|
||||
'nowPlaying' => __( 'Now Playing', 'radio' ),
|
||||
'volume' => __( 'Volume', 'radio' ),
|
||||
'station' => __( 'Station', 'radio' ),
|
||||
@@ -158,6 +162,21 @@ function radio_ajax_save_state() {
|
||||
wp_send_json_success( radio_get_state() );
|
||||
}
|
||||
|
||||
/**
|
||||
* Surface the user's theme choice (auto/light/dark) to CSS as a body
|
||||
* class. `radio-theme-dark` forces dark; `radio-theme-auto` lets the
|
||||
* CSS respect `prefers-color-scheme`; `radio-theme-light` is the
|
||||
* default no-op.
|
||||
*/
|
||||
add_filter( 'admin_body_class', 'radio_admin_body_class' );
|
||||
function radio_admin_body_class( $classes ) {
|
||||
if ( ! is_user_logged_in() ) { return $classes; }
|
||||
$state = radio_get_state();
|
||||
$theme = isset( $state['theme'] ) ? $state['theme'] : 'auto';
|
||||
if ( ! in_array( $theme, array( 'auto', 'light', 'dark' ), true ) ) { $theme = 'auto'; }
|
||||
return $classes . ' radio-theme-' . $theme;
|
||||
}
|
||||
|
||||
/**
|
||||
* Activation hook: ensure the version option is set so the updater can
|
||||
* track it.
|
||||
|
||||
Reference in New Issue
Block a user