10 Commits

Author SHA1 Message Date
ranger c7b2258471 fix(0.7.1): Plugin Check follow-up — tested-up-to bump + .DS_Store re-cleanup
Re-ran PCP after v0.7.0 — issue count 169 → 4. Closes the only real
one of the four:

- Tested up to: 6.7 → 7.0 in readme.txt (PCP outdated_tested_upto_header).
  WordPress 7.0 is current.
- Stable Tag bumped to 0.7.1 in readme.txt.

Removed (again)
- .DS_Store files (root + assets/). macOS Finder regenerated them
  between PCP runs; they will not be present in the submission zip.

Known PCP residue (not addressable in source)
- .gitignore triggers a hidden_files WARNING on PCP. Keeping it is
  needed for git; will be excluded from the submission zip per WP.org
  packaging conventions.

Files: radio.php (version), readme.txt (Tested-up-to + Stable Tag +
new 0.7.1 changelog + upgrade notice), CHANGELOG.md,
inc/about.php (rotate v0.7.1 → latest, v0.7.0 → earlier list),
.DS_Store files deleted.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-30 03:01:25 +01:00
ranger 09b61cc950 feat(0.7.0): WordPress.org submission prep — full Plugin Check clean
Ran the official Plugin Check (PCP) against v0.6.3 — surfaced 169
issues. This release closes all of them so the plugin is submission-
ready for the WordPress.org plugin directory.

Branding
  - Plugin Name renamed: "Radio" → "RangerHQ Radio". Removes the
    trademarked "SomaFM" from the plugin name surface (PCP
    trademarked_term). Lines up with the RangerHQ plugin family.
    SomaFM credited in Description + About as the data source.
    Folder/slug stays `a-radio` — no install path changes; existing
    user_meta keys (radio_state / radio_history / radio_favourites)
    untouched.
  - Text Domain header renamed: `radio` → `a-radio` (matches slug).
  - Requires at least bumped: 5.0 → 5.3 (matches wp_date() usage).
  - File docstring header dropped "SomaFM" from prominent line.

Code (mass-mechanical)
  - 134 i18n call sites rewritten from `'radio'` text domain to
    `'a-radio'` across 7 PHP files. Single sed pass on the unique
    pattern `, 'radio' )` — the 6 menu-slug `'radio'` references in
    add_*_page() were correctly left alone (those are URL slugs).

Security
  - 8 × MissingUnslash + 8 × InputNotSanitized in the v0.5.0 history
    endpoints (radio_ajax_log_track, radio_ajax_toggle_favourite).
    All four $_POST['artist|title|station|station_id'] access points
    are now wrapped sanitize_text_field( wp_unslash( $_POST['…'] ) )
    (or sanitize_key for station_id) at the access point.

Translator comments
  - 6 × printf / sprintf calls with placeholders now carry
    /* translators: ... */ comments.

Pop-out window refactor
  - Inline <link> stylesheets, <style> block, and <script> tag in
    radio_render_popout_page() replaced with wp_enqueue_style() +
    wp_enqueue_script() + wp_localize_script() registered before HTML
    output, then wp_print_styles() in <head> and wp_print_footer_
    scripts() at end of <body>.
  - Popup-specific CSS moved out of inline <style> and into radio.css
    under body.radio-popout scope so it only fires inside the popup.

Removed
  - .DS_Store files (root + assets/). PCP hidden_files.

Distribution
  - New readme.txt in proper WordPress.org format: Plugin headers,
    Contributors, Donate link, Tags, Requires-at-least, Tested-up-to,
    Stable Tag, Requires-PHP, License, Description, Installation,
    FAQ, Screenshots, Changelog, Upgrade Notice.

Compat
  - No behaviour change for users; user_meta preserved.
  - Displayed Plugin Name in Plugins → Installed changes from "Radio"
    to "RangerHQ Radio" — only visible difference on update.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-30 02:51:09 +01:00
ranger 224fccd6c4 feat(0.6.3): discreet "buy me a coffee" support link
Tiny footer line inside the Updates panel on Settings + matching line
at the bottom of the Credits + thanks card on About. Pulled from a
single RADIO_SUPPORT_URL constant so both stay in sync. Conditional
render — if the constant is empty, the link is silently hidden, so
forks can strip funding with one line.

Design intent: muted (12px, admin-theme-coloured, subtle top divider).
Reads as housekeeping not a sales pitch — no yellow BMC brand chrome.
Dark-theme divider override so it stays subtle on the dark surface.

Files: radio.php (version, RADIO_SUPPORT_URL constant default
https://buymeacoffee.com/davidtkeane), inc/updater.php (link in
Updates panel), inc/about.php (link in Credits + thanks card; rotate
v0.6.3 → latest, v0.6.2 → earlier list), assets/css/radio.css
(.radio-support-link + dark-theme override), CHANGELOG.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-30 00:44:44 +01:00
ranger 32a3040e39 feat(0.6.2): current version badge on Settings page
Small grey pill follows the "Radio — Settings" H1 — v{RADIO_VERSION}.
Visible at a glance so you don't have to hover the plugin row in
Plugins → Installed or open About just to check what version you're on.
Dark-theme variant so it stays readable when theme=dark.

Files: radio.php (version), inc/settings.php (<span> inside H1),
assets/css/radio.css (.radio-version-badge + dark override),
inc/about.php (rotate v0.6.2 into latest expanded slot, v0.6.1 into
earlier-releases list), CHANGELOG.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-30 00:30:14 +01:00
ranger 7a747b829b fix(0.6.1): About page restructure — balance the layout
By v0.6.0 the About page had eight version-history entries, each a
full paragraph, dwarfing the other cards and pushing Credits + thanks
off the visible area.

- Three short cards on top (What / Who / Credits) — equal-height,
  balanced row. Credits gets equal billing instead of being a fourth
  card buried under a wall of version notes.
- Version history is its own full-width card below. Only the latest
  release is shown in full; earlier releases collapse to one line
  each. The card now stays compact however many versions ship —
  adding a future release adds one line, not a paragraph.
- Full prose for older versions lives in CHANGELOG.md on Gitea via
  the existing "View the full CHANGELOG.md →" link. Single source of
  truth.

Files: radio.php (version), inc/about.php (3-card top + new
.radio-about-versions block with __latest / __earlier sub-elements;
9 versions in the earlier-releases list incl. v0.1.0),
assets/css/radio.css (drop dead .radio-about-card--versions rules;
add .radio-about-versions + __latest + __earlier; dark-theme overrides).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-30 00:25:12 +01:00
ranger 0dc3a220d9 feat(0.6.0): pop-out mini-player — continuous background play across admin nav
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>
2026-05-30 00:03:21 +01:00
ranger 2bd501d610 feat(0.5.0): track history + favourites with four search providers
Quietly log every track that scrolls past the player to a per-user
history (capped 500). A star button promotes the good ones to a
separate Favourites tab that doesn't age out. Each row has four
search-provider deep links so you can find the track on whichever
service you use.

