0dc3a220d9
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>
113 lines
8.3 KiB
PHP
113 lines
8.3 KiB
PHP
<?php
|
||
/**
|
||
* Radio — About page (WP Admin → Radio → About).
|
||
*
|
||
* Plain-language explanation of what the plugin does + version
|
||
* history + link to the CHANGELOG.md on Gitea. Pattern mirrors
|
||
* a-buddy/inc/about.php.
|
||
*/
|
||
|
||
if ( ! defined( 'ABSPATH' ) ) { exit; }
|
||
|
||
function radio_render_about_page() {
|
||
if ( ! current_user_can( 'read' ) ) {
|
||
wp_die( esc_html__( 'You do not have permission to view this page.', 'radio' ) );
|
||
}
|
||
|
||
$count = count( radio_get_stations_flat() );
|
||
?>
|
||
<div class="wrap radio-about-wrap">
|
||
<h1><?php esc_html_e( 'About Radio', 'radio' ); ?></h1>
|
||
|
||
<div class="radio-about-grid">
|
||
|
||
<div class="radio-about-card">
|
||
<h2><?php esc_html_e( 'What Radio does', 'radio' ); ?></h2>
|
||
<p>
|
||
<?php
|
||
printf(
|
||
/* translators: %d = station count */
|
||
esc_html__( 'Adds a small, focused radio player to your WordPress dashboard. %d hand-curated SomaFM stations across 10 genres — ambient, electronic, lounge, rock, metal, jazz, world, reggae, holiday and specials. Plays in your admin pages while you work. Your chosen station + volume persist per user.', 'radio' ),
|
||
(int) $count
|
||
);
|
||
?>
|
||
</p>
|
||
<p>
|
||
<?php esc_html_e( 'Audio plays directly in your browser via HTML5 — no server-side proxy, no extra services to host, no third-party tracking. Just an <audio> element pointed at SomaFM\'s public streams.', 'radio' ); ?>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="radio-about-card">
|
||
<h2><?php esc_html_e( 'Who Radio is for', 'radio' ); ?></h2>
|
||
<p>
|
||
<?php esc_html_e( 'Anyone who likes background music while working in the WordPress admin. Coders, writers, support agents, content editors. The 44 SomaFM stations cover a wide enough range that there\'s something for any mood — from coding-focus ambient (Groove Salad, Drone Zone) to drive-time electronic (DEF CON Radio, Beat Blender) to mellow lounge (Lush, Secret Agent) to specifically-quirky picks (SF 10-33 mixes ambient with San Francisco public-safety radio).', 'radio' ); ?>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="radio-about-card radio-about-card--versions">
|
||
<h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
|
||
<ul>
|
||
<li>
|
||
<span class="ver">v0.6.0</span> — 30 May 2026 <span class="latest">latest</span><br>
|
||
<?php esc_html_e( 'Pop-out mini-player. A small "↗ Pop out" button next to Play opens the player in its own 380×560 window. The popup persists across the main tab\'s navigation, so the music keeps playing while you click around Plugins / Posts / Users. The popup auto-resumes where the main tab left off, pauses the main-tab audio so you don\'t double-stream, and uses the same state + history + favourites as everywhere else.', 'radio' ); ?>
|
||
</li>
|
||
<li>
|
||
<span class="ver">v0.5.0</span> — 29 May 2026<br>
|
||
<?php esc_html_e( 'Track history + favourites. Every track that scrolls past in the player is now quietly logged to your personal Radio → History page (capped at 500), with a star toggle to keep the good ones forever in a separate Favourites tab. Each row has four search links (Spotify / YouTube / Apple Music / Bandcamp) so you can find that track on whichever service you use. Filter by station, search by artist or title, clear history with a button. Per-user, nothing leaves your site.', 'radio' ); ?>
|
||
</li>
|
||
<li>
|
||
<span class="ver">v0.4.0</span> — 29 May 2026<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>
|
||
<?php esc_html_e( 'UI rebuilt to WordPress admin standards. Postbox container, native Play/Pause button with text label, picks up your admin colour scheme via var(--wp-admin-theme-color), genre badge moved inline, dashboard widget no longer renders a card-inside-a-card. Functionality identical to v0.1.0 — purely visual polish.', 'radio' ); ?>
|
||
</li>
|
||
<li>
|
||
<span class="ver">v0.1.0</span> — 26 May 2026<br>
|
||
<?php esc_html_e( 'First release. 44 SomaFM stations grouped by 10 genres, dashboard widget + dedicated admin page, per-user state in user_meta, self-hosted update checker against Gitea. Direct HTML5 audio playback — no proxy, no build step, no tracking.', 'radio' ); ?>
|
||
</li>
|
||
</ul>
|
||
<a class="radio-about-changelog-link"
|
||
href="<?php echo esc_url( RADIO_GITEA_URL . '/src/branch/main/CHANGELOG.md' ); ?>"
|
||
target="_blank" rel="noopener">
|
||
<?php esc_html_e( 'View the full CHANGELOG.md →', 'radio' ); ?>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="radio-about-card">
|
||
<h2><?php esc_html_e( 'Credits + thanks', 'radio' ); ?></h2>
|
||
<p>
|
||
<?php
|
||
printf(
|
||
wp_kses(
|
||
/* translators: %s = link to somafm.com */
|
||
__( 'All stations and streams are provided by %s — an independent, listener-supported, commercial-free internet radio network broadcasting from San Francisco since 2000. Radio is just a small WordPress wrapper around their public streams. If you enjoy this plugin, please consider donating to SomaFM directly.', 'radio' ),
|
||
array( 'a' => array( 'href' => true, 'target' => true, 'rel' => true ) )
|
||
),
|
||
'<a href="https://somafm.com/support/" target="_blank" rel="noopener">SomaFM</a>'
|
||
);
|
||
?>
|
||
</p>
|
||
<p>
|
||
<?php esc_html_e( 'Plugin author: David Keane. Part of the RangerHQ plugin family. GPL v2 or later. Source on Gitea.', 'radio' ); ?>
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<?php
|
||
}
|