feat(0.6.0): pop-out mini-player — continuous background play across admin nav

Until v0.5.0 the audio cut every time you navigated between WP admin
pages — every navigation is a full page reload, which destroys the
<audio> element. v0.6.0 fixes the background-music use case by letting
you pop the player out into a separate browser window that persists
across the parent tab's navigation.

Pop-out window
  - Small "↗ Pop out" button beside the Play button on both the main
    Radio page and the Dashboard widget.
  - Opens a 380×560 standalone window via window.open() with a window
    name of `radio_popout` so a second click re-focuses the existing
    popup rather than spawning a new one.
  - Popup renders at admin-post.php?action=radio_popout&play=1 — a new
    admin_post_radio_popout hook outputs a full standalone HTML page
    (custom DOCTYPE / head / body, no WP admin chrome).
  - Theme follows radio_state['theme'] via body class radio-theme-{...}.
  - Includes the full player (now-playing block with dancing bars +
    Web Audio visualizer, play, mute, volume, station dropdown, error
    slot). Close button calls window.close().

Auto-resume + single-stream invariant
  - cfg.autoPlay is true when the popup URL carries &play=1. radio.js
    auto-calls audio.play() 200 ms after init. Same-origin user-gesture
    popups are exempt from autoplay-blocking on every modern browser.
  - On pop-out click, every other audio surface in the parent tab is
    paused so there is only ever one stream playing.

State stays in sync
  - Popup uses the SAME radio_save_state AJAX + track-logging endpoint.
    Station / volume changes persist to user_meta; track history keeps
    accumulating from whichever surface is playing.

Edge cases
  - Inside the popup, cfg.popoutUrl is '' so bindPopOut hides any
    Pop-out button it finds (would be infinite otherwise).
  - Popup blocked by browser → clear alert tells the user to allow
    popups for this site.

Files
  - radio.php (version, popoutUrl in localized config, admin_post
    handler + full standalone HTML renderer)
  - inc/admin-page.php + inc/dashboard-widget.php (Pop-out button
    beside Play)
  - assets/css/radio.css (.radio-player__popout styling)
  - assets/js/radio.js (bindPopOut function; autoPlay branch in
    bindPlayer)
  - inc/about.php + CHANGELOG.md (history entries)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

