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:
+1
-1
@@ -82,7 +82,7 @@ function radio_render_settings_page() {
|
||||
<label for="default_volume"><?php esc_html_e( 'Default volume', 'radio' ); ?></label>
|
||||
</th>
|
||||
<td>
|
||||
<input type="range" id="default_volume" name="default_volume" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" oninput="document.getElementById('default_volume_label').textContent = this.value + '%'">
|
||||
<input type="range" id="default_volume" name="default_volume" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" aria-describedby="default_volume_label">
|
||||
<span id="default_volume_label"><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user