The dashicon used for the play/pause icon was rendering visibly below
the button text — dashicon font metrics sit the glyph low inside its
own box, so even with `inline-flex` centering the symbol looked like
it was on a separate row from the word "Play".
Swap dashicons-controls-play / dashicons-controls-pause for plain
Unicode glyphs (▶ / ‖) which render on the text baseline like any
other character. Flex container changed to align-items: baseline.
font-variant-emoji: text on the glyph span to keep platforms that
might otherwise pick up an emoji variant of ▶ as monochrome text.
Files: radio.php (version), inc/admin-page.php +
inc/dashboard-widget.php (dashicon span → glyph span),
assets/css/radio.css (drop dashicon-sizing rule, add
.radio-player__play-glyph, baseline alignment),
assets/js/radio.js (setPlayIcon swaps glyph textContent instead of
dashicon className), inc/about.php (history entry).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Real-screen review of v0.3.0 surfaced a contrast bug and several layout
issues. Quick patch.
- Drop @media prefers-color-scheme dark for theme=auto. WP admin has
no native dark mode, so OS-dark made our light text sit on the still-
white WP postbox = unreadable. `auto` now behaves as light; `dark`
remains as an explicit choice.
- theme=dark now actually reads: the player surface itself goes dark
(#1d2327 bg + subtle border + padding) so the light text has somewhere
to land instead of fighting the white WP postbox.
- .radio-wrap max-width 880px — player no longer stretches edge-to-edge.
- Drop the .radio-intro max-width:720px cap so the intro fits one line.
- Volume slider fixed at flex:0 0 auto / width:220px — % label sits next
to the slider instead of pinned to the far edge.
- Station dropdown capped at 360px (was width:100%).
- Play-button dashicon shrunk 18px → 14px so it sits on the button-text
baseline instead of looking like a second row.
Files: radio.php, assets/css/radio.css, inc/about.php, CHANGELOG.md.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
v0.1.0 worked but felt like a third-party React widget bolted on
top of WordPress. v0.2.0 makes the player visually native to the
WP admin: postbox container, standard Play/Pause button with text
label, admin-colour-scheme aware accents, dashboard widget no
longer renders a card inside a card.
CHANGES
- inc/admin-page.php: main page now wraps the player in a
.postbox > .postbox-header (with h2.hndle) > .inside structure.
Custom rounded card / shadow stripped.
- inc/dashboard-widget.php: bare .radio-player content; WP already
wraps dashboard widgets in a postbox, was double-card before.
- inc/about.php: version-history card promotes v0.2.0 to latest,
demotes v0.1.0.
- assets/css/radio.css: rewrite. Strip custom shadows + oversized
typography. Adopt WP body-text defaults. Use
var(--wp-admin-theme-color, #2271b1) for volume-slider accent +
link colours so the plugin picks up whichever admin colour
scheme the user has chosen. About-page cards now use the
postbox-style gray header + 1px border pattern.
- assets/js/radio.js: setPlayIcon() also flips the visible text
label ("Play" ↔ "Pause"), not just the icon class. mirrorSelection()
also updates the [data-radio-genre] element so the genre label
stays in sync across surfaces.
- radio.php: Version: 0.1.0 -> 0.2.0; BUDDY_VERSION constant
bumped likewise.
- CHANGELOG.md: new [0.2.0] entry explaining the visual overhaul.
NET EFFECT
- Same 44 stations, same audio path, same persistence, same
updater, same AJAX endpoint. Pure visual change.
- The plugin now looks like part of WordPress admin instead of a
guest widget.
- Closer to WP.org submission criteria — plugin reviewers look
for native-styled plugins.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
First release of a-radio — a free, focused SomaFM player for the
WordPress admin. Extracted-and-rebuilt from RangerPlex's RadioPlayer
component, simplified along the way (no Node CORS proxy needed; the
browser plays SomaFM streams directly).
Phase A deliverables — all in this commit:
PLAYER SURFACES
- Dashboard widget on WP Admin → Dashboard (compact: play/pause +
station select + volume).
- Dedicated admin page at WP Admin → Radio → My Radio (larger
layout, station genre badge, volume %% display).
- Both surfaces share the same JS — picking a station on one mirrors
to the other within the same admin session.
STATIONS
- 44 SomaFM stations grouped by 10 genres (Ambient / Electronic /
Lounge / Rock / Metal / Jazz / World / Reggae / Holiday / Specials).
- Ported verbatim from RangerPlex's RadioPlayer.tsx.
- Default station: Groove Salad (most popular SomaFM channel, safe
ambient/coding pick).
STATE
- Per-user state stored in user_meta under key `radio_state`:
{ station_id, volume, theme, last_played_at }.
- Settings page lets the user pick default station, default volume,
theme (auto/light/dark), and hide the dashboard widget.
- AJAX endpoint `radio_save_state` persists changes without a page
reload. Nonce-protected, capability-checked, only known keys
accepted, station validated against the list, volume clamped to
[0,1].
UPDATES
- Self-hosted updater wired to Gitea (ranger/a-radio) from commit 1.
- Direct port of Buddy's inc/updater.php with BUDDY_* → RADIO_* and
buddy_* → radio_* renames. Same 12h-success / 1h-error caching.
ARCHITECTURE
- No `wp` prefix (trademark policy).
- GPL v2+ public Gitea repo from day one.
- Vanilla JS only — no React, no webpack, no minified-only files.
- CSS-only animations, all assets local.
- Single H1 per admin page.
- Direct HTML5 <audio> playback (SomaFM has CORS headers; no PHP
audio proxy needed). This is the key simplification vs RangerPlex.
COMPLIANCE
- "Powered by SomaFM" credit displayed on both player surfaces with
link to somafm.com. About page invites users to donate to SomaFM
directly.
PHASE PROGRESSION (not in this commit)
- Phase B — Settings polish + retry on transient stream errors +
README.md formatted for WP.org submission.
- Phase C — Now-playing metadata via SomaFM's per-station song
history endpoint (this is where the RangerPlex proxy logic ports
to — server-side, for metadata not audio).
- Phase D — [ranger_radio] shortcode for frontend embedding.
- Phase E — Favorites system.
- Phase F — Multi-provider (Radio Paradise / NTS / KEXP / BBC).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ranger