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:
2026-05-29 22:56:57 +01:00
parent 3e6994461e
commit c5a4b28b29
8 changed files with 353 additions and 55 deletions
+4 -1
View File
@@ -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>