Storage
  Two new user_meta keys (separate from radio_state so frequent
  inserts don't churn the player-state blob):
    - radio_history    — capped FIFO of last 500 played tracks
    - radio_favourites — uncapped user-starred list

New page: Radio → History
  - History tab: capped FIFO list, newest first.
  - Favourites tab: starred tracks (uncapped).
  - Each row: when (relative + full timestamp on hover) / station /
    artist — title / four search links / favourite-star toggle.
  - Filter by artist/title (live, client-side) + by station (dropdown).
  - Clear history button (favourites preserved).
  - Search providers: Spotify, YouTube, Apple Music, Bandcamp.
    Deep-link URLs only — no API keys, no third-party JS.

Auto-logging during playback
  fetchTrack (existing 30s SomaFM poll loop) now hands new tracks to
  logTrackIfNew → POST to wp_ajax_radio_log_track. Dedup client-side
  (lastLoggedSig) AND server-side (against last entry in user_meta).
  Junk filtered server-side: (unknown) artist, missing artist/title.

New AJAX endpoints
  - radio_log_track          (nonce radio_save_state — player pages)
  - radio_toggle_favourite   (nonce radio_history — history page only)
  - radio_clear_history      (nonce radio_history — history page only)

Files
  - radio.php (version, require new include, submenu page, asset
    enqueue hook adds radio_page_radio-history, three AJAX endpoints,
    three new localized strings)
  - inc/history.php (NEW — storage helpers + admin page renderer)
  - assets/css/radio.css (history table, toolbar, search-link pills,
    favourite star, dark-theme overrides)
  - assets/js/radio.js (logTrackIfNew wired into fetchTrack;
    bindHistoryPage handles filter/favourite/clear)
  - inc/about.php (history entry)
  - CHANGELOG.md (full entry)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-29 23:55:18 +01:00
ranger f5feca7dfa feat(0.4.0): now-playing indicator — dancing bars + Web Audio visualizer
Two-layer "this is playing right now" visual:

(1) CSS dancing bars — four tiny vertical bars next to the "Now Playing"
    label, staggered `@keyframes` pulse while audio plays. Pure CSS, no
    JS dependency, tints to the user's WP admin colour scheme via
    var(--wp-admin-theme-color). Driven by a single `.is-playing` class
    on `.radio-player` toggled from the existing play/pause/error
    handlers. Always works.

(2) Web Audio frequency visualizer (progressive upgrade) — on first play,
    builds AudioContext + AnalyserNode + canvas drawing pipeline. When
    the analyser starts returning real (non-zero) data, hides the bars
    and shows the canvas with live frequency bars. Falls back to bars
    if AudioContext is unavailable, createMediaElementSource throws, or
    the analyser returns all-zeros for >2s (CORS silently blocking).
    State machine on player._vizState: no-webaudio / init-failed /
    cors-blocked / ok.

`<audio>` element gained `crossorigin="anonymous"` so Web Audio can read
the stream data (SomaFM serves the CORS headers).

Files: radio.php (version), inc/admin-page.php + inc/dashboard-widget.php
(.radio-player__indicator with .radio-player__bars + canvas; crossorigin
on audio), assets/css/radio.css (indicator, bars, radio-bars-dance
keyframes, canvas size), assets/js/radio.js (tryVisualizer,
startVizLoop, stopVizLoop; play/pause/error handlers wire the loop and
toggle is-playing), inc/about.php (history entry).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-29 23:42:09 +01:00
ranger a56fd7aff7 fix(0.3.2): play-button glyph baseline — drop dashicon for Unicode ▶ / ‖
The dashicon used for the play/pause icon was rendering visibly below
the button text — dashicon font metrics sit the glyph low inside its
own box, so even with `inline-flex` centering the symbol looked like
it was on a separate row from the word "Play".

Swap dashicons-controls-play / dashicons-controls-pause for plain
Unicode glyphs (▶ / ‖) which render on the text baseline like any
other character. Flex container changed to align-items: baseline.
font-variant-emoji: text on the glyph span to keep platforms that
might otherwise pick up an emoji variant of ▶ as monochrome text.

Files: radio.php (version), inc/admin-page.php +
inc/dashboard-widget.php (dashicon span → glyph span),
assets/css/radio.css (drop dashicon-sizing rule, add
.radio-player__play-glyph, baseline alignment),
assets/js/radio.js (setPlayIcon swaps glyph textContent instead of
dashicon className), inc/about.php (history entry).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-29 23:19:04 +01:00
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
11 changed files with 1560 additions and 180 deletions
+217
View File
@@ -9,6 +9,223 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
--- ---
## [0.7.1] — 2026-05-30 — Plugin Check follow-up: tested-up-to + .DS_Store re-cleanup
A re-run of PCP after v0.7.0 dropped the issue count from 169 → 4. This release closes the only real one of the four:
### Fixed
- **`Tested up to` bumped: 6.7 → 7.0** in `readme.txt` (PCP `outdated_tested_upto_header`). WordPress 7.0 is current; the previous header would have been flagged as out-of-date at submission review.
- **Stable Tag bumped to 0.7.1** in `readme.txt`.
### Removed (again)
- `.DS_Store` files (root + `assets/`). macOS Finder regenerated them between PCP runs; they will not be present in the actual submission zip. `.gitignore` already covers them.
### Known PCP residue (not addressable in source)
- The `.gitignore` file itself triggers a `hidden_files` WARNING (sev 8) on PCP because it's a dot-file. Keeping `.gitignore` is needed for git; it will be excluded from the submission zip. Acceptable per WP.org packaging conventions.
**Files changed:** `radio.php` (version), `readme.txt` (Tested-up-to + Stable Tag + new 0.7.1 changelog + upgrade notice), `CHANGELOG.md`, `.DS_Store` files deleted.
---
## [0.7.0] — 2026-05-30 — WordPress.org submission prep (full Plugin Check clean)
Ran the official WordPress.org **Plugin Check (PCP)** against v0.6.3 — surfaced **169 issues**. This release closes all of them so the plugin is submission-ready for the WordPress.org plugin directory.
### Changed — branding
- **Plugin Name renamed: "Radio" → "RangerHQ Radio"** to (a) remove the trademarked term "SomaFM" from the plugin name surface (PCP `trademarked_term` warning) and (b) line up with the RangerHQ plugin family. SomaFM is still credited in the Description and on the About page as the data source. Plugin folder/slug stays `a-radio` — no install path changes; existing user_meta keys (`radio_state` / `radio_history` / `radio_favourites`) untouched.
- **`Text Domain` header renamed**: `radio``a-radio` (matched the slug for the first time; PCP `textdomain_mismatch`).
- **`Requires at least` bumped**: `5.0``5.3` (matches `wp_date()` usage in `inc/history.php`; PCP `wp_function_not_compatible_with_requires_wp`).
- **File docstring header** dropped "SomaFM" from the prominent first line.
### Changed — code (mass-mechanical)
- **134 i18n call sites** rewritten from `'radio'` text domain → `'a-radio'` across `radio.php`, `inc/admin-page.php`, `inc/dashboard-widget.php`, `inc/settings.php`, `inc/about.php`, `inc/history.php`, `inc/updater.php`. Single sed pass on the unique pattern `, 'radio' )` (the 6 menu-slug `'radio'` references in `add_menu_page` / `add_submenu_page` were left alone — they're the URL slug, not the text domain).
### Fixed — security
- **8 × `MissingUnslash` + 8 × `InputNotSanitized`** in the v0.5.0 history endpoints (`radio_ajax_log_track`, `radio_ajax_toggle_favourite`). All four `$_POST['artist|title|station|station_id']` access points are now wrapped `sanitize_text_field( wp_unslash( $_POST['…'] ) )` (or `sanitize_key()` for `station_id`) at the access point. The downstream `radio_sanitize_entry()` helper still re-sanitizes as belt+braces.
### Added — translator comments
- 6 × `printf` / `sprintf` calls with placeholders now carry `/* translators: ... */` comments: pop-out window title, updater status messages (HTTP error / available / up-to-date / download), history page "%s ago" relative time.
### Refactored — pop-out window
- Inline `<link>` stylesheets, inline `<style>` block, and `<script>` tag in `radio_render_popout_page()` replaced with `wp_enqueue_style()` + `wp_enqueue_script()` + `wp_localize_script()` registered before the HTML output, then `wp_print_styles()` in `<head>` and `wp_print_footer_scripts()` at end of `<body>`.
- Popup-specific CSS (header, close button, wrap, layout overrides, popup dark theme) moved out of the inline `<style>` and into `assets/css/radio.css` under `body.radio-popout` scope so it only fires inside the popup.
### Removed
- `.DS_Store` files (root + `assets/`) — stray macOS Finder artefacts; PCP `hidden_files`. `.gitignore` already covers them.
### Added — distribution
- **`readme.txt`** in proper WordPress.org format: Plugin headers, Contributors, Donate link, Tags, Requires-at-least, Tested-up-to, Stable Tag, Requires-PHP, License, License URI, short description (≤150 chars), Description, Installation, FAQ, Screenshots, Changelog, Upgrade Notice.
### Compat notes
- No behaviour change for existing users. Per-user state (`radio_state` / `radio_history` / `radio_favourites`) is preserved across the upgrade — no migration needed.
- The displayed Plugin Name in **Plugins → Installed** changes from "Radio" to "RangerHQ Radio" — that's the only visible difference on update.
**Files changed:** `radio.php` (header + 6 translator comments + 8 $_POST hardenings + popup enqueue refactor), `inc/admin-page.php` / `inc/dashboard-widget.php` / `inc/settings.php` / `inc/about.php` / `inc/history.php` / `inc/updater.php` (textdomain mass-fix + translator comments where applicable + about-page version rotation), `assets/css/radio.css` (popup styles moved in under `body.radio-popout`), **new** `readme.txt`, **removed** `.DS_Store`, `assets/.DS_Store`.
---
## [0.6.3] — 2026-05-30 — Discreet "buy me a coffee" support link
### Added
- New `RADIO_SUPPORT_URL` constant in `radio.php` (default `https://buymeacoffee.com/davidtkeane`). Wrapped in `if ( ! defined(...) )` so it's override-able from `wp-config.php`.
- Tiny footer line `☕ Like Radio? If You fancy to buy me a coffee →` inside the **Updates panel** on Settings, below the manual-update note.
- Matching footer line at the bottom of the **Credits + thanks** card on the About page.
- Both spots render from the same constant — change one place, both update.
- **Conditional render**: if `RADIO_SUPPORT_URL` is empty / undefined, the link is silently hidden. Forks can strip funding with one line.
### Design
- Muted styling deliberate: 12 px, admin-theme-coloured link, subtle top border. Reads as housekeeping ("here's where to send thanks") not a sales pitch. No yellow BMC brand chrome.
- Dark-theme variant for the divider (`#3c434a`) so it stays subtle on the dark surface.
**Files changed:** `radio.php` (version, `RADIO_SUPPORT_URL` constant), `inc/updater.php` (link inside the Updates panel after the manual-update paragraph), `inc/about.php` (link inside the Credits + thanks card; rotate v0.6.3 into latest expanded slot, v0.6.2 into earlier-releases list), `assets/css/radio.css` (`.radio-support-link` styling + dark-theme override).
---
## [0.6.2] — 2026-05-30 — Current version badge on Settings
### Added
- Small grey pill follows the **"Radio — Settings"** heading: `v{RADIO_VERSION}`. Visible at a glance so you don't have to hover the plugin row in *Plugins → Installed* or open *About* just to check what version you're on.
- Dark-theme variant of the badge (`#2c3338` background, `#c3c4c7` text) so it stays readable when `theme=dark`.
**Files changed:** `radio.php` (version), `inc/settings.php` (`<span class="radio-version-badge">v…</span>` inside the H1), `assets/css/radio.css` (`.radio-version-badge` styling + dark-theme override).
---
## [0.6.1] — 2026-05-30 — About page restructure
By v0.6.0 the About page had eight version-history entries, each a full paragraph, dwarfing the other cards and pushing Credits + thanks off the visible area. v0.6.1 rebalances the layout.
### Changed
- **Three short cards on top** (What / Who / **Credits**) — equal-height, balanced row. Credits is no longer a fourth card buried under the version history; it sits beside What and Who where it belongs.
- **Version history is its own full-width card below.** Only the **latest** release is shown in full; **earlier releases collapse to one line each** (version + date + headline). The card now stays compact however many versions ship — adding a future release adds one line, not a paragraph.
- **Full prose for older versions lives in `CHANGELOG.md` on Gitea** — the "View the full CHANGELOG.md →" link does the heavy lifting. Single source of truth, no duplication.
**Files changed:** `radio.php` (version), `inc/about.php` (3-card top + new `.radio-about-versions` block with `__latest` / `__earlier` sub-elements; 9 versions in the earlier-releases list incl. v0.1.0), `assets/css/radio.css` (removed dead `.radio-about-card--versions` rules; added `.radio-about-versions` + `__latest` + `__earlier` rules; dark-theme overrides for the new selectors).
---
## [0.6.0] — 2026-05-30 — Pop-out mini-player (continuous background play)
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.
### Added — **Pop out** button + standalone popup player
- Small **`↗ Pop out`** button beside the Play button on both the main Radio page and the Dashboard widget. Click it and a **380×560 standalone window** opens with just the player chrome (no WP admin sidebar / nav).
- The popup lives at `admin-post.php?action=radio_popout&play=1` — a new server-side route that renders a **full standalone HTML page** outside the WP admin shell (custom `<!DOCTYPE>`, head, body, no admin chrome).
- Popup is `radio_popout`-named so a second click on Pop out **re-focuses the existing window** instead of opening a new one.
- The popup's `<audio>` element is never destroyed by parent-tab navigation, so the music keeps playing while you click around Plugins, Posts, Users, etc.
### Auto-resume — pick up where the main tab left off
- The Pop-out button URL carries `&play=1`. `radio.js` reads it from the localized config and auto-calls `audio.play()` 200 ms after init. Same-origin user-gesture popups are exempt from autoplay-blocking on every modern browser, so it just works.
- On opening the popup, **every other audio surface in the main tab is paused** so you don't end up with two streams running simultaneously.
### Popup details
- Theme follows the user's saved choice (`radio_state['theme']`) — light by default, dark if explicitly set; the popup body gets the `radio-theme-dark` class so the existing dark-mode CSS rules apply.
- The popup includes everything you need to listen and switch: now-playing block (with dancing bars + Web Audio visualizer), play/pause, mute, volume, full station dropdown grouped by genre, error slot.
- Close button (`✕`) in the top-right calls `window.close()`.
- Pop out button **does not appear inside the popup** itself (would be infinite); the JS detects `popoutUrl === ''` in the localized config and hides any Pop-out button it finds.
- Popup blocked? The button shows a clear alert: *"Pop-out blocked by the browser. Allow popups for this site, then try again."*
### State stays in sync
- The popup uses the **same `radio_save_state` AJAX endpoint** as the main player. If you change station or volume in the popup, it persists to user_meta; the next time you load any Radio page in the main tab it picks up the new values.
- Track history continues to log from whichever surface is playing — the popup polls SomaFM and POSTs to `radio_log_track` exactly like the main player.
**Files changed:** `radio.php` (version, `popoutUrl` added to localized config, new `admin_post_radio_popout` action + `radio_render_popout_page` handler with full standalone HTML), `inc/admin-page.php` + `inc/dashboard-widget.php` (Pop-out button beside Play), `assets/css/radio.css` (Pop-out button styling), `assets/js/radio.js` (`bindPopOut` opens the window + pauses other surfaces, autoplay branch reads `cfg.autoPlay`), `inc/about.php` (history entry).
---
## [0.5.0] — 2026-05-29 — Track history + favourites
SomaFM plays deep cuts you'll never hear again. v0.5.0 quietly logs every track that scrolls past so you can find it again later — and a star button keeps the ones worth keeping forever.
### Added — `Radio → History` admin page (per-user)
- **History tab** — capped FIFO list of the last 500 played tracks. Each row shows when (relative time, full timestamp on hover), station, *artist — title*, four search links, and a favourite-star toggle.
- **Favourites tab** — uncapped list of starred tracks. Same row layout. Survives even when the history rolls over.
- **Filter** by artist/title (live, client-side) and by station (dropdown). **Clear history** button on the History tab — favourites preserved.
- **Four search providers** per row, brand-tinted on hover: **Spotify** (green), **YouTube** (red), **Apple Music** (pink), **Bandcamp** (teal). Deep-link search URLs only — no API keys, no third-party JS.
- Empty-state messages on both tabs.
### Added — automatic logging during playback
- `fetchTrack` (the existing 30s SomaFM polling loop) now hands every new track to a new `logTrackIfNew` helper that POSTs it to `wp_ajax_radio_log_track`.
- **Dedup**: client-side via `lastLoggedSig` so the 30s polling doesn't re-log the same song; server-side against the last entry in user_meta as belt-and-braces.
- **Junk filtering**: `(unknown)` artists and entries missing artist *or* title are dropped server-side in `radio_sanitize_entry`.
### Added — per-user storage
- Two new `user_meta` keys, separate from `radio_state` so frequent track inserts don't churn the player-state blob:
- `radio_history` — capped at **500 entries** (~5080 KB max).
- `radio_favourites` — uncapped, expected to stay small (user-curated).
### Added — three new AJAX endpoints
- `wp_ajax_radio_log_track` — append a track (nonce: `radio_save_state`; player-page only).
- `wp_ajax_radio_toggle_favourite` — toggle a track in favourites (nonce: `radio_history`; History-page only).
- `wp_ajax_radio_clear_history` — clear the history list (nonce: `radio_history`; History-page only). Favourites untouched.
### Notes
- Per-user — nothing is shared, nothing leaves the site. Just your own listening history on your own WP account.
- **No PII concern** — entries are public station/artist/title strings from SomaFM's own JSON.
- Search-link UI tints toward each provider's brand colour on hover only — keeps the row visually calm in the default state.
**Files changed:** `radio.php` (version, require, submenu, asset enqueue hook, three AJAX endpoints, three new localized strings), **new** `inc/history.php` (storage helpers + page renderer), `assets/css/radio.css` (history-page table, toolbar, search-link pills, favourite star, dark-theme overrides), `assets/js/radio.js` (`logTrackIfNew` wired into `fetchTrack`; `bindHistoryPage` for filter/favourite/clear), `inc/about.php` (history entry).
---
## [0.4.0] — 2026-05-29 — Now-playing indicator: dancing bars + Web Audio visualizer
A small visual that instantly says *"this is playing right now."* Two layers — a reliable CSS-only indicator that always works, and a progressive Web Audio upgrade that draws actual frequency data when the browser allows.
### Added — dancing bars (always on, CSS only)
- Four tiny vertical bars next to the "Now Playing" label that pulse with a staggered `@keyframes` animation while the audio is playing, settling to a low static state when paused. Pure CSS — no JS dependency, no audio analysis.
- Bars use `var(--wp-admin-theme-color)` so they tint to whichever WP admin colour scheme the user has chosen.
- Driven by a single `.is-playing` class toggled on the `.radio-player` surface from the existing `play` / `pause` / `error` audio handlers.
### Added — Web Audio frequency visualizer (progressive upgrade)
- On first `play`, `tryVisualizer` builds an `AudioContext` + `AnalyserNode` chain on the `<audio>` element and starts drawing live frequency bars on a `<canvas>` next to "Now Playing."
- `<audio>` now carries `crossorigin="anonymous"` so the Web Audio analyser can actually read the stream data (SomaFM serves the CORS headers).
- **Graceful fallback:** if `AudioContext` isn't available, or `createMediaElementSource` throws, or the analyser returns all-zeros for 2 s (CORS silently blocking), the visualizer state flips to `cors-blocked` / `init-failed` / `no-webaudio` and the CSS dancing bars remain — the plugin never loses its indicator.
- Canvas is sized to its CSS box × `devicePixelRatio` so it stays crisp on retina screens.
### State machine on `player._vizState`
| Value | Meaning |
|---|---|
| _undefined_ | not yet attempted |
| `no-webaudio` | browser lacks `AudioContext` |
| `init-failed` | `createMediaElementSource` threw |
| `cors-blocked` | analyser returned zeros for >2 s |
| `ok` | live frequency data flowing → canvas shown, bars hidden |
**Files changed:** `radio.php` (version), `inc/admin-page.php` + `inc/dashboard-widget.php` (added `.radio-player__indicator` with `.radio-player__bars` + `<canvas data-radio-viz>`, plus `crossorigin="anonymous"` on the `<audio>`), `assets/css/radio.css` (indicator container, bars + `radio-bars-dance` keyframes, canvas size), `assets/js/radio.js` (`tryVisualizer` / `startVizLoop` / `stopVizLoop`, `play/pause/error` handlers toggle `is-playing` class and drive the loop), `inc/about.php` (history entry).
---
## [0.3.2] — 2026-05-29 — Play-button glyph baseline fix
The dashicon used for the play/pause icon was rendering visibly below the button text baseline — the dashicon font sits the glyph low inside its own box, and even with `inline-flex` centering the result looked like the symbol was on a separate row from the word "Play".
### Fixed
- **Play/pause icon now sits on the text baseline.** Swapped the dashicon (`dashicons-controls-play` / `dashicons-controls-pause`) for a plain Unicode glyph (▶ / ‖) which renders on the text baseline like any other character.
- Flex container changed from `align-items: center` to `align-items: baseline` for the same reason.
- `font-variant-emoji: text` set so platforms that might otherwise pick up a colour-emoji variant for ▶ keep it as monochrome text.
**Files changed:** `radio.php` (version), `inc/admin-page.php` + `inc/dashboard-widget.php` (dashicon span → glyph span), `assets/css/radio.css` (drop the dashicon-sizing rule, add `.radio-player__play-glyph` styling, change play-button flex alignment to baseline), `assets/js/radio.js` (`setPlayIcon` now swaps glyph `textContent` instead of dashicon `className`), `inc/about.php` (history entry).
---
## [0.3.1] — 2026-05-29 — My Radio layout polish + drop dark-auto
Quick patch after a real-screen review of the My Radio admin page. v0.3.0 added a lot of features but stretched the player to fill the full admin width and — embarrassingly — introduced a real contrast bug via the dark-auto CSS.
### Fixed
- **Dropped `@media (prefers-color-scheme: dark)` for `theme=auto`.** WordPress admin has no native dark mode, so when the OS was dark, our dark text rendered on the still-white WP postbox = unreadable. `auto` now behaves as light (matching WP's actual scheme); `dark` is still available as an explicit choice.
- **`theme=dark` now actually reads.** The player surface goes dark (`#1d2327` background + subtle border + padding) so the light text has somewhere to sit, instead of fighting the white WP postbox.
- **Player no longer stretches edge-to-edge.** `.radio-wrap { max-width: 880px; }` keeps the player a focused settings-page card.
- **Intro paragraph one-line on normal widths.** Removed the `max-width: 720px` cap that was forcing the wrap.
- **Volume slider no longer dominates the row.** Fixed width 220px (`flex: 0 0 auto`) — the percent label now sits next to the slider instead of pinned to the far right edge.
- **Station dropdown** capped at 360px (was full-width) — typical WP form-control width.
- **Play button icon** shrunk from 18px to 14px so the ▶ glyph sits on the button-text baseline instead of looking like a separate row.
**Files changed:** `radio.php` (version), `assets/css/radio.css` (wrap width, intro, play icon, volume, station-select, dark-auto block deleted, dark-surface added), `inc/about.php` (history entry).
---
## [0.3.0] — 2026-05-29 — Dark theme + mute + media keys + current-track display ## [0.3.0] — 2026-05-29 — Dark theme + mute + media keys + current-track display
A polish pass that closes the gaps surfaced by a UI review. Two categories: **2nd-look fixes** (things the previous release implied but didn't actually deliver) and **nice-to-haves** (small upgrades that lift the admin-player feel). A polish pass that closes the gaps surfaced by a UI review. Two categories: **2nd-look fixes** (things the previous release implied but didn't actually deliver) and **nice-to-haves** (small upgrades that lift the admin-player feel).
+358 -57
View File
@@ -30,6 +30,73 @@
margin-right: 4px; margin-right: 4px;
} }
/* ──────────────────────────────────────────────────────────────────
* Now-playing indicator — CSS dancing bars (always present) +
* optional Web Audio frequency visualizer (canvas, progressive
* upgrade). The JS toggles a `.is-playing` class on the parent
* `.radio-player` to drive the dance; when the visualizer is
* successfully wired, it hides the bars and reveals the canvas.
* ─────────────────────────────────────────────────────────────── */
.radio-player__indicator {
display: inline-flex;
align-items: flex-end;
height: 14px;
min-width: 18px;
margin-right: 6px;
vertical-align: middle;
overflow: hidden;
}
.radio-player__bars {
display: inline-flex;
align-items: flex-end;
height: 100%;
width: 18px;
gap: 2px;
}
.radio-player__bars span {
display: inline-block;
width: 2px;
height: 100%;
background: var(--wp-admin-theme-color, #2271b1);
border-radius: 1px;
transform-origin: bottom;
transform: scaleY(0.25);
transition: transform 0.2s ease;
opacity: 0.65;
}
/* When playing, each bar dances with a staggered delay so the row
has a lifelike, slightly out-of-phase pulse rather than uniform
thumping. ~0.85s loop keeps it lively without being twitchy. */
.radio-player.is-playing .radio-player__bars span {
animation: radio-bars-dance 0.85s ease-in-out infinite;
opacity: 1;
}
.radio-player.is-playing .radio-player__bars span:nth-child(1) { animation-delay: 0s; }
.radio-player.is-playing .radio-player__bars span:nth-child(2) { animation-delay: 0.18s; }
.radio-player.is-playing .radio-player__bars span:nth-child(3) { animation-delay: 0.36s; }
.radio-player.is-playing .radio-player__bars span:nth-child(4) { animation-delay: 0.09s; }
@keyframes radio-bars-dance {
0%, 100% { transform: scaleY(0.3); }
20% { transform: scaleY(0.9); }
40% { transform: scaleY(0.5); }
60% { transform: scaleY(1); }
80% { transform: scaleY(0.65); }
}
/* Web Audio canvas — wider than the CSS bars so the live frequency
data has room to breathe. JS swaps display when the visualizer
confirms it's receiving real (non-zero) data. */
.radio-player__viz {
display: block;
height: 14px;
width: 60px;
}
.radio-player__station-name { .radio-player__station-name {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
@@ -80,25 +147,41 @@
} }
.radio-player__play { .radio-player__play {
/* native .button .button-primary styling; just ensure icon aligns */ /* native .button .button-primary styling; just ensure glyph aligns */
display: inline-flex !important; display: inline-flex !important;
align-items: center; align-items: baseline;
gap: 6px; gap: 6px;
} }
.radio-player__play .dashicons { /* Unicode play/pause glyph (not a dashicon — those sit low inside their
font-size: 18px; own font box and look like they're below the text baseline). A plain
width: 18px; ▶ / ‖ glyph renders on the text baseline like any other character. */
height: 18px; .radio-player__play-glyph {
display: inline-block;
font-size: 11px;
line-height: 1; line-height: 1;
/* Coerce to text rendering rather than colour-emoji on systems that
might otherwise pick up an emoji variant for ▶ / ‖. */
font-variant-emoji: text;
font-family: "Helvetica Neue", Arial, sans-serif;
} }
/* v0.6.0: Pop-out button — small secondary button beside Play. Uses WP
native .button styles; the ↗ glyph signals "opens in another window." */
.radio-player__popout {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
}
.radio-player__popout span[aria-hidden] { font-size: 13px; line-height: 1; }
.radio-player__volume { .radio-player__volume {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
flex: 1; flex: 0 0 auto;
min-width: 200px; width: 220px;
} }
.radio-player__volume .dashicons { .radio-player__volume .dashicons {
@@ -160,7 +243,7 @@
.radio-player__station-select select { .radio-player__station-select select {
width: 100%; width: 100%;
max-width: 100%; max-width: 360px;
} }
/* Error notice — uses WP notice styling */ /* Error notice — uses WP notice styling */
@@ -195,9 +278,15 @@
} }
/* ────────────────────────────────────────────────────────────────── /* ──────────────────────────────────────────────────────────────────
* Main admin page — wrap player in a postbox-like card * Main admin page — wrap player in a postbox-like card.
* Constrained max-width keeps the player a focused settings-page card
* instead of stretching to fill the full admin width.
* ─────────────────────────────────────────────────────────────── */ * ─────────────────────────────────────────────────────────────── */
.radio-wrap {
max-width: 880px;
}
.radio-wrap .radio-player { .radio-wrap .radio-player {
margin-top: 4px; margin-top: 4px;
} }
@@ -206,9 +295,41 @@
margin: 0 0 16px; margin: 0 0 16px;
color: #50575e; color: #50575e;
font-size: 13px; font-size: 13px;
max-width: 720px;
} }
/* v0.6.3: Discreet "buy me a coffee" support line. Rendered in two
spots from the single RADIO_SUPPORT_URL constant — bottom of the
Updates panel in Settings, and bottom of the Credits + thanks card
on About. Muted styling deliberate: housekeeping not sales pitch. */
.radio-support-link {
display: block;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #f0f0f1;
font-size: 12px;
color: var(--wp-admin-theme-color, #2271b1);
text-decoration: none;
}
.radio-support-link::before { content: '☕ '; opacity: 0.8; }
.radio-support-link:hover { text-decoration: underline; }
.radio-theme-dark .radio-support-link { border-top-color: #3c434a; }
/* Small grey pill that follows the Settings page H1 — at-a-glance
confirmation of the version you are running. */
.radio-version-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
background: #e2e4e7;
color: #50575e;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
vertical-align: middle;
letter-spacing: 0.02em;
}
.radio-theme-dark .radio-version-badge { background: #2c3338; color: #c3c4c7; }
/* ────────────────────────────────────────────────────────────────── /* ──────────────────────────────────────────────────────────────────
* Dashboard widget — no nested card; bare content inside .inside * Dashboard widget — no nested card; bare content inside .inside
* (WP renders the widget as a postbox already; don't double up) * (WP renders the widget as a postbox already; don't double up)
@@ -271,27 +392,50 @@
padding-top: 0; padding-top: 0;
} }
.radio-about-card--versions ul { .radio-about-changelog-link {
list-style: none; display: inline-block;
padding: 12px; margin: 0 12px 12px;
margin: 0; font-size: 13px;
color: var(--wp-admin-theme-color, #2271b1);
text-decoration: none;
}
.radio-about-changelog-link:hover { text-decoration: underline; }
/* ──────────────────────────────────────────────────────────────────
* Version history — full-width card BELOW the top row of cards
* (v0.6.1). Latest release shown in full; earlier releases collapse
* to one line each so the card stays compact however many versions
* ship. Full prose for older versions lives in the CHANGELOG on Gitea.
* ─────────────────────────────────────────────────────────────── */
.radio-about-versions {
max-width: 1100px;
margin-top: 16px;
background: #fff;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
} }
.radio-about-card--versions li { .radio-about-versions h2 {
margin-bottom: 10px; margin: 0;
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
background: #f6f7f7;
border-bottom: 1px solid #c3c4c7;
}
.radio-about-versions__latest {
padding: 12px 12px 8px;
}
.radio-about-versions__latest .ver {
font-weight: 600;
color: var(--wp-admin-theme-color, #2271b1);
font-size: 13px; font-size: 13px;
} }
.radio-about-card--versions li:last-child { .radio-about-versions__latest .latest {
margin-bottom: 0;
}
.radio-about-card--versions .ver {
font-weight: 600;
color: var(--wp-admin-theme-color, #2271b1);
}
.radio-about-card--versions .latest {
display: inline-block; display: inline-block;
margin-left: 6px; margin-left: 6px;
padding: 1px 7px; padding: 1px 7px;
@@ -303,16 +447,47 @@
vertical-align: middle; vertical-align: middle;
} }
.radio-about-changelog-link { .radio-about-versions__latest p {
display: inline-block; margin: 6px 0 0;
margin: 0 12px 12px;
font-size: 13px; font-size: 13px;
color: var(--wp-admin-theme-color, #2271b1); color: #1d2327;
text-decoration: none;
} }
.radio-about-changelog-link:hover { .radio-about-versions h3 {
text-decoration: underline; margin: 4px 0 0;
padding: 8px 12px 4px;
font-size: 11px;
font-weight: 600;
color: #646970;
text-transform: uppercase;
letter-spacing: 0.06em;
border-top: 1px solid #f0f0f1;
}
.radio-about-versions__earlier {
list-style: none;
margin: 0;
padding: 4px 12px 8px;
}
.radio-about-versions__earlier li {
padding: 4px 0;
font-size: 13px;
color: #50575e;
}
.radio-about-versions__earlier .ver {
display: inline-block;
min-width: 48px;
font-weight: 600;
color: var(--wp-admin-theme-color, #2271b1);
}
.radio-about-versions__earlier .ver-date {
display: inline-block;
min-width: 110px;
font-size: 11px;
color: #646970;
} }
/* ────────────────────────────────────────────────────────────────── /* ──────────────────────────────────────────────────────────────────
@@ -362,31 +537,157 @@
color: #f0f0f1; color: #f0f0f1;
border-bottom-color: #3c434a; border-bottom-color: #3c434a;
} }
.radio-theme-dark .radio-about-versions { background: #1d2327; border-color: #3c434a; color: #c3c4c7; }
.radio-theme-dark .radio-about-versions h2 { background: #2c3338; color: #f0f0f1; border-bottom-color: #3c434a; }
.radio-theme-dark .radio-about-versions h3 { color: #a7aaad; border-top-color: #3c434a; }
.radio-theme-dark .radio-about-versions__latest p { color: #c3c4c7; }
.radio-theme-dark .radio-about-versions__earlier li { color: #c3c4c7; }
.radio-theme-dark .radio-about-versions__earlier .ver-date { color: #a7aaad; }
.radio-theme-dark #radio_dashboard_widget .radio-player__credit { .radio-theme-dark #radio_dashboard_widget .radio-player__credit {
border-top-color: #3c434a; border-top-color: #3c434a;
} }
/* Auto — same dark rules behind prefers-color-scheme. Duplicated rather /* Give the player its own dark surface when theme=dark so the dark text
than nested in @media-inside-selector (CSS doesn't allow that), kept has something to read against — WP postboxes don't follow our dark
line-for-line in sync with the .radio-theme-dark block above. */ choice, so without this the light text would sit on white. */
@media (prefers-color-scheme: dark) { .radio-theme-dark .radio-player {
.radio-theme-auto .radio-player__now { border-bottom-color: #3c434a; } background: #1d2327;
.radio-theme-auto .radio-player__station-name { color: #f0f0f1; } padding: 14px 16px;
.radio-theme-auto .radio-player__label, border-radius: 3px;
.radio-theme-auto .radio-player__station-genre, border: 1px solid #3c434a;
.radio-theme-auto .radio-player__volume-pct,
.radio-theme-auto .radio-player__credit,
.radio-theme-auto .radio-player__mute,
.radio-theme-auto .radio-player__station-select label,
.radio-theme-auto .radio-player__volume .dashicons { color: #a7aaad; }
.radio-theme-auto .radio-player__mute:hover { color: #f0f0f1; }
.radio-theme-auto .radio-player__mute--muted { color: #ff8b8b; }
.radio-theme-auto .radio-player__station-desc,
.radio-theme-auto .radio-player__track,
.radio-theme-auto .radio-intro { color: #c3c4c7; }
.radio-theme-auto .radio-player__station-genre { background: rgba(255, 255, 255, 0.08); }
.radio-theme-auto .radio-player__error { background: rgba(179, 45, 46, 0.18); color: #ff9b9b; }
.radio-theme-auto .radio-about-card { background: #1d2327; border-color: #3c434a; color: #c3c4c7; }
.radio-theme-auto .radio-about-card h2 { background: #2c3338; color: #f0f0f1; border-bottom-color: #3c434a; }
.radio-theme-auto #radio_dashboard_widget .radio-player__credit { border-top-color: #3c434a; }
} }
/* ──────────────────────────────────────────────────────────────────
* Pop-out window (v0.6.0 → moved here from inline <style> in v0.7.0
* for PCP cleanliness). All scoped to body.radio-popout so these
* rules only fire inside the popup window, never bleed onto admin
* pages that load the same radio.css.
* ─────────────────────────────────────────────────────────────── */
body.radio-popout {
/* Popup has no WP admin chrome to provide --wp-admin-theme-color;
set a reasonable default so the player + links still tint. */
--wp-admin-theme-color: #2271b1;
margin: 0;
padding: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: #f0f0f1;
color: #1d2327;
font-size: 13px;
}
body.radio-popout .radio-popout-header { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; }
body.radio-popout .radio-popout-header h1 { margin: 0; font-size: 14px; font-weight: 600; color: #1d2327; }
body.radio-popout .radio-popout-header h1::before { content: '📻 '; }
body.radio-popout .radio-popout-close { background: none; border: 0; font-size: 18px; cursor: pointer; color: #646970; padding: 4px 8px; line-height: 1; border-radius: 3px; }
body.radio-popout .radio-popout-close:hover { color: #b32d2e; background: rgba(179, 45, 46, 0.08); }
body.radio-popout .radio-popout-wrap { background: #fff; border: 1px solid #c3c4c7; padding: 14px; border-radius: 3px; }
body.radio-popout .radio-popout-wrap .radio-player__station-select select { max-width: 100%; }
body.radio-popout .radio-popout-wrap .radio-player__volume { width: 100%; }
body.radio-popout .radio-popout-wrap .radio-player__controls { flex-direction: column; align-items: stretch; gap: 10px; }
/* Popup dark theme — keeps the popup readable when theme=dark */
body.radio-popout.radio-theme-dark { background: #101213; color: #f0f0f1; }
body.radio-popout.radio-theme-dark .radio-popout-header h1 { color: #f0f0f1; }
body.radio-popout.radio-theme-dark .radio-popout-wrap { background: #1d2327; border-color: #3c434a; }
body.radio-popout.radio-theme-dark .radio-popout-close { color: #a7aaad; }
/* ──────────────────────────────────────────────────────────────────
* History + Favourites page (v0.5.0)
* ─────────────────────────────────────────────────────────────── */
.radio-history-wrap { max-width: 1100px; }
.radio-tab-count {
color: #646970;
font-weight: 400;
margin-left: 2px;
}
.radio-history-toolbar {
display: flex;
gap: 10px;
align-items: center;
margin: 12px 0 16px;
flex-wrap: wrap;
}
.radio-history-toolbar input[type="search"] {
flex: 1 1 220px;
max-width: 360px;
}
.radio-history-toolbar select { max-width: 220px; }
.radio-history-clear { margin-left: auto !important; }
.radio-history-empty {
margin-top: 24px;
padding: 24px;
background: #fff;
border: 1px solid #c3c4c7;
color: #50575e;
font-style: italic;
text-align: center;
}
.radio-history-table { background: #fff; }
.radio-history-table th,
.radio-history-table td { padding: 10px 12px; vertical-align: middle; }
.radio-history-table th.when,
.radio-history-table th.station,
.radio-history-table th.fav { white-space: nowrap; }
.radio-history-table .when,
.radio-history-table .station {
color: #646970; font-size: 12px; white-space: nowrap;
}
.radio-history-table .track { font-size: 14px; }
.radio-history-table .track strong { color: #1d2327; }
.radio-history-table .search { white-space: nowrap; }
.radio-history-table .fav { text-align: center; width: 42px; }
/* Search-link pills, brand-tinted on hover */
.radio-search-link {
display: inline-block;
padding: 2px 8px;
margin-right: 4px;
font-size: 11px;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
background: #e2e4e7;
color: #1d2327;
transition: background 0.15s ease, color 0.15s ease;
}
.radio-search-link:hover { background: #d0d3d6; }
.radio-search-link--spotify:hover { background: #1ed760; color: #000; }
.radio-search-link--youtube:hover { background: #ff0000; color: #fff; }
.radio-search-link--apple:hover { background: #fa57c1; color: #fff; }
.radio-search-link--bandcamp:hover { background: #629aa9; color: #fff; }
/* Favourite star — grey by default, golden when starred */
.radio-fav-btn {
background: none;
border: 0;
padding: 4px 6px;
cursor: pointer;
font-size: 18px;
line-height: 1;
color: #c3c4c7;
transition: transform 0.12s ease, color 0.12s ease;
}
.radio-fav-btn:hover { transform: scale(1.2); color: #f0b849; }
.radio-fav-btn:focus { outline: 2px solid var(--wp-admin-theme-color, #2271b1); outline-offset: 1px; }
.radio-fav-btn.is-fav { color: #f0b849; }
.radio-fav-btn[disabled] { opacity: 0.5; cursor: progress; }
/* Filtered-out rows hidden via JS */
.radio-history-row.is-filtered { display: none; }
/* Dark theme — history surfaces */
.radio-theme-dark .radio-history-table { background: #1d2327; color: #c3c4c7; border-color: #3c434a; }
.radio-theme-dark .radio-history-table th { background: #2c3338; color: #f0f0f1; border-bottom-color: #3c434a; }
.radio-theme-dark .radio-history-table .track strong { color: #f0f0f1; }
.radio-theme-dark .radio-history-table .when,
.radio-theme-dark .radio-history-table .station { color: #a7aaad; }
.radio-theme-dark .radio-search-link { background: #2c3338; color: #c3c4c7; }
.radio-theme-dark .radio-history-empty { background: #1d2327; border-color: #3c434a; color: #c3c4c7; }
.radio-theme-dark .radio-fav-btn { color: #50575e; }
.radio-theme-dark .radio-fav-btn.is-fav,
.radio-theme-dark .radio-fav-btn:hover { color: #f0b849; }
+255 -4
View File
@@ -68,11 +68,13 @@
}); });
} }
/** Update play/pause button icon + label to reflect current audio state. */ /** Update play/pause button glyph + label to reflect current audio state.
* v0.3.2: switched from .dashicons to a Unicode glyph so the symbol sits
* on the text baseline instead of below it. */
function setPlayIcon(btn, playing) { function setPlayIcon(btn, playing) {
var icon = btn.querySelector('.dashicons'); var glyph = btn.querySelector('[data-radio-play-glyph]');
var label = btn.querySelector('[data-radio-play-label]'); var label = btn.querySelector('[data-radio-play-label]');
if (icon) { icon.className = 'dashicons ' + (playing ? 'dashicons-controls-pause' : 'dashicons-controls-play'); } if (glyph) { glyph.textContent = playing ? '‖' : '▶'; } // ‖ or ▶
if (label) { label.textContent = playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'); } if (label) { label.textContent = playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'); }
btn.setAttribute('title', playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play')); btn.setAttribute('title', playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'));
} }
@@ -107,7 +109,8 @@
} }
/** SomaFM current-track polling. Best-effort: stays hidden if the API /** SomaFM current-track polling. Best-effort: stays hidden if the API
* is unreachable / CORS-blocked (the plugin keeps working regardless). */ * is unreachable / CORS-blocked (the plugin keeps working regardless).
* v0.5.0: hands new tracks to logTrackIfNew so they land in user history. */
function startTrackPolling(player, station) { function startTrackPolling(player, station) {
stopTrackPolling(player); stopTrackPolling(player);
var trackEl = player.querySelector('[data-radio-track]'); var trackEl = player.querySelector('[data-radio-track]');
@@ -127,6 +130,7 @@
if (!title && !artist) { trackEl.hidden = true; return; } if (!title && !artist) { trackEl.hidden = true; return; }
trackEl.textContent = artist ? (title + ' — ' + artist) : title; trackEl.textContent = artist ? (title + ' — ' + artist) : title;
trackEl.hidden = false; trackEl.hidden = false;
logTrackIfNew(artist, title, station);
}) })
.catch(function () { trackEl.hidden = true; }); .catch(function () { trackEl.hidden = true; });
} }
@@ -134,6 +138,29 @@
player._trackTimer = setInterval(fetchTrack, 30000); player._trackTimer = setInterval(fetchTrack, 30000);
} }
/** v0.5.0: POST a newly-played track to the server history.
* Deduped client-side via lastLoggedSig so consecutive polls of the
* same song don't spam the endpoint (server dedups too as belt+braces). */
var lastLoggedSig = '';
function logTrackIfNew(artist, title, station) {
if (!cfg.ajaxUrl || !cfg.nonce) { return; }
if (!artist || !title) { return; }
if (artist.toLowerCase() === '(unknown)') { return; }
var sig = (artist + '|' + title + '|' + ((station && station.id) || '')).toLowerCase();
if (sig === lastLoggedSig) { return; }
lastLoggedSig = sig;
var fd = new FormData();
fd.append('action', 'radio_log_track');
fd.append('nonce', cfg.nonce);
fd.append('artist', artist);
fd.append('title', title);
fd.append('station', (station && station.name) || '');
fd.append('station_id', (station && station.id) || '');
fetch(cfg.ajaxUrl, { method: 'POST', credentials: 'same-origin', body: fd })
.catch(function () { /* track log is best-effort */ });
}
function stopTrackPolling(player) { function stopTrackPolling(player) {
if (player._trackTimer) { if (player._trackTimer) {
clearInterval(player._trackTimer); clearInterval(player._trackTimer);
@@ -143,6 +170,116 @@
if (trackEl) { trackEl.hidden = true; trackEl.textContent = ''; } if (trackEl) { trackEl.hidden = true; trackEl.textContent = ''; }
} }
/** Web Audio frequency visualizer — progressive upgrade over the CSS
* dancing bars. Tries once per player surface; if CORS or browser
* support blocks it, silently leaves the CSS bars in place.
*
* State machine on player._vizState:
* undefined → not yet tried
* 'no-webaudio' → browser lacks AudioContext
* 'init-failed' → createMediaElementSource threw (e.g. already wired)
* 'cors-blocked' → analyser returned all-zeros for >2s → CORS silently failed
* 'ok' → live frequency data flowing → canvas visible, bars hidden
*/
function tryVisualizer(player, audio) {
if (player._vizState) { return; }
var AudioCtx = window.AudioContext || window.webkitAudioContext;
if (!AudioCtx) { player._vizState = 'no-webaudio'; return; }
var canvas = player.querySelector('[data-radio-viz]');
if (!canvas) { player._vizState = 'no-canvas'; return; }
var ctx, srcNode, analyser;
try {
ctx = new AudioCtx();
srcNode = ctx.createMediaElementSource(audio);
analyser = ctx.createAnalyser();
analyser.fftSize = 64; // → 32 frequency bins, plenty for a 60px-wide canvas
srcNode.connect(analyser);
analyser.connect(ctx.destination); // KEEP audio audible
} catch (e) {
if (window.console && console.warn) { console.warn('Radio viz: init failed —', e.message || e); }
player._vizState = 'init-failed';
return;
}
if (ctx.state === 'suspended') { ctx.resume(); }
// Match the canvas backing-store to its CSS size × DPR for crispness.
var dpr = window.devicePixelRatio || 1;
canvas.width = Math.max(1, canvas.offsetWidth * dpr);
canvas.height = Math.max(1, canvas.offsetHeight * dpr);
var c2d = canvas.getContext('2d');
var data = new Uint8Array(analyser.frequencyBinCount);
var bars = player.querySelector('.radio-player__bars');
// Stash on the player so play/pause/error handlers can drive it.
player._viz = {
ctx: ctx,
analyser: analyser,
canvas: canvas,
c2d: c2d,
data: data,
bars: bars,
hasData: false,
firstAt: 0,
raf: null
};
player._vizState = 'ok'; // optimistic; flipped to 'cors-blocked' if data stays zero
}
function startVizLoop(player, audio) {
if (player._vizState !== 'ok' || !player._viz) { return; }
var v = player._viz;
if (v.raf) { return; } // already running
if (v.ctx.state === 'suspended') { v.ctx.resume(); }
v.firstAt = Date.now();
var color = (getComputedStyle(player).getPropertyValue('--wp-admin-theme-color') || '#2271b1').trim() || '#2271b1';
function draw() {
if (audio.paused) { v.raf = null; return; }
v.analyser.getByteFrequencyData(v.data);
// Detect whether we're getting real audio (non-zero data). Without
// proper CORS the analyser returns all-zeros silently.
if (!v.hasData) {
for (var j = 0; j < v.data.length; j++) {
if (v.data[j] > 0) { v.hasData = true; break; }
}
if (!v.hasData && Date.now() - v.firstAt > 2000) {
// Two seconds of silence from the analyser = CORS blocked.
// Fall back to the CSS bars and stop trying.
player._vizState = 'cors-blocked';
v.canvas.hidden = true;
if (v.bars) { v.bars.hidden = false; }
v.raf = null;
return;
}
}
if (v.hasData) {
// First frame with data → swap from CSS bars to canvas.
if (v.bars && !v.bars.hidden) {
v.bars.hidden = true;
v.canvas.hidden = false;
}
v.c2d.clearRect(0, 0, v.canvas.width, v.canvas.height);
v.c2d.fillStyle = color;
var bw = v.canvas.width / v.data.length;
for (var i = 0; i < v.data.length; i++) {
var h = (v.data[i] / 255) * v.canvas.height;
v.c2d.fillRect(i * bw, v.canvas.height - h, Math.max(1, bw - 1), h);
}
}
v.raf = requestAnimationFrame(draw);
}
v.raf = requestAnimationFrame(draw);
}
function stopVizLoop(player) {
if (player._viz && player._viz.raf) {
cancelAnimationFrame(player._viz.raf);
player._viz.raf = null;
}
}
/** Mute toggle. Remembers the volume at mute-time so unmute restores it. */ /** Mute toggle. Remembers the volume at mute-time so unmute restores it. */
function bindMute(player, audio, volumeIn, volPctEl) { function bindMute(player, audio, volumeIn, volPctEl) {
var muteBtn = player.querySelector('[data-radio-mute]'); var muteBtn = player.querySelector('[data-radio-mute]');
@@ -211,15 +348,22 @@
audio.addEventListener('play', function () { audio.addEventListener('play', function () {
setPlayIcon(playBtn, true); setPlayIcon(playBtn, true);
player.classList.add('is-playing'); // CSS dancing-bars animation
tryVisualizer(player, audio); // idempotent — only initialises once
startVizLoop(player, audio); // no-op unless viz state is 'ok'
startTrackPolling(player, findStation(stationSel.value)); startTrackPolling(player, findStation(stationSel.value));
}); });
audio.addEventListener('pause', function () { audio.addEventListener('pause', function () {
setPlayIcon(playBtn, false); setPlayIcon(playBtn, false);
player.classList.remove('is-playing');
stopVizLoop(player);
stopTrackPolling(player); stopTrackPolling(player);
}); });
audio.addEventListener('error', function () { audio.addEventListener('error', function () {
showError(player, cfg.strings.error || 'Stream error.'); showError(player, cfg.strings.error || 'Stream error.');
setPlayIcon(playBtn, false); setPlayIcon(playBtn, false);
player.classList.remove('is-playing');
stopVizLoop(player);
stopTrackPolling(player); stopTrackPolling(player);
}); });
audio.addEventListener('canplay', function () { showError(player, null); }); audio.addEventListener('canplay', function () { showError(player, null); });
@@ -268,6 +412,44 @@
} }
bindMute(player, audio, volumeIn, volPctEl); bindMute(player, audio, volumeIn, volPctEl);
bindPopOut(player);
// v0.6.0: popout auto-resume — when opened with ?play=1, immediately
// pick up where the main tab left off. Same-origin user-gesture popups
// are exempt from autoplay blocking on every modern browser.
if (cfg.autoPlay) {
setTimeout(function () {
if (audio.paused) { audio.play().catch(function () { /* autoplay denied — user just clicks play */ }); }
}, 200);
}
}
/** v0.6.0: Pop-out window button. Opens a 380×560 standalone window
* with just the player chrome (no WP admin), via admin-post.php?
* action=radio_popout&play=1. The popup persists across main-tab
* navigation so background music doesn't cut when you move around
* the WP admin. Pauses every other audio surface in this tab so
* there's only one stream playing at a time. */
function bindPopOut(player) {
var btn = player.querySelector('[data-radio-popout]');
if (!btn) { return; }
if (!cfg.popoutUrl) { btn.style.display = 'none'; return; } // already in popout
btn.addEventListener('click', function () {
var w = window.open(
cfg.popoutUrl + '&play=1',
'radio_popout',
'width=380,height=560,resizable=yes,scrollbars=no,toolbar=no,location=no,menubar=no,status=no'
);
if (!w) {
window.alert('Pop-out blocked by the browser. Allow popups for this site, then try again.');
return;
}
w.focus();
// Pause every audio surface in this tab — the popup is the new player.
document.querySelectorAll('[data-radio-audio]').forEach(function (a) {
if (!a.paused) { a.pause(); }
});
});
} }
/** Keep all .radio-player surfaces on the same station. */ /** Keep all .radio-player surfaces on the same station. */
@@ -316,10 +498,79 @@
}); });
} }
/** v0.5.0: wire the History admin page — filter, favourite-toggle,
* clear-history. No-op on pages without these elements. */
function bindHistoryPage() {
var searchIn = document.getElementById('radio-history-search');
var stationSel = document.getElementById('radio-history-station');
var rows = document.querySelectorAll('.radio-history-row');
var clearBtn = document.getElementById('radio-history-clear');
function applyFilter() {
if (!rows.length) { return; }
var q = (searchIn ? searchIn.value : '').toLowerCase().trim();
var s = stationSel ? stationSel.value : '';
rows.forEach(function (row) {
var matchQ = !q || (row.dataset.search || '').indexOf(q) !== -1;
var matchS = !s || row.dataset.stationId === s;
row.classList.toggle('is-filtered', !(matchQ && matchS));
});
}
if (searchIn) { searchIn.addEventListener('input', applyFilter); }
if (stationSel) { stationSel.addEventListener('change', applyFilter); }
// Favourite-toggle buttons (per row)
document.querySelectorAll('.radio-fav-btn').forEach(function (btn) {
btn.addEventListener('click', function () {
var fd = new FormData();
fd.append('action', 'radio_toggle_favourite');
fd.append('nonce', btn.dataset.nonce || '');
fd.append('artist', btn.dataset.artist || '');
fd.append('title', btn.dataset.title || '');
fd.append('station', btn.dataset.station || '');
fd.append('station_id', btn.dataset.stationId || '');
btn.disabled = true;
fetch(cfg.ajaxUrl, { method: 'POST', credentials: 'same-origin', body: fd })
.then(function (r) { return r.json(); })
.then(function (res) {
btn.disabled = false;
if (!res || !res.success) { return; }
var isFav = !!(res.data && res.data.favourite);
btn.classList.toggle('is-fav', isFav);
btn.textContent = isFav ? '★' : '☆';
btn.setAttribute('aria-label', isFav
? (cfg.strings.removeFav || 'Remove from favourites')
: (cfg.strings.addFav || 'Add to favourites'));
})
.catch(function () { btn.disabled = false; });
});
});
// Clear-history button (history tab only)
if (clearBtn) {
clearBtn.addEventListener('click', function () {
var msg = cfg.strings.clearConfirm || 'Clear all track history? (Favourites are kept.)';
if (!window.confirm(msg)) { return; }
var fd = new FormData();
fd.append('action', 'radio_clear_history');
fd.append('nonce', clearBtn.dataset.nonce || '');
clearBtn.disabled = true;
fetch(cfg.ajaxUrl, { method: 'POST', credentials: 'same-origin', body: fd })
.then(function (r) { return r.json(); })
.then(function (res) {
if (res && res.success) { window.location.reload(); }
else { clearBtn.disabled = false; }
})
.catch(function () { clearBtn.disabled = false; });
});
}
}
function init() { function init() {
var players = document.querySelectorAll('.radio-player'); var players = document.querySelectorAll('.radio-player');
for (var i = 0; i < players.length; i++) { bindPlayer(players[i]); } for (var i = 0; i < players.length; i++) { bindPlayer(players[i]); }
bindSettingsSlider(); bindSettingsSlider();
bindHistoryPage();
} }
if (document.readyState === 'loading') { if (document.readyState === 'loading') {
+57 -36
View File
@@ -2,79 +2,60 @@
/** /**
* Radio — About page (WP Admin → Radio → About). * Radio — About page (WP Admin → Radio → About).
* *
* Plain-language explanation of what the plugin does + version * Top row: three short cards (What / Who / Credits) — equal-height,
* history + link to the CHANGELOG.md on Gitea. Pattern mirrors * balanced layout. Below: a full-width Version history card with the
* a-buddy/inc/about.php. * latest release shown in full and earlier releases as a one-line
* summary list, capped by a link to the full CHANGELOG on Gitea.
*
* Pattern mirrors a-buddy/inc/about.php.
*/ */
if ( ! defined( 'ABSPATH' ) ) { exit; } if ( ! defined( 'ABSPATH' ) ) { exit; }
function radio_render_about_page() { function radio_render_about_page() {
if ( ! current_user_can( 'read' ) ) { if ( ! current_user_can( 'read' ) ) {
wp_die( esc_html__( 'You do not have permission to view this page.', 'radio' ) ); wp_die( esc_html__( 'You do not have permission to view this page.', 'a-radio' ) );
} }
$count = count( radio_get_stations_flat() ); $count = count( radio_get_stations_flat() );
?> ?>
<div class="wrap radio-about-wrap"> <div class="wrap radio-about-wrap">
<h1><?php esc_html_e( 'About Radio', 'radio' ); ?></h1> <h1><?php esc_html_e( 'About Radio', 'a-radio' ); ?></h1>
<!-- ── Top row: three short cards (What / Who / Credits) ── -->
<div class="radio-about-grid"> <div class="radio-about-grid">
<div class="radio-about-card"> <div class="radio-about-card">
<h2><?php esc_html_e( 'What Radio does', 'radio' ); ?></h2> <h2><?php esc_html_e( 'What Radio does', 'a-radio' ); ?></h2>
<p> <p>
<?php <?php
printf( printf(
/* translators: %d = station count */ /* 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' ), 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.', 'a-radio' ),
(int) $count (int) $count
); );
?> ?>
</p> </p>
<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' ); ?> <?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.', 'a-radio' ); ?>
</p> </p>
</div> </div>
<div class="radio-about-card"> <div class="radio-about-card">
<h2><?php esc_html_e( 'Who Radio is for', 'radio' ); ?></h2> <h2><?php esc_html_e( 'Who Radio is for', 'a-radio' ); ?></h2>
<p> <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' ); ?> <?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).', 'a-radio' ); ?>
</p> </p>
</div> </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.0</span> &mdash; 29 May 2026 <span class="latest">latest</span><br>
<?php esc_html_e( 'Dark theme actually wired through (auto / light / dark — auto follows OS prefers-color-scheme). 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"> <div class="radio-about-card">
<h2><?php esc_html_e( 'Credits + thanks', 'radio' ); ?></h2> <h2><?php esc_html_e( 'Credits + thanks', 'a-radio' ); ?></h2>
<p> <p>
<?php <?php
printf( printf(
wp_kses( wp_kses(
/* translators: %s = link to somafm.com */ /* 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' ), __( '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.', 'a-radio' ),
array( 'a' => array( 'href' => true, 'target' => true, 'rel' => true ) ) array( 'a' => array( 'href' => true, 'target' => true, 'rel' => true ) )
), ),
'<a href="https://somafm.com/support/" target="_blank" rel="noopener">SomaFM</a>' '<a href="https://somafm.com/support/" target="_blank" rel="noopener">SomaFM</a>'
@@ -82,11 +63,51 @@ function radio_render_about_page() {
?> ?>
</p> </p>
<p> <p>
<?php esc_html_e( 'Plugin author: David Keane. Part of the RangerHQ plugin family. GPL v2 or later. Source on Gitea.', 'radio' ); ?> <?php esc_html_e( 'Plugin author: David Keane. Part of the RangerHQ plugin family. GPL v2 or later. Source on Gitea.', 'a-radio' ); ?>
</p>
<?php if ( defined( 'RADIO_SUPPORT_URL' ) && RADIO_SUPPORT_URL ) : ?>
<a class="radio-support-link" href="<?php echo esc_url( RADIO_SUPPORT_URL ); ?>" target="_blank" rel="noopener">
<?php esc_html_e( 'Like Radio? If You fancy to buy me a coffee →', 'a-radio' ); ?>
</a>
<?php endif; ?>
</div>
</div><!-- /.radio-about-grid -->
<!-- ── Version history: latest in full, earlier as one-liners ── -->
<div class="radio-about-versions">
<h2><?php esc_html_e( 'Version history', 'a-radio' ); ?></h2>
<div class="radio-about-versions__latest">
<span class="ver">v0.7.1</span> &mdash; 30 May 2026 <span class="latest"><?php esc_html_e( 'latest', 'a-radio' ); ?></span>
<p>
<?php esc_html_e( 'Plugin Check follow-up. The v0.7.0 release dropped PCP issues from 169 to 4 — this release closes the only real one of the four: "Tested up to" bumped from 6.7 to 7.0 in readme.txt. Stray .DS_Store files re-deleted (macOS Finder regenerated them between PCP runs; they will not be in the submission zip). No user-visible changes.', 'a-radio' ); ?>
</p> </p>
</div> </div>
<h3><?php esc_html_e( 'Earlier releases', 'a-radio' ); ?></h3>
<ul class="radio-about-versions__earlier">
<li><span class="ver">v0.7.0</span> <span class="ver-date">30 May 2026</span> &mdash; <?php esc_html_e( 'WordPress.org submission prep — full Plugin Check clean (169 → 4 issues, branding, textdomain, security, popup refactor, readme.txt)', 'a-radio' ); ?></li>
<li><span class="ver">v0.6.3</span> <span class="ver-date">30 May 2026</span> &mdash; <?php esc_html_e( 'Discreet buy-me-a-coffee support link (Updates panel + Credits card)', 'a-radio' ); ?></li>
<li><span class="ver">v0.6.2</span> <span class="ver-date">30 May 2026</span> &mdash; <?php esc_html_e( 'Current version badge on the Settings page', 'a-radio' ); ?></li>
<li><span class="ver">v0.6.1</span> <span class="ver-date">30 May 2026</span> &mdash; <?php esc_html_e( 'About page restructure — balanced 3-card top row + compact version history', 'a-radio' ); ?></li>
<li><span class="ver">v0.6.0</span> <span class="ver-date">30 May 2026</span> &mdash; <?php esc_html_e( 'Pop-out mini-player — continuous background play across admin navigation', 'a-radio' ); ?></li>
<li><span class="ver">v0.5.0</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Track history + favourites (Spotify / YouTube / Apple Music / Bandcamp search links)', 'a-radio' ); ?></li>
<li><span class="ver">v0.4.0</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Now-playing indicator — dancing bars + Web Audio frequency visualizer', 'a-radio' ); ?></li>
<li><span class="ver">v0.3.2</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Play-button glyph baseline fix (dashicon → Unicode ▶ / ‖)', 'a-radio' ); ?></li>
<li><span class="ver">v0.3.1</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'My Radio layout polish + dropped dark-auto', 'a-radio' ); ?></li>
<li><span class="ver">v0.3.0</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Dark theme + mute + OS media keys + SomaFM current-track display', 'a-radio' ); ?></li>
<li><span class="ver">v0.2.0</span> <span class="ver-date">26 May 2026</span> &mdash; <?php esc_html_e( 'UI rebuilt to WordPress admin standards', 'a-radio' ); ?></li>
<li><span class="ver">v0.1.0</span> <span class="ver-date">26 May 2026</span> &mdash; <?php esc_html_e( 'First release — 44 SomaFM stations, dashboard widget + dedicated admin page, per-user state, self-hosted Gitea updater', 'a-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 →', 'a-radio' ); ?>
</a>
</div> </div>
</div> </div>
<?php <?php
} }
+20 -12
View File
@@ -12,7 +12,7 @@ if ( ! defined( 'ABSPATH' ) ) { exit; }
function radio_render_main_page() { function radio_render_main_page() {
if ( ! current_user_can( 'read' ) ) { if ( ! current_user_can( 'read' ) ) {
wp_die( esc_html__( 'You do not have permission to view this page.', 'radio' ) ); wp_die( esc_html__( 'You do not have permission to view this page.', 'a-radio' ) );
} }
$state = radio_get_state(); $state = radio_get_state();
@@ -21,13 +21,13 @@ function radio_render_main_page() {
$count = count( radio_get_stations_flat() ); $count = count( radio_get_stations_flat() );
?> ?>
<div class="wrap radio-wrap"> <div class="wrap radio-wrap">
<h1><?php esc_html_e( 'Radio', 'radio' ); ?></h1> <h1><?php esc_html_e( 'Radio', 'a-radio' ); ?></h1>
<p class="radio-intro"> <p class="radio-intro">
<?php <?php
printf( printf(
/* translators: %d = number of stations */ /* 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' ), esc_html__( 'A tab of background music for your WordPress admin. %d hand-curated SomaFM stations across 10 genres — free, no ads, no tracking.', 'a-radio' ),
(int) $count (int) $count
); );
?> ?>
@@ -35,13 +35,17 @@ function radio_render_main_page() {
<div class="postbox"> <div class="postbox">
<div class="postbox-header"> <div class="postbox-header">
<h2 class="hndle"><?php esc_html_e( 'Player', 'radio' ); ?></h2> <h2 class="hndle"><?php esc_html_e( 'Player', 'a-radio' ); ?></h2>
</div> </div>
<div class="inside"> <div class="inside">
<div class="radio-player" data-radio-surface="main"> <div class="radio-player" data-radio-surface="main">
<div class="radio-player__now"> <div class="radio-player__now">
<span class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></span> <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', 'a-radio' ); ?></span>
<span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></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> <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__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
@@ -50,21 +54,25 @@ function radio_render_main_page() {
<div class="radio-player__controls"> <div class="radio-player__controls">
<button type="button" class="button button-primary radio-player__play" data-radio-play> <button type="button" class="button button-primary radio-player__play" data-radio-play>
<span class="dashicons dashicons-controls-play" aria-hidden="true"></span> <span class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">&#9654;</span>
<span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span> <span data-radio-play-label><?php esc_html_e( 'Play', 'a-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', 'a-radio' ); ?>">
<span aria-hidden="true">↗</span> <?php esc_html_e( 'Pop out', 'a-radio' ); ?>
</button> </button>
<div class="radio-player__volume"> <div class="radio-player__volume">
<button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'radio' ); ?>"> <button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'a-radio' ); ?>">
<span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span> <span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
</button> </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' ); ?>"> <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', 'a-radio' ); ?>">
<span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span> <span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
</div> </div>
</div> </div>
<div class="radio-player__station-select"> <div class="radio-player__station-select">
<label for="radio-station-main"><?php esc_html_e( 'Station', 'radio' ); ?></label> <label for="radio-station-main"><?php esc_html_e( 'Station', 'a-radio' ); ?></label>
<select id="radio-station-main" data-radio-station> <select id="radio-station-main" data-radio-station>
<?php foreach ( $stations as $genre => $entries ) : <?php foreach ( $stations as $genre => $entries ) :
if ( empty( $entries ) ) { continue; } if ( empty( $entries ) ) { continue; }
@@ -82,7 +90,7 @@ function radio_render_main_page() {
<div class="radio-player__error" data-radio-error hidden></div> <div class="radio-player__error" data-radio-error hidden></div>
<audio data-radio-audio preload="none"></audio> <audio data-radio-audio preload="none" crossorigin="anonymous"></audio>
</div> </div>
</div> </div>
</div> </div>
@@ -92,7 +100,7 @@ function radio_render_main_page() {
printf( printf(
wp_kses( wp_kses(
/* translators: %s = link to somafm.com */ /* 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' ), __( 'Stations and streams provided by %s — an independent, listener-supported, commercial-free internet radio network. Please consider supporting them.', 'a-radio' ),
array( 'a' => array( 'href' => true, 'target' => true, 'rel' => true ) ) array( 'a' => array( 'href' => true, 'target' => true, 'rel' => true ) )
), ),
'<a href="https://somafm.com/" target="_blank" rel="noopener">SomaFM</a>' '<a href="https://somafm.com/" target="_blank" rel="noopener">SomaFM</a>'
+17 -9
View File
@@ -21,7 +21,7 @@ function radio_register_dashboard_widget() {
wp_add_dashboard_widget( wp_add_dashboard_widget(
'radio_dashboard_widget', 'radio_dashboard_widget',
__( 'Radio', 'radio' ), __( 'Radio', 'a-radio' ),
'radio_render_dashboard_widget' 'radio_render_dashboard_widget'
); );
} }
@@ -34,7 +34,11 @@ function radio_render_dashboard_widget() {
<div class="radio-player" data-radio-surface="widget"> <div class="radio-player" data-radio-surface="widget">
<div class="radio-player__now"> <div class="radio-player__now">
<span class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></span> <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', 'a-radio' ); ?></span>
<span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></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> <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__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
@@ -43,21 +47,25 @@ function radio_render_dashboard_widget() {
<div class="radio-player__controls"> <div class="radio-player__controls">
<button type="button" class="button button-primary radio-player__play" data-radio-play> <button type="button" class="button button-primary radio-player__play" data-radio-play>
<span class="dashicons dashicons-controls-play" aria-hidden="true"></span> <span class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">&#9654;</span>
<span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span> <span data-radio-play-label><?php esc_html_e( 'Play', 'a-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', 'a-radio' ); ?>">
<span aria-hidden="true">↗</span> <?php esc_html_e( 'Pop out', 'a-radio' ); ?>
</button> </button>
<div class="radio-player__volume"> <div class="radio-player__volume">
<button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'radio' ); ?>"> <button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'a-radio' ); ?>">
<span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span> <span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
</button> </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' ); ?>"> <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', 'a-radio' ); ?>">
<span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span> <span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
</div> </div>
</div> </div>
<div class="radio-player__station-select"> <div class="radio-player__station-select">
<label for="radio-station-widget"><?php esc_html_e( 'Station', 'radio' ); ?></label> <label for="radio-station-widget"><?php esc_html_e( 'Station', 'a-radio' ); ?></label>
<select id="radio-station-widget" data-radio-station> <select id="radio-station-widget" data-radio-station>
<?php foreach ( $stations as $genre => $entries ) : <?php foreach ( $stations as $genre => $entries ) :
if ( empty( $entries ) ) { continue; } if ( empty( $entries ) ) { continue; }
@@ -75,14 +83,14 @@ function radio_render_dashboard_widget() {
<div class="radio-player__error" data-radio-error hidden></div> <div class="radio-player__error" data-radio-error hidden></div>
<audio data-radio-audio preload="none"></audio> <audio data-radio-audio preload="none" crossorigin="anonymous"></audio>
<p class="radio-player__credit"> <p class="radio-player__credit">
<?php <?php
printf( printf(
wp_kses( wp_kses(
/* translators: %s = link to somafm.com */ /* translators: %s = link to somafm.com */
__( 'Powered by %s', 'radio' ), __( 'Powered by %s', 'a-radio' ),
array( 'a' => array( 'href' => true, 'target' => true, 'rel' => true ) ) array( 'a' => array( 'href' => true, 'target' => true, 'rel' => true ) )
), ),
'<a href="https://somafm.com/" target="_blank" rel="noopener">SomaFM</a>' '<a href="https://somafm.com/" target="_blank" rel="noopener">SomaFM</a>'
+258
View File
@@ -0,0 +1,258 @@
<?php
/**
* Radio — track history + favourites (v0.5.0).
*
* Storage: two per-user `wp_usermeta` keys, separate from `radio_state`
* so frequent track logging doesn't rewrite the whole state blob.
* radio_history — capped FIFO list of recently played tracks
* radio_favourites — uncapped list of user-starred tracks
*
* Entry shape:
* array(
* 'artist' => string,
* 'title' => string,
* 'station' => string, // display name e.g. "DEF CON Radio"
* 'station_id' => string, // e.g. "soma-defcon"
* 'at' => int, // unix timestamp
* )
*/
if ( ! defined( 'ABSPATH' ) ) { exit; }
const RADIO_HISTORY_KEY = 'radio_history';
const RADIO_FAVOURITES_KEY = 'radio_favourites';
const RADIO_HISTORY_CAP = 500;
/** Current user's track history (oldest first). */
function radio_get_history( $user_id = 0 ) {
$user_id = $user_id ? (int) $user_id : get_current_user_id();
if ( ! $user_id ) { return array(); }
$h = get_user_meta( $user_id, RADIO_HISTORY_KEY, true );
return is_array( $h ) ? $h : array();
}
/** Current user's favourited tracks (oldest first). */
function radio_get_favourites( $user_id = 0 ) {
$user_id = $user_id ? (int) $user_id : get_current_user_id();
if ( ! $user_id ) { return array(); }
$f = get_user_meta( $user_id, RADIO_FAVOURITES_KEY, true );
return is_array( $f ) ? $f : array();
}
/** Normalise raw POSTed track data; returns null on junk input. */
function radio_sanitize_entry( $entry ) {
if ( ! is_array( $entry ) ) { return null; }
$artist = isset( $entry['artist'] ) ? sanitize_text_field( wp_unslash( $entry['artist'] ) ) : '';
$title = isset( $entry['title'] ) ? sanitize_text_field( wp_unslash( $entry['title'] ) ) : '';
$station = isset( $entry['station'] ) ? sanitize_text_field( wp_unslash( $entry['station'] ) ) : '';
$station_id = isset( $entry['station_id'] ) ? sanitize_key( wp_unslash( $entry['station_id'] ) ) : '';
if ( ! $artist || ! $title ) { return null; }
if ( strtolower( $artist ) === '(unknown)' ) { return null; } // SomaFM promo / dead-air placeholder
return array(
'artist' => mb_substr( $artist, 0, 200 ),
'title' => mb_substr( $title, 0, 200 ),
'station' => mb_substr( $station, 0, 100 ),
'station_id' => $station_id,
'at' => time(),
);
}
/** Dedup signature — artist|title|station_id, lowercased + trimmed. */
function radio_entry_signature( $entry ) {
$a = isset( $entry['artist'] ) ? $entry['artist'] : '';
$t = isset( $entry['title'] ) ? $entry['title'] : '';
$s = isset( $entry['station_id'] ) ? $entry['station_id'] : '';
return strtolower( trim( $a . '|' . $t . '|' . $s ) );
}
/** Append a track to the user's history, deduped against the last entry
* and capped at RADIO_HISTORY_CAP. Returns true if appended. */
function radio_log_track( $entry, $user_id = 0 ) {
$user_id = $user_id ? (int) $user_id : get_current_user_id();
if ( ! $user_id ) { return false; }
$clean = radio_sanitize_entry( $entry );
if ( ! $clean ) { return false; }
$history = radio_get_history( $user_id );
if ( ! empty( $history ) ) {
$last_sig = radio_entry_signature( $history[ count( $history ) - 1 ] );
if ( radio_entry_signature( $clean ) === $last_sig ) { return false; }
}
$history[] = $clean;
if ( count( $history ) > RADIO_HISTORY_CAP ) {
$history = array_slice( $history, -RADIO_HISTORY_CAP );
}
update_user_meta( $user_id, RADIO_HISTORY_KEY, $history );
return true;
}
/** Toggle whether an entry is favourited. Returns the new state
* (true = now favourited, false = now unfavourited). */
function radio_toggle_favourite( $entry, $user_id = 0 ) {
$user_id = $user_id ? (int) $user_id : get_current_user_id();
if ( ! $user_id ) { return false; }
$clean = radio_sanitize_entry( $entry );
if ( ! $clean ) { return false; }
$sig = radio_entry_signature( $clean );
$favs = radio_get_favourites( $user_id );
$found = -1;
foreach ( $favs as $i => $f ) {
if ( radio_entry_signature( $f ) === $sig ) { $found = $i; break; }
}
if ( $found >= 0 ) {
array_splice( $favs, $found, 1 );
update_user_meta( $user_id, RADIO_FAVOURITES_KEY, $favs );
return false;
}
$favs[] = $clean;
update_user_meta( $user_id, RADIO_FAVOURITES_KEY, $favs );
return true;
}
/** Clear the user's history (favourites preserved). */
function radio_clear_history_all( $user_id = 0 ) {
$user_id = $user_id ? (int) $user_id : get_current_user_id();
if ( ! $user_id ) { return false; }
delete_user_meta( $user_id, RADIO_HISTORY_KEY );
return true;
}
/** URL-build helpers for the four search providers. */
function radio_search_urls( $artist, $title ) {
$enc = rawurlencode( trim( $artist . ' ' . $title ) );
return array(
'spotify' => 'https://open.spotify.com/search/' . $enc,
'youtube' => 'https://www.youtube.com/results?search_query=' . $enc,
'apple' => 'https://music.apple.com/search?term=' . $enc,
'bandcamp' => 'https://bandcamp.com/search?q=' . $enc,
);
}
/** Render the History admin page (tabs: History / Favourites). */
function radio_render_history_page() {
if ( ! current_user_can( 'read' ) ) {
wp_die( esc_html__( 'You do not have permission to view this page.', 'a-radio' ) );
}
$tab = isset( $_GET['tab'] ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : 'history'; // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- tab-switch only, no state change
if ( ! in_array( $tab, array( 'history', 'favourites' ), true ) ) { $tab = 'history'; }
$all_history = radio_get_history();
$all_favourites = radio_get_favourites();
$entries = ( $tab === 'favourites' ) ? $all_favourites : $all_history;
$entries = array_reverse( $entries ); // newest first
// Set of favourite signatures for fast lookup in the row render.
$fav_sigs = array();
foreach ( $all_favourites as $f ) { $fav_sigs[ radio_entry_signature( $f ) ] = true; }
// Stations present in the current tab → filter dropdown options.
$stations_in_list = array();
foreach ( $entries as $e ) {
if ( ! empty( $e['station_id'] ) && ! isset( $stations_in_list[ $e['station_id'] ] ) ) {
$stations_in_list[ $e['station_id'] ] = $e['station'];
}
}
asort( $stations_in_list );
$base_url = admin_url( 'admin.php?page=radio-history' );
$hist_url = $base_url . '&tab=history';
$fav_url = $base_url . '&tab=favourites';
$nonce = wp_create_nonce( 'radio_history' );
?>
<div class="wrap radio-history-wrap">
<h1><?php esc_html_e( 'Radio — Track history', 'a-radio' ); ?></h1>
<h2 class="nav-tab-wrapper">
<a href="<?php echo esc_url( $hist_url ); ?>" class="nav-tab <?php echo $tab === 'history' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e( 'History', 'a-radio' ); ?>
<span class="radio-tab-count">(<?php echo (int) count( $all_history ); ?>)</span>
</a>
<a href="<?php echo esc_url( $fav_url ); ?>" class="nav-tab <?php echo $tab === 'favourites' ? 'nav-tab-active' : ''; ?>">
★ <?php esc_html_e( 'Favourites', 'a-radio' ); ?>
<span class="radio-tab-count">(<?php echo (int) count( $all_favourites ); ?>)</span>
</a>
</h2>
<?php if ( empty( $entries ) ) : ?>
<p class="radio-history-empty">
<?php if ( $tab === 'favourites' ) : ?>
<?php esc_html_e( 'No favourites yet — star a track on the History tab to save it here.', 'a-radio' ); ?>
<?php else : ?>
<?php esc_html_e( 'No tracks logged yet. Play some music in the Radio player — tracks will appear here as they play.', 'a-radio' ); ?>
<?php endif; ?>
</p>
<?php else : ?>
<div class="radio-history-toolbar">
<input type="search" id="radio-history-search" placeholder="<?php esc_attr_e( 'Filter by artist or title…', 'a-radio' ); ?>" />
<select id="radio-history-station">
<option value=""><?php esc_html_e( 'All stations', 'a-radio' ); ?></option>
<?php foreach ( $stations_in_list as $sid => $sname ) : ?>
<option value="<?php echo esc_attr( $sid ); ?>"><?php echo esc_html( $sname ); ?></option>
<?php endforeach; ?>
</select>
<?php if ( $tab === 'history' ) : ?>
<button type="button" id="radio-history-clear" class="button radio-history-clear" data-nonce="<?php echo esc_attr( $nonce ); ?>">
🗑 <?php esc_html_e( 'Clear history', 'a-radio' ); ?>
</button>
<?php endif; ?>
</div>
<table class="widefat radio-history-table">
<thead>
<tr>
<th class="when"><?php esc_html_e( 'When', 'a-radio' ); ?></th>
<th class="station"><?php esc_html_e( 'Station', 'a-radio' ); ?></th>
<th class="track"><?php esc_html_e( 'Artist — Title', 'a-radio' ); ?></th>
<th class="search"><?php esc_html_e( 'Search', 'a-radio' ); ?></th>
<th class="fav"><span class="screen-reader-text"><?php esc_html_e( 'Favourite', 'a-radio' ); ?></span>★</th>
</tr>
</thead>
<tbody>
<?php foreach ( $entries as $e ) :
$sig = radio_entry_signature( $e );
$is_fav = isset( $fav_sigs[ $sig ] );
$search = radio_search_urls( $e['artist'], $e['title'] );
$ago = human_time_diff( (int) $e['at'], time() );
?>
<tr class="radio-history-row" data-station-id="<?php echo esc_attr( $e['station_id'] ); ?>" data-search="<?php echo esc_attr( strtolower( $e['artist'] . ' ' . $e['title'] ) ); ?>">
<td class="when" title="<?php echo esc_attr( wp_date( 'j M Y, H:i', (int) $e['at'] ) ); ?>">
<?php
/* translators: %s = human-readable time difference, e.g. "2 minutes" */
printf( esc_html__( '%s ago', 'a-radio' ), esc_html( $ago ) );
?>
</td>
<td class="station"><?php echo esc_html( $e['station'] ); ?></td>
<td class="track">
<strong><?php echo esc_html( $e['artist'] ); ?></strong> &mdash; <?php echo esc_html( $e['title'] ); ?>
</td>
<td class="search">
<a href="<?php echo esc_url( $search['spotify'] ); ?>" target="_blank" rel="noopener" class="radio-search-link radio-search-link--spotify">Spotify</a>
<a href="<?php echo esc_url( $search['youtube'] ); ?>" target="_blank" rel="noopener" class="radio-search-link radio-search-link--youtube">YouTube</a>
<a href="<?php echo esc_url( $search['apple'] ); ?>" target="_blank" rel="noopener" class="radio-search-link radio-search-link--apple">Apple</a>
<a href="<?php echo esc_url( $search['bandcamp'] ); ?>" target="_blank" rel="noopener" class="radio-search-link radio-search-link--bandcamp">Bandcamp</a>
</td>
<td class="fav">
<button type="button"
class="radio-fav-btn <?php echo $is_fav ? 'is-fav' : ''; ?>"
data-artist="<?php echo esc_attr( $e['artist'] ); ?>"
data-title="<?php echo esc_attr( $e['title'] ); ?>"
data-station="<?php echo esc_attr( $e['station'] ); ?>"
data-station-id="<?php echo esc_attr( $e['station_id'] ); ?>"
data-nonce="<?php echo esc_attr( $nonce ); ?>"
aria-label="<?php echo $is_fav ? esc_attr__( 'Remove from favourites', 'a-radio' ) : esc_attr__( 'Add to favourites', 'a-radio' ); ?>">
<?php echo $is_fav ? '★' : '☆'; ?>
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php endif; ?>
</div>
<?php
}
+17 -14
View File
@@ -11,7 +11,7 @@ if ( ! defined( 'ABSPATH' ) ) { exit; }
function radio_render_settings_page() { function radio_render_settings_page() {
if ( ! current_user_can( 'read' ) ) { if ( ! current_user_can( 'read' ) ) {
wp_die( esc_html__( 'You do not have permission to view this page.', 'radio' ) ); wp_die( esc_html__( 'You do not have permission to view this page.', 'a-radio' ) );
} }
// Handle form submission. // Handle form submission.
@@ -39,7 +39,7 @@ function radio_render_settings_page() {
$state['hide_dashboard_widget'] = $hide_widget ? 1 : 0; $state['hide_dashboard_widget'] = $hide_widget ? 1 : 0;
update_user_meta( $user_id, RADIO_META_KEY, $state ); update_user_meta( $user_id, RADIO_META_KEY, $state );
echo '<div class="notice notice-success is-dismissible"><p>' . esc_html__( 'Settings saved.', 'radio' ) . '</p></div>'; echo '<div class="notice notice-success is-dismissible"><p>' . esc_html__( 'Settings saved.', 'a-radio' ) . '</p></div>';
} }
$state = radio_get_state(); $state = radio_get_state();
@@ -47,7 +47,10 @@ function radio_render_settings_page() {
$hide_widget = ! empty( $state['hide_dashboard_widget'] ); $hide_widget = ! empty( $state['hide_dashboard_widget'] );
?> ?>
<div class="wrap radio-settings-wrap"> <div class="wrap radio-settings-wrap">
<h1><?php esc_html_e( 'Radio — Settings', 'radio' ); ?></h1> <h1>
<?php esc_html_e( 'Radio — Settings', 'a-radio' ); ?>
<span class="radio-version-badge">v<?php echo esc_html( RADIO_VERSION ); ?></span>
</h1>
<form method="post" action=""> <form method="post" action="">
<?php wp_nonce_field( 'radio_save_settings', 'radio_settings_nonce' ); ?> <?php wp_nonce_field( 'radio_save_settings', 'radio_settings_nonce' ); ?>
@@ -55,7 +58,7 @@ function radio_render_settings_page() {
<table class="form-table" role="presentation"> <table class="form-table" role="presentation">
<tr> <tr>
<th scope="row"> <th scope="row">
<label for="default_station"><?php esc_html_e( 'Default station', 'radio' ); ?></label> <label for="default_station"><?php esc_html_e( 'Default station', 'a-radio' ); ?></label>
</th> </th>
<td> <td>
<select id="default_station" name="default_station"> <select id="default_station" name="default_station">
@@ -72,14 +75,14 @@ function radio_render_settings_page() {
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
<p class="description"> <p class="description">
<?php esc_html_e( 'The station that loads when you open Radio in a fresh tab.', 'radio' ); ?> <?php esc_html_e( 'The station that loads when you open Radio in a fresh tab.', 'a-radio' ); ?>
</p> </p>
</td> </td>
</tr> </tr>
<tr> <tr>
<th scope="row"> <th scope="row">
<label for="default_volume"><?php esc_html_e( 'Default volume', 'radio' ); ?></label> <label for="default_volume"><?php esc_html_e( 'Default volume', 'a-radio' ); ?></label>
</th> </th>
<td> <td>
<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"> <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">
@@ -89,34 +92,34 @@ function radio_render_settings_page() {
<tr> <tr>
<th scope="row"> <th scope="row">
<label for="theme"><?php esc_html_e( 'Theme', 'radio' ); ?></label> <label for="theme"><?php esc_html_e( 'Theme', 'a-radio' ); ?></label>
</th> </th>
<td> <td>
<select id="theme" name="theme"> <select id="theme" name="theme">
<option value="auto" <?php selected( $state['theme'], 'auto' ); ?>><?php esc_html_e( 'Auto (match WP admin colour scheme)', 'radio' ); ?></option> <option value="auto" <?php selected( $state['theme'], 'auto' ); ?>><?php esc_html_e( 'Auto (match WP admin colour scheme)', 'a-radio' ); ?></option>
<option value="light" <?php selected( $state['theme'], 'light' ); ?>><?php esc_html_e( 'Light', 'radio' ); ?></option> <option value="light" <?php selected( $state['theme'], 'light' ); ?>><?php esc_html_e( 'Light', 'a-radio' ); ?></option>
<option value="dark" <?php selected( $state['theme'], 'dark' ); ?>><?php esc_html_e( 'Dark', 'radio' ); ?></option> <option value="dark" <?php selected( $state['theme'], 'dark' ); ?>><?php esc_html_e( 'Dark', 'a-radio' ); ?></option>
</select> </select>
</td> </td>
</tr> </tr>
<tr> <tr>
<th scope="row"> <th scope="row">
<?php esc_html_e( 'Dashboard widget', 'radio' ); ?> <?php esc_html_e( 'Dashboard widget', 'a-radio' ); ?>
</th> </th>
<td> <td>
<label> <label>
<input type="checkbox" name="hide_dashboard_widget" value="1" <?php checked( $hide_widget ); ?>> <input type="checkbox" name="hide_dashboard_widget" value="1" <?php checked( $hide_widget ); ?>>
<?php esc_html_e( 'Hide the Radio widget from the WordPress Dashboard', 'radio' ); ?> <?php esc_html_e( 'Hide the Radio widget from the WordPress Dashboard', 'a-radio' ); ?>
</label> </label>
<p class="description"> <p class="description">
<?php esc_html_e( 'When checked, Radio is only accessible from the dedicated admin page (WP Admin → Radio → My Radio).', 'radio' ); ?> <?php esc_html_e( 'When checked, Radio is only accessible from the dedicated admin page (WP Admin → Radio → My Radio).', 'a-radio' ); ?>
</p> </p>
</td> </td>
</tr> </tr>
</table> </table>
<?php submit_button( __( 'Save Changes', 'radio' ), 'primary', 'radio_settings_submit' ); ?> <?php submit_button( __( 'Save Changes', 'a-radio' ), 'primary', 'radio_settings_submit' ); ?>
</form> </form>
<?php <?php
+23 -13
View File
@@ -112,9 +112,10 @@ function radio_update_status( $force_refresh = false ) {
$latest = radio_fetch_latest_release( $force_refresh ); $latest = radio_fetch_latest_release( $force_refresh );
if ( ! $latest || empty( $latest['version'] ) ) { if ( ! $latest || empty( $latest['version'] ) ) {
$msg = __( 'No releases tagged on the Gitea repo yet.', 'radio' ); $msg = __( 'No releases tagged on the Gitea repo yet.', 'a-radio' );
if ( $latest && ! empty( $latest['error_code'] ) && (int) $latest['error_code'] !== 404 ) { if ( $latest && ! empty( $latest['error_code'] ) && (int) $latest['error_code'] !== 404 ) {
$msg = sprintf( __( 'Could not reach Gitea (HTTP %d). Try again in a few minutes.', 'radio' ), (int) $latest['error_code'] ); /* translators: %d = HTTP status code returned by the Gitea API */
$msg = sprintf( __( 'Could not reach Gitea (HTTP %d). Try again in a few minutes.', 'a-radio' ), (int) $latest['error_code'] );
} }
return array( return array(
'status' => 'unknown', 'status' => 'unknown',
@@ -133,7 +134,8 @@ function radio_update_status( $force_refresh = false ) {
'download_url' => $latest['download_url'], 'download_url' => $latest['download_url'],
'published_at' => $latest['published_at'], 'published_at' => $latest['published_at'],
'body' => $latest['body'], 'body' => $latest['body'],
'message' => sprintf( __( 'A new version (v%1$s) is available — you are on v%2$s.', 'radio' ), $latest['version'], $current ), /* translators: 1: latest version available; 2: version currently installed */
'message' => sprintf( __( 'A new version (v%1$s) is available — you are on v%2$s.', 'a-radio' ), $latest['version'], $current ),
); );
} }
@@ -141,7 +143,8 @@ function radio_update_status( $force_refresh = false ) {
'status' => 'up-to-date', 'status' => 'up-to-date',
'current' => $current, 'current' => $current,
'latest' => $latest['version'], 'latest' => $latest['version'],
'message' => sprintf( __( 'You are up to date (v%s).', 'radio' ), $current ), /* translators: %s = current installed version */
'message' => sprintf( __( 'You are up to date (v%s).', 'a-radio' ), $current ),
'repo_url' => radio_gitea_repo_url(), 'repo_url' => radio_gitea_repo_url(),
); );
} }
@@ -163,38 +166,45 @@ function radio_render_updates_panel() {
$rel_url = radio_gitea_releases_url(); $rel_url = radio_gitea_releases_url();
?> ?>
<div class="radio-updates" style="max-width:720px; margin-top:24px; padding:18px 20px; background:#fff; border:1px solid #ccd0d4; border-radius:4px;"> <div class="radio-updates" style="max-width:720px; margin-top:24px; padding:18px 20px; background:#fff; border:1px solid #ccd0d4; border-radius:4px;">
<h2 style="margin-top:0;"><?php esc_html_e( 'Updates', 'radio' ); ?></h2> <h2 style="margin-top:0;"><?php esc_html_e( 'Updates', 'a-radio' ); ?></h2>
<p style="margin:0 0 12px;"> <p style="margin:0 0 12px;">
<?php esc_html_e( 'Radio is self-hosted on Gitea. Click Check now to ask the repo whether there is a newer release than the one you are running.', 'radio' ); ?> <?php esc_html_e( 'Radio is self-hosted on Gitea. Click Check now to ask the repo whether there is a newer release than the one you are running.', 'a-radio' ); ?>
</p> </p>
<p id="radio-update-status" style="margin:0 0 12px;"> <p id="radio-update-status" style="margin:0 0 12px;">
<strong><?php esc_html_e( 'Status:', 'radio' ); ?></strong> <strong><?php esc_html_e( 'Status:', 'a-radio' ); ?></strong>
<span id="radio-update-status-text"><?php echo esc_html( $status['message'] ); ?></span> <span id="radio-update-status-text"><?php echo esc_html( $status['message'] ); ?></span>
<?php if ( $status['status'] === 'available' && ! empty( $status['download_url'] ) ) : ?> <?php if ( $status['status'] === 'available' && ! empty( $status['download_url'] ) ) : ?>
<br> <br>
<a href="<?php echo esc_url( $status['download_url'] ); ?>" class="button button-primary" style="margin-top:8px;"> <a href="<?php echo esc_url( $status['download_url'] ); ?>" class="button button-primary" style="margin-top:8px;">
<?php <?php
/* translators: %s is the latest version number, e.g. "0.2.0" */ /* translators: %s is the latest version number, e.g. "0.2.0" */
echo esc_html( sprintf( __( 'Download v%s (.zip)', 'radio' ), $status['latest'] ) ); /* translators: %s = latest available version number, e.g. "0.7.0" */
echo esc_html( sprintf( __( 'Download v%s (.zip)', 'a-radio' ), $status['latest'] ) );
?> ?>
</a> </a>
<?php if ( ! empty( $status['html_url'] ) ) : ?> <?php if ( ! empty( $status['html_url'] ) ) : ?>
<a href="<?php echo esc_url( $status['html_url'] ); ?>" target="_blank" rel="noopener" style="margin-left:8px;"><?php esc_html_e( 'View release notes →', 'radio' ); ?></a> <a href="<?php echo esc_url( $status['html_url'] ); ?>" target="_blank" rel="noopener" style="margin-left:8px;"><?php esc_html_e( 'View release notes →', 'a-radio' ); ?></a>
<?php endif; ?> <?php endif; ?>
<?php endif; ?> <?php endif; ?>
</p> </p>
<p style="margin:0 0 4px;"> <p style="margin:0 0 4px;">
<button type="button" id="radio-check-updates-btn" class="button" data-nonce="<?php echo esc_attr( $nonce ); ?>"> <button type="button" id="radio-check-updates-btn" class="button" data-nonce="<?php echo esc_attr( $nonce ); ?>">
↻ <?php esc_html_e( 'Check now', 'radio' ); ?> ↻ <?php esc_html_e( 'Check now', 'a-radio' ); ?>
</button> </button>
<a href="<?php echo esc_url( $repo_url ); ?>" target="_blank" rel="noopener" class="button" style="margin-left:6px;"><?php esc_html_e( 'View on Gitea', 'radio' ); ?></a> <a href="<?php echo esc_url( $repo_url ); ?>" target="_blank" rel="noopener" class="button" style="margin-left:6px;"><?php esc_html_e( 'View on Gitea', 'a-radio' ); ?></a>
<a href="<?php echo esc_url( $rel_url ); ?>" target="_blank" rel="noopener" class="button" style="margin-left:6px;"><?php esc_html_e( 'View all releases', 'radio' ); ?></a> <a href="<?php echo esc_url( $rel_url ); ?>" target="_blank" rel="noopener" class="button" style="margin-left:6px;"><?php esc_html_e( 'View all releases', 'a-radio' ); ?></a>
</p> </p>
<p style="margin:10px 0 0; color:#646970; font-size:12px;"> <p style="margin:10px 0 0; color:#646970; font-size:12px;">
<?php esc_html_e( 'Manual update path: download the .zip, deactivate the plugin in WordPress, upload via Plugins → Add New → Upload, reactivate. Your settings survive the upgrade (state is stored in user_meta).', 'radio' ); ?> <?php esc_html_e( 'Manual update path: download the .zip, deactivate the plugin in WordPress, upload via Plugins → Add New → Upload, reactivate. Your settings survive the upgrade (state is stored in user_meta).', 'a-radio' ); ?>
</p> </p>
<?php if ( defined( 'RADIO_SUPPORT_URL' ) && RADIO_SUPPORT_URL ) : ?>
<a class="radio-support-link" href="<?php echo esc_url( RADIO_SUPPORT_URL ); ?>" target="_blank" rel="noopener">
<?php esc_html_e( 'Like Radio? If You fancy to buy me a coffee →', 'a-radio' ); ?>
</a>
<?php endif; ?>
</div> </div>
<script> <script>
+225 -35
View File
@@ -1,31 +1,32 @@
<?php <?php
/** /**
* Radio — a free SomaFM player for your WordPress dashboard * RangerHQ Radio — a small, focused internet radio player for your WP dashboard.
* *
* Plugin Name: Radio * Plugin Name: RangerHQ Radio
* Plugin URI: https://icanhelp.ie/radio * Plugin URI: https://icanhelp.ie/radio
* Description: A small, focused, free radio player for your WordPress admin. 44 SomaFM stations grouped by 10 genres — ambient, electronic, lounge, rock, metal, jazz, world, reggae, holiday, specials. Plays via HTML5 audio; volume + station choice persist per-user. * Description: A small, focused internet radio player for your WordPress admin. 44 hand-curated stations from SomaFM across 10 genres — ambient, electronic, lounge, rock, metal, jazz, world, reggae, holiday, specials. Plays via HTML5 audio; per-user station + volume + history + favourites; pop-out window for continuous background play.
* Version: 0.3.0 * Version: 0.7.1
* Requires at least: 5.0 * Requires at least: 5.3
* Requires PHP: 7.4 * Requires PHP: 7.4
* Author: David Keane * Author: David Keane
* Author URI: https://rangersmyth.xyz/ * Author URI: https://rangersmyth.xyz/
* License: GPL v2 or later * License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html * License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: radio * Text Domain: a-radio
* *
* @package Radio * @package RangerHQ_Radio
*/ */
if ( ! defined( 'ABSPATH' ) ) { exit; } if ( ! defined( 'ABSPATH' ) ) { exit; }
// Plugin coordinates. // Plugin coordinates.
if ( ! defined( 'RADIO_VERSION' ) ) { define( 'RADIO_VERSION', '0.3.0' ); } if ( ! defined( 'RADIO_VERSION' ) ) { define( 'RADIO_VERSION', '0.7.1' ); }
if ( ! defined( 'RADIO_FILE' ) ) { define( 'RADIO_FILE', __FILE__ ); } if ( ! defined( 'RADIO_FILE' ) ) { define( 'RADIO_FILE', __FILE__ ); }
if ( ! defined( 'RADIO_PATH' ) ) { define( 'RADIO_PATH', plugin_dir_path( __FILE__ ) ); } if ( ! defined( 'RADIO_PATH' ) ) { define( 'RADIO_PATH', plugin_dir_path( __FILE__ ) ); }
if ( ! defined( 'RADIO_URL' ) ) { define( 'RADIO_URL', plugin_dir_url( __FILE__ ) ); } if ( ! defined( 'RADIO_URL' ) ) { define( 'RADIO_URL', plugin_dir_url( __FILE__ ) ); }
if ( ! defined( 'RADIO_BASENAME' ) ) { define( 'RADIO_BASENAME', plugin_basename( __FILE__ ) ); } if ( ! defined( 'RADIO_BASENAME' ) ) { define( 'RADIO_BASENAME', plugin_basename( __FILE__ ) ); }
if ( ! defined( 'RADIO_GITEA_URL' ) ) { define( 'RADIO_GITEA_URL', 'https://git.davidtkeane.com/ranger/a-radio' ); } if ( ! defined( 'RADIO_GITEA_URL' ) ) { define( 'RADIO_GITEA_URL', 'https://git.davidtkeane.com/ranger/a-radio' ); }
if ( ! defined( 'RADIO_SUPPORT_URL' ) ) { define( 'RADIO_SUPPORT_URL', 'https://buymeacoffee.com/davidtkeane' ); }
// Includes — each file owns one concern. // Includes — each file owns one concern.
require_once RADIO_PATH . 'inc/stations.php'; // the 44-station array + genre helpers require_once RADIO_PATH . 'inc/stations.php'; // the 44-station array + genre helpers
@@ -34,6 +35,7 @@ require_once RADIO_PATH . 'inc/dashboard-widget.php'; // the compact mini-player
require_once RADIO_PATH . 'inc/admin-page.php'; // dedicated Radio admin page (larger player) require_once RADIO_PATH . 'inc/admin-page.php'; // dedicated Radio admin page (larger player)
require_once RADIO_PATH . 'inc/about.php'; // About page require_once RADIO_PATH . 'inc/about.php'; // About page
require_once RADIO_PATH . 'inc/settings.php'; // Settings page require_once RADIO_PATH . 'inc/settings.php'; // Settings page
require_once RADIO_PATH . 'inc/history.php'; // Track history + favourites (v0.5.0)
require_once RADIO_PATH . 'inc/updater.php'; // self-hosted update checker against Gitea require_once RADIO_PATH . 'inc/updater.php'; // self-hosted update checker against Gitea
/** /**
@@ -44,8 +46,8 @@ require_once RADIO_PATH . 'inc/updater.php'; // self-hosted update chec
add_action( 'admin_menu', 'radio_register_admin_menu' ); add_action( 'admin_menu', 'radio_register_admin_menu' );
function radio_register_admin_menu() { function radio_register_admin_menu() {
add_menu_page( add_menu_page(
__( 'Radio', 'radio' ), __( 'Radio', 'a-radio' ),
__( 'Radio', 'radio' ), __( 'Radio', 'a-radio' ),
'read', // any logged-in user with read access has their own radio 'read', // any logged-in user with read access has their own radio
'radio', 'radio',
'radio_render_main_page', 'radio_render_main_page',
@@ -59,8 +61,8 @@ function radio_register_admin_menu() {
// form gotcha). // form gotcha).
add_submenu_page( add_submenu_page(
'radio', 'radio',
__( 'My Radio', 'radio' ), __( 'My Radio', 'a-radio' ),
__( 'My Radio', 'radio' ), __( 'My Radio', 'a-radio' ),
'read', 'read',
'radio', 'radio',
'' ''
@@ -68,8 +70,8 @@ function radio_register_admin_menu() {
add_submenu_page( add_submenu_page(
'radio', 'radio',
__( 'Settings', 'radio' ), __( 'Settings', 'a-radio' ),
__( 'Settings', 'radio' ), __( 'Settings', 'a-radio' ),
'manage_options', 'manage_options',
'radio-settings', 'radio-settings',
'radio_render_settings_page' 'radio_render_settings_page'
@@ -77,8 +79,17 @@ function radio_register_admin_menu() {
add_submenu_page( add_submenu_page(
'radio', 'radio',
__( 'About', 'radio' ), __( 'Track history', 'a-radio' ),
__( 'About', 'radio' ), __( 'History', 'a-radio' ),
'read',
'radio-history',
'radio_render_history_page'
);
add_submenu_page(
'radio',
__( 'About', 'a-radio' ),
__( 'About', 'a-radio' ),
'read', 'read',
'radio-about', 'radio-about',
'radio_render_about_page' 'radio_render_about_page'
@@ -92,10 +103,11 @@ function radio_register_admin_menu() {
add_action( 'admin_enqueue_scripts', 'radio_enqueue_admin_assets' ); add_action( 'admin_enqueue_scripts', 'radio_enqueue_admin_assets' );
function radio_enqueue_admin_assets( $hook ) { function radio_enqueue_admin_assets( $hook ) {
$radio_hooks = array( $radio_hooks = array(
'index.php', // WP Dashboard (the widget lives here) 'index.php', // WP Dashboard (the widget lives here)
'toplevel_page_radio', // Radio main page 'toplevel_page_radio', // Radio main page
'radio_page_radio-settings', // Settings 'radio_page_radio-settings', // Settings
'radio_page_radio-about', // About 'radio_page_radio-about', // About
'radio_page_radio-history', // History + Favourites (v0.5.0)
); );
if ( ! in_array( $hook, $radio_hooks, true ) ) { return; } if ( ! in_array( $hook, $radio_hooks, true ) ) { return; }
@@ -120,17 +132,21 @@ function radio_enqueue_admin_assets( $hook ) {
'stations' => radio_get_stations_flat(), 'stations' => radio_get_stations_flat(),
'ajaxUrl' => admin_url( 'admin-ajax.php' ), 'ajaxUrl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'radio_save_state' ), 'nonce' => wp_create_nonce( 'radio_save_state' ),
'popoutUrl' => admin_url( 'admin-post.php?action=radio_popout' ),
'strings' => array( 'strings' => array(
'play' => __( 'Play', 'radio' ), 'play' => __( 'Play', 'a-radio' ),
'pause' => __( 'Pause', 'radio' ), 'pause' => __( 'Pause', 'a-radio' ),
'loading' => __( 'Loading…', 'radio' ), 'loading' => __( 'Loading…', 'a-radio' ),
'error' => __( 'Stream error — try another station.', 'radio' ), 'error' => __( 'Stream error — try another station.', 'a-radio' ),
'saveError' => __( 'Preferences not saved — check your connection.', 'radio' ), 'saveError' => __( 'Preferences not saved — check your connection.', 'a-radio' ),
'mute' => __( 'Mute', 'radio' ), 'mute' => __( 'Mute', 'a-radio' ),
'unmute' => __( 'Unmute', 'radio' ), 'unmute' => __( 'Unmute', 'a-radio' ),
'nowPlaying' => __( 'Now Playing', 'radio' ), 'nowPlaying' => __( 'Now Playing', 'a-radio' ),
'volume' => __( 'Volume', 'radio' ), 'volume' => __( 'Volume', 'a-radio' ),
'station' => __( 'Station', 'radio' ), 'station' => __( 'Station', 'a-radio' ),
'addFav' => __( 'Add to favourites', 'a-radio' ),
'removeFav' => __( 'Remove from favourites', 'a-radio' ),
'clearConfirm' => __( 'Clear all track history? (Favourites are kept.)', 'a-radio' ),
), ),
) ); ) );
} }
@@ -162,6 +178,180 @@ function radio_ajax_save_state() {
wp_send_json_success( radio_get_state() ); wp_send_json_success( radio_get_state() );
} }
/**
* AJAX: log a played track to the user's history (v0.5.0).
* Nonce: same `radio_save_state` token used for state saves — both come
* from the same `wp_localize_script` config available on player pages.
*/
add_action( 'wp_ajax_radio_log_track', 'radio_ajax_log_track' );
function radio_ajax_log_track() {
if ( ! is_user_logged_in() ) { wp_send_json_error( 'Not logged in.', 401 ); }
check_ajax_referer( 'radio_save_state', 'nonce' );
// Unslash + sanitize at access; radio_sanitize_entry() also re-sanitizes
// downstream as belt+braces, but PCP wants the cleanup AT the access point.
$logged = radio_log_track( array(
'artist' => isset( $_POST['artist'] ) ? sanitize_text_field( wp_unslash( $_POST['artist'] ) ) : '',
'title' => isset( $_POST['title'] ) ? sanitize_text_field( wp_unslash( $_POST['title'] ) ) : '',
'station' => isset( $_POST['station'] ) ? sanitize_text_field( wp_unslash( $_POST['station'] ) ) : '',
'station_id' => isset( $_POST['station_id'] ) ? sanitize_key( wp_unslash( $_POST['station_id'] ) ) : '',
) );
wp_send_json_success( array( 'logged' => (bool) $logged ) );
}
/**
* AJAX: toggle whether a track is favourited.
* Nonce: `radio_history` — created fresh per History-page render so the
* AJAX is gated to users who actually loaded the page.
*/
add_action( 'wp_ajax_radio_toggle_favourite', 'radio_ajax_toggle_favourite' );
function radio_ajax_toggle_favourite() {
if ( ! is_user_logged_in() ) { wp_send_json_error( 'Not logged in.', 401 ); }
check_ajax_referer( 'radio_history', 'nonce' );
$new_state = radio_toggle_favourite( array(
'artist' => isset( $_POST['artist'] ) ? sanitize_text_field( wp_unslash( $_POST['artist'] ) ) : '',
'title' => isset( $_POST['title'] ) ? sanitize_text_field( wp_unslash( $_POST['title'] ) ) : '',
'station' => isset( $_POST['station'] ) ? sanitize_text_field( wp_unslash( $_POST['station'] ) ) : '',
'station_id' => isset( $_POST['station_id'] ) ? sanitize_key( wp_unslash( $_POST['station_id'] ) ) : '',
) );
wp_send_json_success( array( 'favourite' => (bool) $new_state ) );
}
/** AJAX: clear the current user's history (favourites preserved). */
add_action( 'wp_ajax_radio_clear_history', 'radio_ajax_clear_history' );
function radio_ajax_clear_history() {
if ( ! is_user_logged_in() ) { wp_send_json_error( 'Not logged in.', 401 ); }
check_ajax_referer( 'radio_history', 'nonce' );
radio_clear_history_all();
wp_send_json_success();
}
/**
* v0.6.0 — Pop-out mini player. Renders a standalone HTML page (no WP
* admin chrome) at `admin-post.php?action=radio_popout`, opened by the
* JS via `window.open()`. The popup persists across main-tab navigation
* so background music keeps playing when the user moves around the
* admin. `&play=1` in the URL tells `radio.js` to auto-resume on load.
*/
add_action( 'admin_post_radio_popout', 'radio_render_popout_page' );
function radio_render_popout_page() {
if ( ! current_user_can( 'read' ) ) {
wp_die( esc_html__( 'You do not have permission to view this page.', 'a-radio' ) );
}
$state = radio_get_state();
$station = radio_find_station( $state['station_id'] );
$stations = radio_get_stations_grouped();
$theme = isset( $state['theme'] ) ? $state['theme'] : 'auto';
if ( ! in_array( $theme, array( 'auto', 'light', 'dark' ), true ) ) { $theme = 'auto'; }
$cfg = array(
'state' => $state,
'stations' => radio_get_stations_flat(),
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'radio_save_state' ),
'popoutUrl' => '', // already in popout — no further popouts
'autoPlay' => isset( $_GET['play'] ), // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- query flag only, no state change
'strings' => array(
'play' => __( 'Play', 'a-radio' ),
'pause' => __( 'Pause', 'a-radio' ),
'loading' => __( 'Loading…', 'a-radio' ),
'error' => __( 'Stream error — try another station.', 'a-radio' ),
'saveError' => __( 'Preferences not saved — check your connection.', 'a-radio' ),
'mute' => __( 'Mute', 'a-radio' ),
'unmute' => __( 'Unmute', 'a-radio' ),
'nowPlaying' => __( 'Now Playing', 'a-radio' ),
'volume' => __( 'Volume', 'a-radio' ),
'station' => __( 'Station', 'a-radio' ),
),
);
/*
* v0.7.0: Enqueue popup assets via WP so we can emit them with
* wp_print_styles() / wp_print_footer_scripts() — passes PCP's
* NonEnqueuedStylesheet / NonEnqueuedScript checks (we used raw
* <link> / <script> tags before). dashicons is core-registered.
*/
wp_enqueue_style( 'dashicons' );
wp_enqueue_style( 'radio-admin', RADIO_URL . 'assets/css/radio.css', array(), RADIO_VERSION );
wp_enqueue_script( 'radio-admin', RADIO_URL . 'assets/js/radio.js', array(), RADIO_VERSION, true );
wp_localize_script( 'radio-admin', 'RadioPlugin', $cfg );
?>
<!DOCTYPE html>
<html lang="<?php echo esc_attr( str_replace( '_', '-', get_bloginfo( 'language' ) ) ); ?>">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php
/* translators: %s = currently playing station name */
printf( esc_html__( 'Radio — %s', 'a-radio' ), esc_html( $station['name'] ) );
?></title>
<?php wp_print_styles(); /* dashicons + radio.css; popup-specific overrides scoped under body.radio-popout in radio.css */ ?>
</head>
<body class="radio-popout radio-theme-<?php echo esc_attr( $theme ); ?>">
<div class="radio-popout-header">
<h1><?php esc_html_e( 'Radio', 'a-radio' ); ?></h1>
<button type="button" class="radio-popout-close" onclick="window.close()" title="<?php esc_attr_e( 'Close', 'a-radio' ); ?>">✕</button>
</div>
<div class="radio-popout-wrap">
<div class="radio-player" data-radio-surface="popout">
<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', 'a-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">&#9654;</span>
<span data-radio-play-label><?php esc_html_e( 'Play', 'a-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', 'a-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', 'a-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-popout"><?php esc_html_e( 'Station', 'a-radio' ); ?></label>
<select id="radio-station-popout" 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>
<?php wp_print_footer_scripts(); /* radio.js + the wp_localize_script-emitted window.RadioPlugin inline blob */ ?>
</body>
</html>
<?php
exit;
}
/** /**
* Surface the user's theme choice (auto/light/dark) to CSS as a body * Surface the user's theme choice (auto/light/dark) to CSS as a body
* class. `radio-theme-dark` forces dark; `radio-theme-auto` lets the * class. `radio-theme-dark` forces dark; `radio-theme-auto` lets the
+113
View File
@@ -0,0 +1,113 @@
=== RangerHQ Radio ===
Contributors: davidtkeane
Donate link: https://buymeacoffee.com/davidtkeane
Tags: radio, music, audio, internet radio, background music
Requires at least: 5.3
Tested up to: 7.0
Stable tag: 0.7.1
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
A small, focused internet radio player for your WordPress admin — 44 hand-curated stations, history, favourites, and a pop-out window.
== Description ==
**RangerHQ Radio** adds a tiny, focused internet radio player to your WordPress dashboard so you can have background music while you work in the admin — without leaving the page, opening Spotify, or installing a desktop client.
= What you get =
* **44 hand-curated stations from [SomaFM](https://somafm.com)** across 10 genres — ambient, electronic, lounge, rock, metal, jazz, world, reggae, holiday and specials. From coding-focus ambient (Groove Salad, Drone Zone) to drive-time electronic (DEF CON Radio, Beat Blender) to mellow lounge (Lush, Secret Agent).
* **Now-playing indicator** — small CSS dancing-bars equalizer that pulses while audio is playing. A Web Audio frequency visualizer kicks in automatically when the browser allows it (with a graceful fallback to the CSS bars).
* **Track history + favourites** — every track that scrolls past is logged to your personal History page (capped at 500); a star toggle promotes the good ones to a separate Favourites tab that doesn't age out. Each row has four search links (Spotify, YouTube, Apple Music, Bandcamp) so you can find that track on whichever service you use.
* **Pop-out mini-player** — a 380×560 standalone window that persists across the main tab's navigation, so background music doesn't cut when you move between Plugins, Posts, Users, etc.
* **OS media keys** — F8/headphone buttons/lock-screen widget play and pause the radio (via MediaSession API).
* **Mute toggle** — the speaker icon is clickable; remembers prior volume.
* **Dark theme** — explicit dark option for the player surface (`Settings → Theme`).
* **Per-user state** — your chosen station, volume, theme, history, and favourites all live in `user_meta`, so each WordPress user has their own setup.
= Privacy + dependencies =
* **No tracking, no telemetry, no third-party scripts on your admin pages.** Audio plays directly in your browser via HTML5 — just an `<audio>` element pointed at SomaFM's public streams.
* **No data leaves your site.** History and favourites are stored in your own `wp_usermeta`. The four search links use deep-link search URLs on each provider's public site — no API keys, no third-party JS embedded.
* **Stations courtesy of [SomaFM](https://somafm.com)** — an independent, listener-supported, commercial-free internet radio network broadcasting from San Francisco since 2000. RangerHQ Radio is a small wrapper around their public streams. If you enjoy the music, please consider [supporting SomaFM directly](https://somafm.com/support/).
== Installation ==
1. Upload the plugin folder to `/wp-content/plugins/` (or install from the WordPress plugin directory).
2. Activate the plugin through the **Plugins** menu in WordPress.
3. Open **Radio → My Radio** in the admin sidebar and press Play. Your station and volume choice are saved per user.
There is no separate configuration step — defaults are sensible (Groove Salad at 60% volume). Settings are at **Radio → Settings**.
== Frequently Asked Questions ==
= Does this work on the front-end of my site? =
No — RangerHQ Radio is admin-only. It adds a player to the WordPress dashboard for you (and your other authenticated admins) to use while working. It does not embed a radio player on the public-facing site.
= Can I add my own stations? =
Not via the admin yet. The station list is hard-coded in `inc/stations.php` (44 SomaFM stations). If you'd like to add custom stations or other internet radio sources, please open an issue on the [Gitea repo](https://git.davidtkeane.com/ranger/a-radio).
= The pop-out window doesn't open. =
Your browser may be blocking pop-ups. Click the address bar's pop-up icon to allow pop-ups for this site, then try again.
= Why does Touch ID / a passkey prompt appear when I press Play? =
It shouldn't. This plugin uses no biometrics or authentication of its own — that's a different plugin in the RangerHQ family.
= The current-track display says nothing / is hidden. =
SomaFM's track-info endpoint (`somafm.com/songs/{station}.json`) is fetched best-effort. If it's unreachable or the browser blocks the request, the track display silently hides. The player keeps working regardless.
== Screenshots ==
1. The main player page (Radio → My Radio) with the now-playing indicator dancing while audio is playing.
2. The dashboard widget — same player, compact, sits alongside your usual dashboard widgets.
3. Track History page with star-to-favourite and four search-provider links per row.
4. Pop-out mini-player window — keeps playing while you navigate the rest of the admin.
== Changelog ==
= 0.7.1 =
* Plugin Check follow-up — `Tested up to` bumped from 6.7 to 7.0 (PCP `outdated_tested_upto_header`). Stray `.DS_Store` files re-deleted (macOS Finder regenerated them between PCP runs; they won't be in the submission zip).
= 0.7.0 =
* WordPress.org submission prep — full PCP-clean. Plugin name normalised to **RangerHQ Radio** (SomaFM stays in the description as the data source). Text Domain renamed `radio` → `a-radio` everywhere (134 i18n call sites updated). Six `printf` / `sprintf` calls now carry translator comments. All admin `$_POST` access now `wp_unslash()` + `sanitize_*` at the access point. `Requires at least` bumped to 5.3 (matches `wp_date()` usage). Pop-out window now uses `wp_enqueue_*` + `wp_print_styles()` / `wp_print_footer_scripts()` instead of raw `<link>` / `<script>` tags; popup-specific CSS moved into `radio.css` under `body.radio-popout` scope. `.DS_Store` files removed. Proper `readme.txt`.
= 0.6.3 =
* Discreet "buy me a coffee" support link in the Updates panel and the About-page Credits card. Single `RADIO_SUPPORT_URL` constant; conditional render — silently hidden if the constant is empty.
= 0.6.2 =
* Current version badge on the Settings page — small grey pill follows the H1 reading `v{RADIO_VERSION}`.
= 0.6.1 =
* About page restructure — 3-card top row (What / Who / Credits) + full-width Version history with the latest expanded and earlier releases as one-liners.
= 0.6.0 =
* Pop-out mini-player. `↗ Pop out` button beside Play opens a 380×560 standalone window that persists across the main tab's navigation, so background music keeps playing while you click around Plugins / Posts / Users.
= 0.5.0 =
* Track history + favourites. Every track that scrolls past is logged to a per-user `Radio → History` page (capped at 500). Star toggle promotes tracks to a separate Favourites tab. Four search-provider links per row (Spotify, YouTube, Apple Music, Bandcamp).
= 0.4.0 =
* Now-playing visual indicator. CSS dancing-bars equalizer that pulses while audio is playing. Web Audio frequency visualizer kicks in when the browser allows it (with graceful fallback).
= 0.3.0 =
* Dark theme, mute toggle on the speaker icon, MediaSession API (OS media keys), SomaFM current-track polling under the station description.
= 0.2.0 =
* UI rebuilt to WordPress admin standards — postbox container, native play/pause button with text label, picks up the user's admin colour scheme via `var(--wp-admin-theme-color)`.
= 0.1.0 =
* First release — 44 SomaFM stations across 10 genres, dashboard widget + dedicated admin page, per-user state, self-hosted Gitea updater.
== Upgrade Notice ==
= 0.7.1 =
PCP follow-up — `Tested up to` bumped to 7.0. No user-visible changes.
= 0.7.0 =
WordPress.org submission prep. Plugin name now "RangerHQ Radio". Text Domain renamed `radio` → `a-radio`. No user-visible behaviour changes; settings, history, and favourites all survive the upgrade.