ranger/rangerhq-radio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(0.5.0): track history + favourites with four search providers

Browse Source 
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>
This commit is contained in:
David Keane
2026-05-29 23:55:18 +01:00
parent f5feca7dfa
commit 2bd501d610
6 changed files with 567 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/about.php
+5 -1
View File
@@ -48,7 +48,11 @@ function radio_render_about_page() {
<h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
<ul>
<li>
<span class="ver">v0.4.0</span> &mdash; 29 May 2026 <span class="latest">latest</span><br>
<span class="ver">v0.5.0</span> &mdash; 29 May 2026 <span class="latest">latest</span><br>
<?php esc_html_e( 'Track history + favourites. Every track that scrolls past in the player is now quietly logged to your personal Radio → History page (capped at 500), with a star toggle to keep the good ones forever in a separate Favourites tab. Each row has four search links (Spotify / YouTube / Apple Music / Bandcamp) so you can find that track on whichever service you use. Filter by station, search by artist or title, clear history with a button. Per-user, nothing leaves your site.', 'radio' ); ?>
</li>
<li>
<span class="ver">v0.4.0</span> &mdash; 29 May 2026<br>
<?php esc_html_e( 'Now-playing visual indicator. Four tiny dancing bars next to "Now Playing" pulse while the audio is playing (pure CSS, always works). On top of that, a Web Audio frequency visualizer tries to draw live frequency bars on a small canvas — if the browser allows it and the stream is CORS-friendly it kicks in automatically; if not, the CSS bars stay and nothing breaks.', 'radio' ); ?>
</li>
<li>
inc/history.php
+255
View File
@@ -0,0 +1,255 @@
<?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.', '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', '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', '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', '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.', '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.', '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…', 'radio' ); ?>" />
<select id="radio-history-station">
<option value=""><?php esc_html_e( 'All stations', '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', 'radio' ); ?>
</button>
<?php endif; ?>
</div>
<table class="widefat radio-history-table">
<thead>
<tr>
<th class="when"><?php esc_html_e( 'When', 'radio' ); ?></th>
<th class="station"><?php esc_html_e( 'Station', 'radio' ); ?></th>
<th class="track"><?php esc_html_e( 'Artist — Title', 'radio' ); ?></th>
<th class="search"><?php esc_html_e( 'Search', 'radio' ); ?></th>
<th class="fav"><span class="screen-reader-text"><?php esc_html_e( 'Favourite', '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 printf( esc_html__( '%s ago', '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', 'radio' ) : esc_attr__( 'Add to favourites', 'radio' ); ?>">
<?php echo $is_fav ? '★' : '☆'; ?>
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php endif; ?>
</div>
<?php
}