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:
+95
-1
@@ -109,7 +109,8 @@
|
||||
}
|
||||
|
||||
/** 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) {
|
||||
stopTrackPolling(player);
|
||||
var trackEl = player.querySelector('[data-radio-track]');
|
||||
@@ -129,6 +130,7 @@
|
||||
if (!title && !artist) { trackEl.hidden = true; return; }
|
||||
trackEl.textContent = artist ? (title + ' — ' + artist) : title;
|
||||
trackEl.hidden = false;
|
||||
logTrackIfNew(artist, title, station);
|
||||
})
|
||||
.catch(function () { trackEl.hidden = true; });
|
||||
}
|
||||
@@ -136,6 +138,29 @@
|
||||
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) {
|
||||
if (player._trackTimer) {
|
||||
clearInterval(player._trackTimer);
|
||||
@@ -435,10 +460,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() {
|
||||
var players = document.querySelectorAll('.radio-player');
|
||||
for (var i = 0; i < players.length; i++) { bindPlayer(players[i]); }
|
||||
bindSettingsSlider();
|
||||
bindHistoryPage();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
|
||||
Reference in New Issue
Block a user