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
+25 -6
View File
@@ -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.