Files
rangerhq-radio/inc/about.php
T
ranger 774e7f9958 fix(0.3.1): My Radio layout polish + drop dark-auto
Real-screen review of v0.3.0 surfaced a contrast bug and several layout
issues. Quick patch.

- Drop @media prefers-color-scheme dark for theme=auto. WP admin has
  no native dark mode, so OS-dark made our light text sit on the still-
  white WP postbox = unreadable. `auto` now behaves as light; `dark`
  remains as an explicit choice.
- theme=dark now actually reads: the player surface itself goes dark
  (#1d2327 bg + subtle border + padding) so the light text has somewhere
  to land instead of fighting the white WP postbox.
- .radio-wrap max-width 880px — player no longer stretches edge-to-edge.
- Drop the .radio-intro max-width:720px cap so the intro fits one line.
- Volume slider fixed at flex:0 0 auto / width:220px — % label sits next
  to the slider instead of pinned to the far edge.
- Station dropdown capped at 360px (was width:100%).
- Play-button dashicon shrunk 18px → 14px so it sits on the button-text
  baseline instead of looking like a second row.

Files: radio.php, assets/css/radio.css, inc/about.php, CHANGELOG.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-29 23:11:06 +01:00

97 lines
6.1 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.3.1</span> &mdash; 29 May 2026 <span class="latest">latest</span><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> &mdash; 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> &mdash; 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> &mdash; 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
}