diff --git a/web_server.py b/web_server.py index 31d1b08b..9a84b014 100644 --- a/web_server.py +++ b/web_server.py @@ -30253,6 +30253,7 @@ def get_listenbrainz_lastfm_radio(): "identifier": f"https://listenbrainz.org/playlist/{p['playlist_mbid']}", "title": p['title'], "creator": p['creator'], + "track_count": p.get('track_count', 0), "annotation": p.get('annotation', {}), "track": [], } diff --git a/webui/index.html b/webui/index.html index 9c150945..f4fd8a43 100644 --- a/webui/index.html +++ b/webui/index.html @@ -1030,6 +1030,9 @@ + @@ -1915,6 +1918,17 @@ + +
+
+

Your Last.fm Radio Playlists

+ +
+
+
Click 'Refresh' to load your Last.fm Radio playlists. Generate new ones from the Discover page.
+
+
+
@@ -7982,6 +7996,7 @@ + diff --git a/webui/static/helper.js b/webui/static/helper.js index 9c765e1b..b6a31d44 100644 --- a/webui/static/helper.js +++ b/webui/static/helper.js @@ -3419,6 +3419,7 @@ const WHATS_NEW = { { title: 'Auto-Sync refresh now routes through the unified source layer', desc: 'follow-up to the groundwork above. the mirrored-playlist auto-refresh handler used to have a ~190-line if/elif chain branching per source (one branch each for Spotify, Spotify public, Deezer, Tidal, YouTube). now it asks the source registry for the right adapter and calls one refresh method. behavior identical — same matched_data, same Tidal-skip-on-no-auth log, same Spotify-public-prefers-authed-API fallback. unlocks ListenBrainz / Last.fm / SoulSync Discovery as future Sync-page mirror sources without a fresh elif branch each time.' }, { title: 'Discovery folded into the unified source contract', desc: 'next slice of the groundwork. each playlist source can now answer one extra question — "match these raw tracks against Spotify / iTunes" — through the same adapter interface. Spotify / Tidal / Qobuz / YouTube / Deezer / Spotify-public / iTunes-link / SoulSync-Discovery all answer trivially (their tracks already have provider IDs); ListenBrainz + Last.fm run the matching engine. mirror-refresh now calls this automatically when a source returns MB-metadata-only tracks, so when ListenBrainz becomes a Sync-page tab next commit, its mirrors land already discovered + ready to sync — no separate Discover-page round-trip needed.' }, { title: 'ListenBrainz Sync tab', desc: 'new ListenBrainz tab on the Sync page, between Beatport and Import. lists your "For You" / "My Playlists" / "Collaborative" LB playlists in one place. clicking a card kicks off the same discovery → sync → mirror flow you already get from the Discover page (no duplicate UI behind the scenes, just a new entry point). once mirrored, LB playlists participate in Auto-Sync schedules + pipeline automations like any other source. needs ListenBrainz connected in Settings → Connections.', page: 'sync' }, + { title: 'Last.fm Radio Sync tab', desc: 'sibling to the ListenBrainz tab — lists your generated Last.fm Radio playlists alongside the rest of the Sync sources. same discovery → mirror flow under the hood, just a different entry point. new Last.fm radios are still generated from the Discover page by picking a seed track; this tab is for syncing existing ones. mirrors auto-trim when Last.fm Radio cache rotates so old radios don\'t pile up.', page: 'sync' }, ], '2.6.2': [ { date: 'May 24, 2026 — 2.6.2 release' }, diff --git a/webui/static/style.css b/webui/static/style.css index 1b9bf4e5..71b9ed5d 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -13272,6 +13272,14 @@ body.helper-mode-active #dashboard-activity-feed:hover { background-image: url('data:image/svg+xml;charset=utf-8,'); } +.lastfm-icon { + background-image: url('data:image/svg+xml;charset=utf-8,'); +} + +.sync-tab-button.active .lastfm-icon { + background-image: url('data:image/svg+xml;charset=utf-8,'); +} + /* ListenBrainz Sync tab sub-tabs (For You / My Playlists / Collaborative). * Neutral dark surface; orange used only as a subtle accent on the * active state — matches the rest of the app's tone. */ @@ -17536,7 +17544,8 @@ body.helper-mode-active #dashboard-activity-feed:hover { .tidal-playlist-card, .deezer-playlist-card, .spotify-public-card, -.listenbrainz-playlist-card { +.listenbrainz-playlist-card, +.lastfm-playlist-card { background: rgba(18, 18, 22, 0.9); backdrop-filter: blur(12px); border-radius: 16px; @@ -17558,7 +17567,8 @@ body.helper-mode-active #dashboard-activity-feed:hover { .tidal-playlist-card::before, .deezer-playlist-card::before, .spotify-public-card::before, -.listenbrainz-playlist-card::before { +.listenbrainz-playlist-card::before, +.lastfm-playlist-card::before { content: ''; position: absolute; top: 0; @@ -17574,6 +17584,7 @@ body.helper-mode-active #dashboard-activity-feed:hover { .deezer-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(162, 56, 255, 0.4), transparent); } .spotify-public-card::before { background: linear-gradient(90deg, transparent, rgba(29, 185, 84, 0.4), transparent); } .listenbrainz-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(235, 116, 59, 0.4), transparent); } +.lastfm-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(213, 16, 7, 0.4), transparent); } /* Hover — brand glow */ .youtube-playlist-card:hover { border-color: rgba(255, 0, 0, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 0, 0, 0.06); transform: translateY(-2px); } @@ -17581,19 +17592,22 @@ body.helper-mode-active #dashboard-activity-feed:hover { .deezer-playlist-card:hover { border-color: rgba(162, 56, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(162, 56, 255, 0.06); transform: translateY(-2px); } .spotify-public-card:hover { border-color: rgba(29, 185, 84, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(29, 185, 84, 0.06); transform: translateY(-2px); } .listenbrainz-playlist-card:hover { border-color: rgba(235, 116, 59, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(235, 116, 59, 0.06); transform: translateY(-2px); } +.lastfm-playlist-card:hover { border-color: rgba(213, 16, 7, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(213, 16, 7, 0.06); transform: translateY(-2px); } .youtube-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.7), transparent); } .tidal-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.7), transparent); } .deezer-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(162, 56, 255, 0.7), transparent); } .spotify-public-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(29, 185, 84, 0.7), transparent); } .listenbrainz-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(235, 116, 59, 0.7), transparent); } +.lastfm-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(213, 16, 7, 0.7), transparent); } /* Source icons */ .youtube-playlist-card .playlist-card-icon, .tidal-playlist-card .playlist-card-icon, .deezer-playlist-card .playlist-card-icon, .spotify-public-card .playlist-card-icon, -.listenbrainz-playlist-card .playlist-card-icon { +.listenbrainz-playlist-card .playlist-card-icon, +.lastfm-playlist-card .playlist-card-icon { width: 40px; height: 40px; border-radius: 10px; @@ -17612,24 +17626,28 @@ body.helper-mode-active #dashboard-activity-feed:hover { .deezer-playlist-card .playlist-card-icon { background: rgba(162, 56, 255, 0.12); border: 1px solid rgba(162, 56, 255, 0.2); color: #a238ff; } .spotify-public-card .playlist-card-icon { background: rgba(29, 185, 84, 0.12); border: 1px solid rgba(29, 185, 84, 0.2); color: #1DB954; } .listenbrainz-playlist-card .playlist-card-icon { background: rgba(235, 116, 59, 0.12); border: 1px solid rgba(235, 116, 59, 0.2); color: #eb743b; } +.lastfm-playlist-card .playlist-card-icon { background: rgba(213, 16, 7, 0.12); border: 1px solid rgba(213, 16, 7, 0.2); color: #d51007; } .youtube-playlist-card .playlist-card-content, .tidal-playlist-card .playlist-card-content, .deezer-playlist-card .playlist-card-content, .spotify-public-card .playlist-card-content, -.listenbrainz-playlist-card .playlist-card-content { flex: 1; min-width: 0; } +.listenbrainz-playlist-card .playlist-card-content, +.lastfm-playlist-card .playlist-card-content { flex: 1; min-width: 0; } .youtube-playlist-card .playlist-card-name, .tidal-playlist-card .playlist-card-name, .deezer-playlist-card .playlist-card-name, .spotify-public-card .playlist-card-name, -.listenbrainz-playlist-card .playlist-card-name { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 4px; } +.listenbrainz-playlist-card .playlist-card-name, +.lastfm-playlist-card .playlist-card-name { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 4px; } .youtube-playlist-card .playlist-card-info, .tidal-playlist-card .playlist-card-info, .deezer-playlist-card .playlist-card-info, .spotify-public-card .playlist-card-info, -.listenbrainz-playlist-card .playlist-card-info { font-size: 13px; color: rgba(255, 255, 255, 0.4); display: flex; align-items: center; gap: 10px; } +.listenbrainz-playlist-card .playlist-card-info, +.lastfm-playlist-card .playlist-card-info { font-size: 13px; color: rgba(255, 255, 255, 0.4); display: flex; align-items: center; gap: 10px; } .youtube-playlist-card .playlist-card-track-count { color: rgba(255, 255, 255, 0.7); } .youtube-playlist-card .playlist-card-phase-text { font-weight: 500; } @@ -17640,7 +17658,8 @@ body.helper-mode-active #dashboard-activity-feed:hover { .tidal-playlist-card .playlist-card-action-btn, .deezer-playlist-card .playlist-card-action-btn, .spotify-public-card .playlist-card-action-btn, -.listenbrainz-playlist-card .playlist-card-action-btn { +.listenbrainz-playlist-card .playlist-card-action-btn, +.lastfm-playlist-card .playlist-card-action-btn { background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); @@ -17660,7 +17679,8 @@ body.helper-mode-active #dashboard-activity-feed:hover { .tidal-playlist-card .playlist-card-action-btn::before, .deezer-playlist-card .playlist-card-action-btn::before, .spotify-public-card .playlist-card-action-btn::before, -.listenbrainz-playlist-card .playlist-card-action-btn::before { +.listenbrainz-playlist-card .playlist-card-action-btn::before, +.lastfm-playlist-card .playlist-card-action-btn::before { content: ''; position: absolute; inset: 0; @@ -17674,24 +17694,28 @@ body.helper-mode-active #dashboard-activity-feed:hover { .deezer-playlist-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(162, 56, 255, 0.2), rgba(162, 56, 255, 0.05)); } .spotify-public-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(29, 185, 84, 0.2), rgba(29, 185, 84, 0.05)); } .listenbrainz-playlist-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(235, 116, 59, 0.2), rgba(235, 116, 59, 0.05)); } +.lastfm-playlist-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(213, 16, 7, 0.2), rgba(213, 16, 7, 0.05)); } .youtube-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before, .tidal-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before, .deezer-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before, .spotify-public-card .playlist-card-action-btn:hover:not(:disabled)::before, -.listenbrainz-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before { opacity: 1; } +.listenbrainz-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before, +.lastfm-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before { opacity: 1; } .youtube-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(255, 0, 0, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255, 0, 0, 0.15); } .tidal-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(255, 102, 0, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255, 102, 0, 0.15); } .deezer-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(162, 56, 255, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(162, 56, 255, 0.15); } .spotify-public-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(29, 185, 84, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(29, 185, 84, 0.15); } .listenbrainz-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(235, 116, 59, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(235, 116, 59, 0.15); } +.lastfm-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(213, 16, 7, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(213, 16, 7, 0.15); } .youtube-playlist-card .playlist-card-action-btn:disabled, .tidal-playlist-card .playlist-card-action-btn:disabled, .deezer-playlist-card .playlist-card-action-btn:disabled, .spotify-public-card .playlist-card-action-btn:disabled, -.listenbrainz-playlist-card .playlist-card-action-btn:disabled { +.listenbrainz-playlist-card .playlist-card-action-btn:disabled, +.lastfm-playlist-card .playlist-card-action-btn:disabled { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.2); diff --git a/webui/static/sync-lastfm.js b/webui/static/sync-lastfm.js new file mode 100644 index 00000000..b54379a1 --- /dev/null +++ b/webui/static/sync-lastfm.js @@ -0,0 +1,131 @@ +// =================================================================== +// LAST.FM RADIO SYNC TAB +// =================================================================== +// Phase 1c.2 of the Discover-to-Sync unification. Surfaces the user's +// generated Last.fm Radio playlists as a Sync-page tab so they can be +// discovered + mirrored alongside ListenBrainz, Tidal, Qobuz, etc. +// +// Last.fm Radio playlists live in the same ``listenbrainz_playlists`` +// SQLite table as ListenBrainz playlists (with +// ``playlist_type='lastfm_radio'``) and run through the same +// ``openDownloadModalForListenBrainzPlaylist`` discovery flow. So this +// module is intentionally thin — list + render + click handoff. +// The refresh loop, discovery polling, sync→mirror creation, and the +// modal itself are all shared with the ListenBrainz tab. +// +// New Last.fm radios are GENERATED from the Discover page (with a +// seed track). This tab is for listing existing radios + syncing +// them to a mirror — not for generation. + +let _lastfmSyncPlaylists = []; + +async function loadLastfmSyncPlaylists() { + const container = document.getElementById('lastfm-sync-playlist-container'); + const refreshBtn = document.getElementById('lastfm-sync-refresh-btn'); + if (!container) return; + + container.innerHTML = `
πŸ”„ Loading Last.fm Radio playlists...
`; + if (refreshBtn) { + refreshBtn.disabled = true; + refreshBtn.textContent = 'πŸ”„ Loading...'; + } + + try { + const resp = await fetch('/api/discover/listenbrainz/lastfm-radio'); + const data = await resp.json(); + if (!data.success && data.error) { + container.innerHTML = `
❌ ${escapeHtml(data.error)}
`; + return; + } + _lastfmSyncPlaylists = data.playlists || []; + renderLastfmSyncPlaylists(); + console.log(`πŸ“» Last.fm Sync tab loaded: ${_lastfmSyncPlaylists.length} radios`); + } catch (err) { + container.innerHTML = `
❌ Error loading Last.fm radios: ${err.message}
`; + if (typeof showToast === 'function') { + showToast(`Error loading Last.fm radios: ${err.message}`, 'error'); + } + } finally { + if (refreshBtn) { + refreshBtn.disabled = false; + refreshBtn.textContent = 'πŸ”„ Refresh'; + } + } +} + +function renderLastfmSyncPlaylists() { + const container = document.getElementById('lastfm-sync-playlist-container'); + if (!container) return; + + if (_lastfmSyncPlaylists.length === 0) { + container.innerHTML = `
No Last.fm Radio playlists yet. Generate one from the Discover page by picking a seed track.
`; + return; + } + + container.innerHTML = _lastfmSyncPlaylists.map(p => { + const inner = p.playlist || p; + const mbid = (inner.identifier || '').split('/').pop() || inner.id || ''; + const title = inner.title || 'Last.fm Radio'; + const creator = inner.creator || 'Last.fm'; + let count = 0; + if (inner.track_count) count = inner.track_count; + else if (inner.annotation && inner.annotation.track_count) count = inner.annotation.track_count; + else if (Array.isArray(inner.track) && inner.track.length > 0) count = inner.track.length; + + const state = (typeof listenbrainzPlaylistStates !== 'undefined' + && listenbrainzPlaylistStates[mbid]) || null; + const phase = state && state.phase ? state.phase : 'fresh'; + const phaseText = (typeof getPhaseText === 'function') + ? getPhaseText(phase) : (phase === 'fresh' ? 'Ready to discover' : phase); + const phaseColor = (typeof getPhaseColor === 'function') + ? getPhaseColor(phase) : '#999'; + const buttonText = (typeof getActionButtonText === 'function') + ? getActionButtonText(phase) : 'Discover'; + + return ` +
+
πŸ“»
+
+
${escapeHtml(title)}
+
+ ${count} tracks + by ${escapeHtml(creator)} + ${phaseText} +
+
+
+ +
+ `; + }).join(''); + + container.querySelectorAll('.lastfm-playlist-card').forEach(card => { + card.addEventListener('click', () => { + const mbid = card.dataset.lbMbid; + const title = card.dataset.lbTitle; + // Reuses the LB Sync-tab click handler β€” Last.fm radios are + // stored in the same table + matched by the same discovery + // worker, so the click flow is byte-identical. + if (typeof handleListenBrainzSyncCardClick === 'function') { + handleListenBrainzSyncCardClick(mbid, title); + } + }); + }); + + // Reuse the shared refresh loop from sync-listenbrainz.js β€” it + // already iterates Last.fm cards alongside LB cards. + if (typeof _startLbSyncCardRefreshLoop === 'function') { + const tab = document.getElementById('lastfm-sync-tab-content'); + if (tab && tab.classList.contains('active')) { + _startLbSyncCardRefreshLoop(); + } + } +} + +document.addEventListener('DOMContentLoaded', () => { + const btn = document.getElementById('lastfm-sync-refresh-btn'); + if (btn) btn.addEventListener('click', loadLastfmSyncPlaylists); +}); diff --git a/webui/static/sync-listenbrainz.js b/webui/static/sync-listenbrainz.js index d025b485..b8415ce6 100644 --- a/webui/static/sync-listenbrainz.js +++ b/webui/static/sync-listenbrainz.js @@ -284,15 +284,28 @@ function _refreshOneLbSyncCard(card) { } function _refreshAllLbSyncCards() { - document.querySelectorAll('#listenbrainz-sync-tab-content .listenbrainz-playlist-card') - .forEach(_refreshOneLbSyncCard); + // Both LB and Last.fm-radio tabs render MB-track cards that share + // the ``listenbrainzPlaylistStates`` state machine (Last.fm radios + // are stored in the same listenbrainz_playlists table with + // ``playlist_type='lastfm_radio'``). The refresh loop iterates + // visible cards from either tab so we don't need a second loop. + document.querySelectorAll( + '#listenbrainz-sync-tab-content .listenbrainz-playlist-card, ' + + '#lastfm-sync-tab-content .lastfm-playlist-card' + ).forEach(_refreshOneLbSyncCard); +} + +function _isMbStyleSyncTabActive() { + const lb = document.getElementById('listenbrainz-sync-tab-content'); + const lfm = document.getElementById('lastfm-sync-tab-content'); + return (lb && lb.classList.contains('active')) + || (lfm && lfm.classList.contains('active')); } function _startLbSyncCardRefreshLoop() { if (_lbSyncCardRefreshInterval) return; _lbSyncCardRefreshInterval = setInterval(() => { - const tab = document.getElementById('listenbrainz-sync-tab-content'); - if (!tab || !tab.classList.contains('active')) { + if (!_isMbStyleSyncTabActive()) { _stopLbSyncCardRefreshLoop(); return; } diff --git a/webui/static/sync-services.js b/webui/static/sync-services.js index 085ed157..67f6ded7 100644 --- a/webui/static/sync-services.js +++ b/webui/static/sync-services.js @@ -3751,6 +3751,19 @@ function initializeSyncPage() { _startLbSyncCardRefreshLoop(); } } + + // Last.fm Sync tab β€” same MB-track shape as LB, shares the + // listenbrainzPlaylistStates machinery + refresh loop. + if (tabId === 'lastfm-sync') { + if (typeof loadLastfmSyncPlaylists === 'function' + && !window._lastfmSyncTabLoaded) { + window._lastfmSyncTabLoaded = true; + loadLastfmSyncPlaylists(); + } + if (typeof _startLbSyncCardRefreshLoop === 'function') { + _startLbSyncCardRefreshLoop(); + } + } }); });