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>
This commit is contained in:
@@ -453,3 +453,105 @@
|
||||
border-radius: 3px;
|
||||
border: 1px solid #3c434a;
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────
|
||||
* 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; }
|
||||
|
||||
Reference in New Issue
Block a user