ranger
c5a4b28b29
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>
95 lines
4.3 KiB
PHP
95 lines
4.3 KiB
PHP
<?php
|
|
/**
|
|
* Radio — dashboard widget.
|
|
*
|
|
* The compact mini-player on WP Admin → Dashboard. WordPress wraps
|
|
* dashboard widgets in a .postbox automatically, so we render bare
|
|
* content here — no nested card styling.
|
|
*/
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) { exit; }
|
|
|
|
add_action( 'wp_dashboard_setup', 'radio_register_dashboard_widget' );
|
|
function radio_register_dashboard_widget() {
|
|
if ( ! current_user_can( 'read' ) ) { return; }
|
|
|
|
// Honour the per-user opt-out from Settings.
|
|
$state = radio_get_state();
|
|
if ( isset( $state['hide_dashboard_widget'] ) && $state['hide_dashboard_widget'] ) {
|
|
return;
|
|
}
|
|
|
|
wp_add_dashboard_widget(
|
|
'radio_dashboard_widget',
|
|
__( 'Radio', 'radio' ),
|
|
'radio_render_dashboard_widget'
|
|
);
|
|
}
|
|
|
|
function radio_render_dashboard_widget() {
|
|
$state = radio_get_state();
|
|
$station = radio_find_station( $state['station_id'] );
|
|
$stations = radio_get_stations_grouped();
|
|
?>
|
|
<div class="radio-player" data-radio-surface="widget">
|
|
|
|
<div class="radio-player__now">
|
|
<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="dashicons dashicons-controls-play" aria-hidden="true"></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-widget"><?php esc_html_e( 'Station', 'radio' ); ?></label>
|
|
<select id="radio-station-widget" 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"></audio>
|
|
|
|
<p class="radio-player__credit">
|
|
<?php
|
|
printf(
|
|
wp_kses(
|
|
/* translators: %s = link to somafm.com */
|
|
__( 'Powered by %s', 'radio' ),
|
|
array( 'a' => array( 'href' => true, 'target' => true, 'rel' => true ) )
|
|
),
|
|
'<a href="https://somafm.com/" target="_blank" rel="noopener">SomaFM</a>'
|
|
);
|
|
?>
|
|
</p>
|
|
</div>
|
|
<?php
|
|
}
|