radio.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.5.0
+ * Version:     0.6.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.5.0' ); }
+if ( ! defined( 'RADIO_VERSION' ) )   { define( 'RADIO_VERSION',   '0.6.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__ ) ); }
@@ -131,6 +131,7 @@ function radio_enqueue_admin_assets( $hook ) {
         'stations'  => radio_get_stations_flat(),
         'ajaxUrl'   => admin_url( 'admin-ajax.php' ),
         'nonce'     => wp_create_nonce( 'radio_save_state' ),
+        'popoutUrl' => admin_url( 'admin-post.php?action=radio_popout' ),
         'strings'   => array(
             'play'         => __( 'Play', 'radio' ),
             'pause'        => __( 'Pause', 'radio' ),
@@ -221,6 +222,139 @@ function radio_ajax_clear_history() {
     wp_send_json_success();
 }
 
+/**
+ * v0.6.0 — Pop-out mini player. Renders a standalone HTML page (no WP
+ * admin chrome) at `admin-post.php?action=radio_popout`, opened by the
+ * JS via `window.open()`. The popup persists across main-tab navigation
+ * so background music keeps playing when the user moves around the
+ * admin. `&play=1` in the URL tells `radio.js` to auto-resume on load.
+ */
+add_action( 'admin_post_radio_popout', 'radio_render_popout_page' );
+function radio_render_popout_page() {
+    if ( ! current_user_can( 'read' ) ) {
+        wp_die( esc_html__( 'You do not have permission to view this page.', 'radio' ) );
+    }
+
+    $state    = radio_get_state();
+    $station  = radio_find_station( $state['station_id'] );
+    $stations = radio_get_stations_grouped();
+    $theme    = isset( $state['theme'] ) ? $state['theme'] : 'auto';
+    if ( ! in_array( $theme, array( 'auto', 'light', 'dark' ), true ) ) { $theme = 'auto'; }
+
+    $cfg = array(
+        'state'     => $state,
+        'stations'  => radio_get_stations_flat(),
+        'ajaxUrl'   => admin_url( 'admin-ajax.php' ),
+        'nonce'     => wp_create_nonce( 'radio_save_state' ),
+        'popoutUrl' => '', // already in popout — no further popouts
+        'autoPlay'  => isset( $_GET['play'] ), // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- query flag only, no state change
+        'strings'   => array(
+            'play'         => __( 'Play', 'radio' ),
+            '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' ),
+        ),
+    );
+    ?>
+<!DOCTYPE html>
+<html lang="<?php echo esc_attr( str_replace( '_', '-', get_bloginfo( 'language' ) ) ); ?>">
+<head>
+    <meta charset="<?php bloginfo( 'charset' ); ?>">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title><?php printf( esc_html__( 'Radio — %s', 'radio' ), esc_html( $station['name'] ) ); ?></title>
+    <link rel="stylesheet" href="<?php echo esc_url( includes_url( 'css/dashicons.min.css' ) ); ?>?ver=<?php echo esc_attr( get_bloginfo( 'version' ) ); ?>">
+    <link rel="stylesheet" href="<?php echo esc_url( RADIO_URL . 'assets/css/radio.css' ); ?>?ver=<?php echo esc_attr( RADIO_VERSION ); ?>">
+    <style>
+        :root { --wp-admin-theme-color: #2271b1; }
+        html, body { margin: 0; padding: 0; }
+        body { padding: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f0f0f1; color: #1d2327; font-size: 13px; }
+        .radio-popout-header { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; }
+        .radio-popout-header h1 { margin: 0; font-size: 14px; font-weight: 600; color: #1d2327; }
+        .radio-popout-header h1::before { content: '📻 '; }
+        .radio-popout-close { background: none; border: 0; font-size: 18px; cursor: pointer; color: #646970; padding: 4px 8px; line-height: 1; border-radius: 3px; }
+        .radio-popout-close:hover { color: #b32d2e; background: rgba(179,45,46,0.08); }
+        .radio-popout-wrap { background: #fff; border: 1px solid #c3c4c7; padding: 14px; border-radius: 3px; }
+        .radio-popout-wrap .radio-player__station-select select { max-width: 100%; }
+        .radio-popout-wrap .radio-player__volume { width: 100%; }
+        .radio-popout-wrap .radio-player__controls { flex-direction: column; align-items: stretch; gap: 10px; }
+        body.radio-theme-dark { background: #101213; color: #f0f0f1; }
+        body.radio-theme-dark .radio-popout-header h1 { color: #f0f0f1; }
+        body.radio-theme-dark .radio-popout-wrap { background: #1d2327; border-color: #3c434a; }
+        body.radio-theme-dark .radio-popout-close { color: #a7aaad; }
+    </style>
+</head>
+<body class="radio-popout radio-theme-<?php echo esc_attr( $theme ); ?>">
+
+    <div class="radio-popout-header">
+        <h1><?php esc_html_e( 'Radio', 'radio' ); ?></h1>
+        <button type="button" class="radio-popout-close" onclick="window.close()" title="<?php esc_attr_e( 'Close', 'radio' ); ?>">✕</button>
+    </div>
+
+    <div class="radio-popout-wrap">
+        <div class="radio-player" data-radio-surface="popout">
+
+            <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>
+                <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">
+                <button type="button" class="button button-primary radio-player__play" data-radio-play>
+                    <span class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">&#9654;</span>
+                    <span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
+                </button>
+                <div class="radio-player__volume">
+                    <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>
+            </div>
+
+            <div class="radio-player__station-select">
+                <label for="radio-station-popout"><?php esc_html_e( 'Station', 'radio' ); ?></label>
+                <select id="radio-station-popout" data-radio-station>
+                    <?php foreach ( $stations as $genre => $entries ) :
+                        if ( empty( $entries ) ) { continue; }
+                        ?>
+                        <optgroup label="<?php echo esc_attr( $genre ); ?>">
+                            <?php foreach ( $entries as $entry ) : ?>
+                                <option value="<?php echo esc_attr( $entry['id'] ); ?>" data-url="<?php echo esc_attr( $entry['url'] ); ?>" data-desc="<?php echo esc_attr( $entry['description'] ); ?>" data-genre="<?php echo esc_attr( $entry['genre'] ); ?>" <?php selected( $entry['id'], $state['station_id'] ); ?>>
+                                    <?php echo esc_html( $entry['name'] ); ?>
+                                </option>
+                            <?php endforeach; ?>
+                        </optgroup>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+
+            <div class="radio-player__error" data-radio-error hidden></div>
+            <audio data-radio-audio preload="none" crossorigin="anonymous"></audio>
+        </div>
+    </div>
+
+    <script>window.RadioPlugin = <?php echo wp_json_encode( $cfg ); ?>;</script>
+    <script src="<?php echo esc_url( RADIO_URL . 'assets/js/radio.js' ); ?>?ver=<?php echo esc_attr( RADIO_VERSION ); ?>"></script>
+</body>
+</html>
+    <?php
+    exit;
+}
+
 /**
  * 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