ranger
a22ddfb6d3
First release of a-radio — a free, focused SomaFM player for the
WordPress admin. Extracted-and-rebuilt from RangerPlex's RadioPlayer
component, simplified along the way (no Node CORS proxy needed; the
browser plays SomaFM streams directly).
Phase A deliverables — all in this commit:
PLAYER SURFACES
- Dashboard widget on WP Admin → Dashboard (compact: play/pause +
station select + volume).
- Dedicated admin page at WP Admin → Radio → My Radio (larger
layout, station genre badge, volume %% display).
- Both surfaces share the same JS — picking a station on one mirrors
to the other within the same admin session.
STATIONS
- 44 SomaFM stations grouped by 10 genres (Ambient / Electronic /
Lounge / Rock / Metal / Jazz / World / Reggae / Holiday / Specials).
- Ported verbatim from RangerPlex's RadioPlayer.tsx.
- Default station: Groove Salad (most popular SomaFM channel, safe
ambient/coding pick).
STATE
- Per-user state stored in user_meta under key `radio_state`:
{ station_id, volume, theme, last_played_at }.
- Settings page lets the user pick default station, default volume,
theme (auto/light/dark), and hide the dashboard widget.
- AJAX endpoint `radio_save_state` persists changes without a page
reload. Nonce-protected, capability-checked, only known keys
accepted, station validated against the list, volume clamped to
[0,1].
UPDATES
- Self-hosted updater wired to Gitea (ranger/a-radio) from commit 1.
- Direct port of Buddy's inc/updater.php with BUDDY_* → RADIO_* and
buddy_* → radio_* renames. Same 12h-success / 1h-error caching.
ARCHITECTURE
- No `wp` prefix (trademark policy).
- GPL v2+ public Gitea repo from day one.
- Vanilla JS only — no React, no webpack, no minified-only files.
- CSS-only animations, all assets local.
- Single H1 per admin page.
- Direct HTML5 <audio> playback (SomaFM has CORS headers; no PHP
audio proxy needed). This is the key simplification vs RangerPlex.
COMPLIANCE
- "Powered by SomaFM" credit displayed on both player surfaces with
link to somafm.com. About page invites users to donate to SomaFM
directly.
PHASE PROGRESSION (not in this commit)
- Phase B — Settings polish + retry on transient stream errors +
README.md formatted for WP.org submission.
- Phase C — Now-playing metadata via SomaFM's per-station song
history endpoint (this is where the RangerPlex proxy logic ports
to — server-side, for metadata not audio).
- Phase D — [ranger_radio] shortcode for frontend embedding.
- Phase E — Favorites system.
- Phase F — Multi-provider (Radio Paradise / NTS / KEXP / BBC).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
229 lines
3.9 KiB
CSS
229 lines
3.9 KiB
CSS
/* Radio — admin styles */
|
|
|
|
.radio-player {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.radio-player__now {
|
|
text-align: center;
|
|
padding-bottom: 6px;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.radio-player__now--large {
|
|
padding: 18px 0;
|
|
}
|
|
|
|
.radio-player__label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #646970;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.radio-player__station-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1d2327;
|
|
}
|
|
|
|
.radio-player__now--large .radio-player__station-name {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.radio-player__station-desc {
|
|
font-size: 13px;
|
|
color: #50575e;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.radio-player__station-genre {
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
padding: 2px 10px;
|
|
background: #f0f0f1;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
color: #2c3338;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.radio-player__controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.radio-player__controls--large {
|
|
justify-content: center;
|
|
gap: 20px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.radio-player__play {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50% !important;
|
|
padding: 0 !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.radio-player__play .dashicons {
|
|
font-size: 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.radio-player__controls--large .radio-player__play {
|
|
width: 56px;
|
|
height: 56px;
|
|
}
|
|
|
|
.radio-player__controls--large .radio-player__play .dashicons {
|
|
font-size: 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.radio-player__volume {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: 1;
|
|
}
|
|
|
|
.radio-player__volume input[type="range"] {
|
|
flex: 1;
|
|
accent-color: #2271b1;
|
|
}
|
|
|
|
.radio-player__volume-pct {
|
|
min-width: 36px;
|
|
font-size: 12px;
|
|
color: #50575e;
|
|
text-align: right;
|
|
}
|
|
|
|
.radio-player__station-select {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.radio-player__station-select label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: #646970;
|
|
}
|
|
|
|
.radio-player__station-select select {
|
|
width: 100%;
|
|
max-width: 480px;
|
|
}
|
|
|
|
.radio-player__error {
|
|
color: #b32d2e;
|
|
font-size: 12px;
|
|
padding: 6px 10px;
|
|
background: #fcf0f1;
|
|
border-left: 3px solid #b32d2e;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.radio-player__credit {
|
|
font-size: 12px;
|
|
color: #646970;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.radio-player__credit--main {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.radio-player__credit a {
|
|
color: #2271b1;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.radio-player__credit a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Main page wraps the player at a comfortable max width. */
|
|
.radio-wrap .radio-player--main {
|
|
max-width: 640px;
|
|
padding: 20px 24px;
|
|
background: #fff;
|
|
border: 1px solid #ccd0d4;
|
|
border-radius: 6px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.radio-intro {
|
|
max-width: 640px;
|
|
color: #50575e;
|
|
}
|
|
|
|
/* About page layout */
|
|
.radio-about-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 18px;
|
|
max-width: 1100px;
|
|
}
|
|
|
|
.radio-about-card {
|
|
background: #fff;
|
|
border: 1px solid #ccd0d4;
|
|
border-radius: 6px;
|
|
padding: 18px 20px;
|
|
}
|
|
|
|
.radio-about-card h2 {
|
|
margin-top: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.radio-about-card--versions ul {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.radio-about-card--versions li {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.radio-about-card--versions .ver {
|
|
font-weight: 600;
|
|
color: #2271b1;
|
|
}
|
|
|
|
.radio-about-card--versions .latest {
|
|
display: inline-block;
|
|
margin-left: 6px;
|
|
padding: 1px 7px;
|
|
background: #00a32a;
|
|
color: #fff;
|
|
border-radius: 9px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.radio-about-changelog-link {
|
|
display: inline-block;
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
}
|