ranger
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
6.1 KiB
PHP
113 lines
6.1 KiB
PHP
<?php
|
|
/**
|
|
* Radio — main admin page (WP Admin → Radio → My Radio).
|
|
*
|
|
* Uses WP-native postbox structure so the player feels like part of
|
|
* WordPress, not a third-party widget. The dashboard widget shares
|
|
* the same internal markup via assets/js/radio.js binding to every
|
|
* .radio-player on the page.
|
|
*/
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) { exit; }
|
|
|
|
function radio_render_main_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();
|
|
$count = count( radio_get_stations_flat() );
|
|
?>
|
|
<div class="wrap radio-wrap">
|
|
<h1><?php esc_html_e( 'Radio', 'radio' ); ?></h1>
|
|
|
|
<p class="radio-intro">
|
|
<?php
|
|
printf(
|
|
/* translators: %d = number of stations */
|
|
esc_html__( 'A tab of background music for your WordPress admin. %d hand-curated SomaFM stations across 10 genres — free, no ads, no tracking.', 'radio' ),
|
|
(int) $count
|
|
);
|
|
?>
|
|
</p>
|
|
|
|
<div class="postbox">
|
|
<div class="postbox-header">
|
|
<h2 class="hndle"><?php esc_html_e( 'Player', 'radio' ); ?></h2>
|
|
</div>
|
|
<div class="inside">
|
|
<div class="radio-player" data-radio-surface="main">
|
|
|
|
<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">▶</span>
|
|
<span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
|
|
</button>
|
|
|
|
<button type="button" class="button radio-player__popout" data-radio-popout title="<?php esc_attr_e( 'Open in a pop-out window — keeps playing while you navigate the admin', 'radio' ); ?>">
|
|
<span aria-hidden="true">↗</span> <?php esc_html_e( 'Pop out', 'radio' ); ?>
|
|
</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-main"><?php esc_html_e( 'Station', 'radio' ); ?></label>
|
|
<select id="radio-station-main" 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>
|
|
</div>
|
|
|
|
<p class="radio-player__credit radio-player__credit--main description">
|
|
<?php
|
|
printf(
|
|
wp_kses(
|
|
/* translators: %s = link to somafm.com */
|
|
__( 'Stations and streams provided by %s — an independent, listener-supported, commercial-free internet radio network. Please consider supporting them.', 'radio' ),
|
|
array( 'a' => array( 'href' => true, 'target' => true, 'rel' => true ) )
|
|
),
|
|
'<a href="https://somafm.com/" target="_blank" rel="noopener">SomaFM</a>'
|
|
);
|
|
?>
|
|
</p>
|
|
</div>
|
|
<?php
|
|
}
|