Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ranger
|
f5feca7dfa | ||
|
ranger
|
a56fd7aff7 | ||
|
ranger
|
774e7f9958 |
@@ -9,6 +9,64 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
|
||||
|
||||
---
|
||||
|
||||
## [0.4.0] — 2026-05-29 — Now-playing indicator: dancing bars + Web Audio visualizer
|
||||
|
||||
A small visual that instantly says *"this is playing right now."* Two layers — a reliable CSS-only indicator that always works, and a progressive Web Audio upgrade that draws actual frequency data when the browser allows.
|
||||
|
||||
### Added — dancing bars (always on, CSS only)
|
||||
- Four tiny vertical bars next to the "Now Playing" label that pulse with a staggered `@keyframes` animation while the audio is playing, settling to a low static state when paused. Pure CSS — no JS dependency, no audio analysis.
|
||||
- Bars use `var(--wp-admin-theme-color)` so they tint to whichever WP admin colour scheme the user has chosen.
|
||||
- Driven by a single `.is-playing` class toggled on the `.radio-player` surface from the existing `play` / `pause` / `error` audio handlers.
|
||||
|
||||
### Added — Web Audio frequency visualizer (progressive upgrade)
|
||||
- On first `play`, `tryVisualizer` builds an `AudioContext` + `AnalyserNode` chain on the `<audio>` element and starts drawing live frequency bars on a `<canvas>` next to "Now Playing."
|
||||
- `<audio>` now carries `crossorigin="anonymous"` so the Web Audio analyser can actually read the stream data (SomaFM serves the CORS headers).
|
||||
- **Graceful fallback:** if `AudioContext` isn't available, or `createMediaElementSource` throws, or the analyser returns all-zeros for 2 s (CORS silently blocking), the visualizer state flips to `cors-blocked` / `init-failed` / `no-webaudio` and the CSS dancing bars remain — the plugin never loses its indicator.
|
||||
- Canvas is sized to its CSS box × `devicePixelRatio` so it stays crisp on retina screens.
|
||||
|
||||
### State machine on `player._vizState`
|
||||
| Value | Meaning |
|
||||
|---|---|
|
||||
| _undefined_ | not yet attempted |
|
||||
| `no-webaudio` | browser lacks `AudioContext` |
|
||||
| `init-failed` | `createMediaElementSource` threw |
|
||||
| `cors-blocked` | analyser returned zeros for >2 s |
|
||||
| `ok` | live frequency data flowing → canvas shown, bars hidden |
|
||||
|
||||
**Files changed:** `radio.php` (version), `inc/admin-page.php` + `inc/dashboard-widget.php` (added `.radio-player__indicator` with `.radio-player__bars` + `<canvas data-radio-viz>`, plus `crossorigin="anonymous"` on the `<audio>`), `assets/css/radio.css` (indicator container, bars + `radio-bars-dance` keyframes, canvas size), `assets/js/radio.js` (`tryVisualizer` / `startVizLoop` / `stopVizLoop`, `play/pause/error` handlers toggle `is-playing` class and drive the loop), `inc/about.php` (history entry).
|
||||
|
||||
---
|
||||
|
||||
## [0.3.2] — 2026-05-29 — Play-button glyph baseline fix
|
||||
|
||||
The dashicon used for the play/pause icon was rendering visibly below the button text baseline — the dashicon font sits the glyph low inside its own box, and even with `inline-flex` centering the result looked like the symbol was on a separate row from the word "Play".
|
||||
|
||||
### Fixed
|
||||
- **Play/pause icon now sits on the text baseline.** Swapped the dashicon (`dashicons-controls-play` / `dashicons-controls-pause`) for a plain Unicode glyph (▶ / ‖) which renders on the text baseline like any other character.
|
||||
- Flex container changed from `align-items: center` to `align-items: baseline` for the same reason.
|
||||
- `font-variant-emoji: text` set so platforms that might otherwise pick up a colour-emoji variant for ▶ keep it as monochrome text.
|
||||
|
||||
**Files changed:** `radio.php` (version), `inc/admin-page.php` + `inc/dashboard-widget.php` (dashicon span → glyph span), `assets/css/radio.css` (drop the dashicon-sizing rule, add `.radio-player__play-glyph` styling, change play-button flex alignment to baseline), `assets/js/radio.js` (`setPlayIcon` now swaps glyph `textContent` instead of dashicon `className`), `inc/about.php` (history entry).
|
||||
|
||||
---
|
||||
|
||||
## [0.3.1] — 2026-05-29 — My Radio layout polish + drop dark-auto
|
||||
|
||||
Quick patch after a real-screen review of the My Radio admin page. v0.3.0 added a lot of features but stretched the player to fill the full admin width and — embarrassingly — introduced a real contrast bug via the dark-auto CSS.
|
||||
|
||||
### Fixed
|
||||
- **Dropped `@media (prefers-color-scheme: dark)` for `theme=auto`.** WordPress admin has no native dark mode, so when the OS was dark, our dark text rendered on the still-white WP postbox = unreadable. `auto` now behaves as light (matching WP's actual scheme); `dark` is still available as an explicit choice.
|
||||
- **`theme=dark` now actually reads.** The player surface goes dark (`#1d2327` background + subtle border + padding) so the light text has somewhere to sit, instead of fighting the white WP postbox.
|
||||
- **Player no longer stretches edge-to-edge.** `.radio-wrap { max-width: 880px; }` keeps the player a focused settings-page card.
|
||||
- **Intro paragraph one-line on normal widths.** Removed the `max-width: 720px` cap that was forcing the wrap.
|
||||
- **Volume slider no longer dominates the row.** Fixed width 220px (`flex: 0 0 auto`) — the percent label now sits next to the slider instead of pinned to the far right edge.
|
||||
- **Station dropdown** capped at 360px (was full-width) — typical WP form-control width.
|
||||
- **Play button icon** shrunk from 18px to 14px so the ▶ glyph sits on the button-text baseline instead of looking like a separate row.
|
||||
|
||||
**Files changed:** `radio.php` (version), `assets/css/radio.css` (wrap width, intro, play icon, volume, station-select, dark-auto block deleted, dark-surface added), `inc/about.php` (history entry).
|
||||
|
||||
---
|
||||
|
||||
## [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).
|
||||
|
||||
+97
-34
@@ -30,6 +30,73 @@
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────
|
||||
* Now-playing indicator — CSS dancing bars (always present) +
|
||||
* optional Web Audio frequency visualizer (canvas, progressive
|
||||
* upgrade). The JS toggles a `.is-playing` class on the parent
|
||||
* `.radio-player` to drive the dance; when the visualizer is
|
||||
* successfully wired, it hides the bars and reveals the canvas.
|
||||
* ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.radio-player__indicator {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
height: 14px;
|
||||
min-width: 18px;
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.radio-player__bars {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
width: 18px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.radio-player__bars span {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: var(--wp-admin-theme-color, #2271b1);
|
||||
border-radius: 1px;
|
||||
transform-origin: bottom;
|
||||
transform: scaleY(0.25);
|
||||
transition: transform 0.2s ease;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* When playing, each bar dances with a staggered delay so the row
|
||||
has a lifelike, slightly out-of-phase pulse rather than uniform
|
||||
thumping. ~0.85s loop keeps it lively without being twitchy. */
|
||||
.radio-player.is-playing .radio-player__bars span {
|
||||
animation: radio-bars-dance 0.85s ease-in-out infinite;
|
||||
opacity: 1;
|
||||
}
|
||||
.radio-player.is-playing .radio-player__bars span:nth-child(1) { animation-delay: 0s; }
|
||||
.radio-player.is-playing .radio-player__bars span:nth-child(2) { animation-delay: 0.18s; }
|
||||
.radio-player.is-playing .radio-player__bars span:nth-child(3) { animation-delay: 0.36s; }
|
||||
.radio-player.is-playing .radio-player__bars span:nth-child(4) { animation-delay: 0.09s; }
|
||||
|
||||
@keyframes radio-bars-dance {
|
||||
0%, 100% { transform: scaleY(0.3); }
|
||||
20% { transform: scaleY(0.9); }
|
||||
40% { transform: scaleY(0.5); }
|
||||
60% { transform: scaleY(1); }
|
||||
80% { transform: scaleY(0.65); }
|
||||
}
|
||||
|
||||
/* Web Audio canvas — wider than the CSS bars so the live frequency
|
||||
data has room to breathe. JS swaps display when the visualizer
|
||||
confirms it's receiving real (non-zero) data. */
|
||||
.radio-player__viz {
|
||||
display: block;
|
||||
height: 14px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.radio-player__station-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
@@ -80,25 +147,31 @@
|
||||
}
|
||||
|
||||
.radio-player__play {
|
||||
/* native .button .button-primary styling; just ensure icon aligns */
|
||||
/* native .button .button-primary styling; just ensure glyph aligns */
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.radio-player__play .dashicons {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
/* Unicode play/pause glyph (not a dashicon — those sit low inside their
|
||||
own font box and look like they're below the text baseline). A plain
|
||||
▶ / ‖ glyph renders on the text baseline like any other character. */
|
||||
.radio-player__play-glyph {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
/* Coerce to text rendering rather than colour-emoji on systems that
|
||||
might otherwise pick up an emoji variant for ▶ / ‖. */
|
||||
font-variant-emoji: text;
|
||||
font-family: "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.radio-player__volume {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
flex: 0 0 auto;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.radio-player__volume .dashicons {
|
||||
@@ -160,7 +233,7 @@
|
||||
|
||||
.radio-player__station-select select {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
/* Error notice — uses WP notice styling */
|
||||
@@ -195,9 +268,15 @@
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────
|
||||
* Main admin page — wrap player in a postbox-like card
|
||||
* Main admin page — wrap player in a postbox-like card.
|
||||
* Constrained max-width keeps the player a focused settings-page card
|
||||
* instead of stretching to fill the full admin width.
|
||||
* ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.radio-wrap {
|
||||
max-width: 880px;
|
||||
}
|
||||
|
||||
.radio-wrap .radio-player {
|
||||
margin-top: 4px;
|
||||
}
|
||||
@@ -206,7 +285,6 @@
|
||||
margin: 0 0 16px;
|
||||
color: #50575e;
|
||||
font-size: 13px;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────
|
||||
@@ -366,27 +444,12 @@
|
||||
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; }
|
||||
/* Give the player its own dark surface when theme=dark so the dark text
|
||||
has something to read against — WP postboxes don't follow our dark
|
||||
choice, so without this the light text would sit on white. */
|
||||
.radio-theme-dark .radio-player {
|
||||
background: #1d2327;
|
||||
padding: 14px 16px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #3c434a;
|
||||
}
|
||||
|
||||
+122
-3
@@ -68,11 +68,13 @@
|
||||
});
|
||||
}
|
||||
|
||||
/** Update play/pause button icon + label to reflect current audio state. */
|
||||
/** Update play/pause button glyph + label to reflect current audio state.
|
||||
* v0.3.2: switched from .dashicons to a Unicode glyph so the symbol sits
|
||||
* on the text baseline instead of below it. */
|
||||
function setPlayIcon(btn, playing) {
|
||||
var icon = btn.querySelector('.dashicons');
|
||||
var glyph = btn.querySelector('[data-radio-play-glyph]');
|
||||
var label = btn.querySelector('[data-radio-play-label]');
|
||||
if (icon) { icon.className = 'dashicons ' + (playing ? 'dashicons-controls-pause' : 'dashicons-controls-play'); }
|
||||
if (glyph) { glyph.textContent = playing ? '‖' : '▶'; } // ‖ or ▶
|
||||
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'));
|
||||
}
|
||||
@@ -143,6 +145,116 @@
|
||||
if (trackEl) { trackEl.hidden = true; trackEl.textContent = ''; }
|
||||
}
|
||||
|
||||
/** Web Audio frequency visualizer — progressive upgrade over the CSS
|
||||
* dancing bars. Tries once per player surface; if CORS or browser
|
||||
* support blocks it, silently leaves the CSS bars in place.
|
||||
*
|
||||
* State machine on player._vizState:
|
||||
* undefined → not yet tried
|
||||
* 'no-webaudio' → browser lacks AudioContext
|
||||
* 'init-failed' → createMediaElementSource threw (e.g. already wired)
|
||||
* 'cors-blocked' → analyser returned all-zeros for >2s → CORS silently failed
|
||||
* 'ok' → live frequency data flowing → canvas visible, bars hidden
|
||||
*/
|
||||
function tryVisualizer(player, audio) {
|
||||
if (player._vizState) { return; }
|
||||
var AudioCtx = window.AudioContext || window.webkitAudioContext;
|
||||
if (!AudioCtx) { player._vizState = 'no-webaudio'; return; }
|
||||
var canvas = player.querySelector('[data-radio-viz]');
|
||||
if (!canvas) { player._vizState = 'no-canvas'; return; }
|
||||
|
||||
var ctx, srcNode, analyser;
|
||||
try {
|
||||
ctx = new AudioCtx();
|
||||
srcNode = ctx.createMediaElementSource(audio);
|
||||
analyser = ctx.createAnalyser();
|
||||
analyser.fftSize = 64; // → 32 frequency bins, plenty for a 60px-wide canvas
|
||||
srcNode.connect(analyser);
|
||||
analyser.connect(ctx.destination); // KEEP audio audible
|
||||
} catch (e) {
|
||||
if (window.console && console.warn) { console.warn('Radio viz: init failed —', e.message || e); }
|
||||
player._vizState = 'init-failed';
|
||||
return;
|
||||
}
|
||||
if (ctx.state === 'suspended') { ctx.resume(); }
|
||||
|
||||
// Match the canvas backing-store to its CSS size × DPR for crispness.
|
||||
var dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = Math.max(1, canvas.offsetWidth * dpr);
|
||||
canvas.height = Math.max(1, canvas.offsetHeight * dpr);
|
||||
var c2d = canvas.getContext('2d');
|
||||
var data = new Uint8Array(analyser.frequencyBinCount);
|
||||
var bars = player.querySelector('.radio-player__bars');
|
||||
|
||||
// Stash on the player so play/pause/error handlers can drive it.
|
||||
player._viz = {
|
||||
ctx: ctx,
|
||||
analyser: analyser,
|
||||
canvas: canvas,
|
||||
c2d: c2d,
|
||||
data: data,
|
||||
bars: bars,
|
||||
hasData: false,
|
||||
firstAt: 0,
|
||||
raf: null
|
||||
};
|
||||
player._vizState = 'ok'; // optimistic; flipped to 'cors-blocked' if data stays zero
|
||||
}
|
||||
|
||||
function startVizLoop(player, audio) {
|
||||
if (player._vizState !== 'ok' || !player._viz) { return; }
|
||||
var v = player._viz;
|
||||
if (v.raf) { return; } // already running
|
||||
if (v.ctx.state === 'suspended') { v.ctx.resume(); }
|
||||
v.firstAt = Date.now();
|
||||
var color = (getComputedStyle(player).getPropertyValue('--wp-admin-theme-color') || '#2271b1').trim() || '#2271b1';
|
||||
|
||||
function draw() {
|
||||
if (audio.paused) { v.raf = null; return; }
|
||||
v.analyser.getByteFrequencyData(v.data);
|
||||
|
||||
// Detect whether we're getting real audio (non-zero data). Without
|
||||
// proper CORS the analyser returns all-zeros silently.
|
||||
if (!v.hasData) {
|
||||
for (var j = 0; j < v.data.length; j++) {
|
||||
if (v.data[j] > 0) { v.hasData = true; break; }
|
||||
}
|
||||
if (!v.hasData && Date.now() - v.firstAt > 2000) {
|
||||
// Two seconds of silence from the analyser = CORS blocked.
|
||||
// Fall back to the CSS bars and stop trying.
|
||||
player._vizState = 'cors-blocked';
|
||||
v.canvas.hidden = true;
|
||||
if (v.bars) { v.bars.hidden = false; }
|
||||
v.raf = null;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (v.hasData) {
|
||||
// First frame with data → swap from CSS bars to canvas.
|
||||
if (v.bars && !v.bars.hidden) {
|
||||
v.bars.hidden = true;
|
||||
v.canvas.hidden = false;
|
||||
}
|
||||
v.c2d.clearRect(0, 0, v.canvas.width, v.canvas.height);
|
||||
v.c2d.fillStyle = color;
|
||||
var bw = v.canvas.width / v.data.length;
|
||||
for (var i = 0; i < v.data.length; i++) {
|
||||
var h = (v.data[i] / 255) * v.canvas.height;
|
||||
v.c2d.fillRect(i * bw, v.canvas.height - h, Math.max(1, bw - 1), h);
|
||||
}
|
||||
}
|
||||
v.raf = requestAnimationFrame(draw);
|
||||
}
|
||||
v.raf = requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
function stopVizLoop(player) {
|
||||
if (player._viz && player._viz.raf) {
|
||||
cancelAnimationFrame(player._viz.raf);
|
||||
player._viz.raf = null;
|
||||
}
|
||||
}
|
||||
|
||||
/** 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]');
|
||||
@@ -211,15 +323,22 @@
|
||||
|
||||
audio.addEventListener('play', function () {
|
||||
setPlayIcon(playBtn, true);
|
||||
player.classList.add('is-playing'); // CSS dancing-bars animation
|
||||
tryVisualizer(player, audio); // idempotent — only initialises once
|
||||
startVizLoop(player, audio); // no-op unless viz state is 'ok'
|
||||
startTrackPolling(player, findStation(stationSel.value));
|
||||
});
|
||||
audio.addEventListener('pause', function () {
|
||||
setPlayIcon(playBtn, false);
|
||||
player.classList.remove('is-playing');
|
||||
stopVizLoop(player);
|
||||
stopTrackPolling(player);
|
||||
});
|
||||
audio.addEventListener('error', function () {
|
||||
showError(player, cfg.strings.error || 'Stream error.');
|
||||
setPlayIcon(playBtn, false);
|
||||
player.classList.remove('is-playing');
|
||||
stopVizLoop(player);
|
||||
stopTrackPolling(player);
|
||||
});
|
||||
audio.addEventListener('canplay', function () { showError(player, null); });
|
||||
|
||||
+14
-2
@@ -48,8 +48,20 @@ function radio_render_about_page() {
|
||||
<h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
|
||||
<ul>
|
||||
<li>
|
||||
<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' ); ?>
|
||||
<span class="ver">v0.4.0</span> — 29 May 2026 <span class="latest">latest</span><br>
|
||||
<?php esc_html_e( 'Now-playing visual indicator. Four tiny dancing bars next to "Now Playing" pulse while the audio is playing (pure CSS, always works). On top of that, a Web Audio frequency visualizer tries to draw live frequency bars on a small canvas — if the browser allows it and the stream is CORS-friendly it kicks in automatically; if not, the CSS bars stay and nothing breaks.', 'radio' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
<span class="ver">v0.3.2</span> — 29 May 2026<br>
|
||||
<?php esc_html_e( 'Play-button glyph baseline fix. The dashicon used for play/pause was rendering below the button text. Swapped to a plain Unicode glyph (▶ / ‖) that sits on the text baseline like any other character.', 'radio' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
<span class="ver">v0.3.1</span> — 29 May 2026<br>
|
||||
<?php esc_html_e( 'My Radio layout polish + dropped dark-auto. Player no longer stretches edge-to-edge (max-width 880px); volume slider fixed width so the % label sits next to it; station dropdown capped at 360px; play-button icon shrunk to match the button text baseline; intro paragraph now fits one line. Removed the prefers-color-scheme dark-auto behaviour that was unreadable against WordPress\'s still-white postbox; theme=dark is still available as an explicit choice and now gives the player its own dark surface so it actually reads.', 'radio' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
<span class="ver">v0.3.0</span> — 29 May 2026<br>
|
||||
<?php esc_html_e( 'Dark theme wired through. 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>
|
||||
|
||||
+6
-2
@@ -41,6 +41,10 @@ function radio_render_main_page() {
|
||||
<div class="radio-player" data-radio-surface="main">
|
||||
|
||||
<div class="radio-player__now">
|
||||
<span class="radio-player__indicator" aria-hidden="true">
|
||||
<span class="radio-player__bars"><span></span><span></span><span></span><span></span></span>
|
||||
<canvas class="radio-player__viz" data-radio-viz hidden></canvas>
|
||||
</span>
|
||||
<span class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></span>
|
||||
<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>
|
||||
@@ -50,7 +54,7 @@ function radio_render_main_page() {
|
||||
|
||||
<div class="radio-player__controls">
|
||||
<button type="button" class="button button-primary radio-player__play" data-radio-play>
|
||||
<span class="dashicons dashicons-controls-play" aria-hidden="true"></span>
|
||||
<span class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">▶</span>
|
||||
<span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
|
||||
</button>
|
||||
|
||||
@@ -82,7 +86,7 @@ function radio_render_main_page() {
|
||||
|
||||
<div class="radio-player__error" data-radio-error hidden></div>
|
||||
|
||||
<audio data-radio-audio preload="none"></audio>
|
||||
<audio data-radio-audio preload="none" crossorigin="anonymous"></audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -34,6 +34,10 @@ function radio_render_dashboard_widget() {
|
||||
<div class="radio-player" data-radio-surface="widget">
|
||||
|
||||
<div class="radio-player__now">
|
||||
<span class="radio-player__indicator" aria-hidden="true">
|
||||
<span class="radio-player__bars"><span></span><span></span><span></span><span></span></span>
|
||||
<canvas class="radio-player__viz" data-radio-viz hidden></canvas>
|
||||
</span>
|
||||
<span class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></span>
|
||||
<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>
|
||||
@@ -43,7 +47,7 @@ function radio_render_dashboard_widget() {
|
||||
|
||||
<div class="radio-player__controls">
|
||||
<button type="button" class="button button-primary radio-player__play" data-radio-play>
|
||||
<span class="dashicons dashicons-controls-play" aria-hidden="true"></span>
|
||||
<span class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">▶</span>
|
||||
<span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
|
||||
</button>
|
||||
|
||||
@@ -75,7 +79,7 @@ function radio_render_dashboard_widget() {
|
||||
|
||||
<div class="radio-player__error" data-radio-error hidden></div>
|
||||
|
||||
<audio data-radio-audio preload="none"></audio>
|
||||
<audio data-radio-audio preload="none" crossorigin="anonymous"></audio>
|
||||
|
||||
<p class="radio-player__credit">
|
||||
<?php
|
||||
|
||||
@@ -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.3.0
|
||||
* Version: 0.4.0
|
||||
* Requires at least: 5.0
|
||||
* Requires PHP: 7.4
|
||||
* Author: David Keane
|
||||
@@ -20,7 +20,7 @@
|
||||
if ( ! defined( 'ABSPATH' ) ) { exit; }
|
||||
|
||||
// Plugin coordinates.
|
||||
if ( ! defined( 'RADIO_VERSION' ) ) { define( 'RADIO_VERSION', '0.3.0' ); }
|
||||
if ( ! defined( 'RADIO_VERSION' ) ) { define( 'RADIO_VERSION', '0.4.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__ ) ); }
|
||||
|
||||
Reference in New Issue
Block a user