System Started
+Dashboard initialized successfully
+
+
+ ${label}
+ ${_workerStatusLabel(wStatus, worker)}
+
+ ${_buildGaugeSVG(svc, value, max)}
+
+
+ ${svc === 'spotify' && worker.daily_budget ? _buildBudgetBar(worker.daily_budget) : ''}
+ ${isRateLimited ? _buildRateLimitBadge(d) : ''}
+ `;
+ } else {
+ // Fast update — only change values
+ _updateGauge(gaugeWrap, value, max, svc);
+
+ // Update status
+ const statusEl = container.querySelector('.gauge-card-status');
+ if (statusEl) {
+ statusEl.dataset.status = wStatus;
+ statusEl.textContent = _workerStatusLabel(wStatus, worker);
+ }
+
+ // Update stats
+ const statVals = container.querySelectorAll('.gauge-card-stat-val');
+ if (statVals[0]) statVals[0].textContent = value.toFixed(0);
+ if (statVals[1]) statVals[1].textContent = worker.calls_1h || 0;
+ if (statVals[2]) statVals[2].textContent = (worker.calls_24h || 0).toLocaleString();
+
+ // Budget bar (Spotify)
+ if (svc === 'spotify' && worker.daily_budget) {
+ let budgetEl = container.querySelector('.gauge-budget-bar');
+ if (!budgetEl) {
+ const div = document.createElement('div');
+ div.innerHTML = _buildBudgetBar(worker.daily_budget);
+ const statsEl = container.querySelector('.gauge-card-stats');
+ if (statsEl) statsEl.after(div.firstElementChild);
+ } else {
+ const b = worker.daily_budget;
+ const pctB = Math.min(100, Math.round((b.used / b.limit) * 100));
+ const fill = budgetEl.querySelector('.gauge-budget-fill');
+ if (fill) { fill.style.width = pctB + '%'; }
+ const label = budgetEl.querySelector('.gauge-budget-label');
+ if (label) label.textContent = `${b.used.toLocaleString()} / ${b.limit.toLocaleString()} daily`;
+ }
+ }
+
+ // Rate limit badge
+ let badge = container.querySelector('.gauge-rl-badge');
+ if (isRateLimited) {
+ if (!badge) {
+ const div = document.createElement('div');
+ div.innerHTML = _buildRateLimitBadge(d);
+ container.appendChild(div.firstElementChild);
+ } else {
+ const mins = Math.ceil((d.rl_remaining || 0) / 60);
+ const timeEl = badge.querySelector('.gauge-rl-time');
+ if (timeEl) timeEl.textContent = mins > 60 ? `${Math.floor(mins / 60)}h ${mins % 60}m` : `${mins}m`;
+ }
+ } else if (badge) {
+ badge.remove();
+ }
+ }
+
+ container.classList.toggle('danger', pct > 0.8 || isRateLimited);
+ container.classList.toggle('active', value > 0 || wStatus === 'running');
+ container.classList.toggle('rate-limited', isRateLimited);
+ }
+}
+
+function _workerStatusLabel(status, worker) {
+ if (status === 'not_configured') return 'Not configured';
+ if (status === 'paused') return worker.yield_reason === 'downloads' ? 'Yielding' : 'Paused';
+ if (status === 'idle') return 'Idle';
+ if (status === 'running') return 'Running';
+ return 'Stopped';
+}
+
+function _buildBudgetBar(budget) {
+ const pct = Math.min(100, Math.round((budget.used / budget.limit) * 100));
+ const cls = budget.exhausted ? 'exhausted' : pct > 80 ? 'high' : '';
+ return ``;
+}
+
+function _buildRateLimitBadge(d) {
+ const mins = Math.ceil((d.rl_remaining || 0) / 60);
+ const text = mins > 60 ? `${Math.floor(mins / 60)}h ${mins % 60}m` : `${mins}m`;
+ return `${value.toFixed(0)}calls/min
+ ${worker.calls_1h || 0}last hour
+ ${(worker.calls_24h || 0).toLocaleString()}24h
+ RATE LIMITED${text}
`;
+}
+
+function _buildGaugeSVG(svc, value, max) {
+ const { size, cx, cy, r, stroke, startAngle, totalArc } = _G;
+ const label = _RATE_GAUGE_LABELS[svc] || svc;
+ const accent = _RATE_GAUGE_COLORS[svc] || '#888';
+ const pct = Math.min(value / max, 1);
+ const endAngle = startAngle + pct * totalArc;
+ const arcEnd = startAngle + totalArc;
+ const glowId = `glow-${svc}`;
+
+ // Endpoint dot position
+ const dot = pct > 0 ? _gPt(endAngle, r) : null;
+
+ // Gradient ID for the colored arc
+ const gradId = `grad-${svc}`;
+
+ const color = pct > 0.8 ? '#ef4444' : pct > 0.6 ? '#eab308' : accent;
+
+ return `
+
+ `;
+}
+
+function _updateGauge(container, value, max, svc) {
+ const { r, stroke, startAngle, totalArc } = _G;
+ const accent = _RATE_GAUGE_COLORS[svc] || '#888';
+ const pct = Math.min(value / max, 1);
+ const endAngle = startAngle + pct * totalArc;
+ const color = pct > 0.8 ? '#ef4444' : pct > 0.6 ? '#eab308' : accent;
+
+ // Update center value
+ const valText = container.querySelector('.gauge-value');
+ if (valText) valText.textContent = Math.round(value);
+
+ // Update active arc
+ const activeArc = container.querySelector('.gauge-active-arc');
+ if (pct > 0) {
+ const d = _gArc(startAngle, endAngle);
+ if (activeArc) {
+ activeArc.setAttribute('d', d);
+ activeArc.setAttribute('stroke', color);
+ activeArc.style.filter = `drop-shadow(0 0 6px ${color}60)`;
+ } else {
+ // Rebuild the whole gauge when transitioning from 0 to active
+ container.innerHTML = _buildGaugeSVG(svc, value, max);
+ return;
+ }
+ } else if (activeArc) {
+ activeArc.remove();
+ // Also remove dots
+ container.querySelectorAll('.gauge-dot').forEach(d => d.remove());
+ const innerDot = container.querySelector('.gauge-dot + circle');
+ if (innerDot) innerDot.remove();
+ return;
+ }
+
+ // Update endpoint dot
+ const gaugeDot = container.querySelector('.gauge-dot');
+ if (pct > 0 && gaugeDot) {
+ const dot = _gPt(endAngle, r);
+ gaugeDot.setAttribute('cx', dot.x);
+ gaugeDot.setAttribute('cy', dot.y);
+ gaugeDot.setAttribute('fill', color);
+ gaugeDot.style.filter = `drop-shadow(0 0 4px ${color}80)`;
+ const inner = gaugeDot.nextElementSibling;
+ if (inner && inner.tagName === 'circle') {
+ inner.setAttribute('cx', dot.x);
+ inner.setAttribute('cy', dot.y);
+ }
+ }
+}
+
+// ── Rate Monitor Detail Modal ──
+
+let _rateModalService = null;
+let _rateModalInterval = null;
+
+function _openRateModal(serviceKey) {
+ _rateModalService = serviceKey;
+ const label = _RATE_GAUGE_LABELS[serviceKey] || serviceKey;
+ const accent = _RATE_GAUGE_COLORS[serviceKey] || '#888';
+
+ let overlay = document.getElementById('rate-modal-overlay');
+ if (overlay) overlay.remove();
+
+ overlay = document.createElement('div');
+ overlay.id = 'rate-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) _closeRateModal(); };
+
+ const isSpotify = serviceKey === 'spotify';
+ const currentData = _rateMonitorState[serviceKey] || {};
+
+ overlay.innerHTML = `
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ // Fetch main history + per-endpoint histories for Spotify
+ const historyPromises = [
+ fetch(`/api/rate-monitor/history/${serviceKey}`).then(r => r.json())
+ ];
+ if (isSpotify) {
+ const activeEps = Object.keys(_rateMonitorState.spotify?.endpoints || {});
+ for (const ep of activeEps) {
+ historyPromises.push(
+ fetch(`/api/rate-monitor/history/spotify:${ep}`).then(r => r.json()).catch(() => null)
+ );
+ }
+ }
+ Promise.all(historyPromises).then(results => {
+ const main = results[0];
+ const epHistories = isSpotify ? results.slice(1).filter(Boolean) : [];
+ _renderRateChart(main.history || [], main.rate_limit || 60, accent, epHistories);
+ }).catch(() => { });
+
+ if (isSpotify) {
+ _updateSpotifyEndpoints();
+ _rateModalInterval = setInterval(_updateSpotifyEndpoints, 1000);
+ }
+}
+
+function _closeRateModal() {
+ const overlay = document.getElementById('rate-modal-overlay');
+ if (overlay) overlay.remove();
+ if (_rateModalInterval) { clearInterval(_rateModalInterval); _rateModalInterval = null; }
+ _rateModalService = null;
+}
+
+function _renderRateChart(history, rateLimit, accent, epHistories = []) {
+ const canvas = document.getElementById('rate-modal-chart');
+ if (!canvas) return;
+
+ // HiDPI support
+ const dpr = window.devicePixelRatio || 1;
+ const W = 700, H = 280;
+ canvas.width = W * dpr;
+ canvas.height = H * dpr;
+ canvas.style.width = W + 'px';
+ canvas.style.height = H + 'px';
+ const ctx = canvas.getContext('2d');
+ ctx.scale(dpr, dpr);
+
+ const pad = { top: 24, right: 24, bottom: 36, left: 50 };
+ const plotW = W - pad.left - pad.right;
+ const plotH = H - pad.top - pad.bottom;
+
+ ctx.clearRect(0, 0, W, H);
+
+ // Build data points
+ const now = Math.floor(Date.now() / 1000);
+ const start = now - 86400;
+ const points = [];
+
+ if (history.length > 0) {
+ const histMap = new Map(history.map(h => [h[0], h[1]]));
+ for (let t = start; t <= now; t += 300) {
+ const bucket = Math.floor(t / 60) * 60;
+ let sum = 0;
+ for (let m = bucket; m < bucket + 300; m += 60) sum += histMap.get(m) || 0;
+ points.push({ t, v: sum / 5 });
+ }
+ }
+
+ const maxVal = Math.max(rateLimit * 1.15, ...points.map(p => p.v), 1);
+
+ // Grid lines (horizontal)
+ ctx.strokeStyle = 'rgba(255,255,255,0.04)';
+ ctx.lineWidth = 1;
+ for (let i = 1; i <= 4; i++) {
+ const y = pad.top + plotH * (1 - i / 4);
+ ctx.beginPath();
+ ctx.moveTo(pad.left, y);
+ ctx.lineTo(pad.left + plotW, y);
+ ctx.stroke();
+ }
+
+ // Danger zone band
+ const dangerY = pad.top + plotH * (1 - rateLimit / maxVal);
+ const grad = ctx.createLinearGradient(0, pad.top, 0, dangerY);
+ grad.addColorStop(0, 'rgba(239, 68, 68, 0.08)');
+ grad.addColorStop(1, 'rgba(239, 68, 68, 0.02)');
+ ctx.fillStyle = grad;
+ ctx.fillRect(pad.left, pad.top, plotW, dangerY - pad.top);
+
+ // Rate limit line
+ ctx.strokeStyle = 'rgba(239, 68, 68, 0.5)';
+ ctx.setLineDash([8, 5]);
+ ctx.lineWidth = 1.5;
+ ctx.beginPath();
+ ctx.moveTo(pad.left, dangerY);
+ ctx.lineTo(pad.left + plotW, dangerY);
+ ctx.stroke();
+ ctx.setLineDash([]);
+
+ ctx.fillStyle = 'rgba(239, 68, 68, 0.6)';
+ ctx.font = '10px -apple-system, sans-serif';
+ ctx.textAlign = 'left';
+ ctx.fillText(`Rate limit: ${rateLimit}/min`, pad.left + 6, dangerY - 6);
+
+ // Draw area fill + line
+ if (points.length > 1) {
+ // Area gradient fill
+ const areaGrad = ctx.createLinearGradient(0, pad.top, 0, pad.top + plotH);
+ // Parse accent to rgba
+ areaGrad.addColorStop(0, accent + '30');
+ areaGrad.addColorStop(1, accent + '05');
+
+ ctx.beginPath();
+ points.forEach((p, i) => {
+ const x = pad.left + (i / (points.length - 1)) * plotW;
+ const y = pad.top + plotH * (1 - p.v / maxVal);
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ });
+ ctx.lineTo(pad.left + plotW, pad.top + plotH);
+ ctx.lineTo(pad.left, pad.top + plotH);
+ ctx.closePath();
+ ctx.fillStyle = areaGrad;
+ ctx.fill();
+
+ // Line
+ ctx.beginPath();
+ points.forEach((p, i) => {
+ const x = pad.left + (i / (points.length - 1)) * plotW;
+ const y = pad.top + plotH * (1 - p.v / maxVal);
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ });
+ ctx.strokeStyle = accent;
+ ctx.lineWidth = 2;
+ ctx.lineJoin = 'round';
+ ctx.stroke();
+
+ // Glow effect
+ ctx.shadowColor = accent;
+ ctx.shadowBlur = 8;
+ ctx.stroke();
+ ctx.shadowBlur = 0;
+ }
+
+ // Per-endpoint lines (Spotify breakdown)
+ const legendEl = document.getElementById('rate-modal-chart-legend');
+ if (epHistories.length > 0) {
+ const epColors = ['#1DB954', '#FF6B6B', '#4ECDC4', '#FFE66D', '#A78BFA', '#F97316', '#06B6D4', '#EC4899', '#F472B6', '#34D399'];
+ const legendItems = [];
+
+ epHistories.forEach((epData, idx) => {
+ if (!epData || !epData.history || epData.history.length === 0) return;
+ const epName = (epData.service || '').replace('spotify:', '').replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+ const color = epColors[idx % epColors.length];
+ legendItems.push({ name: epName, color });
+
+ const histMap = new Map(epData.history.map(h => [h[0], h[1]]));
+ const epPoints = [];
+ for (let t = start; t <= now; t += 300) {
+ const bucket = Math.floor(t / 60) * 60;
+ let sum = 0;
+ for (let m = bucket; m < bucket + 300; m += 60) sum += histMap.get(m) || 0;
+ epPoints.push({ t, v: sum / 5 });
+ }
+
+ if (epPoints.length > 1) {
+ ctx.beginPath();
+ epPoints.forEach((p, i) => {
+ const x = pad.left + (i / (epPoints.length - 1)) * plotW;
+ const y = pad.top + plotH * (1 - p.v / maxVal);
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ });
+ ctx.strokeStyle = color + 'BB';
+ ctx.lineWidth = 1.5;
+ ctx.lineJoin = 'round';
+ ctx.stroke();
+ }
+ });
+
+ // HTML legend below chart
+ if (legendEl && legendItems.length > 0) {
+ legendEl.innerHTML = legendItems.map(item =>
+ `${item.name}`
+ ).join('');
+ }
+ } else if (legendEl) {
+ legendEl.innerHTML = '';
+ }
+
+ // X-axis labels
+ ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ ctx.font = '10px -apple-system, sans-serif';
+ ctx.textAlign = 'center';
+ for (let i = 0; i <= 6; i++) {
+ const t = start + (86400 * i / 6);
+ const x = pad.left + (i / 6) * plotW;
+ const d = new Date(t * 1000);
+ const hr = d.getHours();
+ const label = hr === 0 ? '12am' : hr < 12 ? `${hr}am` : hr === 12 ? '12pm' : `${hr - 12}pm`;
+ ctx.fillText(label, x, H - 10);
+ // Subtle vertical grid
+ ctx.strokeStyle = 'rgba(255,255,255,0.03)';
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ ctx.moveTo(x, pad.top);
+ ctx.lineTo(x, pad.top + plotH);
+ ctx.stroke();
+ }
+
+ // Y-axis labels
+ ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ ctx.textAlign = 'right';
+ ctx.font = '10px -apple-system, sans-serif';
+ for (let i = 0; i <= 4; i++) {
+ const v = maxVal * i / 4;
+ const y = pad.top + plotH * (1 - i / 4);
+ ctx.fillText(Math.round(v), pad.left - 8, y + 4);
+ }
+
+ // Empty state
+ if (points.length === 0) {
+ ctx.fillStyle = 'rgba(255,255,255,0.15)';
+ ctx.font = '13px -apple-system, sans-serif';
+ ctx.textAlign = 'center';
+ ctx.fillText('No call history yet — data populates as API calls are made', W / 2, H / 2);
+ }
+}
+
+function _updateSpotifyEndpoints() {
+ const container = document.getElementById('rate-modal-endpoints');
+ if (!container) return;
+ const endpoints = _rateMonitorState.spotify?.endpoints || {};
+ const entries = Object.entries(endpoints).sort((a, b) => b[1] - a[1]);
+
+ if (entries.length === 0) {
+ container.innerHTML = '
+
+
+
+
+
+
+
+ ${label}
+ ${currentData.cpm || 0} calls/min — limit ${currentData.limit || '?'}/min +
+
+ 24-Hour Call History
+
+
+
+
+ ${isSpotify ? 'Per-Endpoint Breakdown
' : ''}
+ No active Spotify endpoints — start an enrichment worker or search to see activity
';
+ return;
+ }
+
+ const limit = _rateMonitorState.spotify?.limit || 171;
+ container.innerHTML = entries.map(([ep, cpm]) => {
+ const pct = Math.min(cpm / limit * 100, 100);
+ const name = ep.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+ const color = pct > 80 ? '#ef4444' : pct > 60 ? '#eab308' : '#1DB954';
+ return `
+ ${name}
+
+ ${Math.round(cpm)}/min
+
`;
+ }).join('');
+}
+
+async function fetchAndUpdateSystemStats() {
+ if (socketConnected) return; // WebSocket handles this
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/system/stats');
+ if (!response.ok) return;
+
+ const data = await response.json();
+
+ // Update all stat cards
+ updateStatCard('active-downloads-card', data.active_downloads, 'Currently downloading');
+ updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed this session');
+ updateStatCard('download-speed-card', data.download_speed, 'Combined speed');
+ updateStatCard('active-syncs-card', data.active_syncs, 'Playlists syncing');
+ updateStatCard('uptime-card', data.uptime, 'Application runtime');
+ updateStatCard('memory-card', data.memory_usage, 'Current usage');
+
+ } catch (error) {
+ console.warn('Could not fetch system stats:', error);
+ }
+}
+
+function updateStatCard(cardId, value, subtitle) {
+ const card = document.getElementById(cardId);
+ if (card) {
+ const valueElement = card.querySelector('.stat-card-value');
+ const subtitleElement = card.querySelector('.stat-card-subtitle');
+
+ if (valueElement) {
+ valueElement.textContent = value;
+ }
+ if (subtitleElement) {
+ subtitleElement.textContent = subtitle;
+ }
+ }
+}
+
+async function fetchAndUpdateActivityFeed() {
+ if (socketConnected) return; // WebSocket handles this
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/activity/feed');
+ if (!response.ok) {
+ console.warn('Activity feed response not ok:', response.status, response.statusText);
+ return;
+ }
+
+ const data = await response.json();
+ console.log('Activity feed data received:', data);
+ updateActivityFeed(data.activities || []);
+
+ } catch (error) {
+ console.warn('Could not fetch activity feed:', error);
+ }
+}
+
+// Cache last feed signature to avoid unnecessary DOM rebuilds (prevents blink)
+let _lastActivityFeedSig = '';
+
+function updateActivityFeed(activities) {
+ const feedContainer = document.getElementById('dashboard-activity-feed');
+ if (!feedContainer) return;
+
+ if (activities.length === 0) {
+ if (_lastActivityFeedSig === 'empty') return;
+ _lastActivityFeedSig = 'empty';
+ feedContainer.innerHTML = `
+
+
+
+ `;
+ return;
+ }
+
+ const items = activities.slice(0, 5);
+ // Build signature from titles+subtitles to detect actual changes
+ const sig = items.map(a => a.title + a.subtitle).join('|');
+ const feedChanged = sig !== _lastActivityFeedSig;
+ _lastActivityFeedSig = sig;
+
+ if (!feedChanged) {
+ // Just update timestamps without rebuilding DOM
+ const timeEls = feedContainer.querySelectorAll('.activity-time');
+ items.forEach((activity, i) => {
+ if (timeEls[i]) timeEls[i].textContent = timeAgo(activity.time);
+ });
+ return;
+ }
+
+ // Full rebuild only when feed content actually changed
+ feedContainer.innerHTML = '';
+ items.forEach((activity, index) => {
+ const activityElement = document.createElement('div');
+ activityElement.className = 'activity-item';
+ activityElement.innerHTML = `
+
+
+
+ Just now
+
+
+ ${escapeHtml(activity.title)}
+${escapeHtml(activity.subtitle)}
+${timeAgo(activity.time)}
+ `; + feedContainer.appendChild(activityElement); + + if (index < items.length - 1) { + const separator = document.createElement('div'); + separator.className = 'activity-separator'; + feedContainer.appendChild(separator); + } + }); +} + +async function checkForActivityToasts() { + if (socketConnected) return; // WebSocket handles this (instant push) + if (document.hidden) return; // Skip polling when tab is not visible + try { + const response = await fetch('/api/activity/toasts'); + if (!response.ok) return; + + const data = await response.json(); + const toasts = data.toasts || []; + + toasts.forEach(activity => { + // Convert activity to toast type based on icon/title + let toastType = 'info'; + if (activity.icon === '✅' || activity.title.includes('Complete')) { + toastType = 'success'; + } else if (activity.icon === '❌' || activity.title.includes('Failed') || activity.title.includes('Error')) { + toastType = 'error'; + } else if (activity.icon === '🚫' || activity.title.includes('Cancelled')) { + toastType = 'warning'; + } + + // Show toast with activity info + showToast(`${activity.title}: ${activity.subtitle}`, toastType); + }); + + } catch (error) { + // Silently fail for toast checking to avoid spam + } +} + +// --- Watchlist Functions --- + +/** + * Toggle an artist's watchlist status + */ +async function toggleWatchlist(event, artistId, artistName) { + // Prevent event bubbling to parent card + event.stopPropagation(); + + const button = event.currentTarget; + const icon = button.querySelector('.watchlist-icon'); + const text = button.querySelector('.watchlist-text'); + + // Show loading state + const originalText = text.textContent; + text.textContent = 'Loading...'; + button.disabled = true; + + try { + // Check current status + const checkResponse = await fetch('/api/watchlist/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ artist_id: artistId }) + }); + + const checkData = await checkResponse.json(); + if (!checkData.success) { + throw new Error(checkData.error || 'Failed to check watchlist status'); + } + + const isWatching = checkData.is_watching; + + // Toggle watchlist status + const endpoint = isWatching ? '/api/watchlist/remove' : '/api/watchlist/add'; + const payload = isWatching ? + { artist_id: artistId } : + { artist_id: artistId, artist_name: artistName }; + + const response = await fetch(endpoint, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload) + }); + + const data = await response.json(); + if (!data.success) { + throw new Error(data.error || 'Failed to update watchlist'); + } + + // Update button appearance + const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn'); + if (isWatching) { + // Was watching, now removed + icon.textContent = '👁️'; + text.textContent = 'Add to Watchlist'; + button.classList.remove('watching'); + if (gearBtn) gearBtn.classList.add('hidden'); + console.log(`❌ Removed ${artistName} from watchlist`); + } else { + // Was not watching, now added + icon.textContent = '👁️'; + text.textContent = 'Watching...'; + button.classList.add('watching'); + if (gearBtn) gearBtn.classList.remove('hidden'); + console.log(`✅ Added ${artistName} to watchlist`); + } + + // Update dashboard watchlist count + updateWatchlistButtonCount(); + + } catch (error) { + console.error('Error toggling watchlist:', error); + text.textContent = originalText; + + // Show error feedback + const originalBackground = button.style.background; + button.style.background = 'rgba(255, 59, 48, 0.3)'; + setTimeout(() => { + button.style.background = originalBackground; + }, 2000); + } finally { + button.disabled = false; + } +} + +/** + * Update the watchlist button count on dashboard + */ +async function updateWatchlistButtonCount() { + if (document.hidden) return; // Skip polling when tab is not visible + if (socketConnected) return; // WebSocket is pushing updates — skip HTTP poll + try { + const response = await fetch('/api/watchlist/count'); + const data = await response.json(); + + if (data.success) { + _updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count); + // Update sidebar nav badge + const wlNavBadge = document.getElementById('watchlist-nav-badge'); + if (wlNavBadge) { + wlNavBadge.textContent = data.count; + wlNavBadge.classList.toggle('hidden', data.count === 0); + } + const watchlistButton = document.getElementById('watchlist-button'); + if (watchlistButton) { + const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : ''; + if (countdownText) { + watchlistButton.title = `Next auto-scan in ${countdownText}`; + } + } + } + } catch (error) { + console.error('Error updating watchlist count:', error); + } +} + +/** + * Check and update watchlist status for all visible artist cards + */ +async function updateArtistCardWatchlistStatus() { + const artistCards = document.querySelectorAll('.artist-card'); + const artistIds = []; + for (const card of artistCards) { + const artistId = card.dataset.artistId; + if (artistId) artistIds.push(artistId); + } + if (!artistIds.length) return; + + try { + const response = await fetch('/api/watchlist/check-batch', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ artist_ids: artistIds }) + }); + + const data = await response.json(); + if (data.success && data.results) { + for (const card of artistCards) { + const artistId = card.dataset.artistId; + if (!artistId) continue; + + const button = card.querySelector('.watchlist-toggle-btn'); + if (!button) continue; + const icon = button.querySelector('.watchlist-icon'); + const text = button.querySelector('.watchlist-text'); + + const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn'); + if (data.results[artistId]) { + if (icon) icon.textContent = '👁️'; + if (text) text.textContent = 'Watching...'; + button.classList.add('watching'); + if (gearBtn) gearBtn.classList.remove('hidden'); + } else { + if (icon) icon.textContent = '👁️'; + if (text) text.textContent = 'Add to Watchlist'; + button.classList.remove('watching'); + if (gearBtn) gearBtn.classList.add('hidden'); + } + } + } + } catch (error) { + console.error('Error batch checking watchlist status:', error); + } +} + +/** + * Initialize/refresh the watchlist sidebar page + */ +async function initializeWatchlistPage() { + try { + const emptyEl = document.getElementById('watchlist-page-empty'); + const gridEl = document.getElementById('watchlist-artists-list'); + const countEl = document.getElementById('watchlist-page-count'); + const overrideBanner = document.getElementById('watchlist-page-override-banner'); + + // Fetch count, artists, scan status, global config in parallel + const [countRes, artistsRes, statusRes, globalRes] = await Promise.all([ + fetch('/api/watchlist/count').then(r => r.json()), + fetch('/api/watchlist/artists').then(r => r.json()), + fetch('/api/watchlist/scan/status').then(r => r.json()), + fetch('/api/watchlist/global-config').then(r => r.json()).catch(() => ({ success: false })), + ]); + + const count = countRes.success ? countRes.count : 0; + const artists = artistsRes.success ? artistsRes.artists : []; + const scanStatus = statusRes.success ? statusRes.status : 'idle'; + const globalOverrideActive = globalRes.success && globalRes.config && globalRes.config.global_override_enabled; + + // Update count + if (countEl) countEl.textContent = `${count} artist${count !== 1 ? 's' : ''}`; + + // Update nav badge + const navBadge = document.getElementById('watchlist-nav-badge'); + if (navBadge) { + navBadge.textContent = count; + navBadge.classList.toggle('hidden', count === 0); + } + + // Empty state + if (count === 0) { + if (emptyEl) emptyEl.style.display = ''; + if (gridEl) gridEl.style.display = 'none'; + watchlistPageState.isInitialized = true; + return; + } + if (emptyEl) emptyEl.style.display = 'none'; + if (gridEl) gridEl.style.display = ''; + + // Store artists for sorting + watchlistPageState.artists = artists; + + // Last scan summary strip + const scanStrip = document.getElementById('watchlist-last-scan-strip'); + const scanText = document.getElementById('watchlist-last-scan-text'); + if (scanStrip && scanText && statusRes.completed_at && statusRes.summary) { + const completedDate = new Date(statusRes.completed_at); + const ago = _formatTimeAgo(completedDate); + const found = statusRes.summary.new_tracks_found || 0; + const added = statusRes.summary.tracks_added_to_wishlist || 0; + scanText.textContent = `Last scan: ${ago} — ${found} new track${found !== 1 ? 's' : ''} found, ${added} added to wishlist`; + scanStrip.style.display = ''; + } else if (scanStrip) { + scanStrip.style.display = 'none'; + } + + // Global override banner + if (overrideBanner) overrideBanner.style.display = globalOverrideActive ? '' : 'none'; + const settingsBtn = document.getElementById('watchlist-page-settings-btn'); + if (settingsBtn) { + settingsBtn.classList.toggle('watchlist-global-settings-active', globalOverrideActive); + settingsBtn.innerHTML = ` ${globalOverrideActive ? 'Global Override ON' : 'Global Settings'}`; + } + + // Render artist cards + if (gridEl) { + gridEl.innerHTML = artists.map(artist => { + const pills = []; + if (artist.include_albums) pills.push('Albums'); + if (artist.include_eps) pills.push('EPs'); + if (artist.include_singles) pills.push('Singles'); + if (artist.include_live) pills.push('Live'); + if (artist.include_remixes) pills.push('Remixes'); + if (artist.include_acoustic) pills.push('Acoustic'); + if (artist.include_compilations) pills.push('Compilations'); + const sourceBadges = []; + if (artist.spotify_artist_id) sourceBadges.push('Spotify'); + if (artist.itunes_artist_id) sourceBadges.push('iTunes'); + if (artist.deezer_artist_id) sourceBadges.push('Deezer'); + if (artist.discogs_artist_id) sourceBadges.push('Discogs'); + const artistPrimaryId = artist.spotify_artist_id || artist.itunes_artist_id || artist.deezer_artist_id || artist.discogs_artist_id; + return ` +
+
+
+
+ `;
+ }).join('');
+
+ // Wire up gear buttons
+ gridEl.querySelectorAll('.watchlist-card-gear').forEach(button => {
+ button.addEventListener('click', () => {
+ openWatchlistArtistConfigModal(button.getAttribute('data-artist-id'), button.getAttribute('data-artist-name'));
+ });
+ });
+
+ // Wire up artist card clicks
+ gridEl.querySelectorAll('.watchlist-artist-card').forEach(item => {
+ item.addEventListener('click', (e) => {
+ if (e.target.closest('.watchlist-card-gear') || e.target.closest('.watchlist-card-checkbox')) return;
+ const artistId = item.getAttribute('data-artist-id');
+ const artistName = item.querySelector('.watchlist-card-name').textContent;
+ openWatchlistArtistDetailView(artistId, artistName);
+ });
+ });
+ }
+
+ // Scan status
+ const scanStatusEl = document.getElementById('watchlist-scan-status');
+ const liveActivityEl = document.getElementById('watchlist-live-activity');
+ const scanBtn = document.getElementById('scan-watchlist-btn');
+ const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+
+ if (scanStatus === 'scanning') {
+ if (scanStatusEl) scanStatusEl.style.display = '';
+ if (liveActivityEl) liveActivityEl.style.display = 'flex';
+ if (scanBtn) { scanBtn.disabled = true; scanBtn.classList.add('btn-processing'); scanBtn.innerHTML = ' Scanning...'; }
+ if (cancelBtn) cancelBtn.style.display = '';
+ pollWatchlistScanStatus();
+ } else {
+ if (scanStatusEl && statusRes.summary) {
+ scanStatusEl.style.display = '';
+ const summaryEl = document.getElementById('watchlist-page-scan-summary');
+ if (summaryEl) {
+ summaryEl.style.display = '';
+ summaryEl.innerHTML = `Artists: ${statusRes.summary.total_artists || 0} • New tracks: ${statusRes.summary.new_tracks_found || 0} • Added to wishlist: ${statusRes.summary.tracks_added_to_wishlist || 0}`;
+ }
+ }
+ }
+
+ // Start countdown timer
+ const nextRunSeconds = countRes.next_run_in_seconds || 0;
+ startWatchlistCountdownTimer(nextRunSeconds);
+
+ watchlistPageState.isInitialized = true;
+
+ } catch (error) {
+ console.error('Error initializing watchlist page:', error);
+ showToast('Failed to load watchlist', 'error');
+ }
+}
+
+/**
+ * Initialize/refresh the wishlist sidebar page
+ */
+async function initializeWishlistPage() {
+ try {
+ const emptyEl = document.getElementById('wishlist-page-empty');
+ const nebulaEl = document.getElementById('wishlist-nebula');
+ const countEl = document.getElementById('wishlist-page-count');
+ const tracksSection = document.getElementById('wishlist-category-tracks');
+ const statsStrip = document.getElementById('wishlist-stats-strip');
+
+ const [statsRes, cycleRes, albumRes, singleRes, watchlistRes] = await Promise.all([
+ fetch('/api/wishlist/stats').then(r => r.json()),
+ fetch('/api/wishlist/cycle').then(r => r.json()),
+ fetch('/api/wishlist/tracks?category=albums').then(r => r.json()),
+ fetch('/api/wishlist/tracks?category=singles').then(r => r.json()),
+ fetch('/api/watchlist/artists').then(r => r.json()).catch(() => ({ success: false })),
+ ]);
+
+ // Build artist name → image URL map from watchlist
+ const _artistImageMap = new Map();
+ if (watchlistRes.success && watchlistRes.artists) {
+ for (const wa of watchlistRes.artists) {
+ if (wa.artist_name && wa.image_url) _artistImageMap.set(wa.artist_name.toLowerCase(), wa.image_url);
+ }
+ }
+
+ const { singles = 0, albums = 0, total = 0 } = statsRes;
+ const currentCycle = cycleRes.cycle || 'albums';
+
+ if (countEl) countEl.textContent = `${total} track${total !== 1 ? 's' : ''}`;
+ const navBadge = document.getElementById('wishlist-nav-badge');
+ if (navBadge) { navBadge.textContent = total; navBadge.classList.toggle('hidden', total === 0); }
+
+ const statAlbums = document.getElementById('wishlist-stat-albums');
+ const statSingles = document.getElementById('wishlist-stat-singles');
+ const statCycle = document.getElementById('wishlist-stat-cycle');
+ if (statAlbums) statAlbums.textContent = albums;
+ if (statSingles) statSingles.textContent = singles;
+ if (statCycle) statCycle.textContent = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
+
+ if (total === 0) {
+ if (emptyEl) emptyEl.style.display = '';
+ if (nebulaEl) nebulaEl.style.display = 'none';
+ if (tracksSection) tracksSection.style.display = 'none';
+ if (statsStrip) statsStrip.style.display = 'none';
+ wishlistPageState.isInitialized = true;
+ return;
+ }
+ if (emptyEl) emptyEl.style.display = 'none';
+ if (nebulaEl) nebulaEl.style.display = '';
+ if (tracksSection) tracksSection.style.display = 'none';
+ if (statsStrip) statsStrip.style.display = '';
+
+ _renderWishlistNebula(albumRes.tracks || [], singleRes.tracks || [], _artistImageMap, currentCycle);
+ startWishlistCountdownTimer(currentCycle, statsRes.next_run_in_seconds || 0);
+
+ // Live processing: check if wishlist download is active and start polling
+ _startNebulaLivePolling(currentCycle, _artistImageMap);
+
+ wishlistPageState.isInitialized = true;
+
+ } catch (error) {
+ console.error('Error initializing wishlist page:', error);
+ showToast('Failed to load wishlist', 'error');
+ }
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ WISHLIST NEBULA — Artist orbs with album/single satellites
+ ═══════════════════════════════════════════════════════════════════ */
+
+function _renderWishlistNebula(albumTracks, singleTracks, artistImageMap, currentCycle) {
+ const field = document.getElementById('wl-nebula-field');
+ if (!field) return;
+ artistImageMap = artistImageMap || new Map();
+
+ const artistMap = new Map();
+ function _parse(track, type) {
+ let sd = track.spotify_data;
+ if (typeof sd === 'string') { try { sd = JSON.parse(sd); } catch (e) { return null; } }
+ if (!sd) return null;
+ const raw = sd.album;
+ const albumName = (typeof raw === 'string' ? raw : raw?.name) || 'Unknown';
+ const albumImage = (typeof raw === 'object' && raw?.images?.[0]?.url) || '';
+ let artist = 'Unknown Artist';
+ if (sd.artists?.[0]?.name) artist = sd.artists[0].name;
+ else if (typeof sd.artists?.[0] === 'string') artist = sd.artists[0];
+ return { track: sd.name || 'Unknown', artist, album: albumName, image: albumImage, type, id: track.spotify_track_id || track.id || '' };
+ }
+
+ for (const t of albumTracks) { const p = _parse(t, 'album'); if (p) { if (!artistMap.has(p.artist)) artistMap.set(p.artist, { albums: new Map(), singles: [] }); const a = artistMap.get(p.artist); if (!a.albums.has(p.album)) a.albums.set(p.album, { image: p.image, tracks: [] }); a.albums.get(p.album).tracks.push(p); } }
+ for (const t of singleTracks) { const p = _parse(t, 'single'); if (p) { if (!artistMap.has(p.artist)) artistMap.set(p.artist, { albums: new Map(), singles: [] }); artistMap.get(p.artist).singles.push(p); } }
+
+ if (artistMap.size === 0) { field.innerHTML = '
+ ${artist.image_url ? `
` : '
+ 🎤
'}
+
+ ${escapeHtml(artist.artist_name)}
+
+
+ ${sourceBadges.length > 0 ? `${sourceBadges.join('')}
` : ''}
+ ${pills.length > 0 ? `${pills.join('')}
` : ''}
+ Your wishlist is empty
'; return; }
+
+ const sorted = [...artistMap.entries()].sort((a, b) => {
+ const ac = [...a[1].albums.values()].reduce((s, al) => s + al.tracks.length, 0) + a[1].singles.length;
+ const bc = [...b[1].albums.values()].reduce((s, al) => s + al.tracks.length, 0) + b[1].singles.length;
+ return bc - ac;
+ });
+
+ function _hue(n) { let h = 0; for (let i = 0; i < n.length; i++) h = n.charCodeAt(i) + ((h << 5) - h); return Math.abs(h) % 360; }
+
+ let html = '';
+ sorted.forEach(([name, data], idx) => {
+ const total = [...data.albums.values()].reduce((s, a) => s + a.tracks.length, 0) + data.singles.length;
+ const hasAlbums = data.albums.size > 0;
+ const hue = _hue(name);
+ const sz = total >= 10 ? 'orb-lg' : total >= 4 ? 'orb-md' : 'orb-sm';
+
+ // Enhancement 1: prefer watchlist artist photo over album cover
+ let img = artistImageMap.get(name.toLowerCase()) || '';
+ if (!img) { for (const [, ad] of data.albums) { if (ad.image) { img = ad.image; break; } } }
+ if (!img && data.singles.length) img = data.singles[0].image || '';
+
+ // Enhancement 3: pulse if this artist has albums and current cycle is albums
+ const pulseClass = (hasAlbums && currentCycle === 'albums') ? ' orb-pulse' : '';
+
+ // Enhancement 7: staggered entry animation
+ const delay = Math.min(idx * 60, 800);
+
+ html += ``;
+
+ // Enhancement 2: hover tooltip
+ html += `
`; // /expanded, /group
+ });
+
+ field.innerHTML = html;
+}
+
+// Enhancement 8: navigate to artist detail from wishlist
+function _navigateToArtistFromWishlist(artistName) {
+ // Try to find the artist in the library DB by searching
+ navigateToPage('artists');
+ setTimeout(() => {
+ const searchInput = document.querySelector('.artist-search-input, #artist-search');
+ if (searchInput) { searchInput.value = artistName; searchInput.dispatchEvent(new Event('input')); }
+ }, 300);
+}
+
+function _toggleAlbumTile(tileEl) {
+ const wasExpanded = tileEl.classList.contains('tile-expanded');
+ // Collapse all tiles in this group
+ tileEl.closest('.wl-album-fan')?.querySelectorAll('.wl-album-tile.tile-expanded').forEach(t => t.classList.remove('tile-expanded'));
+ if (!wasExpanded) tileEl.classList.add('tile-expanded');
+}
+
+function _toggleOrbExpand(el) {
+ const g = el.closest('.wl-orb-group');
+ if (!g) return;
+ const was = g.classList.contains('expanded');
+ document.querySelectorAll('.wl-orb-group.expanded').forEach(o => o.classList.remove('expanded'));
+ if (!was) g.classList.add('expanded');
+}
+
+async function _removeWishlistAlbum(albumName) {
+ if (!await showConfirmDialog({ title: 'Remove Album', message: `Remove all tracks from "${albumName}"?`, confirmText: 'Remove', destructive: true })) return;
+ try {
+ const res = await fetch('/api/wishlist/remove-album', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ album_name: albumName }) });
+ const data = await res.json();
+ if (data.success) { showToast(`Removed "${albumName}"`, 'success'); wishlistPageState.isInitialized = false; await initializeWishlistPage(); await updateWishlistCount(); }
+ else showToast(data.error || 'Failed', 'error');
+ } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+async function _removeWishlistTrack(trackId) {
+ try {
+ const res = await fetch('/api/wishlist/remove-track', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ spotify_track_id: trackId }) });
+ const data = await res.json();
+ if (data.success) {
+ showToast('Removed', 'success');
+ await updateWishlistCount();
+ // Re-render nebula to reflect removal
+ wishlistPageState.isInitialized = false;
+ await initializeWishlistPage();
+ }
+ } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+function _filterNebula() {
+ const q = (document.getElementById('wl-nebula-search')?.value || '').toLowerCase().trim();
+ document.querySelectorAll('.wl-orb-group').forEach(g => {
+ const a = (g.dataset.artist || '').toLowerCase();
+ const albums = [...g.querySelectorAll('.wl-satellite')].map(s => (s.dataset.album || '').toLowerCase());
+ const match = !q || a.includes(q) || albums.some(al => al.includes(q));
+ g.style.display = match ? '' : 'none';
+ if (!match) g.classList.remove('expanded');
+ });
+}
+
+async function _nebulaDownload() {
+ // Check if wishlist is already processing
+ try {
+ const statsResp = await fetch('/api/wishlist/stats');
+ if (statsResp.ok) {
+ const stats = await statsResp.json();
+ if (stats.is_auto_processing) {
+ // Navigate to downloads page so the user can see progress
+ navigateToPage('active-downloads');
+ showToast('Wishlist is currently being auto-processed', 'info');
+ return;
+ }
+ }
+ const procResp = await fetch('/api/active-processes');
+ if (procResp.ok) {
+ const procData = await procResp.json();
+ const wishlistBatch = (procData.active_processes || []).find(p => p.playlist_id === 'wishlist');
+ if (wishlistBatch) {
+ // Show the existing download modal
+ WishlistModalState.clearUserClosed();
+ const clientProcess = activeDownloadProcesses['wishlist'];
+ if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
+ clientProcess.modalElement.style.display = 'flex';
+ WishlistModalState.setVisible();
+ } else {
+ await rehydrateModal(wishlistBatch, true);
+ }
+ return;
+ }
+ }
+ } catch (e) {}
+
+ // No active process — show category choice
+ const choice = await _showNebulaDownloadChoice();
+ if (choice) await openDownloadMissingWishlistModal(choice);
+}
+
+function _showNebulaDownloadChoice() {
+ return new Promise((resolve) => {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.display = 'flex';
+ overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+
+ const albumCount = document.getElementById('wishlist-stat-albums')?.textContent || '0';
+ const singleCount = document.getElementById('wishlist-stat-singles')?.textContent || '0';
+
+ overlay.innerHTML = `
+ ${escapeHtml(name)}
${total} track${total !== 1 ? 's' : ''}
`;
+
+ html += `${total} track${total !== 1 ? 's' : ''}
`;
+ html += ``;
+ html += img ? `
` : `
`; // /orb
+
+ // Enhancement 8: clickable artist name → navigate to artist detail
+ html += `${escapeHtml(name.substring(0, 2).toUpperCase())}
`;
+ html += ``;
+
+ // Enhancement 5: album art ring (show up to 6 album covers around the orb)
+ const ringCovers = [];
+ for (const [, ad] of data.albums) { if (ad.image && ringCovers.length < 6) ringCovers.push(ad.image); }
+ for (const s of data.singles) { if (s.image && ringCovers.length < 6) ringCovers.push(s.image); }
+ if (ringCovers.length >= 3) {
+ html += ``;
+ ringCovers.forEach((url, i) => {
+ const angle = (360 / ringCovers.length) * i;
+ html += `
`;
+ });
+ html += `
`;
+ }
+
+ html += `${escapeHtml(name)}
`;
+ html += ``;
+
+ // Expanded content
+ html += ``;
+ if (data.albums.size > 0) {
+ html += `
`;
+ for (const [an, ad] of data.albums) {
+ const tileId = 'wl-tile-' + an.replace(/\W/g, '_') + '_' + idx;
+ html += `
`;
+ }
+ if (data.singles.length > 0) {
+ html += ``;
+ html += ``;
+ html += `${ad.tracks.length}`;
+ html += ``;
+ // Track list (hidden until tile clicked)
+ html += `
`;
+ }
+ html += `${ad.image ? `
` : `
`;
+ html += `💿
`}${escapeHtml(an)}
${ad.tracks.length} track${ad.tracks.length !== 1 ? 's' : ''}
`;
+ for (const tr of ad.tracks) {
+ html += `
`;
+ html += ``;
+ html += `${escapeHtml(tr.track)}`;
+ html += ``;
+ html += `
`;
+ }
+ html += ``;
+ for (const s of data.singles) {
+ html += `
`;
+ }
+ html += ``;
+ html += s.image ? `
` : `⭐`;
+ html += `
`;
+ }
+ html += `${escapeHtml(s.track)}
`;
+ html += ``;
+ html += `
+
+
+ `;
+
+ overlay.querySelector('#ndc-albums').onclick = () => { overlay.remove(); resolve('albums'); };
+ overlay.querySelector('#ndc-singles').onclick = () => { overlay.remove(); resolve('singles'); };
+ overlay.querySelector('#ndc-cancel').onclick = () => { overlay.remove(); resolve(null); };
+
+ document.addEventListener('keydown', function esc(e) {
+ if (e.key === 'Escape') { overlay.remove(); resolve(null); document.removeEventListener('keydown', esc); }
+ });
+
+ document.body.appendChild(overlay);
+ });
+}
+
+function _nebulaBack() {
+ const t = document.getElementById('wishlist-category-tracks');
+ const n = document.getElementById('wishlist-nebula');
+ if (t) t.style.display = 'none';
+ if (n) n.style.display = '';
+ window.selectedWishlistCategory = null;
+ wishlistPageState.isInitialized = false;
+ initializeWishlistPage();
+}
+
+// ── Live processing state for nebula ──
+let _nebulaLivePollInterval = null;
+let _nebulaLastTotal = null;
+
+function _startNebulaLivePolling(currentCycle, artistImageMap) {
+ _stopNebulaLivePolling();
+ _nebulaLastTotal = null;
+
+ _nebulaLivePollInterval = setInterval(async () => {
+ if (currentPage !== 'wishlist') { _stopNebulaLivePolling(); return; }
+
+ try {
+ // Use wishlist stats which has is_auto_processing flag
+ const statsResp = await fetch('/api/wishlist/stats');
+ if (!statsResp.ok) return;
+ const stats = await statsResp.json();
+ const isProcessing = stats.is_auto_processing || false;
+ const newTotal = stats.total || 0;
+
+ // Also check for manual wishlist download batches
+ let hasBatch = false;
+ try {
+ const procResp = await fetch('/api/active-processes');
+ if (procResp.ok) {
+ const procData = await procResp.json();
+ hasBatch = (procData.active_processes || []).some(p => p.playlist_id === 'wishlist');
+ }
+ } catch (e) {}
+
+ const active = isProcessing || hasBatch;
+ const nebulaField = document.getElementById('wl-nebula-field');
+ if (!nebulaField) return;
+
+ if (active) {
+ nebulaField.classList.add('nebula-processing');
+ document.querySelectorAll('.wl-orb-group').forEach(g => g.classList.add('orb-processing'));
+
+ // Tracks completed — re-render
+ if (_nebulaLastTotal !== null && newTotal < _nebulaLastTotal) {
+ const [albumRes, singleRes] = await Promise.all([
+ fetch('/api/wishlist/tracks?category=albums').then(r => r.json()),
+ fetch('/api/wishlist/tracks?category=singles').then(r => r.json()),
+ ]);
+ _renderWishlistNebula(albumRes.tracks || [], singleRes.tracks || [], artistImageMap, currentCycle);
+
+ const countEl = document.getElementById('wishlist-page-count');
+ if (countEl) countEl.textContent = `${newTotal} track${newTotal !== 1 ? 's' : ''}`;
+ const sa = document.getElementById('wishlist-stat-albums');
+ const ss = document.getElementById('wishlist-stat-singles');
+ if (sa) sa.textContent = stats.albums || 0;
+ if (ss) ss.textContent = stats.singles || 0;
+
+ // Re-add processing classes after re-render
+ document.getElementById('wl-nebula-field')?.classList.add('nebula-processing');
+ document.querySelectorAll('.wl-orb-group').forEach(g => g.classList.add('orb-processing'));
+ }
+ _nebulaLastTotal = newTotal;
+ } else {
+ nebulaField.classList.remove('nebula-processing');
+ document.querySelectorAll('.wl-orb-group.orb-processing').forEach(g => g.classList.remove('orb-processing'));
+
+ if (_nebulaLastTotal !== null) {
+ _nebulaLastTotal = null;
+ wishlistPageState.isInitialized = false;
+ await initializeWishlistPage();
+ await updateWishlistCount();
+ }
+ }
+ } catch (e) {}
+ }, 5000);
+}
+
+function _stopNebulaLivePolling() {
+ if (_nebulaLivePollInterval) {
+ clearInterval(_nebulaLivePollInterval);
+ _nebulaLivePollInterval = null;
+ }
+ _nebulaLastTotal = null;
+}
+
+/**
+ * Sort the watchlist artist grid by the selected criteria.
+ */
+function sortWatchlistArtists(sortBy) {
+ const grid = document.getElementById('watchlist-artists-list');
+ if (!grid) return;
+ const cards = Array.from(grid.querySelectorAll('.watchlist-artist-card'));
+ if (cards.length === 0) return;
+
+ cards.sort((a, b) => {
+ switch (sortBy) {
+ case 'name-asc':
+ return (a.dataset.artistName || '').localeCompare(b.dataset.artistName || '');
+ case 'name-desc':
+ return (b.dataset.artistName || '').localeCompare(a.dataset.artistName || '');
+ case 'scan-oldest': {
+ const aTime = a.dataset.lastScan ? new Date(a.dataset.lastScan).getTime() : 0;
+ const bTime = b.dataset.lastScan ? new Date(b.dataset.lastScan).getTime() : 0;
+ return aTime - bTime; // oldest first (never scanned = 0 = top)
+ }
+ case 'scan-newest': {
+ const aTime = a.dataset.lastScan ? new Date(a.dataset.lastScan).getTime() : 0;
+ const bTime = b.dataset.lastScan ? new Date(b.dataset.lastScan).getTime() : 0;
+ return bTime - aTime;
+ }
+ case 'added-newest': {
+ const aTime = a.dataset.added ? new Date(a.dataset.added).getTime() : 0;
+ const bTime = b.dataset.added ? new Date(b.dataset.added).getTime() : 0;
+ return bTime - aTime;
+ }
+ default:
+ return 0;
+ }
+ });
+
+ // Re-append in sorted order (preserves event listeners)
+ cards.forEach(card => grid.appendChild(card));
+}
+
+/**
+ * Filter wishlist tracks by search query within the active track list.
+ */
+function filterWishlistTracks() {
+ const input = document.getElementById('wishlist-track-search-input');
+ if (!input) return;
+ const query = input.value.toLowerCase().trim();
+ const tracksList = document.getElementById('wishlist-tracks-list');
+ if (!tracksList) return;
+
+ // For albums view: filter album cards by album name or track names within
+ const albumCards = tracksList.querySelectorAll('.wishlist-album-card');
+ if (albumCards.length > 0) {
+ albumCards.forEach(card => {
+ const albumHeader = card.querySelector('.wishlist-album-header');
+ const albumName = (albumHeader?.querySelector('.wishlist-album-name')?.textContent || '').toLowerCase();
+ const artistName = (albumHeader?.querySelector('.wishlist-album-artist')?.textContent || '').toLowerCase();
+ const tracks = card.querySelectorAll('.wishlist-album-track');
+ let albumHasMatch = !query || albumName.includes(query) || artistName.includes(query);
+
+ // Also check individual track names
+ if (!albumHasMatch && tracks.length > 0) {
+ tracks.forEach(track => {
+ const trackName = (track.textContent || '').toLowerCase();
+ if (trackName.includes(query)) albumHasMatch = true;
+ });
+ }
+
+ card.style.display = albumHasMatch ? '' : 'none';
+ });
+ return;
+ }
+
+ // For singles view: filter individual track rows
+ const trackRows = tracksList.querySelectorAll('.playlist-track-item-with-image, .playlist-track-item');
+ trackRows.forEach(row => {
+ const text = (row.textContent || '').toLowerCase();
+ row.style.display = (!query || text.includes(query)) ? '' : 'none';
+ });
+}
+
+/**
+ * Format a Date object as a relative time string (e.g. "2 hours ago")
+ */
+function _formatTimeAgo(date) {
+ const now = new Date();
+ const diffMs = now - date;
+ const diffMins = Math.floor(diffMs / 60000);
+ if (diffMins < 1) return 'just now';
+ if (diffMins < 60) return `${diffMins}m ago`;
+ const diffHours = Math.floor(diffMins / 60);
+ if (diffHours < 24) return `${diffHours}h ago`;
+ const diffDays = Math.floor(diffHours / 24);
+ if (diffDays === 1) return 'yesterday';
+ if (diffDays < 7) return `${diffDays}d ago`;
+ return date.toLocaleDateString();
+}
+
+/**
+ * Show watchlist modal (legacy — kept for backward compatibility)
+ */
+async function showWatchlistModal() {
+ try {
+ // Check if watchlist has any artists
+ const countResponse = await fetch('/api/watchlist/count');
+ const countData = await countResponse.json();
+
+ if (!countData.success) {
+ console.error('Error getting watchlist count:', countData.error);
+ return;
+ }
+
+ if (countData.count === 0) {
+ // Show empty state message
+ alert('Your watchlist is empty!\n\nAdd artists to your watchlist from the Artists page to monitor them for new releases.');
+ return;
+ }
+
+ // Get watchlist artists
+ const artistsResponse = await fetch('/api/watchlist/artists');
+ const artistsData = await artistsResponse.json();
+
+ if (!artistsData.success) {
+ console.error('Error getting watchlist artists:', artistsData.error);
+ return;
+ }
+
+ // Create modal if it doesn't exist
+ let modal = document.getElementById('watchlist-modal');
+ if (!modal) {
+ modal = document.createElement('div');
+ modal.id = 'watchlist-modal';
+ modal.className = 'modal-overlay';
+ document.body.appendChild(modal);
+ }
+
+ // Get scan status and global config
+ const statusResponse = await fetch('/api/watchlist/scan/status');
+ const statusData = await statusResponse.json();
+ const scanStatus = statusData.success ? statusData.status : 'idle';
+
+ let globalOverrideActive = false;
+ try {
+ const globalConfigResponse = await fetch('/api/watchlist/global-config');
+ const globalConfigData = await globalConfigResponse.json();
+ globalOverrideActive = globalConfigData.success && globalConfigData.config.global_override_enabled;
+ } catch (e) {
+ console.debug('Could not fetch global config:', e);
+ }
+
+ // Format countdown timer
+ const nextRunSeconds = countData.next_run_in_seconds || 0;
+ const countdownText = formatCountdownTime(nextRunSeconds);
+
+ // Build modal content
+ modal.innerHTML = `
+ Download Wishlist
+ +
+
+
+
+
+
+
+ `;
+
+ // Add event listeners for gear buttons
+ modal.querySelectorAll('.watchlist-card-gear').forEach(button => {
+ button.addEventListener('click', () => {
+ const artistId = button.getAttribute('data-artist-id');
+ const artistName = button.getAttribute('data-artist-name');
+ openWatchlistArtistConfigModal(artistId, artistName);
+ });
+ });
+
+ // Add click handlers to artist cards (except for gear button or checkbox)
+ modal.querySelectorAll('.watchlist-artist-card').forEach(item => {
+ item.addEventListener('click', (e) => {
+ if (e.target.closest('.watchlist-card-gear') || e.target.closest('.watchlist-card-checkbox')) {
+ return;
+ }
+
+ const artistId = item.getAttribute('data-artist-id');
+ const artistName = item.querySelector('.watchlist-card-name').textContent;
+
+ console.log(`🎵 Artist card clicked: ${artistName} (${artistId})`);
+ openWatchlistArtistDetailView(artistId, artistName);
+ });
+ });
+
+ // Show modal
+ modal.style.display = 'flex';
+
+ // Start countdown timer update interval
+ startWatchlistCountdownTimer(nextRunSeconds);
+
+ // Start polling for scan status if scanning
+ if (scanStatus === 'scanning') {
+ pollWatchlistScanStatus();
+ }
+
+ } catch (error) {
+ console.error('Error showing watchlist modal:', error);
+ }
+}
+
+function startWatchlistCountdownTimer(initialSeconds) {
+ // Clear any existing interval
+ if (watchlistCountdownInterval) {
+ clearInterval(watchlistCountdownInterval);
+ }
+
+ let remainingSeconds = initialSeconds;
+
+ watchlistCountdownInterval = setInterval(async () => {
+ remainingSeconds--;
+
+ if (remainingSeconds <= 0) {
+ // Timer expired, fetch fresh data
+ try {
+ const response = await fetch('/api/watchlist/count');
+ const data = await response.json();
+ remainingSeconds = data.next_run_in_seconds || 0;
+
+ const timerElement = document.getElementById('watchlist-next-auto-timer');
+ if (timerElement) {
+ const countdownText = formatCountdownTime(remainingSeconds);
+ timerElement.textContent = `Next Auto${countdownText ? ': ' + countdownText : ''}`;
+ }
+ } catch (error) {
+ console.debug('Error updating watchlist countdown:', error);
+ }
+ } else {
+ // Update the display
+ const timerElement = document.getElementById('watchlist-next-auto-timer');
+ if (timerElement) {
+ const countdownText = formatCountdownTime(remainingSeconds);
+ timerElement.textContent = `Next Auto${countdownText ? ': ' + countdownText : ''}`;
+ }
+ }
+ }, 1000); // Update every second
+}
+
+/**
+ * Close watchlist modal
+ */
+function closeWatchlistModal() {
+ // Stop countdown timer
+ if (watchlistCountdownInterval) {
+ clearInterval(watchlistCountdownInterval);
+ watchlistCountdownInterval = null;
+ }
+
+ const modal = document.getElementById('watchlist-modal');
+ if (modal) {
+ modal.style.display = 'none';
+ }
+}
+
+/**
+ * Populate the linked provider section in the watchlist config modal.
+ * Shows which Spotify/iTunes/Deezer artist is linked and allows changing it.
+ */
+function _populateLinkedProviderSection(artistId, artistName, spotifyId, itunesId, artistInfo, deezerId, discogsId) {
+ const section = document.getElementById('watchlist-linked-provider-section');
+ const content = document.getElementById('watchlist-linked-provider-content');
+ if (!section || !content) return;
+
+ section.style.display = '';
+
+ const sources = [
+ { key: 'spotify', label: 'Spotify', icon: '🟢', id: spotifyId || '', color: '#1db954' },
+ { key: 'itunes', label: 'Apple Music', icon: '🔴', id: itunesId || '', color: '#fc3c44' },
+ { key: 'deezer', label: 'Deezer', icon: '🟣', id: deezerId || '', color: '#a238ff' },
+ { key: 'discogs', label: 'Discogs', icon: '🟤', id: discogsId || '', color: '#b08968' },
+ ];
+
+ let html = '
+
+
+
+
+ ×
+ Watchlist
+
+ ${countData.count} artist${countData.count !== 1 ? 's' : ''}
+ Next Auto${countdownText ? ': ' + countdownText : ''}
+
+
+
+
+
+
+
+
+ ${statusData.summary ? `
+
+ ![Artist]()
+
+
+
+ Waiting...
+
+ ![Album]()
+
+
+
+ Waiting...
+
+
+ Current Track:
+ Waiting...
+
+ ✨ Recently Added:
+
+
+
+
+ Artists: ${statusData.summary.total_artists || 0}
+ •
+ New tracks: ${statusData.summary.new_tracks_found || 0}
+ •
+ Added to wishlist: ${statusData.summary.tracks_added_to_wishlist || 0}
+
+ ` : ''}
+
+
+
+
+
+
+
+
+
+ ${globalOverrideActive ? `
+
+ ` : ''}
+
+
+
+
+
+
+
+
+
+
+
+ ${artistsData.artists.map(artist => {
+ const pills = [];
+ if (artist.include_albums) pills.push('Albums');
+ if (artist.include_eps) pills.push('EPs');
+ if (artist.include_singles) pills.push('Singles');
+ if (artist.include_live) pills.push('Live');
+ if (artist.include_remixes) pills.push('Remixes');
+ if (artist.include_acoustic) pills.push('Acoustic');
+ if (artist.include_compilations) pills.push('Compilations');
+ const sourceBadges = [];
+ if (artist.spotify_artist_id) sourceBadges.push('Spotify');
+ if (artist.itunes_artist_id) sourceBadges.push('iTunes');
+ if (artist.deezer_artist_id) sourceBadges.push('Deezer');
+ if (artist.discogs_artist_id) sourceBadges.push('Discogs');
+ const artistPrimaryId = artist.spotify_artist_id || artist.itunes_artist_id || artist.deezer_artist_id || artist.discogs_artist_id;
+ return `
+
+
+
+
+
+
+
+
+ `}).join('')}
+
+ ${artist.image_url ? `
+
+ ` : `
+
+
+ 🎤
+ `}
+
+ ${escapeHtml(artist.artist_name)}
+
+
+ ${sourceBadges.length > 0 ? `${sourceBadges.join('')}
` : ''}
+ ${pills.length > 0 ? `${pills.join('')}
` : ''}
+ ';
+ for (const src of sources) {
+ const matched = !!src.id;
+ const shortId = src.id ? (src.id.length > 16 ? src.id.substring(0, 14) + '...' : src.id) : '';
+ html += `
+
';
+
+ // Per-source search panel (hidden, populated on Fix/Match click)
+ html += ``;
+
+ content.innerHTML = html;
+}
+
+/**
+ * Open per-source search panel for fixing a specific provider match.
+ */
+function _openSourceSearch(sourceKey, artistId, artistName) {
+ const panel = document.getElementById('wl-linked-search-panel');
+ if (!panel) return;
+ const labels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs' };
+ document.getElementById('wl-linked-search-title').textContent = `Search ${labels[sourceKey] || sourceKey}`;
+ const input = document.getElementById('wl-linked-search-input');
+ input.value = artistName;
+ document.getElementById('wl-linked-search-results').innerHTML = '';
+ panel.style.display = '';
+ panel.dataset.source = sourceKey;
+ panel.dataset.artistId = artistId;
+ panel.dataset.artistName = artistName;
+ input.focus();
+ input.select();
+
+ const doSearch = () => _searchSourceArtists(sourceKey, artistId);
+ document.getElementById('wl-linked-search-go').onclick = doSearch;
+ input.onkeydown = (e) => { if (e.key === 'Enter') doSearch(); };
+}
+
+async function _searchSourceArtists(sourceKey, watchlistArtistId) {
+ const input = document.getElementById('wl-linked-search-input');
+ const container = document.getElementById('wl-linked-search-results');
+ const query = input?.value?.trim();
+ if (!query || !container) return;
+
+ container.innerHTML = '
+
+ ${src.label}
+ ${matched
+ ? `${shortId}`
+ : 'Not matched'
+ }
+
+ ${matched ? `` : ''}
+
`;
+ }
+ html += 'Searching...
';
+
+ try {
+ const response = await fetch('/api/library/search-service', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ service: sourceKey, entity_type: 'artist', query })
+ });
+ const data = await response.json();
+ if (!data.success) throw new Error(data.error);
+
+ const results = data.results || [];
+ if (!results.length) {
+ container.innerHTML = 'No artists found
';
+ return;
+ }
+
+ let html = '';
+ for (const r of results) {
+ html += `
+ ${r.image ? `
` :
+ `
`;
+ }
+ container.innerHTML = html;
+
+ container.querySelectorAll('.watchlist-linked-search-result').forEach(el => {
+ el.querySelector('.watchlist-linked-select-btn').onclick = async (e) => {
+ e.stopPropagation();
+ await _linkSourceArtist(sourceKey, watchlistArtistId, el.dataset.id, el.dataset.name);
+ };
+ });
+ } catch (err) {
+ console.error(`Error searching ${sourceKey}:`, err);
+ container.innerHTML = '🎵
`}
+
+
+
+ ${escapeHtml(r.name)}
+
+ Search error
';
+ }
+}
+
+async function _linkSourceArtist(sourceKey, watchlistArtistId, newId, newName) {
+ try {
+ const response = await fetch(`/api/watchlist/artist/${watchlistArtistId}/link-provider`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ provider_id: newId, provider: sourceKey })
+ });
+ const data = await response.json();
+ if (!data.success) {
+ showToast(`Failed to link: ${data.error}`, 'error');
+ return;
+ }
+ showToast(`Linked to "${newName}" on ${sourceKey}`, 'success');
+ // Refresh the modal
+ const panel = document.getElementById('wl-linked-search-panel');
+ const artistName = panel?.dataset?.artistName || newName;
+ closeWatchlistArtistConfigModal();
+ setTimeout(() => openWatchlistArtistConfigModal(watchlistArtistId, artistName), 300);
+ } catch (err) {
+ showToast('Failed to link artist', 'error');
+ }
+}
+
+async function _clearSourceMatch(sourceKey, watchlistArtistId, artistName) {
+ try {
+ const response = await fetch(`/api/watchlist/artist/${watchlistArtistId}/link-provider`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ provider_id: '', provider: sourceKey })
+ });
+ const data = await response.json();
+ if (!data.success) {
+ showToast(`Failed to clear: ${data.error}`, 'error');
+ return;
+ }
+ showToast(`Cleared ${sourceKey} match`, 'success');
+ closeWatchlistArtistConfigModal();
+ setTimeout(() => openWatchlistArtistConfigModal(watchlistArtistId, artistName), 300);
+ } catch (err) {
+ showToast('Failed to clear match', 'error');
+ }
+}
+
+/**
+ * Open watchlist artist configuration modal
+ * @param {string} artistId - Spotify artist ID
+ * @param {string} artistName - Artist name
+ */
+async function openWatchlistArtistConfigModal(artistId, artistName) {
+ try {
+ console.log(`🎨 Opening config modal for artist: ${artistName} (${artistId})`);
+
+ // Fetch artist config and info
+ const response = await fetch(`/api/watchlist/artist/${artistId}/config`);
+ const data = await response.json();
+
+ if (!data.success) {
+ console.error('Error loading artist config:', data.error);
+ showToast(`Error loading artist configuration: ${data.error}`, 'error');
+ return;
+ }
+
+ const { config, artist, spotify_artist_id, itunes_artist_id, deezer_artist_id, discogs_artist_id, watchlist_name } = data;
+
+ // Populate linked provider section (use DB watchlist_name for mismatch comparison)
+ _populateLinkedProviderSection(artistId, watchlist_name || artistName, spotify_artist_id, itunes_artist_id, artist, deezer_artist_id, discogs_artist_id);
+
+ // Check if global override is active
+ let globalOverrideActive = false;
+ try {
+ const globalResponse = await fetch('/api/watchlist/global-config');
+ const globalData = await globalResponse.json();
+ globalOverrideActive = globalData.success && globalData.config.global_override_enabled;
+ } catch (e) {
+ console.debug('Could not check global config:', e);
+ }
+
+ // Generate hero section
+ const heroHTML = `
+ ${artist.image_url ? `
+
+
+ `;
+
+ // Populate hero section
+ const heroContainer = document.getElementById('watchlist-artist-config-hero');
+ if (heroContainer) {
+ heroContainer.innerHTML = heroHTML;
+ }
+
+ // Set checkbox states
+ document.getElementById('config-include-albums').checked = config.include_albums;
+ document.getElementById('config-include-eps').checked = config.include_eps;
+ document.getElementById('config-include-singles').checked = config.include_singles;
+ document.getElementById('config-include-live').checked = config.include_live || false;
+ document.getElementById('config-include-remixes').checked = config.include_remixes || false;
+ document.getElementById('config-include-acoustic').checked = config.include_acoustic || false;
+ document.getElementById('config-include-compilations').checked = config.include_compilations || false;
+ document.getElementById('config-include-instrumentals').checked = config.include_instrumentals || false;
+ document.getElementById('config-lookback-days').value = config.lookback_days != null ? String(config.lookback_days) : '';
+
+ // Populate metadata source selector
+ const sourceSelector = document.getElementById('config-metadata-source-selector');
+ if (sourceSelector) {
+ const sources = [
+ { key: 'spotify', label: 'Spotify', id: spotify_artist_id, color: '#1DB954' },
+ { key: 'deezer', label: 'Deezer', id: deezer_artist_id, color: '#A238FF' },
+ { key: 'itunes', label: 'Apple Music', id: itunes_artist_id, color: '#FC3C44' },
+ { key: 'discogs', label: 'Discogs', id: discogs_artist_id, color: '#333' },
+ ];
+ const globalSource = data.global_metadata_source || 'deezer';
+ const currentOverride = config.preferred_metadata_source;
+ const globalLabel = { spotify: 'Spotify', deezer: 'Deezer', itunes: 'Apple Music', discogs: 'Discogs' }[globalSource] || globalSource;
+
+ let html = ``;
+ for (const src of sources) {
+ if (!src.id) continue;
+ const isActive = currentOverride === src.key;
+ html += ``;
+ }
+ sourceSelector.innerHTML = html;
+ sourceSelector.querySelectorAll('.config-msrc-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ sourceSelector.querySelectorAll('.config-msrc-btn').forEach(b => {
+ b.classList.remove('active');
+ b.style.borderColor = '';
+ });
+ btn.classList.add('active');
+ const color = sources.find(s => s.key === btn.dataset.source)?.color;
+ if (color) btn.style.borderColor = color;
+ });
+ });
+ }
+
+ // Show global override notice if active
+ const existingNotice = document.querySelector('.global-override-notice');
+ if (existingNotice) existingNotice.remove();
+
+ if (globalOverrideActive) {
+ const notice = document.createElement('div');
+ notice.className = 'global-override-notice watchlist-global-override-banner';
+ notice.innerHTML = '⚠️Global override is active — these per-artist settings are currently ignored during scans.';
+ const configBody = document.querySelector('.watchlist-artist-config-body');
+ if (configBody) configBody.insertBefore(notice, configBody.firstChild);
+ }
+
+ // Store artist ID for saving
+ const modal = document.getElementById('watchlist-artist-config-modal');
+ if (modal) {
+ modal.setAttribute('data-artist-id', artistId);
+ }
+
+ // Show modal
+ const overlay = document.getElementById('watchlist-artist-config-modal-overlay');
+ if (overlay) {
+ overlay.classList.remove('hidden');
+ }
+
+ // Add save button handler
+ const saveBtn = document.getElementById('save-artist-config-btn');
+ if (saveBtn) {
+ // Remove old listeners
+ const newSaveBtn = saveBtn.cloneNode(true);
+ saveBtn.parentNode.replaceChild(newSaveBtn, saveBtn);
+
+ // Add new listener
+ newSaveBtn.addEventListener('click', () => saveWatchlistArtistConfig(artistId));
+ }
+
+ } catch (error) {
+ console.error('Error opening watchlist artist config modal:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Close watchlist artist configuration modal
+ */
+function closeWatchlistArtistConfigModal() {
+ const overlay = document.getElementById('watchlist-artist-config-modal-overlay');
+ if (overlay) {
+ overlay.classList.add('hidden');
+ }
+
+ // Clear hero content
+ const heroContainer = document.getElementById('watchlist-artist-config-hero');
+ if (heroContainer) {
+ heroContainer.innerHTML = '';
+ }
+
+ // Clear linked provider section
+ const linkedContent = document.getElementById('watchlist-linked-provider-content');
+ if (linkedContent) linkedContent.innerHTML = '';
+ const linkedSection = document.getElementById('watchlist-linked-provider-section');
+ if (linkedSection) linkedSection.style.display = 'none';
+}
+
+/**
+ * Open watchlist artist detail view (slides in from right)
+ */
+async function openWatchlistArtistDetailView(artistId, artistName) {
+ try {
+ const response = await fetch(`/api/watchlist/artist/${artistId}/config`);
+ const data = await response.json();
+
+ if (!data.success) {
+ showToast(`Error loading artist info: ${data.error}`, 'error');
+ return;
+ }
+
+ const { config, artist, recent_releases, spotify_artist_id, itunes_artist_id, deezer_artist_id, discogs_artist_id } = data;
+
+ // Remove existing overlay if any
+ const existing = document.querySelector('.watchlist-artist-detail-overlay');
+ if (existing) existing.remove();
+
+ const overlay = document.createElement('div');
+ overlay.className = 'watchlist-artist-detail-overlay';
+
+ // Build pills
+ const pills = [];
+ if (config.include_albums) pills.push('Albums');
+ if (config.include_eps) pills.push('EPs');
+ if (config.include_singles) pills.push('Singles');
+ if (config.include_live) pills.push('Live');
+ if (config.include_remixes) pills.push('Remixes');
+ if (config.include_acoustic) pills.push('Acoustic');
+ if (config.include_compilations) pills.push('Compilations');
+
+ // Build scan info
+ const scanTimeText = config.last_scan_timestamp ? formatRelativeScanTime(config.last_scan_timestamp) : 'Never scanned';
+ const dateAddedText = config.date_added ? `Added ${new Date(config.date_added).toLocaleDateString()}` : '';
+
+ // Build metadata tags (style, mood, label)
+ const metaTags = [];
+ if (artist.style) metaTags.push(`${escapeHtml(artist.style)}`);
+ if (artist.mood) metaTags.push(`${escapeHtml(artist.mood)}`);
+ if (artist.label) metaTags.push(`${escapeHtml(artist.label)}`);
+
+ overlay.innerHTML = `
+ ${artist.banner_url ? `
+ ${escapeHtml(artist.name)}
+
+
+ ${artist.genres && artist.genres.length > 0 ? `
+
+ ${formatNumber(artist.followers)}
+ Followers
+
+
+ ${artist.popularity}/100
+ Popularity
+
+
+ ${artist.genres.slice(0, 3).map(genre =>
+ `${escapeHtml(genre)}`
+ ).join('')}
+
+ ` : ''}
+
+ 
+
+
+ ` : ''}
+
+
+
+
+
+ `;
+
+ // Wire up event listeners (avoids inline onclick escaping issues)
+ overlay.querySelector('.watchlist-detail-back-btn').addEventListener('click', () => {
+ closeWatchlistArtistDetailView();
+ });
+
+ overlay.querySelector('.watchlist-detail-discog-action').addEventListener('click', () => {
+ // Use the ID matching the active metadata source
+ let discogId, source;
+ const activeSrc = (currentMusicSourceName || '').toLowerCase();
+ if (activeSrc.includes('spotify') && spotify_artist_id) {
+ discogId = spotify_artist_id; source = 'spotify';
+ } else if (activeSrc.includes('discogs') && discogs_artist_id) {
+ discogId = discogs_artist_id; source = 'discogs';
+ } else if (activeSrc.includes('deezer') && deezer_artist_id) {
+ discogId = deezer_artist_id; source = 'deezer';
+ } else if (itunes_artist_id) {
+ discogId = itunes_artist_id; source = 'itunes';
+ } else {
+ discogId = spotify_artist_id || discogs_artist_id || deezer_artist_id || itunes_artist_id;
+ source = spotify_artist_id ? 'spotify' : discogs_artist_id ? 'discogs' : deezer_artist_id ? 'deezer' : 'itunes';
+ }
+ if (discogId) {
+ // Close detail overlay and navigate to Artists page
+ closeWatchlistArtistDetailView();
+ // Navigate to Artists page and load discography
+ navigateToPage('artists');
+ setTimeout(() => {
+ selectArtistForDetail(
+ { id: discogId, name: artistName, image_url: artist.image_url || '' },
+ { source: source }
+ );
+ }, 200);
+ }
+ });
+
+ overlay.querySelector('.watchlist-detail-settings-action').addEventListener('click', () => {
+ // Remove overlay immediately so it doesn't block the config modal
+ const detailOverlay = document.querySelector('.watchlist-artist-detail-overlay');
+ if (detailOverlay) detailOverlay.remove();
+ openWatchlistArtistConfigModal(artistId, artistName);
+ });
+
+ overlay.querySelector('.watchlist-detail-remove-action').addEventListener('click', () => {
+ removeFromWatchlistModal(artistId, artistName);
+ });
+
+ // Append to body as a fixed overlay
+ document.body.appendChild(overlay);
+ // Trigger slide-in animation
+ requestAnimationFrame(() => overlay.classList.add('visible'));
+
+ } catch (error) {
+ console.error('Error opening artist detail view:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Close watchlist artist detail view (slides out)
+ */
+function closeWatchlistArtistDetailView() {
+ const overlay = document.querySelector('.watchlist-artist-detail-overlay');
+ if (overlay) {
+ overlay.classList.remove('visible');
+ overlay.addEventListener('transitionend', () => overlay.remove(), { once: true });
+ }
+}
+
+/**
+ * Open global watchlist settings modal
+ */
+async function openWatchlistGlobalSettingsModal() {
+ try {
+ const response = await fetch('/api/watchlist/global-config');
+ const data = await response.json();
+
+ if (!data.success) {
+ showToast(`Error loading global settings: ${data.error}`, 'error');
+ return;
+ }
+
+ const config = data.config;
+
+ // Populate checkboxes
+ document.getElementById('global-override-enabled').checked = config.global_override_enabled;
+ document.getElementById('global-include-albums').checked = config.include_albums;
+ document.getElementById('global-include-eps').checked = config.include_eps;
+ document.getElementById('global-include-singles').checked = config.include_singles;
+ document.getElementById('global-include-live').checked = config.include_live;
+ document.getElementById('global-include-remixes').checked = config.include_remixes;
+ document.getElementById('global-include-acoustic').checked = config.include_acoustic;
+ document.getElementById('global-include-compilations').checked = config.include_compilations;
+ document.getElementById('global-include-instrumentals').checked = config.include_instrumentals;
+ document.getElementById('global-exclude-terms').value = config.exclude_terms || '';
+
+ // Sync "Include Everything" checkbox
+ syncGlobalIncludeAllCheckbox();
+
+ // Update options visibility based on toggle state
+ toggleGlobalOverrideOptions();
+
+ // Update toggle label border
+ const toggleLabel = document.getElementById('global-override-toggle-label');
+ if (toggleLabel) {
+ toggleLabel.style.border = config.global_override_enabled
+ ? '2px solid rgba(29, 185, 84, 0.5)'
+ : '2px solid rgba(255, 255, 255, 0.1)';
+ }
+
+ // Show modal
+ const overlay = document.getElementById('watchlist-global-config-modal-overlay');
+ if (overlay) overlay.classList.remove('hidden');
+
+ } catch (error) {
+ console.error('Error opening global watchlist settings:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Close global watchlist settings modal
+ */
+function closeWatchlistGlobalSettingsModal() {
+ const overlay = document.getElementById('watchlist-global-config-modal-overlay');
+ if (overlay) overlay.classList.add('hidden');
+}
+
+/**
+ * Toggle global override options visibility
+ */
+function toggleGlobalOverrideOptions() {
+ const enabled = document.getElementById('global-override-enabled').checked;
+ const options = document.getElementById('global-override-options');
+ if (options) {
+ options.style.opacity = enabled ? '1' : '0.4';
+ options.style.pointerEvents = enabled ? 'auto' : 'none';
+ }
+
+ // Update toggle label border
+ const toggleLabel = document.getElementById('global-override-toggle-label');
+ if (toggleLabel) {
+ toggleLabel.style.border = enabled
+ ? '2px solid rgba(29, 185, 84, 0.5)'
+ : '2px solid rgba(255, 255, 255, 0.1)';
+ }
+}
+
+/**
+ * Toggle all global include checkboxes
+ */
+function toggleGlobalIncludeAll() {
+ const checked = document.getElementById('global-include-all').checked;
+ ['global-include-albums', 'global-include-eps', 'global-include-singles',
+ 'global-include-live', 'global-include-remixes', 'global-include-acoustic',
+ 'global-include-compilations', 'global-include-instrumentals'].forEach(id => {
+ const el = document.getElementById(id);
+ if (el) el.checked = checked;
+ });
+}
+
+/**
+ * Sync the "Include Everything" checkbox based on individual checkbox states
+ */
+function syncGlobalIncludeAllCheckbox() {
+ const allIds = ['global-include-albums', 'global-include-eps', 'global-include-singles',
+ 'global-include-live', 'global-include-remixes', 'global-include-acoustic',
+ 'global-include-compilations', 'global-include-instrumentals'];
+ const allChecked = allIds.every(id => {
+ const el = document.getElementById(id);
+ return el && el.checked;
+ });
+ const includeAllEl = document.getElementById('global-include-all');
+ if (includeAllEl) includeAllEl.checked = allChecked;
+}
+
+/**
+ * Save global watchlist configuration
+ */
+async function saveWatchlistGlobalConfig() {
+ try {
+ const globalOverrideEnabled = document.getElementById('global-override-enabled').checked;
+ const includeAlbums = document.getElementById('global-include-albums').checked;
+ const includeEps = document.getElementById('global-include-eps').checked;
+ const includeSingles = document.getElementById('global-include-singles').checked;
+ const includeLive = document.getElementById('global-include-live').checked;
+ const includeRemixes = document.getElementById('global-include-remixes').checked;
+ const includeAcoustic = document.getElementById('global-include-acoustic').checked;
+ const includeCompilations = document.getElementById('global-include-compilations').checked;
+ const includeInstrumentals = document.getElementById('global-include-instrumentals').checked;
+ const excludeTerms = (document.getElementById('global-exclude-terms').value || '').trim();
+
+ if (globalOverrideEnabled && !includeAlbums && !includeEps && !includeSingles) {
+ showToast('Please select at least one release type', 'error');
+ return;
+ }
+
+ const saveBtn = document.getElementById('save-global-config-btn');
+ if (saveBtn) {
+ saveBtn.disabled = true;
+ saveBtn.textContent = 'Saving...';
+ }
+
+ const response = await fetch('/api/watchlist/global-config', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ global_override_enabled: globalOverrideEnabled,
+ include_albums: includeAlbums,
+ include_eps: includeEps,
+ include_singles: includeSingles,
+ include_live: includeLive,
+ include_remixes: includeRemixes,
+ include_acoustic: includeAcoustic,
+ include_compilations: includeCompilations,
+ include_instrumentals: includeInstrumentals,
+ exclude_terms: excludeTerms,
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast('Global watchlist settings saved', 'success');
+ closeWatchlistGlobalSettingsModal();
+
+ // Refresh the watchlist page to update the grid
+ if (currentPage === 'watchlist') {
+ watchlistPageState.isInitialized = false;
+ await initializeWatchlistPage();
+ }
+ } else {
+ showToast(`Error: ${data.error}`, 'error');
+ }
+
+ } catch (error) {
+ console.error('Error saving global config:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ } finally {
+ const saveBtn = document.getElementById('save-global-config-btn');
+ if (saveBtn) {
+ saveBtn.disabled = false;
+ saveBtn.textContent = 'Save Global Settings';
+ }
+ }
+}
+
+/**
+ * Save watchlist artist configuration
+ * @param {string} artistId - Spotify artist ID
+ */
+async function saveWatchlistArtistConfig(artistId) {
+ try {
+ const includeAlbums = document.getElementById('config-include-albums').checked;
+ const includeEps = document.getElementById('config-include-eps').checked;
+ const includeSingles = document.getElementById('config-include-singles').checked;
+ const includeLive = document.getElementById('config-include-live').checked;
+ const includeRemixes = document.getElementById('config-include-remixes').checked;
+ const includeAcoustic = document.getElementById('config-include-acoustic').checked;
+ const includeCompilations = document.getElementById('config-include-compilations').checked;
+ const includeInstrumentals = document.getElementById('config-include-instrumentals').checked;
+ const lookbackDaysVal = document.getElementById('config-lookback-days').value;
+ const lookbackDays = lookbackDaysVal !== '' ? parseInt(lookbackDaysVal) : null;
+ const activeSourceBtn = document.querySelector('#config-metadata-source-selector .config-msrc-btn.active');
+ const preferredMetadataSource = activeSourceBtn ? (activeSourceBtn.dataset.source || null) : null;
+
+ // Validate at least one release type is selected
+ if (!includeAlbums && !includeEps && !includeSingles) {
+ showToast('Please select at least one release type', 'error');
+ return;
+ }
+
+ // Disable save button
+ const saveBtn = document.getElementById('save-artist-config-btn');
+ if (saveBtn) {
+ saveBtn.disabled = true;
+ saveBtn.textContent = 'Saving...';
+ }
+
+ // Send update to backend
+ const response = await fetch(`/api/watchlist/artist/${artistId}/config`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ include_albums: includeAlbums,
+ include_eps: includeEps,
+ include_singles: includeSingles,
+ include_live: includeLive,
+ include_remixes: includeRemixes,
+ include_acoustic: includeAcoustic,
+ include_compilations: includeCompilations,
+ include_instrumentals: includeInstrumentals,
+ lookback_days: lookbackDays,
+ preferred_metadata_source: preferredMetadataSource,
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast('Artist preferences saved successfully', 'success');
+ closeWatchlistArtistConfigModal();
+
+ // Refresh watchlist page if we're on it
+ if (currentPage === 'watchlist') {
+ watchlistPageState.isInitialized = false;
+ await initializeWatchlistPage();
+ }
+ } else {
+ showToast(`Error saving preferences: ${data.error}`, 'error');
+ }
+
+ } catch (error) {
+ console.error('Error saving watchlist artist config:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ } finally {
+ // Re-enable save button
+ const saveBtn = document.getElementById('save-artist-config-btn');
+ if (saveBtn) {
+ saveBtn.disabled = false;
+ saveBtn.textContent = 'Save Preferences';
+ }
+ }
+}
+
+/**
+ * Format large numbers with commas
+ * @param {number} num - Number to format
+ * @returns {string} Formatted number
+ */
+function formatNumber(num) {
+ if (!num) return '0';
+ return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+/**
+ * Format last scan timestamp as relative time
+ */
+function formatRelativeScanTime(isoString) {
+ if (!isoString) return 'Never scanned';
+ const diff = Date.now() - new Date(isoString).getTime();
+ const mins = Math.floor(diff / 60000);
+ if (mins < 1) return 'Scanned just now';
+ if (mins < 60) return `Scanned ${mins}m ago`;
+ const hrs = Math.floor(mins / 60);
+ if (hrs < 24) return `Scanned ${hrs}h ago`;
+ const days = Math.floor(hrs / 24);
+ if (days < 30) return `Scanned ${days}d ago`;
+ const months = Math.floor(days / 30);
+ return `Scanned ${months}mo ago`;
+}
+
+/**
+ * Filter watchlist artists based on search input
+ */
+function filterWatchlistArtists() {
+ const searchInput = document.getElementById('watchlist-search-input');
+ const artistsList = document.getElementById('watchlist-artists-list');
+
+ if (!searchInput || !artistsList) return;
+
+ const searchTerm = searchInput.value.toLowerCase().trim();
+ const artistItems = artistsList.querySelectorAll('.watchlist-artist-card');
+
+ artistItems.forEach(item => {
+ const artistName = item.getAttribute('data-artist-name');
+
+ if (!searchTerm || artistName.includes(searchTerm)) {
+ item.style.display = '';
+ } else {
+ item.style.display = 'none';
+ }
+ });
+
+ // Refresh batch bar in case visible selection changed
+ updateWatchlistBatchBar();
+}
+
+/**
+ * Start watchlist scan
+ */
+async function cancelWatchlistScan() {
+ try {
+ const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+ if (cancelBtn) {
+ cancelBtn.disabled = true;
+ cancelBtn.textContent = 'Cancelling...';
+ }
+
+ const response = await fetch('/api/watchlist/scan/cancel', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' }
+ });
+
+ const data = await response.json();
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to cancel scan');
+ }
+
+ showToast('Cancel request sent — scan will stop after current artist', 'info');
+
+ } catch (error) {
+ console.error('Error cancelling watchlist scan:', error);
+ showToast(`Error cancelling scan: ${error.message}`, 'error');
+ const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+ if (cancelBtn) {
+ cancelBtn.disabled = false;
+ cancelBtn.textContent = 'Cancel Scan';
+ }
+ }
+}
+
+async function startWatchlistScan() {
+ try {
+ const button = document.getElementById('scan-watchlist-btn');
+ button.disabled = true;
+ button.textContent = 'Starting scan...';
+ button.classList.add('btn-processing');
+
+ const response = await fetch('/api/watchlist/scan', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' }
+ });
+
+ const data = await response.json();
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to start scan');
+ }
+
+ button.textContent = 'Scanning...';
+
+ // Show cancel button
+ const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+ if (cancelBtn) {
+ cancelBtn.style.display = '';
+ cancelBtn.disabled = false;
+ cancelBtn.textContent = 'Cancel Scan';
+ }
+
+ // Show scan status
+ const statusDiv = document.getElementById('watchlist-scan-status');
+ if (statusDiv) {
+ statusDiv.style.display = 'flex';
+ }
+
+ // Start polling for updates
+ pollWatchlistScanStatus();
+
+ } catch (error) {
+ console.error('Error starting watchlist scan:', error);
+ const button = document.getElementById('scan-watchlist-btn');
+ button.disabled = false;
+ button.textContent = 'Scan for New Releases';
+ button.classList.remove('btn-processing');
+ alert(`Error starting scan: ${error.message}`);
+ }
+}
+
+/**
+ * Poll watchlist scan status
+ */
+function handleWatchlistScanData(data) {
+ const button = document.getElementById('scan-watchlist-btn');
+ const liveActivity = document.getElementById('watchlist-live-activity');
+
+ // Show/hide cancel button based on scan status
+ const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+ if (cancelBtn) {
+ cancelBtn.style.display = data.status === 'scanning' ? '' : 'none';
+ }
+
+ // Update live visual activity display
+ if (liveActivity && data.status === 'scanning') {
+ liveActivity.style.display = 'flex';
+
+ // Update artist image and name
+ const artistImg = document.getElementById('watchlist-artist-img');
+ const artistName = document.getElementById('watchlist-artist-name');
+ if (artistImg && data.current_artist_image_url) {
+ artistImg.src = data.current_artist_image_url;
+ artistImg.style.display = 'block';
+ }
+ if (artistName) {
+ artistName.textContent = data.current_artist_name || 'Processing...';
+ }
+
+ // Update album image and name
+ const albumImg = document.getElementById('watchlist-album-img');
+ const albumName = document.getElementById('watchlist-album-name');
+ if (albumImg && data.current_album_image_url) {
+ albumImg.src = data.current_album_image_url;
+ albumImg.style.display = 'block';
+ } else if (albumImg) {
+ albumImg.style.display = 'none';
+ }
+ if (albumName) {
+ albumName.textContent = data.current_album || (data.current_phase === 'fetching_discography' ? 'Fetching releases...' : 'Processing...');
+ }
+
+ // Update current track
+ const trackName = document.getElementById('watchlist-track-name');
+ if (trackName) {
+ trackName.textContent = data.current_track_name || (data.current_phase === 'fetching_discography' ? 'Fetching releases...' : 'Processing...');
+ }
+
+ // Update wishlist additions feed
+ const additionsFeed = document.getElementById('watchlist-additions-feed');
+ if (additionsFeed) {
+ if (data.recent_wishlist_additions && data.recent_wishlist_additions.length > 0) {
+ additionsFeed.innerHTML = data.recent_wishlist_additions.map(item => `
+
+ ${artist.image_url ? `` : ''}
+
+
+ ${artist.summary ? `
+
+
+ ${escapeHtml(artist.name)}
+ ${artist.followers || artist.popularity ? ` +
+ ${artist.followers ? `
+
+ ` : ''}
+ ${artist.genres && artist.genres.length > 0 ? `
+
+ ${formatNumber(artist.followers)}
+ Followers
+
` : ''}
+ ${artist.popularity ? `
+
+ ${artist.popularity}/100
+ Popularity
+
` : ''}
+
+ ${artist.genres.map(g => `${escapeHtml(g)}`).join('')}
+
+ ` : ''}
+
+
+ ` : ''}
+
+ ${metaTags.length > 0 ? `
+ About
+ ${escapeHtml(artist.summary)}
+
+
+ ` : ''}
+
+ ${recent_releases && recent_releases.length > 0 ? `
+ Info
+ ${metaTags.join('')}
+
+
+ ` : ''}
+
+ Recent Releases
+
+ ${recent_releases.map(r => `
+
+
+ ${r.album_cover_url ? `
` : ''}
+
+ `).join('')}
+
+ ${escapeHtml(r.album_name)}
+
+
+
+
+
+ Watchlist
+
+
+ ${dateAddedText ? `·` : ''}
+
+
+ ${pills.length > 0 ? pills.join('') : ''}
+
+
+
+
+
+
+
+ 
+
+ `).join('');
+ } else {
+ additionsFeed.innerHTML = '
+
+ ${item.track_name}
+ ${item.artist_name}
+ No tracks added yet...
';
+ }
+ }
+ } else if (liveActivity && data.status !== 'scanning') {
+ liveActivity.style.display = 'none';
+ }
+
+ if (data.status === 'completed') {
+ if (button) {
+ button.disabled = false;
+ button.textContent = 'Scan for New Releases';
+ button.classList.remove('btn-processing');
+ }
+
+ // Hide live activity
+ if (liveActivity) {
+ liveActivity.style.display = 'none';
+ }
+
+ // Show completion message in status div
+ const statusDiv = document.getElementById('watchlist-scan-status');
+ if (statusDiv && data.summary) {
+ const newTracks = data.summary.new_tracks_found || 0;
+ const addedTracks = data.summary.tracks_added_to_wishlist || 0;
+ const totalArtists = data.summary.total_artists || 0;
+ const successfulScans = data.summary.successful_scans || 0;
+
+ let completionMessage = `Scan completed: ${successfulScans}/${totalArtists} artists scanned`;
+ if (newTracks > 0) {
+ completionMessage += `, found ${newTracks} new track${newTracks !== 1 ? 's' : ''}`;
+ if (addedTracks > 0) {
+ completionMessage += `, added ${addedTracks} to wishlist`;
+ }
+ } else {
+ completionMessage += ', no new tracks found';
+ }
+
+ // Update the scan status display with completion message and summary
+ statusDiv.innerHTML = `
+
+
+
+ `;
+ }
+
+ // Update watchlist count
+ updateWatchlistButtonCount();
+
+ console.log('Watchlist scan completed:', data.summary);
+
+ } else if (data.status === 'cancelled') {
+ if (button) {
+ button.disabled = false;
+ button.textContent = 'Scan for New Releases';
+ button.classList.remove('btn-processing');
+ }
+
+ // Hide cancel button
+ const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+ if (cancelBtn) {
+ cancelBtn.style.display = 'none';
+ cancelBtn.disabled = false;
+ cancelBtn.textContent = 'Cancel Scan';
+ }
+
+ // Hide live activity
+ if (liveActivity) {
+ liveActivity.style.display = 'none';
+ }
+
+ // Show cancellation message
+ const statusDiv = document.getElementById('watchlist-scan-status');
+ if (statusDiv && data.summary) {
+ const scanned = data.summary.total_artists || 0;
+ const newTracks = data.summary.new_tracks_found || 0;
+ const addedTracks = data.summary.tracks_added_to_wishlist || 0;
+
+ statusDiv.innerHTML = `
+
+ Artists: ${totalArtists}
+ •
+ New tracks: ${newTracks}
+ •
+ Added to wishlist: ${addedTracks}
+
+
+
+
+ `;
+ }
+
+ // Update watchlist count
+ updateWatchlistButtonCount();
+
+ showToast('Watchlist scan cancelled', 'info');
+ console.log('Watchlist scan cancelled:', data.summary);
+
+ } else if (data.status === 'error') {
+ if (button) {
+ button.disabled = false;
+ button.textContent = 'Scan for New Releases';
+ button.classList.remove('btn-processing');
+ }
+
+ // Hide cancel button
+ const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+ if (cancelBtn) {
+ cancelBtn.style.display = 'none';
+ }
+
+ // Hide live activity
+ if (liveActivity) {
+ liveActivity.style.display = 'none';
+ }
+
+ console.error('Watchlist scan error:', data.error);
+ }
+}
+
+async function pollWatchlistScanStatus() {
+ if (socketConnected) return; // Phase 5: WS handles scan updates
+ try {
+ const response = await fetch('/api/watchlist/scan/status');
+ const data = await response.json();
+
+ if (data.success) {
+ handleWatchlistScanData(data);
+ if (data.status === 'completed' || data.status === 'error' || data.status === 'cancelled') {
+ return; // Stop polling
+ }
+ }
+
+ // Continue polling if still scanning
+ if (data.success && data.status === 'scanning') {
+ setTimeout(pollWatchlistScanStatus, 2000); // Poll every 2 seconds
+ }
+
+ } catch (error) {
+ console.error('Error polling watchlist scan status:', error);
+ }
+}
+
+/**
+ * Update similar artists for discovery feature
+ */
+async function updateSimilarArtists() {
+ try {
+ const button = document.getElementById('update-similar-artists-btn');
+ const scanButton = document.getElementById('scan-watchlist-btn');
+
+ button.disabled = true;
+ button.textContent = 'Updating...';
+ button.classList.add('btn-processing');
+ if (scanButton) scanButton.disabled = true;
+
+ const response = await fetch('/api/watchlist/update-similar-artists', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' }
+ });
+
+ const data = await response.json();
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to update similar artists');
+ }
+
+ showToast('Updating similar artists in background...', 'success');
+
+ // Poll for completion
+ pollSimilarArtistsUpdate();
+
+ } catch (error) {
+ console.error('Error updating similar artists:', error);
+ const button = document.getElementById('update-similar-artists-btn');
+ const scanButton = document.getElementById('scan-watchlist-btn');
+
+ button.disabled = false;
+ button.textContent = 'Update Similar Artists';
+ button.classList.remove('btn-processing');
+ if (scanButton) scanButton.disabled = false;
+
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Poll similar artists update status
+ */
+async function pollSimilarArtistsUpdate() {
+ try {
+ const response = await fetch('/api/watchlist/similar-artists-status');
+ const data = await response.json();
+
+ if (data.success) {
+ const button = document.getElementById('update-similar-artists-btn');
+ const scanButton = document.getElementById('scan-watchlist-btn');
+
+ if (data.status === 'completed') {
+ if (button) {
+ button.disabled = false;
+ button.textContent = 'Update Similar Artists';
+ button.classList.remove('btn-processing');
+ }
+ if (scanButton) scanButton.disabled = false;
+
+ showToast(`Updated similar artists for ${data.artists_processed || 0} artists!`, 'success');
+ return; // Stop polling
+
+ } else if (data.status === 'error') {
+ if (button) {
+ button.disabled = false;
+ button.textContent = 'Update Similar Artists';
+ button.classList.remove('btn-processing');
+ }
+ if (scanButton) scanButton.disabled = false;
+
+ showToast('Error updating similar artists', 'error');
+ return; // Stop polling
+ } else if (data.status === 'running') {
+ // Update button text with progress
+ if (button && data.current_artist) {
+ button.textContent = `Updating... (${data.artists_processed || 0}/${data.total_artists || 0})`;
+ }
+ }
+ }
+
+ // Continue polling if still running
+ if (data.success && data.status === 'running') {
+ setTimeout(pollSimilarArtistsUpdate, 1000); // Poll every 1 second
+ }
+
+ } catch (error) {
+ console.error('Error polling similar artists update:', error);
+ const button = document.getElementById('update-similar-artists-btn');
+ const scanButton = document.getElementById('scan-watchlist-btn');
+
+ if (button) {
+ button.disabled = false;
+ button.textContent = 'Update Similar Artists';
+ button.classList.remove('btn-processing');
+ }
+ if (scanButton) scanButton.disabled = false;
+ }
+}
+
+/**
+ * Remove artist from watchlist via modal
+ */
+async function removeFromWatchlistModal(artistId, artistName) {
+ try {
+ const response = await fetch('/api/watchlist/remove', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: artistId })
+ });
+
+ const data = await response.json();
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to remove from watchlist');
+ }
+
+ console.log(`❌ Removed ${artistName} from watchlist`);
+
+ // Close detail view if open
+ closeWatchlistArtistDetailView();
+
+ // Refresh the watchlist page
+ watchlistPageState.isInitialized = false;
+ await initializeWatchlistPage();
+
+ // Update button count
+ updateWatchlistButtonCount();
+
+ // Update any visible artist cards
+ updateArtistCardWatchlistStatus();
+
+ } catch (error) {
+ console.error('Error removing from watchlist:', error);
+ alert(`Error removing ${artistName} from watchlist: ${error.message}`);
+ }
+}
+
+
+/**
+ * Get visible checked checkboxes (not hidden by search filter)
+ */
+function getVisibleCheckedWatchlist() {
+ return Array.from(document.querySelectorAll('.watchlist-select-cb:checked')).filter(cb => {
+ const item = cb.closest('.watchlist-artist-card');
+ return item && item.style.display !== 'none';
+ });
+}
+
+/**
+ * Update the batch action bar based on checkbox selection
+ */
+function updateWatchlistBatchBar() {
+ const checked = getVisibleCheckedWatchlist();
+ const countEl = document.getElementById('watchlist-batch-count');
+ const removeBtn = document.getElementById('watchlist-batch-remove-btn');
+ const selectAllCb = document.getElementById('watchlist-select-all-cb');
+
+ if (checked.length > 0) {
+ countEl.textContent = `${checked.length} selected`;
+ removeBtn.style.display = '';
+ } else {
+ countEl.textContent = '';
+ removeBtn.style.display = 'none';
+ }
+
+ // Update select-all checkbox state
+ if (selectAllCb) {
+ const visible = Array.from(document.querySelectorAll('.watchlist-select-cb')).filter(cb => {
+ const card = cb.closest('.watchlist-artist-card');
+ return card && card.style.display !== 'none';
+ });
+ selectAllCb.checked = visible.length > 0 && checked.length === visible.length;
+ selectAllCb.indeterminate = checked.length > 0 && checked.length < visible.length;
+ }
+}
+
+function toggleWatchlistSelectAll(checked) {
+ const checkboxes = document.querySelectorAll('.watchlist-select-cb');
+ checkboxes.forEach(cb => {
+ const card = cb.closest('.watchlist-artist-card');
+ if (card && card.style.display !== 'none') {
+ cb.checked = checked;
+ }
+ });
+ updateWatchlistBatchBar();
+}
+
+/**
+ * Batch remove selected artists from watchlist
+ */
+async function batchRemoveFromWatchlist() {
+ const checked = getVisibleCheckedWatchlist();
+ if (checked.length === 0) return;
+
+ const count = checked.length;
+ if (!await showConfirmDialog({ title: 'Remove Artists', message: `Remove ${count} artist${count !== 1 ? 's' : ''} from your watchlist?`, confirmText: 'Remove', destructive: true })) return;
+
+ const artistIds = checked.map(cb => cb.getAttribute('data-artist-id'));
+
+ try {
+ const response = await fetch('/api/watchlist/remove-batch', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_ids: artistIds })
+ });
+
+ const data = await response.json();
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to remove artists');
+ }
+
+ console.log(`❌ Batch removed ${data.removed} artists from watchlist`);
+
+ // Refresh the watchlist page
+ watchlistPageState.isInitialized = false;
+ await initializeWatchlistPage();
+
+ // Update button count
+ updateWatchlistButtonCount();
+
+ // Update any visible artist cards
+ updateArtistCardWatchlistStatus();
+
+ } catch (error) {
+ console.error('Error batch removing from watchlist:', error);
+ alert(`Error removing artists: ${error.message}`);
+ }
+}
+
+// --- Metadata Updater Functions ---
+
+// Global state for metadata update polling
+let metadataUpdatePolling = false;
+let metadataUpdateInterval = null;
+
+/**
+ * Handle metadata update button click
+ */
+async function handleMetadataUpdateButtonClick() {
+ const button = document.getElementById('metadata-update-button');
+ const currentAction = button.textContent;
+
+ if (currentAction === 'Begin Update') {
+ // Get refresh interval from dropdown
+ const refreshSelect = document.getElementById('metadata-refresh-interval');
+ const refreshIntervalDays = refreshSelect.value !== undefined ? parseInt(refreshSelect.value) : 30;
+
+ try {
+ button.disabled = true;
+ button.textContent = 'Starting...';
+
+ const response = await fetch('/api/metadata/start', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ refresh_interval_days: refreshIntervalDays })
+ });
+
+ const data = await response.json();
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to start metadata update');
+ }
+
+ showToast('Metadata update started!', 'success');
+
+ // Start polling for status updates
+ startMetadataUpdatePolling();
+
+ } catch (error) {
+ console.error('Error starting metadata update:', error);
+ button.disabled = false;
+ button.textContent = 'Begin Update';
+ showToast(`Error: ${error.message}`, 'error');
+ }
+ } else {
+ // Stop metadata update
+ try {
+ button.disabled = true;
+ button.textContent = 'Stopping...';
+
+ const response = await fetch('/api/metadata/stop', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' }
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to stop metadata update');
+ }
+
+ } catch (error) {
+ console.error('Error stopping metadata update:', error);
+ button.disabled = false;
+ button.textContent = 'Stop Update';
+ }
+ }
+}
+
+/**
+ * Start polling for metadata update status
+ */
+function startMetadataUpdatePolling() {
+ if (metadataUpdatePolling) return; // Already polling
+
+ metadataUpdatePolling = true;
+ metadataUpdateInterval = setInterval(checkMetadataUpdateStatus, 1000); // Poll every second
+
+ // Also check immediately
+ checkMetadataUpdateStatus();
+}
+
+/**
+ * Stop polling for metadata update status
+ */
+function stopMetadataUpdatePolling() {
+ metadataUpdatePolling = false;
+ if (metadataUpdateInterval) {
+ clearInterval(metadataUpdateInterval);
+ metadataUpdateInterval = null;
+ }
+}
+
+/**
+ * Check current metadata update status and update UI
+ */
+async function checkMetadataUpdateStatus() {
+ if (socketConnected) return; // WebSocket handles this
+ try {
+ const response = await fetch('/api/metadata/status');
+ const data = await response.json();
+
+ if (data.success && data.status) {
+ updateMetadataProgressUI(data.status);
+
+ // Stop polling if completed or error
+ if (data.status.status === 'completed' || data.status.status === 'error') {
+ stopMetadataUpdatePolling();
+ }
+ }
+
+ } catch (error) {
+ console.warn('Could not fetch metadata update status:', error);
+ }
+}
+
+function updateMetadataStatusFromData(data) {
+ if (!data.success || !data.status) return;
+ const prev = _lastToolStatus['metadata'];
+ _lastToolStatus['metadata'] = data.status.status;
+ if (prev !== undefined && data.status.status === prev && data.status.status !== 'running' && data.status.status !== 'stopping') return;
+ updateMetadataProgressUI(data.status);
+ if (data.status.status === 'completed' || data.status.status === 'error') {
+ stopMetadataUpdatePolling();
+ }
+}
+
+/**
+ * Update metadata progress UI elements
+ */
+function updateMetadataProgressUI(status) {
+ const button = document.getElementById('metadata-update-button');
+ const phaseLabel = document.getElementById('metadata-phase-label');
+ const progressLabel = document.getElementById('metadata-progress-label');
+ const progressBar = document.getElementById('metadata-progress-bar');
+ const refreshSelect = document.getElementById('metadata-refresh-interval');
+
+ if (!button || !phaseLabel || !progressLabel || !progressBar || !refreshSelect) return;
+
+ if (status.status === 'running') {
+ button.textContent = 'Stop Update';
+ button.disabled = false;
+ refreshSelect.disabled = true;
+
+ // Update current artist display
+ const currentArtist = status.current_artist || 'Processing...';
+ phaseLabel.textContent = `Current Artist: ${currentArtist}`;
+
+ // Update progress
+ const processed = status.processed || 0;
+ const total = status.total || 0;
+ const percentage = status.percentage || 0;
+
+ progressLabel.textContent = `${processed} / ${total} artists (${percentage.toFixed(1)}%)`;
+ progressBar.style.width = `${percentage}%`;
+
+ } else if (status.status === 'stopping') {
+ button.textContent = 'Stopping...';
+ button.disabled = true;
+ phaseLabel.textContent = 'Current Artist: Stopping...';
+
+ } else if (status.status === 'completed') {
+ button.textContent = 'Begin Update';
+ button.disabled = false;
+ refreshSelect.disabled = false;
+
+ phaseLabel.textContent = 'Current Artist: Completed';
+
+ const processed = status.processed || 0;
+ const successful = status.successful || 0;
+ const failed = status.failed || 0;
+
+ progressLabel.textContent = `Completed: ${processed} processed, ${successful} successful, ${failed} failed`;
+ progressBar.style.width = '100%';
+
+ showToast(`Metadata update completed: ${successful} artists updated, ${failed} failed`, 'success');
+
+ } else if (status.status === 'error') {
+ button.textContent = 'Begin Update';
+ button.disabled = false;
+ refreshSelect.disabled = false;
+
+ phaseLabel.textContent = 'Current Artist: Error occurred';
+ progressLabel.textContent = status.error || 'Unknown error';
+ progressBar.style.width = '0%';
+
+ } else {
+ // Idle state
+ button.textContent = 'Begin Update';
+ button.disabled = false;
+ refreshSelect.disabled = false;
+
+ phaseLabel.textContent = 'Current Artist: Not running';
+ progressLabel.textContent = '0 / 0 artists (0.0%)';
+ progressBar.style.width = '0%';
+ }
+}
+
+/**
+ * Check active media server and hide metadata updater if not Plex
+ */
+async function checkAndHideMetadataUpdaterForNonPlex() {
+ try {
+ const response = await fetch('/api/active-media-server');
+ const data = await response.json();
+
+ if (data.success) {
+ const metadataCard = document.getElementById('metadata-updater-card');
+ if (metadataCard) {
+ // Show metadata updater only for Plex and Jellyfin
+ if (data.active_server === 'plex' || data.active_server === 'jellyfin') {
+ metadataCard.style.display = 'flex';
+ console.log(`Metadata updater shown: ${data.active_server} is active server`);
+
+ // Update the header text to reflect the current server
+ const headerElement = metadataCard.querySelector('.card-header h3');
+ if (headerElement) {
+ const serverDisplayName = data.active_server.charAt(0).toUpperCase() + data.active_server.slice(1);
+ headerElement.textContent = `${serverDisplayName} Metadata Updater`;
+ }
+
+ // Update the description based on the server type
+ const descElement = metadataCard.querySelector('.metadata-updater-description');
+ if (descElement) {
+ if (data.active_server === 'jellyfin') {
+ descElement.textContent = 'Download and upload high-quality artist images from Spotify to your Jellyfin server for artists without photos.';
+ } else {
+ descElement.textContent = 'Download and upload high-quality artist images from Spotify to your Plex server for artists without photos.';
+ }
+ }
+ } else {
+ // Hide metadata updater for Navidrome
+ metadataCard.style.display = 'none';
+ console.log(`Metadata updater hidden: ${data.active_server} does not support image uploads`);
+ }
+ }
+ }
+ } catch (error) {
+ console.warn('Could not check active media server for metadata updater visibility:', error);
+ }
+}
+
+async function checkAndShowMediaScanForPlex() {
+ /**
+ * Show media scan tool only for Plex (Jellyfin/Navidrome auto-scan)
+ */
+ try {
+ const response = await fetch('/api/active-media-server');
+ const data = await response.json();
+
+ if (data.success) {
+ const mediaScanCard = document.getElementById('media-scan-card');
+ if (mediaScanCard) {
+ // Show media scan tool only for Plex
+ if (data.active_server === 'plex') {
+ mediaScanCard.style.display = 'flex';
+ console.log('Media scan tool shown: Plex is active server');
+ } else {
+ // Hide for Jellyfin/Navidrome (they auto-scan)
+ mediaScanCard.style.display = 'none';
+ console.log(`Media scan tool hidden: ${data.active_server} auto-scans`);
+ }
+ }
+ }
+ } catch (error) {
+ console.warn('Could not check active media server for media scan visibility:', error);
+ }
+}
+
+async function handleMediaScanButtonClick() {
+ /**
+ * Trigger a manual Plex media library scan
+ */
+ const button = document.getElementById('media-scan-button');
+ const phaseLabel = document.getElementById('media-scan-phase-label');
+ const progressBar = document.getElementById('media-scan-progress-bar');
+ const progressLabel = document.getElementById('media-scan-progress-label');
+ const statusValue = document.getElementById('media-scan-status');
+
+ if (!button) return;
+
+ try {
+ // Disable button and update UI
+ button.disabled = true;
+ phaseLabel.textContent = 'Requesting scan...';
+ progressBar.style.width = '30%';
+ progressLabel.textContent = 'Sending scan request to Plex';
+ statusValue.textContent = 'Scanning...';
+ statusValue.style.color = 'rgb(var(--accent-rgb))';
+
+ // Request scan (database update handled by system automation)
+ const response = await fetch('/api/scan/request', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ reason: 'Manual scan triggered from dashboard'
+ })
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ // Get delay from API response (graceful fallback to 60 if not provided)
+ const delaySeconds = (result.scan_info && result.scan_info.delay_seconds) || 60;
+ let remainingSeconds = delaySeconds;
+ let countdownInterval = null;
+ let pollInterval = null;
+
+ // Update last scan time
+ const lastTimeEl = document.getElementById('media-scan-last-time');
+ if (lastTimeEl) {
+ const now = new Date();
+ lastTimeEl.textContent = now.toLocaleTimeString();
+ }
+
+ // Start countdown timer (visual feedback during delay)
+ phaseLabel.textContent = 'Scan scheduled...';
+ progressBar.style.width = '0%';
+
+ countdownInterval = setInterval(() => {
+ remainingSeconds--;
+
+ // Update progress bar (0% -> 100% over delay period)
+ const progress = ((delaySeconds - remainingSeconds) / delaySeconds) * 100;
+ progressBar.style.width = `${progress}%`;
+
+ // Update progress label with countdown
+ if (remainingSeconds > 0) {
+ progressLabel.textContent = `Starting scan in ${remainingSeconds}s...`;
+ } else {
+ progressLabel.textContent = 'Scan starting now...';
+ }
+
+ // When countdown reaches 0, start polling
+ if (remainingSeconds <= 0) {
+ clearInterval(countdownInterval);
+
+ // Transition to scanning phase
+ phaseLabel.textContent = 'Scan in progress...';
+ progressBar.style.width = '100%';
+ progressLabel.textContent = 'Media server is scanning library...';
+ showToast('📡 Media scan started', 'success', 3000);
+
+ // Start polling for scan completion (5 minutes = 150 polls × 2s)
+ let pollCount = 0;
+ const maxPolls = 150; // 5 minutes
+
+ pollInterval = setInterval(async () => {
+ if (socketConnected) return; // Phase 5: WS handles scan status
+ pollCount++;
+
+ if (pollCount > maxPolls) {
+ // Polling timeout after 5 minutes
+ clearInterval(pollInterval);
+ button.disabled = false;
+ phaseLabel.textContent = 'Scan completed';
+ progressBar.style.width = '0%';
+ progressLabel.textContent = 'Ready for next scan';
+ statusValue.textContent = 'Idle';
+ statusValue.style.color = '#b3b3b3';
+ showToast('✅ Media scan completed', 'success', 3000);
+ return;
+ }
+
+ try {
+ const statusResponse = await fetch('/api/scan/status');
+ const statusData = await statusResponse.json();
+
+ if (statusData.success && statusData.status) {
+ const status = statusData.status;
+
+ // Update status display
+ if (status.is_scanning) {
+ phaseLabel.textContent = 'Media server scanning...';
+ progressLabel.textContent = status.progress_message || 'Scan in progress';
+ } else if (status.status === 'idle') {
+ // Scan completed
+ clearInterval(pollInterval);
+ button.disabled = false;
+ phaseLabel.textContent = 'Scan completed successfully';
+ progressBar.style.width = '0%';
+ progressLabel.textContent = 'Ready for next scan';
+ statusValue.textContent = 'Idle';
+ statusValue.style.color = '#b3b3b3';
+ showToast('✅ Media scan completed', 'success', 3000);
+ }
+ }
+ } catch (pollError) {
+ console.debug('Scan status poll error:', pollError);
+ }
+ }, 2000); // Poll every 2 seconds
+ }
+ }, 1000); // Update countdown every second
+
+ } else {
+ // Error occurred
+ showToast(`❌ Scan request failed: ${result.error}`, 'error', 5000);
+ button.disabled = false;
+ phaseLabel.textContent = 'Scan failed';
+ progressBar.style.width = '0%';
+ progressLabel.textContent = result.error || 'Unknown error';
+ statusValue.textContent = 'Error';
+ statusValue.style.color = '#f44336';
+ }
+
+ } catch (error) {
+ console.error('Error requesting media scan:', error);
+ showToast('❌ Failed to request media scan', 'error', 3000);
+ button.disabled = false;
+ phaseLabel.textContent = 'Error';
+ progressBar.style.width = '0%';
+ progressLabel.textContent = error.message;
+ statusValue.textContent = 'Error';
+ statusValue.style.color = '#f44336';
+ }
+}
+
+/**
+ * Check for ongoing metadata update and restore state on page load
+ */
+async function checkAndRestoreMetadataUpdateState() {
+ try {
+ const response = await fetch('/api/metadata/status');
+ const data = await response.json();
+
+ if (data.success && data.status) {
+ const status = data.status;
+
+ // If metadata update is running, restore the UI state and start polling
+ if (status.status === 'running') {
+ console.log('Found ongoing metadata update, restoring state...');
+ updateMetadataProgressUI(status);
+ startMetadataUpdatePolling();
+ } else if (status.status === 'completed' || status.status === 'error') {
+ // Show final state but don't start polling
+ updateMetadataProgressUI(status);
+ }
+ }
+ } catch (error) {
+ console.warn('Could not check metadata update state on page load:', error);
+ }
+}
+
+// --- Live Log Viewer Functions ---
+
+// Global state for log polling
+let logPolling = false;
+let logInterval = null;
+let lastLogCount = 0;
+
+/**
+ * Initialize the live log viewer for sync page
+ */
+function initializeLiveLogViewer() {
+ const logArea = document.getElementById('sync-log-area');
+ if (!logArea) return;
+
+ // Set initial content
+ logArea.value = 'Loading activity feed...';
+
+ // Start log polling
+ startLogPolling();
+
+ // Initial load
+ loadLogs();
+}
+
+/**
+ * Start polling for logs
+ */
+function startLogPolling() {
+ if (logPolling) return; // Already polling
+
+ logPolling = true;
+ logInterval = setInterval(loadLogs, 3000); // Poll every 3 seconds
+ console.log('📝 Started activity feed polling for sync page');
+}
+
+/**
+ * Stop polling for logs
+ */
+function stopLogPolling() {
+ logPolling = false;
+ if (logInterval) {
+ clearInterval(logInterval);
+ logInterval = null;
+ console.log('📝 Stopped log polling');
+ }
+}
+
+/**
+ * Load and display activity feed as logs
+ */
+async function loadLogs() {
+ if (socketConnected) return; // WebSocket handles this
+ try {
+ const response = await fetch('/api/logs');
+ const data = await response.json();
+ updateLogsFromData(data);
+ } catch (error) {
+ console.warn('Could not load activity logs for sync page:', error);
+ const logArea = document.getElementById('sync-log-area');
+ if (logArea && (logArea.value === 'Loading logs...' || logArea.value === '')) {
+ logArea.value = 'Error loading activity feed. Check console for details.';
+ }
+ }
+}
+
+function updateLogsFromData(data) {
+ if (!data.logs || !Array.isArray(data.logs)) return;
+ const logArea = document.getElementById('sync-log-area');
+ if (!logArea) return;
+
+ const logText = data.logs.join('\n');
+
+ // Store current scroll state
+ const wasAtTop = logArea.scrollTop <= 10;
+ const wasUserScrolled = logArea.scrollTop < logArea.scrollHeight - logArea.clientHeight - 10;
+
+ // Update content only if it has changed
+ if (logArea.value !== logText) {
+ logArea.value = logText;
+
+ // Smart scrolling: stay at top for new entries, preserve user position if scrolled
+ if (wasAtTop || !wasUserScrolled) {
+ logArea.scrollTop = 0; // Stay at top since newest entries are now at top
+ }
+ }
+}
+
+/**
+ * Stop log polling when leaving sync page
+ */
+function cleanupSyncPageLogs() {
+ stopLogPolling();
+}
+
+// --- Global Cleanup on Page Unload ---
+// Note: Automatic wishlist processing now runs server-side and continues even when browser is closed
+// ===============================
+
diff --git a/webui/static/artists.js b/webui/static/artists.js
new file mode 100644
index 00000000..910fae45
--- /dev/null
+++ b/webui/static/artists.js
@@ -0,0 +1,4611 @@
+// ARTISTS PAGE FUNCTIONALITY - ELEGANT SEARCH & DISCOVERY
+// ============================================================================
+
+/**
+ * Initialize the artists page when navigated to (only runs once)
+ */
+function initializeArtistsPage() {
+ console.log('🎵 Initializing Artists Page (first time)');
+
+ // Get DOM elements
+ const searchInput = document.getElementById('artists-search-input');
+ const headerSearchInput = document.getElementById('artists-header-search-input');
+ const searchStatus = document.getElementById('artists-search-status');
+ const backButton = document.getElementById('artists-back-button');
+ const detailBackButton = document.getElementById('artist-detail-back-button');
+
+ // Set up event listeners (only need to do this once)
+ if (searchInput) {
+ searchInput.addEventListener('input', handleArtistsSearchInput);
+ searchInput.addEventListener('keypress', handleArtistsSearchKeypress);
+ }
+
+ if (headerSearchInput) {
+ headerSearchInput.addEventListener('input', handleArtistsHeaderSearchInput);
+ headerSearchInput.addEventListener('keypress', handleArtistsSearchKeypress);
+ }
+
+ if (backButton) {
+ backButton.addEventListener('click', () => showArtistsSearchState());
+ }
+
+ if (detailBackButton) {
+ detailBackButton.addEventListener('click', () => {
+ // If there are no search results (user navigated directly to artist),
+ // go straight to the main search view instead of showing an empty results page
+ if (!artistsPageState.searchResults || artistsPageState.searchResults.length === 0) {
+ showArtistsSearchState();
+ } else {
+ showArtistsResultsState();
+ }
+ });
+ }
+
+ // Initialize tabs (only need to do this once)
+ initializeArtistTabs();
+
+ // Mark as initialized
+ artistsPageState.isInitialized = true;
+
+ // Restore previous state instead of always resetting to search
+ restoreArtistsPageState();
+ console.log('✅ Artists Page initialized successfully (ready for navigation)');
+}
+
+/**
+ * Restore the artists page to its previous state
+ */
+function restoreArtistsPageState() {
+ console.log(`🔄 Restoring artists page state: ${artistsPageState.currentView}`);
+
+ switch (artistsPageState.currentView) {
+ case 'results':
+ // Restore search results state
+ if (artistsPageState.searchQuery && artistsPageState.searchResults.length > 0) {
+ console.log(`📦 Restoring search results for: "${artistsPageState.searchQuery}"`);
+
+ // Restore search input values
+ const searchInput = document.getElementById('artists-search-input');
+ const headerSearchInput = document.getElementById('artists-header-search-input');
+
+ if (searchInput) searchInput.value = artistsPageState.searchQuery;
+ if (headerSearchInput) headerSearchInput.value = artistsPageState.searchQuery;
+
+ // Display the cached results
+ displayArtistsResults(artistsPageState.searchQuery, artistsPageState.searchResults);
+ } else {
+ // No valid results state, fall back to search
+ showArtistsSearchState();
+ }
+ break;
+
+ case 'detail':
+ // Restore artist detail state
+ if (artistsPageState.selectedArtist && artistsPageState.artistDiscography) {
+ console.log(`🎤 Restoring artist detail for: ${artistsPageState.selectedArtist.name}`);
+
+ // First restore search results if they exist
+ if (artistsPageState.searchQuery && artistsPageState.searchResults.length > 0) {
+ const searchInput = document.getElementById('artists-search-input');
+ const headerSearchInput = document.getElementById('artists-header-search-input');
+
+ if (searchInput) searchInput.value = artistsPageState.searchQuery;
+ if (headerSearchInput) headerSearchInput.value = artistsPageState.searchQuery;
+ }
+
+ // Show artist detail state
+ showArtistDetailState();
+
+ // Update artist info in header
+ updateArtistDetailHeader(artistsPageState.selectedArtist);
+
+ // Display cached discography
+ if (artistsPageState.artistDiscography.albums || artistsPageState.artistDiscography.singles) {
+ displayArtistDiscography(artistsPageState.artistDiscography);
+ // Restore cached completion data instead of re-scanning
+ restoreCachedCompletionData(artistsPageState.selectedArtist.id);
+ }
+ } else {
+ // No valid detail state, fall back to search or results
+ if (artistsPageState.searchQuery && artistsPageState.searchResults.length > 0) {
+ displayArtistsResults(artistsPageState.searchQuery, artistsPageState.searchResults);
+ } else {
+ showArtistsSearchState();
+ }
+ }
+ break;
+
+ default:
+ case 'search':
+ // Show search state (but preserve any existing search query)
+ if (artistsPageState.searchQuery) {
+ const searchInput = document.getElementById('artists-search-input');
+ if (searchInput) searchInput.value = artistsPageState.searchQuery;
+ }
+ showArtistsSearchState();
+ break;
+ }
+}
+
+/**
+ * Handle search input with debouncing
+ */
+function handleArtistsSearchInput(event) {
+ const query = event.target.value.trim();
+ updateArtistsSearchStatus('searching');
+
+ // Clear existing timeout
+ if (artistsSearchTimeout) {
+ clearTimeout(artistsSearchTimeout);
+ }
+
+ // Cancel any active search
+ if (artistsSearchController) {
+ artistsSearchController.abort();
+ }
+
+ if (query === '') {
+ updateArtistsSearchStatus('default');
+ return;
+ }
+
+ // Set up new debounced search
+ artistsSearchTimeout = setTimeout(() => {
+ performArtistsSearch(query);
+ }, 1000); // 1 second debounce
+}
+
+/**
+ * Handle header search input (already in results state)
+ */
+function handleArtistsHeaderSearchInput(event) {
+ const query = event.target.value.trim();
+
+ // Update main search input to match
+ const mainInput = document.getElementById('artists-search-input');
+ if (mainInput) {
+ mainInput.value = query;
+ }
+
+ // Trigger search with same debouncing logic
+ handleArtistsSearchInput(event);
+}
+
+/**
+ * Handle Enter key press in search inputs
+ */
+function handleArtistsSearchKeypress(event) {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ const query = event.target.value.trim();
+
+ if (query && query !== artistsPageState.searchQuery) {
+ // Clear timeout and search immediately
+ if (artistsSearchTimeout) {
+ clearTimeout(artistsSearchTimeout);
+ }
+ performArtistsSearch(query);
+ }
+ }
+}
+
+/**
+ * Perform artist search with API call
+ */
+async function performArtistsSearch(query) {
+ console.log(`🔍 Searching for artists: "${query}"`);
+
+ // Check cache first
+ if (artistsPageState.cache.searches[query]) {
+ console.log('📦 Using cached search results');
+ displayArtistsResults(query, artistsPageState.cache.searches[query]);
+ return;
+ }
+
+ // Update status
+ updateArtistsSearchStatus('searching');
+
+ // Show loading cards immediately if we're in results view
+ if (artistsPageState.currentView === 'results') {
+ showSearchLoadingCards();
+ }
+
+ try {
+ // Set up abort controller
+ artistsSearchController = new AbortController();
+
+ const response = await fetch('/api/match/search', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ query: query,
+ context: 'artist'
+ }),
+ signal: artistsSearchController.signal
+ });
+
+ if (!response.ok) {
+ throw new Error(`Search failed: ${response.status}`);
+ }
+
+ const data = await response.json();
+ console.log(`✅ Found ${data.results?.length || 0} artists`);
+
+ // Transform the results to flatten the nested artist data
+ const transformedResults = (data.results || []).map(result => {
+ // Extract artist data from the nested structure
+ const artist = result.artist || result;
+ return {
+ id: artist.id,
+ name: artist.name,
+ image_url: artist.image_url,
+ genres: artist.genres,
+ popularity: artist.popularity,
+ confidence: result.confidence || 0
+ };
+ });
+
+ console.log('🔧 Transformed results:', transformedResults);
+
+ // Cache the transformed results
+ artistsPageState.cache.searches[query] = transformedResults;
+
+ // Display results
+ displayArtistsResults(query, transformedResults);
+
+ } catch (error) {
+ if (error.name !== 'AbortError') {
+ console.error('❌ Artist search failed:', error);
+
+ // Provide specific error messages based on the error type
+ let errorMessage = 'Search failed. Please try again.';
+ if (error.message.includes('401') || error.message.includes('authentication')) {
+ errorMessage = 'Spotify not authenticated. Please check your API settings.';
+ } else if (error.message.includes('network') || error.message.includes('fetch')) {
+ errorMessage = 'Network error. Please check your connection.';
+ } else if (error.message.includes('timeout')) {
+ errorMessage = 'Search timed out. Please try again.';
+ }
+
+ updateArtistsSearchStatus('error', errorMessage);
+ }
+ } finally {
+ artistsSearchController = null;
+ }
+}
+
+/**
+ * Display artist search results
+ */
+function displayArtistsResults(query, results) {
+ console.log(`📊 Displaying ${results.length} artist results`);
+
+ // Update state
+ artistsPageState.searchQuery = query;
+ artistsPageState.searchResults = results;
+ artistsPageState.currentView = 'results';
+
+ // Update header search input if different
+ const headerInput = document.getElementById('artists-header-search-input');
+ if (headerInput && headerInput.value !== query) {
+ headerInput.value = query;
+ }
+
+ // Show results state
+ showArtistsResultsState();
+
+ // Populate results
+ const container = document.getElementById('artists-cards-container');
+ if (!container) return;
+
+ if (results.length === 0) {
+ container.innerHTML = `
+
+ Scanned: ${scanned}
+ •
+ New tracks: ${newTracks}
+ •
+ Added to wishlist: ${addedTracks}
+
+
+
+ `;
+ return;
+ }
+
+ // Create artist cards
+ container.innerHTML = results.map(result => createArtistCardHTML(result)).join('');
+ observeLazyBackgrounds(container);
+
+ // Add event listeners to cards
+ container.querySelectorAll('.artist-card').forEach((card, index) => {
+ card.addEventListener('click', () => selectArtistForDetail(results[index]));
+
+ // Extract colors from artist image for dynamic glow
+ const artist = results[index];
+ if (artist.image_url) {
+ extractImageColors(artist.image_url, (colors) => {
+ applyDynamicGlow(card, colors);
+ });
+ }
+ });
+
+ // Update watchlist status for all cards
+ updateArtistCardWatchlistStatus();
+
+ // Lazy load missing artist images
+ console.log('🖼️ Starting lazy load for artist images on Artists page...');
+ if (typeof lazyLoadArtistImages === 'function') {
+ lazyLoadArtistImages(container);
+ } else if (typeof window.lazyLoadArtistImages === 'function') {
+ window.lazyLoadArtistImages(container);
+ } else {
+ console.error('❌ lazyLoadArtistImages function not found!');
+ }
+
+ // Add mouse wheel horizontal scrolling
+ container.addEventListener('wheel', (event) => {
+ if (event.deltaY !== 0) {
+ event.preventDefault();
+ container.scrollLeft += event.deltaY;
+ }
+ });
+}
+
+/**
+ * Lazy load artist images for cards that don't have images yet.
+ * Fetches images asynchronously so search results appear immediately.
+ */
+async function lazyLoadArtistImages(container) {
+ if (!container) {
+ console.error('❌ lazyLoadArtistImages: container is null');
+ return;
+ }
+
+ // Find all cards that need images
+ const cardsNeedingImages = container.querySelectorAll('[data-needs-image="true"]');
+
+ if (cardsNeedingImages.length === 0) {
+ console.log('✅ All artist cards have images');
+ return;
+ }
+
+ console.log(`🖼️ Lazy loading images for ${cardsNeedingImages.length} artist cards`);
+
+ // Load images in parallel (but with a small batch to avoid overwhelming the server)
+ const batchSize = 5;
+ const cards = Array.from(cardsNeedingImages);
+
+ for (let i = 0; i < cards.length; i += batchSize) {
+ const batch = cards.slice(i, i + batchSize);
+
+ await Promise.all(batch.map(async (card) => {
+ const artistId = card.dataset.artistId;
+ if (!artistId) {
+ console.warn('⚠️ Card missing artistId:', card);
+ return;
+ }
+
+ try {
+ console.log(`🔄 Fetching image for artist ${artistId}...`);
+ const response = await fetch(`/api/artist/${artistId}/image`);
+ const data = await response.json();
+
+ console.log(`📥 Got response for ${artistId}:`, data);
+
+ if (data.success && data.image_url) {
+ // Update the card's background image
+ // Handle both card types (suggestion-card and artist-card)
+ if (card.classList.contains('suggestion-card')) {
+ card.style.backgroundImage = `url(${data.image_url})`;
+ card.style.backgroundSize = 'cover';
+ card.style.backgroundPosition = 'center';
+ } else if (card.classList.contains('artist-card')) {
+ const bgElement = card.querySelector('.artist-card-background');
+ if (bgElement) {
+ // Clear the gradient first, then set the image
+ bgElement.style.cssText = `background-image: url('${data.image_url}'); background-size: cover; background-position: center;`;
+ }
+ }
+
+ card.dataset.needsImage = 'false';
+ console.log(`✅ Loaded image for artist ${artistId}`);
+ }
+ } catch (error) {
+ console.error(`❌ Failed to load image for artist ${artistId}:`, error);
+ }
+ }));
+ }
+
+ console.log('✅ Finished lazy loading artist images');
+}
+
+// Make function globally accessible
+window.lazyLoadArtistImages = lazyLoadArtistImages;
+
+/**
+ * Create HTML for an artist card
+ */
+function createArtistCardHTML(artist) {
+ const imageUrl = artist.image_url || '';
+ const genres = artist.genres && artist.genres.length > 0 ?
+ artist.genres.slice(0, 3).join(', ') : 'Various genres';
+ const popularity = artist.popularity || 0;
+
+ // Use data-bg-src for lazy background loading via IntersectionObserver
+ const backgroundAttr = imageUrl ?
+ `data-bg-src="${imageUrl}"` :
+ `style="background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);"`;
+
+ // Format popularity as a percentage for better UX
+ const popularityText = popularity > 0 ? `${popularity}% Popular` : 'Popularity Unknown';
+
+ // Track if image needs to be lazy loaded
+ const needsImage = imageUrl ? 'false' : 'true';
+
+ // Check for MusicBrainz ID
+ let mbIconHTML = '';
+ if (artist.musicbrainz_id) {
+ mbIconHTML = `
+ 🔍
+ No artists found
+ Try a different search term
+
+ 
+
+ `;
+ }
+
+ return `
+
+ ${mbIconHTML}
+
+
+
+ `;
+}
+
+/**
+ * Select an artist and show their discography
+ */
+async function selectArtistForDetail(artist, options = {}) {
+ console.log(`🎤 Selected artist: ${artist.name}`);
+
+ // Cancel any ongoing completion check from previous artist
+ if (artistCompletionController) {
+ console.log('⏹️ Canceling previous artist completion check');
+ artistCompletionController.abort();
+ artistCompletionController = null;
+ }
+
+ // Cancel any ongoing similar artists stream from previous artist
+ if (similarArtistsController) {
+ console.log('⏹️ Canceling previous similar artists stream');
+ similarArtistsController.abort();
+ similarArtistsController = null;
+ }
+
+ // Update state
+ artistsPageState.selectedArtist = artist;
+ artistsPageState.currentView = 'detail';
+ artistsPageState.sourceOverride = options.source || null;
+ artistsPageState.pluginOverride = options.plugin || null;
+
+ // Show detail state
+ showArtistDetailState();
+
+ // Update artist info in header
+ updateArtistDetailHeader(artist);
+
+ // Load discography (pass artist name for cross-source fallback)
+ await loadArtistDiscography(artist.id, artist.name, options.source, options.plugin);
+}
+
+/**
+ * Load artist's discography from Spotify or iTunes
+ * @param {string} artistId - Artist ID (Spotify or iTunes format)
+ * @param {string} [artistName] - Optional artist name for fallback searches
+ */
+async function loadArtistDiscography(artistId, artistName = null, sourceOverride = null, pluginOverride = null) {
+ console.log(`💿 Loading discography for artist: ${artistId} (name: ${artistName}, source: ${sourceOverride || 'auto'})`);
+
+ // Use source-prefixed cache key to avoid ID collisions between sources
+ const cacheKey = sourceOverride ? `${sourceOverride}:${artistId}` : artistId;
+
+ // Check cache first
+ if (artistsPageState.cache.discography[cacheKey]) {
+ console.log('📦 Using cached discography');
+ const cachedDiscography = artistsPageState.cache.discography[cacheKey];
+ displayArtistDiscography(cachedDiscography);
+
+ // Load similar artists in parallel (don't wait) — always uses primary source
+ loadSimilarArtists(artistsPageState.selectedArtist?.name).catch(err => {
+ console.error('❌ Error loading similar artists:', err);
+ });
+
+ // Still check completion status for cached data
+ await checkDiscographyCompletion(artistId, cachedDiscography);
+ return;
+ }
+
+ try {
+ // Show loading states
+ showDiscographyLoading();
+
+ // Build URL with optional artist name and source override for fallback
+ let url = `/api/artist/${artistId}/discography`;
+ const params = new URLSearchParams();
+ if (artistName) params.set('artist_name', artistName);
+ if (sourceOverride) params.set('source', sourceOverride);
+ if (pluginOverride) params.set('plugin', pluginOverride);
+ if (params.toString()) url += `?${params.toString()}`;
+
+ // Call the real API endpoint
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ if (response.status === 401) {
+ throw new Error('Spotify not authenticated. Please check your API settings.');
+ }
+ throw new Error(`Failed to load discography: ${response.status}`);
+ }
+
+ const data = await response.json();
+
+ if (data.error) {
+ throw new Error(data.error);
+ }
+
+ const discography = {
+ albums: data.albums || [],
+ singles: data.singles || [],
+ source: data.source || sourceOverride || null,
+ };
+
+ // Update selected artist with full details from backend (includes MusicBrainz ID)
+ if (data.artist) {
+ console.log('✨ Updating artist details with fresh data from backend');
+ artistsPageState.selectedArtist = {
+ ...artistsPageState.selectedArtist,
+ ...data.artist
+ };
+ }
+
+ // Merge artist_info enrichment from discography response
+ if (data.artist_info) {
+ artistsPageState.selectedArtist = {
+ ...artistsPageState.selectedArtist,
+ artist_info: data.artist_info,
+ };
+ }
+
+ // Refresh header with all available data
+ updateArtistDetailHeader(artistsPageState.selectedArtist);
+
+ console.log(`✅ Loaded ${discography.albums.length} albums and ${discography.singles.length} singles`);
+
+ // Cache the results (use source-prefixed key if source override active)
+ artistsPageState.cache.discography[cacheKey] = discography;
+ artistsPageState.artistDiscography = discography;
+
+ // Display results
+ displayArtistDiscography(discography);
+
+ // Load similar artists and check completion in parallel (don't wait)
+ loadSimilarArtists(artistsPageState.selectedArtist?.name).catch(err => {
+ console.error('❌ Error loading similar artists:', err);
+ });
+
+ // Check completion status for all albums and singles
+ await checkDiscographyCompletion(artistId, discography);
+
+ } catch (error) {
+ console.error('❌ Failed to load discography:', error);
+ showDiscographyError(error.message);
+ }
+}
+
+/**
+ * Display artist's discography in tabs
+ */
+function displayArtistDiscography(discography) {
+ console.log(`📀 Displaying discography: ${discography.albums?.length || 0} albums, ${discography.singles?.length || 0} singles`);
+
+ // Show Download Discography button(s) if there are any releases
+ const _totalReleases = (discography.albums?.length || 0) + (discography.eps?.length || 0) + (discography.singles?.length || 0);
+ const _discogWrap = document.getElementById('discog-download-wrap');
+ if (_discogWrap) _discogWrap.style.display = _totalReleases > 0 ? '' : 'none';
+ const _discogBtnArtists = document.getElementById('discog-download-btn-artists');
+ if (_discogBtnArtists) _discogBtnArtists.style.display = _totalReleases > 0 ? '' : 'none';
+
+ // Populate albums
+ const albumsContainer = document.getElementById('album-cards-container');
+ if (albumsContainer) {
+ if (discography.albums?.length > 0) {
+ albumsContainer.innerHTML = discography.albums.map(album => createAlbumCardHTML(album)).join('');
+ observeLazyBackgrounds(albumsContainer);
+
+ // Add dynamic glow effects and click handlers to album cards
+ albumsContainer.querySelectorAll('.album-card').forEach((card, index) => {
+ const album = discography.albums[index];
+ if (album.image_url) {
+ extractImageColors(album.image_url, (colors) => {
+ applyDynamicGlow(card, colors);
+ });
+ }
+
+ // Add click handler for download missing tracks modal
+ card.addEventListener('click', () => handleArtistAlbumClick(album, 'albums'));
+ card.style.cursor = 'pointer';
+ });
+ } else {
+ albumsContainer.innerHTML = `
+
+
+ ${escapeHtml(artist.name)}
+ ${escapeHtml(genres)}
+
+
+ ${popularityText}
+
+
+
+
+
+
+
+
+
+ `;
+ }
+ }
+
+ // Populate singles
+ const singlesContainer = document.getElementById('singles-cards-container');
+ if (singlesContainer) {
+ if (discography.singles?.length > 0) {
+ singlesContainer.innerHTML = discography.singles.map(single => createAlbumCardHTML(single)).join('');
+ observeLazyBackgrounds(singlesContainer);
+
+ // Add dynamic glow effects and click handlers to singles cards
+ singlesContainer.querySelectorAll('.album-card').forEach((card, index) => {
+ const single = discography.singles[index];
+ if (single.image_url) {
+ extractImageColors(single.image_url, (colors) => {
+ applyDynamicGlow(card, colors);
+ });
+ }
+
+ // Add click handler for download missing tracks modal
+ card.addEventListener('click', () => handleArtistAlbumClick(single, 'singles'));
+ card.style.cursor = 'pointer';
+ });
+ } else {
+ singlesContainer.innerHTML = `
+ 💿
+ No albums found
+
+
+ `;
+ }
+ }
+
+ // Auto-switch to Singles tab if no albums but has singles
+ if ((!discography.albums || discography.albums.length === 0) &&
+ discography.singles && discography.singles.length > 0) {
+ console.log('📀 No albums found, auto-switching to Singles & EPs tab');
+
+ // Switch to singles tab
+ const albumsTab = document.getElementById('albums-tab');
+ const singlesTab = document.getElementById('singles-tab');
+ const albumsContent = document.getElementById('albums-content');
+ const singlesContent = document.getElementById('singles-content');
+
+ if (albumsTab && singlesTab && albumsContent && singlesContent) {
+ // Remove active from albums
+ albumsTab.classList.remove('active');
+ albumsContent.classList.remove('active');
+
+ // Add active to singles
+ singlesTab.classList.add('active');
+ singlesContent.classList.add('active');
+ }
+ }
+}
+
+/**
+ * Load similar artists from MusicMap
+ */
+async function loadSimilarArtists(artistName) {
+ if (!artistName) {
+ console.warn('⚠️ No artist name provided for similar artists');
+ return;
+ }
+
+ console.log(`🔍 Loading similar artists for: ${artistName}`);
+
+ // Get DOM elements
+ const section = document.getElementById('similar-artists-section');
+ const loadingEl = document.getElementById('similar-artists-loading');
+ const errorEl = document.getElementById('similar-artists-error');
+ const container = document.getElementById('similar-artists-bubbles-container');
+
+ if (!section || !loadingEl || !errorEl || !container) {
+ console.warn('⚠️ Similar artists section elements not found');
+ return;
+ }
+
+ // Show loading state
+ loadingEl.classList.remove('hidden');
+ errorEl.classList.add('hidden');
+ container.innerHTML = '';
+ section.style.display = 'block';
+
+ try {
+ // Create new abort controller for this similar artists stream
+ similarArtistsController = new AbortController();
+
+ // Use streaming endpoint for real-time bubble creation
+ const url = `/api/artist/similar/${encodeURIComponent(artistName)}/stream`;
+ console.log(`📡 Streaming from: ${url}`);
+
+ const response = await fetch(url, {
+ signal: similarArtistsController.signal
+ });
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch similar artists: ${response.status}`);
+ }
+
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+ let artistCount = 0;
+
+ // Read the stream
+ while (true) {
+ const { done, value } = await reader.read();
+
+ if (done) {
+ console.log('✅ Stream complete');
+ break;
+ }
+
+ // Decode the chunk and add to buffer
+ buffer += decoder.decode(value, { stream: true });
+
+ // Process complete messages (separated by \n\n)
+ const messages = buffer.split('\n\n');
+ buffer = messages.pop() || ''; // Keep incomplete message in buffer
+
+ for (const message of messages) {
+ if (!message.trim() || !message.startsWith('data: ')) continue;
+
+ try {
+ const jsonData = JSON.parse(message.substring(6)); // Remove 'data: ' prefix
+
+ if (jsonData.error) {
+ throw new Error(jsonData.error);
+ }
+
+ if (jsonData.artist) {
+ // Hide loading on first artist
+ if (artistCount === 0) {
+ loadingEl.classList.add('hidden');
+ }
+
+ // Create and append bubble immediately
+ const bubble = createSimilarArtistBubble(jsonData.artist);
+ container.appendChild(bubble);
+ artistCount++;
+
+ console.log(`✅ Added bubble for: ${jsonData.artist.name} (${artistCount})`);
+ }
+
+ if (jsonData.complete) {
+ console.log(`🎉 Streaming complete: ${jsonData.total} artists`);
+
+ if (artistCount === 0) {
+ loadingEl.classList.add('hidden');
+ container.innerHTML = `
+ 🎵
+ No singles or EPs found
+
+
+ `;
+ } else {
+ // Lazy load images for similar artists that don't have them
+ lazyLoadSimilarArtistImages(container);
+ }
+ }
+ } catch (parseError) {
+ console.error('❌ Error parsing stream message:', parseError);
+ }
+ }
+ }
+
+ // Clear the controller when done
+ similarArtistsController = null;
+
+ } catch (error) {
+ // Don't show error if it was aborted (user navigated away)
+ if (error.name === 'AbortError') {
+ console.log('⏹️ Similar artists stream aborted (user navigated to new artist)');
+ loadingEl.classList.add('hidden');
+ return;
+ }
+
+ console.error('❌ Error loading similar artists:', error);
+
+ // Hide loading, show error
+ loadingEl.classList.add('hidden');
+ errorEl.classList.remove('hidden');
+
+ // Also show error message in container
+ container.innerHTML = `
+ 🎵
+ No similar artists found
+
+
+ `;
+ } finally {
+ // Always clear the controller
+ similarArtistsController = null;
+ }
+}
+
+/**
+ * Lazy load images for similar artist bubbles that don't have images
+ */
+async function lazyLoadSimilarArtistImages(container) {
+ if (!container) return;
+
+ const bubblesNeedingImages = container.querySelectorAll('.similar-artist-bubble[data-needs-image="true"]');
+
+ if (bubblesNeedingImages.length === 0) {
+ console.log('✅ All similar artist bubbles have images');
+ return;
+ }
+
+ console.log(`🖼️ Lazy loading images for ${bubblesNeedingImages.length} similar artists`);
+
+ // Load images in parallel batches
+ const batchSize = 5;
+ const bubbles = Array.from(bubblesNeedingImages);
+
+ for (let i = 0; i < bubbles.length; i += batchSize) {
+ const batch = bubbles.slice(i, i + batchSize);
+
+ await Promise.all(batch.map(async (bubble) => {
+ const artistId = bubble.getAttribute('data-artist-id');
+ const artistSource = bubble.getAttribute('data-artist-source') || '';
+ const artistPlugin = bubble.getAttribute('data-artist-plugin') || '';
+ if (!artistId) return;
+
+ try {
+ const params = new URLSearchParams();
+ if (artistSource) params.set('source', artistSource);
+ if (artistPlugin) params.set('plugin', artistPlugin);
+
+ const imageUrl = params.toString()
+ ? `/api/artist/${encodeURIComponent(artistId)}/image?${params.toString()}`
+ : `/api/artist/${encodeURIComponent(artistId)}/image`;
+
+ const response = await fetch(imageUrl);
+ const data = await response.json();
+
+ if (data.success && data.image_url) {
+ const imageContainer = bubble.querySelector('.similar-artist-bubble-image');
+ if (imageContainer) {
+ const artistName = bubble.querySelector('.similar-artist-bubble-name')?.textContent || 'Artist';
+ imageContainer.innerHTML = `⚠️
+ ${error.message}
+ 🎵
`;
+ bubble.setAttribute('data-needs-image', 'true');
+ };
+
+ imageContainer.appendChild(img);
+ } else {
+ // No image - show fallback (will be lazy loaded)
+ imageContainer.innerHTML = `🎵
`;
+ }
+
+ // Create name element
+ const name = document.createElement('div');
+ name.className = 'similar-artist-bubble-name';
+ name.textContent = artist.name;
+ name.title = artist.name; // Tooltip for full name
+
+ // Optional: Create genres element (hidden by default in CSS)
+ const genres = document.createElement('div');
+ genres.className = 'similar-artist-bubble-genres';
+ if (artist.genres && artist.genres.length > 0) {
+ genres.textContent = artist.genres.slice(0, 2).join(', ');
+ }
+
+ // Assemble bubble
+ bubble.appendChild(imageContainer);
+ bubble.appendChild(name);
+ if (artist.genres && artist.genres.length > 0) {
+ bubble.appendChild(genres);
+ }
+
+ // Add click handler to navigate to artist detail page
+ bubble.addEventListener('click', () => {
+ console.log(`🎵 Clicked similar artist: ${artist.name} (ID: ${artist.id})`);
+ // Navigate to this artist's detail page (same as clicking from search results)
+ selectArtistForDetail(
+ artist,
+ artist.source ? { source: artist.source, plugin: artist.plugin } : {}
+ );
+ });
+
+ return bubble;
+}
+
+/**
+ * Restore cached completion data without re-scanning the database
+ */
+function restoreCachedCompletionData(artistId) {
+ console.log(`📦 Restoring cached completion data for artist: ${artistId}`);
+
+ const cachedData = artistsPageState.cache.completionData[artistId];
+ if (!cachedData) {
+ console.log('⚠️ No cached completion data found, skipping restoration');
+ return;
+ }
+
+ // Restore album completion overlays
+ if (cachedData.albums) {
+ cachedData.albums.forEach(albumCompletion => {
+ updateAlbumCompletionOverlay(albumCompletion, 'albums');
+ });
+ console.log(`✅ Restored ${cachedData.albums.length} album completion overlays`);
+ }
+
+ // Restore singles completion overlays
+ if (cachedData.singles) {
+ cachedData.singles.forEach(singleCompletion => {
+ updateAlbumCompletionOverlay(singleCompletion, 'singles');
+ });
+ console.log(`✅ Restored ${cachedData.singles.length} single completion overlays`);
+ }
+}
+
+/**
+ * Check completion status for entire discography with streaming updates
+ */
+async function checkDiscographyCompletion(artistId, discography) {
+ console.log(`🔍 Starting streaming completion check for artist: ${artistId}`);
+
+ try {
+ // Create new abort controller for this completion check
+ artistCompletionController = new AbortController();
+
+ // Use fetch with streaming response
+ const response = await fetch(`/api/artist/${artistId}/completion-stream`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ discography: discography,
+ artist_name: artistsPageState.selectedArtist?.name || 'Unknown Artist',
+ source: discography?.source || artistsPageState.sourceOverride || null,
+ }),
+ signal: artistCompletionController.signal
+ });
+
+ if (!response.ok) {
+ throw new Error(`Failed to start completion check: ${response.status}`);
+ }
+
+ // Handle streaming response
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+
+ const chunk = decoder.decode(value);
+ const lines = chunk.split('\n');
+
+ for (const line of lines) {
+ if (line.startsWith('data: ')) {
+ try {
+ const data = JSON.parse(line.slice(6));
+ handleStreamingCompletionUpdate(data);
+ } catch (e) {
+ console.warn('Failed to parse streaming data:', line);
+ }
+ }
+ }
+ }
+
+ // Clear the controller when done
+ artistCompletionController = null;
+
+ } catch (error) {
+ // Don't show error if it was aborted (user navigated away)
+ if (error.name === 'AbortError') {
+ console.log('⏹️ Completion check aborted (user navigated to new artist)');
+ return;
+ }
+
+ console.error('❌ Failed to check completion status:', error);
+ showCompletionError();
+ } finally {
+ // Always clear the controller
+ artistCompletionController = null;
+ }
+}
+
+/**
+ * Handle individual streaming completion updates
+ */
+function handleStreamingCompletionUpdate(data) {
+ console.log('🔄 Streaming update received:', data.type, data.name || data.artist_name);
+
+ switch (data.type) {
+ case 'start':
+ console.log(`🎤 Starting completion check for ${data.artist_name} (${data.total_items} items)`);
+ // Initialize cache for this artist if not exists
+ const artistId = artistsPageState.selectedArtist?.id;
+ if (artistId && !artistsPageState.cache.completionData[artistId]) {
+ artistsPageState.cache.completionData[artistId] = {
+ albums: [],
+ singles: []
+ };
+ }
+ break;
+
+ case 'album_completion':
+ updateAlbumCompletionOverlay(data, 'albums');
+ // Cache the completion data
+ cacheCompletionData(data, 'albums');
+ console.log(`📀 Updated album: ${data.name} (${data.status})`);
+ break;
+
+ case 'single_completion':
+ updateAlbumCompletionOverlay(data, 'singles');
+ // Cache the completion data
+ cacheCompletionData(data, 'singles');
+ console.log(`🎵 Updated single: ${data.name} (${data.status})`);
+ break;
+
+ case 'error':
+ console.error('❌ Error processing item:', data.name, data.error);
+ // Could show error for specific item
+ break;
+
+ case 'complete':
+ console.log(`✅ Completion check finished (${data.processed_count} items processed)`);
+ break;
+
+ default:
+ console.log('Unknown streaming update type:', data.type);
+ }
+}
+
+/**
+ * Cache completion data for future restoration
+ */
+function cacheCompletionData(completionData, type) {
+ const artistId = artistsPageState.selectedArtist?.id;
+ if (!artistId) return;
+
+ // Ensure cache structure exists
+ if (!artistsPageState.cache.completionData[artistId]) {
+ artistsPageState.cache.completionData[artistId] = {
+ albums: [],
+ singles: []
+ };
+ }
+
+ // Add to appropriate cache array
+ if (type === 'albums') {
+ artistsPageState.cache.completionData[artistId].albums.push(completionData);
+ } else if (type === 'singles') {
+ artistsPageState.cache.completionData[artistId].singles.push(completionData);
+ }
+}
+
+/**
+ * Update completion overlay for a specific album/single
+ */
+function updateAlbumCompletionOverlay(completionData, containerType) {
+ const containerId = containerType === 'albums' ? 'album-cards-container' : 'singles-cards-container';
+ const container = document.getElementById(containerId);
+
+ if (!container) {
+ console.warn(`Container ${containerId} not found`);
+ return;
+ }
+
+ // Find the album card by data-album-id
+ const albumCard = container.querySelector(`[data-album-id="${completionData.id}"]`);
+
+ if (!albumCard) {
+ console.warn(`Album card not found for ID: ${completionData.id}`);
+ return;
+ }
+
+ // Reclassify and move cards when track count reveals single/EP (Discogs lazy fetch)
+ const currentType = albumCard.dataset.albumType;
+ const expectedTracks = completionData.expected_tracks || 0;
+ if (expectedTracks > 0) {
+ albumCard.dataset.totalTracks = expectedTracks;
+ let newType = currentType;
+ if (currentType === 'album' && expectedTracks <= 3) newType = 'single';
+ else if (currentType === 'album' && expectedTracks <= 6) newType = 'ep';
+
+ if (newType !== currentType) {
+ albumCard.dataset.albumType = newType;
+ const typeEl = albumCard.querySelector('.album-card-type');
+ if (typeEl) typeEl.textContent = newType === 'single' ? 'Single' : 'EP';
+
+ // Move card from albums grid to singles grid
+ const singlesGrid = document.getElementById('singles-grid');
+ const singlesSection = singlesGrid?.closest('.discography-section');
+ if (singlesGrid) {
+ albumCard.remove();
+ singlesGrid.appendChild(albumCard);
+ if (singlesSection) singlesSection.style.display = '';
+ }
+ }
+ }
+
+ const overlay = albumCard.querySelector('.completion-overlay');
+ if (!overlay) {
+ console.warn(`Completion overlay not found for album: ${completionData.name}`);
+ return;
+ }
+
+ // Remove existing status classes
+ overlay.classList.remove('checking', 'completed', 'nearly_complete', 'partial', 'missing', 'downloading', 'downloaded', 'error');
+
+ // Add new status class
+ overlay.classList.add(completionData.status);
+
+ // Update overlay text and content
+ const statusText = getCompletionStatusText(completionData);
+ const progressText = completionData.expected_tracks > 0
+ ? `${completionData.owned_tracks}/${completionData.expected_tracks}`
+ : '';
+
+ overlay.innerHTML = progressText
+ ? `${statusText}${progressText}`
+ : `${statusText}`;
+
+ // Add tooltip with more details
+ overlay.title = `${completionData.name}\n${statusText} (${completionData.completion_percentage}%)\nTracks: ${completionData.owned_tracks}/${completionData.expected_tracks}\nConfidence: ${completionData.confidence}`;
+
+ // Add brief flash animation to indicate update
+ overlay.style.animation = 'none';
+ overlay.offsetHeight; // Trigger reflow
+ overlay.style.animation = 'completionOverlayFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
+
+ console.log(`📊 Updated overlay for "${completionData.name}": ${statusText} (${completionData.completion_percentage}%)`);
+}
+
+/**
+ * Get human-readable status text for completion overlay
+ */
+function getCompletionStatusText(completionData) {
+ switch (completionData.status) {
+ case 'completed':
+ return 'Complete';
+ case 'nearly_complete':
+ return 'Nearly Complete';
+ case 'partial':
+ return 'Partial';
+ case 'missing':
+ return 'Missing';
+ case 'downloading':
+ return 'Downloading...';
+ case 'downloaded':
+ return 'Downloaded';
+ case 'error':
+ return 'Error';
+ default:
+ return 'Unknown';
+ }
+}
+
+/**
+ * Set album to downloaded status after download finishes
+ */
+function setAlbumDownloadedStatus(albumId) {
+ console.log(`✅ [DOWNLOAD COMPLETE] Setting album ${albumId} to downloaded status`);
+
+ const completionData = {
+ id: albumId,
+ status: 'downloaded',
+ owned_tracks: 0,
+ expected_tracks: 0,
+ name: 'Downloaded',
+ completion_percentage: 100
+ };
+
+ // Find if it's in albums or singles container
+ let containerType = 'albums';
+ let albumCard = document.querySelector(`#album-cards-container [data-album-id="${albumId}"]`);
+ if (!albumCard) {
+ containerType = 'singles';
+ albumCard = document.querySelector(`#singles-cards-container [data-album-id="${albumId}"]`);
+ }
+
+ if (albumCard) {
+ updateAlbumCompletionOverlay(completionData, containerType);
+ console.log(`✅ [DOWNLOAD COMPLETE] Album ${albumId} set to Downloaded status`);
+ } else {
+ console.warn(`❌ [DOWNLOAD COMPLETE] Album card not found for ID: "${albumId}"`);
+ }
+}
+
+/**
+ * Set album to downloading status
+ */
+function setAlbumDownloadingStatus(albumId, downloaded = 0, total = 0) {
+ console.log(`🔍 [DOWNLOAD STATUS] Searching for album card with ID: "${albumId}"`);
+
+ const completionData = {
+ id: albumId,
+ status: 'downloading',
+ owned_tracks: downloaded,
+ expected_tracks: total,
+ name: 'Downloading',
+ completion_percentage: Math.round((downloaded / total) * 100) || 0
+ };
+
+ // Find if it's in albums or singles container
+ let containerType = 'albums';
+ let albumCard = document.querySelector(`#album-cards-container [data-album-id="${albumId}"]`);
+ if (!albumCard) {
+ containerType = 'singles';
+ albumCard = document.querySelector(`#singles-cards-container [data-album-id="${albumId}"]`);
+ }
+
+ if (albumCard) {
+ console.log(`✅ [DOWNLOAD STATUS] Found album card in ${containerType} container, updating overlay`);
+ updateAlbumCompletionOverlay(completionData, containerType);
+ } else {
+ console.warn(`❌ [DOWNLOAD STATUS] Album card not found for ID: "${albumId}"`);
+ // Debug: List all available album cards
+ const allAlbums = document.querySelectorAll('#album-cards-container [data-album-id], #singles-cards-container [data-album-id]');
+ console.log(`🔍 [DEBUG] Available album IDs:`, Array.from(allAlbums).map(card => card.dataset.albumId));
+ }
+}
+
+/**
+ * Show error state on all completion overlays
+ */
+function showCompletionError() {
+ const allOverlays = document.querySelectorAll('.completion-overlay.checking');
+ allOverlays.forEach(overlay => {
+ overlay.classList.remove('checking');
+ overlay.classList.add('error');
+ overlay.innerHTML = 'Error';
+ overlay.title = 'Failed to check completion status';
+ });
+}
+
+/**
+ * Create HTML for an album/single card
+ */
+function createAlbumCardHTML(album) {
+ const imageUrl = album.image_url || '';
+ const year = album.release_date ? new Date(album.release_date).getFullYear() : '';
+ const type = album.album_type === 'album' ? 'Album' :
+ album.album_type === 'single' ? 'Single' : 'EP';
+
+ // Use data-bg-src for lazy background loading via IntersectionObserver
+ const backgroundAttr = imageUrl ?
+ `data-bg-src="${imageUrl}"` :
+ `style="background: linear-gradient(135deg, rgba(29, 185, 84, 0.2) 0%, rgba(24, 156, 71, 0.1) 100%);"`;
+
+ return `
+
+
+
+
+ `;
+}
+
+/**
+ * Initialize artist detail tabs
+ */
+function initializeArtistTabs() {
+ const tabButtons = document.querySelectorAll('.artist-tab');
+ const tabContents = document.querySelectorAll('.tab-content');
+
+ tabButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const tabName = button.getAttribute('data-tab');
+
+ // Update button states
+ tabButtons.forEach(btn => btn.classList.remove('active'));
+ button.classList.add('active');
+
+ // Update content states
+ tabContents.forEach(content => {
+ content.classList.remove('active');
+ if (content.id === `${tabName}-content`) {
+ content.classList.add('active');
+ }
+ });
+
+ console.log(`🔄 Switched to ${tabName} tab`);
+ });
+ });
+}
+
+/**
+ * State management functions
+ */
+function showArtistsSearchState() {
+ console.log('🔄 Showing search state');
+
+ // Cancel any ongoing completion check when navigating back to search
+ if (artistCompletionController) {
+ console.log('⏹️ Canceling completion check (navigating back to search)');
+ artistCompletionController.abort();
+ artistCompletionController = null;
+ }
+
+ // Cancel any ongoing similar artists stream when navigating back to search
+ if (similarArtistsController) {
+ console.log('⏹️ Canceling similar artists stream (navigating back to search)');
+ similarArtistsController.abort();
+ similarArtistsController = null;
+ }
+
+ const searchState = document.getElementById('artists-search-state');
+ const resultsState = document.getElementById('artists-results-state');
+ const detailState = document.getElementById('artist-detail-state');
+
+ if (searchState) {
+ searchState.classList.remove('hidden', 'fade-out');
+ }
+ if (resultsState) {
+ resultsState.classList.add('hidden');
+ resultsState.classList.remove('show');
+ }
+ if (detailState) {
+ detailState.classList.add('hidden');
+ detailState.classList.remove('show');
+ }
+
+ artistsPageState.currentView = 'search';
+ updateArtistsSearchStatus('default');
+
+ // Show artist downloads section if there are active downloads
+ showArtistDownloadsSection();
+}
+
+function showArtistsResultsState() {
+ console.log('🔄 Showing results state');
+
+ // Cancel any ongoing completion check when navigating back
+ if (artistCompletionController) {
+ console.log('⏹️ Canceling completion check (navigating back to results)');
+ artistCompletionController.abort();
+ artistCompletionController = null;
+ }
+
+ // Cancel any ongoing similar artists stream when navigating back
+ if (similarArtistsController) {
+ console.log('⏹️ Canceling similar artists stream (navigating back to results)');
+ similarArtistsController.abort();
+ similarArtistsController = null;
+ }
+
+ // Clear artist-specific data when navigating back to results
+ // This ensures that selecting the same artist again will trigger a fresh scan
+ if (artistsPageState.selectedArtist) {
+ const artistId = artistsPageState.selectedArtist.id;
+ console.log(`🗑️ Clearing cached data for artist: ${artistsPageState.selectedArtist.name}`);
+
+ // Clear artist-specific cache data
+ delete artistsPageState.cache.completionData[artistId];
+ delete artistsPageState.cache.discography[artistId];
+
+ // Clear artist state
+ artistsPageState.selectedArtist = null;
+ artistsPageState.artistDiscography = { albums: [], singles: [] };
+ }
+
+ const searchState = document.getElementById('artists-search-state');
+ const resultsState = document.getElementById('artists-results-state');
+ const detailState = document.getElementById('artist-detail-state');
+
+ if (searchState) {
+ searchState.classList.add('fade-out');
+ setTimeout(() => searchState.classList.add('hidden'), 200);
+ }
+ if (resultsState) {
+ resultsState.classList.remove('hidden');
+ setTimeout(() => resultsState.classList.add('show'), 50);
+ }
+ if (detailState) {
+ detailState.classList.add('hidden');
+ detailState.classList.remove('show');
+ }
+
+ artistsPageState.currentView = 'results';
+}
+
+function showArtistDetailState() {
+ console.log('🔄 Showing detail state');
+
+ const searchState = document.getElementById('artists-search-state');
+ const resultsState = document.getElementById('artists-results-state');
+ const detailState = document.getElementById('artist-detail-state');
+
+ if (searchState) {
+ searchState.classList.add('hidden', 'fade-out');
+ }
+ if (resultsState) {
+ resultsState.classList.add('hidden');
+ resultsState.classList.remove('show');
+ }
+ if (detailState) {
+ detailState.classList.remove('hidden');
+ setTimeout(() => detailState.classList.add('show'), 50);
+ }
+
+ artistsPageState.currentView = 'detail';
+}
+
+/**
+ * Update search status text and styling
+ */
+function updateArtistsSearchStatus(status, message = null) {
+ const statusElement = document.getElementById('artists-search-status');
+ if (!statusElement) return;
+
+ // Clear all status classes
+ statusElement.classList.remove('searching', 'error');
+
+ switch (status) {
+ case 'default':
+ statusElement.textContent = 'Start typing to search for artists';
+ break;
+ case 'searching':
+ statusElement.classList.add('searching');
+ statusElement.textContent = 'Searching for artists...';
+ break;
+ case 'error':
+ statusElement.classList.add('error');
+ statusElement.innerHTML = `
+
+
+ ${escapeHtml(album.name)}
+ ${year || 'Unknown'}
+ ${type}
+ ${message || 'Search failed. Please try again.'}
+
+ `;
+ break;
+ }
+}
+
+/**
+ * Retry the last search query
+ */
+function retryLastSearch() {
+ const searchInput = document.getElementById('artists-search-input');
+ const headerSearchInput = document.getElementById('artists-header-search-input');
+
+ // Get the last search query from either input
+ const query = searchInput?.value?.trim() || headerSearchInput?.value?.trim() || artistsPageState.searchQuery;
+
+ if (query) {
+ console.log(`🔄 Retrying search for: "${query}"`);
+ performArtistsSearch(query);
+ }
+}
+
+/**
+ * Update artist detail header with artist info
+ */
+function updateArtistDetailHeader(artist) {
+ const _esc = (s) => (s || '').replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
+ const info = artist.artist_info || {};
+ const imageUrl = artist.image_url || info.image_url || '';
+
+ // Background blur
+ const heroBg = document.getElementById('artists-hero-bg');
+ if (heroBg) {
+ heroBg.style.backgroundImage = imageUrl ? `url('${imageUrl}')` : 'none';
+ }
+
+ // Artist image
+ const heroImage = document.getElementById('artists-hero-image');
+ if (heroImage) {
+ if (imageUrl) {
+ heroImage.style.backgroundImage = `url('${imageUrl}')`;
+ heroImage.innerHTML = '';
+ } else {
+ heroImage.style.backgroundImage = 'none';
+ heroImage.innerHTML = '🎤';
+ // Lazy load
+ fetch(`/api/artist/${artist.id}/image`)
+ .then(r => r.json())
+ .then(d => {
+ if (d.success && d.image_url) {
+ heroImage.style.backgroundImage = `url('${d.image_url}')`;
+ heroImage.innerHTML = '';
+ if (heroBg) heroBg.style.backgroundImage = `url('${d.image_url}')`;
+ artist.image_url = d.image_url;
+ }
+ }).catch(() => { });
+ }
+ }
+
+ // Name
+ const heroName = document.getElementById('artists-hero-name');
+ if (heroName) heroName.textContent = artist.name || 'Unknown Artist';
+
+ // Badges (service links — real logos matching library page)
+ const badgesEl = document.getElementById('artists-hero-badges');
+ if (badgesEl) {
+ const _hb = (logo, fallback, title, url) => {
+ const inner = logo
+ ? `${inner}
`;
+ };
+ const badges = [];
+ if (info.spotify_artist_id) badges.push(_hb(SPOTIFY_LOGO_URL, 'SP', 'Spotify', `https://open.spotify.com/artist/${info.spotify_artist_id}`));
+ if (info.musicbrainz_id || artist.musicbrainz_id) badges.push(_hb(MUSICBRAINZ_LOGO_URL, 'MB', 'MusicBrainz', `https://musicbrainz.org/artist/${info.musicbrainz_id || artist.musicbrainz_id}`));
+ if (info.deezer_id) badges.push(_hb(DEEZER_LOGO_URL, 'Dz', 'Deezer', `https://www.deezer.com/artist/${info.deezer_id}`));
+ if (info.itunes_artist_id) badges.push(_hb(ITUNES_LOGO_URL, 'IT', 'Apple Music', `https://music.apple.com/artist/${info.itunes_artist_id}`));
+ if (info.lastfm_url) badges.push(_hb(LASTFM_LOGO_URL, 'LFM', 'Last.fm', info.lastfm_url));
+ if (info.genius_url) badges.push(_hb(GENIUS_LOGO_URL, 'GEN', 'Genius', info.genius_url));
+ if (info.tidal_id) badges.push(_hb(TIDAL_LOGO_URL, 'TD', 'Tidal', `https://tidal.com/browse/artist/${info.tidal_id}`));
+ if (info.qobuz_id) badges.push(_hb(QOBUZ_LOGO_URL, 'Qz', 'Qobuz', `https://www.qobuz.com/artist/${info.qobuz_id}`));
+ if (info.discogs_id) badges.push(_hb(DISCOGS_LOGO_URL, 'DC', 'Discogs', `https://www.discogs.com/artist/${info.discogs_id}`));
+ badgesEl.innerHTML = badges.join('');
+ }
+
+ // Genres (pill tags — merge with Last.fm tags, deduplicated)
+ const genresEl = document.getElementById('artists-hero-genres');
+ if (genresEl) {
+ let genres = info.genres || artist.genres || [];
+ // Merge Last.fm tags
+ const lfmTags = info.lastfm_tags || [];
+ if (Array.isArray(lfmTags) && lfmTags.length > 0) {
+ const existing = new Set(genres.map(g => g.toLowerCase()));
+ const newTags = lfmTags.filter(t => !existing.has(t.toLowerCase()));
+ genres = [...genres, ...newTags];
+ }
+ if (genres.length > 0) {
+ genresEl.innerHTML = genres.slice(0, 8).map(g =>
+ `${_esc(g)}`
+ ).join('');
+ } else {
+ genresEl.innerHTML = '';
+ }
+ }
+
+ // Bio (Last.fm bio or summary fallback — matching library page pattern)
+ const bioEl = document.getElementById('artists-hero-bio');
+ if (bioEl) {
+ const bio = info.lastfm_bio || info.bio || '';
+ if (bio) {
+ // Strip HTML tags and "Read more on Last.fm" links
+ let cleanBio = bio.replace(/
+
+
+ `.repeat(4);
+
+ if (albumsContainer) albumsContainer.innerHTML = loadingHtml;
+ if (singlesContainer) singlesContainer.innerHTML = loadingHtml;
+}
+
+/**
+ * Show error state for discography
+ */
+function showDiscographyError(message = 'Failed to load discography') {
+ const albumsContainer = document.getElementById('album-cards-container');
+ const singlesContainer = document.getElementById('singles-cards-container');
+
+ const errorHtml = `
+
+
+ Loading...
+ -
+ -
+
+
+ `;
+
+ if (albumsContainer) albumsContainer.innerHTML = errorHtml;
+ if (singlesContainer) singlesContainer.innerHTML = errorHtml;
+}
+
+/**
+ * Show loading cards while searching
+ */
+function showSearchLoadingCards() {
+ const container = document.getElementById('artists-cards-container');
+ if (!container) return;
+
+ const loadingCardHtml = `
+ ⚠️
+ Failed to load discography
+ ${escapeHtml(message)}
+
+
+
+
+ `;
+
+ // Show 6 loading cards
+ container.innerHTML = loadingCardHtml.repeat(6);
+}
+
+// ===============================
+// ARTIST ALBUM DOWNLOAD MISSING TRACKS INTEGRATION
+// ===============================
+
+/**
+ * Get the completion status of an album from cached data or DOM
+ * @param {string} albumId - The album ID
+ * @param {string} albumType - The album type ('albums' or 'singles')
+ * @returns {Object|null} - Completion status object or null
+ */
+function getAlbumCompletionStatus(albumId, albumType) {
+ try {
+ // First, check cached completion data
+ const artistId = artistsPageState.selectedArtist?.id;
+ if (artistId && artistsPageState.cache.completionData[artistId]) {
+ const cachedData = artistsPageState.cache.completionData[artistId];
+ const dataArray = albumType === 'albums' ? cachedData.albums : cachedData.singles;
+
+ if (dataArray) {
+ const completionData = dataArray.find(item => item.album_id === albumId || item.id === albumId);
+ if (completionData) {
+ console.log(`📊 Found cached completion data for album ${albumId}:`, completionData);
+ return completionData;
+ }
+ }
+ }
+
+ // Fallback: Check DOM completion overlay
+ const containerId = albumType === 'albums' ? 'album-cards-container' : 'singles-cards-container';
+ const container = document.getElementById(containerId);
+
+ if (container) {
+ const albumCard = container.querySelector(`[data-album-id="${albumId}"]`);
+ if (albumCard) {
+ const overlay = albumCard.querySelector('.completion-overlay');
+ if (overlay) {
+ // Extract status from overlay classes
+ const classList = Array.from(overlay.classList);
+ const statusClasses = ['completed', 'nearly_complete', 'partial', 'missing', 'downloading', 'downloaded', 'error'];
+ const status = statusClasses.find(cls => classList.includes(cls));
+
+ if (status) {
+ console.log(`📊 Found DOM completion status for album ${albumId}: ${status}`);
+ return { status, completion_percentage: status === 'completed' ? 100 : 0 };
+ }
+ }
+ }
+ }
+
+ console.warn(`⚠️ No completion status found for album ${albumId}`);
+ return null;
+
+ } catch (error) {
+ console.error(`❌ Error getting album completion status for ${albumId}:`, error);
+ return null;
+ }
+}
+
+/**
+ * Handle album/single/EP click to open download missing tracks modal
+ */
+async function handleArtistAlbumClick(album, albumType) {
+ console.log(`🎵 Album clicked: ${album.name} (${album.album_type}) from artist: ${artistsPageState.selectedArtist?.name}`);
+
+ if (!artistsPageState.selectedArtist) {
+ console.error('❌ No selected artist found');
+ showToast('Error: No artist selected', 'error');
+ return;
+ }
+
+ showLoadingOverlay('Loading album...');
+
+ try {
+ // Check completion status of the album
+ const completionStatus = getAlbumCompletionStatus(album.id, albumType);
+ console.log(`📊 Album completion status: ${completionStatus?.status || 'unknown'} (${completionStatus?.completion_percentage || 0}%)`);
+
+ // For Artists page, always use Download Missing Tracks modal to analyze and download
+ console.log(`🔄 Opening download missing tracks modal for album analysis`);
+
+ // Create virtual playlist ID
+ const virtualPlaylistId = `artist_album_${artistsPageState.selectedArtist.id}_${album.id}`;
+
+ // Check if modal already exists and show it
+ if (activeDownloadProcesses[virtualPlaylistId]) {
+ console.log(`📱 Reopening existing modal for ${album.name}`);
+ const process = activeDownloadProcesses[virtualPlaylistId];
+ if (process.modalElement) {
+ if (process.status === 'complete') {
+ showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+ }
+ process.modalElement.style.display = 'flex';
+ hideLoadingOverlay();
+ return;
+ }
+ }
+
+ // Create virtual playlist and open modal
+ // Note: Don't hide loading overlay here - let the flow continue through to the modal
+ await createArtistAlbumVirtualPlaylist(album, albumType);
+
+ } catch (error) {
+ hideLoadingOverlay();
+ console.error('❌ Error handling album click:', error);
+ showToast(`Error opening download modal: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Create virtual playlist for artist album and open download missing tracks modal
+ */
+async function createArtistAlbumVirtualPlaylist(album, albumType) {
+ const artist = artistsPageState.selectedArtist;
+ const virtualPlaylistId = `artist_album_${artist.id}_${album.id}`;
+
+ console.log(`🎵 Creating virtual playlist for: ${artist.name} - ${album.name}`);
+
+ try {
+ // Loading overlay already shown by handleArtistAlbumClick
+
+ // Fetch album tracks from backend (pass name/artist for Hydrabase support)
+ const _aat1 = new URLSearchParams({ name: album.name || '', artist: artist.name || '' });
+ if (artistsPageState.sourceOverride) {
+ _aat1.set('source', artistsPageState.sourceOverride);
+ }
+ if (artistsPageState.pluginOverride) {
+ _aat1.set('plugin', artistsPageState.pluginOverride);
+ }
+ const response = await fetch(`/api/album/${album.id}/tracks?${_aat1}`);
+
+ if (!response.ok) {
+ if (response.status === 401) {
+ throw new Error('Spotify not authenticated. Please check your API settings.');
+ }
+ const errData = await response.json().catch(() => ({}));
+ throw new Error(errData.error || `Failed to load album tracks: ${response.status}`);
+ }
+
+ const data = await response.json();
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ throw new Error('No tracks found for this album');
+ }
+
+ console.log(`✅ Loaded ${data.tracks.length} tracks for ${data.album.name}`);
+
+ // Use album data from API response (has complete data including images array)
+ const fullAlbumData = data.album;
+
+ // Format playlist name with artist and album info
+ const playlistName = `[${artist.name}] ${fullAlbumData.name}`;
+
+ // Open download missing tracks modal with formatted tracks
+ // Pass false for showLoadingOverlay since we already have one from handleArtistAlbumClick
+ // Use fullAlbumData from API response instead of album parameter
+ await openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlistName, data.tracks, fullAlbumData, artist, false);
+
+ // Track this download for artist bubble management
+ registerArtistDownload(artist, album, virtualPlaylistId, albumType);
+
+ } catch (error) {
+ console.error('❌ Error creating virtual playlist:', error);
+ showToast(`Failed to load album: ${error.message}`, 'error');
+ throw error;
+ }
+}
+
+/**
+ * Open download missing tracks modal specifically for artist albums
+ * Similar to openDownloadMissingModalForYouTube but for artist albums
+ */
+async function openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlistName, spotifyTracks, album, artist, showLoadingOverlayParam = true, contextType = 'artist_album') {
+ if (showLoadingOverlayParam) {
+ showLoadingOverlay('Loading album...');
+ }
+ // Check if a process is already active for this virtual playlist
+ if (activeDownloadProcesses[virtualPlaylistId]) {
+ console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
+ const process = activeDownloadProcesses[virtualPlaylistId];
+ if (process.modalElement) {
+ if (process.status === 'complete') {
+ showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+ }
+ process.modalElement.style.display = 'flex';
+ if (showLoadingOverlayParam) {
+ hideLoadingOverlay();
+ }
+ }
+ return;
+ }
+
+ console.log(`📥 Opening Download Missing Tracks modal for artist album: ${virtualPlaylistId}`);
+
+ // Create virtual playlist object for compatibility with existing modal logic
+ const virtualPlaylist = {
+ id: virtualPlaylistId,
+ name: playlistName,
+ track_count: spotifyTracks.length
+ };
+
+ // Store the tracks in the cache for the modal to use
+ playlistTrackCache[virtualPlaylistId] = spotifyTracks;
+ currentPlaylistTracks = spotifyTracks;
+ currentModalPlaylistId = virtualPlaylistId;
+
+ let modal = document.createElement('div');
+ modal.id = `download-missing-modal-${virtualPlaylistId}`;
+ modal.className = 'download-missing-modal';
+ modal.style.display = 'none';
+ document.body.appendChild(modal);
+
+ // Register the new process in our global state tracker using the same structure as other modals
+ activeDownloadProcesses[virtualPlaylistId] = {
+ status: 'idle',
+ modalElement: modal,
+ poller: null,
+ batchId: null,
+ playlist: virtualPlaylist,
+ tracks: spotifyTracks,
+ // Additional metadata for artist albums
+ artist: artist,
+ album: album,
+ albumType: album.album_type
+ };
+
+ // Generate hero section — 'artist_album' for releases, 'playlist' for charts/compilations
+ const heroContext = contextType === 'playlist' ? {
+ type: 'playlist',
+ playlist: { name: playlistName, owner: 'Beatport' },
+ trackCount: spotifyTracks.length,
+ playlistId: virtualPlaylistId
+ } : {
+ type: 'artist_album',
+ artist: artist,
+ album: album,
+ trackCount: spotifyTracks.length,
+ playlistId: virtualPlaylistId
+ };
+
+ // Use the exact same modal HTML structure as the existing modals
+ modal.innerHTML = `
+
+ `;
+
+ applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
+ modal.style.display = 'flex';
+ hideLoadingOverlay();
+
+ console.log(`✅ Successfully opened download missing tracks modal for: ${playlistName}`);
+}
+
+// ===============================
+// ARTIST DOWNLOADS MANAGEMENT SYSTEM
+// ===============================
+
+/**
+ * Register a new artist download for bubble management
+ */
+function registerArtistDownload(artist, album, virtualPlaylistId, albumType) {
+ console.log(`📝 Registering artist download: ${artist.name} - ${album.name}`);
+
+ const artistId = artist.id;
+
+ // Initialize artist bubble if it doesn't exist
+ if (!artistDownloadBubbles[artistId]) {
+ artistDownloadBubbles[artistId] = {
+ artist: artist,
+ downloads: [],
+ element: null,
+ hasCompletedDownloads: false
+ };
+ }
+
+ // Add this download to the artist's downloads
+ const downloadInfo = {
+ virtualPlaylistId: virtualPlaylistId,
+ album: album,
+ albumType: albumType,
+ status: 'in_progress', // 'in_progress', 'completed', 'view_results'
+ startTime: new Date()
+ };
+
+ artistDownloadBubbles[artistId].downloads.push(downloadInfo);
+
+ // Show/update the artist downloads section
+ updateArtistDownloadsSection();
+
+ // Save snapshot of current state
+ saveArtistBubbleSnapshot();
+
+ // Monitor this download for completion
+ monitorArtistDownload(artistId, virtualPlaylistId);
+}
+
+/**
+ * Debounced update for artist downloads section to prevent rapid updates
+ */
+function updateArtistDownloadsSection() {
+ if (downloadsUpdateTimeout) {
+ clearTimeout(downloadsUpdateTimeout);
+ }
+ downloadsUpdateTimeout = setTimeout(() => {
+ showArtistDownloadsSection();
+ showLibraryDownloadsSection();
+ showBeatportDownloadsSection();
+ updateDashboardDownloads();
+ }, 300); // 300ms debounce
+}
+
+// --- Artist Bubble Snapshot System ---
+
+let snapshotSaveTimeout = null; // Debounce snapshot saves
+
+async function saveArtistBubbleSnapshot() {
+ /**
+ * Saves current artistDownloadBubbles state to backend for persistence.
+ * Debounced to prevent excessive backend calls.
+ */
+
+ // Clear any existing timeout
+ if (snapshotSaveTimeout) {
+ clearTimeout(snapshotSaveTimeout);
+ }
+
+ // Debounce the actual save
+ snapshotSaveTimeout = setTimeout(async () => {
+ try {
+ const bubbleCount = Object.keys(artistDownloadBubbles).length;
+
+ // Don't save empty state
+ if (bubbleCount === 0) {
+ console.log('📸 Skipping snapshot save - no artist bubbles to save');
+ return;
+ }
+
+ console.log(`📸 Saving artist bubble snapshot: ${bubbleCount} artists`);
+
+ // Prepare snapshot data (clean up DOM references)
+ const cleanBubbles = {};
+ for (const [artistId, bubbleData] of Object.entries(artistDownloadBubbles)) {
+ cleanBubbles[artistId] = {
+ artist: bubbleData.artist,
+ downloads: bubbleData.downloads.map(download => ({
+ virtualPlaylistId: download.virtualPlaylistId,
+ album: download.album,
+ albumType: download.albumType,
+ status: download.status,
+ startTime: download.startTime instanceof Date ? download.startTime.toISOString() : download.startTime
+ })),
+ hasCompletedDownloads: bubbleData.hasCompletedDownloads
+ };
+ }
+
+ const response = await fetch('/api/artist_bubbles/snapshot', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ bubbles: cleanBubbles
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ console.log(`✅ Artist bubble snapshot saved: ${bubbleCount} artists`);
+ } else {
+ console.error('❌ Failed to save artist bubble snapshot:', data.error);
+ }
+
+ } catch (error) {
+ console.error('❌ Error saving artist bubble snapshot:', error);
+ }
+ }, 1000); // 1 second debounce
+}
+
+async function hydrateArtistBubblesFromSnapshot() {
+ /**
+ * Hydrates artist download bubbles from backend snapshot with live status.
+ * Called on page load to restore bubble state.
+ */
+ try {
+ console.log('🔄 Loading artist bubble snapshot from backend...');
+
+ const response = await fetch('/api/artist_bubbles/hydrate');
+ const data = await response.json();
+
+ if (!data.success) {
+ console.error('❌ Failed to load artist bubble snapshot:', data.error);
+ return;
+ }
+
+ const bubbles = data.bubbles || {};
+ const stats = data.stats || {};
+
+ console.log(`🔄 Loaded bubble snapshot: ${stats.total_artists || 0} artists, ${stats.active_downloads || 0} active, ${stats.completed_downloads || 0} completed`);
+
+ if (Object.keys(bubbles).length === 0) {
+ console.log('ℹ️ No artist bubbles to hydrate');
+ return;
+ }
+
+ // Clear existing state
+ artistDownloadBubbles = {};
+
+ // Restore artistDownloadBubbles with hydrated data
+ for (const [artistId, bubbleData] of Object.entries(bubbles)) {
+ artistDownloadBubbles[artistId] = {
+ artist: bubbleData.artist,
+ downloads: bubbleData.downloads.map(download => ({
+ virtualPlaylistId: download.virtualPlaylistId,
+ album: download.album,
+ albumType: download.albumType,
+ status: download.status, // Live status from backend
+ startTime: new Date(download.startTime)
+ })),
+ element: null, // Will be created when UI updates
+ hasCompletedDownloads: bubbleData.hasCompletedDownloads
+ };
+
+ console.log(`🔄 Hydrated artist: ${bubbleData.artist.name} (${bubbleData.downloads.length} downloads)`);
+
+ // Start monitoring for any in-progress downloads
+ for (const download of bubbleData.downloads) {
+ if (download.status === 'in_progress') {
+ console.log(`📡 Starting monitoring for: ${download.album.name}`);
+ monitorArtistDownload(artistId, download.virtualPlaylistId);
+ }
+ }
+ }
+
+ // Update UI to show hydrated bubbles
+ updateArtistDownloadsSection();
+
+ const totalArtists = Object.keys(artistDownloadBubbles).length;
+ console.log(`✅ Successfully hydrated ${totalArtists} artist download bubbles`);
+
+ } catch (error) {
+ console.error('❌ Error hydrating artist bubbles from snapshot:', error);
+ }
+}
+
+// --- Search Bubble Snapshot System ---
+
+async function saveSearchBubbleSnapshot() {
+ /**
+ * Saves current searchDownloadBubbles state to backend for persistence.
+ */
+ try {
+ // Rate limit saves to avoid spamming backend
+ if (saveSearchBubbleSnapshot.lastSaveTime) {
+ const timeSinceLastSave = Date.now() - saveSearchBubbleSnapshot.lastSaveTime;
+ if (timeSinceLastSave < 2000) {
+ console.log('⏱️ Skipping search bubble snapshot save (rate limited)');
+ return;
+ }
+ }
+
+ const bubbleCount = Object.keys(searchDownloadBubbles).length;
+
+ if (bubbleCount === 0) {
+ console.log('📸 Skipping snapshot save - no search bubbles to save');
+ return;
+ }
+
+ console.log(`📸 Saving search bubble snapshot: ${bubbleCount} artists`);
+
+ // Convert search bubbles to plain objects for serialization
+ const bubblesToSave = {};
+ for (const [artistName, bubbleData] of Object.entries(searchDownloadBubbles)) {
+ bubblesToSave[artistName] = {
+ artist: bubbleData.artist,
+ downloads: bubbleData.downloads.map(d => ({
+ virtualPlaylistId: d.virtualPlaylistId,
+ item: d.item,
+ type: d.type,
+ status: d.status,
+ startTime: d.startTime
+ }))
+ };
+ }
+
+ const response = await fetch('/api/search_bubbles/snapshot', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ bubbles: bubblesToSave })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ console.log(`✅ Search bubble snapshot saved: ${bubbleCount} artists`);
+ saveSearchBubbleSnapshot.lastSaveTime = Date.now();
+ } else {
+ console.error('❌ Failed to save search bubble snapshot:', data.error);
+ }
+
+ } catch (error) {
+ console.error('❌ Error saving search bubble snapshot:', error);
+ }
+}
+
+async function hydrateSearchBubblesFromSnapshot() {
+ /**
+ * Hydrates search download bubbles from backend snapshot with live status.
+ */
+ try {
+ console.log('🔄 Loading search bubble snapshot from backend...');
+
+ const response = await fetch('/api/search_bubbles/hydrate');
+ const data = await response.json();
+
+ if (!data.success) {
+ console.error('❌ Failed to load search bubble snapshot:', data.error);
+ return;
+ }
+
+ const bubbles = data.bubbles || {};
+ const stats = data.stats || {};
+
+ if (Object.keys(bubbles).length === 0) {
+ console.log('ℹ️ No search bubbles to hydrate');
+ return;
+ }
+
+ // Clear and restore search bubbles
+ searchDownloadBubbles = {};
+
+ for (const [artistName, bubbleData] of Object.entries(bubbles)) {
+ searchDownloadBubbles[artistName] = {
+ artist: bubbleData.artist,
+ downloads: bubbleData.downloads || []
+ };
+
+ console.log(`🔄 Hydrated artist: ${artistName} (${bubbleData.downloads.length} downloads)`);
+
+ // Setup monitoring for each download
+ for (const download of bubbleData.downloads) {
+ if (download.status === 'in_progress') {
+ monitorSearchDownload(artistName, download.virtualPlaylistId);
+ }
+ }
+ }
+
+ const totalArtists = Object.keys(searchDownloadBubbles).length;
+ console.log(`✅ Successfully hydrated ${totalArtists} search download bubbles`);
+
+ // Refresh display
+ showSearchDownloadBubbles();
+
+ } catch (error) {
+ console.error('❌ Error hydrating search bubbles from snapshot:', error);
+ }
+}
+
+/**
+ * Register a new search download for bubble management (grouped by artist)
+ */
+function registerSearchDownload(item, type, virtualPlaylistId, artistName) {
+ console.log(`📝 [REGISTER] Registering search download: ${item.name} (${type}) by ${artistName}`);
+
+ // Initialize artist bubble if it doesn't exist
+ if (!searchDownloadBubbles[artistName]) {
+ searchDownloadBubbles[artistName] = {
+ artist: {
+ name: artistName,
+ image_url: item.image_url || (item.images && item.images[0]?.url) || null
+ },
+ downloads: []
+ };
+ }
+
+ // Add this download to the artist's downloads
+ const downloadInfo = {
+ virtualPlaylistId: virtualPlaylistId,
+ item: item,
+ type: type, // 'album' or 'track'
+ status: 'in_progress',
+ startTime: new Date().toISOString()
+ };
+
+ searchDownloadBubbles[artistName].downloads.push(downloadInfo);
+
+ console.log(`✅ [REGISTER] Registered search download for ${artistName} - ${item.name}`);
+
+ // Save snapshot
+ saveSearchBubbleSnapshot();
+
+ // Setup monitoring
+ monitorSearchDownload(artistName, virtualPlaylistId);
+
+ // Refresh display
+ updateSearchDownloadsSection();
+}
+
+/**
+ * Debounced update for search downloads section
+ */
+function updateSearchDownloadsSection() {
+ if (window.searchUpdateTimeout) {
+ clearTimeout(window.searchUpdateTimeout);
+ }
+ window.searchUpdateTimeout = setTimeout(() => {
+ showSearchDownloadBubbles();
+ updateDashboardDownloads();
+ }, 300);
+}
+
+/**
+ * Monitor a search download for completion status changes
+ */
+function monitorSearchDownload(artistName, virtualPlaylistId) {
+ const checkCompletion = setInterval(() => {
+ const process = activeDownloadProcesses[virtualPlaylistId];
+
+ if (!process || !searchDownloadBubbles[artistName]) {
+ clearInterval(checkCompletion);
+ return;
+ }
+
+ // Find the download in the artist's downloads
+ const download = searchDownloadBubbles[artistName].downloads.find(
+ d => d.virtualPlaylistId === virtualPlaylistId
+ );
+
+ if (!download) {
+ clearInterval(checkCompletion);
+ return;
+ }
+
+ // Update status
+ const newStatus = process.status === 'complete' || process.status === 'view_results'
+ ? 'view_results'
+ : 'in_progress';
+
+ if (download.status !== newStatus) {
+ console.log(`🔄 [MONITOR] Status changed for ${download.item.name}: ${download.status} -> ${newStatus}`);
+ download.status = newStatus;
+
+ // Save snapshot and refresh
+ saveSearchBubbleSnapshot();
+ updateSearchDownloadsSection();
+ }
+ }, 2000);
+}
+
+/**
+ * Show or update the search downloads bubble section
+ */
+function showSearchDownloadBubbles() {
+ console.log(`🔄 [SHOW] showSearchDownloadBubbles() called`);
+
+ const resultsArea = document.getElementById('enhanced-main-results-area');
+ if (!resultsArea) {
+ console.log(`⏭️ [SHOW] Skipping - no enhanced-main-results-area found`);
+ return;
+ }
+
+ // Count active artists (those with downloads)
+ const activeArtists = Object.keys(searchDownloadBubbles).filter(artistName =>
+ searchDownloadBubbles[artistName].downloads.length > 0
+ );
+
+ if (activeArtists.length === 0) {
+ // Show placeholder
+ resultsArea.innerHTML = `
+
+
+ Loading...
+ Fetching data...
+
+
+ Loading...
+
+
+
+ `;
+ return;
+ }
+
+ // Create bubbles display
+ const bubblesHTML = activeArtists.map(artistName =>
+ createSearchBubbleCard(searchDownloadBubbles[artistName])
+ ).join('');
+
+ resultsArea.innerHTML = `
+ Search results will appear here when you select an album or track.
+
+
+ `;
+
+ console.log(`✅ [SHOW] Displayed ${activeArtists.length} search bubbles`);
+}
+
+/**
+ * Create HTML for a search bubble card (grouped by artist)
+ */
+function createSearchBubbleCard(artistBubbleData) {
+ const { artist, downloads } = artistBubbleData;
+ const activeCount = downloads.filter(d => d.status === 'in_progress').length;
+ const completedCount = downloads.filter(d => d.status === 'view_results').length;
+ const allCompleted = activeCount === 0 && completedCount > 0;
+
+ console.log(`🔵 [BUBBLE] Creating bubble for ${artist.name}:`, {
+ totalDownloads: downloads.length,
+ activeCount,
+ completedCount,
+ allCompleted
+ });
+
+ const imageUrl = artist.image_url || '';
+ const backgroundStyle = imageUrl ?
+ `background-image: url('${escapeHtml(imageUrl)}');` :
+ `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
+
+ return `
+
+
+ Active Downloads
+ ${activeArtists.length} +
+ ${bubblesHTML}
+
+
+
+
+
+ `;
+}
+
+/**
+ * Open modal showing all downloads for an artist
+ */
+async function openSearchDownloadModal(artistName) {
+ const artistBubbleData = searchDownloadBubbles[artistName];
+ if (!artistBubbleData || searchDownloadModalOpen) return;
+
+ console.log(`🎵 [MODAL OPEN] Opening search download modal for: ${artistBubbleData.artist.name}`);
+
+ searchDownloadModalOpen = true;
+
+ const modal = document.createElement('div');
+ modal.id = 'search-download-management-modal';
+ modal.className = 'artist-download-management-modal';
+ modal.innerHTML = `
+
+
+ ${allCompleted ? `
+ ${escapeHtml(artist.name)}
+
+ ${activeCount > 0 ? `${activeCount} active` : ''}
+ ${completedCount > 0 ? `${completedCount} completed` : ''}
+
+
+
+
+ ` : ''}
+
+
+
+ `;
+
+ document.body.appendChild(modal);
+ modal.style.display = 'flex';
+
+ // Start monitoring for status changes
+ // Start monitoring for status changes
+ monitorSearchDownloadModal(artistName);
+
+ // Lazy load artist image if missing (common for iTunes)
+ if (!artistBubbleData.artist.image_url) {
+ console.log(`🖼️ Lazy loading modal image for ${artistBubbleData.artist.name} (${artistBubbleData.artist.id})`);
+ fetch(`/api/artist/${artistBubbleData.artist.id}/image`)
+ .then(response => response.json())
+ .then(data => {
+ if (data.success && data.image_url) {
+ // Update header background
+ const headerBg = modal.querySelector('.artist-download-modal-hero-bg');
+ if (headerBg) {
+ headerBg.style.backgroundImage = `url('${data.image_url}')`;
+ }
+
+ // Update avatar
+ const avatarContainer = modal.querySelector('.artist-download-modal-hero-avatar');
+ if (avatarContainer) {
+ avatarContainer.innerHTML = `
+
+
+
+
+
+
+
+ ×
+
+ ${artistBubbleData.artist.image_url
+ ? `})
`
+ : '
+ 🎵
'
+ }
+
+
+ ${escapeHtml(artistBubbleData.artist.name)}
+${artistBubbleData.downloads.length} active download${artistBubbleData.downloads.length !== 1 ? 's' : ''}
+
+
+
+ ${artistBubbleData.downloads.map((download, index) => createSearchDownloadItem(download, index)).join('')}
+
+
+
+ `;
+}
+
+/**
+ * Reopen an individual download modal from the artist modal
+ */
+async function reopenDownloadModal(virtualPlaylistId) {
+ const process = activeDownloadProcesses[virtualPlaylistId];
+
+ // If process exists, show the existing modal
+ if (process && process.modalElement) {
+ console.log(`✅ [REOPEN] Showing existing modal for ${virtualPlaylistId}`);
+ closeSearchDownloadModal();
+ setTimeout(() => {
+ process.modalElement.style.display = 'flex';
+ }, 100);
+ return;
+ }
+
+ // Process doesn't exist (after page refresh) - recreate it
+ console.log(`🔄 [REOPEN] Modal not found, recreating for ${virtualPlaylistId}`);
+
+ // Find the download in searchDownloadBubbles
+ let downloadData = null;
+ for (const artistName in searchDownloadBubbles) {
+ const bubble = searchDownloadBubbles[artistName];
+ const download = bubble.downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
+ if (download) {
+ downloadData = download;
+ break;
+ }
+ }
+
+ if (!downloadData) {
+ console.warn(`⚠️ No download data found for ${virtualPlaylistId}`);
+ return;
+ }
+
+ // Close search modal first
+ closeSearchDownloadModal();
+
+ // Recreate the modal based on type
+ const { item, type } = downloadData;
+
+ if (type === 'album') {
+ // For albums, we need to fetch the tracks
+ console.log(`📥 [REOPEN] Recreating album modal for: ${item.name}`);
+
+ // Fetch album tracks (pass name/artist for Hydrabase support)
+ showLoadingOverlay(`Loading ${item.name}...`);
+
+ try {
+ const _sap2 = new URLSearchParams({ name: item.name || '', artist: item.artist || '' });
+ const response = await fetch(`/api/spotify/album/${item.id}?${_sap2}`);
+ if (!response.ok) {
+ throw new Error('Failed to fetch album tracks');
+ }
+
+ const albumData = await response.json();
+ if (!albumData.tracks || albumData.tracks.length === 0) {
+ throw new Error('No tracks found in album');
+ }
+
+ const spotifyTracks = albumData.tracks.map(track => ({
+ id: track.id,
+ name: track.name,
+ artists: track.artists || [{ name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' }],
+ album: {
+ name: item.name,
+ images: item.image_url ? [{ url: item.image_url }] : []
+ },
+ duration_ms: track.duration_ms || 0
+ }));
+
+ hideLoadingOverlay();
+
+ // Open the modal
+ await openDownloadMissingModalForArtistAlbum(
+ virtualPlaylistId,
+ item.name,
+ spotifyTracks,
+ item,
+ { name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' },
+ false // Don't show loading overlay again
+ );
+
+ // Sync with backend to check for active batch process
+ const process = activeDownloadProcesses[virtualPlaylistId];
+ if (process) {
+ try {
+ const processResponse = await fetch('/api/active-processes');
+ if (processResponse.ok) {
+ const processData = await processResponse.json();
+ const activeProcess = processData.active_processes?.find(p => p.playlist_id === virtualPlaylistId);
+
+ if (activeProcess) {
+ console.log(`📡 [REOPEN] Found active batch for album: ${activeProcess.batch_id}`);
+ process.status = 'running';
+ process.batchId = activeProcess.batch_id;
+
+ // Update UI to show running state
+ const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+ const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+ if (beginBtn) beginBtn.style.display = 'none';
+ if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+ // Start polling for live updates
+ startModalDownloadPolling(virtualPlaylistId);
+ }
+ }
+ } catch (err) {
+ console.warn('Could not check for active processes:', err);
+ }
+ }
+
+ } catch (error) {
+ hideLoadingOverlay();
+ showToast(`Failed to load album: ${error.message}`, 'error');
+ console.error('Error loading album:', error);
+ }
+
+ } else {
+ // For tracks, create enriched track and open modal
+ console.log(`🎵 [REOPEN] Recreating track modal for: ${item.name}`);
+
+ const enrichedTrack = {
+ id: item.id,
+ name: item.name,
+ artists: item.artists || [{ name: item.artist || 'Unknown Artist' }],
+ album: item.album || {
+ name: item.album?.name || 'Unknown Album',
+ images: item.image_url ? [{ url: item.image_url }] : []
+ },
+ duration_ms: item.duration_ms || 0
+ };
+
+ await openDownloadMissingModalForYouTube(
+ virtualPlaylistId,
+ `${enrichedTrack.name} - ${enrichedTrack.artists[0].name || enrichedTrack.artists[0]}`,
+ [enrichedTrack]
+ );
+
+ // Sync with backend to check for active batch process
+ const process = activeDownloadProcesses[virtualPlaylistId];
+ if (process) {
+ try {
+ const processResponse = await fetch('/api/active-processes');
+ if (processResponse.ok) {
+ const processData = await processResponse.json();
+ const activeProcess = processData.active_processes?.find(p => p.playlist_id === virtualPlaylistId);
+
+ if (activeProcess) {
+ console.log(`📡 [REOPEN] Found active batch for track: ${activeProcess.batch_id}`);
+ process.status = 'running';
+ process.batchId = activeProcess.batch_id;
+
+ // Update UI to show running state
+ const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+ const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+ if (beginBtn) beginBtn.style.display = 'none';
+ if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+ // Start polling for live updates
+ startModalDownloadPolling(virtualPlaylistId);
+ }
+ }
+ } catch (err) {
+ console.warn('Could not check for active processes:', err);
+ }
+ }
+ }
+}
+
+/**
+ * Monitor search download modal for status changes
+ */
+function monitorSearchDownloadModal(artistName) {
+ const updateModal = () => {
+ if (!searchDownloadModalOpen) return;
+
+ const modal = document.getElementById('search-download-management-modal');
+ const itemsContainer = document.getElementById('search-download-items');
+
+ if (!modal || !itemsContainer || !searchDownloadBubbles[artistName]) return;
+
+ const downloads = searchDownloadBubbles[artistName].downloads;
+
+ // If no downloads at all, close modal
+ if (downloads.length === 0) {
+ closeSearchDownloadModal();
+ return;
+ }
+
+ // Update modal content and sync status with active processes
+ let statusChanged = false;
+ itemsContainer.innerHTML = downloads.map((download, index) => {
+ const process = activeDownloadProcesses[download.virtualPlaylistId];
+
+ // Only update status if process exists (otherwise keep current status)
+ if (process) {
+ const newStatus = process.status === 'complete' || process.status === 'view_results'
+ ? 'view_results'
+ : 'in_progress';
+
+ if (download.status !== newStatus) {
+ console.log(`🔄 [MODAL MONITOR] Status changed: ${download.item.name} ${download.status} -> ${newStatus}`);
+ download.status = newStatus;
+ statusChanged = true;
+ }
+ }
+
+ return createSearchDownloadItem(download, index);
+ }).join('');
+
+ // If status changed, refresh bubble display and save
+ if (statusChanged) {
+ updateSearchDownloadsSection();
+ saveSearchBubbleSnapshot();
+ }
+
+ // Continue monitoring
+ setTimeout(updateModal, 2000);
+ };
+
+ setTimeout(updateModal, 1000);
+}
+
+/**
+ * Close the search download modal
+ */
+function closeSearchDownloadModal() {
+ const modal = document.getElementById('search-download-management-modal');
+ if (modal) {
+ modal.style.display = 'none';
+ if (modal.parentElement) {
+ modal.parentElement.removeChild(modal);
+ }
+ }
+ searchDownloadModalOpen = false;
+}
+
+/**
+ * Bulk complete all downloads for an artist (called when user clicks green checkmark)
+ */
+function bulkCompleteSearchDownloads(artistName) {
+ console.log(`🎯 Bulk completing downloads for artist: ${artistName}`);
+
+ const artistBubbleData = searchDownloadBubbles[artistName];
+ if (!artistBubbleData) {
+ console.warn(`❌ No artist bubble data found for ${artistName}`);
+ return;
+ }
+
+ // Find all completed downloads
+ const completedDownloads = artistBubbleData.downloads.filter(d => d.status === 'view_results');
+ console.log(`📋 Found ${completedDownloads.length} completed downloads to close:`,
+ completedDownloads.map(d => d.item.name));
+
+ if (completedDownloads.length === 0) {
+ console.warn(`⚠️ No completed downloads found for bulk close`);
+ showToast('No completed downloads to close', 'info');
+ return;
+ }
+
+ // Close all completed modals
+ completedDownloads.forEach(download => {
+ const process = activeDownloadProcesses[download.virtualPlaylistId];
+ if (process && process.modalElement) {
+ console.log(`🗑️ Closing modal for: ${download.item.name}`);
+ closeDownloadMissingModal(download.virtualPlaylistId);
+ } else {
+ // No modal open — clean up the bubble entry directly
+ console.log(`🧹 Direct cleanup (no modal) for: ${download.item.name}`);
+ cleanupSearchDownload(download.virtualPlaylistId);
+ }
+ });
+
+ showToast(`Completed ${completedDownloads.length} downloads for ${artistBubbleData.artist.name}`, 'success');
+}
+
+/**
+ * Cleanup search download when modal is closed
+ */
+function cleanupSearchDownload(virtualPlaylistId) {
+ console.log(`🔍 [CLEANUP] Looking for search download to cleanup: ${virtualPlaylistId}`);
+
+ // Find which artist this download belongs to
+ for (const artistName in searchDownloadBubbles) {
+ const downloads = searchDownloadBubbles[artistName].downloads;
+ const downloadIndex = downloads.findIndex(d => d.virtualPlaylistId === virtualPlaylistId);
+
+ if (downloadIndex !== -1) {
+ console.log(`🧹 [CLEANUP] Found download in artist ${artistName}: ${downloads[downloadIndex].item.name}`);
+
+ // Remove this download
+ downloads.splice(downloadIndex, 1);
+ console.log(`🗑️ [CLEANUP] Removed download from ${artistName}'s bubble`);
+
+ // If no more downloads for this artist, remove the bubble
+ if (downloads.length === 0) {
+ delete searchDownloadBubbles[artistName];
+ console.log(`🧹 [CLEANUP] No more downloads - removed artist bubble: ${artistName}`);
+ }
+
+ // Save snapshot and refresh
+ saveSearchBubbleSnapshot();
+ updateSearchDownloadsSection();
+
+ return;
+ }
+ }
+
+ console.log(`⚠️ [CLEANUP] No matching search download found for: ${virtualPlaylistId}`);
+}
+
+/**
+ * Show or update the artist downloads section in search state
+ */
+function showArtistDownloadsSection() {
+ console.log(`🔄 [SHOW] showArtistDownloadsSection() called - refreshing artist bubbles`);
+ console.log(`🔄 [SHOW] Current view: ${artistsPageState.currentView}, artistDownloadBubbles count: ${Object.keys(artistDownloadBubbles).length}`);
+
+ // Only show in search state
+ if (artistsPageState.currentView !== 'search') {
+ console.log(`⏭️ [SHOW] Skipping - not in search state (current: ${artistsPageState.currentView})`);
+ return;
+ }
+
+ const artistsSearchState = document.getElementById('artists-search-state');
+ if (!artistsSearchState) {
+ console.log(`⏭️ [SHOW] Skipping - no artists-search-state element found`);
+ return;
+ }
+
+ let downloadsSection = document.getElementById('artist-downloads-section');
+
+ // Create section if it doesn't exist
+ if (!downloadsSection) {
+ downloadsSection = document.createElement('div');
+ downloadsSection.id = 'artist-downloads-section';
+ downloadsSection.className = 'artist-downloads-section';
+
+ // Insert after the search container
+ const searchContainer = artistsSearchState.querySelector('.artists-search-container');
+ if (searchContainer) {
+ searchContainer.insertAdjacentElement('afterend', downloadsSection);
+ }
+ }
+
+ // Count active artists (those with downloads)
+ const activeArtists = Object.keys(artistDownloadBubbles).filter(artistId =>
+ artistDownloadBubbles[artistId].downloads.length > 0
+ );
+
+ if (activeArtists.length === 0) {
+ downloadsSection.style.display = 'none';
+ return;
+ }
+
+ // Show and populate the section
+ downloadsSection.style.display = 'block';
+ downloadsSection.innerHTML = `
+
+ ${item.image_url
+ ? `})
`
+ : `
+
+ ${type === 'album' ? '💿' : '🎵'}
+
`
+ }
+
+
+ ${escapeHtml(item.name)}
+ ${typeLabel}
+
+
+
+
+
+ Current Downloads
+Active download processes
+
+ ${activeArtists.map(artistId => createArtistBubbleCard(artistDownloadBubbles[artistId])).join('')}
+
+ `;
+
+ // Add event listeners to bubble cards
+ activeArtists.forEach(artistId => {
+ const bubbleCard = downloadsSection.querySelector(`[data-artist-id="${artistId}"]`);
+ if (bubbleCard) {
+ bubbleCard.addEventListener('click', () => openArtistDownloadModal(artistId));
+
+ // Add dynamic glow effect
+ const artist = artistDownloadBubbles[artistId].artist;
+ if (artist.image_url) {
+ extractImageColors(artist.image_url, (colors) => {
+ applyDynamicGlow(bubbleCard, colors);
+ });
+ }
+ }
+ });
+}
+
+/**
+ * Show download bubbles on the Library page (mirrors showArtistDownloadsSection)
+ */
+function showLibraryDownloadsSection() {
+ const libraryContent = document.querySelector('.library-content');
+ if (!libraryContent) return;
+
+ let downloadsSection = document.getElementById('library-downloads-section');
+
+ // Create section if it doesn't exist
+ if (!downloadsSection) {
+ downloadsSection = document.createElement('div');
+ downloadsSection.id = 'library-downloads-section';
+ downloadsSection.className = 'artist-downloads-section';
+
+ // Insert before the artist grid
+ const artistGrid = document.getElementById('library-artists-grid');
+ if (artistGrid) {
+ libraryContent.insertBefore(downloadsSection, artistGrid);
+ }
+ }
+
+ // Count active artists (reuses artistDownloadBubbles state)
+ const activeArtists = Object.keys(artistDownloadBubbles).filter(artistId =>
+ artistDownloadBubbles[artistId].downloads.length > 0
+ );
+
+ if (activeArtists.length === 0) {
+ downloadsSection.style.display = 'none';
+ return;
+ }
+
+ downloadsSection.style.display = 'block';
+ downloadsSection.innerHTML = `
+
+
+ Current Downloads
+Active download processes
+
+ ${activeArtists.map(artistId => createArtistBubbleCard(artistDownloadBubbles[artistId])).join('')}
+
+ `;
+
+ // Add click handlers + glow effects
+ activeArtists.forEach(artistId => {
+ const bubbleCard = downloadsSection.querySelector(`[data-artist-id="${artistId}"]`);
+ if (bubbleCard) {
+ bubbleCard.addEventListener('click', () => openArtistDownloadModal(artistId));
+ const artist = artistDownloadBubbles[artistId].artist;
+ if (artist.image_url) {
+ extractImageColors(artist.image_url, (colors) => {
+ applyDynamicGlow(bubbleCard, colors);
+ });
+ }
+ }
+ });
+}
+
+/**
+ * Create HTML for an artist bubble card
+ */
+function createArtistBubbleCard(artistBubbleData) {
+ const { artist, downloads } = artistBubbleData;
+ const activeCount = downloads.filter(d => d.status === 'in_progress').length;
+ const completedCount = downloads.filter(d => d.status === 'view_results').length;
+ const allCompleted = activeCount === 0 && completedCount > 0;
+
+ // Enhanced debug logging for bubble card creation and green checkmark detection
+ console.log(`🔵 [BUBBLE] Creating bubble for ${artist.name}:`, {
+ totalDownloads: downloads.length,
+ activeCount,
+ completedCount,
+ allCompleted,
+ downloadStatuses: downloads.map(d => `${d.album.name}: ${d.status}`)
+ });
+
+ // CRITICAL: Green checkmark detection logging
+ if (allCompleted) {
+ console.log(`🟢 [BUBBLE] GREEN CHECKMARK DETECTED for ${artist.name} - all ${downloads.length} downloads completed`);
+ console.log(`✅ [BUBBLE] This bubble will have 'all-completed' class and green checkmark`);
+ } else if (activeCount === 0 && completedCount === 0) {
+ console.log(`⭕ [BUBBLE] No active or completed downloads for ${artist.name} - this shouldn't happen`);
+ } else {
+ console.log(`⏳ [BUBBLE] Still waiting for completion: ${activeCount} active, ${completedCount} completed`);
+ }
+
+ const imageUrl = artist.image_url || '';
+ const backgroundStyle = imageUrl ?
+ `background-image: url('${imageUrl}');` :
+ `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
+
+ return `
+
+
+
+
+ `;
+}
+
+/**
+ * Monitor an artist download for completion status changes
+ */
+function monitorArtistDownload(artistId, virtualPlaylistId) {
+ // Check if the download process exists and monitor its status
+ const checkStatus = () => {
+ const process = activeDownloadProcesses[virtualPlaylistId];
+ if (!process || !artistDownloadBubbles[artistId]) {
+ return; // Process or artist bubble no longer exists
+ }
+
+ // Find this download in the artist's downloads
+ const download = artistDownloadBubbles[artistId].downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
+ if (!download) return;
+
+ // Update download status based on process status
+ if (process.status === 'complete' && download.status === 'in_progress') {
+ download.status = 'view_results';
+ console.log(`✅ Download completed for ${artistDownloadBubbles[artistId].artist.name} - ${download.album.name}`);
+ console.log(`📊 Artist ${artistId} downloads status:`, artistDownloadBubbles[artistId].downloads.map(d => `${d.album.name}: ${d.status}`));
+
+ // Update the downloads section
+ updateArtistDownloadsSection();
+
+ // Save snapshot of updated state
+ saveArtistBubbleSnapshot();
+
+ // Check if all downloads for this artist are now completed
+ const artistDownloads = artistDownloadBubbles[artistId].downloads;
+ const allCompleted = artistDownloads.every(d => d.status === 'view_results');
+ if (allCompleted) {
+ console.log(`🟢 All downloads completed for ${artistDownloadBubbles[artistId].artist.name} - green checkmark should appear`);
+ console.log(`🎯 [STATUS DEBUG] Green checkmark trigger - forcing bubble refresh`);
+ // Force immediate bubble refresh to show green checkmark
+ setTimeout(updateArtistDownloadsSection, 100);
+ }
+ }
+
+ // Continue monitoring if still active
+ if (process.status !== 'complete') {
+ setTimeout(checkStatus, 2000); // Check every 2 seconds
+ }
+ };
+
+ // Start monitoring after a brief delay
+ setTimeout(checkStatus, 1000);
+}
+
+/**
+ * Open the artist download management modal
+ */
+function openArtistDownloadModal(artistId) {
+ const artistBubbleData = artistDownloadBubbles[artistId];
+ if (!artistBubbleData || artistDownloadModalOpen) return;
+
+ console.log(`🎵 [MODAL OPEN] Opening artist download modal for: ${artistBubbleData.artist.name}`);
+ console.log(`📊 [MODAL OPEN] Current download statuses:`, artistBubbleData.downloads.map(d => `${d.album.name}: ${d.status}`));
+ artistDownloadModalOpen = true;
+
+ const modal = document.createElement('div');
+ modal.id = 'artist-download-management-modal';
+ modal.className = 'artist-download-management-modal';
+ modal.innerHTML = `
+
+
+ ${allCompleted ? `
+ ${escapeHtml(artist.name)}
+
+ ${activeCount > 0 ? `${activeCount} active` : ''}
+ ${completedCount > 0 ? `${completedCount} completed` : ''}
+
+
+
+
+ ` : ''}
+
+
+
+ `;
+
+ document.body.appendChild(modal);
+ modal.style.display = 'flex';
+
+ // Monitor for real-time updates
+ startArtistDownloadModalMonitoring(artistId);
+}
+
+/**
+ * Create HTML for an individual download item in the artist modal
+ */
+function createArtistDownloadItem(download, index) {
+ const { album, albumType, status, virtualPlaylistId } = download;
+ const buttonText = status === 'view_results' ? 'View Results' : 'View Progress';
+ const buttonClass = status === 'view_results' ? 'completed' : 'active';
+
+ // Enhanced debugging for button text generation
+ console.log(`🎯 [BUTTON] Creating item for ${album.name}: status='${status}' → buttonText='${buttonText}'`);
+
+ return `
+
+
+
+
+
+
+
+
+ ×
+
+ ${artistBubbleData.artist.image_url
+ ? ``
+ : '
+ '
+ }
+
+
+ ${escapeHtml(artistBubbleData.artist.name)}
+${artistBubbleData.downloads.length} active download${artistBubbleData.downloads.length !== 1 ? 's' : ''}
+
+
+
+ ${artistBubbleData.downloads.map((download, index) => createArtistDownloadItem(download, index)).join('')}
+
+
+
+ `;
+}
+
+/**
+ * Monitor artist download modal for real-time updates
+ */
+function startArtistDownloadModalMonitoring(artistId) {
+ if (!artistDownloadModalOpen) return;
+
+ const updateModal = () => {
+ const modal = document.getElementById('artist-download-management-modal');
+ const itemsContainer = document.getElementById(`artist-download-items-${artistId}`);
+
+ if (!modal || !itemsContainer || !artistDownloadBubbles[artistId]) return;
+
+ // Check for completed downloads that need to be removed
+ const activeDownloads = artistDownloadBubbles[artistId].downloads.filter(download => {
+ const process = activeDownloadProcesses[download.virtualPlaylistId];
+ // Keep if process exists or if it's completed but not yet cleaned up
+ return process !== undefined;
+ });
+
+ // Update the downloads array
+ artistDownloadBubbles[artistId].downloads = activeDownloads;
+
+ // If no downloads left, close modal
+ if (activeDownloads.length === 0) {
+ closeArtistDownloadModal();
+ return;
+ }
+
+ // Update modal content and synchronize with bubble state
+ let statusChanged = false;
+ itemsContainer.innerHTML = activeDownloads.map((download, index) => {
+ const process = activeDownloadProcesses[download.virtualPlaylistId];
+ if (process) {
+ const newStatus = process.status === 'complete' ? 'view_results' : 'in_progress';
+ if (download.status !== newStatus) {
+ console.log(`🔄 [ARTIST MODAL] Updating ${download.album.name} status from ${download.status} to ${newStatus}`);
+ download.status = newStatus;
+ statusChanged = true;
+ }
+ }
+ return createArtistDownloadItem(download, index);
+ }).join('');
+
+ // CRITICAL: If any status changed, immediately refresh artist bubble to show green checkmarks
+ if (statusChanged) {
+ console.log(`🎯 [SYNC] Status change detected in artist modal - refreshing bubble display`);
+ updateArtistDownloadsSection();
+
+ // Check if all downloads for this artist are now completed
+ const artistDownloads = artistDownloadBubbles[artistId].downloads;
+ const allCompleted = artistDownloads.every(d => d.status === 'view_results');
+ if (allCompleted) {
+ console.log(`🟢 [ARTIST MODAL] All downloads completed for artist ${artistId} - triggering green checkmark`);
+ // Force additional refresh after a brief delay to ensure UI updates
+ setTimeout(() => {
+ console.log(`✨ [ARTIST MODAL] Forcing final refresh for green checkmark`);
+ updateArtistDownloadsSection();
+ }, 200);
+ }
+ }
+
+ // Continue monitoring
+ setTimeout(updateModal, 2000);
+ };
+
+ setTimeout(updateModal, 1000);
+}
+
+/**
+ * Open a specific artist download process modal
+ */
+function openArtistDownloadProcess(virtualPlaylistId) {
+ const process = activeDownloadProcesses[virtualPlaylistId];
+ if (process && process.modalElement) {
+ // Close artist management modal first
+ closeArtistDownloadModal();
+
+ // Show the download process modal
+ process.modalElement.style.display = 'flex';
+
+ if (process.status === 'complete') {
+ showToast('Review download results and click "Close" to finish.', 'info');
+ }
+ }
+}
+
+/**
+ * Close the artist download management modal
+ */
+function closeArtistDownloadModal() {
+ const modal = document.getElementById('artist-download-management-modal');
+ if (modal) {
+ modal.remove();
+ }
+ artistDownloadModalOpen = false;
+}
+
+/**
+ * Bulk complete all downloads for an artist (when all are in 'view_results' state)
+ */
+function bulkCompleteArtistDownloads(artistId) {
+ console.log(`🎯 Bulk completing downloads for artist: ${artistId}`);
+
+ const artistBubbleData = artistDownloadBubbles[artistId];
+ if (!artistBubbleData) {
+ console.warn(`❌ No artist bubble data found for ${artistId}`);
+ return;
+ }
+
+ // Find all downloads in 'view_results' state
+ const completedDownloads = artistBubbleData.downloads.filter(d => d.status === 'view_results');
+ console.log(`📋 Found ${completedDownloads.length} completed downloads to close:`,
+ completedDownloads.map(d => d.album.name));
+
+ if (completedDownloads.length === 0) {
+ console.warn(`⚠️ No completed downloads found for bulk close`);
+ showToast('No completed downloads to close', 'info');
+ return;
+ }
+
+ // Programmatically close all completed modals
+ completedDownloads.forEach(download => {
+ const process = activeDownloadProcesses[download.virtualPlaylistId];
+ if (process && process.modalElement) {
+ console.log(`🗑️ Closing modal for: ${download.album.name}`);
+ // Trigger the close function which handles cleanup
+ closeDownloadMissingModal(download.virtualPlaylistId);
+ } else {
+ // No modal open — clean up the bubble entry directly
+ console.log(`🧹 Direct cleanup (no modal) for: ${download.album.name}`);
+ cleanupArtistDownload(download.virtualPlaylistId);
+ }
+ });
+
+ showToast(`Completed ${completedDownloads.length} downloads for ${artistBubbleData.artist.name}`, 'success');
+}
+
+// ========================================
+// Beatport Download Bubbles
+// ========================================
+
+/**
+ * Register a new Beatport chart download for bubble management
+ */
+function registerBeatportDownload(chartName, chartImage, virtualPlaylistId) {
+ console.log(`📝 Registering Beatport download: ${chartName}`);
+
+ // Use chart name as key (sanitised)
+ const chartKey = chartName.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase();
+
+ if (!beatportDownloadBubbles[chartKey]) {
+ beatportDownloadBubbles[chartKey] = {
+ chart: { name: chartName, image: chartImage || '' },
+ downloads: []
+ };
+ }
+
+ beatportDownloadBubbles[chartKey].downloads.push({
+ virtualPlaylistId: virtualPlaylistId,
+ status: 'in_progress',
+ startTime: new Date()
+ });
+
+ updateBeatportDownloadsSection();
+ saveBeatportBubbleSnapshot();
+ monitorBeatportDownload(chartKey, virtualPlaylistId);
+}
+
+/**
+ * Debounced update for Beatport downloads section
+ */
+function updateBeatportDownloadsSection() {
+ if (beatportDownloadsUpdateTimeout) {
+ clearTimeout(beatportDownloadsUpdateTimeout);
+ }
+ beatportDownloadsUpdateTimeout = setTimeout(() => {
+ showBeatportDownloadsSection();
+ updateDashboardDownloads();
+ }, 300);
+}
+
+/**
+ * Render Beatport download bubbles on the Beatport page
+ */
+function showBeatportDownloadsSection() {
+ const downloadsSection = document.getElementById('beatport-downloads-section');
+ if (!downloadsSection) return;
+
+ const activeCharts = Object.keys(beatportDownloadBubbles).filter(key =>
+ beatportDownloadBubbles[key].downloads.length > 0
+ );
+
+ if (activeCharts.length === 0) {
+ downloadsSection.style.display = 'none';
+ return;
+ }
+
+ downloadsSection.style.display = 'block';
+ downloadsSection.innerHTML = `
+
+ ${album.image_url
+ ? `})
`
+ : `
+
+
+
`
+ }
+
+
+ ${escapeHtml(album.name)}
+ ${albumType === 'album' ? 'Album' : albumType === 'single' ? 'Single' : 'EP'}
+
+
+
+
+
+ Beatport Downloads
+Active chart download processes
+
+ ${activeCharts.map(key => createBeatportBubbleCard(beatportDownloadBubbles[key])).join('')}
+
+ `;
+
+ // Attach click handlers + glow
+ activeCharts.forEach(chartKey => {
+ const card = downloadsSection.querySelector(`[data-chart-key="${chartKey}"]`);
+ if (card) {
+ card.addEventListener('click', () => openBeatportBubbleModal(chartKey));
+ const chartImage = beatportDownloadBubbles[chartKey].chart.image;
+ if (chartImage) {
+ extractImageColors(chartImage, (colors) => {
+ applyDynamicGlow(card, colors);
+ });
+ }
+ }
+ });
+}
+
+/**
+ * Create HTML for a Beatport bubble card (reuses artist bubble CSS)
+ */
+function createBeatportBubbleCard(bubbleData) {
+ const { chart, downloads } = bubbleData;
+ const chartKey = chart.name.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase();
+ const activeCount = downloads.filter(d => d.status === 'in_progress').length;
+ const completedCount = downloads.filter(d => d.status === 'view_results').length;
+ const allCompleted = activeCount === 0 && completedCount > 0;
+
+ const backgroundStyle = chart.image
+ ? `background-image: url('${chart.image}');`
+ : `background: linear-gradient(135deg, rgba(0, 210, 120, 0.3) 0%, rgba(0, 170, 100, 0.2) 100%);`;
+
+ return `
+
+
+
+
+ `;
+}
+
+/**
+ * Monitor a Beatport download for completion
+ */
+function monitorBeatportDownload(chartKey, virtualPlaylistId) {
+ const checkStatus = () => {
+ const process = activeDownloadProcesses[virtualPlaylistId];
+ if (!process || !beatportDownloadBubbles[chartKey]) return;
+
+ const download = beatportDownloadBubbles[chartKey].downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
+ if (!download) return;
+
+ if (process.status === 'complete' && download.status === 'in_progress') {
+ download.status = 'view_results';
+ console.log(`✅ Beatport download completed for ${beatportDownloadBubbles[chartKey].chart.name}`);
+
+ updateBeatportDownloadsSection();
+ saveBeatportBubbleSnapshot();
+
+ const allCompleted = beatportDownloadBubbles[chartKey].downloads.every(d => d.status === 'view_results');
+ if (allCompleted) {
+ console.log(`🟢 All Beatport downloads completed for ${beatportDownloadBubbles[chartKey].chart.name}`);
+ setTimeout(updateBeatportDownloadsSection, 100);
+ }
+ }
+
+ if (process.status !== 'complete') {
+ setTimeout(checkStatus, 2000);
+ }
+ };
+
+ setTimeout(checkStatus, 1000);
+}
+
+/**
+ * Open the download modal for a Beatport chart bubble
+ */
+function openBeatportBubbleModal(chartKey) {
+ const bubbleData = beatportDownloadBubbles[chartKey];
+ if (!bubbleData) return;
+
+ // Find the first download with an active modal
+ for (const download of bubbleData.downloads) {
+ const process = activeDownloadProcesses[download.virtualPlaylistId];
+ if (process && process.modalElement) {
+ process.modalElement.style.display = 'flex';
+ if (process.status === 'complete') {
+ showToast('Review download results and click "Close" to finish.', 'info');
+ }
+ return;
+ }
+ }
+
+ showToast('No active download modal found for this chart', 'info');
+}
+
+/**
+ * Bulk complete all downloads for a Beatport chart
+ */
+function bulkCompleteBeatportDownloads(chartKey) {
+ console.log(`🎯 Bulk completing Beatport downloads for chart: ${chartKey}`);
+
+ const bubbleData = beatportDownloadBubbles[chartKey];
+ if (!bubbleData) return;
+
+ const completedDownloads = bubbleData.downloads.filter(d => d.status === 'view_results');
+ if (completedDownloads.length === 0) {
+ showToast('No completed downloads to close', 'info');
+ return;
+ }
+
+ completedDownloads.forEach(download => {
+ const process = activeDownloadProcesses[download.virtualPlaylistId];
+ if (process && process.modalElement) {
+ closeDownloadMissingModal(download.virtualPlaylistId);
+ } else {
+ cleanupBeatportDownload(download.virtualPlaylistId);
+ }
+ });
+
+ showToast(`Completed ${completedDownloads.length} downloads for ${bubbleData.chart.name}`, 'success');
+}
+
+/**
+ * Clean up a Beatport download when its modal is closed
+ */
+function cleanupBeatportDownload(virtualPlaylistId) {
+ console.log(`🔍 [CLEANUP] Looking for Beatport download to cleanup: ${virtualPlaylistId}`);
+
+ for (const chartKey in beatportDownloadBubbles) {
+ const downloads = beatportDownloadBubbles[chartKey].downloads;
+ const downloadIndex = downloads.findIndex(d => d.virtualPlaylistId === virtualPlaylistId);
+
+ if (downloadIndex !== -1) {
+ downloads.splice(downloadIndex, 1);
+ console.log(`🧹 [CLEANUP] Removed Beatport download from ${chartKey}. Remaining: ${downloads.length}`);
+
+ if (downloads.length === 0) {
+ delete beatportDownloadBubbles[chartKey];
+ console.log(`🧹 [CLEANUP] No more downloads - removed Beatport bubble: ${chartKey}`);
+ }
+
+ updateBeatportDownloadsSection();
+ saveBeatportBubbleSnapshot();
+ return;
+ }
+ }
+}
+
+// --- Beatport Bubble Snapshot System ---
+
+let beatportSnapshotSaveTimeout = null;
+
+async function saveBeatportBubbleSnapshot() {
+ if (beatportSnapshotSaveTimeout) {
+ clearTimeout(beatportSnapshotSaveTimeout);
+ }
+
+ beatportSnapshotSaveTimeout = setTimeout(async () => {
+ try {
+ const bubbleCount = Object.keys(beatportDownloadBubbles).length;
+ if (bubbleCount === 0) return;
+
+ const cleanBubbles = {};
+ for (const [chartKey, bubbleData] of Object.entries(beatportDownloadBubbles)) {
+ cleanBubbles[chartKey] = {
+ chart: bubbleData.chart,
+ downloads: bubbleData.downloads.map(d => ({
+ virtualPlaylistId: d.virtualPlaylistId,
+ status: d.status,
+ startTime: d.startTime instanceof Date ? d.startTime.toISOString() : d.startTime
+ }))
+ };
+ }
+
+ const response = await fetch('/api/beatport_bubbles/snapshot', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ bubbles: cleanBubbles })
+ });
+
+ const data = await response.json();
+ if (data.success) {
+ console.log(`✅ Beatport bubble snapshot saved: ${bubbleCount} charts`);
+ }
+ } catch (error) {
+ console.error('❌ Error saving Beatport bubble snapshot:', error);
+ }
+ }, 1000);
+}
+
+async function hydrateBeatportBubblesFromSnapshot() {
+ try {
+ console.log('🔄 Loading Beatport bubble snapshot from backend...');
+
+ const signal = getBeatportContentSignal();
+ const response = await fetch('/api/beatport_bubbles/hydrate', signal ? { signal } : undefined);
+ const data = await response.json();
+
+ if (!data.success) {
+ console.error('❌ Failed to load Beatport bubble snapshot:', data.error);
+ return;
+ }
+
+ const bubbles = data.bubbles || {};
+ if (Object.keys(bubbles).length === 0) {
+ console.log('ℹ️ No Beatport bubbles to hydrate');
+ return;
+ }
+
+ beatportDownloadBubbles = {};
+
+ for (const [chartKey, bubbleData] of Object.entries(bubbles)) {
+ beatportDownloadBubbles[chartKey] = {
+ chart: bubbleData.chart,
+ downloads: bubbleData.downloads.map(d => ({
+ virtualPlaylistId: d.virtualPlaylistId,
+ status: d.status,
+ startTime: new Date(d.startTime)
+ }))
+ };
+
+ for (const download of bubbleData.downloads) {
+ if (download.status === 'in_progress') {
+ monitorBeatportDownload(chartKey, download.virtualPlaylistId);
+ }
+ }
+ }
+
+ updateBeatportDownloadsSection();
+ console.log(`✅ Hydrated ${Object.keys(beatportDownloadBubbles).length} Beatport download bubbles`);
+ } catch (error) {
+ if (error && error.name === 'AbortError') {
+ console.log('⏹ Beatport bubble hydration aborted');
+ return;
+ }
+ console.error('❌ Error hydrating Beatport bubbles:', error);
+ }
+}
+
+/**
+ * Clean up artist download when a modal is closed
+ */
+function cleanupArtistDownload(virtualPlaylistId) {
+ console.log(`🔍 [CLEANUP] Looking for download to cleanup: ${virtualPlaylistId}`);
+ console.log(`🔍 [CLEANUP] Current artist bubbles:`, Object.keys(artistDownloadBubbles));
+
+ // Find which artist this download belongs to
+ for (const artistId in artistDownloadBubbles) {
+ const downloads = artistDownloadBubbles[artistId].downloads;
+ const downloadIndex = downloads.findIndex(d => d.virtualPlaylistId === virtualPlaylistId);
+
+ console.log(`🔍 [CLEANUP] Checking artist ${artistId}: ${downloads.length} downloads`);
+ downloads.forEach(d => console.log(` - ${d.album.name} (${d.virtualPlaylistId}): ${d.status}`));
+
+ if (downloadIndex !== -1) {
+ const downloadToRemove = downloads[downloadIndex];
+ console.log(`🧹 [CLEANUP] Found download to cleanup: ${downloadToRemove.album.name} (status: ${downloadToRemove.status})`);
+
+ // Remove this download from the artist's downloads
+ downloads.splice(downloadIndex, 1);
+ console.log(`✅ [CLEANUP] Removed download from artist ${artistId}. Remaining: ${downloads.length}`);
+
+ // If no more downloads for this artist, remove the bubble
+ if (downloads.length === 0) {
+ delete artistDownloadBubbles[artistId];
+ console.log(`🧹 [CLEANUP] No more downloads - removed artist bubble: ${artistId}`);
+ } else {
+ console.log(`📊 [CLEANUP] Artist ${artistId} still has ${downloads.length} downloads remaining`);
+ }
+
+ // Update the downloads section
+ console.log(`🔄 [CLEANUP] Updating artist downloads section...`);
+ updateArtistDownloadsSection();
+
+ // Save snapshot of updated state
+ saveArtistBubbleSnapshot();
+ break;
+ }
+ }
+ console.log(`✅ [CLEANUP] Cleanup process completed for ${virtualPlaylistId}`);
+}
+
+/**
+ * Force refresh all artist download statuses (useful for debugging)
+ */
+function refreshAllArtistDownloadStatuses() {
+ console.log('🔄 Force refreshing all artist download statuses...');
+
+ for (const artistId in artistDownloadBubbles) {
+ const artistData = artistDownloadBubbles[artistId];
+ let hasChanges = false;
+
+ artistData.downloads.forEach(download => {
+ const process = activeDownloadProcesses[download.virtualPlaylistId];
+ if (process) {
+ const expectedStatus = process.status === 'complete' ? 'view_results' : 'in_progress';
+ if (download.status !== expectedStatus) {
+ console.log(`🔧 Fixing status for ${download.album.name}: ${download.status} → ${expectedStatus}`);
+ download.status = expectedStatus;
+ hasChanges = true;
+ }
+ }
+ });
+
+ if (hasChanges) {
+ console.log(`✅ Updated statuses for ${artistData.artist.name}`);
+ }
+ }
+
+ // Force update the downloads section
+ showArtistDownloadsSection();
+}
+
+/**
+ * Extract dominant colors from an image for dynamic glow effects
+ */
+async function extractImageColors(imageUrl, callback) {
+ if (!imageUrl) {
+ callback(getAccentFallbackColors()); // Fallback to Spotify green
+ return;
+ }
+
+ // Check cache first for performance
+ if (artistsPageState.cache.colors[imageUrl]) {
+ callback(artistsPageState.cache.colors[imageUrl]);
+ return;
+ }
+
+ try {
+ // Create a canvas to analyze the image
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ const img = new Image();
+
+ img.crossOrigin = 'anonymous';
+
+ img.onload = function () {
+ // Resize to small dimensions for faster processing
+ const size = 50;
+ canvas.width = size;
+ canvas.height = size;
+
+ // Draw image to canvas
+ ctx.drawImage(img, 0, 0, size, size);
+
+ try {
+ // Get image data
+ const imageData = ctx.getImageData(0, 0, size, size);
+ const data = imageData.data;
+
+ // Extract colors (sample every few pixels for performance)
+ const colors = [];
+ for (let i = 0; i < data.length; i += 16) { // Sample every 4th pixel
+ const r = data[i];
+ const g = data[i + 1];
+ const b = data[i + 2];
+ const alpha = data[i + 3];
+
+ // Skip transparent or very dark pixels
+ if (alpha > 128 && (r + g + b) > 150) {
+ colors.push({ r, g, b });
+ }
+ }
+
+ if (colors.length === 0) {
+ callback(getAccentFallbackColors()); // Fallback
+ return;
+ }
+
+ // Find dominant colors using a simple clustering approach
+ const dominantColors = findDominantColors(colors, 2);
+
+ // Convert to CSS hex colors
+ const hexColors = dominantColors.map(color =>
+ `#${((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1)}`
+ );
+
+ // Cache the colors for future use
+ artistsPageState.cache.colors[imageUrl] = hexColors;
+
+ callback(hexColors);
+
+ } catch (e) {
+ console.warn('Color extraction failed, using fallback colors:', e);
+ callback(getAccentFallbackColors());
+ }
+ };
+
+ img.onerror = function () {
+ callback(getAccentFallbackColors()); // Fallback on error
+ };
+
+ img.src = imageUrl;
+
+ } catch (error) {
+ console.warn('Image color extraction error:', error);
+ callback(getAccentFallbackColors());
+ }
+}
+
+/**
+ * Simple color clustering to find dominant colors
+ */
+function findDominantColors(colors, numColors = 2) {
+ if (colors.length === 0) return [{ r: 29, g: 185, b: 84 }];
+
+ // Simple k-means clustering
+ let centroids = [];
+
+ // Initialize centroids randomly
+ for (let i = 0; i < numColors; i++) {
+ centroids.push(colors[Math.floor(Math.random() * colors.length)]);
+ }
+
+ // Run a few iterations of k-means
+ for (let iteration = 0; iteration < 5; iteration++) {
+ const clusters = Array(numColors).fill().map(() => []);
+
+ // Assign each color to nearest centroid
+ colors.forEach(color => {
+ let minDistance = Infinity;
+ let nearestCluster = 0;
+
+ centroids.forEach((centroid, i) => {
+ const distance = Math.sqrt(
+ Math.pow(color.r - centroid.r, 2) +
+ Math.pow(color.g - centroid.g, 2) +
+ Math.pow(color.b - centroid.b, 2)
+ );
+
+ if (distance < minDistance) {
+ minDistance = distance;
+ nearestCluster = i;
+ }
+ });
+
+ clusters[nearestCluster].push(color);
+ });
+
+ // Update centroids
+ centroids = clusters.map(cluster => {
+ if (cluster.length === 0) return centroids[0]; // Fallback
+
+ const avgR = cluster.reduce((sum, c) => sum + c.r, 0) / cluster.length;
+ const avgG = cluster.reduce((sum, c) => sum + c.g, 0) / cluster.length;
+ const avgB = cluster.reduce((sum, c) => sum + c.b, 0) / cluster.length;
+
+ return { r: Math.round(avgR), g: Math.round(avgG), b: Math.round(avgB) };
+ });
+ }
+
+ // Ensure we have vibrant colors by boosting saturation
+ return centroids.map(color => {
+ const max = Math.max(color.r, color.g, color.b);
+ const min = Math.min(color.r, color.g, color.b);
+ const saturation = max === 0 ? 0 : (max - min) / max;
+
+ // Boost low saturation colors
+ if (saturation < 0.4) {
+ const factor = 1.3;
+ return {
+ r: Math.min(255, Math.round(color.r * factor)),
+ g: Math.min(255, Math.round(color.g * factor)),
+ b: Math.min(255, Math.round(color.b * factor))
+ };
+ }
+
+ return color;
+ });
+}
+
+/**
+ * Apply dynamic glow effect to a card element
+ */
+function applyDynamicGlow(cardElement, colors) {
+ if (!cardElement || colors.length < 2) return;
+
+ const color1 = colors[0];
+ const color2 = colors[1];
+
+ // Add a small delay to make the effect feel more natural
+ setTimeout(() => {
+ // Create CSS custom properties for the dynamic colors
+ cardElement.style.setProperty('--glow-color-1', color1);
+ cardElement.style.setProperty('--glow-color-2', color2);
+ cardElement.classList.add('has-dynamic-glow');
+
+ console.log(`🎨 Applied dynamic glow: ${color1}, ${color2}`);
+ }, Math.random() * 200 + 100); // Random delay between 100-300ms
+}
+
+/**
+ * Utility function to escape HTML
+ */
+function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+}
+
+// --- Service Status and System Stats Functions ---
+
+async function _forceServiceStatusRefresh() {
+ // Force an immediate status refresh (bypasses WebSocket check) — used after settings save
+ try {
+ const response = await fetch('/status');
+ if (!response.ok) return;
+ const data = await response.json();
+ handleServiceStatusUpdate(data);
+ } catch (error) {
+ console.warn('Could not force service status refresh:', error);
+ }
+}
+
+async function fetchAndUpdateServiceStatus() {
+ if (document.hidden) return; // Skip polling when tab is not visible
+ if (socketConnected) return; // WebSocket is pushing updates — skip HTTP poll
+ try {
+ const response = await fetch('/status');
+ if (!response.ok) return;
+
+ const data = await response.json();
+
+ // Cache for library status card
+ _lastServiceStatus = data;
+
+ // Update service status indicators and text (dashboard)
+ updateServiceStatus('spotify', data.spotify);
+ updateServiceStatus('media-server', data.media_server);
+ updateServiceStatus('soulseek', data.soulseek);
+
+ // Update sidebar service status indicators
+ updateSidebarServiceStatus('spotify', data.spotify);
+ updateSidebarServiceStatus('media-server', data.media_server);
+ updateSidebarServiceStatus('soulseek', data.soulseek);
+
+ // Update downloads nav badge
+ if (data.active_downloads !== undefined) _updateDlNavBadge(data.active_downloads);
+
+ // Hide sync buttons (not the page) for standalone mode
+ const isSoulsyncStandalone2 = data.media_server?.type === 'soulsync';
+ _isSoulsyncStandalone = isSoulsyncStandalone2;
+ document.querySelectorAll('.sync-to-server-btn, [id$="-sync-btn"], [onclick*="startPlaylistSync"], [onclick*="syncPlaylistToServer"], [onclick*="startDecadeSync"]').forEach(btn => {
+ if (isSoulsyncStandalone2) {
+ btn.dataset.hiddenByStandalone = '1';
+ btn.style.display = 'none';
+ } else if (btn.dataset.hiddenByStandalone) {
+ delete btn.dataset.hiddenByStandalone;
+ btn.style.display = '';
+ }
+ });
+
+ // Update enrichment service cards
+ if (data.enrichment) renderEnrichmentCards(data.enrichment);
+
+ // Check for Spotify rate limit
+ if (data.spotify && data.spotify.rate_limited && data.spotify.rate_limit) {
+ handleSpotifyRateLimit(data.spotify.rate_limit);
+ } else if (_spotifyRateLimitShown) {
+ handleSpotifyRateLimit(null);
+ }
+
+ } catch (error) {
+ console.warn('Could not fetch service status:', error);
+ }
+}
+
+function updateServiceStatus(service, statusData) {
+ const indicator = document.getElementById(`${service}-status-indicator`);
+ const statusText = document.getElementById(`${service}-status-text`);
+
+ if (indicator && statusText) {
+ if (service === 'spotify' && (statusData.rate_limited || statusData.post_ban_cooldown)) {
+ indicator.className = 'service-card-indicator rate-limited';
+ const remaining = statusData.rate_limited
+ ? formatRateLimitDuration(statusData.rate_limit?.remaining_seconds || 0)
+ : formatRateLimitDuration(statusData.post_ban_cooldown);
+ const phase = statusData.rate_limited ? 'paused' : 'recovering';
+ const fallbackLabel = statusData.source === 'deezer' ? 'Deezer' : 'iTunes';
+ statusText.textContent = `${fallbackLabel} (Spotify ${phase} \u2014 ${remaining})`;
+ statusText.className = 'service-card-status-text rate-limited';
+ } else if (statusData.connected) {
+ indicator.className = 'service-card-indicator connected';
+ statusText.textContent = `Connected (${statusData.response_time}ms)`;
+ statusText.className = 'service-card-status-text connected';
+ } else {
+ indicator.className = 'service-card-indicator disconnected';
+ statusText.textContent = 'Disconnected';
+ statusText.className = 'service-card-status-text disconnected';
+ }
+ }
+
+ // Update music source title based on active source
+ if (service === 'spotify' && statusData.source) {
+ const musicSourceTitleElement = document.getElementById('music-source-title');
+ if (musicSourceTitleElement) {
+ const sourceName = statusData.source === 'spotify' ? 'Spotify' : statusData.source === 'deezer' ? 'Deezer' : statusData.source === 'discogs' ? 'Discogs' : 'iTunes';
+ musicSourceTitleElement.textContent = sourceName;
+ currentMusicSourceName = sourceName;
+ }
+
+ // Show/hide Spotify disconnect button based on connection state
+ const disconnectBtn = document.getElementById('spotify-disconnect-btn');
+ if (disconnectBtn) {
+ disconnectBtn.style.display = statusData.source === 'spotify' ? '' : 'none';
+ }
+ }
+
+ // Update download source title on dashboard card
+ if (service === 'soulseek' && statusData.source) {
+ const sourceNames = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Hybrid' };
+ const displayName = sourceNames[statusData.source] || 'Soulseek';
+ const titleEl = document.getElementById('download-source-title');
+ if (titleEl) titleEl.textContent = displayName;
+ }
+}
+
+function updateSidebarServiceStatus(service, statusData) {
+ const indicator = document.getElementById(`${service}-indicator`);
+ if (indicator) {
+ const dot = indicator.querySelector('.status-dot');
+ const nameElement = indicator.querySelector('.status-name');
+
+ if (dot) {
+ if (service === 'spotify' && (statusData.rate_limited || statusData.post_ban_cooldown)) {
+ dot.className = 'status-dot rate-limited';
+ dot.title = statusData.rate_limited
+ ? `Spotify paused \u2014 ${formatRateLimitDuration(statusData.rate_limit?.remaining_seconds || 0)} remaining`
+ : `Spotify recovering \u2014 ${formatRateLimitDuration(statusData.post_ban_cooldown)} cooldown`;
+ } else if (statusData.connected) {
+ dot.className = 'status-dot connected';
+ dot.title = '';
+ } else {
+ dot.className = 'status-dot disconnected';
+ dot.title = '';
+ }
+ }
+
+ // Update media server name if it's the media server indicator
+ if (service === 'media-server' && statusData.type) {
+ const mediaServerNameElement = document.getElementById('media-server-name');
+ if (mediaServerNameElement) {
+ const serverName = statusData.type.charAt(0).toUpperCase() + statusData.type.slice(1);
+ mediaServerNameElement.textContent = serverName;
+ }
+ }
+
+ // Update music source name in sidebar based on active source
+ if (service === 'spotify' && statusData.source) {
+ const musicSourceNameElement = document.getElementById('music-source-name');
+ if (musicSourceNameElement) {
+ const sourceName = statusData.source === 'spotify' ? 'Spotify' : statusData.source === 'deezer' ? 'Deezer' : statusData.source === 'discogs' ? 'Discogs' : 'iTunes';
+ musicSourceNameElement.textContent = sourceName;
+ }
+ }
+
+ // Update download source name based on configured mode
+ if (service === 'soulseek' && statusData.source) {
+ const sourceNames = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Hybrid' };
+ const displayName = sourceNames[statusData.source] || 'Soulseek';
+ const sidebarName = document.getElementById('download-source-name');
+ if (sidebarName) sidebarName.textContent = displayName;
+ }
+ }
+}
+
+function renderEnrichmentCards(enrichment) {
+ const grid = document.getElementById('enrichment-status-grid');
+ if (!grid || !enrichment) return;
+
+ // Service display order
+ const serviceOrder = [
+ 'musicbrainz', 'spotify_enrichment', 'itunes_enrichment', 'deezer_enrichment',
+ 'tidal_enrichment', 'qobuz_enrichment', 'lastfm', 'genius', 'audiodb',
+ 'acoustid', 'listenbrainz'
+ ];
+
+ // Map service keys to their settings page selector for click-to-configure
+ const settingsSelectors = {
+ 'spotify_enrichment': '.spotify-title',
+ 'tidal_enrichment': '.tidal-title',
+ 'qobuz_enrichment': '.qobuz-title',
+ 'lastfm': '.lastfm-title',
+ 'genius': '.genius-title',
+ 'acoustid': '.acoustid-title',
+ 'listenbrainz': '.listenbrainz-title',
+ };
+
+ const chips = [];
+ for (const key of serviceOrder) {
+ const svc = enrichment[key];
+ if (!svc) continue;
+
+ // Determine status class and text
+ let statusClass, statusLabel;
+ if ('running' in svc) {
+ if (!svc.configured) {
+ statusClass = 'not-configured';
+ statusLabel = 'Set up';
+ } else if (svc.paused) {
+ statusClass = 'paused';
+ statusLabel = svc.yield_reason === 'downloads' ? 'Yielding' : 'Paused';
+ } else if (svc.running) {
+ statusClass = svc.idle ? 'idle' : 'running';
+ statusLabel = svc.idle ? 'Idle' : 'Running';
+ } else {
+ statusClass = 'stopped';
+ statusLabel = 'Stopped';
+ }
+ } else {
+ statusClass = svc.configured ? 'running' : 'not-configured';
+ statusLabel = svc.configured ? 'Ready' : 'Set up';
+ }
+
+ const selector = settingsSelectors[key];
+ const clickAttr = selector
+ ? `onclick="navigateToPage('settings'); setTimeout(() => { switchSettingsTab('connections'); setTimeout(() => { const el = document.querySelector('${selector}'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 100); }, 50);"`
+ : '';
+
+ // Build activity display — human-readable, not cryptic numbers
+ let activityHtml = '';
+ let metaHtml = '';
+ const isSpotify = key === 'spotify_enrichment';
+
+ if ('running' in svc && svc.configured) {
+ const c1h = svc.calls_1h || 0;
+ const c24h = svc.calls_24h || 0;
+
+ if (isSpotify && svc.daily_budget) {
+ // Spotify: show budget usage prominently
+ const b = svc.daily_budget;
+ const pct = Math.min(100, Math.round((b.used / b.limit) * 100));
+ const barClass = b.exhausted ? 'exhausted' : pct > 80 ? 'high' : '';
+ activityHtml = `${b.used.toLocaleString()} / ${b.limit.toLocaleString()}`;
+ metaHtml = `
+
+ ${allCompleted ? `
+ ${escapeHtml(chart.name)}
+
+ ${activeCount > 0 ? `${activeCount} active` : ''}
+ ${completedCount > 0 ? `${completedCount} completed` : ''}
+
+
+
+
+ ` : ''}
+
+
+
`;
+ } else if (c24h > 0) {
+ // Other services: show 24h count
+ activityHtml = `${c24h.toLocaleString()} / 24h`;
+ }
+ }
+
+ // Tooltip: full details including 1h breakdown
+ let tooltipLines = [svc.name + ' — ' + statusLabel];
+ if ('running' in svc && svc.configured) {
+ const c1h = svc.calls_1h || 0;
+ const c24h = svc.calls_24h || 0;
+ if (c24h > 0 || c1h > 0) tooltipLines.push('Last hour: ' + c1h + ' · Last 24h: ' + c24h);
+ }
+ if (isSpotify && svc.daily_budget) {
+ const b = svc.daily_budget;
+ tooltipLines.push('Daily budget: ' + b.used + ' / ' + b.limit + (b.exhausted ? ' (exhausted)' : ''));
+ }
+ if (selector && statusClass === 'not-configured') {
+ tooltipLines = ['Click to configure in Settings'];
+ }
+
+ const statusDisplay = statusClass === 'not-configured' && selector ? 'Configure →' : statusLabel;
+
+ chips.push(`
+
+
+ ${svc.name}
+ ${activityHtml}
+ ${statusDisplay}
+ ${metaHtml}
+
+ `);
+ }
+
+ grid.innerHTML = chips.join('');
+}
+
+// ===============================
+
diff --git a/webui/static/beatport-ui.js b/webui/static/beatport-ui.js
new file mode 100644
index 00000000..e2c5a774
--- /dev/null
+++ b/webui/static/beatport-ui.js
@@ -0,0 +1,3903 @@
+// BEATPORT REBUILD SLIDER FUNCTIONALITY
+// =================================
+
+let beatportRebuildSliderState = {
+ currentSlide: 0,
+ totalSlides: 4,
+ autoPlayInterval: null,
+ autoPlayDelay: 5000
+};
+
+/**
+ * Initialize the beatport rebuild slider functionality
+ */
+function initializeBeatportRebuildSlider() {
+ console.log('🔄 Initializing beatport rebuild slider...');
+
+ const slider = document.getElementById('beatport-rebuild-slider');
+ if (!slider) {
+ console.warn('Beatport rebuild slider not found');
+ return;
+ }
+
+ // Check if already initialized to prevent duplicate event listeners
+ if (slider.dataset.initialized === 'true') {
+ console.log('Beatport rebuild slider already initialized, skipping...');
+ startBeatportRebuildSliderAutoPlay(); // Just restart autoplay
+ return;
+ }
+
+ // Mark as initialized
+ slider.dataset.initialized = 'true';
+
+ // Load real Beatport data first
+ loadBeatportHeroTracks();
+
+ console.log('✅ Beatport rebuild slider initialized successfully');
+}
+
+/**
+ * Load real Beatport hero tracks and populate the slider
+ */
+async function loadBeatportHeroTracks() {
+ console.log('🎯 Loading real Beatport hero tracks...');
+
+ try {
+ const signal = getBeatportContentSignal();
+ const response = await fetch('/api/beatport/hero-tracks', signal ? { signal } : undefined);
+ const data = await response.json();
+
+ if (data.success && data.tracks && data.tracks.length > 0) {
+ console.log(`✅ Loaded ${data.tracks.length} Beatport tracks`);
+ populateBeatportSlider(data.tracks);
+ } else {
+ console.warn('❌ No tracks received from Beatport API, using placeholder data');
+ setupBeatportSliderWithPlaceholders();
+ }
+ } catch (error) {
+ if (error && error.name === 'AbortError') return;
+ console.error('❌ Error loading Beatport tracks:', error);
+ setupBeatportSliderWithPlaceholders();
+ }
+}
+
+/**
+ * Populate the slider with real Beatport track data
+ */
+function populateBeatportSlider(tracks) {
+ const sliderTrack = document.getElementById('beatport-rebuild-slider-track');
+ const indicatorsContainer = document.querySelector('.beatport-rebuild-slider-indicators');
+
+ if (!sliderTrack || !indicatorsContainer) {
+ console.warn('Slider elements not found');
+ return;
+ }
+
+ // Clear existing content
+ sliderTrack.innerHTML = '';
+ indicatorsContainer.innerHTML = '';
+
+ // Update state
+ beatportRebuildSliderState.totalSlides = tracks.length;
+ beatportRebuildSliderState.currentSlide = 0;
+
+ // Generate slides HTML
+ tracks.forEach((track, index) => {
+ const slideHtml = `
+
+ `;
+ sliderTrack.insertAdjacentHTML('beforeend', slideHtml);
+
+ // Add indicator
+ const indicatorHtml = ``;
+ indicatorsContainer.insertAdjacentHTML('beforeend', indicatorHtml);
+ });
+
+ // Now set up all the functionality
+ setupBeatportSliderFunctionality();
+
+ // Add individual click handlers for each slide (like top 10 releases pattern)
+ setupHeroSliderIndividualClickHandlers(tracks);
+
+ console.log(`✅ Populated slider with ${tracks.length} real Beatport tracks`);
+}
+
+/**
+ * Set up individual click handlers for hero slider slides (like top 10 releases)
+ */
+function setupHeroSliderIndividualClickHandlers(tracks) {
+ const slides = document.querySelectorAll('.beatport-rebuild-slide[data-url]');
+
+ slides.forEach((slide, index) => {
+ const releaseUrl = slide.getAttribute('data-url');
+ if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
+ // Create release data object from the track data (similar to top 10 releases)
+ const track = tracks[index];
+ if (track) {
+ const releaseData = {
+ url: releaseUrl,
+ title: track.title || 'Unknown Title',
+ artist: track.artist || 'Unknown Artist',
+ label: track.label || 'Unknown Label',
+ image_url: track.image_url || ''
+ };
+
+ // Add click handler that mimics the top 10 releases behavior
+ slide.addEventListener('click', (event) => {
+ // Prevent navigation button clicks from triggering this
+ if (event.target.closest('.beatport-rebuild-nav-btn') ||
+ event.target.closest('.beatport-rebuild-indicator')) {
+ return;
+ }
+
+ console.log(`🎯 Hero slider slide clicked: ${releaseData.title} by ${releaseData.artist}`);
+ handleBeatportReleaseCardClick(slide, releaseData);
+ });
+
+ slide.style.cursor = 'pointer';
+ }
+ }
+ });
+
+ console.log(`✅ Set up individual click handlers for ${slides.length} hero slider slides`);
+}
+
+/**
+ * Set up placeholder data if API fails
+ */
+function setupBeatportSliderWithPlaceholders() {
+ console.log('🔄 Setting up slider with placeholder data...');
+
+ // The HTML already has placeholder slides, just set up functionality
+ setupBeatportSliderFunctionality();
+}
+
+/**
+ * Set up all slider functionality after content is loaded
+ */
+function setupBeatportSliderFunctionality() {
+ // Set up navigation buttons
+ setupBeatportRebuildSliderNavigation();
+
+ // Set up indicators
+ setupBeatportRebuildSliderIndicators();
+
+
+ // Start auto-play
+ startBeatportRebuildSliderAutoPlay();
+
+ // Set up pause on hover
+ setupBeatportRebuildSliderHoverPause();
+}
+
+/**
+ * Set up navigation button functionality
+ */
+function setupBeatportRebuildSliderNavigation() {
+ const prevBtn = document.getElementById('beatport-rebuild-prev-btn');
+ const nextBtn = document.getElementById('beatport-rebuild-next-btn');
+
+ if (prevBtn) {
+ prevBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Previous button clicked, current slide:', beatportRebuildSliderState.currentSlide);
+ goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide - 1);
+ resetBeatportRebuildSliderAutoPlay();
+ });
+ }
+
+ if (nextBtn) {
+ nextBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Next button clicked, current slide:', beatportRebuildSliderState.currentSlide);
+ goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide + 1);
+ resetBeatportRebuildSliderAutoPlay();
+ });
+ }
+}
+
+/**
+ * Set up indicator functionality
+ */
+function setupBeatportRebuildSliderIndicators() {
+ const indicators = document.querySelectorAll('.beatport-rebuild-indicator');
+
+ indicators.forEach((indicator, index) => {
+ indicator.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ goToBeatportRebuildSlide(index);
+ resetBeatportRebuildSliderAutoPlay();
+ });
+ });
+}
+
+/**
+ * Navigate to a specific slide
+ */
+function goToBeatportRebuildSlide(slideIndex) {
+ console.log('goToBeatportRebuildSlide called with:', slideIndex, 'current:', beatportRebuildSliderState.currentSlide);
+
+ // Wrap around if out of bounds
+ if (slideIndex < 0) {
+ slideIndex = beatportRebuildSliderState.totalSlides - 1;
+ } else if (slideIndex >= beatportRebuildSliderState.totalSlides) {
+ slideIndex = 0;
+ }
+
+ console.log('After wrapping, slideIndex:', slideIndex);
+
+ // Update current slide
+ beatportRebuildSliderState.currentSlide = slideIndex;
+
+ // Update slide visibility
+ const slides = document.querySelectorAll('.beatport-rebuild-slide');
+ slides.forEach((slide, index) => {
+ slide.classList.remove('active', 'prev', 'next');
+
+ if (index === slideIndex) {
+ slide.classList.add('active');
+ } else if (index < slideIndex) {
+ slide.classList.add('prev');
+ } else {
+ slide.classList.add('next');
+ }
+ });
+
+ // Update indicators
+ const indicators = document.querySelectorAll('.beatport-rebuild-indicator');
+ indicators.forEach((indicator, index) => {
+ indicator.classList.toggle('active', index === slideIndex);
+ });
+
+ console.log('Slide updated to:', beatportRebuildSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play functionality
+ */
+function startBeatportRebuildSliderAutoPlay() {
+ if (beatportRebuildSliderState.autoPlayInterval) {
+ clearInterval(beatportRebuildSliderState.autoPlayInterval);
+ }
+
+ beatportRebuildSliderState.autoPlayInterval = setInterval(() => {
+ goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide + 1);
+ }, beatportRebuildSliderState.autoPlayDelay);
+}
+
+/**
+ * Reset auto-play timer
+ */
+function resetBeatportRebuildSliderAutoPlay() {
+ startBeatportRebuildSliderAutoPlay();
+}
+
+/**
+ * Set up hover pause functionality
+ */
+function setupBeatportRebuildSliderHoverPause() {
+ const sliderContainer = document.querySelector('.beatport-rebuild-slider-container');
+
+ if (sliderContainer) {
+ sliderContainer.addEventListener('mouseenter', () => {
+ if (beatportRebuildSliderState.autoPlayInterval) {
+ clearInterval(beatportRebuildSliderState.autoPlayInterval);
+ }
+ });
+
+ sliderContainer.addEventListener('mouseleave', () => {
+ startBeatportRebuildSliderAutoPlay();
+ });
+ }
+}
+
+
+/**
+ * Clean up beatport rebuild slider when switching away
+ */
+function cleanupBeatportRebuildSlider() {
+ if (beatportRebuildSliderState.autoPlayInterval) {
+ clearInterval(beatportRebuildSliderState.autoPlayInterval);
+ beatportRebuildSliderState.autoPlayInterval = null;
+ }
+}
+
+// ===================================
+// BEATPORT NEW RELEASES SLIDER
+// ===================================
+
+// State management for new releases slider (copied from hero slider)
+let beatportReleasesSliderState = {
+ currentSlide: 0,
+ totalSlides: 0,
+ autoPlayInterval: null,
+ autoPlayDelay: 8000,
+ isInitialized: false
+};
+
+/**
+ * Initialize the beatport new releases slider functionality (based on hero slider)
+ */
+function initializeBeatportReleasesSlider() {
+ console.log('🆕 Initializing beatport new releases slider...');
+
+ const slider = document.getElementById('beatport-releases-slider');
+ if (!slider) {
+ console.warn('Beatport releases slider not found');
+ return;
+ }
+
+ // Prevent double initialization
+ if (slider.dataset.initialized === 'true') {
+ console.log('Releases slider already initialized');
+ return;
+ }
+
+ const sliderTrack = document.getElementById('beatport-releases-slider-track');
+ const indicatorsContainer = document.getElementById('beatport-releases-slider-indicators');
+
+ if (!sliderTrack || !indicatorsContainer) {
+ console.warn('Releases slider elements not found');
+ return;
+ }
+
+ // Load data and initialize
+ loadBeatportNewReleases().then(success => {
+ if (success) {
+ setupBeatportReleasesSliderNavigation();
+ setupBeatportReleasesSliderIndicators();
+ setupBeatportReleasesSliderHoverPause();
+ startBeatportReleasesSliderAutoPlay();
+ slider.dataset.initialized = 'true';
+ beatportReleasesSliderState.isInitialized = true;
+ console.log('✅ New releases slider initialized successfully');
+ }
+ });
+}
+
+/**
+ * Load new releases data from API
+ */
+async function loadBeatportNewReleases() {
+ try {
+ console.log('📡 Fetching new releases data...');
+
+ const signal = getBeatportContentSignal();
+ const response = await fetch('/api/beatport/new-releases', signal ? { signal } : undefined);
+ const data = await response.json();
+
+ if (data.success && data.releases && data.releases.length > 0) {
+ console.log(`📀 Loaded ${data.releases.length} releases`);
+ populateBeatportReleasesSlider(data.releases);
+ return true;
+ } else {
+ console.error('Failed to load releases:', data.error || 'No releases found');
+ showBeatportReleasesError(data.error || 'No releases available');
+ return false;
+ }
+ } catch (error) {
+ if (error && error.name === 'AbortError') return false;
+ console.error('Error loading new releases:', error);
+ showBeatportReleasesError('Failed to load releases');
+ return false;
+ }
+}
+
+/**
+ * Populate the releases slider with data (based on hero slider)
+ */
+function populateBeatportReleasesSlider(releases) {
+ const sliderTrack = document.getElementById('beatport-releases-slider-track');
+ const indicatorsContainer = document.getElementById('beatport-releases-slider-indicators');
+
+ if (!sliderTrack || !indicatorsContainer) return;
+
+ // Calculate slides needed (10 cards per slide)
+ const cardsPerSlide = 10;
+ const totalSlides = Math.ceil(releases.length / cardsPerSlide);
+
+ // Clear existing content
+ sliderTrack.innerHTML = '';
+ indicatorsContainer.innerHTML = '';
+
+ // Update state
+ beatportReleasesSliderState.totalSlides = totalSlides;
+ beatportReleasesSliderState.currentSlide = 0;
+
+ console.log(`🎯 Creating ${totalSlides} slides with ${cardsPerSlide} cards each`);
+
+ // Generate slides HTML (similar to hero slider)
+ for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
+ const startIndex = slideIndex * cardsPerSlide;
+ const endIndex = Math.min(startIndex + cardsPerSlide, releases.length);
+ const slideReleases = releases.slice(startIndex, endIndex);
+
+ // Create grid HTML for this slide
+ let gridHtml = '';
+ for (let i = 0; i < cardsPerSlide; i++) {
+ if (i < slideReleases.length) {
+ const release = slideReleases[i];
+ gridHtml += `
+
+
+ `;
+ } else {
+ // Placeholder card
+ gridHtml += `
+
+
+
+ ${release.image_url ? `
` : ''}
+
+
+
+ ${release.title}
+ ${release.artist}
+ ${release.label}
+
+
+ `;
+ }
+ }
+
+ const slideHtml = `
+
+ `;
+
+ sliderTrack.innerHTML += slideHtml;
+
+ // Create indicator
+ const indicatorHtml = ``;
+ indicatorsContainer.innerHTML += indicatorHtml;
+ }
+
+ console.log(`✅ Created ${totalSlides} slides for releases slider`);
+
+ // Add click handlers for individual release discovery (matching Top 10 Releases pattern)
+ const releaseCards = sliderTrack.querySelectorAll('.beatport-release-card[data-url]:not(.beatport-release-placeholder)');
+ releaseCards.forEach((card) => {
+ const releaseUrl = card.getAttribute('data-url');
+ if (releaseUrl && releaseUrl !== '#') {
+ // Find the corresponding release data
+ const releaseData = releases.find(release => release.url === releaseUrl);
+ if (releaseData) {
+ card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releaseData));
+ card.style.cursor = 'pointer';
+ }
+ }
+ });
+}
+
+/**
+ * Set up navigation functionality (copied from hero slider)
+ */
+function setupBeatportReleasesSliderNavigation() {
+ const prevBtn = document.getElementById('beatport-releases-prev-btn');
+ const nextBtn = document.getElementById('beatport-releases-next-btn');
+
+ if (prevBtn) {
+ // Clone button to remove all existing event listeners
+ const newPrevBtn = prevBtn.cloneNode(true);
+ prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+
+ newPrevBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Previous releases button clicked, current slide:', beatportReleasesSliderState.currentSlide);
+ goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide - 1);
+ resetBeatportReleasesSliderAutoPlay();
+ });
+ }
+
+ if (nextBtn) {
+ // Clone button to remove all existing event listeners
+ const newNextBtn = nextBtn.cloneNode(true);
+ nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+
+ newNextBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Next releases button clicked, current slide:', beatportReleasesSliderState.currentSlide);
+ goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide + 1);
+ resetBeatportReleasesSliderAutoPlay();
+ });
+ }
+}
+
+/**
+ * Set up indicator functionality (copied from hero slider)
+ */
+function setupBeatportReleasesSliderIndicators() {
+ const indicators = document.querySelectorAll('.beatport-releases-indicator');
+
+ indicators.forEach((indicator, index) => {
+ indicator.addEventListener('click', () => {
+ goToBeatportReleasesSlide(index);
+ resetBeatportReleasesSliderAutoPlay();
+ });
+ });
+}
+
+/**
+ * Navigate to a specific slide (copied from hero slider)
+ */
+function goToBeatportReleasesSlide(slideIndex) {
+ console.log('goToBeatportReleasesSlide called with:', slideIndex, 'current:', beatportReleasesSliderState.currentSlide);
+
+ // Wrap around if out of bounds
+ if (slideIndex < 0) {
+ slideIndex = beatportReleasesSliderState.totalSlides - 1;
+ } else if (slideIndex >= beatportReleasesSliderState.totalSlides) {
+ slideIndex = 0;
+ }
+
+ console.log('After wrapping, slideIndex:', slideIndex);
+
+ // Update current slide
+ beatportReleasesSliderState.currentSlide = slideIndex;
+
+ // Update slide visibility
+ const slides = document.querySelectorAll('.beatport-releases-slide');
+ slides.forEach((slide, index) => {
+ slide.classList.remove('active', 'prev', 'next');
+
+ if (index === slideIndex) {
+ slide.classList.add('active');
+ } else if (index < slideIndex) {
+ slide.classList.add('prev');
+ } else {
+ slide.classList.add('next');
+ }
+ });
+
+ // Update indicators
+ const indicators = document.querySelectorAll('.beatport-releases-indicator');
+ indicators.forEach((indicator, index) => {
+ indicator.classList.toggle('active', index === slideIndex);
+ });
+
+ console.log('Releases slide updated to:', beatportReleasesSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play functionality (copied from hero slider)
+ */
+function startBeatportReleasesSliderAutoPlay() {
+ if (beatportReleasesSliderState.autoPlayInterval) {
+ clearInterval(beatportReleasesSliderState.autoPlayInterval);
+ }
+
+ beatportReleasesSliderState.autoPlayInterval = setInterval(() => {
+ goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide + 1);
+ }, beatportReleasesSliderState.autoPlayDelay);
+}
+
+/**
+ * Reset auto-play timer (copied from hero slider)
+ */
+function resetBeatportReleasesSliderAutoPlay() {
+ startBeatportReleasesSliderAutoPlay();
+}
+
+/**
+ * Set up hover pause functionality (copied from hero slider)
+ */
+function setupBeatportReleasesSliderHoverPause() {
+ const sliderContainer = document.querySelector('.beatport-releases-slider-container');
+
+ if (sliderContainer) {
+ sliderContainer.addEventListener('mouseenter', () => {
+ if (beatportReleasesSliderState.autoPlayInterval) {
+ clearInterval(beatportReleasesSliderState.autoPlayInterval);
+ beatportReleasesSliderState.autoPlayInterval = null;
+ }
+ });
+
+ sliderContainer.addEventListener('mouseleave', () => {
+ startBeatportReleasesSliderAutoPlay();
+ });
+ }
+}
+
+/**
+ * Show error state
+ */
+function showBeatportReleasesError(errorMessage) {
+ const sliderTrack = document.getElementById('beatport-releases-slider-track');
+ if (!sliderTrack) return;
+
+ sliderTrack.innerHTML = `
+
+
+
+
+
+
+
+ More Releases
+ Coming Soon
+ Beatport
+
+
+ `;
+}
+
+/**
+ * Clean up releases slider when switching away (copied from hero slider)
+ */
+function cleanupBeatportReleasesSlider() {
+ if (beatportReleasesSliderState.autoPlayInterval) {
+ clearInterval(beatportReleasesSliderState.autoPlayInterval);
+ beatportReleasesSliderState.autoPlayInterval = null;
+ }
+}
+
+// ===================================
+// BEATPORT HYPE PICKS SLIDER
+// ===================================
+
+// Hype Picks Slider State
+let beatportHypePicksSliderState = {
+ currentSlide: 0,
+ totalSlides: 0,
+ autoPlayInterval: null,
+ autoPlayDelay: 4000,
+ isInitialized: false
+};
+
+/**
+ * Initialize the beatport hype picks slider functionality (based on releases slider)
+ */
+function initializeBeatportHypePicksSlider() {
+ console.log('🔥 Initializing beatport hype picks slider...');
+
+ const slider = document.getElementById('beatport-hype-picks-slider');
+ if (!slider) {
+ console.warn('Beatport hype picks slider not found');
+ return;
+ }
+
+ // Check if already initialized
+ if (beatportHypePicksSliderState.isInitialized) {
+ console.log('Beatport hype picks slider already initialized, skipping...');
+ startBeatportHypePicksSliderAutoPlay(); // Just restart autoplay
+ return;
+ }
+
+ // Mark as initialized
+ beatportHypePicksSliderState.isInitialized = true;
+
+ // Reset state
+ beatportHypePicksSliderState.currentSlide = 0;
+ beatportHypePicksSliderState.totalSlides = 0;
+
+ // Load data and initialize
+ loadBeatportHypePicks().then(success => {
+ if (success) {
+ setupBeatportHypePicksSliderNavigation();
+ setupBeatportHypePicksSliderIndicators();
+ setupBeatportHypePicksSliderHoverPause();
+ startBeatportHypePicksSliderAutoPlay();
+ }
+ });
+
+ console.log('✅ Beatport hype picks slider initialized successfully');
+}
+
+/**
+ * Load hype picks data from API
+ */
+async function loadBeatportHypePicks() {
+ try {
+ console.log('🔥 Fetching hype picks data...');
+
+ const signal = getBeatportContentSignal();
+ const response = await fetch('/api/beatport/hype-picks', signal ? { signal } : undefined);
+ const data = await response.json();
+
+ if (data.success && data.releases && data.releases.length > 0) {
+ console.log(`🔥 Loaded ${data.releases.length} hype picks releases`);
+ populateBeatportHypePicksSlider(data.releases);
+ return true;
+ } else {
+ console.error('Failed to load hype picks:', data.error || 'No hype picks found');
+ showBeatportHypePicksError(data.error || 'No hype picks available');
+ return false;
+ }
+ } catch (error) {
+ if (error && error.name === 'AbortError') return false;
+ console.error('Error loading hype picks:', error);
+ showBeatportHypePicksError('Failed to load hype picks');
+ return false;
+ }
+}
+
+/**
+ * Populate the hype picks slider with data (based on releases slider)
+ */
+function populateBeatportHypePicksSlider(releases) {
+ const sliderTrack = document.getElementById('beatport-hype-picks-slider-track');
+ const indicatorsContainer = document.getElementById('beatport-hype-picks-slider-indicators');
+
+ if (!sliderTrack || !indicatorsContainer) return;
+
+ // Clear existing content
+ sliderTrack.innerHTML = '';
+ indicatorsContainer.innerHTML = '';
+
+ // Group releases into slides (10 releases per slide in 5x2 grid)
+ const releasesPerSlide = 10;
+ const slides = [];
+ for (let i = 0; i < releases.length; i += releasesPerSlide) {
+ slides.push(releases.slice(i, i + releasesPerSlide));
+ }
+
+ console.log(`🔥 Hype Picks: Got ${releases.length} releases, creating ${slides.length} slides`);
+ beatportHypePicksSliderState.totalSlides = slides.length;
+ beatportHypePicksSliderState.currentSlide = 0;
+
+ // Create slides
+ slides.forEach((slideReleases, slideIndex) => {
+ const slideHtml = `
+
+ `;
+ sliderTrack.insertAdjacentHTML('beforeend', slideHtml);
+ console.log(`🔥 Created slide ${slideIndex + 1}/${slides.length} with ${slideReleases.length} releases`);
+
+ // Create indicator
+ const indicatorHtml = ``;
+ indicatorsContainer.insertAdjacentHTML('beforeend', indicatorHtml);
+ });
+
+ // Add click handlers to track cards
+ setupBeatportHypePickCardHandlers();
+}
+
+/**
+ * Create a hype pick card HTML (for release cards, same as new releases)
+ */
+function createBeatportHypePickCard(release) {
+ const artworkUrl = release.image_url || '';
+ const bgStyle = artworkUrl ? `style="--card-bg-image: url('${artworkUrl}')"` : '';
+
+ return `
+
+
+ ❌ Error Loading Releases
+${errorMessage}
+
+
+ `;
+}
+
+/**
+ * Setup navigation for hype picks slider (same pattern as releases)
+ */
+function setupBeatportHypePicksSliderNavigation() {
+ const prevBtn = document.getElementById('beatport-hype-picks-prev-btn');
+ const nextBtn = document.getElementById('beatport-hype-picks-next-btn');
+
+ if (prevBtn) {
+ // Clone button to remove all existing event listeners
+ const newPrevBtn = prevBtn.cloneNode(true);
+ prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+
+ newPrevBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Previous hype picks button clicked, current slide:', beatportHypePicksSliderState.currentSlide);
+ goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide - 1);
+ resetBeatportHypePicksSliderAutoPlay();
+ });
+ }
+
+ if (nextBtn) {
+ // Clone button to remove all existing event listeners
+ const newNextBtn = nextBtn.cloneNode(true);
+ nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+
+ newNextBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Next hype picks button clicked, current slide:', beatportHypePicksSliderState.currentSlide);
+ goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide + 1);
+ resetBeatportHypePicksSliderAutoPlay();
+ });
+ }
+}
+
+/**
+ * Setup indicators for hype picks slider
+ */
+function setupBeatportHypePicksSliderIndicators() {
+ const indicators = document.querySelectorAll('.beatport-hype-picks-indicator');
+
+ indicators.forEach((indicator, index) => {
+ indicator.addEventListener('click', () => {
+ goToBeatportHypePicksSlide(index);
+ resetBeatportHypePicksSliderAutoPlay();
+ });
+ });
+}
+
+/**
+ * Navigate to specific slide
+ */
+function goToBeatportHypePicksSlide(slideIndex) {
+ console.log('goToBeatportHypePicksSlide called with:', slideIndex, 'current:', beatportHypePicksSliderState.currentSlide);
+
+ // Handle wrap around
+ if (slideIndex < 0) {
+ slideIndex = beatportHypePicksSliderState.totalSlides - 1;
+ } else if (slideIndex >= beatportHypePicksSliderState.totalSlides) {
+ slideIndex = 0;
+ }
+
+ // Update current slide
+ beatportHypePicksSliderState.currentSlide = slideIndex;
+
+ // Update slides
+ const slides = document.querySelectorAll('.beatport-hype-picks-slide');
+ slides.forEach((slide, index) => {
+ slide.classList.remove('active', 'prev', 'next');
+ if (index === slideIndex) {
+ slide.classList.add('active');
+ } else if (index < slideIndex) {
+ slide.classList.add('prev');
+ } else {
+ slide.classList.add('next');
+ }
+ });
+
+ // Update indicators
+ const indicators = document.querySelectorAll('.beatport-hype-picks-indicator');
+ indicators.forEach((indicator, index) => {
+ indicator.classList.toggle('active', index === slideIndex);
+ });
+
+ console.log('Slide updated to:', beatportHypePicksSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play for hype picks slider
+ */
+function startBeatportHypePicksSliderAutoPlay() {
+ if (beatportHypePicksSliderState.autoPlayInterval) {
+ clearInterval(beatportHypePicksSliderState.autoPlayInterval);
+ }
+
+ beatportHypePicksSliderState.autoPlayInterval = setInterval(() => {
+ goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide + 1);
+ }, beatportHypePicksSliderState.autoPlayDelay);
+
+ console.log('🔥 Hype picks slider autoplay started');
+}
+
+/**
+ * Reset auto-play for hype picks slider
+ */
+function resetBeatportHypePicksSliderAutoPlay() {
+ startBeatportHypePicksSliderAutoPlay();
+}
+
+/**
+ * Setup hover pause for hype picks slider
+ */
+function setupBeatportHypePicksSliderHoverPause() {
+ const sliderContainer = document.querySelector('.beatport-hype-picks-slider-container');
+ if (sliderContainer) {
+ sliderContainer.addEventListener('mouseenter', () => {
+ if (beatportHypePicksSliderState.autoPlayInterval) {
+ clearInterval(beatportHypePicksSliderState.autoPlayInterval);
+ }
+ });
+
+ sliderContainer.addEventListener('mouseleave', () => {
+ startBeatportHypePicksSliderAutoPlay();
+ });
+ }
+}
+
+/**
+ * Setup click handlers for hype pick cards
+ */
+function setupBeatportHypePickCardHandlers() {
+ const cards = document.querySelectorAll('.beatport-hype-pick-card:not(.beatport-hype-pick-placeholder)');
+
+ cards.forEach(card => {
+ const releaseUrl = card.getAttribute('data-url');
+ if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
+ // Extract release data from the card elements
+ const titleElement = card.querySelector('.beatport-hype-pick-title');
+ const artistElement = card.querySelector('.beatport-hype-pick-artist');
+ const labelElement = card.querySelector('.beatport-hype-pick-label');
+ const imageElement = card.querySelector('.beatport-hype-pick-artwork img');
+
+ const releaseData = {
+ url: releaseUrl,
+ title: titleElement ? titleElement.textContent.trim() : 'Unknown Title',
+ artist: artistElement ? artistElement.textContent.trim() : 'Unknown Artist',
+ label: labelElement ? labelElement.textContent.trim() : 'Unknown Label',
+ image_url: imageElement ? imageElement.src : ''
+ };
+
+ card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releaseData));
+ card.style.cursor = 'pointer';
+ }
+ });
+}
+
+/**
+ * Show error state for hype picks slider
+ */
+function showBeatportHypePicksError(errorMessage) {
+ const sliderTrack = document.getElementById('beatport-hype-picks-slider-track');
+ if (sliderTrack) {
+ sliderTrack.innerHTML = `
+
+
+
+ ${artworkUrl ? `
` : ''}
+
+
+
+ ${release.title || 'Unknown Title'}
+ ${release.artist || 'Unknown Artist'}
+ ${release.label || 'Hype Pick'}
+
+
+ `;
+ }
+}
+
+/**
+ * Clean up hype picks slider when switching away
+ */
+function cleanupBeatportHypePicksSlider() {
+ if (beatportHypePicksSliderState.autoPlayInterval) {
+ clearInterval(beatportHypePicksSliderState.autoPlayInterval);
+ beatportHypePicksSliderState.autoPlayInterval = null;
+ }
+}
+
+// ===================================
+// BEATPORT FEATURED CHARTS SLIDER
+// ===================================
+
+// State management for featured charts slider (copied from releases slider)
+let beatportChartsSliderState = {
+ currentSlide: 0,
+ totalSlides: 0,
+ autoPlayInterval: null,
+ autoPlayDelay: 10000, // Slightly longer auto-play for charts
+ isInitialized: false
+};
+
+/**
+ * Initialize the beatport featured charts slider functionality (based on releases slider)
+ */
+function initializeBeatportChartsSlider() {
+ console.log('🔥 Initializing beatport featured charts slider...');
+
+ const slider = document.getElementById('beatport-charts-slider');
+ if (!slider) {
+ console.warn('Beatport charts slider not found');
+ return;
+ }
+
+ // Prevent double initialization
+ if (slider.dataset.initialized === 'true') {
+ console.log('Charts slider already initialized');
+ return;
+ }
+
+ const sliderTrack = document.getElementById('beatport-charts-slider-track');
+ const indicatorsContainer = document.getElementById('beatport-charts-slider-indicators');
+
+ if (!sliderTrack || !indicatorsContainer) {
+ console.warn('Charts slider elements not found');
+ return;
+ }
+
+ // Load data and initialize
+ loadBeatportFeaturedCharts().then(success => {
+ if (success) {
+ setupBeatportChartsSliderNavigation();
+ setupBeatportChartsSliderIndicators();
+ setupBeatportChartsSliderHoverPause();
+ startBeatportChartsSliderAutoPlay();
+ slider.dataset.initialized = 'true';
+ beatportChartsSliderState.isInitialized = true;
+ console.log('✅ Featured charts slider initialized successfully');
+ }
+ });
+}
+
+/**
+ * Load featured charts data from API
+ */
+async function loadBeatportFeaturedCharts() {
+ try {
+ console.log('📊 Loading featured charts data...');
+ const signal = getBeatportContentSignal();
+ const response = await fetch('/api/beatport/featured-charts', signal ? { signal } : undefined);
+ const data = await response.json();
+
+ if (data.success && data.charts && data.charts.length > 0) {
+ console.log(`📈 Loaded ${data.charts.length} featured charts`);
+ createBeatportChartsSlides(data.charts);
+ return true;
+ } else {
+ console.warn('No featured charts data available');
+ return false;
+ }
+ } catch (error) {
+ if (error && error.name === 'AbortError') return false;
+ console.error('❌ Error loading featured charts:', error);
+ return false;
+ }
+}
+
+/**
+ * Create chart slides with grid layout (copied from releases slider)
+ */
+function createBeatportChartsSlides(charts) {
+ const sliderTrack = document.getElementById('beatport-charts-slider-track');
+ const indicatorsContainer = document.getElementById('beatport-charts-slider-indicators');
+
+ if (!sliderTrack || !indicatorsContainer) {
+ console.error('Charts slider elements not found');
+ return;
+ }
+
+ const cardsPerSlide = 10; // 5x2 grid
+ const totalSlides = Math.ceil(charts.length / cardsPerSlide);
+
+ // Clear existing content
+ sliderTrack.innerHTML = '';
+ indicatorsContainer.innerHTML = '';
+
+ // Update state
+ beatportChartsSliderState.totalSlides = totalSlides;
+ beatportChartsSliderState.currentSlide = 0;
+
+ console.log(`🎯 Creating ${totalSlides} chart slides with ${cardsPerSlide} cards each`);
+
+ // Generate slides HTML
+ for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
+ const startIndex = slideIndex * cardsPerSlide;
+ const endIndex = Math.min(startIndex + cardsPerSlide, charts.length);
+ const slideCharts = charts.slice(startIndex, endIndex);
+
+ // Create grid HTML for this slide
+ const gridHtml = slideCharts.map(chart => {
+ const bgImageStyle = chart.image ? `--chart-bg-image: url('${chart.image}')` : '';
+ return `
+
+
+ ❌ Error Loading Hype Picks
+${errorMessage}
+
+
+ `;
+ }).join('');
+
+ // Create slide HTML
+ const slideHtml = `
+
+ `;
+
+ sliderTrack.innerHTML += slideHtml;
+
+ // Create indicator
+ const indicatorHtml = ``;
+ indicatorsContainer.innerHTML += indicatorHtml;
+ }
+
+ console.log(`✅ Created ${totalSlides} chart slides`);
+
+ // Add click handlers for individual chart discovery (matching chart pattern)
+ const chartCards = sliderTrack.querySelectorAll('.beatport-chart-card[data-url]');
+ chartCards.forEach((card) => {
+ const chartUrl = card.getAttribute('data-url');
+ if (chartUrl && chartUrl !== '') {
+ // Find the corresponding chart data
+ const chartData = charts.find(chart => chart.url === chartUrl);
+ if (chartData) {
+ card.addEventListener('click', () => handleBeatportChartCardClick(card, chartData));
+ card.style.cursor = 'pointer';
+ }
+ }
+ });
+}
+
+/**
+ * Set up navigation functionality (copied from releases slider with button cloning)
+ */
+function setupBeatportChartsSliderNavigation() {
+ const prevBtn = document.getElementById('beatport-charts-prev-btn');
+ const nextBtn = document.getElementById('beatport-charts-next-btn');
+
+ if (prevBtn) {
+ // Clone button to remove all existing event listeners
+ const newPrevBtn = prevBtn.cloneNode(true);
+ prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+
+ newPrevBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Previous charts button clicked, current slide:', beatportChartsSliderState.currentSlide);
+ goToBeatportChartsSlide(beatportChartsSliderState.currentSlide - 1);
+ resetBeatportChartsSliderAutoPlay();
+ });
+ }
+
+ if (nextBtn) {
+ // Clone button to remove all existing event listeners
+ const newNextBtn = nextBtn.cloneNode(true);
+ nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+
+ newNextBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Next charts button clicked, current slide:', beatportChartsSliderState.currentSlide);
+ goToBeatportChartsSlide(beatportChartsSliderState.currentSlide + 1);
+ resetBeatportChartsSliderAutoPlay();
+ });
+ }
+}
+
+/**
+ * Set up indicator functionality (copied from releases slider)
+ */
+function setupBeatportChartsSliderIndicators() {
+ const indicators = document.querySelectorAll('.beatport-charts-indicator');
+
+ indicators.forEach((indicator, index) => {
+ indicator.addEventListener('click', () => {
+ goToBeatportChartsSlide(index);
+ resetBeatportChartsSliderAutoPlay();
+ });
+ });
+}
+
+/**
+ * Navigate to a specific slide (copied from releases slider)
+ */
+function goToBeatportChartsSlide(slideIndex) {
+ console.log('goToBeatportChartsSlide called with:', slideIndex, 'current:', beatportChartsSliderState.currentSlide);
+
+ // Wrap around if out of bounds
+ if (slideIndex < 0) {
+ slideIndex = beatportChartsSliderState.totalSlides - 1;
+ } else if (slideIndex >= beatportChartsSliderState.totalSlides) {
+ slideIndex = 0;
+ }
+
+ console.log('After wrapping, slideIndex:', slideIndex);
+
+ // Update current slide
+ beatportChartsSliderState.currentSlide = slideIndex;
+
+ // Update slide visibility
+ const slides = document.querySelectorAll('.beatport-charts-slide');
+ slides.forEach((slide, index) => {
+ slide.classList.remove('active', 'prev', 'next');
+
+ if (index === slideIndex) {
+ slide.classList.add('active');
+ } else if (index < slideIndex) {
+ slide.classList.add('prev');
+ } else {
+ slide.classList.add('next');
+ }
+ });
+
+ // Update indicators
+ const indicators = document.querySelectorAll('.beatport-charts-indicator');
+ indicators.forEach((indicator, index) => {
+ indicator.classList.toggle('active', index === slideIndex);
+ });
+
+ console.log('Charts slide updated to:', beatportChartsSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play functionality (copied from releases slider)
+ */
+function startBeatportChartsSliderAutoPlay() {
+ if (beatportChartsSliderState.autoPlayInterval) {
+ clearInterval(beatportChartsSliderState.autoPlayInterval);
+ }
+
+ beatportChartsSliderState.autoPlayInterval = setInterval(() => {
+ goToBeatportChartsSlide(beatportChartsSliderState.currentSlide + 1);
+ }, beatportChartsSliderState.autoPlayDelay);
+}
+
+/**
+ * Reset auto-play timer (copied from releases slider)
+ */
+function resetBeatportChartsSliderAutoPlay() {
+ startBeatportChartsSliderAutoPlay();
+}
+
+/**
+ * Set up hover pause functionality (copied from releases slider)
+ */
+function setupBeatportChartsSliderHoverPause() {
+ const sliderContainer = document.querySelector('.beatport-charts-slider-container');
+
+ if (sliderContainer) {
+ sliderContainer.addEventListener('mouseenter', () => {
+ if (beatportChartsSliderState.autoPlayInterval) {
+ clearInterval(beatportChartsSliderState.autoPlayInterval);
+ beatportChartsSliderState.autoPlayInterval = null;
+ }
+ });
+
+ sliderContainer.addEventListener('mouseleave', () => {
+ startBeatportChartsSliderAutoPlay();
+ });
+ }
+}
+
+/**
+ * Clean up charts slider when switching away (copied from releases slider)
+ */
+function cleanupBeatportChartsSlider() {
+ if (beatportChartsSliderState.autoPlayInterval) {
+ clearInterval(beatportChartsSliderState.autoPlayInterval);
+ beatportChartsSliderState.autoPlayInterval = null;
+ }
+}
+
+// ===================================
+// BEATPORT DJ CHARTS SLIDER
+// ===================================
+
+// State management for DJ charts slider (3 cards per slide)
+let beatportDJSliderState = {
+ currentSlide: 0,
+ totalSlides: 0,
+ autoPlayInterval: null,
+ autoPlayDelay: 12000, // Longer auto-play for DJ charts
+ isInitialized: false
+};
+
+/**
+ * Initialize the beatport DJ charts slider functionality (based on charts slider)
+ */
+function initializeBeatportDJSlider() {
+ console.log('🎧 Initializing beatport DJ charts slider...');
+
+ const slider = document.getElementById('beatport-dj-slider');
+ if (!slider) {
+ console.warn('Beatport DJ slider not found');
+ return;
+ }
+
+ // Prevent double initialization
+ if (slider.dataset.initialized === 'true') {
+ console.log('DJ slider already initialized');
+ return;
+ }
+
+ const sliderTrack = document.getElementById('beatport-dj-slider-track');
+ const indicatorsContainer = document.getElementById('beatport-dj-slider-indicators');
+
+ if (!sliderTrack || !indicatorsContainer) {
+ console.warn('DJ slider elements not found');
+ return;
+ }
+
+ // Load data and initialize
+ loadBeatportDJCharts().then(success => {
+ if (success) {
+ setupBeatportDJSliderNavigation();
+ setupBeatportDJSliderIndicators();
+ setupBeatportDJSliderHoverPause();
+ startBeatportDJSliderAutoPlay();
+ slider.dataset.initialized = 'true';
+ beatportDJSliderState.isInitialized = true;
+ console.log('✅ DJ charts slider initialized successfully');
+ }
+ });
+}
+
+/**
+ * Load DJ charts data from API
+ */
+async function loadBeatportDJCharts() {
+ try {
+ console.log('🎧 Loading DJ charts data...');
+ const signal = getBeatportContentSignal();
+ const response = await fetch('/api/beatport/dj-charts', signal ? { signal } : undefined);
+ const data = await response.json();
+
+ if (data.success && data.charts && data.charts.length > 0) {
+ console.log(`📈 Loaded ${data.charts.length} DJ charts`);
+ createBeatportDJSlides(data.charts);
+ return true;
+ } else {
+ console.warn('No DJ charts data available');
+ return false;
+ }
+ } catch (error) {
+ if (error && error.name === 'AbortError') return false;
+ console.error('❌ Error loading DJ charts:', error);
+ return false;
+ }
+}
+
+/**
+ * Create DJ chart slides with 3 cards per slide layout
+ */
+function createBeatportDJSlides(charts) {
+ const sliderTrack = document.getElementById('beatport-dj-slider-track');
+ const indicatorsContainer = document.getElementById('beatport-dj-slider-indicators');
+
+ if (!sliderTrack || !indicatorsContainer) {
+ console.error('DJ slider elements not found');
+ return;
+ }
+
+ const cardsPerSlide = 3; // 3 cards per slide for DJ charts
+ const totalSlides = Math.ceil(charts.length / cardsPerSlide);
+
+ // Clear existing content
+ sliderTrack.innerHTML = '';
+ indicatorsContainer.innerHTML = '';
+
+ // Update state
+ beatportDJSliderState.totalSlides = totalSlides;
+ beatportDJSliderState.currentSlide = 0;
+
+ console.log(`🎯 Creating ${totalSlides} DJ chart slides with ${cardsPerSlide} cards each`);
+
+ // Generate slides HTML
+ for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
+ const startIndex = slideIndex * cardsPerSlide;
+ const endIndex = Math.min(startIndex + cardsPerSlide, charts.length);
+ const slideCharts = charts.slice(startIndex, endIndex);
+
+ // Create grid HTML for this slide
+ const gridHtml = slideCharts.map(chart => {
+ const bgImageStyle = chart.image ? `--dj-bg-image: url('${chart.image}')` : '';
+ return `
+
+
+ ${chart.name || 'Unknown Chart'}
+ ${chart.creator || 'Unknown Creator'}
+
+
+ `;
+ }).join('');
+
+ // Create slide HTML
+ const slideHtml = `
+
+ `;
+
+ sliderTrack.innerHTML += slideHtml;
+
+ // Create indicator
+ const indicatorHtml = ``;
+ indicatorsContainer.innerHTML += indicatorHtml;
+ }
+
+ console.log(`✅ Created ${totalSlides} DJ chart slides`);
+
+ // Add click handlers for individual DJ chart discovery (matching chart pattern)
+ const djChartCards = sliderTrack.querySelectorAll('.beatport-dj-card[data-url]');
+ djChartCards.forEach((card) => {
+ const chartUrl = card.getAttribute('data-url');
+ if (chartUrl && chartUrl !== '') {
+ // Find the corresponding chart data
+ const chartData = charts.find(chart => chart.url === chartUrl);
+ if (chartData) {
+ card.addEventListener('click', () => handleBeatportDJChartCardClick(card, chartData));
+ card.style.cursor = 'pointer';
+ }
+ }
+ });
+}
+
+/**
+ * Set up navigation functionality (copied from charts slider with button cloning)
+ */
+function setupBeatportDJSliderNavigation() {
+ const prevBtn = document.getElementById('beatport-dj-prev-btn');
+ const nextBtn = document.getElementById('beatport-dj-next-btn');
+
+ if (prevBtn) {
+ // Clone button to remove all existing event listeners
+ const newPrevBtn = prevBtn.cloneNode(true);
+ prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+
+ newPrevBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Previous DJ button clicked, current slide:', beatportDJSliderState.currentSlide);
+ goToBeatportDJSlide(beatportDJSliderState.currentSlide - 1);
+ resetBeatportDJSliderAutoPlay();
+ });
+ }
+
+ if (nextBtn) {
+ // Clone button to remove all existing event listeners
+ const newNextBtn = nextBtn.cloneNode(true);
+ nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+
+ newNextBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Next DJ button clicked, current slide:', beatportDJSliderState.currentSlide);
+ goToBeatportDJSlide(beatportDJSliderState.currentSlide + 1);
+ resetBeatportDJSliderAutoPlay();
+ });
+ }
+}
+
+/**
+ * Set up indicator functionality (copied from charts slider)
+ */
+function setupBeatportDJSliderIndicators() {
+ const indicators = document.querySelectorAll('.beatport-dj-indicator');
+
+ indicators.forEach((indicator, index) => {
+ indicator.addEventListener('click', () => {
+ goToBeatportDJSlide(index);
+ resetBeatportDJSliderAutoPlay();
+ });
+ });
+}
+
+/**
+ * Navigate to a specific slide (copied from charts slider)
+ */
+function goToBeatportDJSlide(slideIndex) {
+ console.log('goToBeatportDJSlide called with:', slideIndex, 'current:', beatportDJSliderState.currentSlide);
+
+ // Wrap around if out of bounds
+ if (slideIndex < 0) {
+ slideIndex = beatportDJSliderState.totalSlides - 1;
+ } else if (slideIndex >= beatportDJSliderState.totalSlides) {
+ slideIndex = 0;
+ }
+
+ console.log('After wrapping, slideIndex:', slideIndex);
+
+ // Update current slide
+ beatportDJSliderState.currentSlide = slideIndex;
+
+ // Update slide visibility
+ const slides = document.querySelectorAll('.beatport-dj-slide');
+ slides.forEach((slide, index) => {
+ slide.classList.remove('active', 'prev', 'next');
+
+ if (index === slideIndex) {
+ slide.classList.add('active');
+ } else if (index < slideIndex) {
+ slide.classList.add('prev');
+ } else {
+ slide.classList.add('next');
+ }
+ });
+
+ // Update indicators
+ const indicators = document.querySelectorAll('.beatport-dj-indicator');
+ indicators.forEach((indicator, index) => {
+ indicator.classList.toggle('active', index === slideIndex);
+ });
+
+ console.log('DJ slide updated to:', beatportDJSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play functionality (copied from charts slider)
+ */
+function startBeatportDJSliderAutoPlay() {
+ if (beatportDJSliderState.autoPlayInterval) {
+ clearInterval(beatportDJSliderState.autoPlayInterval);
+ }
+
+ beatportDJSliderState.autoPlayInterval = setInterval(() => {
+ goToBeatportDJSlide(beatportDJSliderState.currentSlide + 1);
+ }, beatportDJSliderState.autoPlayDelay);
+}
+
+/**
+ * Reset auto-play timer (copied from charts slider)
+ */
+function resetBeatportDJSliderAutoPlay() {
+ startBeatportDJSliderAutoPlay();
+}
+
+/**
+ * Set up hover pause functionality (copied from charts slider)
+ */
+function setupBeatportDJSliderHoverPause() {
+ const sliderContainer = document.querySelector('.beatport-dj-slider-container');
+
+ if (sliderContainer) {
+ sliderContainer.addEventListener('mouseenter', () => {
+ if (beatportDJSliderState.autoPlayInterval) {
+ clearInterval(beatportDJSliderState.autoPlayInterval);
+ beatportDJSliderState.autoPlayInterval = null;
+ }
+ });
+
+ sliderContainer.addEventListener('mouseleave', () => {
+ startBeatportDJSliderAutoPlay();
+ });
+ }
+}
+
+/**
+ * Clean up DJ slider when switching away (copied from charts slider)
+ */
+function cleanupBeatportDJSlider() {
+ if (beatportDJSliderState.autoPlayInterval) {
+ clearInterval(beatportDJSliderState.autoPlayInterval);
+ beatportDJSliderState.autoPlayInterval = null;
+ }
+}
+
+/**
+ * Load top 10 lists data from API and populate both lists
+ */
+async function loadBeatportTop10Lists() {
+ try {
+ console.log('🏆 Loading top 10 lists data...');
+ const signal = getBeatportContentSignal();
+ const response = await fetch('/api/beatport/homepage/top-10-lists', signal ? { signal } : undefined);
+ const data = await response.json();
+
+ if (data.success) {
+ console.log(`🎵 Loaded ${data.beatport_count} Beatport Top 10 + ${data.hype_count} Hype Top 10 tracks`);
+
+ // Populate both lists
+ populateBeatportTop10List(data.beatport_top10);
+ populateHypeTop10List(data.hype_top10);
+ return true;
+ } else {
+ console.error('Failed to load top 10 lists:', data.error);
+ showTop10ListsError(data.error || 'No data available');
+ return false;
+ }
+ } catch (error) {
+ if (error && error.name === 'AbortError') return false;
+ console.error('Error loading top 10 lists:', error);
+ showTop10ListsError('Failed to load top 10 lists');
+ return false;
+ }
+}
+
+/**
+ * Clean track/artist text for proper spacing
+ */
+function cleanTrackText(text) {
+ if (!text) return text;
+
+ // Fix common spacing issues
+ text = text.replace(/([a-z$!@#%&*])([A-Z])/g, '$1 $2'); // Add space between lowercase/symbols and uppercase
+ text = text.replace(/([a-zA-Z]),([a-zA-Z])/g, '$1, $2'); // Add space after comma
+ text = text.replace(/([a-zA-Z])(Mix|Remix|Extended|Version)\b/g, '$1 $2'); // Fix mix types
+ text = text.replace(/\s+/g, ' '); // Collapse multiple spaces
+ text = text.trim();
+
+ return text;
+}
+
+/**
+ * Populate Beatport Top 10 list with data
+ */
+function populateBeatportTop10List(tracks) {
+ const container = document.getElementById('beatport-top10-list');
+ if (!container || !tracks || tracks.length === 0) return;
+
+ // Generate HTML for the tracks
+ let tracksHtml = `
+
+
+ ${chart.name || 'Unknown Chart'}
+ ${chart.creator || 'Unknown Creator'}
+
+
+ 🎵 Beatport Top 10
+Most popular tracks on Beatport
+
+ `;
+
+ tracks.forEach((track, index) => {
+ // Clean the text data before injection
+ const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
+ const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
+ const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
+
+ tracksHtml += `
+
';
+ container.innerHTML = tracksHtml;
+}
+
+/**
+ * Populate Hype Top 10 list with data
+ */
+function populateHypeTop10List(tracks) {
+ const container = document.getElementById('beatport-hype10-list');
+ if (!container || !tracks || tracks.length === 0) return;
+
+ // Generate HTML for the tracks
+ let tracksHtml = `
+
+
+ `;
+ });
+
+ tracksHtml += '${track.rank || index + 1}
+
+ ${track.artwork_url ?
+ `
` :
+ '
+ 🎵
'
+ }
+
+
+ ${cleanTitle}
+${cleanArtist}
+${cleanLabel}
+
+
+ 🔥 Hype Top 10
+Editor's trending picks
+
+ `;
+
+ tracks.forEach((track, index) => {
+ // Clean the text data before injection
+ const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
+ const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
+ const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
+
+ tracksHtml += `
+
';
+ container.innerHTML = tracksHtml;
+}
+
+/**
+ * Show error message for top 10 lists
+ */
+function showTop10ListsError(errorMessage) {
+ const beatportContainer = document.getElementById('beatport-top10-list');
+ const hypeContainer = document.getElementById('beatport-hype10-list');
+
+ const errorHtml = `
+
+
+ `;
+ });
+
+ tracksHtml += '${track.rank || index + 1}
+
+ ${track.artwork_url ?
+ `` :
+ '
+ 🔥
'
+ }
+
+
+ ${cleanTitle}
+${cleanArtist}
+${cleanLabel}
+
+
+ `;
+
+ if (beatportContainer) beatportContainer.innerHTML = errorHtml;
+ if (hypeContainer) hypeContainer.innerHTML = errorHtml;
+}
+
+/**
+ * Load top 10 releases data from API and populate the list
+ */
+async function loadBeatportTop10Releases() {
+ try {
+ console.log('💿 Loading top 10 releases data...');
+ const signal = getBeatportContentSignal();
+ const response = await fetch('/api/beatport/homepage/top-10-releases-cards', signal ? { signal } : undefined);
+ const data = await response.json();
+
+ if (data.success) {
+ console.log(`💿 Loaded ${data.releases_count} Top 10 Releases`);
+ populateBeatportTop10Releases(data.releases);
+ return true;
+ } else {
+ console.error('Failed to load top 10 releases:', data.error);
+ showTop10ReleasesError(data.error || 'No data available');
+ return false;
+ }
+ } catch (error) {
+ if (error && error.name === 'AbortError') return false;
+ console.error('Error loading top 10 releases:', error);
+ showTop10ReleasesError('Failed to load top 10 releases');
+ return false;
+ }
+}
+
+/**
+ * Populate Top 10 Releases list with data
+ */
+function populateBeatportTop10Releases(releases) {
+ const container = document.getElementById('beatport-releases-top10-list');
+ if (!container || !releases || releases.length === 0) return;
+
+ // Generate HTML for the releases
+ let releasesHtml = `
+ ❌ Error Loading Data
+${errorMessage}
+
+ `;
+
+ releases.forEach((release, index) => {
+ releasesHtml += `
+
';
+ container.innerHTML = releasesHtml;
+
+ // Set background images for cards
+ const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
+ cards.forEach(card => {
+ const bgImage = card.getAttribute('data-bg-image');
+ if (bgImage) {
+ // Transform image URL from 95x95 to 500x500 for higher quality background
+ const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
+ card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
+ card.style.backgroundSize = 'cover';
+ card.style.backgroundPosition = 'center';
+ }
+ });
+
+ // Add click handlers for individual release discovery
+ const releaseCards = container.querySelectorAll('.beatport-releases-top10-card[data-url]');
+ releaseCards.forEach((card, index) => {
+ card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releases[index]));
+ card.style.cursor = 'pointer';
+ });
+}
+
+/**
+ * Show error message for top 10 releases
+ */
+function showTop10ReleasesError(errorMessage) {
+ const container = document.getElementById('beatport-releases-top10-list');
+
+ const errorHtml = `
+
+
+ `;
+ });
+
+ releasesHtml += '${release.rank || index + 1}
+
+ ${release.image_url ?
+ `` :
+ '
+ 💿
'
+ }
+
+
+ ${release.title || 'Unknown Title'}
+${release.artist || 'Unknown Artist'}
+${release.label || 'Unknown Label'}
+
+
+ `;
+
+ if (container) container.innerHTML = errorHtml;
+}
+
+/**
+ * Handle click on individual Top 10 Release card - create discovery process for single release
+ */
+async function handleBeatportReleaseCardClick(cardElement, release) {
+ if (_beatportModalOpening) return;
+ _beatportModalOpening = true;
+
+ console.log(`💿 Individual release card clicked: ${release.title} by ${release.artist}`);
+
+ if (!release.url || release.url === '#') {
+ _beatportModalOpening = false;
+ showToast('No release URL available', 'error');
+ return;
+ }
+
+ try {
+ showToast(`Loading ${release.title}...`, 'info');
+ showLoadingOverlay(`Getting tracks from ${release.title}...`);
+
+ // Fetch structured release metadata for direct download modal
+ console.log(`🎵 Fetching release metadata: ${release.url}`);
+ const response = await fetch('/api/beatport/release-metadata', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ release_url: release.url })
+ });
+
+ const data = await response.json();
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ throw new Error(data.error || 'No tracks found in this release');
+ }
+
+ console.log(`✅ Got ${data.tracks.length} tracks from ${data.album.name}`);
+
+ // Format artists as array of strings for compatibility with download modal
+ const formattedTracks = data.tracks.map(track => ({
+ ...track,
+ artists: track.artists.map(a => typeof a === 'object' ? a.name : a)
+ }));
+
+ const virtualPlaylistId = `beatport_release_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+ const playlistName = data.album.name;
+
+ // Open download modal directly - same as clicking an album on the Artists page
+ await openDownloadMissingModalForArtistAlbum(
+ virtualPlaylistId,
+ playlistName,
+ formattedTracks,
+ data.album,
+ data.artist,
+ false
+ );
+
+ // Register Beatport download bubble for releases (albums, EPs, singles)
+ const releaseImage = (data.album.images && data.album.images.length > 0) ? data.album.images[0].url : (release.image_url || '');
+ registerBeatportDownload(playlistName, releaseImage, virtualPlaylistId);
+
+ hideLoadingOverlay();
+ _beatportModalOpening = false;
+ console.log(`✅ Opened download modal for ${playlistName}`);
+
+ } catch (error) {
+ console.error(`❌ Error handling release click for ${release.title}:`, error);
+ hideLoadingOverlay();
+ _beatportModalOpening = false;
+ showToast(`Error loading ${release.title}: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Convert scraped Beatport tracks into download-modal-compatible format and open the modal.
+ * Used by all chart/playlist handlers (Top 100, Hype 100, Featured Charts, DJ Charts, genre charts).
+ * Charts open as compilations — each track is searched independently on Soulseek.
+ */
+// Guard against multiple rapid clicks opening duplicate modals
+let _beatportModalOpening = false;
+
+/**
+ * Enrich tracks via a single batch request to the backend.
+ * Progress is reported via WebSocket (beatport:enrich_progress) and updates the loading overlay.
+ * Returns the enriched tracks array.
+ */
+async function _enrichTracksWithProgress(tracks, chartName) {
+ const enrichmentId = `enrich_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`;
+
+ try {
+ const resp = await fetch('/api/beatport/enrich-tracks', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ tracks, enrichment_id: enrichmentId })
+ });
+ const data = await resp.json();
+
+ // Synchronous path — all tracks were cached, results returned inline
+ if (data.success && data.tracks) {
+ return data.tracks;
+ }
+
+ // Async path — poll for progress until done
+ if (data.success && data.async) {
+ while (true) {
+ await new Promise(r => setTimeout(r, 800));
+ try {
+ const progressResp = await fetch(`/api/beatport/enrich-progress/${enrichmentId}?_=${Date.now()}`);
+ const progress = await progressResp.json();
+ if (!progress.success) break;
+
+ // Update loading overlay with live progress
+ const overlayText = document.querySelector('#loading-overlay .loading-message');
+ if (overlayText) {
+ overlayText.textContent = `Fetching track metadata... (${progress.completed}/${progress.total}) ${progress.current_track || ''}`;
+ }
+
+ if (progress.done) {
+ if (progress.tracks) {
+ return progress.tracks;
+ }
+ console.warn('⚠️ Async enrichment failed:', progress.error);
+ return tracks;
+ }
+ } catch (pollErr) {
+ console.warn('⚠️ Progress poll error:', pollErr);
+ }
+ }
+ }
+
+ console.warn('⚠️ Enrichment failed, returning original tracks');
+ return tracks;
+ } catch (e) {
+ console.warn('⚠️ Failed to enrich tracks:', e);
+ return tracks;
+ }
+}
+
+function parseBeatportDuration(raw) {
+ if (!raw) return 0;
+ if (typeof raw === 'string' && raw.includes(':')) {
+ const parts = raw.split(':');
+ return (parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10)) * 1000 || 0;
+ }
+ return (parseInt(raw, 10) || 0) * 1000;
+}
+
+function openBeatportChartAsDownloadModal(tracks, chartName, chartImage) {
+ // Note: callers already guard against double-clicks via _beatportModalOpening.
+ // Reset the flag here so the modal can open even after fast (cached) enrichment.
+ _beatportModalOpening = false;
+
+ const albumObj = {
+ id: `beatport_chart_${Date.now()}`,
+ name: chartName,
+ album_type: 'compilation',
+ images: chartImage ? [{ url: chartImage }] : [],
+ total_tracks: tracks.length
+ };
+
+ const formattedTracks = tracks.map((track, index) => {
+ // Use per-track release metadata if available (from JSON extraction)
+ const hasRelease = track.release_name && track.release_name.length > 0;
+ const trackAlbum = hasRelease ? {
+ id: `beatport_release_${track.release_id || index}`,
+ name: cleanTrackText(track.release_name),
+ album_type: 'single',
+ images: track.release_image ? [{ url: track.release_image }] : [],
+ release_date: track.release_date || '',
+ total_tracks: 1
+ } : albumObj;
+
+ // Combine title + mix_name
+ let trackName = cleanTrackText(track.title || 'Unknown Title');
+ if (track.mix_name && track.mix_name.toLowerCase() !== 'original mix') {
+ trackName = `${trackName} (${cleanTrackText(track.mix_name)})`;
+ }
+
+ // Split combined artist string into individual names for proper folder structure
+ const rawArtist = cleanTrackText(track.artist || 'Unknown Artist');
+ const artistList = rawArtist.includes(',')
+ ? rawArtist.split(',').map(a => a.trim()).filter(a => a)
+ : [rawArtist];
+
+ return {
+ id: `beatport_chart_${index}`,
+ name: trackName,
+ artists: artistList,
+ duration_ms: parseBeatportDuration(track.duration),
+ track_number: index + 1,
+ disc_number: 1,
+ album: trackAlbum
+ };
+ });
+
+ const virtualPlaylistId = `beatport_chart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+ // Compilation artist
+ const artistObj = { id: 'beatport_various', name: 'Various Artists' };
+
+ openDownloadMissingModalForArtistAlbum(
+ virtualPlaylistId,
+ chartName,
+ formattedTracks,
+ albumObj,
+ artistObj,
+ false,
+ 'playlist'
+ );
+
+ // Register Beatport download bubble
+ registerBeatportDownload(chartName, chartImage, virtualPlaylistId);
+}
+
+/**
+ * Handle click on individual chart card - open download modal directly
+ */
+async function handleBeatportChartCardClick(cardElement, chart) {
+ console.log(`📊 Individual chart card clicked: ${chart.name} by ${chart.creator}`);
+
+ if (!chart.url || chart.url === '') {
+ showToast('No chart URL available', 'error');
+ return;
+ }
+
+ try {
+ const chartName = `${chart.name} - ${chart.creator}`;
+ showToast(`Loading ${chart.name}...`, 'info');
+ showLoadingOverlay(`Scraping ${chart.name}...`);
+
+ const response = await fetch('/api/beatport/chart/extract', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ chart_url: chart.url,
+ chart_name: `Featured Chart: ${chart.name}`,
+ limit: 100,
+ enrich: false
+ })
+ });
+
+ const data = await response.json();
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ throw new Error('No tracks found in this chart');
+ }
+
+ console.log(`✅ Fetched ${data.tracks.length} raw tracks from ${chart.name}, enriching...`);
+ const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
+
+ hideLoadingOverlay();
+ openBeatportChartAsDownloadModal(enrichedTracks, chartName, chart.image);
+
+ } catch (error) {
+ console.error(`❌ Error handling chart click for ${chart.name}:`, error);
+ hideLoadingOverlay();
+ showToast(`Error loading ${chart.name}: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Handle click on individual DJ chart card - open download modal directly
+ */
+async function handleBeatportDJChartCardClick(cardElement, chart) {
+ console.log(`🎧 Individual DJ chart card clicked: ${chart.name} by ${chart.creator}`);
+
+ if (!chart.url || chart.url === '') {
+ showToast('No DJ chart URL available', 'error');
+ return;
+ }
+
+ try {
+ const chartName = `${chart.name} - ${chart.creator}`;
+ showToast(`Loading ${chart.name}...`, 'info');
+ showLoadingOverlay(`Scraping ${chart.name}...`);
+
+ const response = await fetch('/api/beatport/chart/extract', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ chart_url: chart.url,
+ chart_name: `DJ Chart: ${chart.name}`,
+ limit: 100,
+ enrich: false
+ })
+ });
+
+ const data = await response.json();
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ throw new Error('No tracks found in this DJ chart');
+ }
+
+ console.log(`✅ Fetched ${data.tracks.length} raw tracks from ${chart.name}, enriching...`);
+ const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
+
+ hideLoadingOverlay();
+ openBeatportChartAsDownloadModal(enrichedTracks, chartName, chart.image);
+
+ } catch (error) {
+ console.error(`❌ Error handling DJ chart click for ${chart.name}:`, error);
+ hideLoadingOverlay();
+ showToast(`Error loading ${chart.name}: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Handle click on Beatport Top 100 button - open download modal directly
+ */
+async function handleBeatportTop100Click() {
+ if (_beatportModalOpening) return;
+ _beatportModalOpening = true;
+ setTimeout(() => { _beatportModalOpening = false; }, 2000);
+
+ console.log('💯 Beatport Top 100 button clicked');
+
+ try {
+ showLoadingOverlay('Scraping Beatport Top 100...');
+
+ // Fetch track list without enrichment (fast)
+ const response = await fetch('/api/beatport/top-100?enrich=false', { method: 'GET' });
+ const data = await response.json();
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ throw new Error('No tracks found in Beatport Top 100');
+ }
+
+ console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);
+
+ // Enrich one-by-one with live progress
+ const enrichedTracks = await _enrichTracksWithProgress(data.tracks, 'Beatport Top 100');
+
+ hideLoadingOverlay();
+ openBeatportChartAsDownloadModal(enrichedTracks, 'Beatport Top 100', null);
+
+ } catch (error) {
+ console.error('❌ Error handling Beatport Top 100 click:', error);
+ hideLoadingOverlay();
+ showToast(`Error loading Beatport Top 100: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Handle click on Hype Top 100 button - open download modal directly
+ */
+async function handleHypeTop100Click() {
+ if (_beatportModalOpening) return;
+ _beatportModalOpening = true;
+ setTimeout(() => { _beatportModalOpening = false; }, 2000);
+
+ console.log('🔥 Hype Top 100 button clicked');
+
+ try {
+ showLoadingOverlay('Scraping Hype Top 100...');
+
+ // Fetch track list without enrichment (fast)
+ const response = await fetch('/api/beatport/hype-top-100?enrich=false', { method: 'GET' });
+ const data = await response.json();
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ throw new Error('No tracks found in Hype Top 100');
+ }
+
+ console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);
+
+ // Enrich one-by-one with live progress
+ const enrichedTracks = await _enrichTracksWithProgress(data.tracks, 'Hype Top 100');
+
+ hideLoadingOverlay();
+ openBeatportChartAsDownloadModal(enrichedTracks, 'Hype Top 100', null);
+
+ } catch (error) {
+ console.error('❌ Error handling Hype Top 100 click:', error);
+ hideLoadingOverlay();
+ showToast(`Error loading Hype Top 100: ${error.message}`, 'error');
+ }
+}
+
+// ================================= //
+// GENRE BROWSER MODAL FUNCTIONS //
+// ================================= //
+
+// Cache for genre browser data to avoid re-loading
+let genreBrowserCache = {
+ genres: null,
+ imagesLoaded: false,
+ lastLoaded: null,
+ imageLoadingActive: false,
+ imageWorkers: null
+};
+
+function initializeGenreBrowserModal() {
+ console.log('🎵 Initializing Genre Browser Modal...');
+
+ // Browse by Genre button click handler
+ const browseByGenreBtn = document.getElementById('browse-by-genre-btn');
+ if (browseByGenreBtn) {
+ browseByGenreBtn.addEventListener('click', () => {
+ console.log('🎵 Browse by Genre button clicked');
+ openGenreBrowserModal();
+ });
+ }
+
+ // Modal close button handler
+ const modalCloseBtn = document.getElementById('genre-browser-modal-close');
+ if (modalCloseBtn) {
+ modalCloseBtn.addEventListener('click', closeGenreBrowserModal);
+ }
+
+ // Click outside modal to close
+ const modalOverlay = document.getElementById('genre-browser-modal');
+ if (modalOverlay) {
+ modalOverlay.addEventListener('click', (e) => {
+ if (e.target === modalOverlay) {
+ closeGenreBrowserModal();
+ }
+ });
+ }
+
+ // Search functionality
+ const searchInput = document.getElementById('genre-browser-search');
+ if (searchInput) {
+ searchInput.addEventListener('input', (e) => {
+ filterGenreBrowserCards(e.target.value);
+ });
+ }
+
+ // ESC key to close modal
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && isGenreBrowserModalOpen()) {
+ closeGenreBrowserModal();
+ }
+ });
+
+ console.log('✅ Genre Browser Modal initialized');
+}
+
+function openGenreBrowserModal() {
+ console.log('🎵 Opening Genre Browser Modal...');
+
+ const modal = document.getElementById('genre-browser-modal');
+ if (modal) {
+ modal.classList.add('active');
+ document.body.style.overflow = 'hidden'; // Prevent background scrolling
+
+ // Check cache before loading genres
+ if (genreBrowserCache.genres && genreBrowserCache.genres.length > 0) {
+ console.log('💾 Using cached genres data');
+ displayCachedGenres();
+ } else {
+ console.log('🔄 No cached data, loading genres...');
+ loadGenreBrowserGenres();
+ }
+
+ console.log('✅ Genre Browser Modal opened');
+ }
+}
+
+function closeGenreBrowserModal() {
+ console.log('🎵 Closing Genre Browser Modal...');
+
+ const modal = document.getElementById('genre-browser-modal');
+ if (modal) {
+ modal.classList.remove('active');
+ document.body.style.overflow = ''; // Restore scrolling
+
+ // Clear search input but keep the genre data cached
+ const searchInput = document.getElementById('genre-browser-search');
+ if (searchInput) {
+ searchInput.value = '';
+ // Also reset the display filter to show all genres
+ filterGenreBrowserCards('');
+ }
+
+ // Pause image loading workers if they're running
+ if (genreBrowserCache.imageLoadingActive) {
+ console.log('⏸️ Pausing image loading workers...');
+ genreBrowserCache.imageLoadingActive = false;
+ }
+
+ console.log('✅ Genre Browser Modal closed (data preserved in cache)');
+ }
+}
+
+function isGenreBrowserModalOpen() {
+ const modal = document.getElementById('genre-browser-modal');
+ return modal && modal.classList.contains('active');
+}
+
+async function loadGenreBrowserGenres() {
+ console.log('🔍 Loading genres for Genre Browser Modal...');
+
+ const genresGrid = document.getElementById('genre-browser-genres-grid');
+ if (!genresGrid) {
+ console.error('❌ Genre browser grid not found');
+ return;
+ }
+
+ // Show loading state
+ genresGrid.innerHTML = `
+ ❌ Error Loading Releases
+${errorMessage}
+
+
+
+ `;
+
+ try {
+ // First, fetch genres quickly without images
+ console.log('🚀 Fetching genres without images for fast loading...');
+ const fastResponse = await fetch('/api/beatport/genres');
+ if (!fastResponse.ok) {
+ throw new Error(`API returned ${fastResponse.status}: ${fastResponse.statusText}`);
+ }
+
+ const fastData = await fastResponse.json();
+ const genres = fastData.genres || [];
+
+ if (genres.length === 0) {
+ genresGrid.innerHTML = `
+ 🔍 Discovering current Beatport genres...
+
+
+ `;
+ return;
+ }
+
+ // Filter out unwanted genres (section titles, etc.)
+ const filteredGenres = genres.filter(genre => {
+ const name = genre.name.toLowerCase().trim();
+ const unwantedGenres = [
+ 'open format',
+ 'electronic',
+ 'genres',
+ 'browse',
+ 'charts',
+ 'new releases',
+ 'trending',
+ 'featured',
+ 'popular'
+ ];
+
+ const isUnwanted = unwantedGenres.includes(name);
+ if (isUnwanted) {
+ console.log(`🚫 Filtered out unwanted genre: "${genre.name}"`);
+ }
+ return !isUnwanted;
+ });
+
+ console.log(`📋 Filtered genres: ${genres.length} → ${filteredGenres.length} (removed ${genres.length - filteredGenres.length} unwanted)`);
+
+ // Generate genre cards dynamically (without images first)
+ const genreCardsHTML = filteredGenres.map(genre => `
+ ⚠️ No genres available
+ +
+
+ `).join('');
+
+ genresGrid.innerHTML = genreCardsHTML;
+
+ // Add click event listeners to genre cards
+ addGenreBrowserCardClickListeners();
+
+ // Cache the filtered genres data
+ genreBrowserCache.genres = filteredGenres;
+ genreBrowserCache.lastLoaded = new Date();
+ genreBrowserCache.imagesLoaded = false;
+
+ console.log(`✅ Loaded ${filteredGenres.length} Beatport genres for modal (fast mode)`);
+ console.log(`💾 Cached ${filteredGenres.length} genres for future use`);
+ showToast(`Loaded ${filteredGenres.length} genres for browsing`, 'success');
+
+ // Now fetch images progressively in the background
+ if (filteredGenres.length > 5) {
+ console.log('🖼️ Loading genre images progressively for modal...');
+ loadGenreBrowserImagesProgressively(filteredGenres);
+ }
+
+ } catch (error) {
+ console.error('❌ Error loading genres for modal:', error);
+ genresGrid.innerHTML = `
+ 🎵
+
+
+ ${genre.name}
+Top 10 & Top 100 Charts
+
+
+ `;
+ showToast(`Error loading genres: ${error.message}`, 'error');
+ }
+}
+
+function displayCachedGenres() {
+ console.log('💾 Displaying cached genres...');
+
+ const genresGrid = document.getElementById('genre-browser-genres-grid');
+ if (!genresGrid) {
+ console.error('❌ Genre browser grid not found');
+ return;
+ }
+
+ const genres = genreBrowserCache.genres;
+ if (!genres || genres.length === 0) {
+ console.error('❌ No cached genres available');
+ return;
+ }
+
+ // Generate genre cards from cached data
+ const genreCardsHTML = genres.map(genre => `
+ ❌ Failed to load genres: ${error.message}
+ +
+
+ `).join('');
+
+ genresGrid.innerHTML = genreCardsHTML;
+
+ // Add click event listeners to genre cards
+ addGenreBrowserCardClickListeners();
+
+ console.log(`✅ Displayed ${genres.length} cached genres instantly`);
+
+ // Handle image loading based on current state
+ if (genreBrowserCache.imagesLoaded) {
+ console.log('🖼️ Images already loaded, restoring them...');
+ restoreCachedImages(genres);
+ } else if (!genreBrowserCache.imageLoadingActive && genres.length > 5) {
+ // Resume or start image loading
+ const cachedCount = genres.filter(g => g.imageUrl).length;
+ if (cachedCount > 0) {
+ console.log(`🔄 Resuming image loading (${cachedCount}/${genres.length} already cached)...`);
+ restoreCachedImages(genres); // Show already cached images
+ } else {
+ console.log('🖼️ Starting fresh image loading for cached genres...');
+ }
+ loadGenreBrowserImagesProgressively(genres);
+ } else {
+ console.log('📷 Image loading in progress, showing cached images...');
+ restoreCachedImages(genres);
+ }
+}
+
+function restoreCachedImages(genres) {
+ // Restore images that were already loaded in previous sessions
+ genres.forEach(genre => {
+ if (genre.imageUrl) {
+ const genreCard = document.querySelector(
+ `.genre-browser-card[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
+ );
+
+ if (genreCard) {
+ const imageElement = genreCard.querySelector('.genre-browser-card-image');
+ if (imageElement) {
+ imageElement.innerHTML = `🎵
+
+
+ ${genre.name}
+Top 10 & Top 100 Charts
+
+
+
+
+
+
+
+
+
+
+
+ 🎵 Loading Top 10 lists...
+
+
+ `;
+
+ modal.querySelector('.genre-browser-modal-content').appendChild(genrePageContent);
+
+ // Add back button listener
+ const backButton = genrePageContent.querySelector('#genre-back-button');
+ if (backButton) {
+ backButton.addEventListener('click', showGenreListView);
+ }
+
+ // Add genre top 100 button listener
+ const genreTop100Button = genrePageContent.querySelector('#genre-top100-btn');
+ if (genreTop100Button) {
+ genreTop100Button.addEventListener('click', () => {
+ handleGenreTop100Click(genreSlug, genreId, genreName);
+ });
+ }
+ }
+
+ // Update title and show genre page
+ const titleElement = genrePageContent.querySelector('.genre-page-title');
+ if (titleElement) titleElement.textContent = genreName;
+
+ genrePageContent.style.display = 'block';
+
+ // Store current genre info for potential back navigation
+ genrePageContent.dataset.genreSlug = genreSlug;
+ genrePageContent.dataset.genreId = genreId;
+ genrePageContent.dataset.genreName = genreName;
+}
+
+function showGenreListView() {
+ console.log(`🔙 Returning to genre list view`);
+
+ // Clean up genre hero slider
+ if (window.genreHeroSliderState && window.genreHeroSliderState.autoPlayInterval) {
+ clearInterval(window.genreHeroSliderState.autoPlayInterval);
+ console.log('🧹 Cleaned up genre hero slider auto-play');
+ }
+
+ // CRITICAL: Restart main slider auto-play
+ if (typeof beatportRebuildSliderState !== 'undefined' && !beatportRebuildSliderState.autoPlayInterval) {
+ if (typeof startBeatportRebuildSliderAutoPlay === 'function') {
+ startBeatportRebuildSliderAutoPlay();
+ console.log('🔄 Restarted main slider auto-play');
+ }
+ }
+
+ const modal = document.getElementById('genre-browser-modal');
+ if (!modal) return;
+
+ // Show genre list elements
+ const searchSection = modal.querySelector('.genre-browser-search-section');
+ const genresSection = modal.querySelector('.genre-browser-genres-section');
+ const genrePageContent = modal.querySelector('.genre-page-content');
+
+ if (searchSection) searchSection.style.display = 'block';
+ if (genresSection) genresSection.style.display = 'block';
+ if (genrePageContent) genrePageContent.style.display = 'none';
+}
+
+async function loadGenreHeroSlider(genreSlug, genreId, genreName) {
+ console.log(`🎠 Loading hero slider data for ${genreName}...`);
+
+ const container = document.getElementById('genre-hero-slider-container');
+ if (!container) return;
+
+ try {
+ // Show loading state
+ container.innerHTML = `
+
+
+
+ 💿 Loading Top 10 releases...
+
+
+
+ `;
+
+ // Fetch hero slider data from API
+ const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/hero`);
+ if (!response.ok) {
+ throw new Error(`API returned ${response.status}: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+
+ if (!data.success || !data.releases || data.releases.length === 0) {
+ throw new Error(data.message || 'No hero releases found');
+ }
+
+ console.log(`✅ Loaded ${data.count} hero releases for ${genreName} (cached: ${data.cached})`);
+
+ // Create hero slider HTML
+ const heroSliderHTML = createGenreHeroSliderHTML(data.releases, genreName);
+ container.innerHTML = heroSliderHTML;
+
+ // Add click handlers to individual releases (for future download functionality)
+ addGenreHeroReleaseClickHandlers(data.releases);
+
+ showToast(`Loaded ${data.count} ${genreName} releases`, 'success');
+
+ } catch (error) {
+ console.error(`❌ Error loading hero slider for ${genreName}:`, error);
+
+ container.innerHTML = `
+ 🎠 Loading ${genreName} hero releases...
+
+
+ `;
+
+ throw error;
+ }
+}
+
+function createGenreHeroSliderHTML(releases, genreName) {
+ const slidesHTML = releases.map((release, index) => {
+ // Convert relative URL to absolute URL
+ const absoluteUrl = release.url.startsWith('http')
+ ? release.url
+ : `https://www.beatport.com${release.url}`;
+
+ return `
+ `;
+ }).join('');
+
+ const indicatorsHTML = releases.map((_, index) => `
+
+ `).join('');
+
+ return `
+
+ `;
+}
+
+function addGenreHeroReleaseClickHandlers(releases) {
+ // Clear any existing intervals first
+ if (window.genreHeroSliderState && window.genreHeroSliderState.autoPlayInterval) {
+ clearInterval(window.genreHeroSliderState.autoPlayInterval);
+ console.log('🧹 Cleared previous genre hero auto-play interval');
+ }
+
+ // CRITICAL: Clear ALL possible conflicting intervals
+ if (typeof beatportRebuildSliderState !== 'undefined' && beatportRebuildSliderState.autoPlayInterval) {
+ clearInterval(beatportRebuildSliderState.autoPlayInterval);
+ console.log('🛑 Cleared main rebuild slider auto-play interval');
+ }
+
+ // Initialize global slider state for genre hero slider
+ window.genreHeroSliderState = {
+ currentSlide: 0,
+ totalSlides: releases.length,
+ autoPlayInterval: null
+ };
+
+ console.log(`🎠 Initializing genre hero slider with ${releases.length} slides`);
+
+ // Set up navigation button handlers
+ const prevBtn = document.getElementById('genre-hero-prev-btn');
+ const nextBtn = document.getElementById('genre-hero-next-btn');
+
+ if (prevBtn) {
+ prevBtn.addEventListener('click', () => {
+ window.genreHeroSliderState.currentSlide = window.genreHeroSliderState.currentSlide > 0
+ ? window.genreHeroSliderState.currentSlide - 1
+ : window.genreHeroSliderState.totalSlides - 1;
+ updateGenreHeroSlide(window.genreHeroSliderState.currentSlide);
+ console.log(`⬅️ Previous: Moving to slide ${window.genreHeroSliderState.currentSlide}`);
+ });
+ }
+
+ if (nextBtn) {
+ nextBtn.addEventListener('click', () => {
+ window.genreHeroSliderState.currentSlide = (window.genreHeroSliderState.currentSlide + 1) % window.genreHeroSliderState.totalSlides;
+ updateGenreHeroSlide(window.genreHeroSliderState.currentSlide);
+ console.log(`➡️ Next: Moving to slide ${window.genreHeroSliderState.currentSlide}`);
+ });
+ }
+
+ // Set up indicator handlers
+ const indicators = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-indicator');
+ indicators.forEach((indicator, index) => {
+ indicator.addEventListener('click', () => {
+ window.genreHeroSliderState.currentSlide = index;
+ updateGenreHeroSlide(index);
+ console.log(`🎯 Indicator: Jumping to slide ${index}`);
+ });
+ });
+
+ // Set up individual slide click handlers (like the main hero slider)
+ const slides = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-slide[data-url]');
+ console.log(`🔗 Found ${slides.length} slides to set up click handlers for`);
+
+ slides.forEach((slide, index) => {
+ const releaseUrl = slide.getAttribute('data-url');
+ if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
+ const release = releases[index];
+ if (release) {
+ // Ensure we use the absolute URL and match the expected data structure
+ const releaseData = {
+ url: releaseUrl, // This is already the absolute URL from data-url
+ title: release.title || 'Unknown Title',
+ artist: release.artists_string || 'Unknown Artist', // handleBeatportReleaseCardClick expects 'artist'
+ label: release.label || 'Unknown Label',
+ image_url: release.image_url || '',
+ // Include all original data for completeness
+ artists_string: release.artists_string,
+ type: release.type,
+ source: release.source,
+ badges: release.badges || []
+ };
+
+ slide.addEventListener('click', async (event) => {
+ // Prevent navigation button clicks from triggering this
+ if (event.target.closest('.beatport-rebuild-nav-btn') ||
+ event.target.closest('.beatport-rebuild-indicator')) {
+ return;
+ }
+
+ console.log(`🎵 Genre hero slide clicked: ${releaseData.title} by ${releaseData.artist}`);
+
+ // Use the exact same functionality as the main hero slider
+ await handleBeatportReleaseCardClick(slide, releaseData);
+ });
+
+ slide.style.cursor = 'pointer';
+ }
+ }
+ });
+
+ // Ensure first slide is active BEFORE starting auto-play
+ updateGenreHeroSlide(0);
+
+ // Delay auto-play start to let DOM settle
+ setTimeout(() => {
+ startGenreHeroSliderAutoPlay();
+ }, 100);
+
+ // Pause on hover
+ const sliderContainer = document.querySelector('#genre-hero-slider');
+ if (sliderContainer) {
+ sliderContainer.addEventListener('mouseenter', () => {
+ if (window.genreHeroSliderState.autoPlayInterval) {
+ clearInterval(window.genreHeroSliderState.autoPlayInterval);
+ console.log('⏸️ Paused auto-play on hover');
+ }
+ });
+
+ sliderContainer.addEventListener('mouseleave', () => {
+ // Delay restart to avoid rapid state changes
+ setTimeout(() => {
+ startGenreHeroSliderAutoPlay();
+ }, 100);
+ console.log('▶️ Resumed auto-play after hover');
+ });
+ }
+
+ console.log(`✅ Set up slider functionality for ${releases.length} genre hero releases`);
+}
+
+function updateGenreHeroSlide(slideIndex) {
+ if (!window.genreHeroSliderState) {
+ console.error('❌ Genre hero slider state not initialized');
+ return;
+ }
+
+ // First update the state
+ window.genreHeroSliderState.currentSlide = slideIndex;
+
+ // Update slide visibility - use the exact same logic as main slider
+ const slides = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-slide');
+ console.log(`🔄 Updating slide to index ${slideIndex}, found ${slides.length} slides`);
+
+ if (slideIndex >= slides.length || slideIndex < 0) {
+ console.error(`❌ Invalid slide index ${slideIndex}, max is ${slides.length - 1}`);
+ return;
+ }
+
+ slides.forEach((slide, index) => {
+ slide.classList.remove('active', 'prev', 'next');
+
+ if (index === slideIndex) {
+ slide.classList.add('active');
+ console.log(`✅ Activated slide ${index}: ${slide.getAttribute('data-slide')} - Title: ${slide.querySelector('.beatport-rebuild-track-title')?.textContent}`);
+ } else if (index < slideIndex) {
+ slide.classList.add('prev');
+ } else {
+ slide.classList.add('next');
+ }
+ });
+
+ // Update indicators
+ const indicators = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-indicator');
+ indicators.forEach((indicator, index) => {
+ indicator.classList.toggle('active', index === slideIndex);
+ });
+
+ console.log(`Genre slide updated to: ${window.genreHeroSliderState.currentSlide}`);
+}
+
+function startGenreHeroSliderAutoPlay() {
+ if (!window.genreHeroSliderState) {
+ console.error('❌ Cannot start auto-play: Genre hero slider state not initialized');
+ return;
+ }
+
+ // Clear any existing intervals first
+ if (window.genreHeroSliderState.autoPlayInterval) {
+ clearInterval(window.genreHeroSliderState.autoPlayInterval);
+ console.log('🧹 Cleared existing auto-play interval');
+ }
+
+ window.genreHeroSliderState.autoPlayInterval = setInterval(() => {
+ if (!window.genreHeroSliderState) {
+ console.error('❌ Auto-play fired but state is gone, clearing interval');
+ clearInterval(window.genreHeroSliderState.autoPlayInterval);
+ return;
+ }
+
+ const currentSlide = window.genreHeroSliderState.currentSlide;
+ const totalSlides = window.genreHeroSliderState.totalSlides;
+ const nextSlide = (currentSlide + 1) % totalSlides;
+
+ console.log(`⏰ Auto-play: Current=${currentSlide}, Total=${totalSlides}, Next=${nextSlide}`);
+
+ // Validate the next slide index
+ if (nextSlide >= 0 && nextSlide < totalSlides) {
+ updateGenreHeroSlide(nextSlide);
+ } else {
+ console.error(`❌ Invalid nextSlide calculated: ${nextSlide}, resetting to 0`);
+ updateGenreHeroSlide(0);
+ }
+ }, 5000); // 5 second intervals like the main slider
+
+ console.log(`▶️ Started auto-play for genre hero slider (${window.genreHeroSliderState.totalSlides} slides)`);
+}
+
+/**
+ * Load Top 10 lists for a specific genre (Beatport + Hype)
+ */
+async function loadGenreTop10Lists(genreSlug, genreId, genreName) {
+ console.log(`🎵 Loading Top 10 lists for ${genreName}...`);
+
+ const container = document.getElementById('genre-top10-lists-container');
+ if (!container) {
+ console.error('❌ Genre Top 10 lists container not found');
+ return;
+ }
+
+ try {
+ const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/top-10-lists`);
+ const data = await response.json();
+
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to load Top 10 lists');
+ }
+
+ console.log(`✅ Loaded ${data.beatport_count} Beatport + ${data.hype_count} Hype Top 10 tracks for ${genreName}`);
+
+ // Generate HTML using exact same structure as main page (but unique IDs)
+ const top10ListsHTML = createGenreTop10ListsHTML(data, genreName);
+ container.innerHTML = top10ListsHTML;
+
+ // Add container-level click handlers exactly like main page
+ addGenreTop10ClickHandlers();
+
+ console.log(`✅ Successfully populated genre Top 10 lists for ${genreName}`);
+
+ } catch (error) {
+ console.error(`❌ Error loading Top 10 lists for ${genreName}:`, error);
+
+ // Show error state
+ container.innerHTML = `
+ ❌ Failed to load ${genreName} releases
+${error.message}
+ +
+
+ `;
+ }
+}
+
+/**
+ * Create HTML for genre Top 10 lists (exact structure as main page, unique IDs)
+ */
+function createGenreTop10ListsHTML(data, genreName) {
+ const { beatport_top10, hype_top10, has_hype_section } = data;
+
+ // Use exact same structure as main page but with genre-specific IDs
+ let html = `
+ ❌ Error Loading Top 10 Lists
+Could not load Top 10 tracks for ${genreName}
+${error.message}
+
+
+ `;
+
+ return html;
+}
+
+/**
+ * Add container-level click handlers for genre Top 10 lists (exact parity with main page)
+ */
+function addGenreTop10ClickHandlers() {
+ console.log('🔗 Adding container-level click handlers for genre Top 10 lists...');
+
+ // Add container-level click handler for Beatport Top 10 (exact match to main page)
+ const beatportContainer = document.getElementById('genre-beatport-top10-list');
+ if (beatportContainer) {
+ beatportContainer.addEventListener('click', () => {
+ console.log('🎵 Genre Beatport Top 10 container clicked');
+ handleGenreBeatportTop10Click();
+ });
+ console.log('✅ Added Beatport Top 10 container click handler');
+ }
+
+ // Add container-level click handler for Hype Top 10 (exact match to main page)
+ const hypeContainer = document.getElementById('genre-beatport-hype10-list');
+ if (hypeContainer) {
+ hypeContainer.addEventListener('click', () => {
+ console.log('🔥 Genre Hype Top 10 container clicked');
+ handleGenreHypeTop10Click();
+ });
+ console.log('✅ Added Hype Top 10 container click handler');
+ }
+
+ console.log(`✅ Set up container-level click handlers for genre Top 10 lists`);
+}
+
+/**
+ * Handle genre Beatport Top 10 container click (exact parity with main page)
+ */
+async function handleGenreBeatportTop10Click() {
+ console.log('🎵 Handling Genre Beatport Top 10 click');
+
+ // Get the actual genre name from the page title
+ const genreName = document.querySelector('.genre-page-title')?.textContent?.trim() || 'Genre';
+
+ // Use actual genre name in chart title
+ await handleGenreChartClick('genre_beatport_top10', `${genreName} Beatport Top 10`, 'genre_beatport_top10');
+}
+
+/**
+ * Handle genre Hype Top 10 container click (exact parity with main page)
+ */
+async function handleGenreHypeTop10Click() {
+ console.log('🔥 Handling Genre Hype Top 10 click');
+
+ // Get the actual genre name from the page title
+ const genreName = document.querySelector('.genre-page-title')?.textContent?.trim() || 'Genre';
+
+ // Use actual genre name in chart title
+ await handleGenreChartClick('genre_hype_top10', `${genreName} Hype Top 10`, 'genre_hype_top10');
+}
+
+/**
+ * Handle genre chart click (based on main page handleRebuildChartClick)
+ */
+async function handleGenreChartClick(trackDataKey, chartName, chartType) {
+ if (_beatportModalOpening) return;
+ _beatportModalOpening = true;
+ setTimeout(() => { _beatportModalOpening = false; }, 2000);
+
+ try {
+ // Extract track data from DOM cards
+ const trackData = await getGenrePageTrackData(trackDataKey);
+ if (!trackData || trackData.length === 0) {
+ throw new Error(`No track data found for ${chartName}`);
+ }
+
+ console.log(`✅ Got ${trackData.length} tracks from ${chartName}, enriching one-by-one...`);
+ showLoadingOverlay(`Fetching track metadata... (0/${trackData.length})`);
+
+ const enrichedTracks = await _enrichTracksWithProgress(trackData, chartName);
+
+ console.log(`✅ Enriched ${enrichedTracks.length} tracks`);
+ hideLoadingOverlay();
+ openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
+
+ } catch (error) {
+ hideLoadingOverlay();
+ console.error(`❌ Error handling ${chartName} click:`, error);
+ showToast(`Error loading ${chartName}: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Extract track data from genre page DOM (based on main page getRebuildPageTrackData)
+ */
+async function getGenrePageTrackData(trackDataKey) {
+ console.log(`🔍 Extracting ${trackDataKey} data from genre page DOM`);
+
+ let containerSelector, cardSelector;
+ if (trackDataKey === 'genre_beatport_top10') {
+ containerSelector = '#genre-beatport-top10-list';
+ cardSelector = '.beatport-top10-card[data-url]';
+ } else if (trackDataKey === 'genre_hype_top10') {
+ containerSelector = '#genre-beatport-hype10-list';
+ cardSelector = '.beatport-hype10-card[data-url]';
+ } else {
+ throw new Error(`Unknown track data key: ${trackDataKey}`);
+ }
+
+ const container = document.querySelector(containerSelector);
+ if (!container) {
+ throw new Error(`Container ${containerSelector} not found`);
+ }
+
+ const trackCards = container.querySelectorAll(cardSelector);
+ if (trackCards.length === 0) {
+ throw new Error(`No track cards found in ${containerSelector}`);
+ }
+
+ // Extract track data from DOM cards (exact same pattern as main page)
+ const tracks = Array.from(trackCards).map(card => {
+ const title = card.querySelector('.beatport-top10-card-title, .beatport-hype10-card-title')?.textContent?.trim() || 'Unknown Title';
+ const artist = card.querySelector('.beatport-top10-card-artist, .beatport-hype10-card-artist')?.textContent?.trim() || 'Unknown Artist';
+ const label = card.querySelector('.beatport-top10-card-label, .beatport-hype10-card-label')?.textContent?.trim() || 'Unknown Label';
+ const url = card.getAttribute('data-url') || '';
+ const rank = card.querySelector('.beatport-top10-card-rank, .beatport-hype10-card-rank')?.textContent?.trim() || '';
+
+ return {
+ title: title,
+ artist: artist,
+ label: label,
+ url: url,
+ rank: rank
+ };
+ });
+
+ console.log(`📋 Extracted ${tracks.length} tracks from ${containerSelector}`);
+ return tracks;
+}
+
+/**
+ * Handle genre-specific Top 100 button click - create discovery process for genre top 100 tracks
+ */
+async function handleGenreTop100Click(genreSlug, genreId, genreName) {
+ if (_beatportModalOpening) return;
+ _beatportModalOpening = true;
+ setTimeout(() => { _beatportModalOpening = false; }, 2000);
+
+ console.log(`💯 Genre Top 100 button clicked for ${genreName}`);
+
+ const chartName = `${genreName} Top 100`;
+
+ try {
+ showLoadingOverlay(`Scraping ${chartName}...`);
+
+ // Use the genre tracks endpoint without enrichment
+ const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/tracks?enrich=false`, { method: 'GET' });
+ const data = await response.json();
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ throw new Error(`No tracks found in ${chartName}`);
+ }
+
+ console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);
+
+ // Enrich one-by-one with live progress
+ const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
+
+ hideLoadingOverlay();
+ openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
+
+ } catch (error) {
+ console.error(`❌ Error handling ${chartName} click:`, error);
+ hideLoadingOverlay();
+ showToast(`Error loading ${chartName}: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Load Top 10 releases for a specific genre
+ */
+async function loadGenreTop10Releases(genreSlug, genreId, genreName) {
+ console.log(`💿 Loading Top 10 releases for ${genreName}...`);
+
+ const container = document.getElementById('genre-top10-releases-container');
+ if (!container) {
+ console.error('❌ Genre Top 10 releases container not found');
+ return;
+ }
+
+ try {
+ const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/top-10-releases`);
+ const data = await response.json();
+
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to load Top 10 releases');
+ }
+
+ console.log(`💿 Loaded ${data.releases.length} Top 10 releases for ${genreName}`);
+ createGenreTop10ReleasesHTML(data.releases, genreName);
+
+ } catch (error) {
+ console.error(`❌ Error loading Top 10 releases for ${genreName}:`, error);
+ showGenreTop10ReleasesError(error.message || 'Failed to load Top 10 releases');
+ }
+}
+
+/**
+ * Create HTML for genre Top 10 releases section (exact parity with main page)
+ */
+function createGenreTop10ReleasesHTML(releases, genreName) {
+ const container = document.getElementById('genre-top10-releases-container');
+ if (!container || !releases || releases.length === 0) return;
+
+ // Create section with unique ID but exact same structure as main page
+ const sectionHtml = `
+
+
+
+ 🏆 ${genreName} Top 10 Lists
+Current trending ${genreName.toLowerCase()} tracks
+
+
+
+
+
+ `;
+
+ // Add Hype Top 10 section (same classes, unique ID)
+ if (has_hype_section && hype_top10.length > 0) {
+ html += `
+
+
+
+ 🎵 Beatport Top 10
+Most popular ${genreName.toLowerCase()} tracks
+
+ `;
+
+ // Add Beatport Top 10 tracks (same classes as main page)
+ beatport_top10.forEach((track, index) => {
+ const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
+ const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
+ const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
+
+ html += `
+
+
+
+ `;
+ });
+
+ html += `
+ ${track.rank || index + 1}
+
+ ${track.artwork_url ?
+ `` :
+ '
+ 🎵
'
+ }
+
+
+ ${cleanTitle}
+${cleanArtist}
+${cleanLabel}
+
+
+ `;
+ }
+ // No else block - completely hide hype section when no hype tracks available
+
+ html += `
+
+
+ 🔥 Hype Top 10
+Editor's trending ${genreName.toLowerCase()} picks
+
+ `;
+
+ // Add Hype Top 10 tracks (same classes as main page)
+ hype_top10.forEach((track, index) => {
+ const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
+ const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
+ const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
+
+ html += `
+
+
+
+ `;
+ });
+
+ html += `
+ ${track.rank || index + 1}
+
+ ${track.artwork_url ?
+ `` :
+ '
+ 🔥
'
+ }
+
+
+ ${cleanTitle}
+${cleanArtist}
+${cleanLabel}
+
+
+ `;
+
+ container.innerHTML = sectionHtml;
+
+ // Add background images and click handlers
+ addGenreTop10ReleasesInteractivity(releases);
+}
+
+/**
+ * Create release cards HTML for genre Top 10 releases
+ */
+function createGenreTop10ReleasesCardsHTML(releases) {
+ let cardsHtml = '
+
+ 💿 Top 10 ${genreName} Releases
+Most popular albums and EPs for ${genreName}
+
+
+
+ ${createGenreTop10ReleasesCardsHTML(releases)}
+
+ ';
+
+ releases.forEach((release, index) => {
+ cardsHtml += `
+
';
+ return cardsHtml;
+}
+
+/**
+ * Add interactivity to genre Top 10 releases cards
+ */
+function addGenreTop10ReleasesInteractivity(releases) {
+ const container = document.getElementById('genre-beatport-releases-top10-list');
+ if (!container) return;
+
+ // Set background images for cards
+ const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
+ cards.forEach(card => {
+ const bgImage = card.getAttribute('data-bg-image');
+ if (bgImage) {
+ // Transform image URL from 95x95 to 500x500 for higher quality background
+ const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
+ card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
+ card.style.backgroundSize = 'cover';
+ card.style.backgroundPosition = 'center';
+ }
+ });
+
+ // Add click handlers for individual release discovery (exact same pattern as main page)
+ const releaseCards = container.querySelectorAll('.beatport-releases-top10-card[data-url]');
+ releaseCards.forEach((card, index) => {
+ card.addEventListener('click', () => handleGenreReleaseCardClick(card, releases[index]));
+ card.style.cursor = 'pointer';
+ });
+}
+
+/**
+ * Handle click on individual genre Top 10 Release card (exact parity with main page)
+ */
+async function handleGenreReleaseCardClick(cardElement, release) {
+ if (_beatportModalOpening) return;
+ _beatportModalOpening = true;
+
+ console.log(`💿 Individual genre release card clicked: ${release.title} by ${release.artist}`);
+
+ if (!release.url || release.url === '#') {
+ _beatportModalOpening = false;
+ showToast('No release URL available', 'error');
+ return;
+ }
+
+ try {
+ showToast(`Loading ${release.title}...`, 'info');
+ showLoadingOverlay(`Getting tracks from ${release.title}...`);
+
+ // Fetch structured release metadata for direct download modal
+ console.log(`🎵 Fetching release metadata: ${release.url}`);
+ const response = await fetch('/api/beatport/release-metadata', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ release_url: release.url })
+ });
+
+ const data = await response.json();
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ throw new Error(data.error || 'No tracks found in this release');
+ }
+
+ console.log(`✅ Got ${data.tracks.length} tracks from ${data.album.name}`);
+
+ const formattedTracks = data.tracks.map(track => ({
+ ...track,
+ artists: track.artists.map(a => typeof a === 'object' ? a.name : a)
+ }));
+
+ const virtualPlaylistId = `beatport_release_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+ const playlistName = data.album.name;
+
+ await openDownloadMissingModalForArtistAlbum(
+ virtualPlaylistId,
+ playlistName,
+ formattedTracks,
+ data.album,
+ data.artist,
+ false
+ );
+
+ hideLoadingOverlay();
+ _beatportModalOpening = false;
+ console.log(`✅ Opened download modal for ${playlistName}`);
+
+ } catch (error) {
+ console.error(`❌ Error handling release click for ${release.title}:`, error);
+ hideLoadingOverlay();
+ _beatportModalOpening = false;
+ showToast(`Error loading ${release.title}: ${error.message}`, 'error');
+ }
+}
+
+/**
+ * Show error message for genre Top 10 releases
+ */
+function showGenreTop10ReleasesError(errorMessage) {
+ const container = document.getElementById('genre-top10-releases-container');
+
+ const errorHtml = `
+
+
+ `;
+ });
+
+ cardsHtml += '${release.rank || index + 1}
+
+ ${release.image_url ?
+ `` :
+ '
+ 💿
'
+ }
+
+
+ ${release.title || 'Unknown Title'}
+${release.artist || 'Unknown Artist'}
+${release.label || 'Unknown Label'}
+
+
+ `;
+
+ if (container) container.innerHTML = errorHtml;
+}
+
+// Initialize the Genre Browser Modal when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+ initializeGenreBrowserModal();
+});
+
+// ============ Plex Music Library Selection ============
+
+async function loadPlexMusicLibraries() {
+ try {
+ const response = await fetch('/api/plex/music-libraries');
+ const data = await response.json();
+
+ if (data.success && data.libraries && data.libraries.length > 0) {
+ const selector = document.getElementById('plex-music-library');
+ const container = document.getElementById('plex-library-selector-container');
+
+ // Clear existing options
+ selector.innerHTML = '';
+
+ // Add options for each library
+ data.libraries.forEach(library => {
+ const option = document.createElement('option');
+ option.value = library.title;
+ option.textContent = library.title;
+
+ // Mark the currently selected library
+ if (library.title === data.current || library.title === data.selected) {
+ option.selected = true;
+ }
+
+ selector.appendChild(option);
+ });
+
+ // Show the container
+ container.style.display = 'block';
+ } else {
+ // Hide if no libraries found or not connected
+ document.getElementById('plex-library-selector-container').style.display = 'none';
+ }
+ } catch (error) {
+ console.error('Error loading Plex music libraries:', error);
+ document.getElementById('plex-library-selector-container').style.display = 'none';
+ }
+}
+
+async function selectPlexLibrary() {
+ const selector = document.getElementById('plex-music-library');
+ const selectedLibrary = selector.value;
+
+ if (!selectedLibrary) return;
+
+ try {
+ const response = await fetch('/api/plex/select-music-library', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ library_name: selectedLibrary
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ console.log(`Plex music library switched to: ${selectedLibrary}`);
+ } else {
+ console.error('Failed to switch library:', data.error);
+ alert(`Failed to switch library: ${data.error}`);
+ }
+ } catch (error) {
+ console.error('Error selecting Plex library:', error);
+ alert('Error selecting library. Please try again.');
+ }
+}
+
+// ============ Jellyfin User Selection ============
+
+async function loadJellyfinUsers() {
+ try {
+ const response = await fetch('/api/jellyfin/users');
+ const data = await response.json();
+
+ if (data.success && data.users && data.users.length > 0) {
+ const selector = document.getElementById('jellyfin-user');
+ const container = document.getElementById('jellyfin-user-selector-container');
+
+ // Clear existing options
+ selector.innerHTML = '';
+
+ // Add options for each user
+ data.users.forEach(user => {
+ const option = document.createElement('option');
+ option.value = user.name;
+ option.textContent = user.name;
+
+ // Mark the currently selected user
+ if (user.name === data.current || user.name === data.selected) {
+ option.selected = true;
+ }
+
+ selector.appendChild(option);
+ });
+
+ // Show the container
+ container.style.display = 'block';
+ } else {
+ // Hide if no users found or not connected
+ document.getElementById('jellyfin-user-selector-container').style.display = 'none';
+ }
+ } catch (error) {
+ console.error('Error loading Jellyfin users:', error);
+ document.getElementById('jellyfin-user-selector-container').style.display = 'none';
+ }
+}
+
+async function selectJellyfinUser() {
+ const selector = document.getElementById('jellyfin-user');
+ const selectedUser = selector.value;
+
+ if (!selectedUser) return;
+
+ try {
+ const response = await fetch('/api/jellyfin/select-user', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ username: selectedUser
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ console.log(`Jellyfin user switched to: ${selectedUser}`);
+ // Refresh library dropdown for the new user
+ loadJellyfinMusicLibraries();
+ } else {
+ console.error('Failed to switch user:', data.error);
+ alert(`Failed to switch user: ${data.error}`);
+ }
+ } catch (error) {
+ console.error('Error selecting Jellyfin user:', error);
+ alert('Error selecting user. Please try again.');
+ }
+}
+
+// ============ Jellyfin Music Library Selection ============
+
+async function loadJellyfinMusicLibraries() {
+ try {
+ const response = await fetch('/api/jellyfin/music-libraries');
+ const data = await response.json();
+
+ if (data.success && data.libraries && data.libraries.length > 0) {
+ const selector = document.getElementById('jellyfin-music-library');
+ const container = document.getElementById('jellyfin-library-selector-container');
+
+ // Clear existing options
+ selector.innerHTML = '';
+
+ // Add options for each library
+ data.libraries.forEach(library => {
+ const option = document.createElement('option');
+ option.value = library.title;
+ option.textContent = library.title;
+
+ // Mark the currently selected library
+ if (library.title === data.current || library.title === data.selected) {
+ option.selected = true;
+ }
+
+ selector.appendChild(option);
+ });
+
+ // Show the container
+ container.style.display = 'block';
+ } else {
+ // Hide if no libraries found or not connected
+ document.getElementById('jellyfin-library-selector-container').style.display = 'none';
+ }
+ } catch (error) {
+ console.error('Error loading Jellyfin music libraries:', error);
+ document.getElementById('jellyfin-library-selector-container').style.display = 'none';
+ }
+}
+
+async function selectJellyfinLibrary() {
+ const selector = document.getElementById('jellyfin-music-library');
+ const selectedLibrary = selector.value;
+
+ if (!selectedLibrary) return;
+
+ try {
+ const response = await fetch('/api/jellyfin/select-music-library', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ library_name: selectedLibrary
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ console.log(`Jellyfin music library switched to: ${selectedLibrary}`);
+ } else {
+ console.error('Failed to switch library:', data.error);
+ alert(`Failed to switch library: ${data.error}`);
+ }
+ } catch (error) {
+ console.error('Error selecting Jellyfin library:', error);
+ alert('Error selecting library. Please try again.');
+ }
+}
+
+// ============ Navidrome Music Folder Selection ============
+
+async function loadNavidromeMusicFolders() {
+ try {
+ const response = await fetch('/api/navidrome/music-folders');
+ const data = await response.json();
+
+ if (data.success && data.folders && data.folders.length > 0) {
+ const selector = document.getElementById('navidrome-music-folder');
+ const container = document.getElementById('navidrome-folder-selector-container');
+
+ selector.innerHTML = '';
+
+ data.folders.forEach(folder => {
+ const option = document.createElement('option');
+ option.value = folder.title;
+ option.textContent = folder.title;
+
+ if (folder.title === data.current || folder.title === data.selected) {
+ option.selected = true;
+ }
+
+ selector.appendChild(option);
+ });
+
+ container.style.display = 'block';
+ } else {
+ document.getElementById('navidrome-folder-selector-container').style.display = 'none';
+ }
+ } catch (error) {
+ console.error('Error loading Navidrome music folders:', error);
+ document.getElementById('navidrome-folder-selector-container').style.display = 'none';
+ }
+}
+
+async function selectNavidromeMusicFolder() {
+ const selector = document.getElementById('navidrome-music-folder');
+ const selectedFolder = selector.value;
+
+ try {
+ const response = await fetch('/api/navidrome/select-music-folder', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ folder_name: selectedFolder })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast(data.message, 'success');
+ } else {
+ console.error('Failed to set music folder:', data.error);
+ showToast(`Failed to set music folder: ${data.error}`, 'error', 'set-media');
+ }
+ } catch (error) {
+ console.error('Error selecting Navidrome music folder:', error);
+ showToast('Error selecting music folder. Please try again.', 'error', 'set-media');
+ }
+}
+
+// ============================================
+
diff --git a/webui/static/core.js b/webui/static/core.js
new file mode 100644
index 00000000..32a75406
--- /dev/null
+++ b/webui/static/core.js
@@ -0,0 +1,879 @@
+// SoulSync WebUI JavaScript - Replicating PyQt6 GUI Functionality
+
+// Global state management
+let currentPage = 'dashboard';
+let currentTrack = null;
+let isPlaying = false;
+let mediaPlayerExpanded = false;
+let searchResults = [];
+let currentStream = {
+ status: 'stopped',
+ progress: 0,
+ track: null
+};
+let currentMusicSourceName = 'Spotify'; // 'Spotify', 'iTunes', or 'Deezer' - updated from status endpoint
+
+// Streaming state management (enhanced functionality)
+let streamStatusPoller = null;
+let audioPlayer = null;
+let streamPollingRetries = 0;
+let streamPollingInterval = 1000; // Start with 1-second polling
+const maxStreamPollingRetries = 10;
+let allSearchResults = [];
+let currentFilterType = 'all';
+let currentFilterFormat = 'all';
+let currentSortBy = 'quality_score';
+let isSortReversed = false;
+let searchAbortController = null;
+let dbStatsInterval = null;
+let dbUpdateStatusInterval = null;
+let qualityScannerStatusInterval = null;
+let duplicateCleanerStatusInterval = null;
+let wishlistCountInterval = null;
+let wishlistCountdownInterval = null; // Countdown timer for wishlist overview modal
+let watchlistCountdownInterval = null; // Countdown timer for watchlist overview modal
+
+// Page state for Watchlist & Wishlist sidebar pages
+let watchlistPageState = { isInitialized: false, artists: [] };
+let wishlistPageState = { isInitialized: false };
+
+// --- Add these globals for the Sync Page ---
+let spotifyPlaylists = [];
+let selectedPlaylists = new Set();
+let activeSyncPollers = {}; // Key: playlist_id, Value: intervalId
+// Phase 5: WebSocket sync/discovery/scan state
+let _syncProgressCallbacks = {};
+let _discoveryProgressCallbacks = {};
+let _lastWatchlistScanStatus = null;
+let _lastMediaScanStatus = null;
+let _lastWishlistStats = null;
+let playlistTrackCache = {}; // Key: playlist_id, Value: tracks array
+let spotifyPlaylistsLoaded = false;
+let activeDownloadProcesses = {};
+let sequentialSyncManager = null;
+
+// --- YouTube Playlist State Management ---
+let youtubePlaylistStates = {}; // Key: url_hash, Value: playlist state
+let activeYouTubePollers = {}; // Key: url_hash, Value: intervalId
+
+// --- Tidal Playlist State Management (Similar to YouTube but loads from API like Spotify) ---
+let tidalPlaylists = [];
+let tidalPlaylistStates = {}; // Key: playlist_id, Value: playlist state with phases
+let tidalPlaylistsLoaded = false;
+let deezerPlaylists = [];
+let deezerPlaylistStates = {};
+let deezerArlPlaylists = [];
+let deezerArlPlaylistsLoaded = false;
+
+// --- Beatport Chart State Management (Similar to YouTube/Tidal) ---
+let beatportChartStates = {}; // Key: chart_hash, Value: chart state with phases
+let beatportContentState = {
+ loaded: false,
+ loadingPromise: null,
+ abortController: null
+};
+
+function getBeatportContentSignal() {
+ return beatportContentState.abortController ? beatportContentState.abortController.signal : null;
+}
+
+function throwIfBeatportLoadAborted() {
+ if (beatportContentState.abortController && beatportContentState.abortController.signal.aborted) {
+ throw new DOMException('Beatport load aborted', 'AbortError');
+ }
+}
+
+function stopBeatportDiscoveryAndSyncPolling() {
+ Object.entries(activeYouTubePollers).forEach(([identifier, poller]) => {
+ const isBeatportChart = !!youtubePlaylistStates[identifier]?.is_beatport_playlist ||
+ !!beatportChartStates[identifier];
+ if (isBeatportChart) {
+ clearInterval(poller);
+ delete activeYouTubePollers[identifier];
+ }
+ });
+
+ Object.entries(_discoveryProgressCallbacks).forEach(([identifier]) => {
+ const isBeatportChart = !!youtubePlaylistStates[identifier]?.is_beatport_playlist ||
+ !!beatportChartStates[identifier];
+ if (isBeatportChart) {
+ if (socketConnected) socket.emit('discovery:unsubscribe', { ids: [identifier] });
+ delete _discoveryProgressCallbacks[identifier];
+ }
+ });
+
+ Object.entries(_syncProgressCallbacks).forEach(([syncPlaylistId]) => {
+ const beatportState = Object.values(youtubePlaylistStates).find(state =>
+ state && state.is_beatport_playlist && state.syncPlaylistId === syncPlaylistId
+ );
+ if (beatportState) {
+ if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+ delete _syncProgressCallbacks[syncPlaylistId];
+ }
+ });
+}
+
+function resetBeatportSliderInitFlags() {
+ const rebuildSlider = document.getElementById('beatport-rebuild-slider');
+ if (rebuildSlider) rebuildSlider.dataset.initialized = 'false';
+
+ const releasesSlider = document.getElementById('beatport-releases-slider');
+ if (releasesSlider) releasesSlider.dataset.initialized = 'false';
+ beatportReleasesSliderState.isInitialized = false;
+
+ beatportHypePicksSliderState.isInitialized = false;
+
+ const chartsSlider = document.getElementById('beatport-charts-slider');
+ if (chartsSlider) chartsSlider.dataset.initialized = 'false';
+ beatportChartsSliderState.isInitialized = false;
+
+ const djSlider = document.getElementById('beatport-dj-slider');
+ if (djSlider) djSlider.dataset.initialized = 'false';
+ beatportDJSliderState.isInitialized = false;
+}
+
+function cleanupBeatportContent() {
+ const wasLoaded = beatportContentState.loaded || !!beatportContentState.loadingPromise;
+ if (!wasLoaded) return;
+
+ console.log('🧹 Cleaning up Beatport content...');
+
+ if (beatportContentState.abortController) {
+ beatportContentState.abortController.abort();
+ beatportContentState.abortController = null;
+ }
+
+ stopBeatportDiscoveryAndSyncPolling();
+ cleanupBeatportRebuildSlider();
+ cleanupBeatportReleasesSlider();
+ cleanupBeatportHypePicksSlider();
+ cleanupBeatportChartsSlider();
+ cleanupBeatportDJSlider();
+ resetBeatportSliderInitFlags();
+
+ beatportContentState.loadingPromise = null;
+ beatportContentState.loaded = false;
+
+ console.log('✅ Beatport content cleaned up');
+}
+
+// --- ListenBrainz Playlist State Management (Similar to YouTube/Tidal/Beatport) ---
+let listenbrainzPlaylistStates = {}; // Key: playlist_mbid, Value: playlist state with phases
+let listenbrainzPlaylistsLoaded = false; // Track if playlists have been loaded from backend
+
+// --- Artists Page State Management ---
+let artistsPageState = {
+ currentView: 'search', // 'search', 'results', 'detail'
+ searchQuery: '',
+ searchResults: [],
+ selectedArtist: null,
+ sourceOverride: null, // Set when navigating from an alternate search tab
+ artistDiscography: {
+ albums: [],
+ singles: []
+ },
+ cache: {
+ searches: {}, // Cache search results by query
+ discography: {}, // Cache discography by artist ID
+ colors: {}, // Cache extracted colors by image URL
+ completionData: {} // Cache completion data by artist ID
+ },
+ isInitialized: false // Track if the page has been initialized
+};
+
+// --- Artist Downloads Management State ---
+let artistDownloadBubbles = {}; // Track artist download bubbles: artistId -> { artist, downloads: [], element }
+let artistDownloadModalOpen = false; // Track if artist download modal is open
+let downloadsUpdateTimeout = null; // Debounce downloads section updates
+
+// --- Search Downloads Management State ---
+let searchDownloadBubbles = {}; // Track search download bubbles: artistName -> { artist, downloads: [] }
+let searchDownloadModalOpen = false; // Track if search download modal is open
+
+// --- Beatport Downloads Management State ---
+let beatportDownloadBubbles = {}; // Track Beatport download bubbles: chartKey -> { chart: { name, image }, downloads: [] }
+let beatportDownloadsUpdateTimeout = null; // Debounce Beatport downloads section updates
+
+let artistsSearchTimeout = null;
+let artistsSearchController = null;
+let artistCompletionController = null; // Track ongoing completion check to cancel when navigating away
+let similarArtistsController = null; // Track ongoing similar artists stream to cancel when navigating away
+
+// --- Lazy Background Image Observer ---
+// Watches elements with data-bg-src, applies background-image when visible, unobserves after.
+const lazyBgObserver = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const el = entry.target;
+ const src = el.dataset.bgSrc;
+ if (src) {
+ el.style.backgroundImage = `url('${src}')`;
+ delete el.dataset.bgSrc;
+ }
+ lazyBgObserver.unobserve(el);
+ }
+ });
+}, { rootMargin: '200px' });
+
+/**
+ * Observe all elements with data-bg-src within a container for lazy background loading.
+ */
+function observeLazyBackgrounds(container) {
+ if (!container) return;
+ const elements = container.querySelectorAll('[data-bg-src]');
+ elements.forEach(el => lazyBgObserver.observe(el));
+}
+
+// ===============================
+// CONFIRM DIALOG (themed replacement for native confirm())
+// ===============================
+let _confirmResolver = null;
+
+function showConfirmDialog({ title = 'Confirm', message = '', confirmText = 'Confirm', cancelText = 'Cancel', destructive = false } = {}) {
+ // Resolve any pending dialog as cancelled before opening a new one
+ if (_confirmResolver) {
+ _confirmResolver(false);
+ _confirmResolver = null;
+ }
+
+ const overlay = document.getElementById('confirm-modal-overlay');
+ const titleEl = document.getElementById('confirm-modal-title');
+ const messageEl = document.getElementById('confirm-modal-message');
+ const confirmBtn = document.getElementById('confirm-modal-confirm');
+ const cancelBtn = document.getElementById('confirm-modal-cancel');
+
+ titleEl.textContent = title;
+ messageEl.textContent = message;
+ confirmBtn.textContent = confirmText;
+ cancelBtn.textContent = cancelText;
+
+ // Toggle destructive (red) vs primary (accent) confirm button
+ confirmBtn.className = destructive
+ ? 'modal-button modal-button--cancel'
+ : 'modal-button modal-button--primary';
+
+ overlay.classList.remove('hidden');
+
+ return new Promise(resolve => {
+ _confirmResolver = resolve;
+ });
+}
+
+function resolveConfirmDialog(result) {
+ const overlay = document.getElementById('confirm-modal-overlay');
+ overlay.classList.add('hidden');
+ if (_confirmResolver) {
+ _confirmResolver(result);
+ _confirmResolver = null;
+ }
+}
+
+/**
+ * Nuclear confirmation dialog for mass-destructive operations.
+ * User must type an exact phrase to proceed.
+ */
+function showWitnessMeDialog(orphanCount) {
+ return new Promise(resolve => {
+ const overlay = document.createElement('div');
+ overlay.className = 'confirm-modal-overlay';
+ overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+
+ overlay.innerHTML = `
+
+
+ 💿 Top 10 Releases
+Error loading releases
+
+
+
+
+ ❌ Error Loading Releases
+${errorMessage}
+
+
+ `;
+
+ document.body.appendChild(overlay);
+
+ const input = overlay.querySelector('#witness-me-input');
+ const confirmBtn = overlay.querySelector('#witness-confirm');
+ const cancelBtn = overlay.querySelector('#witness-cancel');
+
+ input.addEventListener('input', () => {
+ const match = input.value.trim().toLowerCase() === 'witness me';
+ confirmBtn.disabled = !match;
+ confirmBtn.style.background = match ? '#e74c3c' : '#555';
+ confirmBtn.style.color = match ? '#fff' : '#888';
+ confirmBtn.style.cursor = match ? 'pointer' : 'not-allowed';
+ });
+
+ confirmBtn.addEventListener('click', () => {
+ document.body.removeChild(overlay);
+ resolve(true);
+ });
+
+ cancelBtn.addEventListener('click', () => {
+ document.body.removeChild(overlay);
+ resolve(false);
+ });
+
+ overlay.addEventListener('click', (e) => {
+ if (e.target === overlay) {
+ document.body.removeChild(overlay);
+ resolve(false);
+ }
+ });
+
+ setTimeout(() => input.focus(), 100);
+ });
+}
+
+const MASS_ORPHAN_THRESHOLD = 20;
+
+function _isMassOrphanFix(jobId, count) {
+ if (count <= MASS_ORPHAN_THRESHOLD) return false;
+ // Only trigger if mass_orphan flag is actually set on visible findings
+ // (flag is set by backend when >50% of files are orphans — likely path mismatch)
+ if (jobId === 'orphan_file_detector' || !jobId) {
+ const massCards = document.querySelectorAll('.repair-finding-card[data-mass-orphan="true"]');
+ if (massCards.length > 0) return true;
+ }
+ return false;
+}
+
+// ===============================
+// WEBSOCKET CONNECTION MANAGER
+// ===============================
+let socket = null;
+let socketConnected = false;
+
+function initializeWebSocket() {
+ if (typeof io === 'undefined') {
+ console.warn('Socket.IO client not loaded — falling back to HTTP polling');
+ return;
+ }
+
+ socket = io({
+ transports: ['polling', 'websocket'],
+ reconnection: true,
+ reconnectionAttempts: Infinity,
+ reconnectionDelay: 1000,
+ reconnectionDelayMax: 10000,
+ timeout: 20000
+ });
+
+ socket.on('connect', () => {
+ console.log('WebSocket connected');
+ socketConnected = true;
+ resubscribeDownloadBatches();
+ // Re-subscribe to any active sync/discovery rooms after reconnect
+ const activeSyncIds = Object.keys(_syncProgressCallbacks);
+ if (activeSyncIds.length > 0) {
+ socket.emit('sync:subscribe', { playlist_ids: activeSyncIds });
+ console.log('🔄 Re-subscribed to sync rooms:', activeSyncIds);
+ }
+ const activeDiscoveryIds = Object.keys(_discoveryProgressCallbacks);
+ if (activeDiscoveryIds.length > 0) {
+ socket.emit('discovery:subscribe', { ids: activeDiscoveryIds });
+ console.log('🔄 Re-subscribed to discovery rooms:', activeDiscoveryIds);
+ }
+ // Join profile room for scoped watchlist/wishlist count updates
+ if (currentProfile) {
+ socket.emit('profile:join', { profile_id: currentProfile.id });
+ }
+ });
+
+ socket.on('disconnect', (reason) => {
+ console.warn('WebSocket disconnected:', reason);
+ socketConnected = false;
+ });
+
+ socket.on('reconnect', (attemptNumber) => {
+ console.log(`WebSocket reconnected after ${attemptNumber} attempts`);
+ // Rejoin profile room for scoped WebSocket emits
+ if (currentProfile) {
+ socket.emit('profile:join', { profile_id: currentProfile.id });
+ }
+ // Phase 1: Full state refresh on reconnect
+ fetchAndUpdateServiceStatus();
+ updateWatchlistButtonCount();
+ resubscribeDownloadBatches();
+ // Phase 2: Refresh dashboard data if on dashboard page
+ if (currentPage === 'dashboard') {
+ fetchAndUpdateSystemStats();
+ fetchAndUpdateActivityFeed();
+ fetchAndUpdateDbStats();
+ updateWishlistCount();
+ }
+ });
+
+ // Phase 1 event listeners
+ socket.on('status:update', handleServiceStatusUpdate);
+ socket.on('watchlist:count', handleWatchlistCountUpdate);
+ socket.on('downloads:batch_update', handleDownloadBatchUpdate);
+
+ // Phase 2 event listeners (dashboard pollers)
+ socket.on('rate-monitor:update', _handleRateMonitorUpdate);
+ socket.on('dashboard:stats', handleDashboardStats);
+ socket.on('dashboard:activity', handleDashboardActivity);
+ socket.on('dashboard:toast', handleDashboardToast);
+ socket.on('dashboard:db_stats', handleDashboardDbStats);
+ socket.on('dashboard:wishlist_count', handleDashboardWishlistCount);
+
+ // Phase 3 event listeners (enrichment sidebar workers)
+ socket.on('enrichment:musicbrainz', (data) => updateMusicBrainzStatusFromData(data));
+ socket.on('enrichment:audiodb', (data) => updateAudioDBStatusFromData(data));
+ socket.on('enrichment:discogs', (data) => updateDiscogsStatusFromData(data));
+ socket.on('enrichment:deezer', (data) => updateDeezerStatusFromData(data));
+ socket.on('enrichment:spotify-enrichment', (data) => updateSpotifyEnrichmentStatusFromData(data));
+ socket.on('enrichment:itunes-enrichment', (data) => updateiTunesEnrichmentStatusFromData(data));
+ socket.on('enrichment:lastfm-enrichment', (data) => updateLastFMEnrichmentStatusFromData(data));
+ socket.on('enrichment:genius-enrichment', (data) => updateGeniusEnrichmentStatusFromData(data));
+ socket.on('enrichment:tidal-enrichment', (data) => updateTidalEnrichmentStatusFromData(data));
+ socket.on('enrichment:qobuz-enrichment', (data) => updateQobuzEnrichmentStatusFromData(data));
+ socket.on('enrichment:hydrabase', (data) => updateHydrabaseStatusFromData(data));
+ socket.on('enrichment:repair', (data) => updateRepairStatusFromData(data));
+ socket.on('enrichment:soulid', (data) => updateSoulIDStatusFromData(data));
+ socket.on('enrichment:listening-stats', () => { }); // Status only, no UI update needed
+ socket.on('repair:progress', (data) => updateRepairJobProgressFromData(data));
+
+ // Phase 4 event listeners (tool progress)
+ socket.on('tool:stream', (data) => updateStreamStatusFromData(data));
+ socket.on('tool:quality-scanner', (data) => updateQualityScanProgressFromData(data));
+ socket.on('tool:duplicate-cleaner', (data) => updateDuplicateCleanProgressFromData(data));
+ socket.on('tool:retag', (data) => updateRetagStatusFromData(data));
+ socket.on('tool:db-update', (data) => updateDbProgressFromData(data));
+ socket.on('tool:metadata', (data) => updateMetadataStatusFromData(data));
+ socket.on('tool:logs', (data) => updateLogsFromData(data));
+
+ // Phase 5 event listeners (sync/discovery progress + scans)
+ socket.on('sync:progress', (data) => updateSyncProgressFromData(data));
+ socket.on('discovery:progress', (data) => updateDiscoveryProgressFromData(data));
+ socket.on('scan:watchlist', (data) => updateWatchlistScanFromData(data));
+ socket.on('scan:media', (data) => updateMediaScanFromData(data));
+ socket.on('wishlist:stats', (data) => updateWishlistStatsFromData(data));
+ // Phase 6: Automation progress
+ socket.on('automation:progress', (data) => updateAutomationProgressFromData(data));
+}
+
+function handleServiceStatusUpdate(data) {
+ // Cache for library status card
+ _lastServiceStatus = data;
+
+ // Same logic as fetchAndUpdateServiceStatus response handler
+ updateServiceStatus('spotify', data.spotify);
+ updateServiceStatus('media-server', data.media_server);
+ updateServiceStatus('soulseek', data.soulseek);
+
+ updateSidebarServiceStatus('spotify', data.spotify);
+ updateSidebarServiceStatus('media-server', data.media_server);
+ updateSidebarServiceStatus('soulseek', data.soulseek);
+
+ // Update downloads nav badge from status push
+ if (data.active_downloads !== undefined) _updateDlNavBadge(data.active_downloads);
+
+ // Hide sync buttons (not the page) for standalone mode — playlists still browsable/downloadable
+ const isSoulsyncStandalone = data.media_server?.type === 'soulsync';
+ _isSoulsyncStandalone = isSoulsyncStandalone;
+ document.querySelectorAll('.sync-to-server-btn, [id$="-sync-btn"], [onclick*="startPlaylistSync"], [onclick*="syncPlaylistToServer"], [onclick*="startDecadeSync"]').forEach(btn => {
+ if (isSoulsyncStandalone) {
+ btn.dataset.hiddenByStandalone = '1';
+ btn.style.display = 'none';
+ } else if (btn.dataset.hiddenByStandalone) {
+ delete btn.dataset.hiddenByStandalone;
+ btn.style.display = '';
+ }
+ // If not standalone and not previously hidden by standalone, leave display untouched
+ // (preserves display:none on undiscovered LB/Last.fm playlist sync buttons)
+ });
+
+ // Update enrichment service cards
+ if (data.enrichment) renderEnrichmentCards(data.enrichment);
+
+ // Spotify rate limit / cooldown / recovery
+ if (data.spotify?.rate_limited && data.spotify.rate_limit) {
+ handleSpotifyRateLimit(data.spotify.rate_limit);
+ _spotifyInCooldown = false;
+ } else if (data.spotify?.post_ban_cooldown > 0) {
+ if (_spotifyRateLimitShown && !_spotifyInCooldown) {
+ _spotifyRateLimitShown = false;
+ _spotifyInCooldown = true;
+ closeRateLimitModal();
+ showToast('Spotify ban expired \u2014 recovering shortly', 'info');
+ }
+ } else {
+ if (_spotifyInCooldown) {
+ _spotifyInCooldown = false;
+ showToast('Spotify access restored', 'success');
+ if (currentPage === 'discover') {
+ loadDiscoverPage();
+ }
+ } else if (_spotifyRateLimitShown) {
+ handleSpotifyRateLimit(null);
+ }
+ }
+}
+
+function _updateHeroBtnCount(buttonId, badgeId, count) {
+ const badge = document.getElementById(badgeId);
+ if (badge) {
+ badge.textContent = count;
+ badge.classList.toggle('has-items', count > 0);
+ }
+}
+
+function handleWatchlistCountUpdate(data) {
+ if (data.success) {
+ _updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count);
+ // Update sidebar nav badge
+ const wlNavBadge = document.getElementById('watchlist-nav-badge');
+ if (wlNavBadge) {
+ wlNavBadge.textContent = data.count;
+ wlNavBadge.classList.toggle('hidden', data.count === 0);
+ }
+ const watchlistButton = document.getElementById('watchlist-button');
+ if (watchlistButton) {
+ const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : '';
+ if (countdownText) {
+ watchlistButton.title = `Next auto-scan in ${countdownText}`;
+ }
+ }
+ }
+}
+
+function handleDownloadBatchUpdate(payload) {
+ const { batch_id, data } = payload;
+ // Find which playlistId maps to this batch_id
+ for (const [playlistId, process] of Object.entries(activeDownloadProcesses)) {
+ if (process.batchId === batch_id) {
+ processModalStatusUpdate(playlistId, data);
+ break;
+ }
+ }
+}
+
+function resubscribeDownloadBatches() {
+ if (!socket || !socketConnected) return;
+ const activeBatchIds = [];
+ Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
+ if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
+ activeBatchIds.push(process.batchId);
+ }
+ });
+ if (activeBatchIds.length > 0) {
+ socket.emit('downloads:subscribe', { batch_ids: activeBatchIds });
+ console.log(`WebSocket subscribed to ${activeBatchIds.length} download batches`);
+ }
+}
+
+function subscribeToDownloadBatch(batchId) {
+ if (socket && socketConnected && batchId) {
+ socket.emit('downloads:subscribe', { batch_ids: [batchId] });
+ }
+}
+
+function unsubscribeFromDownloadBatch(batchId) {
+ if (socket && socketConnected && batchId) {
+ socket.emit('downloads:unsubscribe', { batch_ids: [batchId] });
+ }
+}
+
+// --- Phase 2: Dashboard event handlers ---
+
+function handleDashboardStats(data) {
+ // Same logic as fetchAndUpdateSystemStats response handler
+ updateStatCard('active-downloads-card', data.active_downloads, 'Currently downloading');
+ updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed this session');
+ updateStatCard('download-speed-card', data.download_speed, 'Combined speed');
+ updateStatCard('active-syncs-card', data.active_syncs, 'Playlists syncing');
+ updateStatCard('uptime-card', data.uptime, 'Application runtime');
+ updateStatCard('memory-card', data.memory_usage, 'Current usage');
+}
+
+function handleDashboardActivity(data) {
+ // Same logic as fetchAndUpdateActivityFeed response handler
+ updateActivityFeed(data.activities || []);
+}
+
+function handleDashboardToast(activity) {
+ // Same logic as checkForActivityToasts response handler
+ let toastType = 'info';
+ if (activity.icon === '\u2705' || activity.title.includes('Complete')) {
+ toastType = 'success';
+ } else if (activity.icon === '\u274C' || activity.title.includes('Failed') || activity.title.includes('Error')) {
+ toastType = 'error';
+ } else if (activity.icon === '\uD83D\uDEAB' || activity.title.includes('Cancelled')) {
+ toastType = 'warning';
+ }
+ showToast(`${activity.title}: ${activity.subtitle}`, toastType);
+}
+
+function handleDashboardDbStats(stats) {
+ // Same logic as fetchAndUpdateDbStats response handler
+ updateDashboardStatCards(stats);
+ updateDbUpdaterCardInfo(stats);
+}
+
+function handleDashboardWishlistCount(data) {
+ const count = data.count || 0;
+ _updateHeroBtnCount('wishlist-button', 'wishlist-badge', count);
+ // Update sidebar nav badge
+ const wlNavBadge = document.getElementById('wishlist-nav-badge');
+ if (wlNavBadge) {
+ wlNavBadge.textContent = count;
+ wlNavBadge.classList.toggle('hidden', count === 0);
+ }
+ const wishlistButton = document.getElementById('wishlist-button');
+ if (wishlistButton) {
+ if (count === 0) {
+ wishlistButton.classList.remove('wishlist-active');
+ wishlistButton.classList.add('wishlist-inactive');
+ } else {
+ wishlistButton.classList.remove('wishlist-inactive');
+ wishlistButton.classList.add('wishlist-active');
+ }
+ }
+ checkForAutoInitiatedWishlistProcess();
+}
+
+// ===============================
+// END WEBSOCKET CONNECTION MANAGER
+// ===============================
+
+// --- Service Integration Logo Constants ---
+const MUSICBRAINZ_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/MusicBrainz_Logo_%282016%29.svg/500px-MusicBrainz_Logo_%282016%29.svg.png';
+const DEEZER_LOGO_URL = 'https://cdn.brandfetch.io/idEUKgCNtu/theme/dark/symbol.svg?c=1bxid64Mup7aczewSAYMX&t=1758260798610';
+const SPOTIFY_LOGO_URL = 'https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png';
+const ITUNES_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/ITunes_logo.svg/960px-ITunes_logo.svg.png';
+const LASTFM_LOGO_URL = 'https://www.last.fm/static/images/lastfm_avatar_twitter.52a5d69a85ac.png';
+const GENIUS_LOGO_URL = 'https://images.genius.com/8ed669cadd956443e29c70361ec4f372.1000x1000x1.png';
+const TIDAL_LOGO_URL = 'https://www.svgrepo.com/show/519734/tidal.svg';
+const QOBUZ_LOGO_URL = 'https://www.svgrepo.com/show/504778/qobuz.svg';
+const DISCOGS_LOGO_URL = 'https://www.svgrepo.com/show/305957/discogs.svg';
+function getAudioDBLogoURL() { const el = document.querySelector('img.audiodb-logo'); return el ? el.src : null; }
+
+// --- Wishlist Modal Persistence State Management ---
+const WishlistModalState = {
+ // Track if wishlist modal was visible before page refresh
+ setVisible: function () {
+ localStorage.setItem('wishlist_modal_visible', 'true');
+ console.log('📱 [Modal State] Wishlist modal marked as visible in localStorage');
+ },
+
+ setHidden: function () {
+ localStorage.setItem('wishlist_modal_visible', 'false');
+ console.log('📱 [Modal State] Wishlist modal marked as hidden in localStorage');
+ },
+
+ wasVisible: function () {
+ const visible = localStorage.getItem('wishlist_modal_visible') === 'true';
+ console.log(`📱 [Modal State] Checking if wishlist modal was visible: ${visible}`);
+ return visible;
+ },
+
+ clear: function () {
+ localStorage.removeItem('wishlist_modal_visible');
+ console.log('📱 [Modal State] Cleared wishlist modal visibility state');
+ },
+
+ // Track if user manually closed the modal during auto-processing
+ setUserClosed: function () {
+ localStorage.setItem('wishlist_modal_user_closed', 'true');
+ console.log('📱 [Modal State] User manually closed wishlist modal during auto-processing');
+ },
+
+ clearUserClosed: function () {
+ localStorage.removeItem('wishlist_modal_user_closed');
+ console.log('📱 [Modal State] Cleared user closed state');
+ },
+
+ wasUserClosed: function () {
+ const closed = localStorage.getItem('wishlist_modal_user_closed') === 'true';
+ console.log(`📱 [Modal State] Checking if user closed modal: ${closed}`);
+ return closed;
+ }
+};
+
+// Sequential Sync Manager Class
+class SequentialSyncManager {
+ constructor() {
+ this.queue = [];
+ this.currentIndex = 0;
+ this.isRunning = false;
+ this.startTime = null;
+ }
+
+ start(playlistIds) {
+ if (this.isRunning) {
+ console.warn('Sequential sync already running');
+ return;
+ }
+
+ // Convert playlist IDs to ordered array (maintain display order)
+ this.queue = Array.from(playlistIds);
+ this.currentIndex = 0;
+ this.isRunning = true;
+ this.startTime = Date.now();
+
+ console.log(`🚀 Starting sequential sync for ${this.queue.length} playlists:`, this.queue);
+ this.updateUI();
+ this.syncNext();
+ }
+
+ async syncNext() {
+ if (this.currentIndex >= this.queue.length) {
+ this.complete();
+ return;
+ }
+
+ const playlistId = this.queue[this.currentIndex];
+ const playlist = spotifyPlaylists.find(p => p.id === playlistId);
+ console.log(`🔄 Sequential sync: Processing playlist ${this.currentIndex + 1}/${this.queue.length}: ${playlist?.name || playlistId}`);
+
+ this.updateUI();
+
+ try {
+ // Use existing single sync function
+ await startPlaylistSync(playlistId);
+
+ // Wait for sync to complete by monitoring the poller
+ await this.waitForSyncCompletion(playlistId);
+
+ } catch (error) {
+ console.error(`❌ Sequential sync: Failed to sync playlist ${playlistId}:`, error);
+ showToast(`Failed to sync "${playlist?.name || playlistId}": ${error.message}`, 'error');
+ }
+
+ // Move to next playlist
+ this.currentIndex++;
+ setTimeout(() => this.syncNext(), 1000); // Small delay between syncs
+ }
+
+ async waitForSyncCompletion(playlistId) {
+ return new Promise((resolve) => {
+ // Monitor the existing sync poller for completion
+ const checkCompletion = () => {
+ if (!activeSyncPollers[playlistId]) {
+ // Poller stopped = sync completed
+ resolve();
+ return;
+ }
+ // Check again in 1 second
+ setTimeout(checkCompletion, 1000);
+ };
+ checkCompletion();
+ });
+ }
+
+ complete() {
+ const duration = ((Date.now() - this.startTime) / 1000).toFixed(1);
+ const completedCount = this.queue.length;
+ console.log(`🏁 Sequential sync completed in ${duration}s`);
+
+ this.isRunning = false;
+ this.queue = [];
+ this.currentIndex = 0;
+ this.startTime = null;
+
+ // Re-enable playlist selection
+ disablePlaylistSelection(false);
+
+ this.updateUI();
+ updateRefreshButtonState(); // Refresh button state after completion
+ showToast(`Sequential sync completed for ${completedCount} playlists in ${duration}s`, 'success');
+
+ // Hide sidebar after completion
+ hideSyncSidebar();
+ }
+
+ cancel() {
+ if (!this.isRunning) return;
+
+ console.log('🛑 Cancelling sequential sync');
+ this.isRunning = false;
+ this.queue = [];
+ this.currentIndex = 0;
+ this.startTime = null;
+
+ // Re-enable playlist selection
+ disablePlaylistSelection(false);
+
+ this.updateUI();
+ updateRefreshButtonState(); // Refresh button state after cancellation
+ showToast('Sequential sync cancelled', 'info');
+
+ // Hide sidebar after cancellation
+ hideSyncSidebar();
+ }
+
+ updateUI() {
+ const startSyncBtn = document.getElementById('start-sync-btn');
+ const selectionInfo = document.getElementById('selection-info');
+
+ if (!this.isRunning) {
+ // Reset to normal state
+ if (startSyncBtn) {
+ startSyncBtn.textContent = 'Start Sync';
+ startSyncBtn.disabled = selectedPlaylists.size === 0;
+ }
+ if (selectionInfo) {
+ const count = selectedPlaylists.size;
+ selectionInfo.textContent = count === 0
+ ? 'Select playlists to sync'
+ : `${count} playlist${count > 1 ? 's' : ''} selected`;
+ }
+ } else {
+ // Show sequential sync status
+ if (startSyncBtn) {
+ startSyncBtn.textContent = 'Cancel Sequential Sync';
+ startSyncBtn.disabled = false;
+ }
+ if (selectionInfo) {
+ const current = this.currentIndex + 1;
+ const total = this.queue.length;
+ const currentPlaylist = spotifyPlaylists.find(p => p.id === this.queue[this.currentIndex]);
+ selectionInfo.textContent = `Syncing ${current}/${total}: ${currentPlaylist?.name || 'Unknown'}`;
+ }
+ }
+ }
+}
+
+// API endpoints
+const API = {
+ status: '/status',
+ config: '/config',
+ settings: '/api/settings',
+ testConnection: '/api/test-connection',
+ testDashboardConnection: '/api/test-dashboard-connection',
+ playlists: '/api/playlists',
+ sync: '/api/sync',
+ search: '/api/search',
+ artists: '/api/artists',
+ activity: '/api/activity',
+ stream: {
+ start: '/api/stream/start',
+ status: '/api/stream/status',
+ toggle: '/api/stream/toggle',
+ stop: '/api/stream/stop'
+ }
+};
+
+// Track last service status for library card (used by websocket handler in core + artists)
+let _lastServiceStatus = null;
+let _isSoulsyncStandalone = false; // Global flag: true when no media server (sync buttons hidden)
+
+// ===============================
+
diff --git a/webui/static/discover.js b/webui/static/discover.js
new file mode 100644
index 00000000..6763054f
--- /dev/null
+++ b/webui/static/discover.js
@@ -0,0 +1,8921 @@
+// == DISCOVER PAGE ==
+// ============================================
+
+let discoverHeroIndex = 0;
+let discoverHeroArtists = [];
+let discoverHeroInterval = null;
+let discoverPageInitialized = false;
+
+// Store discover playlist tracks for download/sync functionality
+let discoverReleaseRadarTracks = [];
+let discoverWeeklyTracks = [];
+let discoverRecentAlbums = [];
+let discoverSeasonalAlbums = [];
+let discoverSeasonalTracks = [];
+let currentSeasonKey = null;
+
+// Personalized playlists storage
+let personalizedRecentlyAdded = [];
+let personalizedTopTracks = [];
+let personalizedForgottenFavorites = [];
+let personalizedPopularPicks = [];
+let personalizedHiddenGems = [];
+let personalizedDailyMixes = [];
+let personalizedDiscoveryShuffle = [];
+let personalizedFamiliarFavorites = [];
+let buildPlaylistSelectedArtists = [];
+
+async function loadDiscoverPage() {
+ console.log('Loading discover page...');
+
+ // Load all sections
+ await Promise.all([
+ loadDiscoverHero(),
+ loadYourArtists(),
+ loadYourAlbums(),
+ loadSpotifyLibrarySection(),
+ loadDiscoverRecentReleases(),
+ loadSeasonalContent(), // Seasonal discovery
+ loadPersonalizedRecentlyAdded(), // NEW: Recently added from library
+ // loadPersonalizedDailyMixes(), // NEW: Daily Mix playlists (HIDDEN)
+ loadDiscoverReleaseRadar(),
+ loadDiscoverWeekly(),
+ loadPersonalizedPopularPicks(), // NEW: Popular picks from discovery pool
+ loadPersonalizedHiddenGems(), // NEW: Hidden gems from discovery pool
+ loadPersonalizedTopTracks(), // NEW: Your top tracks
+ loadPersonalizedForgottenFavorites(), // NEW: Forgotten favorites
+ loadDiscoveryShuffle(), // NEW: Discovery Shuffle
+ loadFamiliarFavorites(), // NEW: Familiar Favorites
+ loadBecauseYouListenTo(), // Personalized by listening stats
+ loadCacheUndiscoveredAlbums(), // From metadata cache
+ loadCacheGenreNewReleases(), // From metadata cache
+ loadCacheLabelExplorer(), // From metadata cache
+ loadCacheDeepCuts(), // From metadata cache
+ loadCacheGenreExplorer(), // From metadata cache
+ initializeLastfmRadioSection(), // Last.fm Radio section (gated on API key)
+ initializeListenBrainzTabs(), // ListenBrainz playlists (tabbed)
+ loadDecadeBrowserTabs(), // Time Machine (tabbed by decade)
+ loadGenreBrowserTabs(), // Browse by Genre (tabbed by genre)
+ loadListenBrainzPlaylistsFromBackend(), // Load ListenBrainz playlist states for persistence
+ loadDiscoveryBlacklist() // Blocked artists list
+ ]);
+
+ // Check for active syncs after page load
+ checkForActiveDiscoverSyncs();
+}
+
+async function checkForActiveDiscoverSyncs() {
+ // Check if Fresh Tape sync is active
+ try {
+ const releaseRadarResponse = await fetch('/api/sync/status/discover_release_radar');
+ if (releaseRadarResponse.ok) {
+ const data = await releaseRadarResponse.json();
+ if (data.status === 'syncing' || data.status === 'starting') {
+ console.log('🔄 Resuming Fresh Tape sync polling after page refresh');
+
+ // Show status display
+ const statusDisplay = document.getElementById('release-radar-sync-status');
+ if (statusDisplay) {
+ statusDisplay.style.display = 'block';
+ }
+
+ // Disable button
+ const syncButton = document.getElementById('release-radar-sync-btn');
+ if (syncButton) {
+ syncButton.disabled = true;
+ syncButton.style.opacity = '0.5';
+ syncButton.style.cursor = 'not-allowed';
+ }
+
+ // Resume polling
+ startDiscoverSyncPolling('release_radar', 'discover_release_radar');
+ }
+ }
+ } catch (error) {
+ // Sync not active, ignore
+ }
+
+ // Check if The Archives sync is active
+ try {
+ const discoveryWeeklyResponse = await fetch('/api/sync/status/discover_discovery_weekly');
+ if (discoveryWeeklyResponse.ok) {
+ const data = await discoveryWeeklyResponse.json();
+ if (data.status === 'syncing' || data.status === 'starting') {
+ console.log('🔄 Resuming The Archives sync polling after page refresh');
+
+ // Show status display
+ const statusDisplay = document.getElementById('discovery-weekly-sync-status');
+ if (statusDisplay) {
+ statusDisplay.style.display = 'block';
+ }
+
+ // Disable button
+ const syncButton = document.getElementById('discovery-weekly-sync-btn');
+ if (syncButton) {
+ syncButton.disabled = true;
+ syncButton.style.opacity = '0.5';
+ syncButton.style.cursor = 'not-allowed';
+ }
+
+ // Resume polling
+ startDiscoverSyncPolling('discovery_weekly', 'discover_discovery_weekly');
+ }
+ }
+ } catch (error) {
+ // Sync not active, ignore
+ }
+
+ // Check if Seasonal Playlist sync is active
+ try {
+ const seasonalResponse = await fetch('/api/sync/status/discover_seasonal_playlist');
+ if (seasonalResponse.ok) {
+ const data = await seasonalResponse.json();
+ if (data.status === 'syncing' || data.status === 'starting') {
+ console.log('🔄 Resuming Seasonal Playlist sync polling after page refresh');
+
+ const statusDisplay = document.getElementById('seasonal-playlist-sync-status');
+ if (statusDisplay) {
+ statusDisplay.style.display = 'block';
+ }
+
+ const syncButton = document.getElementById('seasonal-playlist-sync-btn');
+ if (syncButton) {
+ syncButton.disabled = true;
+ syncButton.style.opacity = '0.5';
+ syncButton.style.cursor = 'not-allowed';
+ }
+
+ startDiscoverSyncPolling('seasonal_playlist', 'discover_seasonal_playlist');
+ }
+ }
+ } catch (error) {
+ // Sync not active, ignore
+ }
+}
+
+async function loadDiscoverHero() {
+ try {
+ const response = await fetch('/api/discover/hero');
+ if (!response.ok) {
+ console.error('Failed to fetch discover hero');
+ return;
+ }
+
+ const data = await response.json();
+ if (!data.success || !data.artists || data.artists.length === 0) {
+ console.log('No hero artists available');
+ showDiscoverHeroEmpty();
+ return;
+ }
+
+ discoverHeroArtists = data.artists;
+ discoverHeroIndex = 0;
+
+ // Display first artist
+ displayDiscoverHeroArtist(discoverHeroArtists[0]);
+
+ // Start slideshow (change every 8 seconds)
+ if (discoverHeroInterval) {
+ clearInterval(discoverHeroInterval);
+ }
+ if (discoverHeroArtists.length > 1) {
+ discoverHeroInterval = setInterval(() => {
+ discoverHeroIndex = (discoverHeroIndex + 1) % discoverHeroArtists.length;
+ displayDiscoverHeroArtist(discoverHeroArtists[discoverHeroIndex]);
+ }, 8000);
+ }
+
+ // Check if all hero artists are already watched
+ checkAllHeroWatchlistStatus();
+
+ } catch (error) {
+ console.error('Error loading discover hero:', error);
+ showDiscoverHeroEmpty();
+ }
+}
+
+function displayDiscoverHeroArtist(artist) {
+ const titleEl = document.getElementById('discover-hero-title');
+ const subtitleEl = document.getElementById('discover-hero-subtitle');
+ const metaEl = document.getElementById('discover-hero-meta');
+ const imageEl = document.getElementById('discover-hero-image');
+ const bgEl = document.getElementById('discover-hero-bg');
+
+ if (titleEl) {
+ titleEl.textContent = artist.artist_name;
+ }
+
+ if (subtitleEl) {
+ // Show recommendation context based on occurrence count
+ let subtitle = '';
+ if (artist.occurrence_count > 1) {
+ subtitle = `Similar to ${artist.occurrence_count} artists in your watchlist`;
+ } else {
+ subtitle = 'Similar to an artist in your watchlist';
+ }
+ subtitleEl.textContent = subtitle;
+ }
+
+ // Build metadata section with popularity and genres
+ if (metaEl) {
+ let metaHTML = '';
+ metaEl.innerHTML = metaHTML;
+ }
+
+ if (imageEl && artist.image_url) {
+ imageEl.innerHTML = `Mass Deletion Warning
++ You are about to permanently delete ${orphanCount.toLocaleString()} files from your disk. +
++ This many orphans usually means a path mismatch between your database and filesystem + — not actual orphan files. A previous user lost their entire library this way. +
++ To confirm you understand the risk, type witness me below: +
+ +
+
+
+
+ 🎧
';
+ }
+
+ if (bgEl && artist.image_url) {
+ bgEl.style.backgroundImage = `url('${artist.image_url}')`;
+ bgEl.style.backgroundSize = 'cover';
+ bgEl.style.backgroundPosition = 'center';
+ }
+
+ // Store artist ID for both buttons and update watchlist state
+ // Use artist_id which is set by the backend to the appropriate ID for the active source
+ const addBtn = document.getElementById('discover-hero-add');
+ const discographyBtn = document.getElementById('discover-hero-discography');
+ const artistId = artist.artist_id || artist.spotify_artist_id || artist.itunes_artist_id;
+
+ if (addBtn && artistId) {
+ addBtn.setAttribute('data-artist-id', artistId);
+ addBtn.setAttribute('data-artist-name', artist.artist_name);
+ // Also store both IDs for cross-source operations
+ if (artist.spotify_artist_id) addBtn.setAttribute('data-spotify-id', artist.spotify_artist_id);
+ if (artist.itunes_artist_id) addBtn.setAttribute('data-itunes-id', artist.itunes_artist_id);
+
+ // Check if this artist is already in watchlist and update button appearance
+ checkAndUpdateDiscoverHeroWatchlistButton(artistId);
+ }
+
+ if (discographyBtn && artistId) {
+ discographyBtn.setAttribute('data-artist-id', artistId);
+ discographyBtn.setAttribute('data-artist-name', artist.artist_name);
+ // Also store both IDs for cross-source operations
+ if (artist.spotify_artist_id) discographyBtn.setAttribute('data-spotify-id', artist.spotify_artist_id);
+ if (artist.itunes_artist_id) discographyBtn.setAttribute('data-itunes-id', artist.itunes_artist_id);
+ }
+
+ // Update slideshow indicators
+ updateDiscoverHeroIndicators();
+}
+
+async function checkAndUpdateDiscoverHeroWatchlistButton(artistId) {
+ try {
+ const response = await fetch('/api/watchlist/check', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: artistId })
+ });
+
+ const data = await response.json();
+ if (!data.success) return;
+
+ const addBtn = document.getElementById('discover-hero-add');
+ if (!addBtn) return;
+
+ const icon = addBtn.querySelector('.watchlist-icon');
+ const text = addBtn.querySelector('.watchlist-text');
+
+ if (data.is_watching) {
+ // Artist is in watchlist
+ if (icon) icon.textContent = '👁️';
+ if (text) text.textContent = 'Watching...';
+ addBtn.classList.add('watching');
+ } else {
+ // Artist not in watchlist
+ if (icon) icon.textContent = '👁️';
+ if (text) text.textContent = 'Add to Watchlist';
+ addBtn.classList.remove('watching');
+ }
+ } catch (error) {
+ console.error('Error checking watchlist status for hero:', error);
+ }
+}
+
+function toggleDiscoverHeroWatchlist(event) {
+ event.stopPropagation();
+
+ const button = document.getElementById('discover-hero-add');
+ if (!button) return;
+
+ const artistId = button.getAttribute('data-artist-id');
+ const artistName = button.getAttribute('data-artist-name');
+
+ if (!artistId || !artistName) {
+ console.error('No artist data found on discover hero button');
+ return;
+ }
+
+ // Call the existing toggleWatchlist function
+ toggleWatchlist(event, artistId, artistName);
+}
+
+async function watchAllHeroArtists(btn) {
+ if (!discoverHeroArtists || discoverHeroArtists.length === 0) return;
+ if (btn.classList.contains('all-watched')) return;
+
+ const textEl = btn.querySelector('.watch-all-text');
+ const originalText = textEl ? textEl.textContent : '';
+
+ // Loading state
+ btn.disabled = true;
+ if (textEl) textEl.textContent = 'Adding...';
+
+ try {
+ const artists = discoverHeroArtists.map(a => ({
+ artist_id: a.artist_id,
+ artist_name: a.artist_name
+ }));
+
+ const response = await fetch('/api/watchlist/add-batch', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artists })
+ });
+
+ const data = await response.json();
+ if (data.success) {
+ if (textEl) textEl.textContent = 'All Watched';
+ btn.classList.add('all-watched');
+ btn.disabled = true;
+
+ // Sync the per-slide watchlist button for current artist
+ const currentArtist = discoverHeroArtists[discoverHeroIndex];
+ if (currentArtist) {
+ checkAndUpdateDiscoverHeroWatchlistButton(currentArtist.artist_id);
+ }
+
+ // Update watchlist count badge
+ if (typeof updateWatchlistButtonCount === 'function') {
+ updateWatchlistButtonCount();
+ }
+ } else {
+ if (textEl) textEl.textContent = originalText;
+ btn.disabled = false;
+ }
+ } catch (error) {
+ console.error('Error watching all hero artists:', error);
+ if (textEl) textEl.textContent = originalText;
+ btn.disabled = false;
+ }
+}
+
+// Cache for recommended artists data so reopening is instant
+let _recommendedArtistsCache = null;
+
+async function openRecommendedArtistsModal() {
+ let modal = document.getElementById('recommended-artists-modal');
+ if (!modal) {
+ modal = document.createElement('div');
+ modal.id = 'recommended-artists-modal';
+ modal.className = 'modal-overlay';
+ document.body.appendChild(modal);
+
+ modal.addEventListener('click', function (e) {
+ if (e.target === modal) closeRecommendedArtistsModal();
+ });
+ }
+
+ // If cached, render instantly and refresh watchlist statuses
+ if (_recommendedArtistsCache) {
+ modal.style.display = 'flex';
+ renderRecommendedArtistsModal(modal, _recommendedArtistsCache);
+ checkRecommendedWatchlistStatuses(_recommendedArtistsCache);
+ return;
+ }
+
+ // Show loading
+ modal.innerHTML = `
+
+
+ `;
+ modal.style.display = 'flex';
+
+ try {
+ // Phase 1: Fetch basic data (instant — no API enrichment)
+ const response = await fetch('/api/discover/similar-artists');
+ const data = await response.json();
+
+ if (!data.success || !data.artists || data.artists.length === 0) {
+ modal.querySelector('.playlist-modal-body').innerHTML = `
+
+
+
+
+ ×
+ Recommended Artists
+
+ Loading...
+
+
+
+ Loading recommended artists...
+
+ No recommended artists yet.
+ Run a watchlist scan to generate recommendations. +
+ `;
+ modal.querySelector('.playlist-track-count').textContent = '0 artists';
+ return;
+ }
+
+ // Render cards immediately with fallback images
+ _recommendedArtistsCache = data.artists;
+ renderRecommendedArtistsModal(modal, data.artists);
+
+ // Phase 2: Enrich with images/genres progressively in batches of 50
+ // Skip artists that already have cached metadata from the initial response
+ const source = data.source || 'spotify';
+ const idKey = source === 'spotify' ? 'spotify_artist_id' : source === 'deezer' ? 'deezer_artist_id' : 'itunes_artist_id';
+ const allIds = data.artists
+ .filter(a => !a.image_url) // Only enrich artists without cached images
+ .map(a => a[idKey]).filter(Boolean);
+
+ for (let i = 0; i < allIds.length; i += 50) {
+ const batchIds = allIds.slice(i, i + 50);
+ try {
+ const enrichResp = await fetch('/api/discover/similar-artists/enrich', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_ids: batchIds, source })
+ });
+ const enrichData = await enrichResp.json();
+ if (enrichData.success && enrichData.artists) {
+ // Update cards and cache as each batch arrives
+ for (const [aid, info] of Object.entries(enrichData.artists)) {
+ // Update the card in DOM
+ const card = modal.querySelector(`.recommended-artist-card[data-artist-id="${aid}"]`);
+ if (card && info.image_url) {
+ const imgContainer = card.querySelector('.recommended-card-image');
+ if (imgContainer) {
+ imgContainer.innerHTML = `+ Run a watchlist scan to generate recommendations. +
Error loading recommended artists.
+ `;
+ }
+}
+
+function renderRecommendedArtistsModal(modal, artists) {
+ modal.innerHTML = `
+
+
+ `;
+
+ // Event delegation for card clicks and watchlist buttons
+ const grid = modal.querySelector('#recommended-artists-grid');
+ if (grid) {
+ grid.addEventListener('click', function (e) {
+ const watchlistBtn = e.target.closest('.recommended-card-watchlist-btn');
+ if (watchlistBtn) {
+ e.stopPropagation();
+ toggleRecommendedWatchlist(watchlistBtn);
+ return;
+ }
+
+ const card = e.target.closest('.recommended-artist-card');
+ if (card) {
+ const artistId = card.getAttribute('data-artist-id');
+ const nameEl = card.querySelector('.recommended-card-name');
+ const artistName = nameEl ? nameEl.textContent : '';
+ viewRecommendedArtistDiscography(artistId, artistName);
+ }
+ });
+ }
+}
+
+async function addAllRecommendedToWatchlist(btn) {
+ if (!_recommendedArtistsCache || _recommendedArtistsCache.length === 0) return;
+ if (btn.classList.contains('all-added')) return;
+
+ const originalText = btn.textContent;
+ btn.disabled = true;
+ btn.textContent = 'Adding...';
+
+ try {
+ const artists = _recommendedArtistsCache.map(a => ({
+ artist_id: a.artist_id,
+ artist_name: a.artist_name
+ }));
+
+ const resp = await fetch('/api/watchlist/add-batch', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artists })
+ });
+ const data = await resp.json();
+
+ if (data.success) {
+ btn.textContent = `All Added (${data.added} new)`;
+ btn.classList.add('all-added');
+ btn.disabled = true;
+
+ // Update all watchlist buttons in the modal to "Watching"
+ document.querySelectorAll('.recommended-card-watchlist-btn').forEach(wBtn => {
+ wBtn.classList.add('watching');
+ wBtn.textContent = 'Watching';
+ });
+
+ if (typeof updateWatchlistButtonCount === 'function') updateWatchlistButtonCount();
+ } else {
+ btn.textContent = originalText;
+ btn.disabled = false;
+ }
+ } catch (error) {
+ console.error('Error adding all recommended to watchlist:', error);
+ btn.textContent = originalText;
+ btn.disabled = false;
+ }
+}
+
+function closeRecommendedArtistsModal() {
+ const modal = document.getElementById('recommended-artists-modal');
+ if (modal) modal.style.display = 'none';
+}
+
+function filterRecommendedArtists() {
+ const query = (document.getElementById('recommended-search-input')?.value || '').toLowerCase();
+ const cards = document.querySelectorAll('.recommended-artist-card');
+ cards.forEach(card => {
+ const name = card.getAttribute('data-artist-name') || '';
+ card.style.display = name.includes(query) ? '' : 'none';
+ });
+}
+
+async function toggleRecommendedWatchlist(btn) {
+ const artistId = btn.getAttribute('data-artist-id');
+ const artistName = btn.getAttribute('data-artist-name');
+ if (!artistId || !artistName) return;
+
+ btn.disabled = true;
+ const wasWatching = btn.classList.contains('watching');
+
+ try {
+ if (wasWatching) {
+ const resp = await fetch('/api/watchlist/remove', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: artistId })
+ });
+ const data = await resp.json();
+ if (data.success) {
+ btn.classList.remove('watching');
+ btn.textContent = 'Add to Watchlist';
+ }
+ } else {
+ const resp = await fetch('/api/watchlist/add', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: artistId, artist_name: artistName })
+ });
+ const data = await resp.json();
+ if (data.success) {
+ btn.classList.add('watching');
+ btn.textContent = 'Watching';
+ }
+ }
+ if (typeof updateWatchlistButtonCount === 'function') updateWatchlistButtonCount();
+ } catch (error) {
+ console.error('Error toggling recommended watchlist:', error);
+ } finally {
+ btn.disabled = false;
+ }
+}
+
+async function checkRecommendedWatchlistStatuses(artists) {
+ try {
+ const artistIds = artists.map(a => a.artist_id).filter(Boolean);
+ if (!artistIds.length) return;
+
+ const resp = await fetch('/api/watchlist/check-batch', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_ids: artistIds })
+ });
+ const data = await resp.json();
+ if (data.success && data.results) {
+ for (const [aid, isWatching] of Object.entries(data.results)) {
+ if (isWatching) {
+ const btn = document.querySelector(`.recommended-card-watchlist-btn[data-artist-id="${aid}"]`);
+ if (btn) {
+ btn.classList.add('watching');
+ btn.textContent = 'Watching';
+ }
+ }
+ }
+ }
+ } catch (e) {
+ // Non-critical
+ }
+}
+
+async function viewRecommendedArtistDiscography(artistId, artistName) {
+ closeRecommendedArtistsModal();
+
+ const artist = {
+ id: artistId,
+ name: artistName
+ };
+
+ // Use same navigation pattern as hero slider
+ navigateToPage('artists');
+ await new Promise(resolve => setTimeout(resolve, 100));
+ await selectArtistForDetail(artist);
+}
+
+async function checkAllHeroWatchlistStatus() {
+ const btn = document.getElementById('discover-hero-watch-all');
+ if (!btn || !discoverHeroArtists || discoverHeroArtists.length === 0) return;
+
+ try {
+ let allWatched = true;
+ for (const artist of discoverHeroArtists) {
+ const response = await fetch('/api/watchlist/check', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: artist.artist_id })
+ });
+ const data = await response.json();
+ if (!data.success || !data.is_watching) {
+ allWatched = false;
+ break;
+ }
+ }
+
+ const textEl = btn.querySelector('.watch-all-text');
+ if (allWatched) {
+ if (textEl) textEl.textContent = 'All Watched';
+ btn.classList.add('all-watched');
+ btn.disabled = true;
+ } else {
+ if (textEl) textEl.textContent = 'Watch All';
+ btn.classList.remove('all-watched');
+ btn.disabled = false;
+ }
+ } catch (error) {
+ console.error('Error checking hero watchlist status:', error);
+ }
+}
+
+function navigateDiscoverHero(direction) {
+ if (!discoverHeroArtists || discoverHeroArtists.length === 0) return;
+
+ // Update index with wrapping
+ discoverHeroIndex = (discoverHeroIndex + direction + discoverHeroArtists.length) % discoverHeroArtists.length;
+
+ // Display the artist
+ displayDiscoverHeroArtist(discoverHeroArtists[discoverHeroIndex]);
+
+ // Update indicators
+ updateDiscoverHeroIndicators();
+}
+
+function updateDiscoverHeroIndicators() {
+ const indicatorsContainer = document.getElementById('discover-hero-indicators');
+ if (!indicatorsContainer || !discoverHeroArtists || discoverHeroArtists.length === 0) return;
+
+ // Create indicator dots
+ indicatorsContainer.innerHTML = discoverHeroArtists.map((_, index) => `
+
+ `).join('');
+}
+
+function jumpToDiscoverHeroSlide(index) {
+ if (!discoverHeroArtists || index < 0 || index >= discoverHeroArtists.length) return;
+
+ discoverHeroIndex = index;
+ displayDiscoverHeroArtist(discoverHeroArtists[discoverHeroIndex]);
+ updateDiscoverHeroIndicators();
+}
+
+async function viewDiscoverHeroDiscography() {
+ const button = document.getElementById('discover-hero-discography');
+ if (!button) return;
+
+ const artistId = button.getAttribute('data-artist-id');
+ const artistName = button.getAttribute('data-artist-name');
+
+ if (!artistId || !artistName) {
+ console.error('No artist data found for discography view');
+ return;
+ }
+
+ // Create artist object matching the expected format
+ const artist = {
+ id: artistId,
+ name: artistName,
+ image_url: discoverHeroArtists[discoverHeroIndex]?.image_url || '',
+ genres: discoverHeroArtists[discoverHeroIndex]?.genres || [],
+ popularity: discoverHeroArtists[discoverHeroIndex]?.popularity || 0
+ };
+
+ console.log(`🎵 Navigating to artist detail for: ${artistName}`);
+
+ // Navigate to Artists page
+ navigateToPage('artists');
+
+ // Small delay to let the page load
+ await new Promise(resolve => setTimeout(resolve, 100));
+
+ // Load the artist details
+ await selectArtistForDetail(artist);
+}
+
+function showDiscoverHeroEmpty() {
+ const titleEl = document.getElementById('discover-hero-title');
+ const subtitleEl = document.getElementById('discover-hero-subtitle');
+
+ if (titleEl) titleEl.textContent = 'No Recommendations Yet';
+ if (subtitleEl) subtitleEl.textContent = 'Run a watchlist scan to generate personalized recommendations';
+}
+
+async function loadDiscoverRecentReleases() {
+ try {
+ const carousel = document.getElementById('recent-releases-carousel');
+ if (!carousel) return;
+
+ carousel.innerHTML = '
+
+
+
+ ×
+ Recommended Artists
+
+ ${artists.length} artist${artists.length !== 1 ? 's' : ''}
+
+
+
+
+
+ ${artists.map(artist => {
+ const genreTags = (artist.genres || []).slice(0, 3).map(g =>
+ `${escapeHtml(g)}`
+ ).join('');
+ const similarText = artist.occurrence_count > 1
+ ? `Similar to ${artist.occurrence_count} in your watchlist`
+ : 'Similar to an artist in your watchlist';
+ return `
+
+
+
+
+ `;
+ }).join('')}
+
+ ${artist.image_url ? `
+
+ ` : `
+
+ 🎤
+ `}
+
+ ${escapeHtml(artist.artist_name)}
+ ${similarText}
+
+ ${genreTags}
+ Loading recent releases...
No recent releases found
+
+ `;
+ });
+
+ carousel.innerHTML = html;
+
+ } catch (error) {
+ console.error('Error loading recent releases:', error);
+ const carousel = document.getElementById('recent-releases-carousel');
+ if (carousel) {
+ carousel.innerHTML = '
+ 
+
+
+
+ ${album.album_name}
+${album.artist_name}
+ +Failed to load recent releases
Fetching your albums from connected services...
Loading...
Failed to load albums
No albums found
+
`;
+ });
+ grid.innerHTML = html;
+}
+
+function _renderYourAlbumsPagination(total, page) {
+ const container = document.getElementById('your-albums-pagination');
+ if (!container) return;
+ if (total <= YOUR_ALBUMS_PAGE_SIZE) { container.style.display = 'none'; return; }
+ container.style.display = '';
+ const totalPages = Math.ceil(total / YOUR_ALBUMS_PAGE_SIZE);
+ const start = (page - 1) * YOUR_ALBUMS_PAGE_SIZE + 1;
+ const end = Math.min(page * YOUR_ALBUMS_PAGE_SIZE, total);
+ container.innerHTML = `
+
+ ${start}\u2013${end} of ${total}
+
+ `;
+}
+
+function _yourAlbumsPrevPage() {
+ if (yourAlbumsPage > 1) { yourAlbumsPage--; loadYourAlbumsGrid(); }
+}
+function _yourAlbumsNextPage() {
+ const totalPages = Math.ceil(yourAlbumsTotal / YOUR_ALBUMS_PAGE_SIZE);
+ if (yourAlbumsPage < totalPages) { yourAlbumsPage++; loadYourAlbumsGrid(); }
+}
+
+async function openYourAlbumDownload(index) {
+ const album = yourAlbums[index];
+ if (!album) { showToast('Album data not found', 'error'); return; }
+ showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
+ try {
+ // Prefer Spotify ID, fall back to Deezer, then search by name
+ let albumData = null;
+ const nameParams = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+ if (album.spotify_album_id) {
+ const r = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${nameParams}`);
+ if (r.ok) albumData = await r.json();
+ }
+ if (!albumData && album.deezer_album_id) {
+ const r = await fetch(`/api/discover/album/deezer/${album.deezer_album_id}?${nameParams}`);
+ if (r.ok) albumData = await r.json();
+ }
+ if (!albumData) {
+ // Last resort — search by name
+ const r = await fetch(`/api/discover/album/spotify/search?${nameParams}`);
+ if (r.ok) albumData = await r.json();
+ }
+ if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
+ throw new Error('No tracks found for this album');
+ }
+ const tracks = albumData.tracks.map(track => {
+ let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+ if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+ return {
+ id: track.id, name: track.name, artists,
+ album: {
+ id: albumData.id, name: albumData.name,
+ album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0,
+ release_date: albumData.release_date || '',
+ images: albumData.images || []
+ },
+ duration_ms: track.duration_ms || 0,
+ track_number: track.track_number || 0
+ };
+ });
+ const virtualId = `discover_album_${album.spotify_album_id || album.deezer_album_id || album.tidal_album_id || index}`;
+ const albumObj = {
+ id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
+ images: albumData.images || [], artists: [{ name: album.artist_name }]
+ };
+ const artistObj = { id: null, name: album.artist_name };
+ await openDownloadMissingModalForArtistAlbum(virtualId, albumData.name, tracks, albumObj, artistObj, false);
+ hideLoadingOverlay();
+ } catch (e) {
+ console.error('Error opening your album download:', e);
+ showToast(`Failed to load album: ${e.message}`, 'error');
+ hideLoadingOverlay();
+ }
+}
+
+async function refreshYourAlbums() {
+ const btn = document.getElementById('your-albums-refresh-btn');
+ if (btn) btn.disabled = true;
+ const subtitle = document.getElementById('your-albums-subtitle');
+ if (subtitle) subtitle.textContent = 'Refreshing from connected services...';
+ try {
+ await fetch('/api/discover/your-albums/refresh?clear=true', { method: 'POST' });
+ showToast('Refresh started — checking for new albums...', 'info');
+ const poll = setInterval(async () => {
+ try {
+ const resp = await fetch('/api/discover/your-albums?page=1&per_page=48');
+ const data = await resp.json();
+ if (data.success && data.stats && data.stats.total > 0) {
+ clearInterval(poll);
+ loadYourAlbums();
+ if (btn) btn.disabled = false;
+ }
+ } catch (e) { }
+ }, 4000);
+ setTimeout(() => { clearInterval(poll); if (btn) btn.disabled = false; }, 60000);
+ } catch (e) {
+ showToast('Failed to start refresh', 'error');
+ if (btn) btn.disabled = false;
+ }
+}
+
+async function openYourAlbumsSourcesModal() {
+ const existing = document.getElementById('ya-albums-sources-modal-overlay');
+ if (existing) existing.remove();
+
+ let enabled = ['spotify', 'tidal', 'deezer'];
+ let connected = [];
+ try {
+ const resp = await fetch('/api/discover/your-albums/sources');
+ if (resp.ok) {
+ const data = await resp.json();
+ if (data.enabled) enabled = data.enabled;
+ if (data.connected) connected = data.connected;
+ }
+ } catch (e) { }
+
+ const sourceInfo = [
+ { id: 'spotify', label: 'Spotify', icon: '\uD83C\uDFB5' },
+ { id: 'tidal', label: 'Tidal', icon: '\uD83C\uDF0A' },
+ { id: 'deezer', label: 'Deezer', icon: '\uD83C\uDFB6' },
+ ];
+ const state = {};
+ sourceInfo.forEach(s => { state[s.id] = enabled.includes(s.id); });
+
+ const overlay = document.createElement('div');
+ overlay.id = 'ya-albums-sources-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ const rows = sourceInfo.map(s => {
+ const isConnected = connected.includes(s.id);
+ const isOn = state[s.id];
+ return `
+
+
+
+ ${badgeIcon}
+
+
+ ${escapeHtml(album.album_name)}
+${escapeHtml(album.artist_name)}
+ +
+
`;
+ }).join('');
+
+ overlay.innerHTML = `
+
+ ${s.icon}
+
+
+
+
+ ${s.label}
+ ${isConnected ? 'Connected' : 'Not connected'}
+
+
+ `;
+ document.body.appendChild(overlay);
+ window._yaaSourcesState = state;
+}
+
+function _yaaSourceRowClick(id) {
+ const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`);
+ if (row && row.classList.contains('disconnected')) return;
+ _yaaSourceToggle(id);
+}
+function _yaaSourceToggle(id) {
+ const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`);
+ if (row && row.classList.contains('disconnected')) return;
+ window._yaaSourcesState[id] = !window._yaaSourcesState[id];
+ const btn = document.getElementById(`yaa-toggle-${id}`);
+ if (btn) btn.classList.toggle('on', window._yaaSourcesState[id]);
+}
+async function _yaaSourcesSave() {
+ const enabledArr = Object.entries(window._yaaSourcesState).filter(([, v]) => v).map(([k]) => k);
+ if (enabledArr.length === 0) { showToast('Select at least one source', 'error'); return; }
+ try {
+ const resp = await fetch('/api/settings', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ discover: { your_albums_sources: enabledArr.join(',') } })
+ });
+ if (resp.ok) {
+ document.getElementById('ya-albums-sources-modal-overlay')?.remove();
+ showToast('Sources saved — refresh to apply', 'success');
+ const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer' };
+ const subtitle = document.getElementById('your-albums-subtitle');
+ if (subtitle) {
+ const names = enabledArr.map(s => sourceNames[s] || s).join(' and ');
+ subtitle.textContent = `Albums you\u2019ve saved on ${names}`;
+ }
+ } else {
+ showToast('Failed to save sources', 'error');
+ }
+ } catch (e) {
+ showToast('Failed to save sources', 'error');
+ }
+}
+
+async function downloadMissingYourAlbums() {
+ try {
+ const resp = await fetch('/api/discover/your-albums?page=1&per_page=1000&status=missing');
+ const data = await resp.json();
+ if (!data.success || !data.albums || data.albums.length === 0) {
+ showToast('No missing albums to download', 'info');
+ return;
+ }
+ const missing = data.albums.filter(a => !a.in_library);
+ if (missing.length === 0) { showToast('All albums are already in your library!', 'success'); return; }
+ if (!confirm(`Download ${missing.length} missing album${missing.length > 1 ? 's' : ''} from your saved albums?`)) return;
+ showToast(`Starting download for ${missing.length} albums...`, 'info');
+ for (let i = 0; i < missing.length; i++) {
+ const album = missing[i];
+ try {
+ showToast(`Queuing ${i + 1}/${missing.length}: ${album.album_name}`, 'info');
+ const nameParams = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+ let albumData = null;
+ if (album.spotify_album_id) {
+ const r = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${nameParams}`);
+ if (r.ok) albumData = await r.json();
+ }
+ if (!albumData && album.deezer_album_id) {
+ const r = await fetch(`/api/discover/album/deezer/${album.deezer_album_id}?${nameParams}`);
+ if (r.ok) albumData = await r.json();
+ }
+ if (!albumData || !albumData.tracks || albumData.tracks.length === 0) continue;
+ const tracks = albumData.tracks.map(track => {
+ let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+ if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+ return {
+ id: track.id, name: track.name, artists,
+ album: {
+ id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
+ images: albumData.images || []
+ },
+ duration_ms: track.duration_ms || 0, track_number: track.track_number || 0
+ };
+ });
+ const virtualId = `your_albums_${album.spotify_album_id || album.deezer_album_id || i}`;
+ await openDownloadMissingModalForYouTube(virtualId, albumData.name, tracks,
+ { name: album.artist_name, source: albumData.source || 'spotify' },
+ {
+ id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
+ images: albumData.images || []
+ }
+ );
+ } catch (err) { console.error(`Error queuing ${album.album_name}:`, err); }
+ }
+ } catch (e) {
+ console.error('Error downloading missing your albums:', e);
+ showToast(`Error: ${e.message}`, 'error');
+ }
+}
+
+// ===============================
+// SPOTIFY LIBRARY SECTION
+// ===============================
+
+let spotifyLibraryAlbums = [];
+let spotifyLibraryPage = 0;
+let spotifyLibraryTotal = 0;
+const SPOTIFY_LIBRARY_PAGE_SIZE = 48;
+let _spotifyLibrarySearchTimeout = null;
+
+function debouncedSpotifyLibrarySearch() {
+ clearTimeout(_spotifyLibrarySearchTimeout);
+ _spotifyLibrarySearchTimeout = setTimeout(() => {
+ spotifyLibraryPage = 0;
+ loadSpotifyLibraryAlbums();
+ }, 400);
+}
+
+async function loadSpotifyLibrarySection() {
+ try {
+ const section = document.getElementById('spotify-library-section');
+ if (!section) return;
+
+ const response = await fetch(`/api/discover/spotify-library?offset=0&limit=${SPOTIFY_LIBRARY_PAGE_SIZE}`);
+ if (!response.ok) throw new Error('Failed to fetch');
+
+ const data = await response.json();
+ if (!data.success || !data.albums || data.albums.length === 0) {
+ section.style.display = 'none';
+ return;
+ }
+
+ section.style.display = '';
+ spotifyLibraryAlbums = data.albums;
+ spotifyLibraryTotal = data.total;
+ spotifyLibraryPage = 0;
+
+ // Update subtitle with stats
+ const subtitle = document.getElementById('spotify-library-subtitle');
+ if (subtitle && data.stats) {
+ const s = data.stats;
+ subtitle.textContent = `${s.total} albums \u00B7 ${s.owned} owned \u00B7 ${s.missing} missing`;
+ }
+
+ // Show download missing button if there are missing albums
+ const dlBtn = document.getElementById('spotify-library-download-missing-btn');
+ if (dlBtn && data.stats && data.stats.missing > 0) {
+ dlBtn.style.display = '';
+ }
+
+ // Show filters
+ const filters = document.getElementById('spotify-library-filters');
+ if (filters) filters.style.display = '';
+
+ renderSpotifyLibraryGrid(data.albums);
+ renderSpotifyLibraryPagination(data.total, 0);
+
+ } catch (error) {
+ console.error('Error loading Spotify library section:', error);
+ const section = document.getElementById('spotify-library-section');
+ if (section) section.style.display = 'none';
+ }
+}
+
+async function loadSpotifyLibraryAlbums() {
+ const grid = document.getElementById('spotify-library-grid');
+ if (!grid) return;
+
+ grid.innerHTML = 'Your Albums Sources
+Choose which connected services contribute albums to this section.
+${rows}
+
+ Loading...
Failed to load albums
No albums found
+
+ `;
+ });
+
+ grid.innerHTML = html;
+}
+
+function renderSpotifyLibraryPagination(total, offset) {
+ const container = document.getElementById('spotify-library-pagination');
+ if (!container) return;
+
+ if (total <= SPOTIFY_LIBRARY_PAGE_SIZE) {
+ container.style.display = 'none';
+ return;
+ }
+
+ container.style.display = '';
+ const totalPages = Math.ceil(total / SPOTIFY_LIBRARY_PAGE_SIZE);
+ const currentPage = Math.floor(offset / SPOTIFY_LIBRARY_PAGE_SIZE) + 1;
+ const showEnd = Math.min(offset + SPOTIFY_LIBRARY_PAGE_SIZE, total);
+
+ container.innerHTML = `
+
+ ${offset + 1}\u2013${showEnd} of ${total}
+
+ `;
+}
+
+function spotifyLibraryPrevPage() {
+ if (spotifyLibraryPage > 0) {
+ spotifyLibraryPage--;
+ loadSpotifyLibraryAlbums();
+ }
+}
+
+function spotifyLibraryNextPage() {
+ const totalPages = Math.ceil(spotifyLibraryTotal / SPOTIFY_LIBRARY_PAGE_SIZE);
+ if (spotifyLibraryPage < totalPages - 1) {
+ spotifyLibraryPage++;
+ loadSpotifyLibraryAlbums();
+ }
+}
+
+async function openSpotifyLibraryAlbumDownload(index) {
+ const album = spotifyLibraryAlbums[index];
+ if (!album) {
+ showToast('Album data not found', 'error');
+ return;
+ }
+
+ console.log(`\u{1F4E5} Opening download modal for Spotify library album: ${album.album_name}`);
+ showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
+
+ try {
+ const _params = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+ const response = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${_params}`);
+ if (!response.ok) throw new Error('Failed to fetch album tracks');
+
+ const albumData = await response.json();
+ if (!albumData.tracks || albumData.tracks.length === 0) {
+ throw new Error('No tracks found in album');
+ }
+
+ const spotifyTracks = albumData.tracks.map(track => {
+ let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+ if (Array.isArray(artists)) {
+ artists = artists.map(a => a.name || a);
+ }
+ return {
+ id: track.id,
+ name: track.name,
+ artists: artists,
+ album: {
+ id: albumData.id,
+ name: albumData.name,
+ album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0,
+ release_date: albumData.release_date || '',
+ images: albumData.images || []
+ },
+ duration_ms: track.duration_ms || 0,
+ track_number: track.track_number || 0
+ };
+ });
+
+ const virtualPlaylistId = `spotify_library_${album.spotify_album_id}`;
+ const artistContext = {
+ id: album.artist_id,
+ name: album.artist_name,
+ source: 'spotify'
+ };
+ const albumContext = {
+ id: albumData.id,
+ name: albumData.name,
+ album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0,
+ release_date: albumData.release_date || '',
+ images: albumData.images || []
+ };
+
+ await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, artistContext, albumContext);
+ hideLoadingOverlay();
+
+ } catch (error) {
+ console.error('Error opening Spotify library album download:', error);
+ showToast(`Failed to load album: ${error.message}`, 'error');
+ hideLoadingOverlay();
+ }
+}
+
+async function refreshSpotifyLibraryCache() {
+ try {
+ showToast('Refreshing Spotify library...', 'info');
+ const response = await fetch('/api/discover/spotify-library/refresh', { method: 'POST' });
+ const data = await response.json();
+ if (data.success) {
+ showToast('Spotify library refresh started — will update shortly', 'success');
+ // Reload after a delay to let the sync run
+ setTimeout(() => loadSpotifyLibrarySection(), 10000);
+ } else {
+ showToast(`Error: ${data.error}`, 'error');
+ }
+ } catch (error) {
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+async function downloadMissingSpotifyLibraryAlbums() {
+ // Fetch all missing albums (no pagination limit)
+ try {
+ const response = await fetch('/api/discover/spotify-library?status=missing&limit=500&offset=0');
+ const data = await response.json();
+ if (!data.success || !data.albums || data.albums.length === 0) {
+ showToast('No missing albums to download', 'info');
+ return;
+ }
+
+ const missing = data.albums.filter(a => !a.in_library);
+ if (missing.length === 0) {
+ showToast('All albums are already in your library!', 'success');
+ return;
+ }
+
+ if (!confirm(`Download ${missing.length} missing album${missing.length > 1 ? 's' : ''} from your Spotify library?`)) {
+ return;
+ }
+
+ showToast(`Starting download for ${missing.length} albums...`, 'info');
+
+ // Download one at a time to avoid overwhelming the system
+ for (let i = 0; i < missing.length; i++) {
+ const album = missing[i];
+ try {
+ showToast(`Queuing ${i + 1}/${missing.length}: ${album.album_name}`, 'info');
+
+ const _params = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+ const response = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${_params}`);
+ if (!response.ok) continue;
+
+ const albumData = await response.json();
+ if (!albumData.tracks || albumData.tracks.length === 0) continue;
+
+ const spotifyTracks = albumData.tracks.map(track => {
+ let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+ if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+ return {
+ id: track.id,
+ name: track.name,
+ artists: artists,
+ album: {
+ id: albumData.id,
+ name: albumData.name,
+ album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0,
+ release_date: albumData.release_date || '',
+ images: albumData.images || []
+ },
+ duration_ms: track.duration_ms || 0,
+ track_number: track.track_number || 0
+ };
+ });
+
+ const virtualPlaylistId = `spotify_library_${album.spotify_album_id}`;
+ await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, {
+ id: album.artist_id, name: album.artist_name, source: 'spotify'
+ }, {
+ id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
+ images: albumData.images || []
+ });
+
+ } catch (err) {
+ console.error(`Error downloading album ${album.album_name}:`, err);
+ }
+ }
+
+ } catch (error) {
+ console.error('Error downloading missing Spotify library albums:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+async function loadDiscoverReleaseRadar() {
+ try {
+ const playlistContainer = document.getElementById('release-radar-playlist');
+ if (!playlistContainer) return;
+
+ playlistContainer.innerHTML = '
+
+
+ ${badgeIcon}
+
+
+ ${album.album_name}
+${album.artist_name}
+ +Loading release radar...
No new releases available
';
+ data.tracks.forEach((track, index) => {
+ const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
+ const durationMin = Math.floor(track.duration_ms / 60000);
+ const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+ const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+ html += `
+
';
+
+ playlistContainer.innerHTML = html;
+
+ } catch (error) {
+ console.error('Error loading release radar:', error);
+ const playlistContainer = document.getElementById('release-radar-playlist');
+ if (playlistContainer) {
+ playlistContainer.innerHTML = '
+
+ `;
+ });
+ html += '${index + 1}
+
+
+
+
+
+ ${track.track_name}
+ ${track.artist_name}
+ ${track.album_name}
+ ${duration}
+ Failed to load release radar
Curating your discovery playlist...
No tracks available yet
';
+ data.tracks.forEach((track, index) => {
+ const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
+ const durationMin = Math.floor(track.duration_ms / 60000);
+ const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+ const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+ html += `
+
';
+
+ playlistContainer.innerHTML = html;
+
+ } catch (error) {
+ console.error('Error loading discovery weekly:', error);
+ const playlistContainer = document.getElementById('discovery-weekly-playlist');
+ if (playlistContainer) {
+ playlistContainer.innerHTML = '
+
+ `;
+ });
+ html += '${index + 1}
+
+
+
+
+
+ ${track.track_name}
+ ${track.artist_name}
+ ${track.album_name}
+ ${duration}
+ Failed to load discovery weekly
No decade content available yet. Run a watchlist scan to populate your discovery pool!
+
+ `;
+ });
+
+ carousel.innerHTML = html;
+
+ } catch (error) {
+ console.error('Error loading decade browser:', error);
+ const carousel = document.getElementById('decade-browser-carousel');
+ if (carousel) {
+ carousel.innerHTML = '
+
+
+
+
+ ${label}
+${decade.track_count} tracks
+ +Failed to load decades
No genre content available yet. Run a watchlist scan to populate your discovery pool!
+
+ `;
+ });
+
+ carousel.innerHTML = html;
+
+ } catch (error) {
+ console.error('Error loading genre browser:', error);
+ const carousel = document.getElementById('genre-browser-carousel');
+ if (carousel) {
+ carousel.innerHTML = '
+
+
+
+
+ ${displayName}
+${genre.track_count} tracks
+ +Failed to load genres
No decade content available yet. Run a watchlist scan to populate your discovery pool!
+
+
+ `;
+ });
+
+ tabsContainer.innerHTML = tabsHTML;
+ contentsContainer.innerHTML = contentsHTML;
+
+ // Load first decade's tracks
+ if (data.decades.length > 0) {
+ await loadDecadeTracks(data.decades[0].year);
+ }
+
+ } catch (error) {
+ console.error('Error loading decade browser tabs:', error);
+ const tabsContainer = document.getElementById('decade-tabs');
+ if (tabsContainer) {
+ tabsContainer.innerHTML = '
+
+
+
+
+
+
+
+
+
+
+ ${decade.year}s Classics
+${decade.track_count} tracks
+
+
+
+
+
+
+
+ Loading ${decade.year}s tracks...
Failed to load decades
No tracks found for the ' + decade + 's
';
+ data.tracks.forEach((track, index) => {
+ // Extract track data from track_data_json if available
+ let trackData = track;
+ if (track.track_data_json) {
+ trackData = track.track_data_json;
+ }
+
+ // Get track properties with fallbacks
+ const trackName = trackData.name || trackData.track_name || track.track_name || 'Unknown Track';
+ const artistName = trackData.artists?.[0]?.name || trackData.artists?.[0] || trackData.artist_name || track.artist_name || 'Unknown Artist';
+ const albumName = trackData.album?.name || trackData.album_name || track.album_name || 'Unknown Album';
+ const coverUrl = trackData.album?.images?.[0]?.url || track.album_cover_url || '/static/placeholder-album.png';
+ const durationMs = trackData.duration_ms || track.duration_ms || 0;
+
+ const durationMin = Math.floor(durationMs / 60000);
+ const durationSec = Math.floor((durationMs % 60000) / 1000);
+ const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+ html += `
+
';
+
+ playlistContainer.innerHTML = html;
+
+ } catch (error) {
+ console.error('Error loading decade tracks:', error);
+ const playlistContainer = document.getElementById(`decade-${decade}-playlist`);
+ if (playlistContainer) {
+ playlistContainer.innerHTML = '
+
+ `;
+ });
+ html += '${index + 1}
+
+
+
+
+
+ ${trackName}
+ ${artistName}
+ ${albumName}
+ ${duration}
+ Failed to load decade tracks
No genre content available yet. Run a watchlist scan to populate your discovery pool!
+
+
+ `;
+ });
+
+ tabsContainer.innerHTML = tabsHTML;
+ contentsContainer.innerHTML = contentsHTML;
+
+ // Load first genre's tracks
+ if (displayGenres.length > 0) {
+ await loadGenreTracks(displayGenres[0].name);
+ }
+
+ } catch (error) {
+ console.error('Error loading genre browser tabs:', error);
+ const tabsContainer = document.getElementById('genre-tabs');
+ if (tabsContainer) {
+ tabsContainer.innerHTML = '
+
+
+
+
+
+
+
+
+
+
+ ${capitalizeGenre(genreName)} Mix
+${genre.track_count} tracks
+
+
+
+
+
+
+
+ Loading ${capitalizeGenre(genreName)} tracks...
Failed to load genres
No tracks found for ${capitalizeGenre(genreName)}
';
+ data.tracks.forEach((track, index) => {
+ // Extract track data from track_data_json if available
+ let trackData = track;
+ if (track.track_data_json) {
+ trackData = track.track_data_json;
+ }
+
+ // Get track properties with fallbacks
+ const trackName = trackData.name || trackData.track_name || track.track_name || 'Unknown Track';
+ const artistName = trackData.artists?.[0]?.name || trackData.artists?.[0] || trackData.artist_name || track.artist_name || 'Unknown Artist';
+ const albumName = trackData.album?.name || trackData.album_name || track.album_name || 'Unknown Album';
+ const coverUrl = trackData.album?.images?.[0]?.url || track.album_cover_url || '/static/placeholder-album.png';
+ const durationMs = trackData.duration_ms || track.duration_ms || 0;
+
+ const durationMin = Math.floor(durationMs / 60000);
+ const durationSec = Math.floor((durationMs % 60000) / 1000);
+ const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+ html += `
+
';
+
+ playlistContainer.innerHTML = html;
+
+ } catch (error) {
+ console.error('Error loading genre tracks:', error);
+ const genreId = genreName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
+ const playlistContainer = document.getElementById(`genre-${genreId}-playlist`);
+ if (playlistContainer) {
+ playlistContainer.innerHTML = '
+
+ `;
+ });
+ html += '${index + 1}
+
+
+
+
+
+ ${trackName}
+ ${artistName}
+ ${albumName}
+ ${duration}
+ Failed to load genre tracks
';
+ dropdown.style.display = 'block';
+ try {
+ const res = await fetch(`/api/lastfm/search/tracks?q=${encodeURIComponent(q)}`);
+ if (!res.ok) { dropdown.style.display = 'none'; return; }
+ const data = await res.json();
+ if (!data.results || data.results.length === 0) {
+ dropdown.style.display = 'none';
+ return;
+ }
+ dropdown.innerHTML = data.results.map(t => {
+ const imgHtml = t.image_url
+ ? `
+
`;
+ }).join('');
+ dropdown.style.display = 'block';
+ } catch (e) {
+ console.error('Last.fm search error:', e);
+ dropdown.style.display = 'none';
+ }
+}
+
+function selectLastfmRadioTrack(name, artist) {
+ // Close dropdown and update input to show selection
+ document.getElementById('lastfm-radio-dropdown').style.display = 'none';
+ document.getElementById('lastfm-radio-input').value = `${name} — ${artist}`;
+ document.getElementById('lastfm-radio-input').blur();
+ // Immediately kick off generation
+ _generateLastfmRadioFor(name, artist);
+}
+
+function clearLastfmRadioSelection() {
+ document.getElementById('lastfm-radio-input').value = '';
+ document.getElementById('lastfm-radio-dropdown').style.display = 'none';
+}
+
+// Keep generateLastfmRadio as public alias (called by nothing now but harmless)
+async function generateLastfmRadio() {
+ const input = (document.getElementById('lastfm-radio-input').value || '').trim();
+ if (!input) return;
+ // Parse "Track — Artist" format if present
+ const parts = input.split(' — ');
+ if (parts.length >= 2) {
+ await _generateLastfmRadioFor(parts[0].trim(), parts[1].trim());
+ }
+}
+
+async function _generateLastfmRadioFor(name, artist) {
+ const container = document.getElementById('lastfm-radio-playlists');
+ const input = document.getElementById('lastfm-radio-input');
+
+ // Show loading state in the playlists area
+ if (container) {
+ container.innerHTML = `
+ `;
+ }
+ if (input) input.disabled = true;
+
+ try {
+ const res = await fetch('/api/lastfm/radio/generate', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ track_name: name, artist_name: artist }),
+ });
+ const data = await res.json();
+ if (!data.success) {
+ if (container) container.innerHTML = '';
+ showToast(data.error || 'Failed to generate radio', 'error');
+ return;
+ }
+ // Reload all radio playlist cards
+ await _loadLastfmRadioPlaylists();
+ } catch (e) {
+ if (container) container.innerHTML = '';
+ showToast('Error generating Last.fm radio', 'error');
+ console.error(e);
+ } finally {
+ if (input) input.disabled = false;
+ }
+}
+
+async function initializeLastfmRadioSection() {
+ try {
+ const cfgRes = await fetch('/api/lastfm/configured');
+ if (!cfgRes.ok) return;
+ const { configured } = await cfgRes.json();
+ const section = document.getElementById('lastfm-radio-section');
+ if (!section) return;
+ if (!configured) {
+ section.style.display = 'none';
+ return;
+ }
+ section.style.display = '';
+ await _loadLastfmRadioPlaylists();
+ } catch (e) {
+ console.error('Error initializing Last.fm Radio section:', e);
+ }
+}
+
+async function _loadLastfmRadioPlaylists() {
+ const container = document.getElementById('lastfm-radio-playlists');
+ if (!container) return;
+ try {
+ const res = await fetch('/api/discover/listenbrainz/lastfm-radio');
+ if (!res.ok) return;
+ const data = await res.json();
+ if (!data.success || !data.playlists || data.playlists.length === 0) {
+ container.innerHTML = '';
+ return;
+ }
+ // Reuse the same LB playlist card builder — cards are identical
+ container.innerHTML = buildListenBrainzPlaylistsHtml(data.playlists, 'lastfm_radio');
+ loadTracksForPlaylists(data.playlists);
+ } catch (e) {
+ console.error('Error loading Last.fm radio playlists:', e);
+ }
+}
+
+// Close dropdown when clicking outside
+document.addEventListener('click', (e) => {
+ const section = document.getElementById('lastfm-radio-search-section');
+ if (section && !section.contains(e.target)) {
+ const dd = document.getElementById('lastfm-radio-dropdown');
+ if (dd) dd.style.display = 'none';
+ }
+});
+
+// ────────────────────────────────────────────────────────────────────────────
+
+async function initializeListenBrainzTabs() {
+ try {
+ console.log('🧠 Initializing ListenBrainz tabs...');
+
+ // Fetch all playlist types
+ const [createdForRes, userPlaylistsRes, collaborativeRes] = await Promise.all([
+ fetch('/api/discover/listenbrainz/created-for'),
+ fetch('/api/discover/listenbrainz/user-playlists'),
+ fetch('/api/discover/listenbrainz/collaborative'),
+ ]);
+
+ console.log('📡 API Responses:', {
+ createdFor: createdForRes.status,
+ userPlaylists: userPlaylistsRes.status,
+ collaborative: collaborativeRes.status,
+ });
+
+ const tabs = [
+ { id: 'recommendations', label: '🎁 Recommendations', hasData: false },
+ { id: 'user', label: '📚 Your Playlists', hasData: false },
+ { id: 'collaborative', label: '🤝 Collaborative', hasData: false },
+ ];
+
+ // Track LB username for header display
+ let lbUsername = null;
+
+ // Check which tabs have data
+ if (createdForRes.ok) {
+ const data = await createdForRes.json();
+ console.log('📋 Created For data:', data);
+ if (data.username) lbUsername = data.username;
+ if (data.success && data.playlists && data.playlists.length > 0) {
+ listenbrainzPlaylistsCache['recommendations'] = data.playlists;
+ tabs[0].hasData = true;
+ console.log(`✅ Found ${data.playlists.length} recommendation playlists`);
+ }
+ }
+
+ if (userPlaylistsRes.ok) {
+ const data = await userPlaylistsRes.json();
+ console.log('📚 User Playlists data:', data);
+ if (data.username && !lbUsername) lbUsername = data.username;
+ if (data.success && data.playlists && data.playlists.length > 0) {
+ listenbrainzPlaylistsCache['user'] = data.playlists;
+ tabs[1].hasData = true;
+ console.log(`✅ Found ${data.playlists.length} user playlists`);
+ }
+ }
+
+ if (collaborativeRes.ok) {
+ const data = await collaborativeRes.json();
+ console.log('🤝 Collaborative data:', data);
+ if (data.username && !lbUsername) lbUsername = data.username;
+ if (data.success && data.playlists && data.playlists.length > 0) {
+ listenbrainzPlaylistsCache['collaborative'] = data.playlists;
+ tabs[2].hasData = true;
+ console.log(`✅ Found ${data.playlists.length} collaborative playlists`);
+ }
+ }
+
+ // Build tabs HTML
+ const tabsContainer = document.getElementById('listenbrainz-tabs');
+ console.log('🔧 Building tabs. Available tabs:', tabs.filter(t => t.hasData).map(t => t.label));
+
+ let tabsHtml = '${imgHtml}
+
+ '; // Reuse decade tabs styling
+
+ tabs.forEach(tab => {
+ if (tab.hasData) {
+ const isActive = tab.id === activeListenBrainzTab;
+ tabsHtml += `
+
+ `;
+ }
+ });
+ tabsHtml += '
';
+
+ if (tabs.every(t => !t.hasData)) {
+ console.log('⚠️ No tabs have data');
+ tabsContainer.innerHTML = `
+
+
+
`;
+ return;
+ }
+
+ tabsContainer.innerHTML = tabsHtml;
+
+ // Update section subtitle with username
+ const lbSubtitle = document.getElementById('listenbrainz-section-subtitle');
+ if (lbSubtitle) {
+ lbSubtitle.textContent = lbUsername ? `Playlists for ${lbUsername}` : 'Playlists from ListenBrainz';
+ }
+
+ // Load first available tab
+ const firstTab = tabs.find(t => t.hasData);
+ if (firstTab) {
+ console.log(`🎯 Loading first tab: ${firstTab.label} (${firstTab.id})`);
+ activeListenBrainzTab = firstTab.id;
+ loadListenBrainzTabContent(firstTab.id);
+ } else {
+ console.log('❌ No first tab found');
+ }
+
+ } catch (error) {
+ console.error('Error initializing ListenBrainz tabs:', error);
+ const tabsContainer = document.getElementById('listenbrainz-tabs');
+ if (tabsContainer) {
+ tabsContainer.innerHTML = 'Connect ListenBrainz
+Link your ListenBrainz account to see personalized playlists, recommendations, and collaborative playlists.
+ +Get your token from listenbrainz.org/profile
+Failed to load playlists
+
+ `;
+ });
+ return html;
+}
+
+function loadTracksForPlaylists(playlists) {
+ playlists.forEach((playlist) => {
+ const playlistData = playlist.playlist || playlist;
+ const identifier = playlistData.identifier?.split('/').pop() || '';
+ const playlistId = `discover-lb-playlist-${identifier}`;
+ loadListenBrainzPlaylistTracks(identifier, playlistId);
+ });
+}
+
+function switchListenBrainzSubTab(groupId) {
+ activeListenBrainzSubTab = groupId;
+
+ // Update sub-tab buttons
+ const subTabs = document.querySelectorAll('#lb-subtabs-bar .lb-subtab');
+ subTabs.forEach(tab => {
+ if (tab.dataset.group === groupId) {
+ tab.classList.add('active');
+ } else {
+ tab.classList.remove('active');
+ }
+ });
+
+ // Show/hide sub-tab content panels
+ const panels = document.querySelectorAll('.lb-subtab-panel');
+ panels.forEach(panel => {
+ if (panel.dataset.group === groupId) {
+ panel.style.display = 'block';
+ // Load tracks for playlists in this panel if not already loaded
+ const unloaded = panel.querySelectorAll('.discover-loading');
+ if (unloaded.length > 0) {
+ const groupPlaylists = panel._playlists;
+ if (groupPlaylists) {
+ loadTracksForPlaylists(groupPlaylists);
+ }
+ }
+ } else {
+ panel.style.display = 'none';
+ }
+ });
+}
+
+async function loadListenBrainzTabContent(tabId) {
+ const container = document.getElementById('listenbrainz-tab-content');
+ if (!container) return;
+
+ const playlists = listenbrainzPlaylistsCache[tabId] || [];
+ if (playlists.length === 0) {
+ container.innerHTML = '
+
+
+
+
+
+ ${title}
+ +
+
+
+
+
+
+
+
+
+
+ Loading tracks...
No playlists in this category
';
+ groupOrder.forEach(groupName => {
+ const isActive = groupName === firstGroup;
+ const count = groups[groupName].length;
+ subTabsHtml += `
+
+ `;
+ });
+ subTabsHtml += '
';
+
+ // Build content panels for each group
+ let panelsHtml = '';
+ groupOrder.forEach(groupName => {
+ const isActive = groupName === firstGroup;
+ panelsHtml += ``;
+ panelsHtml += buildListenBrainzPlaylistsHtml(groups[groupName], tabId);
+ panelsHtml += '
';
+ });
+
+ container.innerHTML = subTabsHtml + panelsHtml;
+
+ // Store playlist references on panels for lazy loading
+ groupOrder.forEach(groupName => {
+ const panel = container.querySelector(`.lb-subtab-panel[data-group="${groupName}"]`);
+ if (panel) {
+ panel._playlists = groups[groupName];
+ }
+ });
+
+ // Load tracks only for the active sub-tab
+ loadTracksForPlaylists(groups[firstGroup]);
+ return;
+ }
+
+ // Default: flat list for user/collaborative tabs (or single-group recommendations)
+ const html = buildListenBrainzPlaylistsHtml(playlists, tabId);
+ container.innerHTML = html;
+ loadTracksForPlaylists(playlists);
+}
+
+async function loadListenBrainzPlaylistTracks(identifier, playlistId) {
+ try {
+ const playlistContainer = document.getElementById(`${playlistId}-playlist`);
+ if (!playlistContainer) return;
+
+ // Check cache first
+ if (listenbrainzTracksCache[identifier]) {
+ displayListenBrainzTracks(listenbrainzTracksCache[identifier], playlistId);
+ return;
+ }
+
+ console.log(`🔄 Fetching tracks for playlist: ${identifier}`);
+ const response = await fetch(`/api/discover/listenbrainz/playlist/${identifier}`);
+ console.log(`📡 Response status: ${response.status}`);
+
+ if (!response.ok) {
+ const errorText = await response.text();
+ console.error(`❌ Failed to fetch playlist: ${response.status} - ${errorText}`);
+ throw new Error('Failed to fetch playlist tracks');
+ }
+
+ const data = await response.json();
+ console.log(`📋 Received data:`, data);
+ console.log(`📊 Tracks count: ${data.tracks?.length || 0}`);
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ playlistContainer.innerHTML = 'No tracks available
Failed to load tracks
';
+ tracks.forEach((track, index) => {
+ const coverUrl = track.album_cover_url || placeholderImage;
+ const durationMin = Math.floor(track.duration_ms / 60000);
+ const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+ const duration = track.duration_ms > 0 ? `${durationMin}:${durationSec.toString().padStart(2, '0')}` : '';
+
+ const albumName = track.album_name ? escapeHtml(track.album_name) : '';
+
+ html += `
+
';
+
+ playlistContainer.innerHTML = html;
+}
+
+function _toggleWingItDropdownLB(btn, identifier, title) {
+ const existing = document.querySelector('.wing-it-dropdown.visible');
+ if (existing) { existing.classList.remove('visible'); setTimeout(() => existing.remove(), 150); return; }
+
+ const wrap = btn.closest('.wing-it-wrap');
+ if (!wrap) return;
+
+ const dropdown = document.createElement('div');
+ dropdown.className = 'wing-it-dropdown';
+ dropdown.innerHTML = `
+
+
+ `;
+
+ dropdown.querySelectorAll('.wing-it-dropdown-item').forEach(item => {
+ item.addEventListener('click', () => {
+ dropdown.classList.remove('visible');
+ setTimeout(() => dropdown.remove(), 150);
+ const tracks = listenbrainzTracksCache[identifier];
+ if (!tracks || tracks.length === 0) {
+ showToast('No tracks cached. Try opening the playlist first.', 'error');
+ return;
+ }
+ if (item.dataset.action === 'download') {
+ wingItDownload(tracks, title, 'ListenBrainz', identifier, true);
+ } else {
+ _wingItSync(tracks, title, 'ListenBrainz', identifier);
+ }
+ });
+ });
+
+ const btnRect2 = btn.getBoundingClientRect();
+ if (btnRect2.top < 200) dropdown.classList.add('flip-down');
+
+ wrap.appendChild(dropdown);
+ requestAnimationFrame(() => dropdown.classList.add('visible'));
+
+ setTimeout(() => {
+ const closeHandler = e => {
+ if (!dropdown.contains(e.target) && e.target !== btn) {
+ dropdown.classList.remove('visible');
+ setTimeout(() => dropdown.remove(), 150);
+ document.removeEventListener('click', closeHandler);
+ }
+ };
+ document.addEventListener('click', closeHandler);
+ }, 50);
+}
+
+async function _wingItFromLBCard(identifier, title) {
+ // Legacy — kept for backward compat
+ const tracks = listenbrainzTracksCache[identifier];
+ if (!tracks || tracks.length === 0) {
+ showToast('No tracks cached for this playlist. Try opening the discovery modal first.', 'error');
+ return;
+ }
+ wingItDownload(tracks, title, 'ListenBrainz', identifier);
+}
+
+async function openDownloadModalForListenBrainzPlaylist(identifier, title) {
+ try {
+ const tracks = listenbrainzTracksCache[identifier];
+ if (!tracks || tracks.length === 0) {
+ showToast('No tracks to download', 'error');
+ return;
+ }
+
+ console.log(`🎵 Opening ListenBrainz discovery modal: ${title}`);
+ console.log(`🔍 Looking for existing state with identifier: ${identifier}`);
+ console.log(`📋 All ListenBrainz states:`, Object.keys(listenbrainzPlaylistStates));
+
+ // Check if state already exists from backend hydration (like Beatport does)
+ const existingState = listenbrainzPlaylistStates[identifier];
+ console.log(`🔍 Existing state found:`, existingState ? `Phase: ${existingState.phase}` : 'None');
+
+ if (existingState && existingState.phase !== 'fresh') {
+ // State exists - rehydrate the modal with existing data
+ console.log(`🔄 Rehydrating existing ListenBrainz state (Phase: ${existingState.phase})`);
+
+ // If downloading/download_complete, rehydrate download modal instead
+ if ((existingState.phase === 'downloading' || existingState.phase === 'download_complete') &&
+ existingState.convertedSpotifyPlaylistId && existingState.download_process_id) {
+
+ console.log(`📥 Rehydrating download modal for ListenBrainz playlist: ${title}`);
+
+ // Implement download modal rehydration (like Beatport does)
+ const convertedPlaylistId = existingState.convertedSpotifyPlaylistId;
+
+ try {
+ // Check if modal already exists (user just closed it)
+ if (activeDownloadProcesses[convertedPlaylistId]) {
+ console.log(`✅ Download modal already exists, just showing it`);
+ const process = activeDownloadProcesses[convertedPlaylistId];
+ if (process.modalElement) {
+ process.modalElement.style.display = 'flex';
+ }
+ return;
+ }
+
+ // Create the download modal using the ListenBrainz state
+ console.log(`🆕 Creating new download modal for rehydration`);
+ // Get tracks from the existing state
+ let spotifyTracks = [];
+
+ if (existingState && existingState.discovery_results) {
+ spotifyTracks = existingState.discovery_results
+ .filter(result => result.spotify_data)
+ .map(result => {
+ const track = result.spotify_data;
+ // Ensure artists is an array of strings
+ if (track.artists && Array.isArray(track.artists)) {
+ track.artists = track.artists.map(artist =>
+ typeof artist === 'string' ? artist : (artist.name || artist)
+ );
+ } else if (track.artists && typeof track.artists === 'string') {
+ track.artists = [track.artists];
+ } else {
+ track.artists = ['Unknown Artist'];
+ }
+ return {
+ id: track.id,
+ name: track.name,
+ artists: track.artists,
+ album: track.album || 'Unknown Album',
+ duration_ms: track.duration_ms || 0,
+ external_urls: track.external_urls || {}
+ };
+ });
+ }
+
+ if (spotifyTracks.length > 0) {
+ await openDownloadMissingModalForYouTube(
+ convertedPlaylistId,
+ title,
+ spotifyTracks
+ );
+
+ // Set the modal to running state with the correct batch ID
+ const process = activeDownloadProcesses[convertedPlaylistId];
+ if (process) {
+ process.status = existingState.phase === 'download_complete' ? 'complete' : 'running';
+ process.batchId = existingState.download_process_id;
+
+ // Update UI to running state
+ const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
+ const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
+ if (beginBtn) beginBtn.style.display = 'none';
+ if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+ // Start polling for this process
+ startModalDownloadPolling(convertedPlaylistId);
+
+ // Add to discover download sidebar if this has discoverMetadata
+ if (process.discoverMetadata) {
+ const playlistName = title;
+ const imageUrl = process.discoverMetadata.imageUrl;
+ const type = process.discoverMetadata.type || 'album';
+ addDiscoverDownload(convertedPlaylistId, playlistName, type, imageUrl);
+ console.log(`📥 [REHYDRATION] Added ListenBrainz download to sidebar: ${playlistName}`);
+ }
+
+ // Show modal since user clicked the download button (different from background rehydration)
+ if (process.modalElement) {
+ process.modalElement.style.display = 'flex';
+ }
+ console.log(`✅ Rehydrated download modal for ListenBrainz playlist: ${title}`);
+ }
+ } else {
+ console.warn(`⚠️ No Spotify tracks found for ListenBrainz download modal: ${title}`);
+ }
+ } catch (error) {
+ console.warn(`⚠️ Error setting up download process for ListenBrainz playlist "${title}":`, error.message);
+ }
+
+ return;
+ }
+
+ // Open discovery modal with existing state
+ openYouTubeDiscoveryModal(identifier);
+
+ // If still discovering, resume polling
+ if (existingState.phase === 'discovering') {
+ console.log(`🔄 Resuming discovery polling for: ${title}`);
+ startListenBrainzDiscoveryPolling(identifier);
+ }
+
+ return;
+ }
+
+ // No existing state - create fresh state and start discovery
+ console.log(`🆕 Creating fresh ListenBrainz state for: ${title}`);
+
+ // Create YouTube-style state entry for this ListenBrainz playlist (like Beatport does)
+ const listenbrainzState = {
+ phase: 'fresh',
+ playlist: {
+ name: title,
+ tracks: tracks.map(track => ({
+ track_name: track.track_name,
+ artist_name: track.artist_name,
+ album_name: track.album_name,
+ duration_ms: track.duration_ms || 0,
+ mbid: track.mbid,
+ release_mbid: track.release_mbid,
+ album_cover_url: track.album_cover_url
+ })),
+ description: `${tracks.length} tracks from ${title}`,
+ source: 'listenbrainz'
+ },
+ is_listenbrainz_playlist: true,
+ playlist_mbid: identifier, // Link to ListenBrainz playlist
+ // Initialize discovery state properties (both naming conventions for modal compatibility)
+ discovery_results: [],
+ discoveryResults: [],
+ discovery_progress: 0,
+ discoveryProgress: 0,
+ spotify_matches: 0,
+ spotifyMatches: 0,
+ spotify_total: tracks.length,
+ spotifyTotal: tracks.length
+ };
+
+ // Store in ListenBrainz playlist states
+ listenbrainzPlaylistStates[identifier] = listenbrainzState;
+
+ // Start discovery automatically (like Beatport and Tidal do)
+ try {
+ console.log(`🔍 Starting ListenBrainz discovery for: ${title}`);
+
+ // Call the discovery start endpoint with playlist data
+ const response = await fetch(`/api/listenbrainz/discovery/start/${identifier}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ playlist: listenbrainzState.playlist
+ })
+ });
+
+ const result = await response.json();
+ if (result.success) {
+ // Update state to discovering
+ listenbrainzPlaylistStates[identifier].phase = 'discovering';
+
+ // Start polling for progress
+ startListenBrainzDiscoveryPolling(identifier);
+
+ console.log(`✅ Started ListenBrainz discovery for: ${title}`);
+ } else {
+ console.error('❌ Error starting ListenBrainz discovery:', result.error);
+ showToast(`Error starting discovery: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('❌ Error starting ListenBrainz discovery:', error);
+ showToast(`Error starting discovery: ${error.message}`, 'error');
+ }
+
+ // Open the existing YouTube discovery modal infrastructure
+ openYouTubeDiscoveryModal(identifier);
+
+ console.log(`✅ ListenBrainz discovery modal opened for ${title} with ${tracks.length} tracks`);
+
+ } catch (error) {
+ console.error('Error opening discovery modal for ListenBrainz playlist:', error);
+ showToast('Failed to open discovery modal', 'error');
+ }
+}
+
+async function openListenBrainzPlaylist(playlistMbid, playlistName) {
+ try {
+ showLoadingOverlay(`Loading ${playlistName}...`);
+
+ const response = await fetch(`/api/discover/listenbrainz/playlist/${playlistMbid}`);
+ if (!response.ok) {
+ throw new Error('Failed to fetch playlist');
+ }
+
+ const data = await response.json();
+ if (!data.success || !data.playlist) {
+ showToast('Failed to load playlist', 'error');
+ hideLoadingOverlay();
+ return;
+ }
+
+ const playlist = data.playlist;
+ const tracks = playlist.tracks || [];
+
+ if (tracks.length === 0) {
+ showToast('This playlist is empty', 'info');
+ hideLoadingOverlay();
+ return;
+ }
+
+ // Convert to Spotify-like format for compatibility with download modal
+ const spotifyTracks = tracks.map(track => ({
+ id: track.recording_mbid || `listenbrainz_${track.title}_${track.creator}`.replace(/[^a-z0-9]/gi, '_'), // Generate ID if missing
+ name: track.title || 'Unknown',
+ artists: [{ name: cleanArtistName(track.creator || 'Unknown') }], // Proper Spotify format
+ album: {
+ name: track.album || 'Unknown Album',
+ images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+ },
+ duration_ms: track.duration_ms || 0,
+ listenbrainz_metadata: track.additional_metadata
+ }));
+
+ const virtualPlaylistId = `listenbrainz_${playlistMbid}`;
+ await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+ hideLoadingOverlay();
+
+ } catch (error) {
+ console.error(`Error opening ListenBrainz playlist:`, error);
+ showToast(`Failed to load playlist`, 'error');
+ hideLoadingOverlay();
+ }
+}
+
+async function refreshListenBrainzPlaylists() {
+ const button = document.getElementById('listenbrainz-refresh-btn');
+ if (!button) return;
+
+ try {
+ // Show loading state on button
+ const originalContent = button.innerHTML;
+ button.disabled = true;
+ button.innerHTML = '';
+
+ console.log('🔄 Refreshing ListenBrainz playlists...');
+ showToast('Refreshing ListenBrainz playlists...', 'info');
+
+ const response = await fetch('/api/discover/listenbrainz/refresh', {
+ method: 'POST'
+ });
+
+ if (!response.ok) {
+ throw new Error(`Failed to refresh: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+
+ if (data.success) {
+ const summary = data.summary || {};
+ let message = 'ListenBrainz playlists refreshed!';
+
+ // Build summary message
+ const updates = [];
+ for (const [type, stats] of Object.entries(summary)) {
+ const total = (stats.new || 0) + (stats.updated || 0);
+ if (total > 0) {
+ updates.push(`${total} ${type}`);
+ }
+ }
+
+ if (updates.length > 0) {
+ message += ` Updated: ${updates.join(', ')}`;
+ } else {
+ message = 'All playlists are up to date';
+ }
+
+ console.log('✅ Refresh complete:', data.summary);
+ showToast(message, 'success');
+
+ // Reload the tabs to show updated data
+ await initializeListenBrainzTabs();
+
+ } else {
+ throw new Error(data.error || 'Unknown error');
+ }
+
+ // Restore button
+ button.disabled = false;
+ button.innerHTML = originalContent;
+
+ } catch (error) {
+ console.error('Error refreshing ListenBrainz playlists:', error);
+ showToast(`Failed to refresh: ${error.message}`, 'error');
+
+ // Restore button
+ button.disabled = false;
+ button.innerHTML = '';
+ }
+}
+
+// ===============================
+// SEASONAL DISCOVERY
+// ===============================
+
+async function loadSeasonalContent() {
+ try {
+ const response = await fetch('/api/discover/seasonal/current');
+ if (!response.ok) {
+ console.error('Failed to fetch seasonal content');
+ return;
+ }
+
+ const data = await response.json();
+
+ // If no active season, hide seasonal sections
+ if (!data.success || !data.season) {
+ hideSeasonalSections();
+ return;
+ }
+
+ currentSeasonKey = data.season;
+
+ // Load seasonal albums
+ await loadSeasonalAlbums(data);
+
+ // Load seasonal playlist if available
+ if (data.playlist_available) {
+ await loadSeasonalPlaylist(data);
+ }
+
+ } catch (error) {
+ console.error('Error loading seasonal content:', error);
+ hideSeasonalSections();
+ }
+}
+
+async function loadSeasonalAlbums(seasonData) {
+ try {
+ const carousel = document.getElementById('seasonal-albums-carousel');
+ if (!carousel) return;
+
+ // Show seasonal section
+ const seasonalSection = document.getElementById('seasonal-albums-section');
+ if (seasonalSection) {
+ seasonalSection.style.display = 'block';
+ }
+
+ // Update header
+ const seasonalTitle = document.getElementById('seasonal-albums-title');
+ const seasonalSubtitle = document.getElementById('seasonal-albums-subtitle');
+
+ if (seasonalTitle) {
+ seasonalTitle.textContent = `${seasonData.icon} ${seasonData.name}`;
+ }
+ if (seasonalSubtitle) {
+ seasonalSubtitle.textContent = seasonData.description;
+ }
+
+ // Store albums for download functionality
+ discoverSeasonalAlbums = seasonData.albums || [];
+
+ if (discoverSeasonalAlbums.length === 0) {
+ carousel.innerHTML = '
+
+ `;
+ });
+ html += '${index + 1}
+
+
+
+
+
+ ${escapeHtml(track.track_name || 'Unknown Track')}
+ ${escapeHtml(cleanArtistName(track.artist_name) || 'Unknown Artist')}
+ ${albumName}
+ ${duration}
+ No seasonal albums found
+
+ `;
+ });
+
+ carousel.innerHTML = html;
+
+ } catch (error) {
+ console.error('Error loading seasonal albums:', error);
+ }
+}
+
+async function loadSeasonalPlaylist(seasonData) {
+ try {
+ const playlistContainer = document.getElementById('seasonal-playlist');
+ if (!playlistContainer) return;
+
+ // Show seasonal playlist section
+ const seasonalPlaylistSection = document.getElementById('seasonal-playlist-section');
+ if (seasonalPlaylistSection) {
+ seasonalPlaylistSection.style.display = 'block';
+ }
+
+ // Update header
+ const playlistTitle = document.getElementById('seasonal-playlist-title');
+ const playlistSubtitle = document.getElementById('seasonal-playlist-subtitle');
+
+ if (playlistTitle) {
+ playlistTitle.textContent = `${seasonData.icon} ${seasonData.name} Mix`;
+ }
+ if (playlistSubtitle) {
+ playlistSubtitle.textContent = `Curated playlist for ${seasonData.name.toLowerCase()}`;
+ }
+
+ playlistContainer.innerHTML = '
+
+
+
+
+ ${album.album_name}
+${album.artist_name}
+ ${album.release_date ? `` : ''} +Loading playlist...
No tracks available yet
';
+ data.tracks.forEach((track, index) => {
+ const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
+ const durationMin = Math.floor(track.duration_ms / 60000);
+ const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+ const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+ html += `
+
';
+
+ playlistContainer.innerHTML = html;
+
+ } catch (error) {
+ console.error('Error loading seasonal playlist:', error);
+ const playlistContainer = document.getElementById('seasonal-playlist');
+ if (playlistContainer) {
+ playlistContainer.innerHTML = '
+
+ `;
+ });
+ html += '${index + 1}
+
+
+
+
+
+ ${track.track_name}
+ ${track.artist_name}
+ ${track.album_name}
+ ${duration}
+ Failed to load playlist
+
+ `;
+ });
+
+ container.innerHTML = html;
+ container.closest('.discover-section').style.display = 'block';
+
+ } catch (error) {
+ console.error('Error loading daily mixes:', error);
+ }
+}
+
+function renderCompactPlaylist(container, tracks) {
+ let html = '
+
+
+
+
+
+ ${mix.name}
+${mix.description}
+${mix.track_count} tracks
+';
+
+ tracks.forEach((track, index) => {
+ const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
+ const durationMin = Math.floor(track.duration_ms / 60000);
+ const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+ const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+ const artistEsc = (track.artist_name || '').replace(/'/g, "\\'").replace(/"/g, '"');
+
+ html += `
+
';
+ container.innerHTML = html;
+}
+
+async function blockDiscoveryArtist(artistName) {
+ if (!confirm(`Block "${artistName}" from all discovery playlists?`)) return;
+ try {
+ const res = await fetch('/api/discover/artist-blacklist', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_name: artistName })
+ });
+ const data = await res.json();
+ if (data.success) {
+ showToast(`Blocked ${artistName} from discovery`, 'success');
+ // Refresh all discovery sections to remove the artist
+ loadPersonalizedHiddenGems();
+ loadDiscoveryShuffle();
+ loadPersonalizedDailyMixes();
+ } else {
+ showToast(data.error || 'Failed to block artist', 'error');
+ }
+ } catch (e) {
+ showToast('Error blocking artist', 'error');
+ }
+}
+
+async function openDiscoveryBlacklistModal() {
+ if (document.getElementById('discovery-blacklist-modal-overlay')) return;
+
+ const overlay = document.createElement('div');
+ overlay.id = 'discovery-blacklist-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ overlay.innerHTML = `
+
+
+ `;
+ });
+
+ html += '${index + 1}
+
+
+
+
+
+ ${track.track_name}
+ ${track.artist_name}
+ ${track.album_name}
+ ${duration}
+
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ // Wire up search
+ let searchTimer = null;
+ const input = document.getElementById('dbl-search-input');
+ input.addEventListener('input', () => {
+ clearTimeout(searchTimer);
+ const q = input.value.trim();
+ if (q.length < 2) { document.getElementById('dbl-search-results').style.display = 'none'; return; }
+ searchTimer = setTimeout(() => _dblSearch(q), 300);
+ });
+
+ _dblLoadList();
+}
+
+async function _dblSearch(query) {
+ const resultsEl = document.getElementById('dbl-search-results');
+ if (!resultsEl) return;
+ try {
+ // Use existing enhanced search to find artists
+ const res = await fetch('/api/enhanced-search', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ query, limit: 8 })
+ });
+ const data = await res.json();
+ const artists = data.spotify_artists || data.artists || [];
+ if (artists.length === 0) {
+ resultsEl.innerHTML = '
+
+ Blocked Artists
+These artists won't appear in any discovery playlist across all sources
+ +
+
+
+
+
+
+
+ Loading...
+ No artists found
';
+ resultsEl.style.display = 'block';
+ return;
+ }
+ resultsEl.innerHTML = artists.map(a => {
+ const name = _escToast(a.name || '');
+ const img = a.image_url ? `🎤
';
+ return `
+ ${img}
+ ${name}
+ Block
+
`;
+ }).join('');
+ resultsEl.style.display = 'block';
+ } catch (e) {
+ resultsEl.style.display = 'none';
+ }
+}
+
+async function _dblBlockFromSearch(artistName) {
+ try {
+ const res = await fetch('/api/discover/artist-blacklist', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_name: artistName })
+ });
+ const data = await res.json();
+ if (data.success) {
+ showToast(`Blocked ${artistName} from discovery`, 'success');
+ document.getElementById('dbl-search-results').style.display = 'none';
+ const input = document.getElementById('dbl-search-input');
+ if (input) input.value = '';
+ _dblLoadList();
+ }
+ } catch (e) {
+ showToast('Error blocking artist', 'error');
+ }
+}
+
+async function _dblLoadList() {
+ const container = document.getElementById('dbl-list');
+ if (!container) return;
+ try {
+ const res = await fetch('/api/discover/artist-blacklist');
+ const data = await res.json();
+ if (!data.success || !data.entries || data.entries.length === 0) {
+ container.innerHTML = 'No blocked artists yet — search above to block one
';
+ return;
+ }
+ container.innerHTML = data.entries.map(e => `
+
+ ${_escToast(e.artist_name)}
+ ${e.created_at ? new Date(e.created_at).toLocaleDateString() : ''}
+
+
+ `).join('');
+ } catch (e) {
+ container.innerHTML = 'Failed to load
';
+ }
+}
+
+async function unblockDiscoveryArtist(id, name) {
+ try {
+ const res = await fetch(`/api/discover/artist-blacklist/${id}`, { method: 'DELETE' });
+ const data = await res.json();
+ if (data.success) {
+ showToast(`Unblocked ${name}`, 'success');
+ _dblLoadList();
+ }
+ } catch (e) {
+ showToast('Error unblocking artist', 'error');
+ }
+}
+
+// Backwards compat — called during page init but now a no-op (modal handles it)
+// ── Your Artists (Liked Artists Pool) ──
+
+async function loadYourArtists() {
+ const section = document.getElementById('your-artists-section');
+ const carousel = document.getElementById('your-artists-carousel');
+ const subtitle = document.getElementById('your-artists-subtitle');
+ if (!section || !carousel) return;
+
+ try {
+ const resp = await fetch('/api/discover/your-artists');
+ if (!resp.ok) return;
+ const data = await resp.json();
+
+ if (!data.artists || data.artists.length === 0) {
+ if (data.stale) {
+ // First load — show section with loading state, poll until ready
+ section.style.display = '';
+ if (subtitle) subtitle.textContent = 'Discovering your artists across connected services...';
+ carousel.innerHTML = `
+
+
+ Fetching and matching artists from your services...
+
+ `;
+ _pollYourArtists();
+ } else {
+ section.style.display = 'none';
+ }
+ return;
+ }
+
+ // Show section
+ section.style.display = '';
+
+ // Update subtitle with source info
+ const sources = new Set();
+ data.artists.forEach(a => (a.source_services || []).forEach(s => sources.add(s)));
+ const sourceNames = { spotify: 'Spotify', lastfm: 'Last.fm', tidal: 'Tidal', deezer: 'Deezer' };
+ const sourceList = [...sources].map(s => sourceNames[s] || s).join(' and ');
+ if (subtitle) subtitle.textContent = `Artists you follow on ${sourceList || 'your music services'}`;
+
+ if (data.stale) {
+ if (subtitle) subtitle.textContent += ' (updating...)';
+ _pollYourArtists();
+ }
+
+ // Store for modal access and render carousel cards
+ window._yaArtists = {};
+ window._yaActiveSource = data.active_source || 'spotify';
+ data.artists.forEach(a => { window._yaArtists[a.id] = a; });
+ carousel.innerHTML = data.artists.map(a => _renderYourArtistCard(a)).join('');
+
+ } catch (err) {
+ console.error('Error loading Your Artists:', err);
+ }
+}
+
+function _pollYourArtists() {
+ // Poll every 5s until artists appear, then stop
+ if (window._yaPoller) clearInterval(window._yaPoller);
+ let attempts = 0;
+ window._yaPoller = setInterval(async () => {
+ attempts++;
+ if (attempts > 60) { clearInterval(window._yaPoller); window._yaPoller = null; return; }
+ try {
+ const resp = await fetch('/api/discover/your-artists');
+ if (!resp.ok) return;
+ const data = await resp.json();
+ if (data.artists && data.artists.length > 0) {
+ clearInterval(window._yaPoller);
+ window._yaPoller = null;
+ loadYourArtists(); // Re-render with real data
+ }
+ } catch (e) { }
+ }, 5000);
+}
+
+function _renderYourArtistCard(artist) {
+ const _esc = (s) => escapeHtml(s || '');
+ const img = artist.image_url || '';
+
+ // Build metadata source badges (same pattern as library page)
+ const badges = [];
+ if (artist.spotify_artist_id) badges.push({ logo: SPOTIFY_LOGO_URL, fb: 'SP', title: 'Spotify' });
+ if (artist.itunes_artist_id) badges.push({ logo: ITUNES_LOGO_URL, fb: 'IT', title: 'Apple Music' });
+ if (artist.deezer_artist_id) badges.push({ logo: DEEZER_LOGO_URL, fb: 'Dz', title: 'Deezer' });
+ if (artist.discogs_artist_id) badges.push({ logo: DISCOGS_LOGO_URL, fb: 'DC', title: 'Discogs' });
+ const badgeHTML = badges.map(b =>
+ `${b.logo ? `
` : `${b.fb}`}
`
+ ).join('');
+
+ // Origin dots (which services the artist came from)
+ const sources = artist.source_services || [];
+ const sourceColors = { spotify: '#1DB954', lastfm: '#D51007', tidal: '#00FFFF', deezer: '#A238FF' };
+ const originDots = sources.map(s =>
+ ``
+ ).join('');
+
+ const watchlistClass = artist.on_watchlist ? 'active' : '';
+ const hasId = artist.active_source_id && artist.active_source_id !== '';
+
+ // Navigate to artist page (name click)
+ const navAction = hasId
+ ? `event.stopPropagation(); navigateToPage('artists'); setTimeout(() => selectArtistForDetail({id:'${escapeForInlineJs(artist.active_source_id)}', name:'${escapeForInlineJs(artist.artist_name)}', image_url:'${escapeForInlineJs(img)}'}), 200)`
+ : '';
+
+ // Open info modal (card body click) — pass pool ID so we can look up all data
+ const infoAction = hasId
+ ? `openYourArtistInfoModal(${artist.id})`
+ : '';
+
+ // Deezer fallback for images
+ const deezerFb = artist.deezer_artist_id ? `onerror="if(!this.dataset.tried){this.dataset.tried='1';this.src='https://api.deezer.com/artist/${artist.deezer_artist_id}/image?size=big'}else{this.style.display='none';this.nextElementSibling.style.display='flex'}"` : `onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"`;
+
+ return `
+
+
+ `;
+}
+
+async function openYourArtistInfoModal(poolId) {
+ const pool = (window._yaArtists || {})[poolId];
+ if (!pool) return;
+
+ const artistId = pool.active_source_id;
+ const artistName = pool.artist_name;
+ const imageUrl = pool.image_url || '';
+
+ const existing = document.getElementById('ya-info-modal-overlay');
+ if (existing) existing.remove();
+
+ const overlay = document.createElement('div');
+ overlay.id = 'ya-info-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.style.zIndex = '10001';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ // Build matched source badges from pool data
+ const _mb = (logo, fb, title) => `
+ ${img ? `` : ''}
+
+
+ ♫
+ ${badgeHTML}
+
+
+
+
+
+ ${originDots}
+ ${_esc(artist.artist_name)}
+ ${logo ? `
` : `${fb}`}
`;
+ const matchBadges = [];
+ if (pool.spotify_artist_id) matchBadges.push(_mb(SPOTIFY_LOGO_URL, 'SP', 'Matched on Spotify'));
+ if (pool.itunes_artist_id) matchBadges.push(_mb(ITUNES_LOGO_URL, 'IT', 'Matched on Apple Music'));
+ if (pool.deezer_artist_id) matchBadges.push(_mb(DEEZER_LOGO_URL, 'Dz', 'Matched on Deezer'));
+ if (pool.discogs_artist_id) matchBadges.push(_mb(DISCOGS_LOGO_URL, 'DC', 'Matched on Discogs'));
+
+ // Origin info
+ const sources = pool.source_services || [];
+ const sourceNames = { spotify: 'Spotify', lastfm: 'Last.fm', tidal: 'Tidal', deezer: 'Deezer' };
+ const originText = sources.map(s => sourceNames[s] || s).join(', ');
+
+ overlay.innerHTML = `
+
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ // Fetch enrichment data (with timeout)
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 8000);
+ const lookupId = artistId || encodeURIComponent(artistName);
+ const resp = await fetch(`/api/discover/your-artists/info/${lookupId}?name=${encodeURIComponent(artistName)}`, { signal: controller.signal });
+ clearTimeout(timeout);
+ const artist = resp.ok ? await resp.json() : {};
+ const bodyEl = document.getElementById('ya-info-body');
+ const footerEl = document.getElementById('ya-info-footer');
+
+ const genres = artist.genres || [];
+ const bio = artist.summary || '';
+ const listeners = artist.lastfm_listeners || artist.followers || 0;
+ const playcount = artist.lastfm_playcount || 0;
+ const popularity = artist.popularity || 0;
+
+ let bodyHTML = '';
+
+ // Stats
+ if (listeners || playcount || popularity) {
+ bodyHTML += `
+
+
+
+
+
+ ${imageUrl ? `})
` : '
+ ♫
'}
+
+
+ ${escapeHtml(artistName)}
+${matchBadges.join('')}
+ ${originText ? `Followed on ${escapeHtml(originText)}
` : ''}
+
+
+
+
+ Loading artist info...
+ ${listeners ? `
`;
+ }
+
+ // Genres
+ if (genres.length > 0) {
+ bodyHTML += `${Number(listeners).toLocaleString()}listeners
` : ''}
+ ${playcount ? `${Number(playcount).toLocaleString()}plays
` : ''}
+ ${popularity ? `${popularity}popularity
` : ''}
+
+
`;
+ }
+
+ // Bio
+ if (bio) {
+ const cleanBio = bio.replace(/${genres.map(g => `${escapeHtml(g)}`).join('')}
+
+
`;
+ }
+ }
+
+ // Related artists from map connections
+ const related = pool._related || [];
+ if (related.length > 0) {
+ const relLabel = pool.on_watchlist ? 'Similar Artists' : 'Connected To';
+ bodyHTML += `About
+ ${escapeHtml(cleanBio.length > 600 ? cleanBio.substring(0, 600) + '...' : cleanBio)}
+
+
`;
+ }
+
+ if (!bodyHTML) bodyHTML = '${relLabel}
+
+ ${related.slice(0, 12).map(r => {
+ const rImg = r.image_url || '';
+ const rType = r.type === 'watchlist';
+ return `
+
+
`;
+ }).join('')}
+ ${related.length > 12 ? `` : ''}
+
+ ${rImg ? `})
` : '♫'}
+
+
+ No additional info available
';
+ if (bodyEl) bodyEl.innerHTML = bodyHTML;
+
+ // Footer
+ if (footerEl) {
+ const watchBtn = pool.on_watchlist
+ ? ``
+ : ``;
+ footerEl.innerHTML = `
+ ${watchBtn}
+
+
+ `;
+ }
+ } catch (err) {
+ console.error('[Artist Info] Error loading artist info:', err);
+ const bodyEl = document.getElementById('ya-info-body');
+ if (bodyEl) bodyEl.innerHTML = `Could not load artist info
`;
+ }
+}
+
+async function toggleYourArtistWatchlist(poolId, artistName, sourceId, source, btnEl) {
+ const isWatched = btnEl && btnEl.classList.contains('active');
+ try {
+ if (isWatched) {
+ const resp = await fetch('/api/watchlist/remove', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: sourceId })
+ });
+ if (resp.ok) {
+ if (btnEl) {
+ btnEl.classList.remove('active');
+ const svg = btnEl.querySelector('svg');
+ if (svg) svg.setAttribute('fill', 'none');
+ }
+ showToast(`Removed ${artistName} from watchlist`, 'info');
+ // Sync card eye icon
+ _syncYaCardWatchlist(poolId, false);
+ }
+ } else {
+ const resp = await fetch('/api/watchlist/add', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: sourceId, artist_name: artistName, source: source })
+ });
+ if (resp.ok) {
+ if (btnEl) {
+ btnEl.classList.add('active');
+ const svg = btnEl.querySelector('svg');
+ if (svg) svg.setAttribute('fill', 'currentColor');
+ }
+ showToast(`Added ${artistName} to watchlist`, 'success');
+ _syncYaCardWatchlist(poolId, true);
+ }
+ }
+ } catch (err) {
+ showToast('Failed to update watchlist', 'error');
+ }
+}
+
+function _syncYaCardWatchlist(poolId, watched) {
+ // Sync the card's eye icon with watchlist state (covers modal → card sync)
+ document.querySelectorAll('.ya-card .ya-watchlist-btn').forEach(btn => {
+ const card = btn.closest('.ya-card');
+ if (!card) return;
+ // Match by onclick containing the poolId
+ const onclick = btn.getAttribute('onclick') || '';
+ if (onclick.includes(`(${poolId},`)) {
+ if (watched) {
+ btn.classList.add('active');
+ const svg = btn.querySelector('svg');
+ if (svg) svg.setAttribute('fill', 'currentColor');
+ } else {
+ btn.classList.remove('active');
+ const svg = btn.querySelector('svg');
+ if (svg) svg.setAttribute('fill', 'none');
+ }
+ }
+ });
+ // Update pool data
+ if (window._yaArtists && window._yaArtists[poolId]) {
+ window._yaArtists[poolId].on_watchlist = watched ? 1 : 0;
+ }
+}
+
+async function refreshYourArtists() {
+ const btn = document.getElementById('your-artists-refresh-btn');
+ if (btn) { btn.disabled = true; btn.style.opacity = '0.5'; }
+ const subtitle = document.getElementById('your-artists-subtitle');
+ if (subtitle) subtitle.textContent = 'Refreshing from your services...';
+
+ try {
+ await fetch('/api/discover/your-artists/refresh?clear=true', { method: 'POST' });
+ // Poll until done
+ let attempts = 0;
+ const poll = setInterval(async () => {
+ attempts++;
+ if (attempts > 60) { clearInterval(poll); return; } // 5 min max
+ try {
+ const resp = await fetch('/api/discover/your-artists');
+ const data = await resp.json();
+ if (!data.stale && data.artists && data.artists.length > 0) {
+ clearInterval(poll);
+ loadYourArtists();
+ if (btn) { btn.disabled = false; btn.style.opacity = ''; }
+ showToast(`Found ${data.total} artists from your services`, 'success');
+ }
+ } catch (e) { }
+ }, 5000);
+ } catch (err) {
+ showToast('Failed to start refresh', 'error');
+ if (btn) { btn.disabled = false; btn.style.opacity = ''; }
+ }
+}
+
+async function openYourArtistsSourcesModal() {
+ const existing = document.getElementById('ya-sources-modal-overlay');
+ if (existing) existing.remove();
+
+ // Fetch current config + connected services
+ let enabled = ['spotify', 'tidal', 'lastfm', 'deezer'];
+ let connected = [];
+ try {
+ const resp = await fetch('/api/discover/your-artists/sources');
+ if (resp.ok) {
+ const data = await resp.json();
+ if (data.enabled) enabled = data.enabled;
+ if (data.connected) connected = data.connected;
+ }
+ } catch (e) { }
+
+ const sourceInfo = [
+ { id: 'spotify', label: 'Spotify', icon: '🎵' },
+ { id: 'tidal', label: 'Tidal', icon: '🌊' },
+ { id: 'lastfm', label: 'Last.fm', icon: '📻' },
+ { id: 'deezer', label: 'Deezer', icon: '🎶' },
+ ];
+
+ const state = {};
+ sourceInfo.forEach(s => { state[s.id] = enabled.includes(s.id); });
+
+ const overlay = document.createElement('div');
+ overlay.id = 'ya-sources-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ const rows = sourceInfo.map(s => {
+ const isConnected = connected.includes(s.id);
+ const isOn = state[s.id];
+ return `
+
+
`;
+ }).join('');
+
+ overlay.innerHTML = `
+
+ ${s.icon}
+
+
+
+
+ ${s.label}
+ ${isConnected ? 'Connected' : 'Not connected'}
+
+
+ `;
+ document.body.appendChild(overlay);
+ window._yaSourcesState = state;
+}
+
+function _yaSourceRowClick(id) {
+ // Don't allow toggling disconnected services
+ const row = document.querySelector(`.ya-source-row[data-source="${id}"]`);
+ if (row && row.classList.contains('disconnected')) return;
+ _yaSourceToggle(id);
+}
+
+function _yaSourceToggle(id) {
+ // Don't allow toggling disconnected services
+ const row = document.querySelector(`.ya-source-row[data-source="${id}"]`);
+ if (row && row.classList.contains('disconnected')) return;
+ window._yaSourcesState[id] = !window._yaSourcesState[id];
+ const btn = document.getElementById(`ya-toggle-${id}`);
+ if (btn) btn.classList.toggle('on', window._yaSourcesState[id]);
+}
+
+async function _yaSourcesSave() {
+ const enabledArr = Object.entries(window._yaSourcesState)
+ .filter(([, v]) => v).map(([k]) => k);
+ if (enabledArr.length === 0) {
+ showToast('Select at least one source', 'error');
+ return;
+ }
+ const enabled = enabledArr.join(',');
+ try {
+ const resp = await fetch('/api/settings', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ discover: { your_artists_sources: enabled } })
+ });
+ if (resp.ok) {
+ document.getElementById('ya-sources-modal-overlay')?.remove();
+ showToast('Sources saved — refresh to apply', 'success');
+ // Update subtitle immediately
+ const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', lastfm: 'Last.fm', deezer: 'Deezer' };
+ const subtitle = document.getElementById('your-artists-subtitle');
+ if (subtitle) {
+ const names = enabledArr.map(s => sourceNames[s] || s).join(' and ');
+ subtitle.textContent = `Artists you follow on ${names}`;
+ }
+ } else {
+ showToast('Failed to save sources', 'error');
+ }
+ } catch (e) {
+ showToast('Failed to save sources', 'error');
+ }
+}
+
+async function openYourArtistsModal() {
+ const existing = document.getElementById('your-artists-modal-overlay');
+ if (existing) existing.remove();
+
+ const overlay = document.createElement('div');
+ overlay.id = 'your-artists-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ overlay.innerHTML = `
+ Your Artists Sources
+Choose which connected services contribute artists to this section.
+${rows}
+
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ // Search debounce
+ let searchTimer = null;
+ overlay.querySelector('#ya-modal-search').addEventListener('input', () => {
+ clearTimeout(searchTimer);
+ searchTimer = setTimeout(() => _yaLoadModal(), 300);
+ });
+
+ window._yaModalState = { page: 1, source: '', sort: 'name' };
+ _yaLoadModal();
+}
+
+function _yaFilterSource(source) {
+ window._yaModalState.source = source;
+ window._yaModalState.page = 1;
+ document.querySelectorAll('.ya-filter-btn').forEach(b => b.classList.toggle('active', b.dataset.source === source));
+ _yaLoadModal();
+}
+
+async function _yaLoadModal() {
+ const body = document.getElementById('ya-modal-body');
+ const footer = document.getElementById('ya-modal-footer');
+ const subtitle = document.getElementById('ya-modal-subtitle');
+ if (!body) return;
+
+ const state = window._yaModalState || { page: 1, source: '', sort: 'name' };
+ const search = document.getElementById('ya-modal-search')?.value || '';
+ const sort = document.getElementById('ya-modal-sort')?.value || 'name';
+ state.sort = sort;
+
+ const params = new URLSearchParams({ page: state.page, per_page: 60, sort: state.sort });
+ if (state.source) params.set('source', state.source);
+ if (search) params.set('search', search);
+
+ try {
+ const resp = await fetch(`/api/discover/your-artists/all?${params}`);
+ const data = await resp.json();
+
+ if (subtitle) subtitle.textContent = `${data.total} artists matched`;
+
+ if (!data.artists || data.artists.length === 0) {
+ body.innerHTML = '
+
+
+
+
+
+ Your Artists
+Loading...
+
+
+
+
+ Loading...
No artists found
';
+ if (footer) footer.innerHTML = '';
+ return;
+ }
+
+ // Store for info modal access
+ if (!window._yaArtists) window._yaArtists = {};
+ data.artists.forEach(a => { window._yaArtists[a.id] = a; });
+ body.innerHTML = `${data.artists.map(a => _renderYourArtistCard(a)).join('')}
`;
+
+ // Pagination
+ const totalPages = Math.ceil(data.total / 60);
+ if (footer && totalPages > 1) {
+ footer.innerHTML = `
+
+
+ Page ${state.page} of ${totalPages}
+
+
+ `;
+ } else if (footer) {
+ footer.innerHTML = '';
+ }
+ } catch (err) {
+ body.innerHTML = 'Failed to load
';
+ }
+}
+
+function loadDiscoveryBlacklist() { }
+
+// ── Artist Map — Circle-packed staged canvas visualization ──
+const _artMap = {
+ placed: [],
+ edges: [],
+ images: {},
+ canvas: null, ctx: null,
+ offscreen: null, offCtx: null, // offscreen buffer for fast pan/zoom
+ width: 0, height: 0,
+ offsetX: 0, offsetY: 0, zoom: 0.15,
+ hoveredNode: null, animFrame: null,
+ dirty: true, // true = need to rebuild offscreen buffer
+ WATCHLIST_R: 320,
+ BUFFER: 8,
+};
+
+async function openArtistMap() {
+ const container = document.getElementById('artist-map-container');
+ if (!container) return;
+
+ // Hide discover sections, show map
+ document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
+ el._prevDisplay = el.style.display;
+ el.style.display = 'none';
+ });
+ container.style.display = 'flex';
+
+ const canvas = document.getElementById('artist-map-canvas');
+ _artMap.canvas = canvas;
+ _artMap.ctx = canvas.getContext('2d');
+ _artMap.width = container.clientWidth;
+ _artMap.height = container.clientHeight - 50;
+ canvas.width = _artMap.width * window.devicePixelRatio;
+ canvas.height = _artMap.height * window.devicePixelRatio;
+ canvas.style.width = _artMap.width + 'px';
+ canvas.style.height = _artMap.height + 'px';
+ _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+ _artMap.offsetX = _artMap.width / 2;
+ _artMap.offsetY = _artMap.height / 2;
+ _artMap.placed = [];
+ _artMap.images = {};
+ _artMap._nodeById = null;
+
+ // Loading screen
+ _artMap.ctx.fillStyle = '#0a0a14';
+ _artMap.ctx.fillRect(0, 0, _artMap.width, _artMap.height);
+ _artMap.ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ _artMap.ctx.font = '14px system-ui';
+ _artMap.ctx.textAlign = 'center';
+ _artMap.ctx.fillText('Building artist map...', _artMap.width / 2, _artMap.height / 2);
+
+ try {
+ const resp = await fetch('/api/discover/artist-map');
+ const data = await resp.json();
+ if (!data.success || !data.nodes.length) {
+ _artMap.ctx.fillText('No watchlist artists. Add artists to your watchlist first.', _artMap.width / 2, _artMap.height / 2 + 30);
+ return;
+ }
+
+ document.getElementById('artist-map-stats').textContent =
+ `${data.watchlist_count} watchlist · ${data.similar_count} similar`;
+
+ _artMap.edges = data.edges;
+ const WR = _artMap.WATCHLIST_R;
+ const BUF = _artMap.BUFFER;
+
+ // ── PHASE 1: Place watchlist artists with guaranteed no-overlap ──
+ const wNodes = data.nodes.filter(n => n.type === 'watchlist');
+ // Minimum center-to-center distance between watchlist nodes
+ const minCenterDist = WR * 3.5; // WR*2 for radii + WR*1.5 gap — similar artists fill the gaps via spiral packing
+
+ // Place watchlist nodes in a spiral — deterministic, guaranteed spacing
+ wNodes.forEach((n, i) => {
+ n.radius = WR;
+ n.opacity = 0;
+ if (i === 0) {
+ n.x = 0; n.y = 0;
+ } else {
+ // Golden angle spiral for even distribution
+ const angle = i * 2.399963; // golden angle in radians
+ const r = minCenterDist * Math.sqrt(i) * 0.7;
+ n.x = Math.cos(angle) * r;
+ n.y = Math.sin(angle) * r;
+ }
+ });
+
+ // Post-process: push apart any watchlist nodes that ended up too close
+ for (let pass = 0; pass < 50; pass++) {
+ let moved = false;
+ for (let i = 0; i < wNodes.length; i++) {
+ for (let j = i + 1; j < wNodes.length; j++) {
+ const dx = wNodes[j].x - wNodes[i].x;
+ const dy = wNodes[j].y - wNodes[i].y;
+ const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+ if (dist < minCenterDist) {
+ const push = (minCenterDist - dist) / 2 + 1;
+ const nx = (dx / dist) * push;
+ const ny = (dy / dist) * push;
+ wNodes[i].x -= nx; wNodes[i].y -= ny;
+ wNodes[j].x += nx; wNodes[j].y += ny;
+ moved = true;
+ }
+ }
+ }
+ if (!moved) break;
+ }
+
+ wNodes.forEach(n => { _artMap.placed.push(n); });
+
+ // ── PHASE 2: Place similar artists around their source watchlist nodes ──
+ const sNodes = data.nodes.filter(n => n.type === 'similar');
+ sNodes.forEach(n => {
+ const occ = n.occurrence || 1;
+ const rank = n.rank || 5;
+ // Bigger overall: min 25% of WR, max 55%, scaled by relevance
+ n.radius = Math.min(WR * 0.55, Math.max(WR * 0.25, WR * 0.2 + occ * WR * 0.06 + (10 - rank) * WR * 0.025));
+ });
+ sNodes.sort((a, b) => b.radius - a.radius);
+
+ // Build edge lookup: target_id → source node (O(1) instead of .find())
+ const edgeMap = {};
+ _artMap.edges.forEach(e => { edgeMap[e.target] = e.source; });
+ const nodeById = {};
+ _artMap.placed.forEach(n => { nodeById[n.id] = n; });
+
+ // Spatial grid for fast collision detection
+ // Cell size must cover the largest possible bubble diameter + buffer
+ const CELL = WR * 2 + BUF * 2;
+ const grid = {};
+ function _gridKey(x, y) { return `${Math.floor(x / CELL)},${Math.floor(y / CELL)}`; }
+ function _gridAdd(n) {
+ const k = _gridKey(n.x, n.y);
+ if (!grid[k]) grid[k] = [];
+ grid[k].push(n);
+ }
+ function _gridCheck(x, y, r) {
+ const cx = Math.floor(x / CELL);
+ const cy = Math.floor(y / CELL);
+ // Search wider radius to catch large watchlist bubbles
+ for (let dx = -3; dx <= 3; dx++) {
+ for (let dy = -3; dy <= 3; dy++) {
+ const cell = grid[`${cx + dx},${cy + dy}`];
+ if (!cell) continue;
+ for (const p of cell) {
+ const ddx = x - p.x, ddy = y - p.y;
+ const minD = r + p.radius + BUF;
+ if (ddx * ddx + ddy * ddy < minD * minD) return true;
+ }
+ }
+ }
+ return false;
+ }
+ // Add watchlist nodes to grid
+ _artMap.placed.forEach(n => _gridAdd(n));
+
+ // Place similar nodes with spatial grid collision
+ for (const sn of sNodes) {
+ const srcId = edgeMap[sn.id];
+ const src = srcId != null ? nodeById[srcId] : null;
+ const cx = src ? src.x : 0;
+ const cy = src ? src.y : 0;
+ const startDist = (src ? src.radius : WR) + sn.radius + BUF;
+
+ let placed = false;
+ for (let dist = startDist; dist < startDist + WR * 3; dist += sn.radius * 0.5) {
+ const steps = Math.max(8, Math.floor(dist * 0.1));
+ const off = Math.random() * Math.PI * 2;
+ for (let a = 0; a < steps; a++) {
+ const angle = off + (a / steps) * Math.PI * 2;
+ const tx = cx + Math.cos(angle) * dist;
+ const ty = cy + Math.sin(angle) * dist;
+ if (!_gridCheck(tx, ty, sn.radius)) {
+ sn.x = tx; sn.y = ty; sn.opacity = 0;
+ _artMap.placed.push(sn);
+ nodeById[sn.id] = sn;
+ _gridAdd(sn);
+ placed = true;
+ break;
+ }
+ }
+ if (placed) break;
+ }
+ }
+
+ // Auto-zoom to fit all nodes
+ let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+ _artMap.placed.forEach(n => {
+ minX = Math.min(minX, n.x - n.radius);
+ maxX = Math.max(maxX, n.x + n.radius);
+ minY = Math.min(minY, n.y - n.radius);
+ maxY = Math.max(maxY, n.y + n.radius);
+ });
+ const mapW = maxX - minX + 200;
+ const mapH = maxY - minY + 200;
+ _artMap.zoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
+ _artMap.offsetX = _artMap.width / 2 - ((minX + maxX) / 2) * _artMap.zoom;
+ _artMap.offsetY = _artMap.height / 2 - ((minY + maxY) / 2) * _artMap.zoom;
+
+ // Setup interaction
+ _artMapSetupInteraction(canvas);
+
+ // ── PHASE 3: Set all visible, build buffer, render ──
+ // Show loading overlay while buffer builds
+ const loadingEl = document.createElement('div');
+ loadingEl.id = 'artist-map-loading';
+ loadingEl.innerHTML = `
+
+
+
+ `;
+ container.appendChild(loadingEl);
+
+ // Defer heavy work so loading overlay renders first
+ setTimeout(async () => {
+ _artMap.placed.forEach(n => { n.opacity = 1; });
+
+ // Load images in parallel using createImageBitmap (non-blocking)
+ const loadingText = container.querySelector('.artist-map-loading-text');
+ const imgNodes = _artMap.placed.filter(n => n.image_url);
+ let loaded = 0;
+
+ if (loadingText) loadingText.textContent = `Loading ${imgNodes.length} artist images...`;
+
+ // Batch image loading — 20 concurrent fetches
+ const CONCURRENT = 20;
+ let idx = 0;
+
+ async function loadNextBatch() {
+ const batch = [];
+ while (idx < imgNodes.length && batch.length < CONCURRENT) {
+ const n = imgNodes[idx++];
+ if (_artMap.images[n.id]) { loaded++; continue; }
+ batch.push(
+ _artMapLoadImage(n.image_url)
+ .then(bmp => { if (bmp) _artMap.images[n.id] = bmp; })
+ .finally(() => {
+ loaded++;
+ if (loadingText && loaded % 50 === 0) {
+ loadingText.textContent = `Loading images... ${loaded}/${imgNodes.length}`;
+ }
+ })
+ );
+ }
+ if (batch.length) await Promise.all(batch);
+ if (idx < imgNodes.length) return loadNextBatch();
+ }
+
+ await loadNextBatch();
+
+ // Build buffer and render
+ if (loadingText) loadingText.textContent = 'Rendering map...';
+ await new Promise(r => setTimeout(r, 20)); // let text update render
+
+ _artMap.dirty = true;
+ _artMapRender();
+
+ const le = document.getElementById('artist-map-loading');
+ if (le) le.remove();
+ }, 50);
+
+ } catch (err) {
+ console.error('Artist map error:', err);
+ }
+}
+
+function artMapZoom(factor) {
+ const cx = _artMap.width / 2;
+ const cy = _artMap.height / 2;
+ const targetZoom = Math.max(0.02, Math.min(3, _artMap.zoom * factor));
+ const targetOX = cx - (cx - _artMap.offsetX) * (targetZoom / _artMap.zoom);
+ const targetOY = cy - (cy - _artMap.offsetY) * (targetZoom / _artMap.zoom);
+ _artMapAnimateTo(targetZoom, targetOX, targetOY);
+}
+
+function artMapFitToView() {
+ if (!_artMap.placed.length) return;
+ let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+ _artMap.placed.forEach(n => {
+ if ((n.opacity || 0) < 0.01) return;
+ minX = Math.min(minX, n.x - n.radius);
+ maxX = Math.max(maxX, n.x + n.radius);
+ minY = Math.min(minY, n.y - n.radius);
+ maxY = Math.max(maxY, n.y + n.radius);
+ });
+ const mapW = maxX - minX + 100;
+ const mapH = maxY - minY + 100;
+ const targetZoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
+ const targetOX = _artMap.width / 2 - ((minX + maxX) / 2) * targetZoom;
+ const targetOY = _artMap.height / 2 - ((minY + maxY) / 2) * targetZoom;
+ _artMapAnimateTo(targetZoom, targetOX, targetOY);
+}
+
+function _artMapAnimateTo(targetZoom, targetOX, targetOY) {
+ if (_artMap._animating) cancelAnimationFrame(_artMap._animating);
+ const startZoom = _artMap.zoom;
+ const startOX = _artMap.offsetX;
+ const startOY = _artMap.offsetY;
+ const duration = 250;
+ const start = performance.now();
+
+ function step(now) {
+ const t = Math.min(1, (now - start) / duration);
+ // Ease out cubic
+ const e = 1 - Math.pow(1 - t, 3);
+ _artMap.zoom = startZoom + (targetZoom - startZoom) * e;
+ _artMap.offsetX = startOX + (targetOX - startOX) * e;
+ _artMap.offsetY = startOY + (targetOY - startOY) * e;
+ _artMapRender(); // blit only, no rebuild
+ if (t < 1) {
+ _artMap._animating = requestAnimationFrame(step);
+ } else {
+ _artMap._animating = null;
+ _artMap.dirty = true;
+ _artMapRender(); // rebuild at final zoom level
+ }
+ }
+ _artMap._animating = requestAnimationFrame(step);
+}
+
+function closeArtistMap() {
+ const container = document.getElementById('artist-map-container');
+ if (container) container.style.display = 'none';
+ const sidebar = document.getElementById('artmap-genre-sidebar');
+ if (sidebar) sidebar.style.display = 'none';
+ if (_artMap.animFrame) cancelAnimationFrame(_artMap.animFrame);
+ if (_artMap._keyHandler) window.removeEventListener('keydown', _artMap._keyHandler);
+ _artMapHideContextMenu();
+
+ // Restore discover sections
+ document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
+ el.style.display = el._prevDisplay !== undefined ? el._prevDisplay : '';
+ });
+}
+
+// No force simulation — layout is pre-computed via circle packing
+
+function _artMapRebuildBuffer() {
+ /**Render ALL nodes once to offscreen canvas. Only called on data changes, not pan/zoom.**/
+ const placed = _artMap.placed;
+ if (!placed.length) return;
+
+ const visible = placed.filter(n => (n.opacity || 0) > 0.01);
+ if (!visible.length) return;
+
+ // World bounds
+ let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+ visible.forEach(n => {
+ minX = Math.min(minX, n.x - n.radius - 10);
+ maxX = Math.max(maxX, n.x + n.radius + 10);
+ minY = Math.min(minY, n.y - n.radius - 10);
+ maxY = Math.max(maxY, n.y + n.radius + 10);
+ });
+
+ const bw = maxX - minX;
+ const bh = maxY - minY;
+ // Scale based on zoom — higher zoom = higher res buffer, capped for memory
+ const z = _artMap.zoom || 0.1;
+ const scale = Math.min(z * 2, 1.0, 10240 / Math.max(bw, bh));
+
+ if (!_artMap.offscreen) _artMap.offscreen = document.createElement('canvas');
+ const oc = _artMap.offscreen;
+ oc.width = Math.ceil(bw * scale);
+ oc.height = Math.ceil(bh * scale);
+ const octx = oc.getContext('2d');
+ _artMap._bufferScale = scale;
+ _artMap._bufferMinX = minX;
+ _artMap._bufferMinY = minY;
+
+ octx.scale(scale, scale);
+ octx.translate(-minX, -minY);
+
+ // Build node lookup
+ if (!_artMap._nodeById) {
+ _artMap._nodeById = {};
+ placed.forEach(n => { _artMap._nodeById[n.id] = n; });
+ }
+
+ // Draw edges (connection lines between related nodes)
+ if (_artMap.edges && _artMap.edges.length > 0) {
+ octx.lineWidth = 1;
+ octx.strokeStyle = 'rgba(138,43,226,0.08)';
+ octx.beginPath();
+ for (const edge of _artMap.edges) {
+ const s = _artMap._nodeById[edge.source];
+ const t = _artMap._nodeById[edge.target];
+ if (!s || !t || (s.opacity || 0) < 0.05 || (t.opacity || 0) < 0.05) continue;
+ octx.moveTo(s.x, s.y);
+ octx.lineTo(t.x, t.y);
+ }
+ octx.stroke();
+ }
+
+ // Draw ALL nodes — genre labels first, similar next, watchlist on top
+ const hideSimilar = _artMap._hideSimilar || false;
+ // Pass 0: genre labels, Pass 1: similar/ring2, Pass 2: watchlist/center/ring1
+ for (let pass = 0; pass < 3; pass++) {
+ for (const n of visible) {
+ if (pass === 0 && n._isLabel) { /* draw */ }
+ else if (pass === 1 && !n._isLabel && n.type !== 'watchlist' && n.type !== 'center' && n.ring !== 1) { /* draw */ }
+ else if (pass === 2 && !n._isLabel && (n.type === 'watchlist' || n.type === 'center' || n.ring === 1)) { /* draw */ }
+ else continue;
+ if (hideSimilar && n.type !== 'watchlist' && n.type !== 'center' && !n._isLabel) continue;
+ const op = n.opacity || 0;
+ if (op < 0.01) continue;
+ const r = n.radius;
+ const isW = n.type === 'watchlist' || n.type === 'center';
+ octx.globalAlpha = op;
+
+ // Genre label node — transparent circle with large text
+ if (n._isLabel) {
+ octx.globalAlpha = 0.6;
+ octx.beginPath();
+ octx.arc(n.x, n.y, n.radius, 0, Math.PI * 2);
+ octx.fillStyle = 'rgba(138,43,226,0.04)';
+ octx.fill();
+ octx.strokeStyle = 'rgba(138,43,226,0.08)';
+ octx.lineWidth = 1;
+ octx.stroke();
+ const labelSize = Math.max(12, n.radius * 0.25);
+ octx.font = `800 ${labelSize}px system-ui`;
+ octx.textAlign = 'center';
+ octx.textBaseline = 'middle';
+ octx.fillStyle = 'rgba(138,43,226,0.35)';
+ octx.fillText(n.name, n.x, n.y - labelSize * 0.3);
+ octx.font = `500 ${labelSize * 0.5}px system-ui`;
+ octx.fillStyle = 'rgba(255,255,255,0.15)';
+ octx.fillText(`${n._count || 0} artists`, n.x, n.y + labelSize * 0.5);
+ octx.globalAlpha = 1;
+ continue;
+ }
+
+ // Render quality based on node size in buffer pixels
+ const rScaled = r * scale;
+ const isSmall = rScaled < 8;
+ const isTiny = rScaled < 3;
+
+ // Tiny nodes: just a colored dot (no clip, no image, no text)
+ if (isTiny) {
+ octx.beginPath();
+ octx.arc(n.x, n.y, r, 0, Math.PI * 2);
+ octx.fillStyle = isW ? '#6b21a8' : '#2a2a40';
+ octx.fill();
+ continue;
+ }
+
+ // Small nodes: filled circle + border, no image clip
+ if (isSmall) {
+ octx.beginPath();
+ octx.arc(n.x, n.y, r, 0, Math.PI * 2);
+ const img = _artMap.images[n.id];
+ if (img) {
+ octx.save(); octx.clip();
+ octx.drawImage(img, n.x - r, n.y - r, r * 2, r * 2);
+ octx.restore();
+ } else {
+ octx.fillStyle = isW ? '#1a0a30' : '#141420';
+ octx.fill();
+ }
+ octx.strokeStyle = isW ? 'rgba(138,43,226,0.3)' : 'rgba(255,255,255,0.06)';
+ octx.lineWidth = isW ? 1.5 : 0.5;
+ octx.stroke();
+ continue;
+ }
+
+ // Full quality: glow + clip + image + text
+ if (isW) {
+ octx.beginPath();
+ octx.arc(n.x, n.y, r + 4, 0, Math.PI * 2);
+ octx.strokeStyle = 'rgba(138,43,226,0.25)';
+ octx.lineWidth = 5;
+ octx.stroke();
+ }
+
+ octx.save();
+ octx.beginPath();
+ octx.arc(n.x, n.y, r, 0, Math.PI * 2);
+ octx.closePath();
+ octx.clip();
+
+ const img = _artMap.images[n.id];
+ if (img) {
+ octx.drawImage(img, n.x - r, n.y - r, r * 2, r * 2);
+ octx.fillStyle = 'rgba(0,0,0,0.45)';
+ octx.fillRect(n.x - r, n.y - r, r * 2, r * 2);
+ } else {
+ octx.fillStyle = isW ? '#1a0a30' : '#141420';
+ octx.fillRect(n.x - r, n.y - r, r * 2, r * 2);
+ }
+ octx.restore();
+
+ octx.beginPath();
+ octx.arc(n.x, n.y, r, 0, Math.PI * 2);
+ octx.strokeStyle = isW ? 'rgba(138,43,226,0.4)' : 'rgba(255,255,255,0.08)';
+ octx.lineWidth = isW ? 2 : 0.5;
+ octx.stroke();
+
+ const fontSize = isW ? Math.max(16, r * 0.14) : Math.max(8, r * 0.3);
+ octx.font = `${isW ? '700' : '600'} ${fontSize}px system-ui`;
+ octx.textAlign = 'center';
+ octx.textBaseline = 'middle';
+ octx.fillStyle = '#fff';
+ const maxC = isW ? 20 : 12;
+ const label = n.name.length > maxC ? n.name.substring(0, maxC - 1) + '…' : n.name;
+ octx.fillText(label, n.x, n.y);
+ }
+ }
+
+ octx.globalAlpha = 1;
+
+ _artMap.dirty = false;
+}
+
+function _artMapRender() {
+ /**Blit offscreen buffer to screen canvas with pan/zoom. Near-zero cost.**/
+ const ctx = _artMap.ctx;
+ const w = _artMap.width;
+ const h = _artMap.height;
+
+ ctx.fillStyle = '#0a0a14';
+ ctx.fillRect(0, 0, w, h);
+
+ if (_artMap.dirty || !_artMap.offscreen) _artMapRebuildBuffer();
+ if (!_artMap.offscreen) return;
+
+ const oc = _artMap.offscreen;
+ const s = _artMap._bufferScale;
+ const mx = _artMap._bufferMinX;
+ const my = _artMap._bufferMinY;
+ const z = _artMap.zoom;
+
+ // Blit offscreen buffer: the buffer was drawn with scale(s) + translate(-minX,-minY)
+ // So buffer pixel (bx,by) corresponds to world (bx/s + minX, by/s + minY)
+ // Screen position of world (wx,wy) = offsetX + wx*zoom, offsetY + wy*zoom
+ // Therefore buffer origin on screen = offsetX + minX*zoom, offsetY + minY*zoom
+ // And buffer is drawn at size (bufferWidth * zoom/s, bufferHeight * zoom/s)
+ ctx.drawImage(oc,
+ _artMap.offsetX + mx * z,
+ _artMap.offsetY + my * z,
+ oc.width * z / s,
+ oc.height * z / s
+ );
+
+ // ── Interactive overlay (drawn on main canvas, not buffer) ──
+ const cFade = _artMap._constellationFade || 0;
+ if (cFade > 0 && (_artMap.hoveredNode || _artMap._constellationCache)) {
+ const n = _artMap.hoveredNode || (_artMap._constellationCache ? (_artMap._nodeById || {})[_artMap._constellationCache.nodeId] : null);
+ if (!n) { _artMap._constellationFade = 0; _artMap._constellationCache = null; }
+ if (n) {
+ ctx.save();
+ ctx.translate(_artMap.offsetX, _artMap.offsetY);
+ ctx.scale(z, z);
+
+ // Cache connected node lookup (don't recompute every frame)
+ if (!_artMap._constellationCache || _artMap._constellationCache.nodeId !== n.id) {
+ const connectedIds = new Set();
+ if (n.type === 'watchlist') {
+ for (const e of _artMap.edges) {
+ if (e.source === n.id) connectedIds.add(e.target);
+ }
+ } else {
+ const sourceIds = new Set();
+ for (const e of _artMap.edges) {
+ if (e.target === n.id) sourceIds.add(e.source);
+ }
+ for (const sid of sourceIds) {
+ connectedIds.add(sid);
+ for (const e of _artMap.edges) {
+ if (e.source === sid) connectedIds.add(e.target);
+ }
+ }
+ }
+ const nById = _artMap._nodeById || {};
+ _artMap._constellationCache = {
+ nodeId: n.id,
+ nodes: [n, ...[...connectedIds].map(id => nById[id]).filter(Boolean)],
+ };
+ }
+
+ const highlightNodes = _artMap._constellationCache.nodes;
+
+ if (highlightNodes.length > 1) {
+ // Semi-transparent dark overlay on entire visible area
+ ctx.save();
+ ctx.resetTransform();
+ ctx.globalAlpha = 0.6 * cFade;
+ ctx.fillStyle = '#0a0a14';
+ ctx.fillRect(0, 0, _artMap.canvas.width, _artMap.canvas.height);
+ ctx.globalAlpha = 1;
+ ctx.restore();
+
+ // Draw glowing connection lines
+ for (const cn of highlightNodes) {
+ if (cn === n) continue;
+ ctx.beginPath();
+ ctx.moveTo(n.x, n.y);
+ ctx.lineTo(cn.x, cn.y);
+ // Gradient line
+ const lineGrad = ctx.createLinearGradient(n.x, n.y, cn.x, cn.y);
+ lineGrad.addColorStop(0, `rgba(138,43,226,${0.5 * cFade})`);
+ lineGrad.addColorStop(1, `rgba(138,43,226,${0.15 * cFade})`);
+ ctx.strokeStyle = lineGrad;
+ ctx.lineWidth = 2;
+ ctx.stroke();
+ }
+
+ // Redraw highlighted nodes on top
+ ctx.globalAlpha = cFade;
+ for (const hn of highlightNodes) {
+ const r = hn.radius;
+ const isW = hn.type === 'watchlist';
+ const isHov = hn === n;
+
+ // Glow
+ if (isHov) {
+ ctx.beginPath();
+ ctx.arc(hn.x, hn.y, r + 8, 0, Math.PI * 2);
+ ctx.strokeStyle = 'rgba(138,43,226,0.4)';
+ ctx.lineWidth = 6;
+ ctx.stroke();
+ }
+
+ // Circle + image
+ ctx.save();
+ ctx.beginPath();
+ ctx.arc(hn.x, hn.y, r, 0, Math.PI * 2);
+ ctx.closePath();
+ ctx.clip();
+
+ const img = _artMap.images[hn.id];
+ if (img) {
+ ctx.drawImage(img, hn.x - r, hn.y - r, r * 2, r * 2);
+ ctx.fillStyle = 'rgba(0,0,0,0.35)';
+ ctx.fillRect(hn.x - r, hn.y - r, r * 2, r * 2);
+ } else {
+ ctx.fillStyle = isW ? '#1a0a30' : '#141420';
+ ctx.fillRect(hn.x - r, hn.y - r, r * 2, r * 2);
+ }
+ ctx.restore();
+
+ // Border
+ ctx.beginPath();
+ ctx.arc(hn.x, hn.y, r, 0, Math.PI * 2);
+ ctx.strokeStyle = isHov ? 'rgba(255,255,255,0.7)' : isW ? 'rgba(138,43,226,0.5)' : 'rgba(255,255,255,0.3)';
+ ctx.lineWidth = isHov ? 3 : 1.5;
+ ctx.stroke();
+
+ // Name
+ const fontSize = isW ? Math.max(14, r * 0.14) : Math.max(8, r * 0.3);
+ ctx.font = `${isW ? '700' : '600'} ${fontSize}px system-ui`;
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillStyle = '#fff';
+ const maxC = isW ? 20 : 12;
+ const label = hn.name.length > maxC ? hn.name.substring(0, maxC - 1) + '…' : hn.name;
+ ctx.fillText(label, hn.x, hn.y);
+ }
+ ctx.globalAlpha = 1;
+ } else {
+ // Single node, no connections
+ ctx.beginPath();
+ ctx.arc(n.x, n.y, n.radius + 4, 0, Math.PI * 2);
+ ctx.strokeStyle = 'rgba(255,255,255,0.5)';
+ ctx.lineWidth = 3;
+ ctx.stroke();
+ }
+
+ ctx.restore();
+ } // end if(n)
+ } else if (_artMap.hoveredNode && !_artMap._constellationActive) {
+ // Pre-constellation: just show a simple highlight ring (instant, no delay)
+ const n = _artMap.hoveredNode;
+ ctx.save();
+ ctx.translate(_artMap.offsetX, _artMap.offsetY);
+ ctx.scale(z, z);
+ ctx.beginPath();
+ ctx.arc(n.x, n.y, n.radius + 3, 0, Math.PI * 2);
+ ctx.strokeStyle = 'rgba(255,255,255,0.35)';
+ ctx.lineWidth = 2;
+ ctx.stroke();
+ ctx.restore();
+ }
+
+ // Click ripple animation
+ if (_artMap._ripple) {
+ const rip = _artMap._ripple;
+ const elapsed = performance.now() - rip.start;
+ const progress = elapsed / 400; // 400ms duration
+ if (progress < 1) {
+ ctx.save();
+ ctx.translate(_artMap.offsetX, _artMap.offsetY);
+ ctx.scale(z, z);
+ const ripR = rip.radius + rip.radius * progress * 0.5;
+ ctx.beginPath();
+ ctx.arc(rip.x, rip.y, ripR, 0, Math.PI * 2);
+ ctx.strokeStyle = `rgba(138,43,226,${0.5 * (1 - progress)})`;
+ ctx.lineWidth = 3 * (1 - progress);
+ ctx.stroke();
+ ctx.restore();
+ requestAnimationFrame(() => _artMapRender());
+ } else {
+ _artMap._ripple = null;
+ }
+ }
+}
+
+function artMapSearch(query) {
+ const results = document.getElementById('artist-map-search-results');
+ if (!results) return;
+ if (!query || query.length < 2) { results.style.display = 'none'; return; }
+
+ const q = query.toLowerCase();
+ const matches = _artMap.placed.filter(n => (n.opacity || 0) > 0.5 && n.name.toLowerCase().includes(q)).slice(0, 8);
+
+ if (!matches.length) { results.style.display = 'none'; return; }
+
+ results.style.display = 'block';
+ results.innerHTML = matches.map(n =>
+ `Placing ${_artMap.placed.length} artists on the map...
+
+ ${n.type === 'watchlist' ? '★' : '○'}
+ ${escapeHtml(n.name)}
+
`
+ ).join('');
+}
+
+function artMapZoomToNode(nodeId) {
+ const n = _artMap.placed.find(p => p.id === nodeId);
+ if (!n) return;
+ // Zoom to show this node centered, at a comfortable zoom level
+ const targetZoom = Math.max(0.3, Math.min(1, 200 / n.radius));
+ const targetOX = _artMap.width / 2 - n.x * targetZoom;
+ const targetOY = _artMap.height / 2 - n.y * targetZoom;
+ _artMapAnimateTo(targetZoom, targetOX, targetOY);
+ // Highlight briefly after animation
+ setTimeout(() => { _artMap.hoveredNode = n; _artMapRender(); }, 300);
+ setTimeout(() => { _artMap.hoveredNode = null; _artMapRender(); }, 2500);
+ // Close search
+ const results = document.getElementById('artist-map-search-results');
+ if (results) results.style.display = 'none';
+ const input = document.getElementById('artist-map-search');
+ if (input) input.value = '';
+}
+
+function _artMapShowTooltip(e, node) {
+ const tip = document.getElementById('artist-map-tooltip');
+ if (!tip) return;
+ if (!node) { tip.style.display = 'none'; return; }
+
+ const img = node.image_url ? `♫
';
+ const genres = (node.genres || []).slice(0, 3);
+ const genreHTML = genres.length ? `${genres.map(g => `${escapeHtml(g)}`).join('')}
` : '';
+ const typeLabel = node.type === 'watchlist' ? '★ Watchlist' : '';
+
+ tip.innerHTML = `
+
+ ${img}
+
+ `;
+ tip.style.display = 'block';
+
+ // Position — keep on screen
+ const x = Math.min(e.clientX + 16, window.innerWidth - tip.offsetWidth - 10);
+ const y = Math.min(e.clientY - 10, window.innerHeight - tip.offsetHeight - 10);
+ tip.style.left = x + 'px';
+ tip.style.top = y + 'px';
+}
+
+function _artMapAnimateConstellation() {
+ if (_artMap._constellationActive && _artMap._constellationFade < 1) {
+ _artMap._constellationFade = Math.min(1, (_artMap._constellationFade || 0) + 0.08);
+ _artMapRender();
+ requestAnimationFrame(_artMapAnimateConstellation);
+ } else if (!_artMap._constellationActive && _artMap._constellationFade > 0) {
+ _artMap._constellationFade = Math.max(0, _artMap._constellationFade - 0.1);
+ _artMapRender();
+ if (_artMap._constellationFade > 0) {
+ requestAnimationFrame(_artMapAnimateConstellation);
+ } else {
+ _artMap._constellationCache = null;
+ }
+ }
+}
+
+function artMapShowShortcuts() {
+ const existing = document.getElementById('artmap-shortcuts-overlay');
+ if (existing) { existing.remove(); return; }
+
+ const overlay = document.createElement('div');
+ overlay.id = 'artmap-shortcuts-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.style.zIndex = '10002';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ overlay.innerHTML = `
+
+
+ ${escapeHtml(node.name)}
+ ${typeLabel}
+ ${genreHTML}
+
+
+ `;
+ document.body.appendChild(overlay);
+}
+
+async function openArtistMapGenre() {
+ // Show picker immediately — uses lightweight genre list endpoint
+ const genre = await _showGenrePickerModal();
+ if (!genre) return;
+ _openGenreMapWithSelection(genre);
+}
+
+async function _showGenrePickerModal() {
+ return new Promise(resolve => {
+ const existing = document.getElementById('artmap-genre-picker');
+ if (existing) existing.remove();
+
+ const overlay = document.createElement('div');
+ overlay.id = 'artmap-genre-picker';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+
+ overlay.innerHTML = `
+
+
+ Keyboard Shortcuts
+ +
+
+ EscClose map
+ + / -Zoom in / out
+ FFit to view
+ SFocus search
+ HToggle similar artists
+ ScrollZoom at cursor
+ ClickArtist info
+ Right-clickContext menu
+ DragPan around
+ Hover 1sShow connections
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ // Use cached data or fetch
+ const renderGenreList = (data) => {
+ if (!data?.success || !data?.genres?.length) {
+ document.getElementById('artmap-genre-picker-list').innerHTML = '
+
+
+
+
+
+ Select a Genre
+Choose a genre to explore its artists
+
+
+
+ Loading genres...
No genres found
';
+ return;
+ }
+ const list = document.getElementById('artmap-genre-picker-list');
+ list.innerHTML = data.genres.map(g => `
+
+
+ `).join('');
+ };
+
+ if (window._artMapGenreList) {
+ renderGenreList(window._artMapGenreList);
+ } else {
+ fetch('/api/discover/artist-map/genre-list')
+ .then(r => r.json())
+ .then(data => { window._artMapGenreList = data; renderGenreList(data); })
+ .catch(() => { document.getElementById('artmap-genre-picker-list').innerHTML = '${escapeHtml(g.name)}
+ ${g.count} artists
+ Error loading genres
'; });
+ }
+
+ overlay._resolve = (genre) => { overlay.remove(); resolve(genre); };
+ });
+}
+
+function _switchGenre(genre) {
+ _artMap._skipSectionToggle = true;
+ _openGenreMapWithSelection(genre);
+}
+
+function _filterGenreSidebar(query) {
+ const q = query.toLowerCase();
+ document.querySelectorAll('.artmap-genre-sidebar-item').forEach(el => {
+ el.style.display = el.dataset.genre.toLowerCase().includes(q) ? '' : 'none';
+ });
+}
+
+async function _changeGenre() {
+ const genre = await _showGenrePickerModal();
+ if (!genre) return;
+ _artMap._skipSectionToggle = true;
+ _openGenreMapWithSelection(genre);
+}
+
+function _filterGenrePicker(query) {
+ const q = query.toLowerCase();
+ document.querySelectorAll('.artmap-genre-picker-item').forEach(el => {
+ el.style.display = el.dataset.genre.toLowerCase().includes(q) ? '' : 'none';
+ });
+}
+
+async function _openGenreMapWithSelection(selectedGenre) {
+ const container = document.getElementById('artist-map-container');
+ if (!container) return;
+
+ const skipToggle = _artMap._skipSectionToggle;
+ _artMap._skipSectionToggle = false;
+
+ if (!skipToggle) {
+ document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
+ el._prevDisplay = el.style.display;
+ el.style.display = 'none';
+ });
+ }
+ container.style.display = 'flex';
+
+ // Show + populate genre sidebar
+ const sidebar = document.getElementById('artmap-genre-sidebar');
+ const genreListData = window._artMapGenreList || window._artMapGenreData;
+ if (sidebar && genreListData?.genres) {
+ sidebar.style.display = 'flex';
+ const list = document.getElementById('artmap-genre-sidebar-list');
+ if (list) {
+ list.innerHTML = genreListData.genres.map(g => `
+
+ `).join('');
+ }
+ }
+
+ const canvas = document.getElementById('artist-map-canvas');
+ const contentRow = canvas.parentElement;
+ _artMap.canvas = canvas;
+ _artMap.ctx = canvas.getContext('2d');
+ _artMap.width = canvas.clientWidth || (container.clientWidth - (sidebar?.offsetWidth || 0));
+ _artMap.height = contentRow?.clientHeight || (container.clientHeight - 50);
+ canvas.width = _artMap.width * window.devicePixelRatio;
+ canvas.height = _artMap.height * window.devicePixelRatio;
+ canvas.style.width = _artMap.width + 'px';
+ canvas.style.height = _artMap.height + 'px';
+ _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+ _artMap.offsetX = _artMap.width / 2;
+ _artMap.offsetY = _artMap.height / 2;
+ _artMap.placed = [];
+ _artMap.edges = [];
+ _artMap.images = {};
+ _artMap._nodeById = null;
+ _artMap.dirty = true;
+
+ // Show loading
+ const loadingEl = document.createElement('div');
+ loadingEl.id = 'artist-map-loading';
+ loadingEl.innerHTML = `Loading genre map...
Exploring ${escapeHtml(name)}...
+
+ `;
+ document.body.appendChild(overlay);
+
+ const input = overlay.querySelector('#artmap-explore-input');
+ const goBtn = overlay.querySelector('#artmap-explore-go');
+
+ const submit = () => {
+ const val = input.value.trim();
+ overlay.remove();
+ resolve(val || null);
+ };
+
+ goBtn.onclick = submit;
+ input.addEventListener('keydown', (e) => { if (e.key === 'Enter') submit(); });
+ setTimeout(() => input.focus(), 50);
+ });
+}
+
+function artMapToggleSimilar() {
+ _artMap._hideSimilar = !_artMap._hideSimilar;
+ _artMap.dirty = true;
+ _artMapRender();
+ const btn = document.getElementById('artmap-toggle-similar');
+ if (btn) btn.style.opacity = _artMap._hideSimilar ? '0.4' : '1';
+ showToast(_artMap._hideSimilar ? 'Showing watchlist only' : 'Showing all artists', 'info', 1500);
+}
+
+function _artMapLoadImage(url) {
+ // Try direct CORS fetch first (zero server load, works for Spotify/iTunes/Discogs)
+ return fetch(url, { mode: 'cors' })
+ .then(r => r.ok ? r.blob() : Promise.reject('not ok'))
+ .then(b => createImageBitmap(b))
+ .catch(() => {
+ // Fallback: server proxy for CDNs without CORS headers
+ return fetch('/api/image-proxy?url=' + encodeURIComponent(url))
+ .then(r => r.ok ? r.blob() : null)
+ .then(b => b ? createImageBitmap(b) : null)
+ .catch(() => null);
+ });
+}
+
+function _artMapHideContextMenu() {
+ const m = document.getElementById('artist-map-context');
+ if (m) m.style.display = 'none';
+}
+
+function _artMapSetupInteraction(canvas) {
+ // Prevent stacking listeners on repeated opens
+ if (canvas._artMapListenersAttached) return;
+ canvas._artMapListenersAttached = true;
+
+ let isPanning = false, panStartX = 0, panStartY = 0;
+
+ canvas.addEventListener('wheel', (e) => {
+ e.preventDefault();
+ const delta = e.deltaY > 0 ? 0.9 : 1.1;
+ const newZoom = Math.max(0.02, Math.min(5, _artMap.zoom * delta));
+ // Zoom toward mouse
+ const rect = canvas.getBoundingClientRect();
+ const mx = e.clientX - rect.left;
+ const my = e.clientY - rect.top;
+ _artMap.offsetX = mx - (mx - _artMap.offsetX) * (newZoom / _artMap.zoom);
+ _artMap.offsetY = my - (my - _artMap.offsetY) * (newZoom / _artMap.zoom);
+ _artMap.zoom = newZoom;
+ _artMapRender(); // fast blit
+ // Debounce hi-res rebuild after zoom settles
+ clearTimeout(_artMap._zoomRebuild);
+ _artMap._zoomRebuild = setTimeout(() => { _artMap.dirty = true; _artMapRender(); }, 300);
+ }, { passive: false });
+
+ let clickStart = null;
+
+ // Keyboard shortcuts
+ function _artMapKeyHandler(e) {
+ if (!document.getElementById('artist-map-container') || document.getElementById('artist-map-container').style.display === 'none') return;
+ if (e.target.tagName === 'INPUT') return; // don't intercept search typing
+ if (e.key === 'Escape') { closeArtistMap(); e.preventDefault(); }
+ else if (e.key === '=' || e.key === '+') { artMapZoom(1.3); e.preventDefault(); }
+ else if (e.key === '-') { artMapZoom(0.7); e.preventDefault(); }
+ else if (e.key === '0') { artMapFitToView(); e.preventDefault(); }
+ else if (e.key === 'f' || e.key === 'F') { artMapFitToView(); e.preventDefault(); }
+ else if (e.key === 's' || e.key === 'S') {
+ const input = document.getElementById('artist-map-search');
+ if (input) { input.focus(); e.preventDefault(); }
+ }
+ else if (e.key === 'h' || e.key === 'H') {
+ // Toggle similar artists visibility
+ _artMap._hideSimilar = !_artMap._hideSimilar;
+ _artMap.dirty = true;
+ _artMapRender();
+ }
+ }
+ window.addEventListener('keydown', _artMapKeyHandler);
+ _artMap._keyHandler = _artMapKeyHandler;
+
+ // Right-click context menu
+ canvas.addEventListener('contextmenu', (e) => {
+ e.preventDefault();
+ const { nx, ny } = _artMapScreenToWorld(e, canvas);
+ const node = _artMapHitTest(nx, ny);
+ if (!node || node._isLabel) { _artMapHideContextMenu(); return; }
+
+ const menu = document.getElementById('artist-map-context') || (() => {
+ const m = document.createElement('div');
+ m.id = 'artist-map-context';
+ m.className = 'artmap-context-menu';
+ document.getElementById('artist-map-container').appendChild(m);
+ return m;
+ })();
+
+ const hasId = node.spotify_id || node.itunes_id || node.deezer_id;
+ const activeSource = window._yaActiveSource || 'spotify';
+ const bestId = node[activeSource + '_id'] || node.spotify_id || node.itunes_id || node.deezer_id || '';
+ const bestSource = node[activeSource + '_id'] ? activeSource : node.spotify_id ? 'spotify' : node.itunes_id ? 'itunes' : 'deezer';
+
+ menu.innerHTML = `
+
+
+
+
+
+
+ Artist Explorer
+Enter an artist to explore their connections
+
+
+
+
+
+ ⓘ Artist Info
+
+
+ 💿 View Discography
+
+
+ 👁 ${node.type === 'watchlist' ? 'On Watchlist' : 'Add to Watchlist'}
+
+ `;
+ menu.style.display = 'block';
+ menu.style.left = Math.min(e.clientX, window.innerWidth - 200) + 'px';
+ menu.style.top = Math.min(e.clientY, window.innerHeight - 200) + 'px';
+
+ // Close on next click anywhere
+ setTimeout(() => {
+ window.addEventListener('click', _artMapHideContextMenu, { once: true });
+ }, 10);
+ });
+
+ canvas.addEventListener('mousedown', (e) => {
+ if (e.button !== 0) return; // left button only
+ clickStart = { x: e.clientX, y: e.clientY, time: Date.now() };
+ isPanning = true;
+ panStartX = e.clientX;
+ panStartY = e.clientY;
+ });
+
+ canvas.addEventListener('mousemove', (e) => {
+ if (isPanning) {
+ _artMap.offsetX += e.clientX - panStartX;
+ _artMap.offsetY += e.clientY - panStartY;
+ panStartX = e.clientX;
+ panStartY = e.clientY;
+ _artMapRender();
+ } else {
+ const { nx, ny } = _artMapScreenToWorld(e, canvas);
+ const prev = _artMap.hoveredNode;
+ _artMap.hoveredNode = _artMapHitTest(nx, ny);
+ canvas.style.cursor = _artMap.hoveredNode ? 'pointer' : 'grab';
+ _artMapShowTooltip(e, _artMap.hoveredNode);
+ if (prev !== _artMap.hoveredNode) {
+ // Reset constellation highlight timer
+ clearTimeout(_artMap._constellationTimer);
+ if (_artMap._constellationActive) {
+ _artMap._constellationActive = false;
+ _artMapAnimateConstellation(); // fade out
+ }
+ if (_artMap.hoveredNode) {
+ // Delay constellation effect by 800ms of sustained hover
+ _artMap._constellationTimer = setTimeout(() => {
+ if (_artMap.hoveredNode) {
+ _artMap._constellationActive = true;
+ _artMap._constellationFade = 0;
+ _artMap._constellationCache = null;
+ _artMapAnimateConstellation();
+ }
+ }, 800);
+ }
+ _artMapRender();
+ }
+ }
+ });
+
+ canvas.addEventListener('mouseup', (e) => {
+ if (e.button !== 0) return; // left button only
+ const wasDrag = clickStart && (Math.abs(e.clientX - clickStart.x) > 5 || Math.abs(e.clientY - clickStart.y) > 5);
+ isPanning = false;
+
+ if (!wasDrag && clickStart) {
+ // It was a click — find the node under cursor
+ const { nx, ny } = _artMapScreenToWorld(e, canvas);
+ const node = _artMapHitTest(nx, ny);
+ if (node) {
+ _artMap._ripple = { x: node.x, y: node.y, radius: node.radius, start: performance.now() };
+ _artMapRender();
+ if (node.spotify_id || node.itunes_id || node.deezer_id) {
+ setTimeout(() => openYourArtistInfoModal_direct(node), 200);
+ }
+ }
+ }
+
+ clickStart = null;
+ _artMapShowTooltip(e, null);
+ });
+
+ canvas.addEventListener('mouseleave', () => {
+ _artMapShowTooltip(null, null);
+ clearTimeout(_artMap._constellationTimer);
+ if (_artMap._constellationActive) {
+ _artMap._constellationActive = false;
+ _artMapAnimateConstellation();
+ }
+ _artMap.hoveredNode = null;
+ _artMapRender();
+ });
+
+ // Touch support — single finger pan, pinch to zoom
+ let lastTouches = null;
+ canvas.addEventListener('touchstart', (e) => {
+ e.preventDefault();
+ lastTouches = [...e.touches];
+ }, { passive: false });
+
+ canvas.addEventListener('touchmove', (e) => {
+ e.preventDefault();
+ if (!lastTouches) return;
+ const touches = [...e.touches];
+
+ if (touches.length === 1 && lastTouches.length === 1) {
+ // Pan
+ _artMap.offsetX += touches[0].clientX - lastTouches[0].clientX;
+ _artMap.offsetY += touches[0].clientY - lastTouches[0].clientY;
+ _artMapRender();
+ } else if (touches.length === 2 && lastTouches.length === 2) {
+ // Pinch zoom
+ const prevDist = Math.hypot(lastTouches[1].clientX - lastTouches[0].clientX, lastTouches[1].clientY - lastTouches[0].clientY);
+ const curDist = Math.hypot(touches[1].clientX - touches[0].clientX, touches[1].clientY - touches[0].clientY);
+ const factor = curDist / prevDist;
+ const cx = (touches[0].clientX + touches[1].clientX) / 2;
+ const cy = (touches[0].clientY + touches[1].clientY) / 2;
+ const newZoom = Math.max(0.02, Math.min(3, _artMap.zoom * factor));
+ _artMap.offsetX = cx - (cx - _artMap.offsetX) * (newZoom / _artMap.zoom);
+ _artMap.offsetY = cy - (cy - _artMap.offsetY) * (newZoom / _artMap.zoom);
+ _artMap.zoom = newZoom;
+ _artMap.dirty = true;
+ _artMapRender();
+ }
+ lastTouches = touches;
+ }, { passive: false });
+
+ canvas.addEventListener('touchend', (e) => {
+ e.preventDefault();
+ // Tap to click
+ if (lastTouches && lastTouches.length === 1 && e.changedTouches.length === 1) {
+ const t = e.changedTouches[0];
+ const rect = canvas.getBoundingClientRect();
+ const wx = (t.clientX - rect.left - _artMap.offsetX) / _artMap.zoom;
+ const wy = (t.clientY - rect.top - _artMap.offsetY) / _artMap.zoom;
+ const node = _artMapHitTest(wx, wy);
+ if (node && (node.spotify_id || node.itunes_id || node.deezer_id)) {
+ openYourArtistInfoModal_direct(node);
+ }
+ }
+ lastTouches = null;
+ }, { passive: false });
+
+ // Handle resize
+ window.addEventListener('resize', () => {
+ const container = document.getElementById('artist-map-container');
+ if (!container || container.style.display === 'none') return;
+ _artMap.width = container.clientWidth;
+ _artMap.height = container.clientHeight - 50;
+ canvas.width = _artMap.width * window.devicePixelRatio;
+ canvas.height = _artMap.height * window.devicePixelRatio;
+ canvas.style.width = _artMap.width + 'px';
+ canvas.style.height = _artMap.height + 'px';
+ _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+ });
+}
+
+function _artMapScreenToWorld(e, canvas) {
+ const rect = canvas.getBoundingClientRect();
+ const sx = e.clientX - rect.left;
+ const sy = e.clientY - rect.top;
+ // Inverse of: translate(offsetX, offsetY) → scale(zoom)
+ return {
+ nx: (sx - _artMap.offsetX) / _artMap.zoom,
+ ny: (sy - _artMap.offsetY) / _artMap.zoom,
+ };
+}
+
+function _artMapHitTest(wx, wy) {
+ // Check watchlist first (drawn on top), then similar
+ const sorted = [..._artMap.placed].sort((a, b) =>
+ (b.type === 'watchlist' ? 1 : 0) - (a.type === 'watchlist' ? 1 : 0));
+ for (const n of sorted) {
+ if ((n.opacity || 0) < 0.3) continue;
+ const dx = wx - n.x;
+ const dy = wy - n.y;
+ if (dx * dx + dy * dy <= n.radius * n.radius) return n;
+ }
+ return null;
+}
+
+async function openYourArtistInfoModal_direct(node) {
+ // Determine best source ID — prefer active metadata source
+ let bestId = '', bestSource = '';
+ // Check what the active source is
+ const activeSource = window._yaActiveSource || 'spotify';
+ const sourceOrder = activeSource === 'spotify' ? ['spotify_id', 'itunes_id', 'deezer_id', 'discogs_id']
+ : activeSource === 'itunes' ? ['itunes_id', 'spotify_id', 'deezer_id', 'discogs_id']
+ : activeSource === 'deezer' ? ['deezer_id', 'spotify_id', 'itunes_id', 'discogs_id']
+ : ['spotify_id', 'itunes_id', 'deezer_id', 'discogs_id'];
+ const sourceMap = { spotify_id: 'spotify', itunes_id: 'itunes', deezer_id: 'deezer', discogs_id: 'discogs' };
+ for (const key of sourceOrder) {
+ if (node[key]) { bestId = node[key]; bestSource = sourceMap[key]; break; }
+ }
+
+ // Gather ALL connected artists from map edges (both directions)
+ const related = [];
+ const relatedIds = new Set();
+ const nById = _artMap._nodeById || {};
+ _artMap.edges.forEach(e => {
+ if (e.source === node.id && nById[e.target] && !relatedIds.has(e.target)) {
+ related.push(nById[e.target]);
+ relatedIds.add(e.target);
+ }
+ if (e.target === node.id && nById[e.source] && !relatedIds.has(e.source)) {
+ related.push(nById[e.source]);
+ relatedIds.add(e.source);
+ }
+ });
+
+ const poolEntry = {
+ id: node.id,
+ artist_name: node.name,
+ active_source_id: bestId,
+ active_source: bestSource,
+ image_url: node.image_url || '',
+ spotify_artist_id: node.spotify_id || '',
+ itunes_artist_id: node.itunes_id || '',
+ deezer_artist_id: node.deezer_id || '',
+ discogs_artist_id: node.discogs_id || '',
+ source_services: [],
+ on_watchlist: node.type === 'watchlist' ? 1 : 0,
+ _related: related,
+ };
+ if (!window._yaArtists) window._yaArtists = {};
+ window._yaArtists[node.id] = poolEntry;
+ openYourArtistInfoModal(node.id);
+}
+
+async function loadDiscoveryShuffle() {
+ try {
+ const container = document.getElementById('personalized-discovery-shuffle');
+ if (!container) return;
+
+ const response = await fetch('/api/discover/personalized/discovery-shuffle?limit=50');
+ if (!response.ok) return;
+
+ const data = await response.json();
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ container.closest('.discover-section').style.display = 'none';
+ return;
+ }
+
+ personalizedDiscoveryShuffle = data.tracks;
+ renderCompactPlaylist(container, data.tracks);
+ container.closest('.discover-section').style.display = 'block';
+
+ } catch (error) {
+ console.error('Error loading discovery shuffle:', error);
+ }
+}
+
+async function loadFamiliarFavorites() {
+ try {
+ const container = document.getElementById('personalized-familiar-favorites');
+ if (!container) return;
+
+ const response = await fetch('/api/discover/personalized/familiar-favorites?limit=50');
+ if (!response.ok) return;
+
+ const data = await response.json();
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ container.closest('.discover-section').style.display = 'none';
+ return;
+ }
+
+ personalizedFamiliarFavorites = data.tracks;
+ renderCompactPlaylist(container, data.tracks);
+ container.closest('.discover-section').style.display = 'block';
+
+ } catch (error) {
+ console.error('Error loading familiar favorites:', error);
+ }
+}
+
+// ===============================
+// BECAUSE YOU LISTEN TO
+// ===============================
+
+async function loadBecauseYouListenTo() {
+ try {
+ const resp = await fetch('/api/discover/because-you-listen-to');
+ if (!resp.ok) return;
+ const data = await resp.json();
+ if (!data.success || !data.sections || data.sections.length === 0) return;
+
+ // Find or create the BYLT container
+ let byltContainer = document.getElementById('discover-bylt-sections');
+ if (!byltContainer) {
+ // Insert after the release radar section
+ const releaseRadar = document.getElementById('discover-release-radar');
+ if (!releaseRadar) return;
+ const parent = releaseRadar.closest('.discover-section');
+ if (!parent) return;
+
+ byltContainer = document.createElement('div');
+ byltContainer.id = 'discover-bylt-sections';
+ parent.parentNode.insertBefore(byltContainer, parent.nextSibling);
+ }
+
+ byltContainer.innerHTML = data.sections.map((section, idx) => `
+
+
+ `).join('');
+
+ // Render track cards in each carousel
+ data.sections.forEach((section, idx) => {
+ const carousel = document.getElementById(`bylt-carousel-${idx}`);
+ if (!carousel) return;
+ carousel.innerHTML = section.tracks.map(t => `
+
+
+
+
+ ${section.artist_image ? `
` : ''}
+
+
+
+ Because you listen to
+ ${_esc(section.artist_name)}
+
+
+ `).join('');
+ });
+
+ } catch (error) {
+ console.debug('Error loading Because You Listen To:', error);
+ }
+}
+
+// ===============================
+// CACHE DISCOVERY SECTIONS
+// ===============================
+
+// Global arrays for cache discovery click handlers
+let _cacheDiscoverData = {};
+
+function _cacheDiscoverCard(item, type, sectionKey, index) {
+ const _esc = (s) => (s || '').replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
+ const coverUrl = item.image_url || '/static/placeholder-album.png';
+ const title = item.name || '';
+ const subtitle = item.artist_name || '';
+ const meta = item.release_date ? item.release_date.substring(0, 10) : (item.label || '');
+ const onclick = `openCacheDiscoverAlbum('${sectionKey}',${index})`;
+ const libBadge = item.in_library ? '
+ ${t.image_url ? `
` : '
+ 🎵
'}
+ ${_esc(t.name)}
+ ${_esc(t.artist)}
+ In Library
' : '';
+ return `
+
`;
+}
+
+async function openCacheDiscoverAlbum(sectionKey, index) {
+ const items = _cacheDiscoverData[sectionKey];
+ if (!items || !items[index]) return;
+ const item = items[index];
+ const source = item.source || 'spotify';
+ const albumId = item.entity_id;
+
+ // Deep cuts / genre dive tracks — find the real album by searching the cache
+ if (sectionKey === 'deep_cuts' || sectionKey === 'genre_dive_tracks') {
+ document.getElementById('genre-deep-dive-modal')?.remove();
+ const albumName = item.album_name || item.name || '';
+ const artistName = item.artist_name || '';
+ const trackAlbumId = item.album_id || '';
+ const trackSource = item.source || source;
+
+ if (!artistName) {
+ showToast('No artist data available for this track', 'error');
+ return;
+ }
+
+ showLoadingOverlay(`Loading ${albumName}...`);
+ try {
+ let resolvedSource = trackSource;
+ let resolvedId = trackAlbumId;
+ let response;
+
+ // If we have an album_id, use it directly
+ if (trackAlbumId) {
+ const _params = new URLSearchParams({ name: albumName, artist: artistName });
+ response = await fetch(`/api/discover/album/${trackSource}/${trackAlbumId}?${_params}`);
+ }
+
+ // Fallback: resolve by name+artist if no album_id or direct fetch failed
+ if (!trackAlbumId || (response && !response.ok)) {
+ const searchResp = await fetch(`/api/discover/resolve-cache-album?name=${encodeURIComponent(albumName)}&artist=${encodeURIComponent(artistName)}`);
+ if (searchResp.ok) {
+ const searchData = await searchResp.json();
+ if (searchData.success && searchData.entity_id) {
+ resolvedSource = searchData.source || trackSource;
+ resolvedId = searchData.entity_id;
+ const _params = new URLSearchParams({ name: albumName, artist: artistName });
+ response = await fetch(`/api/discover/album/${resolvedSource}/${resolvedId}?${_params}`);
+ }
+ }
+ }
+
+ if (!response || !response.ok) throw new Error('Failed to fetch album tracks');
+ const albumData = await response.json();
+ if (!albumData.tracks || albumData.tracks.length === 0) throw new Error('No tracks found');
+
+ const spotifyTracks = albumData.tracks.map(track => {
+ let artists = track.artists || albumData.artists || [{ name: artistName }];
+ if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+ return {
+ id: track.id, name: track.name, artists,
+ album: { id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album', total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '', images: albumData.images || [] },
+ duration_ms: track.duration_ms || 0, track_number: track.track_number || 0,
+ };
+ });
+ const artistContext = { id: albumData.artists?.[0]?.id || '', name: artistName, source: resolvedSource };
+ const albumContext = { id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album', total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '', images: albumData.images || [] };
+ await openDownloadMissingModalForYouTube(`discover_cache_${resolvedId}`, albumData.name, spotifyTracks, artistContext, albumContext);
+ hideLoadingOverlay();
+ } catch (error) {
+ console.error('Error opening deep cut album:', error);
+ showToast(`Failed to load album: ${error.message}`, 'error');
+ hideLoadingOverlay();
+ }
+ return;
+ }
+
+ if (!albumId) {
+ showToast('No album ID available', 'error');
+ return;
+ }
+
+ // Close genre deep dive modal if open
+ document.getElementById('genre-deep-dive-modal')?.remove();
+
+ showLoadingOverlay(`Loading ${item.name || 'album'}...`);
+ try {
+ const _params = new URLSearchParams({ name: item.name || '', artist: item.artist_name || '' });
+ let response = await fetch(`/api/discover/album/${source}/${albumId}?${_params}`);
+
+ // If 404 (stale cache entry), try resolving via name+artist
+ if (response.status === 404) {
+ const resolveResp = await fetch(`/api/discover/resolve-cache-album?name=${encodeURIComponent(item.name || '')}&artist=${encodeURIComponent(item.artist_name || '')}`);
+ if (resolveResp.ok) {
+ const resolved = await resolveResp.json();
+ if (resolved.success && resolved.entity_id && resolved.entity_id !== albumId) {
+ response = await fetch(`/api/discover/album/${resolved.source || source}/${resolved.entity_id}?${_params}`);
+ }
+ }
+ }
+
+ if (!response.ok) throw new Error('Album not available — it may have been removed from the source');
+ const albumData = await response.json();
+ if (!albumData.tracks || albumData.tracks.length === 0) throw new Error('No tracks found');
+
+ const spotifyTracks = albumData.tracks.map(track => {
+ let artists = track.artists || albumData.artists || [{ name: item.artist_name }];
+ if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+ return {
+ id: track.id,
+ name: track.name,
+ artists: artists,
+ album: {
+ id: albumData.id,
+ name: albumData.name,
+ album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0,
+ release_date: albumData.release_date || '',
+ images: albumData.images || [],
+ },
+ duration_ms: track.duration_ms || 0,
+ track_number: track.track_number || 0,
+ };
+ });
+
+ const artistContext = {
+ id: albumData.artists?.[0]?.id || '',
+ name: item.artist_name || albumData.artists?.[0]?.name || '',
+ source: source,
+ };
+ const albumContext = {
+ id: albumData.id,
+ name: albumData.name,
+ album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0,
+ release_date: albumData.release_date || '',
+ images: albumData.images || [],
+ };
+
+ await openDownloadMissingModalForYouTube(
+ `discover_cache_${albumId}`, albumData.name, spotifyTracks, artistContext, albumContext
+ );
+ hideLoadingOverlay();
+ } catch (error) {
+ console.error('Error opening cache discover album:', error);
+ showToast(`Failed to load album: ${error.message}`, 'error');
+ hideLoadingOverlay();
+ }
+}
+
+function _insertCacheSection(id, title, subtitle, html, position) {
+ const container = document.getElementById('discover-bylt-sections') || document.querySelector('.discover-container');
+ if (!container) return;
+ let section = document.getElementById(id);
+ if (!section) {
+ section = document.createElement('div');
+ section.id = id;
+ section.className = 'discover-section';
+ if (position === 'top') {
+ // Insert after the hero section (first child), not before it
+ const hero = container.querySelector('.discover-hero');
+ if (hero && hero.nextSibling) {
+ container.insertBefore(section, hero.nextSibling);
+ } else {
+ container.prepend(section);
+ }
+ } else {
+ container.appendChild(section);
+ }
+ }
+ section.innerHTML = `
+
+ })
+ ${libBadge}
+
+
+
+ ${_esc(title)}
+${_esc(subtitle)}
+ ${meta ? `` : ''} +
+
+
+
+ ${subtitle}
+ ${title}
+${html}
+ `;
+}
+
+async function loadCacheUndiscoveredAlbums() {
+ try {
+ const resp = await fetch('/api/discover/undiscovered-albums');
+ if (!resp.ok) return;
+ const data = await resp.json();
+ if (!data.success || !data.albums || !data.albums.length) return;
+ _cacheDiscoverData['undiscovered'] = data.albums;
+ _insertCacheSection('cache-undiscovered',
+ 'Undiscovered Albums', 'From artists you love',
+ data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'undiscovered', i)).join(''));
+ } catch (e) { console.debug('Cache undiscovered albums:', e); }
+}
+
+async function loadCacheGenreNewReleases() {
+ try {
+ const resp = await fetch('/api/discover/genre-new-releases');
+ if (!resp.ok) return;
+ const data = await resp.json();
+ if (!data.success || !data.albums || !data.albums.length) return;
+ _cacheDiscoverData['genre_releases'] = data.albums;
+ _insertCacheSection('cache-genre-releases',
+ 'New In Your Genres', 'Released in the last 90 days',
+ data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'genre_releases', i)).join(''));
+ } catch (e) { console.debug('Cache genre new releases:', e); }
+}
+
+async function loadCacheLabelExplorer() {
+ try {
+ const resp = await fetch('/api/discover/label-explorer');
+ if (!resp.ok) return;
+ const data = await resp.json();
+ if (!data.success || !data.albums || !data.albums.length) return;
+ _cacheDiscoverData['label_explorer'] = data.albums;
+ _insertCacheSection('cache-label-explorer',
+ 'From Your Labels', 'Popular on labels in your library',
+ data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'label_explorer', i)).join(''));
+ } catch (e) { console.debug('Cache label explorer:', e); }
+}
+
+async function loadCacheDeepCuts() {
+ try {
+ const resp = await fetch('/api/discover/deep-cuts');
+ if (!resp.ok) return;
+ const data = await resp.json();
+ if (!data.success || !data.tracks || !data.tracks.length) return;
+ _cacheDiscoverData['deep_cuts'] = data.tracks;
+ _insertCacheSection('cache-deep-cuts',
+ 'Deep Cuts', 'Hidden tracks from artists you know',
+ data.tracks.map((t, i) => _cacheDiscoverCard(t, 'track', 'deep_cuts', i)).join(''));
+ } catch (e) { console.debug('Cache deep cuts:', e); }
+}
+
+async function loadCacheGenreExplorer() {
+ try {
+ const resp = await fetch('/api/discover/genre-explorer');
+ if (!resp.ok) return;
+ const data = await resp.json();
+ if (!data.success || !data.genres || !data.genres.length) return;
+ const _esc = (s) => (s || '').replace(/&/g, '&').replace(//g, '>').replace(/'/g, ''');
+ const html = `${data.genres.map(g => `
+
`;
+ _insertCacheSection('cache-genre-explorer',
+ 'Genre Explorer', 'Tap a genre to explore', html, 'top');
+ } catch (e) { console.debug('Cache genre explorer:', e); }
+}
+
+async function openGenreDeepDive(genre) {
+ document.getElementById('genre-deep-dive-modal')?.remove();
+
+ const _esc = (s) => (s || '').replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''');
+ const _fmtNum = (n) => {
+ if (!n) return '';
+ if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+ if (n >= 1000) return (n / 1000).toFixed(0) + 'K';
+ return n.toString();
+ };
+ const _fmtDur = (ms) => {
+ if (!ms) return '';
+ const m = Math.floor(ms / 60000);
+ const s = Math.floor((ms % 60000) / 1000);
+ return `${m}:${s.toString().padStart(2, '0')}`;
+ };
+
+ const overlay = document.createElement('div');
+ overlay.id = 'genre-deep-dive-modal';
+ overlay.className = 'genre-dive-overlay';
+ overlay.innerHTML = `
+
+ ${_esc(g.genre)}
+ ${g.artist_count} artist${g.artist_count !== 1 ? 's' : ''}
+ ${!g.explored ? 'New' : ''}
+
+ `).join('')}
+
+ `;
+ overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+ document.body.appendChild(overlay);
+
+ try {
+ const resp = await fetch(`/api/discover/genre-deep-dive?genre=${encodeURIComponent(genre)}`);
+ if (!resp.ok) throw new Error('Failed to load');
+ const data = await resp.json();
+ if (!data.success) throw new Error('Failed');
+
+ const body = document.getElementById('genre-dive-body');
+ if (!body) return;
+
+ // Update header with counts
+ const subtitle = document.querySelector('.genre-dive-subtitle');
+ if (subtitle) {
+ const parts = [];
+ if (data.artists?.length) parts.push(`${data.artists.length} artist${data.artists.length !== 1 ? 's' : ''}`);
+ if (data.tracks?.length) parts.push(`${data.tracks.length} track${data.tracks.length !== 1 ? 's' : ''}`);
+ if (data.albums?.length) parts.push(`${data.albums.length} album${data.albums.length !== 1 ? 's' : ''}`);
+ subtitle.textContent = parts.length ? parts.join(' · ') : 'Genre Deep Dive';
+ }
+
+ let html = '';
+
+ // Related genres — clickable pills that reload the modal
+ if (data.related_genres && data.related_genres.length) {
+ html += ``;
+ }
+
+ // Artists section — clickable, navigates to artist page
+ // Uses library_id for in-library artists (source-agnostic), falls back to search by name
+ if (data.artists && data.artists.length) {
+ html += `
+
+
+
+
+ Genre Deep Dive
+ ${_esc(genre)}
+
+
+ Exploring ${_esc(genre)}...
+
+
`;
+ }
+
+ // Tracks section — clickable, opens album download
+ if (data.tracks && data.tracks.length) {
+ _cacheDiscoverData['genre_dive_tracks'] = data.tracks;
+ html += `Artists in ${_esc(genre)}
+
+ ${data.artists.map(a => {
+ // Always open on Artists page with discography — pass source for correct routing
+ const imgUrl = _esc(a.image_url || '');
+ const artSource = _esc(a.source || '');
+ const clickAction = `onclick="document.getElementById('genre-deep-dive-modal').remove();navigateToPage('artists');setTimeout(()=>selectArtistForDetail({id:'${_esc(a.entity_id)}',name:'${_esc(a.name)}',image_url:'${imgUrl}'},{source:'${artSource}'}),300)"`;
+ const srcClass = (a.source || '').toLowerCase();
+ return `
+
+
`;
+ }).join('')}
+
+ ${!a.image_url ? '🎤' : ''}
+
+
+ ${_esc(a.name)}
+ ${a.followers ? `` : ''}
+ ${a.library_id ? 'In Library
' : ''}
+
+
`;
+ }
+
+ // Albums section
+ if (data.albums && data.albums.length) {
+ _cacheDiscoverData['genre_dive_albums'] = data.albums;
+ html += `Popular Tracks
+
+ ${data.tracks.map((t, i) => {
+ const tSrcClass = (t.source || '').toLowerCase();
+ return `
+
+
+
+ `}).join('')}
+ ${i + 1}
+
+ ${!t.image_url ? '🎵' : ''}
+
+
+
+
+ ${_esc(t.name)}
+ ${_esc(t.artist_name)}${t.album_name ? ' · ' + _esc(t.album_name) : ''}
+ ${_fmtDur(t.duration_ms)}
+
+
`;
+ }
+
+ if (!html) {
+ html = 'Albums
+${data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'genre_dive_albums', i)).join('')}
+ No cached data found for this genre yet
Search for artists in this genre to build up the cache
Failed to load genre data
';
+ }
+}
+
+// ===============================
+// BUILD A PLAYLIST FEATURE
+// ===============================
+
+let buildPlaylistSearchTimeout = null;
+
+async function searchBuildPlaylistArtists() {
+ const searchInput = document.getElementById('build-playlist-search');
+ const resultsContainer = document.getElementById('build-playlist-search-results');
+ const spinner = document.getElementById('bp-search-spinner');
+ const query = searchInput.value.trim();
+
+ if (!query) {
+ resultsContainer.innerHTML = '';
+ resultsContainer.style.display = 'none';
+ if (spinner) spinner.style.display = 'none';
+ return;
+ }
+
+ // Debounce search
+ clearTimeout(buildPlaylistSearchTimeout);
+ buildPlaylistSearchTimeout = setTimeout(async () => {
+ if (spinner) spinner.style.display = 'flex';
+ try {
+ const response = await fetch(`/api/discover/build-playlist/search-artists?query=${encodeURIComponent(query)}`);
+ const data = await response.json();
+ if (!response.ok) {
+ showToast(data.error || 'Search failed', 'error');
+ return;
+ }
+ if (!data.success || !data.artists || data.artists.length === 0) {
+ resultsContainer.innerHTML = 'No artists found for "' + query.replace(/';
+ resultsContainer.style.display = 'block';
+ return;
+ }
+
+ // Filter out already-selected artists
+ const selectedIds = new Set(buildPlaylistSelectedArtists.map(a => a.id));
+ const filtered = data.artists.filter(a => !selectedIds.has(a.id));
+
+ if (filtered.length === 0) {
+ resultsContainer.innerHTML = '
+ No candidates were found during search.
+ ${i + 1}
+ ${escapeHtml(shortFile)}
+ ${qBadge}${c.bitrate ? ` ${c.bitrate}kbps` : ''}
+ ${fmtSize(c.size)}
+ ${fmtDur(c.duration)}
+ ${escapeHtml(c.username || '-')}
+ `;
+ });
+ }
+
+ overlay = document.createElement('div');
+ overlay.id = 'candidates-modal-overlay';
+ overlay.className = 'candidates-modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) closeCandidatesModal(); };
+ overlay.innerHTML = `
+ ';
+ return;
+ }
+
+ let html = '';
+ results.forEach((result, index) => {
+ const isAlbum = result.result_type === 'album';
+
+ if (isAlbum) {
+ const trackCount = result.tracks ? result.tracks.length : 0;
+ const totalSize = result.total_size ? `${(result.total_size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
+
+ // Generate individual track items
+ let trackListHtml = '';
+ if (result.tracks && result.tracks.length > 0) {
+ // Detect disc boundaries from track number resets for multi-disc albums
+ let currentDisc = 1;
+ let lastTrackNum = 0;
+ let discBreaks = new Set();
+ result.tracks.forEach((track, trackIndex) => {
+ const tn = track.track_number || 0;
+ if (trackIndex > 0 && tn > 0 && tn <= lastTrackNum) {
+ currentDisc++;
+ discBreaks.add(trackIndex);
+ }
+ if (tn > 0) lastTrackNum = tn;
+ });
+ const isMultiDisc = discBreaks.size > 0;
+ if (isMultiDisc) {
+ trackListHtml += `
`;
+ card.removeAttribute('data-needs-image');
+ }
+ } catch (e) { /* ignore */ }
+ }
+}
+
+function _gsRenderTabs() {
+ const el = document.getElementById('gsearch-tabs');
+ if (!el) return;
+ const sources = Object.keys(_gsState.sources);
+ const labels = {
+ spotify: 'Spotify',
+ itunes: 'Apple Music',
+ deezer: 'Deezer',
+ discogs: 'Discogs',
+ hydrabase: 'Hydrabase',
+ youtube_videos: 'Music Videos',
+ musicbrainz: 'MusicBrainz',
+ };
+ const visibleSources = sources.filter(s => {
+ const d = _gsState.sources[s] || {};
+ const count = s === 'youtube_videos'
+ ? (d.videos?.length || 0)
+ : (d.artists?.length || 0) + (d.albums?.length || 0) + (d.tracks?.length || 0);
+ const isLoading = !!(d._loading && d._loading.size > 0);
+ return isLoading || count > 0 || s === _gsState.activeSource;
+ });
+ if (visibleSources.length < 2) { el.style.display = 'none'; return; }
+ el.style.display = 'flex';
+ el.innerHTML = visibleSources.map(s => {
+ const d = _gsState.sources[s];
+ const c = s === 'youtube_videos'
+ ? (d.videos?.length || 0)
+ : (d.artists?.length || 0) + (d.albums?.length || 0) + (d.tracks?.length || 0);
+ return ``;
+ }).join('');
+}
+
+function _gsSwitchSource(src) {
+ _gsState._lastInteraction = Date.now();
+ _gsState.activeSource = src;
+ _gsRender(_gsState.data);
+ const input = document.getElementById('gsearch-input');
+ if (input) input.focus();
+}
+
+function _gsClickArtist(id, name, isLibrary) {
+ _gsDeactivate();
+ if (isLibrary) {
+ // Same as enhanced search: navigateToArtistDetail
+ navigateToArtistDetail(id, name);
+ } else {
+ // Same as enhanced search: navigate to Artists page + selectArtistForDetail
+ navigateToPage('artists');
+ setTimeout(() => {
+ selectArtistForDetail({ id, name, image_url: '' }, {
+ source: _gsState.activeSource || '',
+ });
+ }, 150);
+ }
+}
+
+async function _gsClickAlbum(albumId, albumName, artistName, imageUrl, source) {
+ _gsDeactivate();
+ // Same flow as handleEnhancedSearchAlbumClick — fetch album, open download modal
+ showLoadingOverlay('Loading album...');
+ try {
+ const params = new URLSearchParams({ name: albumName, artist: artistName });
+ if (source && source !== 'spotify') params.set('source', source);
+ const response = await fetch(`/api/spotify/album/${albumId}?${params}`);
+ if (!response.ok) throw new Error(`Failed to load album: ${response.status}`);
+ const albumData = await response.json();
+
+ if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
+ hideLoadingOverlay();
+ showToast(`No tracks available for "${albumName}"`, 'warning');
+ return;
+ }
+
+ const enrichedTracks = albumData.tracks.map(t => ({
+ ...t,
+ album: { name: albumData.name, id: albumData.id, album_type: albumData.album_type || 'album', images: albumData.images || [], release_date: albumData.release_date, total_tracks: albumData.total_tracks }
+ }));
+
+ const virtualPlaylistId = `enhanced_search_album_${albumId}`;
+ const firstArtist = (albumData.artists || [])[0] || {};
+ const artistObj = { id: firstArtist.id || '', name: firstArtist.name || artistName, source: source || '' };
+ const albumObj = { name: albumData.name, id: albumData.id, album_type: albumData.album_type || 'album', images: albumData.images || [], release_date: albumData.release_date, total_tracks: albumData.total_tracks, artists: albumData.artists || [{ name: artistName }] };
+
+ await openDownloadMissingModalForArtistAlbum(virtualPlaylistId, `[${artistName}] ${albumData.name}`, enrichedTracks, albumObj, artistObj, false);
+
+ // Register download bubble (same pattern as enhanced search)
+ registerSearchDownload(
+ {
+ id: albumData.id,
+ name: albumData.name,
+ artist: artistName,
+ image_url: albumData.images?.[0]?.url || imageUrl || null,
+ images: albumData.images || []
+ },
+ 'album',
+ virtualPlaylistId,
+ artistName
+ );
+
+ } catch (e) {
+ hideLoadingOverlay();
+ showToast('Failed to load album: ' + e.message, 'error');
+ }
+}
+
+async function _gsClickTrack(artistName, trackName, albumName, trackId, imageUrl, durationMs) {
+ _gsDeactivate();
+
+ // Build enriched track + open download modal directly (same as enhanced search)
+ const virtualPlaylistId = `gsearch_track_${trackId || (artistName + '_' + trackName).replace(/\s/g, '_')}`;
+ const enrichedTrack = {
+ id: trackId || '',
+ name: trackName,
+ artists: [artistName],
+ album: { name: albumName || '', id: null, album_type: 'single', images: imageUrl ? [{ url: imageUrl }] : [], total_tracks: 1 },
+ duration_ms: durationMs || 0,
+ image_url: imageUrl || '',
+ };
+ const albumObject = {
+ name: albumName || '', id: null, album_type: 'single',
+ images: imageUrl ? [{ url: imageUrl }] : [],
+ artists: [{ name: artistName }], total_tracks: 1,
+ };
+ const artistObject = { id: null, name: artistName };
+ const playlistName = `${artistName} - ${trackName}`;
+
+ try {
+ showLoadingOverlay('Loading track...');
+ await openDownloadMissingModalForArtistAlbum(
+ virtualPlaylistId, playlistName, [enrichedTrack], albumObject, artistObject, false
+ );
+
+ // Register download bubble (same pattern as enhanced search)
+ registerSearchDownload(
+ {
+ id: trackId || '',
+ name: trackName,
+ artist: artistName,
+ image_url: imageUrl || null,
+ images: imageUrl ? [{ url: imageUrl }] : []
+ },
+ 'track',
+ virtualPlaylistId,
+ artistName
+ );
+ } catch (e) {
+ console.error('Error opening track download:', e);
+ // Fallback: navigate to enhanced search
+ navigateToPage('downloads');
+ setTimeout(() => {
+ const input = document.getElementById('enhanced-search-input');
+ if (input) { input.value = `${artistName} ${trackName}`.trim(); input.dispatchEvent(new Event('input')); }
+ }, 300);
+ } finally {
+ hideLoadingOverlay();
+ }
+}
+
+async function _gsPlayTrack(trackName, artistName, albumName) {
+ try {
+ showToast('Searching for stream...', 'info');
+ const res = await fetch('/api/enhanced-search/stream-track', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ track_name: trackName, artist_name: artistName, album_name: albumName })
+ });
+ const data = await res.json();
+ if (data.success && data.result) {
+ if (typeof startStream === 'function') {
+ startStream(data.result);
+ } else {
+ showToast('Streaming not available', 'error');
+ }
+ } else {
+ showToast(data.error || 'No stream found', 'error');
+ }
+ } catch (e) {
+ showToast('Stream failed: ' + e.message, 'error');
+ }
+}
+
+// Async library check for global search results — adds badges + swaps play buttons
+async function _gsLibraryCheck() {
+ try {
+ const src = _gsState.sources[_gsState.activeSource] || {};
+ const allAlbums = src.albums || [];
+ const albums = allAlbums.filter(a => !a.album_type || a.album_type === 'album' || a.album_type === 'compilation');
+ const singles = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
+ const tracks = src.tracks || [];
+ if (!allAlbums.length && !tracks.length) return;
+
+ const res = await fetch('/api/enhanced-search/library-check', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ albums: allAlbums.map(a => ({ name: a.name, artist: a.artist || (a.artists ? a.artists.join(', ') : '') })),
+ tracks: tracks.map(t => ({ name: t.name, artist: t.artist || (t.artists ? t.artists.join(', ') : '') })),
+ })
+ });
+ const checkData = await res.json();
+
+ // Add "In Library" badges to albums — match by index against allAlbums order
+ const albumResults = checkData.albums || [];
+ let albumIdx = 0;
+ // Albums section
+ document.querySelectorAll('#gsearch-results .gsearch-results-body').forEach(body => {
+ // Find all gsearch-item elements and tag ones that are albums
+ const sections = body.querySelectorAll('.gsearch-section-header');
+ sections.forEach(header => {
+ const text = header.textContent;
+ const isAlbumSection = text.includes('Albums') || text.includes('Singles');
+ if (!isAlbumSection) return;
+ const grid = header.nextElementSibling;
+ if (!grid) return;
+ const items = grid.querySelectorAll('.gsearch-item');
+ items.forEach(item => {
+ if (albumIdx < albumResults.length && albumResults[albumIdx]) {
+ if (!item.querySelector('.gsearch-item-badge')) {
+ const badge = document.createElement('span');
+ badge.className = 'gsearch-item-badge';
+ badge.textContent = 'In Library';
+ item.appendChild(badge);
+ }
+ }
+ albumIdx++;
+ });
+ });
+ });
+
+ // Tag tracks + swap play buttons for library playback
+ const trackResults = checkData.tracks || [];
+ const trackEls = document.querySelectorAll('#gsearch-results .gsearch-track');
+ trackEls.forEach((el, i) => {
+ const tr = trackResults[i];
+ if (tr && tr.in_library) {
+ // Add badge
+ if (!el.querySelector('.gsearch-item-badge')) {
+ const badge = document.createElement('span');
+ badge.className = 'gsearch-item-badge';
+ badge.textContent = 'In Library';
+ badge.style.marginRight = '4px';
+ el.querySelector('.gsearch-track-dur')?.before(badge);
+ }
+
+ // Swap play button to library playback
+ if (tr.file_path) {
+ const playBtn = el.querySelector('.gsearch-play-btn');
+ if (playBtn) {
+ const newBtn = playBtn.cloneNode(true);
+ newBtn.removeAttribute('onclick');
+ newBtn.title = 'Play from library';
+ newBtn.style.background = 'rgba(76,175,80,0.15)';
+ newBtn.style.color = '#4caf50';
+ newBtn.addEventListener('click', e => {
+ e.stopPropagation();
+ playLibraryTrack(
+ { id: tr.track_id, title: tr.title, file_path: tr.file_path, _stats_image: tr.album_thumb_url || null },
+ tr.album_title || '',
+ tr.artist_name || ''
+ );
+ });
+ playBtn.replaceWith(newBtn);
+ }
+ }
+ } else if (tr && tr.in_wishlist) {
+ if (!el.querySelector('.gsearch-item-badge')) {
+ const badge = document.createElement('span');
+ badge.className = 'gsearch-item-badge gsearch-wishlist-badge';
+ badge.textContent = 'In Wishlist';
+ badge.style.marginRight = '4px';
+ el.querySelector('.gsearch-track-dur')?.before(badge);
+ }
+ }
+ });
+ } catch (e) {
+ // Non-critical
+ }
+}
+
+function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+}
+
+/**
+ * Escape a value for safe use inside a single-quoted JS string literal
+ * within a double-quoted HTML attribute (e.g. onclick="fn('${val}')").
+ *
+ * Layer 1 (JS): escape \ and ' so the JS string parses correctly.
+ * Layer 2 (HTML): escape &, ", <, > so the HTML attribute parses correctly.
+ * The browser applies these in reverse: HTML-decode first, then JS-execute.
+ */
+function escapeForInlineJs(str) {
+ if (str == null) return '';
+ return String(str)
+ .replace(/\\/g, '\\\\') // JS: literal backslash
+ .replace(/'/g, "\\'") // JS: single quote
+ .replace(/&/g, '&') // HTML: ampersand
+ .replace(/"/g, '"') // HTML: double quote
+ .replace(//g, '>'); // HTML: greater-than
+}
+
+function formatArtists(artists) {
+ if (!artists || !Array.isArray(artists)) {
+ return 'Unknown Artist';
+ }
+
+ // Handle both string arrays and object arrays with 'name' property
+ const artistNames = artists.map(artist => {
+ let artistName;
+ if (typeof artist === 'string') {
+ artistName = artist;
+ } else if (artist && typeof artist === 'object' && artist.name) {
+ artistName = artist.name;
+ } else {
+ artistName = 'Unknown Artist';
+ }
+
+ // Clean featured artists from the name
+ return cleanArtistName(artistName);
+ });
+
+ return artistNames.join(', ') || 'Unknown Artist';
+}
+
+async function checkForUpdates() {
+ try {
+ const res = await fetch('/api/update-check');
+ if (!res.ok) return;
+ const data = await res.json();
+ const btn = document.querySelector('.version-button');
+ if (!btn) return;
+ if (data.update_available) {
+ const dismissed = localStorage.getItem('soulsync-update-dismissed');
+ if (dismissed !== data.latest_sha) {
+ // Add glow class
+ btn.classList.add('update-available');
+ // Add UPDATE badge if not already present
+ if (!btn.querySelector('.update-badge')) {
+ const badge = document.createElement('span');
+ badge.className = 'update-badge';
+ badge.textContent = 'UPDATE';
+ btn.appendChild(badge);
+ }
+ // Show toast on first detection (not if already notified this session)
+ const notified = sessionStorage.getItem('soulsync-update-notified');
+ if (notified !== data.latest_sha) {
+ sessionStorage.setItem('soulsync-update-notified', data.latest_sha);
+ showToast(data.is_docker
+ ? 'A new SoulSync update has been pushed to the repo — Docker image will be updated soon!'
+ : 'A new SoulSync update is available!', 'info');
+ }
+ }
+ } else {
+ btn.classList.remove('update-available');
+ const badge = btn.querySelector('.update-badge');
+ if (badge) badge.remove();
+ }
+ } catch (e) {
+ console.debug('Update check failed:', e);
+ }
+}
+
+async function showVersionInfo() {
+ // Check update status before dismissing so we can pass it to the modal
+ let updateInfo = null;
+ const btn = document.querySelector('.version-button');
+ const hadUpdate = btn && btn.classList.contains('update-available');
+
+ // Dismiss update glow when user opens the modal
+ if (hadUpdate) {
+ btn.classList.remove('update-available');
+ const badge = btn.querySelector('.update-badge');
+ if (badge) badge.remove();
+ try {
+ const updateRes = await fetch('/api/update-check');
+ if (updateRes.ok) {
+ updateInfo = await updateRes.json();
+ if (updateInfo.latest_sha) {
+ localStorage.setItem('soulsync-update-dismissed', updateInfo.latest_sha);
+ }
+ }
+ } catch (e) { /* ignore */ }
+ }
+
+ try {
+ console.log('Fetching version info...');
+
+ // Fetch version data from API
+ const response = await fetch('/api/version-info');
+ if (!response.ok) {
+ throw new Error('Failed to fetch version info');
+ }
+
+ const versionData = await response.json();
+ console.log('Version data received:', versionData);
+
+ // Populate modal content
+ populateVersionModal(versionData, hadUpdate ? updateInfo : null);
+
+ // Show modal
+ const modalOverlay = document.getElementById('version-modal-overlay');
+ modalOverlay.classList.remove('hidden');
+
+ console.log('Version modal opened');
+
+ } catch (error) {
+ console.error('Error showing version info:', error);
+ showToast('Failed to load version information', 'error');
+ }
+}
+
+function closeVersionModal() {
+ const modalOverlay = document.getElementById('version-modal-overlay');
+ modalOverlay.classList.add('hidden');
+ console.log('Version modal closed');
+}
+
+function populateVersionModal(versionData, updateInfo) {
+ const container = document.getElementById('version-content-container');
+ if (!container) {
+ console.error('Version content container not found');
+ return;
+ }
+
+ // Update header with dynamic data
+ const titleElement = document.querySelector('.version-modal-title');
+ const subtitleElement = document.querySelector('.version-modal-subtitle');
+
+ if (titleElement) titleElement.textContent = versionData.title;
+ if (subtitleElement) subtitleElement.textContent = versionData.subtitle;
+
+ // Clear existing content
+ container.innerHTML = '';
+
+ // Show update banner if an update was available when modal was opened
+ if (updateInfo && updateInfo.update_available) {
+ const banner = document.createElement('div');
+ banner.className = 'version-update-banner';
+ const isDocker = updateInfo.is_docker;
+ banner.innerHTML = `
+
+
+ `;
+ container.appendChild(banner);
+ }
+
+ // Create sections
+ versionData.sections.forEach(section => {
+ const sectionDiv = document.createElement('div');
+ sectionDiv.className = 'version-feature-section';
+
+ // Section title
+ const titleDiv = document.createElement('div');
+ titleDiv.className = 'version-section-title';
+ titleDiv.textContent = section.title;
+ sectionDiv.appendChild(titleDiv);
+
+ // Section description
+ const descDiv = document.createElement('div');
+ descDiv.className = 'version-section-description';
+ descDiv.textContent = section.description;
+ sectionDiv.appendChild(descDiv);
+
+ // Features list
+ const featuresList = document.createElement('ul');
+ featuresList.className = 'version-feature-list';
+
+ section.features.forEach(feature => {
+ const featureItem = document.createElement('li');
+ featureItem.className = 'version-feature-item';
+ featureItem.textContent = feature;
+ featuresList.appendChild(featureItem);
+ });
+
+ sectionDiv.appendChild(featuresList);
+
+ // Usage note (if present)
+ if (section.usage_note) {
+ const usageDiv = document.createElement('div');
+ usageDiv.className = 'version-usage-note';
+ usageDiv.textContent = `💡 ${section.usage_note}`;
+ sectionDiv.appendChild(usageDiv);
+ }
+
+ container.appendChild(sectionDiv);
+ });
+
+ console.log('Version modal content populated');
+}
+
+// ===============================
+// ADDITIONAL STYLES FOR SEARCH RESULTS
+// ===============================
+
+// Add dynamic styles for search results (since they're created dynamically)
+const additionalStyles = `
+
+`;
+
+// Inject additional styles
+document.head.insertAdjacentHTML('beforeend', additionalStyles);
+
+// ============================================================================
+
diff --git a/webui/static/enrichment.js b/webui/static/enrichment.js
new file mode 100644
index 00000000..3a361baf
--- /dev/null
+++ b/webui/static/enrichment.js
@@ -0,0 +1,3552 @@
+// MUSICBRAINZ ENRICHMENT UI - PHASE 5 WEB UI
+// ============================================================================
+
+/**
+ * Poll MusicBrainz status every 2 seconds and update UI
+ */
+async function updateMusicBrainzStatus() {
+ if (socketConnected) return; // WebSocket handles this
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/musicbrainz/status');
+ if (!response.ok) { console.warn('MusicBrainz status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateMusicBrainzStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating MusicBrainz status:', error);
+ }
+}
+
+function updateMusicBrainzStatusFromData(data) {
+ const button = document.getElementById('musicbrainz-button');
+ if (!button) return;
+
+ // Update button state classes
+ button.classList.remove('active', 'paused', 'complete');
+ if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ } else if (data.paused) {
+ button.classList.add('paused');
+ }
+
+ // Update tooltip content
+ const tooltipStatus = document.getElementById('mb-tooltip-status');
+ const tooltipCurrent = document.getElementById('mb-tooltip-current');
+ const tooltipProgress = document.getElementById('mb-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.idle) {
+ tooltipStatus.textContent = 'Complete';
+ } else if (data.running && !data.paused) {
+ tooltipStatus.textContent = 'Running';
+ } else if (data.paused) {
+ tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused';
+ } else {
+ tooltipStatus.textContent = 'Idle';
+ }
+ }
+
+ if (tooltipCurrent) {
+ if (data.idle) {
+ tooltipCurrent.textContent = 'All items processed';
+ } else if (data.current_item && data.current_item.name) {
+ const type = data.current_item.type || 'item';
+ const name = data.current_item.name;
+ tooltipCurrent.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)}: "${name}"`;
+ } else {
+ tooltipCurrent.textContent = 'No active matches';
+ }
+ }
+
+ if (tooltipProgress && data.progress) {
+ const artists = data.progress.artists || {};
+ const albums = data.progress.albums || {};
+ const tracks = data.progress.tracks || {};
+
+ const currentType = data.current_item?.type;
+ let progressText = '';
+
+ const artistsComplete = artists.matched >= artists.total;
+ const albumsComplete = albums.matched >= albums.total;
+
+ if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total} (${artists.percent || 0}%)`;
+ } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total} (${albums.percent || 0}%)`;
+ } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total} (${tracks.percent || 0}%)`;
+ } else {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total} (${artists.percent || 0}%)`;
+ }
+
+ tooltipProgress.textContent = progressText;
+ }
+}
+
+/**
+ * Toggle MusicBrainz enrichment pause/resume
+ */
+async function toggleMusicBrainzEnrichment() {
+ try {
+ const button = document.getElementById('musicbrainz-button');
+ if (!button) return;
+
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/musicbrainz/pause' : '/api/musicbrainz/resume';
+
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (!response.ok) {
+ throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} MusicBrainz enrichment`);
+ }
+
+ // Immediately update UI
+ await updateMusicBrainzStatus();
+
+ console.log(`✅ MusicBrainz enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+ } catch (error) {
+ console.error('Error toggling MusicBrainz enrichment:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+// Initialize MusicBrainz UI on page load
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('musicbrainz-button');
+ if (button) {
+ button.addEventListener('click', toggleMusicBrainzEnrichment);
+ // Start polling
+ updateMusicBrainzStatus();
+ setInterval(updateMusicBrainzStatus, 2000); // Poll every 2 seconds
+ console.log('✅ MusicBrainz UI initialized');
+ }
+ });
+} else {
+ const button = document.getElementById('musicbrainz-button');
+ if (button) {
+ button.addEventListener('click', toggleMusicBrainzEnrichment);
+ // Start polling
+ updateMusicBrainzStatus();
+ setInterval(updateMusicBrainzStatus, 2000); // Poll every 2 seconds
+ console.log('✅ MusicBrainz UI initialized');
+ }
+}
+
+// ============================================================================
+// AUDIODB ENRICHMENT UI
+// ============================================================================
+
+/**
+ * Poll AudioDB status every 2 seconds and update UI
+ */
+async function updateAudioDBStatus() {
+ if (socketConnected) return; // WebSocket handles this
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/audiodb/status');
+ if (!response.ok) { console.warn('AudioDB status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateAudioDBStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating AudioDB status:', error);
+ }
+}
+
+function updateAudioDBStatusFromData(data) {
+ const button = document.getElementById('audiodb-button');
+ if (!button) return;
+
+ button.classList.remove('active', 'paused', 'complete');
+ if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ } else if (data.paused) {
+ button.classList.add('paused');
+ }
+
+ const tooltipStatus = document.getElementById('audiodb-tooltip-status');
+ const tooltipCurrent = document.getElementById('audiodb-tooltip-current');
+ const tooltipProgress = document.getElementById('audiodb-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+ else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
+ else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
+ else { tooltipStatus.textContent = 'Idle'; }
+ }
+
+ if (tooltipCurrent) {
+ if (data.idle) {
+ tooltipCurrent.textContent = 'All items processed';
+ } else if (data.current_item && data.current_item.name) {
+ const type = data.current_item.type || 'item';
+ const name = data.current_item.name;
+ tooltipCurrent.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)}: "${name}"`;
+ } else {
+ tooltipCurrent.textContent = 'No active matches';
+ }
+ }
+
+ if (tooltipProgress && data.progress) {
+ const artists = data.progress.artists || {};
+ const albums = data.progress.albums || {};
+ const tracks = data.progress.tracks || {};
+
+ const currentType = data.current_item?.type;
+ let progressText = '';
+
+ const artistsComplete = artists.matched >= artists.total;
+ const albumsComplete = albums.matched >= albums.total;
+
+ if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+ } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ } else {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ }
+
+ tooltipProgress.textContent = progressText;
+ }
+}
+
+function updateDiscogsStatusFromData(data) {
+ const button = document.getElementById('discogs-button');
+ if (!button) return;
+
+ button.classList.remove('active', 'paused', 'complete');
+ if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ } else if (data.paused) {
+ button.classList.add('paused');
+ }
+
+ const tooltipStatus = document.getElementById('discogs-tooltip-status');
+ const tooltipCurrent = document.getElementById('discogs-tooltip-current');
+ const tooltipProgress = document.getElementById('discogs-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.idle) tooltipStatus.textContent = 'Complete';
+ else if (data.running && !data.paused) tooltipStatus.textContent = 'Running';
+ else if (data.paused) tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused';
+ else tooltipStatus.textContent = 'Idle';
+ }
+
+ if (tooltipCurrent) {
+ if (data.idle) tooltipCurrent.textContent = 'All items processed';
+ else if (data.current_item) tooltipCurrent.textContent = `Processing: "${data.current_item}"`;
+ else tooltipCurrent.textContent = 'No active matches';
+ }
+
+ if (tooltipProgress && data.stats) {
+ const s = data.stats;
+ tooltipProgress.textContent = `Matched: ${s.matched || 0} | Not found: ${s.not_found || 0} | Pending: ${s.pending || 0}`;
+ }
+}
+
+async function toggleDiscogsEnrichment() {
+ try {
+ const button = document.getElementById('discogs-button');
+ if (!button) return;
+ const isPaused = button.classList.contains('paused') || button.classList.contains('complete');
+ const endpoint = isPaused ? '/api/discogs/resume' : '/api/discogs/pause';
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (response.ok) {
+ showToast(isPaused ? 'Discogs enrichment resumed' : 'Discogs enrichment paused', 'info');
+ }
+ } catch (e) {
+ showToast('Failed to toggle Discogs enrichment', 'error');
+ }
+}
+
+/**
+ * Toggle AudioDB enrichment pause/resume
+ */
+async function toggleAudioDBEnrichment() {
+ try {
+ const button = document.getElementById('audiodb-button');
+ if (!button) return;
+
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/audiodb/pause' : '/api/audiodb/resume';
+
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (!response.ok) {
+ throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} AudioDB enrichment`);
+ }
+
+ // Immediately update UI
+ await updateAudioDBStatus();
+
+ console.log(`✅ AudioDB enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+ } catch (error) {
+ console.error('Error toggling AudioDB enrichment:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+// Initialize AudioDB UI on page load
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('audiodb-button');
+ if (button) {
+ button.addEventListener('click', toggleAudioDBEnrichment);
+ updateAudioDBStatus();
+ setInterval(updateAudioDBStatus, 2000);
+ console.log('✅ AudioDB UI initialized');
+ }
+ });
+} else {
+ const button = document.getElementById('audiodb-button');
+ if (button) {
+ button.addEventListener('click', toggleAudioDBEnrichment);
+ updateAudioDBStatus();
+ setInterval(updateAudioDBStatus, 2000);
+ console.log('✅ AudioDB UI initialized');
+ }
+}
+
+// ===================================================================
+// DEEZER ENRICHMENT STATUS
+// ===================================================================
+
+async function updateDeezerStatus() {
+ if (socketConnected) return; // WebSocket handles this
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/deezer/status');
+ if (!response.ok) { console.warn('Deezer status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateDeezerStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating Deezer status:', error);
+ }
+}
+
+function updateDeezerStatusFromData(data) {
+ const button = document.getElementById('deezer-button');
+ if (!button) return;
+
+ button.classList.remove('active', 'paused', 'complete');
+ if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ } else if (data.paused) {
+ button.classList.add('paused');
+ }
+
+ const tooltipStatus = document.getElementById('deezer-tooltip-status');
+ const tooltipCurrent = document.getElementById('deezer-tooltip-current');
+ const tooltipProgress = document.getElementById('deezer-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+ else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
+ else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
+ else { tooltipStatus.textContent = 'Idle'; }
+ }
+
+ if (tooltipCurrent) {
+ if (data.idle) {
+ tooltipCurrent.textContent = 'All items processed';
+ } else if (data.current_item && data.current_item.name) {
+ tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+ }
+ }
+
+ if (data.progress && tooltipProgress) {
+ const artists = data.progress.artists || {};
+ const albums = data.progress.albums || {};
+ const tracks = data.progress.tracks || {};
+
+ const currentType = data.current_item?.type;
+ let progressText = '';
+
+ const artistsComplete = artists.matched >= artists.total;
+ const albumsComplete = albums.matched >= albums.total;
+
+ if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+ } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ } else {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ }
+
+ tooltipProgress.textContent = progressText;
+ }
+}
+
+async function toggleDeezerEnrichment() {
+ try {
+ const button = document.getElementById('deezer-button');
+ if (!button) return;
+
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/deezer/pause' : '/api/deezer/resume';
+
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (!response.ok) {
+ throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Deezer enrichment`);
+ }
+
+ // Immediately update UI
+ await updateDeezerStatus();
+
+ console.log(`✅ Deezer enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+ } catch (error) {
+ console.error('Error toggling Deezer enrichment:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+// Initialize Deezer UI on page load
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('deezer-button');
+ if (button) {
+ button.addEventListener('click', toggleDeezerEnrichment);
+ updateDeezerStatus();
+ setInterval(updateDeezerStatus, 2000);
+ console.log('✅ Deezer UI initialized');
+ }
+ });
+} else {
+ const button = document.getElementById('deezer-button');
+ if (button) {
+ button.addEventListener('click', toggleDeezerEnrichment);
+ updateDeezerStatus();
+ setInterval(updateDeezerStatus, 2000);
+ console.log('✅ Deezer UI initialized');
+ }
+}
+
+// ===================================================================
+// SPOTIFY ENRICHMENT STATUS
+// ===================================================================
+
+async function updateSpotifyEnrichmentStatus() {
+ if (socketConnected) return; // WebSocket handles this
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/spotify-enrichment/status');
+ if (!response.ok) { console.warn('Spotify enrichment status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateSpotifyEnrichmentStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating Spotify enrichment status:', error);
+ }
+}
+
+function updateSpotifyEnrichmentStatusFromData(data) {
+ const button = document.getElementById('spotify-enrich-button');
+ if (!button) return;
+
+ const notAuthenticated = data.authenticated === false;
+ const isRateLimited = data.rate_limited === true;
+ const budgetExhausted = data.daily_budget && data.daily_budget.exhausted;
+
+ button.classList.remove('active', 'paused', 'complete', 'no-auth');
+ if (data.paused) {
+ button.classList.add('paused');
+ } else if (notAuthenticated) {
+ button.classList.add('no-auth');
+ } else if (isRateLimited || budgetExhausted) {
+ button.classList.add('paused');
+ } else if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ }
+
+ const tooltipStatus = document.getElementById('spotify-enrich-tooltip-status');
+ const tooltipCurrent = document.getElementById('spotify-enrich-tooltip-current');
+ const tooltipProgress = document.getElementById('spotify-enrich-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+ else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+ else if (isRateLimited) { tooltipStatus.textContent = 'Rate Limited'; }
+ else if (budgetExhausted) { tooltipStatus.textContent = 'Daily Limit Reached'; }
+ else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+ else if (data.running) { tooltipStatus.textContent = 'Running'; }
+ else { tooltipStatus.textContent = 'Idle'; }
+ }
+
+ if (tooltipCurrent) {
+ if (data.paused) {
+ tooltipCurrent.textContent = notAuthenticated ? 'Connect Spotify in Settings to enrich' : 'Click to resume';
+ } else if (notAuthenticated) {
+ tooltipCurrent.textContent = 'Connect Spotify in Settings to enrich';
+ } else if (isRateLimited) {
+ const info = data.rate_limit || {};
+ const remaining = info.remaining_seconds || 0;
+ tooltipCurrent.textContent = remaining > 0 ? `Waiting ${Math.ceil(remaining / 60)}m for rate limit to clear` : 'Waiting for rate limit to clear';
+ } else if (budgetExhausted) {
+ const resets = data.daily_budget.resets_in_seconds || 0;
+ const hours = Math.floor(resets / 3600);
+ const mins = Math.floor((resets % 3600) / 60);
+ tooltipCurrent.textContent = `Resets in ${hours}h ${mins}m`;
+ } else if (data.idle) {
+ tooltipCurrent.textContent = 'All items processed';
+ } else if (data.current_item && data.current_item.name) {
+ tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+ } else {
+ tooltipCurrent.textContent = 'Waiting for next item...';
+ }
+ }
+
+ if (data.progress && tooltipProgress) {
+ if (notAuthenticated) {
+ tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+ } else {
+ const artists = data.progress.artists || {};
+ const albums = data.progress.albums || {};
+ const tracks = data.progress.tracks || {};
+
+ const currentType = data.current_item?.type || '';
+ let progressText = '';
+
+ const artistsComplete = artists.matched >= artists.total;
+ const albumsComplete = albums.matched >= albums.total;
+
+ if (currentType === 'artist') {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else if (currentType.includes('album')) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+ } else if (currentType.includes('track')) {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ } else if (!artistsComplete) {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else if (!albumsComplete) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+ } else {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ }
+
+ tooltipProgress.textContent = progressText;
+ }
+ }
+}
+
+async function toggleSpotifyEnrichment() {
+ try {
+ const button = document.getElementById('spotify-enrich-button');
+ if (!button) return;
+
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/spotify-enrichment/pause' : '/api/spotify-enrichment/resume';
+
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (!response.ok) {
+ const data = await response.json().catch(() => ({}));
+ if (data.rate_limited) {
+ showToast('Cannot resume — Spotify is rate limited', 'warning');
+ return;
+ }
+ throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Spotify enrichment`);
+ }
+
+ await updateSpotifyEnrichmentStatus();
+ console.log(`Spotify enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+ } catch (error) {
+ console.error('Error toggling Spotify enrichment:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+// Initialize Spotify Enrichment UI on page load
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('spotify-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleSpotifyEnrichment);
+ updateSpotifyEnrichmentStatus();
+ setInterval(updateSpotifyEnrichmentStatus, 2000);
+ }
+ });
+} else {
+ const button = document.getElementById('spotify-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleSpotifyEnrichment);
+ updateSpotifyEnrichmentStatus();
+ setInterval(updateSpotifyEnrichmentStatus, 2000);
+ }
+}
+
+// ===================================================================
+// ITUNES ENRICHMENT STATUS
+// ===================================================================
+
+async function updateiTunesEnrichmentStatus() {
+ if (socketConnected) return; // WebSocket handles this
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/itunes-enrichment/status');
+ if (!response.ok) { console.warn('iTunes enrichment status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateiTunesEnrichmentStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating iTunes enrichment status:', error);
+ }
+}
+
+function updateiTunesEnrichmentStatusFromData(data) {
+ const button = document.getElementById('itunes-enrich-button');
+ if (!button) return;
+
+ button.classList.remove('active', 'paused', 'complete');
+ if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ } else if (data.paused) {
+ button.classList.add('paused');
+ }
+
+ const tooltipStatus = document.getElementById('itunes-enrich-tooltip-status');
+ const tooltipCurrent = document.getElementById('itunes-enrich-tooltip-current');
+ const tooltipProgress = document.getElementById('itunes-enrich-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+ else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
+ else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
+ else { tooltipStatus.textContent = 'Idle'; }
+ }
+
+ if (tooltipCurrent) {
+ if (data.idle) {
+ tooltipCurrent.textContent = 'All items processed';
+ } else if (data.current_item && data.current_item.name) {
+ tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+ }
+ }
+
+ if (data.progress && tooltipProgress) {
+ const artists = data.progress.artists || {};
+ const albums = data.progress.albums || {};
+ const tracks = data.progress.tracks || {};
+
+ const currentType = data.current_item?.type || '';
+ let progressText = '';
+
+ const artistsComplete = artists.matched >= artists.total;
+ const albumsComplete = albums.matched >= albums.total;
+
+ if (currentType === 'artist') {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else if (currentType.includes('album')) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+ } else if (currentType.includes('track')) {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ } else if (!artistsComplete) {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else if (!albumsComplete) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+ } else {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ }
+
+ tooltipProgress.textContent = progressText;
+ }
+}
+
+async function toggleiTunesEnrichment() {
+ try {
+ const button = document.getElementById('itunes-enrich-button');
+ if (!button) return;
+
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/itunes-enrichment/pause' : '/api/itunes-enrichment/resume';
+
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (!response.ok) {
+ throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} iTunes enrichment`);
+ }
+
+ await updateiTunesEnrichmentStatus();
+ console.log(`iTunes enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+ } catch (error) {
+ console.error('Error toggling iTunes enrichment:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+// Initialize iTunes Enrichment UI on page load
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('itunes-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleiTunesEnrichment);
+ updateiTunesEnrichmentStatus();
+ setInterval(updateiTunesEnrichmentStatus, 2000);
+ }
+ });
+} else {
+ const button = document.getElementById('itunes-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleiTunesEnrichment);
+ updateiTunesEnrichmentStatus();
+ setInterval(updateiTunesEnrichmentStatus, 2000);
+ }
+}
+
+// ===================================================================
+// LAST.FM ENRICHMENT STATUS
+// ===================================================================
+
+async function updateLastFMEnrichmentStatus() {
+ if (socketConnected) return;
+ if (document.hidden) return;
+ try {
+ const response = await fetch('/api/lastfm-enrichment/status');
+ if (!response.ok) { console.warn('Last.fm status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateLastFMEnrichmentStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating Last.fm status:', error);
+ }
+}
+
+function updateLastFMEnrichmentStatusFromData(data) {
+ const button = document.getElementById('lastfm-enrich-button');
+ if (!button) return;
+
+ const notAuthenticated = data.authenticated === false;
+
+ button.classList.remove('active', 'paused', 'complete', 'no-auth');
+ if (data.paused) {
+ button.classList.add('paused');
+ } else if (notAuthenticated) {
+ button.classList.add('no-auth');
+ } else if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ }
+
+ const tooltipStatus = document.getElementById('lastfm-enrich-tooltip-status');
+ const tooltipCurrent = document.getElementById('lastfm-enrich-tooltip-current');
+ const tooltipProgress = document.getElementById('lastfm-enrich-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+ else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+ else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+ else if (data.running) { tooltipStatus.textContent = 'Running'; }
+ else { tooltipStatus.textContent = 'Idle'; }
+ }
+
+ if (tooltipCurrent) {
+ if (data.paused) {
+ tooltipCurrent.textContent = notAuthenticated ? 'Add Last.fm API key in Settings to enrich' : 'Click to resume';
+ } else if (notAuthenticated) {
+ tooltipCurrent.textContent = 'Add Last.fm API key in Settings to enrich';
+ } else if (data.idle) {
+ tooltipCurrent.textContent = 'All items processed';
+ } else if (data.current_item && data.current_item.name) {
+ tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+ }
+ }
+
+ if (data.progress && tooltipProgress) {
+ if (notAuthenticated) {
+ tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+ } else {
+ const artists = data.progress.artists || {};
+ const albums = data.progress.albums || {};
+ const tracks = data.progress.tracks || {};
+
+ const currentType = data.current_item?.type;
+ let progressText = '';
+
+ const artistsComplete = artists.matched >= artists.total;
+ const albumsComplete = albums.matched >= albums.total;
+
+ if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+ } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ } else {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ }
+
+ tooltipProgress.textContent = progressText;
+ }
+ }
+}
+
+async function toggleLastFMEnrichment() {
+ try {
+ const button = document.getElementById('lastfm-enrich-button');
+ if (!button) return;
+
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/lastfm-enrichment/pause' : '/api/lastfm-enrichment/resume';
+
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (!response.ok) {
+ throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Last.fm enrichment`);
+ }
+
+ await updateLastFMEnrichmentStatus();
+ console.log(`Last.fm enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+ } catch (error) {
+ console.error('Error toggling Last.fm enrichment:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('lastfm-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleLastFMEnrichment);
+ updateLastFMEnrichmentStatus();
+ setInterval(updateLastFMEnrichmentStatus, 2000);
+ }
+ });
+} else {
+ const button = document.getElementById('lastfm-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleLastFMEnrichment);
+ updateLastFMEnrichmentStatus();
+ setInterval(updateLastFMEnrichmentStatus, 2000);
+ }
+}
+
+// ===================================================================
+// GENIUS ENRICHMENT STATUS
+// ===================================================================
+
+async function updateGeniusEnrichmentStatus() {
+ if (socketConnected) return;
+ if (document.hidden) return;
+ try {
+ const response = await fetch('/api/genius-enrichment/status');
+ if (!response.ok) { console.warn('Genius status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateGeniusEnrichmentStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating Genius status:', error);
+ }
+}
+
+function updateGeniusEnrichmentStatusFromData(data) {
+ const button = document.getElementById('genius-enrich-button');
+ if (!button) return;
+
+ const notAuthenticated = data.authenticated === false;
+
+ button.classList.remove('active', 'paused', 'complete', 'no-auth');
+ if (data.paused) {
+ button.classList.add('paused');
+ } else if (notAuthenticated) {
+ button.classList.add('no-auth');
+ } else if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ }
+
+ const tooltipStatus = document.getElementById('genius-enrich-tooltip-status');
+ const tooltipCurrent = document.getElementById('genius-enrich-tooltip-current');
+ const tooltipProgress = document.getElementById('genius-enrich-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+ else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+ else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+ else if (data.running) { tooltipStatus.textContent = 'Running'; }
+ else { tooltipStatus.textContent = 'Idle'; }
+ }
+
+ if (tooltipCurrent) {
+ if (data.paused) {
+ tooltipCurrent.textContent = notAuthenticated ? 'Add Genius access token in Settings to enrich' : 'Click to resume';
+ } else if (notAuthenticated) {
+ tooltipCurrent.textContent = 'Add Genius access token in Settings to enrich';
+ } else if (data.idle) {
+ tooltipCurrent.textContent = 'All items processed';
+ } else if (data.current_item && data.current_item.name) {
+ tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+ }
+ }
+
+ if (data.progress && tooltipProgress) {
+ if (notAuthenticated) {
+ tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+ } else {
+ const artists = data.progress.artists || {};
+ const tracks = data.progress.tracks || {};
+
+ const currentType = data.current_item?.type;
+ let progressText = '';
+
+ const artistsComplete = artists.matched >= artists.total;
+
+ if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ }
+
+ tooltipProgress.textContent = progressText;
+ }
+ }
+}
+
+async function toggleGeniusEnrichment() {
+ try {
+ const button = document.getElementById('genius-enrich-button');
+ if (!button) return;
+
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/genius-enrichment/pause' : '/api/genius-enrichment/resume';
+
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (!response.ok) {
+ throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Genius enrichment`);
+ }
+
+ await updateGeniusEnrichmentStatus();
+ console.log(`Genius enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+ } catch (error) {
+ console.error('Error toggling Genius enrichment:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('genius-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleGeniusEnrichment);
+ updateGeniusEnrichmentStatus();
+ setInterval(updateGeniusEnrichmentStatus, 2000);
+ }
+ });
+} else {
+ const button = document.getElementById('genius-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleGeniusEnrichment);
+ updateGeniusEnrichmentStatus();
+ setInterval(updateGeniusEnrichmentStatus, 2000);
+ }
+}
+
+// ===================================================================
+// TIDAL ENRICHMENT WORKER
+// ===================================================================
+
+async function updateTidalEnrichmentStatus() {
+ if (socketConnected) return;
+ if (document.hidden) return;
+ try {
+ const response = await fetch('/api/tidal-enrichment/status');
+ if (!response.ok) { console.warn('Tidal status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateTidalEnrichmentStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating Tidal status:', error);
+ }
+}
+
+function updateTidalEnrichmentStatusFromData(data) {
+ const button = document.getElementById('tidal-enrich-button');
+ if (!button) return;
+
+ const notAuthenticated = data.authenticated === false;
+
+ button.classList.remove('active', 'paused', 'complete', 'no-auth');
+ if (data.paused) {
+ button.classList.add('paused');
+ } else if (notAuthenticated) {
+ button.classList.add('no-auth');
+ } else if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ }
+
+ const tooltipStatus = document.getElementById('tidal-enrich-tooltip-status');
+ const tooltipCurrent = document.getElementById('tidal-enrich-tooltip-current');
+ const tooltipProgress = document.getElementById('tidal-enrich-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+ else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+ else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+ else if (data.running) { tooltipStatus.textContent = 'Running'; }
+ else { tooltipStatus.textContent = 'Idle'; }
+ }
+
+ if (tooltipCurrent) {
+ if (data.paused) {
+ tooltipCurrent.textContent = notAuthenticated ? 'Connect Tidal in Settings to enrich' : 'Click to resume';
+ } else if (notAuthenticated) {
+ tooltipCurrent.textContent = 'Connect Tidal in Settings to enrich';
+ } else if (data.idle) {
+ tooltipCurrent.textContent = 'All items processed';
+ } else if (data.current_item && data.current_item.name) {
+ tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+ }
+ }
+
+ if (data.progress && tooltipProgress) {
+ if (notAuthenticated) {
+ tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+ } else {
+ const artists = data.progress.artists || {};
+ const albums = data.progress.albums || {};
+ const tracks = data.progress.tracks || {};
+
+ const currentType = data.current_item?.type;
+ let progressText = '';
+
+ const artistsComplete = artists.matched >= artists.total;
+ const albumsComplete = albums.matched >= albums.total;
+
+ if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else if (currentType === 'album' || (!albumsComplete && !currentType)) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+ } else {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ }
+
+ tooltipProgress.textContent = progressText;
+ }
+ }
+}
+
+async function toggleTidalEnrichment() {
+ try {
+ const button = document.getElementById('tidal-enrich-button');
+ if (!button) return;
+
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/tidal-enrichment/pause' : '/api/tidal-enrichment/resume';
+
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (!response.ok) {
+ throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Tidal enrichment`);
+ }
+
+ await updateTidalEnrichmentStatus();
+ console.log(`Tidal enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+ } catch (error) {
+ console.error('Error toggling Tidal enrichment:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('tidal-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleTidalEnrichment);
+ updateTidalEnrichmentStatus();
+ setInterval(updateTidalEnrichmentStatus, 2000);
+ }
+ });
+} else {
+ const button = document.getElementById('tidal-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleTidalEnrichment);
+ updateTidalEnrichmentStatus();
+ setInterval(updateTidalEnrichmentStatus, 2000);
+ }
+}
+
+// ===================================================================
+// QOBUZ ENRICHMENT WORKER
+// ===================================================================
+
+async function updateQobuzEnrichmentStatus() {
+ if (socketConnected) return;
+ if (document.hidden) return;
+ try {
+ const response = await fetch('/api/qobuz-enrichment/status');
+ if (!response.ok) { console.warn('Qobuz status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateQobuzEnrichmentStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating Qobuz status:', error);
+ }
+}
+
+function updateQobuzEnrichmentStatusFromData(data) {
+ const button = document.getElementById('qobuz-enrich-button');
+ if (!button) return;
+
+ const notAuthenticated = data.authenticated === false;
+
+ button.classList.remove('active', 'paused', 'complete', 'no-auth');
+ if (data.paused) {
+ button.classList.add('paused');
+ } else if (notAuthenticated) {
+ button.classList.add('no-auth');
+ } else if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ }
+
+ const tooltipStatus = document.getElementById('qobuz-enrich-tooltip-status');
+ const tooltipCurrent = document.getElementById('qobuz-enrich-tooltip-current');
+ const tooltipProgress = document.getElementById('qobuz-enrich-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+ else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+ else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+ else if (data.running) { tooltipStatus.textContent = 'Running'; }
+ else { tooltipStatus.textContent = 'Idle'; }
+ }
+
+ if (tooltipCurrent) {
+ if (data.paused) {
+ tooltipCurrent.textContent = notAuthenticated ? 'Connect Qobuz in Settings to enrich' : 'Click to resume';
+ } else if (notAuthenticated) {
+ tooltipCurrent.textContent = 'Connect Qobuz in Settings to enrich';
+ } else if (data.idle) {
+ tooltipCurrent.textContent = 'All items processed';
+ } else if (data.current_item && data.current_item.name) {
+ tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+ }
+ }
+
+ if (data.progress && tooltipProgress) {
+ if (notAuthenticated) {
+ tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+ } else {
+ const artists = data.progress.artists || {};
+ const albums = data.progress.albums || {};
+ const tracks = data.progress.tracks || {};
+
+ const currentType = data.current_item?.type;
+ let progressText = '';
+
+ const artistsComplete = artists.matched >= artists.total;
+ const albumsComplete = albums.matched >= albums.total;
+
+ if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+ progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+ } else if (currentType === 'album' || (!albumsComplete && !currentType)) {
+ progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+ } else {
+ progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+ }
+
+ tooltipProgress.textContent = progressText;
+ }
+ }
+}
+
+async function toggleQobuzEnrichment() {
+ try {
+ const button = document.getElementById('qobuz-enrich-button');
+ if (!button) return;
+
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/qobuz-enrichment/pause' : '/api/qobuz-enrichment/resume';
+
+ const response = await fetch(endpoint, { method: 'POST' });
+ if (!response.ok) {
+ throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Qobuz enrichment`);
+ }
+
+ await updateQobuzEnrichmentStatus();
+ console.log(`Qobuz enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+ } catch (error) {
+ console.error('Error toggling Qobuz enrichment:', error);
+ showToast(`Error: ${error.message}`, 'error');
+ }
+}
+
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('qobuz-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleQobuzEnrichment);
+ updateQobuzEnrichmentStatus();
+ setInterval(updateQobuzEnrichmentStatus, 2000);
+ }
+ });
+} else {
+ const button = document.getElementById('qobuz-enrich-button');
+ if (button) {
+ button.addEventListener('click', toggleQobuzEnrichment);
+ updateQobuzEnrichmentStatus();
+ setInterval(updateQobuzEnrichmentStatus, 2000);
+ }
+}
+
+// ===================================================================
+// HYDRABASE P2P MIRROR WORKER
+// ===================================================================
+
+async function updateHydrabaseStatus() {
+ if (socketConnected) return; // WebSocket handles this
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/hydrabase-worker/status');
+ if (!response.ok) return;
+ const data = await response.json();
+ updateHydrabaseStatusFromData(data);
+ } catch (error) {
+ // Silently ignore — worker may not be available
+ }
+}
+
+function updateHydrabaseStatusFromData(data) {
+ const button = document.getElementById('hydrabase-button');
+ if (!button) return;
+
+ button.classList.remove('active', 'paused');
+ if (data.running && !data.paused) {
+ button.classList.add('active');
+ } else if (data.paused) {
+ button.classList.add('paused');
+ }
+
+ const statusEl = document.getElementById('hydrabase-tooltip-status');
+ if (statusEl) {
+ if (data.paused) {
+ statusEl.textContent = 'Paused';
+ statusEl.style.color = '#ffc107';
+ } else if (data.running) {
+ statusEl.textContent = 'Active';
+ statusEl.style.color = '#ffffff';
+ } else {
+ statusEl.textContent = 'Stopped';
+ statusEl.style.color = '#ff5252';
+ }
+ }
+}
+
+async function toggleHydrabaseWorker() {
+ const button = document.getElementById('hydrabase-button');
+ if (!button) return;
+ const isRunning = button.classList.contains('active');
+ const endpoint = isRunning ? '/api/hydrabase-worker/pause' : '/api/hydrabase-worker/resume';
+ try {
+ await fetch(endpoint, { method: 'POST' });
+ await updateHydrabaseStatus();
+ } catch (error) {
+ console.error('Error toggling Hydrabase worker:', error);
+ }
+}
+
+// Initialize Hydrabase UI on page load
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('hydrabase-button');
+ if (button) {
+ button.addEventListener('click', toggleHydrabaseWorker);
+ updateHydrabaseStatus();
+ setInterval(updateHydrabaseStatus, 2000);
+ }
+ });
+} else {
+ const button = document.getElementById('hydrabase-button');
+ if (button) {
+ button.addEventListener('click', toggleHydrabaseWorker);
+ updateHydrabaseStatus();
+ setInterval(updateHydrabaseStatus, 2000);
+ }
+}
+
+// ===================================================================
+// LIBRARY REPAIR WORKER
+// ===================================================================
+
+async function updateRepairStatus() {
+ if (socketConnected) return; // WebSocket handles this
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/repair/status');
+ if (!response.ok) { console.warn('Repair status endpoint unavailable'); return; }
+ const data = await response.json();
+ updateRepairStatusFromData(data);
+ } catch (error) {
+ console.error('Error updating repair status:', error);
+ }
+}
+
+function updateRepairStatusFromData(data) {
+ const button = document.getElementById('repair-button');
+ if (!button) return;
+
+ button.classList.remove('active', 'paused', 'complete');
+ if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ } else if (data.paused) {
+ button.classList.add('paused');
+ }
+
+ const tooltipStatus = document.getElementById('repair-tooltip-status');
+ const tooltipCurrent = document.getElementById('repair-tooltip-current');
+ const tooltipProgress = document.getElementById('repair-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+ else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
+ else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
+ else { tooltipStatus.textContent = 'Idle'; }
+ }
+
+ if (tooltipCurrent) {
+ if (data.idle) {
+ tooltipCurrent.textContent = 'All jobs complete — waiting for next schedule';
+ } else if (data.current_job && data.current_job.display_name) {
+ const jobName = data.current_job.display_name;
+ const jobProgress = data.progress && data.progress.current_job;
+ if (jobProgress && jobProgress.total > 0) {
+ tooltipCurrent.textContent = `${jobName}: ${jobProgress.scanned} / ${jobProgress.total} (${jobProgress.percent}%)`;
+ } else {
+ tooltipCurrent.textContent = `Running: ${jobName}`;
+ }
+ } else if (data.current_item && data.current_item.name) {
+ tooltipCurrent.textContent = `Running: ${data.current_item.name}`;
+ } else {
+ tooltipCurrent.textContent = 'No active repairs';
+ }
+ }
+
+ if (tooltipProgress && data.progress) {
+ const tracks = data.progress.tracks || {};
+ const parts = [];
+ if (tracks.total > 0) parts.push(`Checked: ${tracks.checked || 0} / ${tracks.total || 0}`);
+ if (tracks.repaired > 0) parts.push(`Repaired: ${tracks.repaired}`);
+ const pending = data.findings_pending || 0;
+ if (pending > 0) parts.push(`Findings: ${pending}`);
+ tooltipProgress.textContent = parts.length ? parts.join(' · ') : 'No items processed yet';
+ }
+
+ // Update findings badge
+ const badge = document.getElementById('repair-findings-badge');
+ const findingsPending = data.findings_pending || 0;
+ if (badge) {
+ badge.textContent = findingsPending;
+ badge.style.display = findingsPending > 0 ? '' : 'none';
+ }
+ const tabBadge = document.getElementById('repair-findings-tab-badge');
+ if (tabBadge) {
+ tabBadge.textContent = findingsPending;
+ tabBadge.style.display = findingsPending > 0 ? '' : 'none';
+ }
+
+ // Update master toggle in modal if open
+ const masterToggle = document.getElementById('repair-master-toggle');
+ const masterLabel = document.getElementById('repair-master-label');
+ if (masterToggle) masterToggle.checked = data.enabled || false;
+ if (masterLabel) masterLabel.textContent = data.enabled ? 'Enabled' : 'Disabled';
+
+ // Update button state
+ if (!data.enabled) {
+ button.classList.add('paused');
+ button.classList.remove('active', 'complete');
+ }
+}
+
+// ── SoulID Worker Status ──
+
+function updateSoulIDStatusFromData(data) {
+ const button = document.getElementById('soulid-button');
+ if (!button) return;
+
+ button.classList.remove('active', 'complete');
+ if (data.idle) {
+ button.classList.add('complete');
+ } else if (data.running && !data.paused) {
+ button.classList.add('active');
+ }
+
+ const tooltipStatus = document.getElementById('soulid-tooltip-status');
+ const tooltipCurrent = document.getElementById('soulid-tooltip-current');
+ const tooltipProgress = document.getElementById('soulid-tooltip-progress');
+
+ if (tooltipStatus) {
+ if (data.idle) tooltipStatus.textContent = 'Complete';
+ else if (data.running && !data.paused) tooltipStatus.textContent = 'Running';
+ else if (data.paused) tooltipStatus.textContent = 'Paused';
+ else tooltipStatus.textContent = 'Idle';
+ }
+
+ if (tooltipCurrent) {
+ if (data.current_item) {
+ tooltipCurrent.textContent = data.current_item;
+ } else if (data.idle) {
+ tooltipCurrent.textContent = 'All entities have soul IDs';
+ } else {
+ tooltipCurrent.textContent = 'No items processing';
+ }
+ }
+
+ if (tooltipProgress && data.stats) {
+ const s = data.stats;
+ const parts = [];
+ if (s.artists_processed) parts.push(`Artists: ${s.artists_processed}`);
+ if (s.albums_processed) parts.push(`Albums: ${s.albums_processed}`);
+ if (s.tracks_processed) parts.push(`Tracks: ${s.tracks_processed}`);
+ if (s.pending > 0) parts.push(`Pending: ${s.pending}`);
+ tooltipProgress.textContent = parts.length ? parts.join(' · ') : 'No items processed yet';
+ }
+}
+
+// ── Repair Modal State ──
+let _repairCurrentTab = 'jobs';
+let _repairFindingsPage = 0;
+let _repairSelectedFindings = new Set();
+let _repairFindingsTotal = 0;
+const REPAIR_FINDINGS_PAGE_SIZE = 30;
+let _repairJobsCache = {}; // Cache job data for help modal
+
+/**
+ * Open the Library Maintenance modal
+ */
+async function openRepairModal() {
+ navigateToPage('tools');
+ // Scroll to maintenance section
+ setTimeout(() => {
+ const section = document.querySelector('.tools-maintenance-section');
+ if (section) section.scrollIntoView({ behavior: 'smooth' });
+ }, 100);
+ _repairCurrentTab = 'jobs';
+ switchRepairTab('jobs');
+ // Load master toggle state
+ updateRepairStatus();
+ // Load any active job progress
+ try {
+ const resp = await fetch('/api/repair/progress');
+ if (resp.ok) {
+ const data = await resp.json();
+ if (Object.keys(data).length > 0) {
+ // Brief delay so job cards are rendered first
+ setTimeout(() => updateRepairJobProgressFromData(data), 300);
+ }
+ }
+ } catch (e) { /* ignore */ }
+}
+
+function closeRepairModal() {
+ // No-op — repair content now lives on the tools page, no modal to close
+}
+
+async function toggleRepairMaster() {
+ try {
+ const response = await fetch('/api/repair/toggle', { method: 'POST' });
+ if (!response.ok) throw new Error('Failed to toggle');
+ const data = await response.json();
+ const label = document.getElementById('repair-master-label');
+ const toggle = document.getElementById('repair-master-toggle');
+ if (label) label.textContent = data.enabled ? 'Enabled' : 'Disabled';
+ if (toggle) toggle.checked = data.enabled;
+ await updateRepairStatus();
+ } catch (error) {
+ console.error('Error toggling repair master:', error);
+ showToast('Error toggling maintenance worker', 'error');
+ }
+}
+
+function switchRepairTab(tab) {
+ _repairCurrentTab = tab;
+ document.querySelectorAll('.repair-tab').forEach(t => {
+ t.classList.toggle('active', t.dataset.tab === tab);
+ });
+ document.querySelectorAll('.repair-tab-content').forEach(c => {
+ c.style.display = 'none';
+ });
+ const content = document.getElementById(`repair-tab-${tab}`);
+ if (content) content.style.display = '';
+
+ if (tab === 'jobs') loadRepairJobs();
+ else if (tab === 'findings') { loadRepairFindingsDashboard(); loadRepairFindings(); }
+ else if (tab === 'history') loadRepairHistory();
+}
+
+// Turn a snake_case setting key into a human label. Handles acronym fix-ups
+// (EP, ID, URL, MB, AC, OS) that the naive Title-Case would otherwise botch.
+function _prettifyRepairSettingKey(key) {
+ const words = key.replace(/^_+/, '').split('_');
+ const acronyms = { 'eps': 'EPs', 'id': 'ID', 'url': 'URL', 'mb': 'MB',
+ 'ac': 'AC', 'os': 'OS', 'api': 'API', 'mp3': 'MP3',
+ 'flac': 'FLAC', 'cd': 'CD' };
+ return words.map(w => acronyms[w.toLowerCase()] || (w.charAt(0).toUpperCase() + w.slice(1))).join(' ');
+}
+
+async function loadRepairJobs() {
+ const container = document.getElementById('repair-jobs-list');
+ if (!container) return;
+
+ try {
+ const response = await fetch('/api/repair/jobs');
+ if (!response.ok) throw new Error('Failed to fetch jobs');
+ const data = await response.json();
+ const jobs = data.jobs || [];
+
+ // Cache job data for help modal
+ _repairJobsCache = {};
+ jobs.forEach(j => { _repairJobsCache[j.job_id] = j; });
+
+ if (jobs.length === 0) {
+ container.innerHTML = `';
+
+ try {
+ const params = new URLSearchParams({ type, q: query, limit: 10 });
+ if (artist && type !== 'artist') params.set('artist', artist);
+
+ const resp = await fetch(`/api/musicbrainz/search?${params}`);
+ if (!resp.ok) throw new Error('Search failed');
+ const data = await resp.json();
+
+ if (!data.results || data.results.length === 0) {
+ resultsEl.innerHTML = '})
`
+ : ``;
+
+ // Track stats
+ const trackStat = artist.track_count > 0 ? `${artist.track_count} track${artist.track_count !== 1 ? 's' : ''}` : '';
+
+ return ``;
+ }
+}
+
+function _renderWatchAllModalContent(overlay, eligible, ineligible, sourceName) {
+ const body = overlay.querySelector('.watch-all-body');
+ const confirmBtn = overlay.querySelector('#watch-all-confirm-btn');
+
+ if (eligible.length === 0 && ineligible.length === 0) {
+ body.innerHTML = '';
+ return;
+ }
+
+ // Store data for search filtering
+ overlay._watchAllEligible = eligible;
+ overlay._watchAllIneligible = ineligible;
+
+ let html = '';
+
+ // Summary bar (sticky)
+ html += '`;
+ }
+
+ body.innerHTML = html;
+
+ if (eligible.length > 0 && confirmBtn) {
+ confirmBtn.textContent = `Watch All (${eligible.length})`;
+ confirmBtn.disabled = false;
+ confirmBtn.onclick = () => _confirmWatchAllUnwatched(overlay, eligible.length);
+ }
+}
+
+function _buildWatchAllRows(artists, dimmed) {
+ let html = '';
+ for (const a of artists) {
+ const img = a.image_url
+ ? `})
`
+ : ``
+ : `${fallback}`;
+ if (url) return `${inner}`;
+ return `]*>.*?<\/a>/gi, '').replace(/<[^>]+>/g, '').trim();
+ if (cleanBio) {
+ bioEl.innerHTML = `${cleanBio}
+ Read more`;
+ bioEl.style.display = '';
+ } else {
+ bioEl.style.display = 'none';
+ }
+ } else {
+ bioEl.style.display = 'none';
+ }
+ }
+
+ // Last.fm tags — merge with existing genres (deduplicate)
+ if (artist.lastfm_tags) {
+ try {
+ let lfmTags = typeof artist.lastfm_tags === 'string' ? JSON.parse(artist.lastfm_tags) : artist.lastfm_tags;
+ if (Array.isArray(lfmTags) && lfmTags.length > 0) {
+ const existingGenres = new Set((artist.genres || []).map(g => g.toLowerCase()));
+ const newTags = lfmTags.filter(t => !existingGenres.has(t.toLowerCase())).slice(0, 5);
+ if (newTags.length > 0) {
+ const genresContainer = document.getElementById('artist-genres');
+ if (genresContainer) {
+ newTags.forEach(tag => {
+ const el = document.createElement('span');
+ el.className = 'genre-tag';
+ el.textContent = tag;
+ el.style.opacity = '0.6';
+ genresContainer.appendChild(el);
+ });
+ }
+ }
+ }
+ } catch (e) {
+ console.debug('Failed to parse Last.fm tags:', e);
+ }
+ }
+
+ // Lazy-load top tracks sidebar
+ if (artist.lastfm_url || artist.lastfm_listeners) {
+ _loadArtistTopTracks(artist.name);
+ }
+}
+
+async function _loadArtistTopTracks(artistName) {
+ const sidebar = document.getElementById('artist-hero-sidebar');
+ const container = document.getElementById('hero-top-tracks');
+ if (!sidebar || !container) return;
+
+ try {
+ const resp = await fetch(`/api/artist/0/lastfm-top-tracks?name=${encodeURIComponent(artistName)}`);
+ const data = await resp.json();
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ sidebar.style.display = 'none';
+ return;
+ }
+
+ const _fmtNum = (n) => {
+ if (!n || n <= 0) return '0';
+ if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+ if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+ return n.toLocaleString();
+ };
+
+ const _escAttr = (s) => (s || '').replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>');
+ container.innerHTML = data.tracks.map((t, i) => `
+ `;
+ mbIcon.onclick = (e) => {
+ e.stopPropagation();
+ window.open(`https://musicbrainz.org/release/${release.musicbrainz_release_id}`, '_blank');
+ };
+ }
+
+ // Create image
+ const imageContainer = document.createElement("div");
+ if (release.image_url && release.image_url.trim() !== "") {
+ const img = document.createElement("img");
+ img.src = release.image_url;
+ img.alt = release.title;
+ img.className = "release-image";
+ img.loading = 'lazy';
+ img.onerror = () => {
+ imageContainer.innerHTML = `
`;
+ }
+
+ _renderRedownloadStep1(overlay, track, data);
+ } catch (e) {
+ document.getElementById('redownload-body').innerHTML = `
';
+
+ if (!hasChanges) {
+ html += '
';
+ body.innerHTML = html;
+ overlay.classList.remove('hidden');
+
+ // Wire up live preview on enter key
+ setTimeout(() => {
+ const input = document.getElementById('reorganize-template-input');
+ if (input) {
+ input.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ loadReorganizePreview();
+ }
+ });
+ input.focus();
+ }
+ }, 50);
+}
+
+function insertReorganizeVar(varName) {
+ const input = document.getElementById('reorganize-template-input');
+ if (!input) return;
+ const start = input.selectionStart;
+ const end = input.selectionEnd;
+ const val = input.value;
+ input.value = val.substring(0, start) + varName + val.substring(end);
+ input.focus();
+ const newPos = start + varName.length;
+ input.setSelectionRange(newPos, newPos);
+}
+
+function closeReorganizeModal() {
+ const overlay = document.getElementById('reorganize-overlay');
+ if (overlay) overlay.classList.add('hidden');
+ _reorganizeAlbumId = null;
+}
+
+async function loadReorganizePreview() {
+ const template = document.getElementById('reorganize-template-input')?.value?.trim();
+ const previewBody = document.getElementById('reorganize-preview-body');
+ const applyBtn = document.getElementById('reorganize-apply-btn');
+ if (!template || !previewBody || !_reorganizeAlbumId) return;
+
+ if (applyBtn) applyBtn.disabled = true;
+ previewBody.innerHTML = 'All results already selected
';
+ resultsContainer.style.display = 'block';
+ return;
+ }
+
+ // Render search results
+ let html = '';
+ filtered.forEach(artist => {
+ const imageUrl = artist.image_url || '/static/placeholder-album.png';
+ const escapedName = artist.name.replace(/'/g, "\\'").replace(/"/g, '"');
+ html += `
+
+ 
+ ${artist.name}
+ + Add
+
+ `;
+ });
+
+ resultsContainer.innerHTML = html;
+ resultsContainer.style.display = 'block';
+
+ } catch (error) {
+ console.error('Error searching artists:', error);
+ } finally {
+ if (spinner) spinner.style.display = 'none';
+ }
+ }, 400);
+}
+
+function addBuildPlaylistArtist(artistId, artistName, imageUrl) {
+ if (buildPlaylistSelectedArtists.some(a => a.id === artistId)) {
+ showToast('Artist already selected', 'warning');
+ return;
+ }
+ if (buildPlaylistSelectedArtists.length >= 5) {
+ showToast('Maximum 5 seed artists', 'warning');
+ return;
+ }
+
+ buildPlaylistSelectedArtists.push({
+ id: artistId,
+ name: artistName,
+ image_url: imageUrl
+ });
+
+ renderBuildPlaylistSelectedArtists();
+
+ // Clear search
+ document.getElementById('build-playlist-search').value = '';
+ document.getElementById('build-playlist-search-results').innerHTML = '';
+ document.getElementById('build-playlist-search-results').style.display = 'none';
+}
+
+function removeBuildPlaylistArtist(artistId) {
+ buildPlaylistSelectedArtists = buildPlaylistSelectedArtists.filter(a => a.id !== artistId);
+ renderBuildPlaylistSelectedArtists();
+}
+
+function renderBuildPlaylistSelectedArtists() {
+ const container = document.getElementById('build-playlist-selected-artists');
+ const generateBtn = document.getElementById('build-playlist-generate-btn');
+ const counter = document.getElementById('bp-selected-counter');
+ const count = buildPlaylistSelectedArtists.length;
+
+ if (counter) counter.textContent = `${count} / 5`;
+
+ if (count === 0) {
+ container.innerHTML = `
+
+
+ Search above to add seed artists
+
`;
+ generateBtn.disabled = true;
+ return;
+ }
+
+ let html = '';
+ buildPlaylistSelectedArtists.forEach(artist => {
+ const escapedId = artist.id.replace(/'/g, "\\'");
+ html += `
+
+ 
+ ${artist.name}
+
+
+ `;
+ });
+
+ container.innerHTML = html;
+ generateBtn.disabled = false;
+}
+
+let buildPlaylistTracks = [];
+
+async function generateBuildPlaylist() {
+ if (buildPlaylistSelectedArtists.length === 0) {
+ showToast('Please select at least 1 artist', 'warning');
+ return;
+ }
+
+ const generateBtn = document.getElementById('build-playlist-generate-btn');
+ const resultsContainer = document.getElementById('build-playlist-results');
+ const resultsWrapper = document.getElementById('build-playlist-results-wrapper');
+ const loadingIndicator = document.getElementById('build-playlist-loading');
+ const metadataDisplay = document.getElementById('build-playlist-metadata-display');
+ const titleEl = document.getElementById('build-playlist-results-title');
+ const subtitleEl = document.getElementById('build-playlist-results-subtitle');
+
+ // Show loading, hide search area
+ generateBtn.disabled = true;
+ loadingIndicator.style.display = 'flex';
+ resultsWrapper.style.display = 'none';
+ resultsContainer.innerHTML = '';
+
+ try {
+ const seedIds = buildPlaylistSelectedArtists.map(a => a.id);
+ const response = await fetch('/api/discover/build-playlist/generate', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ seed_artist_ids: seedIds,
+ playlist_size: 50
+ })
+ });
+
+ const data = await response.json();
+ if (!response.ok || !data.success) {
+ throw new Error(data.error || 'Failed to generate playlist');
+ }
+ if (!data.playlist || !data.playlist.tracks || data.playlist.tracks.length === 0) {
+ throw new Error(data.playlist?.error || 'No tracks found. Try different seed artists.');
+ }
+
+ // Store tracks globally
+ buildPlaylistTracks = data.playlist.tracks;
+
+ // Update title and subtitle
+ const artistNames = buildPlaylistSelectedArtists.map(a => a.name).join(', ');
+ titleEl.textContent = 'Custom Playlist';
+ subtitleEl.textContent = `Based on: ${artistNames}`;
+
+ // Render metadata
+ const metadata = data.playlist.metadata;
+ metadataDisplay.innerHTML = `
+
+ `;
+
+ // Render playlist
+ renderCompactPlaylist(resultsContainer, data.playlist.tracks);
+
+ // Show results wrapper
+ resultsWrapper.style.display = 'block';
+
+ } catch (error) {
+ console.error('Error generating playlist:', error);
+ resultsWrapper.style.display = 'none';
+ showToast(error.message || 'Failed to generate playlist', 'error');
+ } finally {
+ loadingIndicator.style.display = 'none';
+ generateBtn.disabled = false;
+ }
+}
+
+async function openDownloadModalForBuildPlaylist() {
+ if (!buildPlaylistTracks || buildPlaylistTracks.length === 0) {
+ showToast('No playlist tracks available', 'warning');
+ return;
+ }
+
+ const artistNames = buildPlaylistSelectedArtists.map(a => a.name).join(', ');
+ const playlistName = `Custom Playlist - ${artistNames}`;
+ const virtualPlaylistId = 'build_playlist_custom';
+
+ // Open download modal
+ await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, buildPlaylistTracks);
+}
+
+function openDailyMix(mixIndex) {
+ const mix = personalizedDailyMixes[mixIndex];
+ if (!mix || !mix.tracks) return;
+
+ // TODO: Open modal or dedicated view for Daily Mix
+ console.log('Opening Daily Mix:', mix.name);
+}
+
+// ===============================
+// DISCOVER PLAYLIST ACTIONS
+// ===============================
+
+async function openDownloadModalForDiscoverPlaylist(playlistType, playlistName) {
+ console.log(`📥 Opening Download Missing Tracks modal for ${playlistName}`);
+
+ try {
+ // Get tracks based on playlist type
+ let tracks = [];
+ if (playlistType === 'release_radar') {
+ tracks = discoverReleaseRadarTracks;
+ } else if (playlistType === 'discovery_weekly') {
+ tracks = discoverWeeklyTracks;
+ } else if (playlistType === 'seasonal_playlist') {
+ tracks = discoverSeasonalTracks;
+ } else if (playlistType === 'popular_picks') {
+ tracks = personalizedPopularPicks;
+ } else if (playlistType === 'hidden_gems') {
+ tracks = personalizedHiddenGems;
+ } else if (playlistType === 'discovery_shuffle') {
+ tracks = personalizedDiscoveryShuffle;
+ } else if (playlistType === 'familiar_favorites') {
+ tracks = personalizedFamiliarFavorites;
+ } else if (playlistType === 'recently_added') {
+ tracks = personalizedRecentlyAdded;
+ } else if (playlistType === 'top_tracks') {
+ tracks = personalizedTopTracks;
+ } else if (playlistType === 'forgotten_favorites') {
+ tracks = personalizedForgottenFavorites;
+ } else if (playlistType === 'build_playlist') {
+ tracks = buildPlaylistTracks;
+ }
+
+ if (!tracks || tracks.length === 0) {
+ showToast(`No tracks available for ${playlistName}`, 'warning');
+ return;
+ }
+
+ // Convert discover tracks to format expected by download modal
+ const spotifyTracks = tracks.map(track => {
+ let spotifyTrack;
+
+ // Use track_data_json if available, otherwise construct from track data
+ if (track.track_data_json) {
+ spotifyTrack = track.track_data_json;
+ } else {
+ // Fallback: construct track object from available data
+ spotifyTrack = {
+ id: track.spotify_track_id,
+ name: track.track_name,
+ artists: [{ name: track.artist_name }],
+ album: {
+ name: track.album_name,
+ images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+ },
+ duration_ms: track.duration_ms || 0
+ };
+ }
+
+ // Normalize artists to array of strings for modal compatibility
+ if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
+ spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
+ }
+
+ return spotifyTrack;
+ });
+
+ // Create virtual playlist ID
+ const virtualPlaylistId = `discover_${playlistType}`;
+
+ // Use existing modal system (same as YouTube/Tidal playlists)
+ await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+
+ } catch (error) {
+ console.error('Error opening download modal for discover playlist:', error);
+ showToast(`Failed to open download modal: ${error.message}`, 'error');
+ hideLoadingOverlay(); // Ensure overlay is hidden on error
+ }
+}
+
+function updateDiscoverDownloadButton(playlistType, state) {
+ /**
+ * Update the download button appearance based on download state
+ * @param {string} playlistType - 'release_radar' or 'discovery_weekly'
+ * @param {string} state - 'idle', 'downloading', or 'complete'
+ */
+ const buttonId = `${playlistType}-download-btn`;
+ const button = document.getElementById(buttonId);
+
+ if (!button) return;
+
+ const icon = button.querySelector('.button-icon');
+ const text = button.querySelector('.button-text');
+
+ if (state === 'downloading') {
+ if (icon) icon.textContent = '⏳';
+ if (text) text.textContent = 'View Progress';
+ button.title = 'View download progress';
+ } else {
+ if (icon) icon.textContent = '↓';
+ if (text) text.textContent = 'Download';
+ button.title = 'Download missing tracks';
+ }
+}
+
+function checkForActiveDiscoverDownloads() {
+ /**
+ * Check for active download processes and update button states
+ * Only runs if discover page is actually loaded in the DOM
+ */
+ // Check if discover page is loaded by looking for a discover-specific element
+ const discoverPage = document.getElementById('release-radar-download-btn') ||
+ document.getElementById('discovery-weekly-download-btn');
+
+ if (!discoverPage) return;
+
+ const discoverPlaylists = [
+ { id: 'discover_release_radar', type: 'release_radar' },
+ { id: 'discover_discovery_weekly', type: 'discovery_weekly' }
+ ];
+
+ discoverPlaylists.forEach(({ id, type }) => {
+ if (activeDownloadProcesses[id]) {
+ const process = activeDownloadProcesses[id];
+ if (process.status === 'running' || process.status === 'idle') {
+ updateDiscoverDownloadButton(type, 'downloading');
+ }
+ }
+ });
+}
+
+async function startDiscoverPlaylistSync(playlistType, playlistName) {
+ console.log(`🔄 Starting sync for ${playlistName}`);
+
+ // Get tracks based on playlist type
+ let tracks = [];
+ if (playlistType === 'release_radar') {
+ tracks = discoverReleaseRadarTracks;
+ } else if (playlistType === 'discovery_weekly') {
+ tracks = discoverWeeklyTracks;
+ } else if (playlistType === 'seasonal_playlist') {
+ tracks = discoverSeasonalTracks;
+ } else if (playlistType === 'popular_picks') {
+ tracks = personalizedPopularPicks;
+ } else if (playlistType === 'hidden_gems') {
+ tracks = personalizedHiddenGems;
+ } else if (playlistType === 'discovery_shuffle') {
+ tracks = personalizedDiscoveryShuffle;
+ } else if (playlistType === 'familiar_favorites') {
+ tracks = personalizedFamiliarFavorites;
+ } else if (playlistType === 'build_playlist') {
+ tracks = buildPlaylistTracks;
+ }
+
+ if (!tracks || tracks.length === 0) {
+ showToast(`No tracks available for ${playlistName}`, 'warning');
+ return;
+ }
+
+ // Convert to format expected by sync API
+ const spotifyTracks = tracks.map(track => {
+ let spotifyTrack;
+
+ // Use track_data_json if available
+ if (track.track_data_json) {
+ spotifyTrack = track.track_data_json;
+ } else {
+ // Fallback: construct track object
+ spotifyTrack = {
+ id: track.spotify_track_id,
+ name: track.track_name,
+ artists: [{ name: track.artist_name }],
+ album: {
+ name: track.album_name,
+ images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+ },
+ duration_ms: track.duration_ms || 0
+ };
+ }
+
+ // Normalize artists to array of strings for sync compatibility
+ if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
+ spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
+ }
+
+ return spotifyTrack;
+ });
+
+ // Create virtual playlist ID
+ const virtualPlaylistId = `discover_${playlistType}`;
+
+ // Store in cache for sync function
+ playlistTrackCache[virtualPlaylistId] = spotifyTracks;
+
+ // Create virtual playlist object
+ const virtualPlaylist = {
+ id: virtualPlaylistId,
+ name: playlistName,
+ track_count: spotifyTracks.length
+ };
+
+ // Add to spotify playlists array if not already there
+ if (!spotifyPlaylists.find(p => p.id === virtualPlaylistId)) {
+ spotifyPlaylists.push(virtualPlaylist);
+ }
+
+ // Show sync status display (convert underscores to hyphens for ID)
+ const statusId = playlistType.replace(/_/g, '-') + '-sync-status';
+ const statusDisplay = document.getElementById(statusId);
+ if (statusDisplay) {
+ statusDisplay.style.display = 'block';
+ }
+
+ // Disable sync button to prevent duplicate syncs (convert underscores to hyphens for ID)
+ const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
+ const syncButton = document.getElementById(buttonId);
+ if (syncButton) {
+ syncButton.disabled = true;
+ syncButton.style.opacity = '0.5';
+ syncButton.style.cursor = 'not-allowed';
+ }
+
+ // Start sync using existing function
+ await startPlaylistSync(virtualPlaylistId);
+
+ // Extract image URL from first track for download bar bubble
+ let imageUrl = null;
+ if (spotifyTracks && spotifyTracks.length > 0) {
+ const firstTrack = spotifyTracks[0];
+ if (firstTrack.album && firstTrack.album.images && firstTrack.album.images.length > 0) {
+ imageUrl = firstTrack.album.images[0].url;
+ }
+ }
+
+ // Add to discover download bar
+ addDiscoverDownload(virtualPlaylistId, playlistName, playlistType, imageUrl);
+
+ // Start polling for progress updates
+ startDiscoverSyncPolling(playlistType, virtualPlaylistId);
+}
+
+// Track active discover sync pollers
+const discoverSyncPollers = {};
+
+function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
+ // Stop any existing poller for this playlist type
+ if (discoverSyncPollers[playlistType]) {
+ clearInterval(discoverSyncPollers[playlistType]);
+ }
+
+ console.log(`🔄 Starting sync polling for ${playlistType} (${virtualPlaylistId})`);
+
+ // Phase 5: Subscribe via WebSocket
+ if (socketConnected) {
+ socket.emit('sync:subscribe', { playlist_ids: [virtualPlaylistId] });
+ _syncProgressCallbacks[virtualPlaylistId] = (data) => {
+ const prefix = playlistType.replace(/_/g, '-');
+ const progress = data.progress || {};
+ const total = progress.total_tracks || 0;
+ const matched = progress.matched_tracks || 0;
+ const failed = progress.failed_tracks || 0;
+ const processed = matched + failed;
+ const pending = total - processed;
+ const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
+ const el = (id) => document.getElementById(id);
+ if (el(`${prefix}-sync-completed`)) el(`${prefix}-sync-completed`).textContent = matched;
+ if (el(`${prefix}-sync-pending`)) el(`${prefix}-sync-pending`).textContent = pending;
+ if (el(`${prefix}-sync-failed`)) el(`${prefix}-sync-failed`).textContent = failed;
+ if (el(`${prefix}-sync-percentage`)) el(`${prefix}-sync-percentage`).textContent = pct;
+ if (data.status === 'finished') {
+ if (discoverSyncPollers[playlistType]) { clearInterval(discoverSyncPollers[playlistType]); delete discoverSyncPollers[playlistType]; }
+ socket.emit('sync:unsubscribe', { playlist_ids: [virtualPlaylistId] });
+ delete _syncProgressCallbacks[virtualPlaylistId];
+ const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
+ const syncButton = el(buttonId);
+ if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; syncButton.style.cursor = 'pointer'; }
+ const playlistNames = {
+ 'release_radar': 'Fresh Tape', 'discovery_weekly': 'The Archives',
+ 'seasonal_playlist': 'Seasonal Mix', 'popular_picks': 'Popular Picks',
+ 'hidden_gems': 'Hidden Gems', 'discovery_shuffle': 'Discovery Shuffle',
+ 'familiar_favorites': 'Familiar Favorites', 'build_playlist': 'Custom Playlist'
+ };
+ showToast(`${playlistNames[playlistType] || playlistType} sync complete!`, 'success');
+ setTimeout(() => { const sd = el(`${prefix}-sync-status`); if (sd) sd.style.display = 'none'; }, 3000);
+ }
+ };
+ }
+
+ // Poll every 500ms for progress updates
+ discoverSyncPollers[playlistType] = setInterval(async () => {
+ // Always poll — no dedicated WebSocket events for discovery progress
+ try {
+ const response = await fetch(`/api/sync/status/${virtualPlaylistId}`);
+ if (!response.ok) {
+ console.log(`⚠️ Sync status response not OK: ${response.status}`);
+ return;
+ }
+
+ const data = await response.json();
+ console.log(`📊 Sync status for ${playlistType}:`, data);
+
+ // Update UI with progress (data structure: {status: ..., progress: {...}})
+ // Convert underscores to hyphens for HTML IDs
+ const prefix = playlistType.replace(/_/g, '-');
+ const progress = data.progress || {};
+
+ const completedEl = document.getElementById(`${prefix}-sync-completed`);
+ const pendingEl = document.getElementById(`${prefix}-sync-pending`);
+ const failedEl = document.getElementById(`${prefix}-sync-failed`);
+ const percentageEl = document.getElementById(`${prefix}-sync-percentage`);
+
+ const total = progress.total_tracks || 0;
+ const matched = progress.matched_tracks || 0;
+ const failed = progress.failed_tracks || 0;
+ const processed = matched + failed;
+ const pending = total - processed;
+ const completionPercentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+ if (completedEl) completedEl.textContent = matched;
+ if (pendingEl) pendingEl.textContent = pending;
+ if (failedEl) failedEl.textContent = failed;
+ if (percentageEl) percentageEl.textContent = completionPercentage;
+
+ // If complete, stop polling and hide status after delay
+ if (data.status === 'finished') {
+ console.log(`✅ Sync complete for ${playlistType}`);
+ clearInterval(discoverSyncPollers[playlistType]);
+ delete discoverSyncPollers[playlistType];
+
+ // Re-enable sync button
+ const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
+ const syncButton = document.getElementById(buttonId);
+ if (syncButton) {
+ syncButton.disabled = false;
+ syncButton.style.opacity = '1';
+ syncButton.style.cursor = 'pointer';
+ }
+
+ // Show completion toast with playlist name
+ const playlistNames = {
+ 'release_radar': 'Fresh Tape',
+ 'discovery_weekly': 'The Archives',
+ 'seasonal_playlist': 'Seasonal Mix',
+ 'popular_picks': 'Popular Picks',
+ 'hidden_gems': 'Hidden Gems',
+ 'discovery_shuffle': 'Discovery Shuffle',
+ 'familiar_favorites': 'Familiar Favorites',
+ 'build_playlist': 'Custom Playlist'
+ };
+ const displayName = playlistNames[playlistType] || playlistType;
+ showToast(`${displayName} sync complete!`, 'success');
+
+ // Hide status display after 3 seconds
+ setTimeout(() => {
+ const statusDisplay = document.getElementById(`${prefix}-sync-status`);
+ if (statusDisplay) {
+ statusDisplay.style.display = 'none';
+ }
+ }, 3000);
+ }
+
+ } catch (error) {
+ console.error(`❌ Error polling sync status for ${playlistType}:`, error);
+ }
+ }, 500);
+}
+
+async function openDownloadModalForRecentAlbum(albumIndex) {
+ const album = discoverRecentAlbums[albumIndex];
+ if (!album) {
+ showToast('Album data not found', 'error');
+ return;
+ }
+
+ console.log(`📥 Opening Download Missing Tracks modal for album: ${album.album_name}`);
+ showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
+
+ try {
+ // Determine source and album ID - use source-agnostic endpoint
+ const source = album.source || (album.album_spotify_id ? 'spotify' : album.album_deezer_id ? 'deezer' : 'itunes');
+ const albumId = source === 'spotify' ? album.album_spotify_id : source === 'deezer' ? album.album_deezer_id : album.album_itunes_id;
+
+ if (!albumId) {
+ throw new Error(`No ${source} album ID available`);
+ }
+
+ // Fetch album tracks from appropriate source (pass name/artist for Hydrabase support)
+ const _dap2 = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+ const response = await fetch(`/api/discover/album/${source}/${albumId}?${_dap2}`);
+ if (!response.ok) {
+ throw new Error('Failed to fetch album tracks');
+ }
+
+ const albumData = await response.json();
+ if (!albumData.tracks || albumData.tracks.length === 0) {
+ throw new Error('No tracks found in album');
+ }
+
+ // Convert to expected format - CRITICAL FIX: Use fresh albumData from Spotify, not cached album
+ const spotifyTracks = albumData.tracks.map(track => {
+ // Normalize artists to array of strings
+ let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+ if (Array.isArray(artists)) {
+ artists = artists.map(a => a.name || a);
+ }
+
+ return {
+ id: track.id,
+ name: track.name,
+ artists: artists,
+ album: {
+ id: albumData.id, // ✅ Album ID for proper tracking
+ name: albumData.name, // ✅ Use fresh data, not cached
+ album_type: albumData.album_type || 'album', // ✅ Critical: Album type for classification
+ total_tracks: albumData.total_tracks || 0, // ✅ Total tracks for context
+ release_date: albumData.release_date || '', // ✅ Release date
+ images: albumData.images || [] // ✅ Use Spotify images
+ },
+ duration_ms: track.duration_ms || 0,
+ track_number: track.track_number || 0
+ };
+ });
+
+ // Create virtual playlist ID using the appropriate album ID
+ const virtualPlaylistId = `discover_album_${albumId}`;
+
+ // CRITICAL FIX: Pass proper artist/album context for modal display
+ const artistContext = {
+ id: source === 'spotify' ? album.artist_spotify_id : source === 'deezer' ? album.artist_deezer_id : album.artist_itunes_id,
+ name: album.artist_name,
+ source: source
+ };
+
+ const albumContext = {
+ id: albumData.id,
+ name: albumData.name,
+ album_type: albumData.album_type || 'album',
+ total_tracks: albumData.total_tracks || 0,
+ release_date: albumData.release_date || '',
+ images: albumData.images || []
+ };
+
+ // Open download modal with artist/album context
+ await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, artistContext, albumContext);
+
+ hideLoadingOverlay();
+
+ } catch (error) {
+ console.error('Error opening album download modal:', error);
+ showToast(`Failed to load album: ${error.message}`, 'error');
+ hideLoadingOverlay();
+ }
+}
+
+// ===============================
+// DISCOVER DOWNLOAD BAR
+// ===============================
+
+// Track discover page downloads
+let discoverDownloads = {}; // playlistId -> { name, type, status, virtualPlaylistId, startTime }
+
+/**
+ * Add a download to the discover download bar
+ */
+function addDiscoverDownload(playlistId, playlistName, playlistType, imageUrl = null) {
+ console.log(`📥 [DOWNLOAD SIDEBAR] Adding discover download: ${playlistName} (${playlistId}) type: ${playlistType}, image: ${imageUrl}`);
+
+ // Always register the download in state (needed for dashboard even when not on discover page)
+ discoverDownloads[playlistId] = {
+ name: playlistName,
+ type: playlistType,
+ status: 'in_progress',
+ virtualPlaylistId: playlistId,
+ imageUrl: imageUrl,
+ startTime: new Date()
+ };
+
+ console.log(`📊 [DOWNLOAD SIDEBAR] Active downloads:`, Object.keys(discoverDownloads));
+
+ // Update discover page sidebar if it exists (user is on discover page)
+ const downloadSidebar = document.getElementById('discover-download-sidebar');
+ if (downloadSidebar) {
+ updateDiscoverDownloadBar(); // Also saves snapshot internally
+ } else {
+ console.log('ℹ️ [DOWNLOAD SIDEBAR] Sidebar not present - skipping sidebar UI update');
+ saveDiscoverDownloadSnapshot(); // Persist state even when sidebar is absent
+ }
+
+ updateDashboardDownloads();
+ monitorDiscoverDownload(playlistId);
+}
+
+/**
+ * Monitor a discover download for completion
+ */
+function monitorDiscoverDownload(playlistId) {
+ let notFoundCount = 0;
+ const maxNotFoundAttempts = 5; // Give sync 10 seconds to start (5 checks * 2 seconds)
+
+ // Phase 5: Subscribe via WebSocket for sync status updates
+ if (socketConnected) {
+ socket.emit('sync:subscribe', { playlist_ids: [playlistId] });
+ _syncProgressCallbacks[playlistId] = (data) => {
+ if (!discoverDownloads[playlistId]) return;
+ if (data.status === 'complete' || data.status === 'finished') {
+ discoverDownloads[playlistId].status = 'completed';
+ updateDiscoverDownloadBar();
+ updateDashboardDownloads();
+ socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
+ delete _syncProgressCallbacks[playlistId];
+ setTimeout(() => {
+ if (discoverDownloads[playlistId] && discoverDownloads[playlistId].status === 'completed') {
+ removeDiscoverDownload(playlistId);
+ }
+ }, 30000);
+ }
+ };
+ }
+
+ const checkInterval = setInterval(async () => {
+ try {
+ // Check if download still exists
+ if (!discoverDownloads[playlistId]) {
+ clearInterval(checkInterval);
+ if (_syncProgressCallbacks[playlistId]) {
+ if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
+ delete _syncProgressCallbacks[playlistId];
+ }
+ return;
+ }
+
+ // First check if there's an active download process (modal-based downloads)
+ const activeProcess = activeDownloadProcesses[playlistId];
+ if (activeProcess) {
+ console.log(`📂 [DOWNLOAD BAR] Found active process for ${playlistId}, status: ${activeProcess.status}`);
+
+ if (activeProcess.status === 'complete') {
+ console.log(`✅ [DOWNLOAD BAR] Process completed: ${discoverDownloads[playlistId].name}`);
+ discoverDownloads[playlistId].status = 'completed';
+ updateDiscoverDownloadBar();
+ updateDashboardDownloads();
+ clearInterval(checkInterval);
+
+ // Auto-remove completed downloads after 30 seconds
+ setTimeout(() => {
+ if (discoverDownloads[playlistId] && discoverDownloads[playlistId].status === 'completed') {
+ removeDiscoverDownload(playlistId);
+ }
+ }, 30000);
+ }
+ return; // Continue monitoring
+ }
+
+ // Check sync status API (for sync-based downloads)
+ if (socketConnected) return; // Phase 5: WS handles sync status
+ const response = await fetch(`/api/sync/status/${playlistId}`);
+ if (response.ok) {
+ const data = await response.json();
+ notFoundCount = 0; // Reset counter if found
+
+ console.log(`🔄 [DOWNLOAD BAR] Sync status for ${playlistId}: ${data.status}`);
+
+ if (data.status === 'complete') {
+ console.log(`✅ [DOWNLOAD BAR] Sync completed: ${discoverDownloads[playlistId].name}`);
+ discoverDownloads[playlistId].status = 'completed';
+ updateDiscoverDownloadBar();
+ updateDashboardDownloads();
+ clearInterval(checkInterval);
+
+ // Auto-remove completed downloads after 30 seconds
+ setTimeout(() => {
+ if (discoverDownloads[playlistId] && discoverDownloads[playlistId].status === 'completed') {
+ removeDiscoverDownload(playlistId);
+ }
+ }, 30000);
+ }
+ } else if (response.status === 404) {
+ notFoundCount++;
+ console.log(`🔍 [DOWNLOAD BAR] Sync not found for ${playlistId} (attempt ${notFoundCount}/${maxNotFoundAttempts})`);
+
+ // Only remove after multiple attempts (give it time to start)
+ if (notFoundCount >= maxNotFoundAttempts) {
+ console.log(`⏹️ [DOWNLOAD BAR] Sync not found after ${maxNotFoundAttempts} attempts, removing`);
+ clearInterval(checkInterval);
+ removeDiscoverDownload(playlistId);
+ }
+ }
+ } catch (error) {
+ console.error(`❌ [DOWNLOAD BAR] Error monitoring ${playlistId}:`, error);
+ }
+ }, 2000); // Check every 2 seconds
+}
+
+/**
+ * Remove a download from the bar
+ */
+function removeDiscoverDownload(playlistId) {
+ console.log(`🗑️ Removing discover download: ${playlistId}`);
+ delete discoverDownloads[playlistId];
+ updateDiscoverDownloadBar();
+ updateDashboardDownloads();
+ saveDiscoverDownloadSnapshot(); // Save state after removal
+}
+
+/**
+ * Update the discover download sidebar UI
+ */
+function updateDiscoverDownloadBar() {
+ const downloadSidebar = document.getElementById('discover-download-sidebar');
+ const bubblesContainer = document.getElementById('discover-download-bubbles');
+ const countElement = document.getElementById('discover-download-count');
+
+ console.log(`🔄 [DOWNLOAD SIDEBAR] Updating sidebar - found elements:`, {
+ downloadSidebar: !!downloadSidebar,
+ bubblesContainer: !!bubblesContainer,
+ countElement: !!countElement
+ });
+
+ if (!downloadSidebar || !bubblesContainer || !countElement) {
+ console.warn('⚠️ [DOWNLOAD SIDEBAR] Missing elements, cannot update');
+ return;
+ }
+
+ const activeDownloads = Object.keys(discoverDownloads);
+ const count = activeDownloads.length;
+
+ console.log(`📊 [DOWNLOAD SIDEBAR] Updating with ${count} active downloads`);
+
+ // Update count
+ countElement.textContent = count;
+
+ // Show/hide sidebar
+ if (count === 0) {
+ console.log(`👁️ [DOWNLOAD SIDEBAR] No downloads, hiding sidebar`);
+ downloadSidebar.classList.add('hidden');
+ return;
+ } else {
+ console.log(`👁️ [DOWNLOAD SIDEBAR] ${count} downloads, showing sidebar`);
+ downloadSidebar.classList.remove('hidden');
+ }
+
+ // Update bubbles
+ bubblesContainer.innerHTML = activeDownloads.map(playlistId => {
+ const download = discoverDownloads[playlistId];
+ const isCompleted = download.status === 'completed';
+ const icon = isCompleted ? '✅' : '⏳';
+
+ // Use image if available, otherwise gradient background
+ const imageUrl = download.imageUrl || '';
+ const backgroundStyle = imageUrl ?
+ `background-image: url('${imageUrl}');` :
+ `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
+
+ return `
+
+ ${artist.name}
+
+
+
+ `;
+ }).join('');
+
+ console.log(`📊 Updated discover download sidebar: ${count} active downloads`);
+
+ // Save snapshot after UI update
+ saveDiscoverDownloadSnapshot();
+}
+
+/**
+ * Open download modal for a discover playlist
+ */
+async function openDiscoverDownloadModal(playlistId) {
+ console.log(`📂 [DOWNLOAD BAR] Opening download modal for: ${playlistId}`);
+
+ // Check if there's an active download process with modal
+ let process = activeDownloadProcesses[playlistId];
+
+ console.log(`📋 [DOWNLOAD BAR] Process found:`, {
+ exists: !!process,
+ hasModalElement: !!(process && process.modalElement),
+ hasModalId: !!(process && process.modalId)
+ });
+
+ if (process) {
+ // Try modalElement first (album downloads)
+ if (process.modalElement) {
+ console.log(`✅ [DOWNLOAD BAR] Opening modal via modalElement`);
+ process.modalElement.style.display = 'flex';
+ return;
+ }
+
+ // Try modalId (sync downloads)
+ if (process.modalId) {
+ const modal = document.getElementById(process.modalId);
+ if (modal) {
+ console.log(`✅ [DOWNLOAD BAR] Opening modal via modalId: ${process.modalId}`);
+ modal.style.display = 'flex';
+ return;
+ }
+ }
+ }
+
+ // If no process found, try to rehydrate from backend
+ console.log(`💧 [DOWNLOAD BAR] No modal found, attempting to rehydrate from backend...`);
+ const rehydrated = await rehydrateDiscoverDownloadModal(playlistId);
+
+ if (rehydrated) {
+ console.log(`✅ [DOWNLOAD BAR] Successfully rehydrated modal, opening it...`);
+ // Try again after rehydration
+ process = activeDownloadProcesses[playlistId];
+ if (process && process.modalElement) {
+ process.modalElement.style.display = 'flex';
+ return;
+ }
+ }
+
+ // Fallback: show toast
+ const download = discoverDownloads[playlistId];
+ if (download) {
+ console.log(`ℹ️ [DOWNLOAD BAR] No modal found after rehydration attempt, showing toast`);
+ showToast(`Download: ${download.name} - ${download.status}`, 'info');
+ } else {
+ console.warn(`⚠️ [DOWNLOAD BAR] No download or process found for: ${playlistId}`);
+ }
+}
+
+/**
+ * Initialize discover download sidebar on page load
+ */
+function initializeDiscoverDownloadBar() {
+ console.log('🎵 Initializing discover download sidebar...');
+
+ // Start with sidebar hidden (will be shown if downloads exist after hydration)
+ const downloadSidebar = document.getElementById('discover-download-sidebar');
+ if (downloadSidebar) {
+ downloadSidebar.classList.add('hidden');
+ }
+}
+
+// --- Discover Download Modal Rehydration ---
+
+async function rehydrateDiscoverDownloadModal(playlistId) {
+ /**
+ * Rehydrates a discover download modal from backend process data.
+ * Fetches tracks from backend API and recreates the modal (user-requested).
+ */
+ try {
+ console.log(`💧 [REHYDRATE] Attempting to rehydrate modal for: ${playlistId}`);
+
+ // Check if there's an active backend process for this playlist
+ const batchResponse = await fetch(`/api/download_status/batch`);
+ if (!batchResponse.ok) {
+ console.log(`⚠️ [REHYDRATE] Failed to fetch batch info`);
+ return false;
+ }
+
+ const batchData = await batchResponse.json();
+ const batches = batchData.batches || {};
+
+ // Find the batch for this playlist (batches is an object with batch_id keys)
+ let batchId = null;
+ let batch = null;
+ for (const [id, batchStatus] of Object.entries(batches)) {
+ if (batchStatus.playlist_id === playlistId) {
+ batchId = id;
+ batch = batchStatus;
+ break;
+ }
+ }
+
+ if (!batch || !batchId) {
+ console.log(`⚠️ [REHYDRATE] No active batch found for ${playlistId}`);
+ return false;
+ }
+
+ console.log(`✅ [REHYDRATE] Found active batch for ${playlistId}: ${batchId}`, batch);
+
+ // Get the download metadata from discoverDownloads
+ const downloadData = discoverDownloads[playlistId];
+ if (!downloadData) {
+ console.log(`⚠️ [REHYDRATE] No download metadata found for ${playlistId}`);
+ return false;
+ }
+
+ // Handle album downloads from Recent Releases
+ if (playlistId.startsWith('discover_album_')) {
+ const albumId = playlistId.replace('discover_album_', '');
+ console.log(`💧 [REHYDRATE] Album download - fetching album ${albumId}...`);
+
+ try {
+ const albumResponse = await fetch(`/api/spotify/album/${albumId}`);
+ if (!albumResponse.ok) {
+ console.error(`❌ [REHYDRATE] Failed to fetch album: ${albumResponse.status}`);
+ return false;
+ }
+
+ const albumData = await albumResponse.json();
+ if (!albumData.tracks || albumData.tracks.length === 0) {
+ console.error(`❌ [REHYDRATE] No tracks in album`);
+ return false;
+ }
+
+ // Convert tracks to expected format
+ const spotifyTracks = albumData.tracks.map(track => {
+ let artists = track.artists || [];
+ if (Array.isArray(artists)) {
+ artists = artists.map(a => a.name || a);
+ }
+
+ return {
+ id: track.id,
+ name: track.name,
+ artists: artists,
+ album: {
+ name: albumData.name || downloadData.name.split(' - ')[0],
+ images: downloadData.imageUrl ? [{ url: downloadData.imageUrl }] : []
+ },
+ duration_ms: track.duration_ms || 0
+ };
+ });
+
+ console.log(`✅ [REHYDRATE] Retrieved ${spotifyTracks.length} tracks for album`);
+
+ // Create modal
+ await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
+
+ // Update process
+ const process = activeDownloadProcesses[playlistId];
+ if (process) {
+ process.status = 'running';
+ process.batchId = batchId;
+ subscribeToDownloadBatch(batchId);
+ const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+ const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+ if (beginBtn) beginBtn.style.display = 'none';
+ if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+ // Start polling for status updates
+ startModalDownloadPolling(playlistId);
+ console.log(`✅ [REHYDRATE] Successfully rehydrated album modal with polling`);
+ return true;
+ }
+ return false;
+
+ } catch (error) {
+ console.error(`❌ [REHYDRATE] Error fetching album:`, error);
+ return false;
+ }
+ }
+
+ // Determine API endpoint based on playlist ID
+ let apiEndpoint;
+ if (playlistId === 'discover_release_radar') {
+ apiEndpoint = '/api/discover/release-radar';
+ } else if (playlistId === 'discover_discovery_weekly') {
+ apiEndpoint = '/api/discover/discovery-weekly';
+ } else if (playlistId === 'discover_seasonal_playlist') {
+ apiEndpoint = '/api/discover/seasonal-playlist';
+ } else if (playlistId === 'discover_popular_picks') {
+ apiEndpoint = '/api/discover/popular-picks';
+ } else if (playlistId === 'discover_hidden_gems') {
+ apiEndpoint = '/api/discover/hidden-gems';
+ } else if (playlistId === 'discover_discovery_shuffle') {
+ apiEndpoint = '/api/discover/discovery-shuffle';
+ } else if (playlistId === 'discover_familiar_favorites') {
+ apiEndpoint = '/api/discover/familiar-favorites';
+ } else if (playlistId === 'build_playlist_custom') {
+ apiEndpoint = '/api/discover/build-playlist';
+ } else if (playlistId.startsWith('discover_lb_')) {
+ // ListenBrainz playlist - fetch from cache
+ const identifier = playlistId.replace('discover_lb_', '');
+ const tracks = listenbrainzTracksCache[identifier];
+ if (!tracks || tracks.length === 0) {
+ console.log(`⚠️ [REHYDRATE] No ListenBrainz tracks in cache for ${identifier}`);
+ return false;
+ }
+
+ // Convert to Spotify format
+ const spotifyTracks = tracks.map(track => ({
+ id: track.mbid || `listenbrainz_${track.track_name}_${track.artist_name}`.replace(/[^a-z0-9]/gi, '_'), // Generate ID if missing
+ name: track.track_name,
+ artists: [{ name: cleanArtistName(track.artist_name) }], // Proper Spotify format
+ album: {
+ name: track.album_name,
+ images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+ },
+ duration_ms: track.duration_ms || 0,
+ mbid: track.mbid
+ }));
+
+ // Create modal and update process
+ await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
+ const process = activeDownloadProcesses[playlistId];
+ if (process) {
+ process.status = 'running';
+ process.batchId = batchId;
+ subscribeToDownloadBatch(batchId);
+ const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+ const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+ if (beginBtn) beginBtn.style.display = 'none';
+ if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+ // Start polling for status updates
+ startModalDownloadPolling(playlistId);
+ console.log(`✅ [REHYDRATE] Successfully rehydrated ListenBrainz modal with polling`);
+ return true;
+ }
+ return false;
+ } else if (playlistId.startsWith('listenbrainz_')) {
+ // ListenBrainz download from discovery modal - get from backend state
+ const mbid = playlistId.replace('listenbrainz_', '');
+ console.log(`💧 [REHYDRATE] ListenBrainz download - fetching state for MBID: ${mbid}`);
+
+ try {
+ // Fetch ListenBrainz state from backend
+ const stateResponse = await fetch(`/api/listenbrainz/state/${mbid}`);
+ if (!stateResponse.ok) {
+ console.log(`⚠️ [REHYDRATE] Failed to fetch ListenBrainz state`);
+ return false;
+ }
+
+ const stateData = await stateResponse.json();
+ if (!stateData || !stateData.discovery_results) {
+ console.log(`⚠️ [REHYDRATE] No discovery results in ListenBrainz state`);
+ return false;
+ }
+
+ // Convert discovery results to Spotify tracks
+ const spotifyTracks = stateData.discovery_results
+ .filter(result => result.spotify_data)
+ .map(result => {
+ const track = result.spotify_data;
+ // Ensure artists is in proper Spotify format: [{name: ...}]
+ let artistsArray = [];
+ if (track.artists && Array.isArray(track.artists)) {
+ artistsArray = track.artists.map(artist => {
+ if (typeof artist === 'string') {
+ return { name: artist };
+ } else if (artist && artist.name) {
+ return { name: artist.name };
+ } else {
+ return { name: String(artist || 'Unknown Artist') };
+ }
+ });
+ } else if (track.artists && typeof track.artists === 'string') {
+ artistsArray = [{ name: track.artists }];
+ } else {
+ artistsArray = [{ name: 'Unknown Artist' }];
+ }
+ return {
+ id: track.id,
+ name: track.name,
+ artists: artistsArray,
+ album: track.album || { name: 'Unknown Album', images: [] },
+ duration_ms: track.duration_ms || 0,
+ external_urls: track.external_urls || {}
+ };
+ });
+
+ if (spotifyTracks.length === 0) {
+ console.log(`⚠️ [REHYDRATE] No Spotify tracks in ListenBrainz discovery results`);
+ return false;
+ }
+
+ console.log(`✅ [REHYDRATE] Retrieved ${spotifyTracks.length} tracks from ListenBrainz state`);
+
+ // Create modal and update process
+ await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
+ const process = activeDownloadProcesses[playlistId];
+ if (process) {
+ process.status = 'running';
+ process.batchId = batchId;
+ subscribeToDownloadBatch(batchId);
+ const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+ const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+ if (beginBtn) beginBtn.style.display = 'none';
+ if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+ // Start polling for status updates
+ startModalDownloadPolling(playlistId);
+ console.log(`✅ [REHYDRATE] Successfully rehydrated ListenBrainz download modal with polling`);
+ return true;
+ }
+ return false;
+
+ } catch (error) {
+ console.error(`❌ [REHYDRATE] Error fetching ListenBrainz state:`, error);
+ return false;
+ }
+ } else {
+ console.error(`❌ [REHYDRATE] Unknown discover playlist type: ${playlistId}`);
+ return false;
+ }
+
+ // Fetch tracks from API
+ console.log(`📡 [REHYDRATE] Fetching tracks from ${apiEndpoint}...`);
+ const response = await fetch(apiEndpoint);
+ if (!response.ok) {
+ console.error(`❌ [REHYDRATE] Failed to fetch tracks: ${response.status}`);
+ return false;
+ }
+
+ const data = await response.json();
+ if (!data.success || !data.tracks) {
+ console.error(`❌ [REHYDRATE] Invalid track data:`, data);
+ return false;
+ }
+
+ const tracks = data.tracks;
+ console.log(`✅ [REHYDRATE] Retrieved ${tracks.length} tracks`);
+
+ // Transform tracks to Spotify format
+ const spotifyTracks = tracks.map(track => {
+ let spotifyTrack;
+ if (track.track_data_json) {
+ spotifyTrack = track.track_data_json;
+ } else {
+ spotifyTrack = {
+ id: track.spotify_track_id,
+ name: track.track_name,
+ artists: [{ name: track.artist_name }],
+ album: {
+ name: track.album_name,
+ images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+ },
+ duration_ms: track.duration_ms || 0
+ };
+ }
+ if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
+ spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
+ }
+ return spotifyTrack;
+ });
+
+ // Create the modal
+ await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
+
+ // Update process with batch info
+ const process = activeDownloadProcesses[playlistId];
+ if (process) {
+ process.status = 'running';
+ process.batchId = batchId;
+ subscribeToDownloadBatch(batchId);
+
+ // Update button states
+ const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+ const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+ if (beginBtn) beginBtn.style.display = 'none';
+ if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+ // Start polling for status updates
+ startModalDownloadPolling(playlistId);
+
+ // Don't hide the modal - user clicked to open it
+ console.log(`✅ [REHYDRATE] Successfully rehydrated modal for ${downloadData.name} with polling`);
+ return true;
+ } else {
+ console.error(`❌ [REHYDRATE] Failed to find rehydrated process for ${playlistId}`);
+ return false;
+ }
+
+ } catch (error) {
+ console.error(`❌ [REHYDRATE] Error rehydrating discover download modal:`, error);
+ return false;
+ }
+}
+
+// --- Discover Download Snapshot System ---
+
+let discoverSnapshotSaveTimeout = null; // Debounce snapshot saves
+
+async function saveDiscoverDownloadSnapshot() {
+ /**
+ * Saves current discoverDownloads state to backend for persistence.
+ * Debounced to prevent excessive backend calls.
+ */
+
+ // Clear any existing timeout
+ if (discoverSnapshotSaveTimeout) {
+ clearTimeout(discoverSnapshotSaveTimeout);
+ }
+
+ // Debounce the actual save
+ discoverSnapshotSaveTimeout = setTimeout(async () => {
+ try {
+ const downloadCount = Object.keys(discoverDownloads).length;
+
+ // Don't save empty state
+ if (downloadCount === 0) {
+ console.log('📸 Skipping discover snapshot save - no downloads to save');
+ return;
+ }
+
+ console.log(`📸 Saving discover download snapshot: ${downloadCount} downloads`);
+
+ // Prepare snapshot data (clean format)
+ const cleanDownloads = {};
+ for (const [playlistId, downloadData] of Object.entries(discoverDownloads)) {
+ cleanDownloads[playlistId] = {
+ name: downloadData.name,
+ type: downloadData.type,
+ status: downloadData.status,
+ virtualPlaylistId: downloadData.virtualPlaylistId,
+ imageUrl: downloadData.imageUrl,
+ startTime: downloadData.startTime instanceof Date ? downloadData.startTime.toISOString() : downloadData.startTime
+ };
+ }
+
+ const response = await fetch('/api/discover_downloads/snapshot', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ downloads: cleanDownloads
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ console.log(`✅ Discover download snapshot saved: ${downloadCount} downloads`);
+ } else {
+ console.error('❌ Failed to save discover download snapshot:', data.error);
+ }
+
+ } catch (error) {
+ console.error('❌ Error saving discover download snapshot:', error);
+ }
+ }, 1000); // 1 second debounce
+}
+
+async function hydrateDiscoverDownloadsFromSnapshot() {
+ /**
+ * Hydrates discover downloads from backend snapshot with live status.
+ * Called on page load to restore download state.
+ */
+ try {
+ console.log('🔄 Loading discover download snapshot from backend...');
+
+ const response = await fetch('/api/discover_downloads/hydrate');
+ const data = await response.json();
+
+ if (!data.success) {
+ console.error('❌ Failed to load discover download snapshot:', data.error);
+ return;
+ }
+
+ const downloads = data.downloads || {};
+ const stats = data.stats || {};
+
+ console.log(`🔄 Loaded discover snapshot: ${stats.total_downloads || 0} downloads, ${stats.active_downloads || 0} active, ${stats.completed_downloads || 0} completed`);
+
+ if (Object.keys(downloads).length === 0) {
+ console.log('ℹ️ No discover downloads to hydrate');
+ return;
+ }
+
+ // Clear existing state
+ discoverDownloads = {};
+
+ // Restore discoverDownloads with hydrated data
+ for (const [playlistId, downloadData] of Object.entries(downloads)) {
+ discoverDownloads[playlistId] = {
+ name: downloadData.name,
+ type: downloadData.type,
+ status: downloadData.status, // Live status from backend
+ virtualPlaylistId: downloadData.virtualPlaylistId,
+ imageUrl: downloadData.imageUrl,
+ startTime: new Date(downloadData.startTime)
+ };
+
+ console.log(`🔄 Hydrated download: ${downloadData.name} (${downloadData.status})`);
+
+ // Start monitoring for any in-progress downloads
+ if (downloadData.status === 'in_progress') {
+ console.log(`📡 Starting monitoring for: ${downloadData.name}`);
+ monitorDiscoverDownload(playlistId);
+ }
+ }
+
+ // Don't update UI here - it will be updated when user navigates to discover page
+ // This allows hydration to work even if page loads on a different tab
+
+ const totalDownloads = Object.keys(discoverDownloads).length;
+ console.log(`✅ Successfully hydrated ${totalDownloads} discover downloads (UI will update on discover page navigation)`);
+
+ } catch (error) {
+ console.error('❌ Error hydrating discover downloads from snapshot:', error);
+ }
+}
+
+// Initialize on page load
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initializeDiscoverDownloadBar);
+} else {
+ initializeDiscoverDownloadBar();
+}
+
+// ============================================================================
+
diff --git a/webui/static/downloads.js b/webui/static/downloads.js
new file mode 100644
index 00000000..3b18282f
--- /dev/null
+++ b/webui/static/downloads.js
@@ -0,0 +1,6399 @@
+// WING IT — Download without metadata discovery
+// ==================================================================================
+
+function _toggleWingItDropdown(btn, urlHash) {
+ // Remove any existing dropdown
+ const existing = document.querySelector('.wing-it-dropdown.visible');
+ if (existing) { existing.classList.remove('visible'); setTimeout(() => existing.remove(), 150); return; }
+
+ const wrap = btn.closest('.wing-it-wrap');
+ if (!wrap) return;
+
+ const dropdown = document.createElement('div');
+ dropdown.className = 'wing-it-dropdown';
+ dropdown.innerHTML = `
+
+
+ `;
+
+ dropdown.querySelectorAll('.wing-it-dropdown-item').forEach(item => {
+ item.addEventListener('click', () => {
+ dropdown.classList.remove('visible');
+ setTimeout(() => dropdown.remove(), 150);
+ const action = item.dataset.action;
+ if (action === 'download') {
+ _wingItAction(urlHash, 'download');
+ } else {
+ _wingItAction(urlHash, 'sync');
+ }
+ });
+ });
+
+ // Flip dropdown direction if button is in the top portion of viewport
+ const btnRect = btn.getBoundingClientRect();
+ if (btnRect.top < 200) dropdown.classList.add('flip-down');
+
+ wrap.appendChild(dropdown);
+ requestAnimationFrame(() => dropdown.classList.add('visible'));
+
+ // Close on outside click
+ setTimeout(() => {
+ const closeHandler = e => {
+ if (!dropdown.contains(e.target) && e.target !== btn) {
+ dropdown.classList.remove('visible');
+ setTimeout(() => dropdown.remove(), 150);
+ document.removeEventListener('click', closeHandler);
+ }
+ };
+ document.addEventListener('click', closeHandler);
+ }, 50);
+}
+
+function _wingItAction(urlHash, action) {
+ if (urlHash) {
+ // Called from a modal — use _wingItFromModal logic
+ const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash] || {};
+ const tracks = state.tracks || state.rawTracks || state.playlist?.tracks || [];
+ const name = state.playlistName || state.name || state.playlist?.name || 'Playlist';
+ const isTidal = state.is_tidal_playlist;
+ const isLB = state.is_listenbrainz_playlist;
+ const isBeatport = state.is_beatport_playlist;
+ const isDeezer = state.is_deezer_playlist;
+ const source = isLB ? 'ListenBrainz' : isTidal ? 'Tidal' : isDeezer ? 'Deezer' : isBeatport ? 'Beatport' : 'YouTube';
+
+ if (!tracks.length) {
+ showToast('No tracks available for Wing It', 'error');
+ return;
+ }
+
+ if (action === 'sync') {
+ // Sync inline — keep modal open
+ _wingItSyncFromModal(urlHash, tracks, name, isLB);
+ } else {
+ // Download — close modal, open download modal
+ const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+ if (modal) modal.remove();
+ const overlay = document.getElementById(`youtube-discovery-overlay-${urlHash}`);
+ if (overlay) overlay.remove();
+ wingItDownload(tracks, name, source, null, true);
+ }
+ }
+}
+
+async function _wingItSyncFromModal(urlHash, tracks, name, isLB) {
+ showToast('Starting Wing It sync...', 'info');
+ updateYouTubeModalButtons(urlHash, 'syncing');
+
+ try {
+ const syncTracks = tracks.map((t, i) => {
+ let artists = t.artists || [];
+ if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
+ return {
+ id: t.id || t.source_track_id || `wing_it_${i}`,
+ name: t.name || t.track_name || 'Unknown',
+ artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
+ album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
+ duration_ms: t.duration_ms || 0,
+ };
+ });
+
+ const res = await fetch('/api/wing-it/sync', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ tracks: syncTracks, playlist_name: name })
+ });
+ const data = await res.json();
+
+ if (data.error) {
+ showToast(`Sync failed: ${data.error}`, 'error');
+ updateYouTubeModalButtons(urlHash, 'discovered');
+ return;
+ }
+
+ if (isLB) {
+ const state = listenbrainzPlaylistStates[urlHash];
+ if (state) state.syncPlaylistId = data.sync_playlist_id;
+ startListenBrainzSyncPolling(urlHash, data.sync_playlist_id);
+ } else {
+ startYouTubeSyncPolling(urlHash, data.sync_playlist_id);
+ }
+ } catch (e) {
+ showToast('Sync failed: ' + e.message, 'error');
+ updateYouTubeModalButtons(urlHash, 'discovered');
+ }
+}
+
+async function wingItDownload(tracks, playlistName, source = 'playlist', cardIdentifier = null, skipConfirm = false) {
+ if (!tracks || tracks.length === 0) {
+ showToast('No tracks to download', 'error');
+ return;
+ }
+
+ if (!skipConfirm) {
+ // Show choice: Download or Sync (for LB card button which doesn't have dropdown)
+ const choice = await _showWingItChoiceDialog(tracks.length, source);
+ if (!choice) return;
+
+ if (choice === 'sync') {
+ await _wingItSync(tracks, playlistName, source, cardIdentifier);
+ return;
+ }
+ }
+
+ // Normalize tracks to Spotify-compatible format
+ const formattedTracks = tracks.map(t => {
+ // Handle various artist formats
+ let artists = [];
+ if (t.artists) {
+ if (Array.isArray(t.artists)) {
+ artists = t.artists.map(a => typeof a === 'string' ? { name: a } : a);
+ } else if (typeof t.artists === 'string') {
+ artists = [{ name: t.artists }];
+ }
+ } else if (t.artist_name) {
+ artists = [{ name: t.artist_name }];
+ } else if (t.artist) {
+ artists = [{ name: t.artist }];
+ }
+ if (artists.length === 0) artists = [{ name: 'Unknown' }];
+
+ // Handle album
+ let album = { name: '' };
+ if (t.album) {
+ album = typeof t.album === 'string' ? { name: t.album } : t.album;
+ } else if (t.album_name) {
+ album = { name: t.album_name };
+ }
+
+ return {
+ id: t.id || t.source_track_id || `wing_it_${Date.now()}_${Math.random()}`,
+ name: t.name || t.track_name || 'Unknown Track',
+ artists: artists,
+ duration_ms: t.duration_ms || 0,
+ album: album,
+ };
+ });
+
+ const virtualPlaylistId = `wing_it_${Date.now()}`;
+
+ // Store wing_it flag BEFORE opening the modal
+ youtubePlaylistStates[virtualPlaylistId] = {
+ wing_it: true,
+ tracks: formattedTracks,
+ };
+
+ await openDownloadMissingModalForYouTube(virtualPlaylistId, `⚡ ${playlistName}`, formattedTracks);
+
+ // Pre-check the Force Download toggle
+ setTimeout(() => {
+ const forceToggle = document.getElementById(`force-download-all-${virtualPlaylistId}`);
+ if (forceToggle && !forceToggle.checked) forceToggle.checked = true;
+ }, 800);
+}
+
+function _showWingItChoiceDialog(trackCount, source) {
+ return new Promise(resolve => {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+ const close = val => { overlay.remove(); resolve(val); };
+ overlay.onclick = e => { if (e.target === overlay) close(null); };
+
+ overlay.innerHTML = `
+
+
+
+
+
+
+
+ ${escapeHtml(download.name)}
+
+
+ `;
+
+ overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
+ btn.addEventListener('click', () => close(btn.dataset.choice));
+ });
+ overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
+ const escH = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escH); close(null); } };
+ document.addEventListener('keydown', escH);
+ document.body.appendChild(overlay);
+ });
+}
+
+async function _wingItSync(tracks, playlistName, source, cardIdentifier = null) {
+ try {
+ showToast('Syncing playlist to server...', 'info');
+
+ // Format tracks for the sync endpoint
+ const syncTracks = tracks.map((t, i) => {
+ let artists = t.artists || [];
+ if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
+ return {
+ id: t.id || t.source_track_id || `wing_it_${i}`,
+ name: t.name || t.track_name || 'Unknown',
+ artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
+ album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
+ duration_ms: t.duration_ms || 0,
+ artist_name: t.artist_name,
+ };
+ });
+
+ const res = await fetch('/api/wing-it/sync', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ tracks: syncTracks, playlist_name: playlistName })
+ });
+ const data = await res.json();
+
+ if (data.error) {
+ showToast(`Sync failed: ${data.error}`, 'error');
+ return;
+ }
+
+ // Show inline sync status on the card (same display as normal sync)
+ const playlistId = cardIdentifier ? `discover-lb-playlist-${cardIdentifier}` : null;
+ if (playlistId) {
+ const statusDisplay = document.getElementById(`${playlistId}-sync-status`);
+ if (statusDisplay) statusDisplay.style.display = 'block';
+ // Disable sync/wing-it buttons during sync
+ const syncBtn = document.getElementById(`${playlistId}-sync-btn`);
+ if (syncBtn) { syncBtn.disabled = true; syncBtn.style.opacity = '0.5'; }
+ }
+
+ // Poll for sync progress — update inline display
+ if (data.sync_playlist_id) {
+ _pollWingItSyncProgress(data.sync_playlist_id, playlistName, playlistId);
+ }
+
+ } catch (e) {
+ showToast('Sync failed: ' + e.message, 'error');
+ }
+}
+
+function _pollWingItSyncProgress(syncPlaylistId, playlistName, cardPlaylistId) {
+ const poll = setInterval(async () => {
+ try {
+ const res = await fetch(`/api/sync/status/${syncPlaylistId}`);
+ const data = await res.json();
+
+ // Update inline status display if we have a card
+ if (cardPlaylistId && data.progress) {
+ const p = data.progress;
+ const total = p.total_tracks || p.total || 0;
+ const matched = p.matched_tracks || p.matched || 0;
+ const failed = p.failed_tracks || p.failed || 0;
+ const totalEl = document.getElementById(`${cardPlaylistId}-sync-total`);
+ const matchedEl = document.getElementById(`${cardPlaylistId}-sync-matched`);
+ const failedEl = document.getElementById(`${cardPlaylistId}-sync-failed`);
+ const pctEl = document.getElementById(`${cardPlaylistId}-sync-percentage`);
+ if (totalEl) totalEl.textContent = total;
+ if (matchedEl) matchedEl.textContent = matched;
+ if (failedEl) failedEl.textContent = failed;
+ if (pctEl) pctEl.textContent = total > 0 ? Math.round((matched / total) * 100) : 0;
+ }
+
+ if (data.status === 'finished' || data.status === 'complete' || data.status === 'error') {
+ clearInterval(poll);
+ const matched = data.progress?.matched_tracks || data.progress?.matched || 0;
+ const total = data.progress?.total_tracks || data.progress?.total || 0;
+
+ if (data.status === 'error') {
+ showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
+ } else {
+ showToast(`⚡ Wing It sync complete — "${playlistName}" created on server (${matched}/${total} tracks matched)`, 'success');
+ }
+
+ // Update card status display to show completion
+ if (cardPlaylistId) {
+ const statusLabel = document.querySelector(`#${cardPlaylistId}-sync-status .sync-status-label span:last-child`);
+ if (statusLabel) statusLabel.textContent = `Sync complete — ${matched}/${total} matched`;
+ const syncIcon = document.querySelector(`#${cardPlaylistId}-sync-status .sync-icon`);
+ if (syncIcon) syncIcon.textContent = '✓';
+ }
+ }
+ } catch (e) { /* ignore poll errors */ }
+ }, 2000);
+
+ // Safety timeout
+ setTimeout(() => clearInterval(poll), 180000);
+}
+
+async function _wingItFromModal(urlHash) {
+ // Extract tracks from the discovery modal state — tracks can be in various locations
+ const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash] || {};
+ const tracks = state.tracks || state.rawTracks || state.playlist?.tracks || [];
+ const name = state.playlistName || state.name || state.playlist?.name || 'Playlist';
+ const isTidal = state.is_tidal_playlist;
+ const isLB = state.is_listenbrainz_playlist;
+ const isBeatport = state.is_beatport_playlist;
+ const isDeezer = state.is_deezer_playlist;
+ const source = isLB ? 'ListenBrainz' : isTidal ? 'Tidal' : isDeezer ? 'Deezer' : isBeatport ? 'Beatport' : 'YouTube';
+
+ if (!tracks.length) {
+ showToast('No tracks available for Wing It', 'error');
+ return;
+ }
+
+ const choice = await _showWingItChoiceDialog(tracks.length, source);
+ if (!choice) return;
+
+ if (choice === 'sync') {
+ // Sync inline — keep modal open, show progress in modal
+ showToast('Starting Wing It sync...', 'info');
+ updateYouTubeModalButtons(urlHash, 'syncing');
+
+ try {
+ // Format and send sync request
+ const syncTracks = tracks.map((t, i) => {
+ let artists = t.artists || [];
+ if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
+ return {
+ id: t.id || t.source_track_id || `wing_it_${i}`,
+ name: t.name || t.track_name || 'Unknown',
+ artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
+ album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
+ duration_ms: t.duration_ms || 0,
+ };
+ });
+
+ const res = await fetch('/api/wing-it/sync', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ tracks: syncTracks, playlist_name: name })
+ });
+ const data = await res.json();
+
+ if (data.error) {
+ showToast(`Sync failed: ${data.error}`, 'error');
+ updateYouTubeModalButtons(urlHash, 'discovered');
+ return;
+ }
+
+ // Use the same sync polling as normal sync — works for any source
+ if (isLB) {
+ if (state) state.syncPlaylistId = data.sync_playlist_id;
+ startListenBrainzSyncPolling(urlHash, data.sync_playlist_id);
+ } else {
+ startYouTubeSyncPolling(urlHash, data.sync_playlist_id);
+ }
+ } catch (e) {
+ showToast('Sync failed: ' + e.message, 'error');
+ updateYouTubeModalButtons(urlHash, 'discovered');
+ }
+ return;
+ }
+
+ // choice === 'download' — close modal and open download modal
+ const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+ if (modal) modal.remove();
+ const overlay = document.getElementById(`youtube-discovery-overlay-${urlHash}`);
+ if (overlay) overlay.remove();
+
+ wingItDownload(tracks, name, source);
+}
+
+async function openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks, artist = null, album = null) {
+ showLoadingOverlay('Loading YouTube playlist...');
+ // Check if a process is already active for this virtual playlist
+ if (activeDownloadProcesses[virtualPlaylistId]) {
+ console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
+ const process = activeDownloadProcesses[virtualPlaylistId];
+ if (process.modalElement) {
+ if (process.status === 'complete') {
+ showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+ }
+ process.modalElement.style.display = 'flex';
+ }
+ hideLoadingOverlay(); // Hide overlay when reopening existing modal
+ return;
+ }
+
+ console.log(`📥 Opening Download Missing Tracks modal for YouTube playlist: ${virtualPlaylistId}`);
+
+ // Create virtual playlist object for compatibility with existing modal logic
+ const virtualPlaylist = {
+ id: virtualPlaylistId,
+ name: playlistName,
+ track_count: spotifyTracks.length
+ };
+
+ // Store the tracks in the cache for the modal to use
+ playlistTrackCache[virtualPlaylistId] = spotifyTracks;
+ currentPlaylistTracks = spotifyTracks;
+ currentModalPlaylistId = virtualPlaylistId;
+
+ let modal = document.createElement('div');
+ modal.id = `download-missing-modal-${virtualPlaylistId}`;
+ modal.className = 'download-missing-modal';
+ modal.style.display = 'none';
+ document.body.appendChild(modal);
+
+ // Register the new process in our global state tracker using the same structure as Spotify
+ activeDownloadProcesses[virtualPlaylistId] = {
+ status: 'idle',
+ modalElement: modal,
+ poller: null,
+ batchId: null,
+ playlist: virtualPlaylist,
+ tracks: spotifyTracks,
+ artist: artist, // ✅ Store artist context
+ album: album // ✅ Store album context
+ };
+
+ // Generate hero section with dynamic source detection
+ const source = virtualPlaylistId.startsWith('beatport_') ? 'Beatport' :
+ virtualPlaylistId.startsWith('tidal_') ? 'Tidal' :
+ virtualPlaylistId.startsWith('listenbrainz_') ? 'ListenBrainz' :
+ virtualPlaylistId.startsWith('spotify_public_') ? 'Spotify' :
+ virtualPlaylistId.startsWith('spotify:') ? 'Spotify' :
+ virtualPlaylistId.startsWith('discover_') ? 'SoulSync' :
+ virtualPlaylistId.startsWith('seasonal_') ? 'SoulSync' :
+ virtualPlaylistId.startsWith('spotify_library_') ? 'SoulSync' :
+ virtualPlaylistId.startsWith('build_playlist_') ? 'SoulSync' :
+ virtualPlaylistId.startsWith('decade_') ? 'SoulSync' :
+ virtualPlaylistId === 'build_playlist_custom' ? 'SoulSync' :
+ 'YouTube';
+
+ // Store metadata for discover download sidebar (will be added when Begin Analysis is clicked)
+ if (source === 'SoulSync' || virtualPlaylistId.startsWith('discover_lb_') || virtualPlaylistId.startsWith('listenbrainz_') || virtualPlaylistId.startsWith('wing_it_')) {
+ // Extract image URL from album context or first track's album cover
+ let imageUrl = null;
+ if (album && album.images && album.images.length > 0) {
+ imageUrl = album.images[0].url;
+ } else if (spotifyTracks && spotifyTracks.length > 0) {
+ const firstTrack = spotifyTracks[0];
+ if (firstTrack.album && firstTrack.album.images && firstTrack.album.images.length > 0) {
+ imageUrl = firstTrack.album.images[0].url;
+ }
+ }
+ // Store in process for later use when Begin Analysis is clicked
+ activeDownloadProcesses[virtualPlaylistId].discoverMetadata = {
+ imageUrl: imageUrl,
+ type: album ? 'album' : 'playlist' // ✅ Use 'album' if album context provided
+ };
+ }
+
+ // CRITICAL FIX: Use album context for discover_album playlists
+ const isDiscoverAlbum = virtualPlaylistId.startsWith('discover_album_') || virtualPlaylistId.startsWith('discover_cache_') || virtualPlaylistId.startsWith('seasonal_album_') || virtualPlaylistId.startsWith('spotify_library_');
+ const heroContext = isDiscoverAlbum && album && artist ? {
+ type: 'album',
+ artist: {
+ name: artist.name,
+ image_url: artist.image_url || null
+ },
+ album: {
+ name: album.name,
+ album_type: album.album_type || 'album',
+ images: album.images || []
+ },
+ trackCount: spotifyTracks.length,
+ playlistId: virtualPlaylistId
+ } : {
+ type: 'playlist',
+ playlist: { name: playlistName, owner: source },
+ trackCount: spotifyTracks.length,
+ playlistId: virtualPlaylistId
+ };
+
+ // Use the exact same modal HTML structure as the existing Spotify modal
+ modal.innerHTML = `
+
+ `;
+
+ applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
+ modal.style.display = 'flex';
+ hideLoadingOverlay();
+}
+
+function _navigateToArtistFromModal(artistId, artistName, imageUrl, source, playlistId) {
+ if (!artistName) return;
+ // Close the download modal
+ if (playlistId) closeDownloadMissingModal(playlistId);
+ // Navigate to Artists page and load discography
+ navigateToPage('artists');
+ setTimeout(() => {
+ // If we have an artist ID, use it directly
+ // If not, search by name — selectArtistForDetail handles both
+ selectArtistForDetail(
+ { id: artistId || artistName, name: artistName, image_url: imageUrl || '' },
+ source ? { source: source } : undefined
+ );
+ }, 200);
+}
+
+async function closeDownloadMissingModal(playlistId) {
+ const process = activeDownloadProcesses[playlistId];
+ if (!process) {
+ // If somehow called without a process, try to find and remove the element
+ const modal = document.getElementById(`download-missing-modal-${playlistId}`);
+ if (modal && modal.parentElement) {
+ modal.parentElement.removeChild(modal);
+ }
+ return;
+ }
+
+ // If the process is running, just hide the modal.
+ // If it's idle, complete, or cancelled, perform a full cleanup.
+ if (process.status === 'running') {
+ console.log(`Hiding active download modal for playlist ${playlistId}.`);
+ process.modalElement.style.display = 'none';
+
+ // Track wishlist modal state changes
+ if (playlistId === 'wishlist') {
+ WishlistModalState.setUserClosed(); // User manually closed during processing
+ console.log('📱 [Modal State] User manually closed wishlist modal during processing');
+ }
+ } else {
+ console.log(`Closing and cleaning up download modal for playlist ${playlistId}.`);
+
+ // Reset YouTube playlist phase to 'discovered' when modal is closed after completion
+ if (playlistId.startsWith('youtube_')) {
+ const urlHash = playlistId.replace('youtube_', '');
+ updateYouTubeCardPhase(urlHash, 'discovered');
+ // Also update mirrored playlist card if applicable
+ if (urlHash.startsWith('mirrored_')) {
+ updateMirroredCardPhase(urlHash, 'discovered');
+ }
+
+ // Update backend state to prevent rehydration issues on page refresh (similar to Tidal fix)
+ try {
+ const response = await fetch(`/api/youtube/update_phase/${urlHash}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ phase: 'discovered'
+ })
+ });
+
+ if (response.ok) {
+ console.log(`✅ [Modal Close] Updated backend phase for YouTube playlist ${urlHash} to 'discovered'`);
+ } else {
+ console.warn(`⚠️ [Modal Close] Failed to update backend phase for YouTube playlist ${urlHash}`);
+ }
+ } catch (error) {
+ console.error(`❌ [Modal Close] Error updating backend phase for YouTube playlist ${urlHash}:`, error);
+ }
+ }
+
+ // Reset Beatport chart phase to 'discovered' when modal is closed
+ if (playlistId.startsWith('beatport_')) {
+ const urlHash = playlistId.replace('beatport_', '');
+ const state = youtubePlaylistStates[urlHash];
+
+ if (state && state.is_beatport_playlist) {
+ console.log(`🧹 [Modal Close] Processing Beatport chart close: playlistId="${playlistId}", urlHash="${urlHash}"`);
+
+ const chartHash = state.beatport_chart_hash || urlHash;
+
+ // Reset to discovered phase (unless download actually started and completed)
+ if (state.phase !== 'download_complete') {
+ updateBeatportCardPhase(chartHash, 'discovered');
+ state.phase = 'discovered';
+
+ // Update Beatport chart state
+ if (beatportChartStates[chartHash]) {
+ beatportChartStates[chartHash].phase = 'discovered';
+ }
+
+ // Update backend state
+ try {
+ await fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ phase: 'discovered' })
+ });
+ console.log(`✅ [Modal Close] Updated backend phase for Beatport chart ${chartHash} to 'discovered'`);
+ } catch (error) {
+ console.error(`❌ [Modal Close] Error updating backend phase for Beatport chart ${chartHash}:`, error);
+ }
+ }
+ }
+ }
+
+ // Enhanced Tidal playlist state management (based on GUI sync.py patterns)
+ if (playlistId.startsWith('tidal_')) {
+ const tidalPlaylistId = playlistId.replace('tidal_', '');
+
+ console.log(`🧹 [Modal Close] Processing Tidal playlist close: playlistId="${playlistId}", tidalPlaylistId="${tidalPlaylistId}"`);
+ console.log(`🧹 [Modal Close] Current Tidal state:`, tidalPlaylistStates[tidalPlaylistId]);
+
+ // Clear download-specific state but preserve discovery results (like GUI closeEvent)
+ if (tidalPlaylistStates[tidalPlaylistId]) {
+ const currentPhase = tidalPlaylistStates[tidalPlaylistId].phase;
+ console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
+
+ // Preserve discovery data for future use (like GUI modal behavior)
+ const preservedData = {
+ playlist: tidalPlaylistStates[tidalPlaylistId].playlist,
+ discovery_results: tidalPlaylistStates[tidalPlaylistId].discovery_results,
+ spotify_matches: tidalPlaylistStates[tidalPlaylistId].spotify_matches,
+ discovery_progress: tidalPlaylistStates[tidalPlaylistId].discovery_progress,
+ convertedSpotifyPlaylistId: tidalPlaylistStates[tidalPlaylistId].convertedSpotifyPlaylistId
+ };
+
+ // Clear download-specific state
+ delete tidalPlaylistStates[tidalPlaylistId].download_process_id;
+ delete tidalPlaylistStates[tidalPlaylistId].phase;
+
+ // Restore preserved data and set to discovered phase
+ Object.assign(tidalPlaylistStates[tidalPlaylistId], preservedData);
+ tidalPlaylistStates[tidalPlaylistId].phase = 'discovered';
+
+ console.log(`🧹 [Modal Close] Reset Tidal playlist ${tidalPlaylistId} - cleared download state, preserved discovery data`);
+ console.log(`🧹 [Modal Close] New phase after reset: ${tidalPlaylistStates[tidalPlaylistId].phase}`);
+ } else {
+ console.error(`❌ [Modal Close] No Tidal state found for playlistId: ${tidalPlaylistId}`);
+ }
+
+ updateTidalCardPhase(tidalPlaylistId, 'discovered');
+ console.log(`🔄 [Modal Close] Reset Tidal playlist ${tidalPlaylistId} to discovered phase`);
+ console.log(`📝 [Modal Close] Expected button text for discovered phase: "${getActionButtonText('discovered')}"`);
+
+ // Update backend state to prevent rehydration issues on page refresh
+ try {
+ const response = await fetch(`/api/tidal/update_phase/${tidalPlaylistId}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ phase: 'discovered'
+ })
+ });
+
+ if (response.ok) {
+ console.log(`✅ [Modal Close] Updated backend phase for Tidal playlist ${tidalPlaylistId} to 'discovered'`);
+ } else {
+ console.warn(`⚠️ [Modal Close] Failed to update backend phase for Tidal playlist ${tidalPlaylistId}`);
+ }
+ } catch (error) {
+ console.error(`❌ [Modal Close] Error updating backend phase for Tidal playlist ${tidalPlaylistId}:`, error);
+ }
+ }
+
+ // Reset ListenBrainz playlist phase to 'discovered' when modal is closed
+ if (playlistId.startsWith('listenbrainz_')) {
+ const playlistMbid = playlistId.replace('listenbrainz_', '');
+
+ console.log(`🧹 [Modal Close] Processing ListenBrainz playlist close: playlistId="${playlistId}", mbid="${playlistMbid}"`);
+
+ // Clear download-specific state but preserve discovery results
+ if (listenbrainzPlaylistStates[playlistMbid]) {
+ const currentPhase = listenbrainzPlaylistStates[playlistMbid].phase;
+ console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
+
+ // Reset to discovered phase (unless download actually completed successfully)
+ if (currentPhase !== 'download_complete') {
+ // Clear download-specific fields
+ delete listenbrainzPlaylistStates[playlistMbid].download_process_id;
+ delete listenbrainzPlaylistStates[playlistMbid].convertedSpotifyPlaylistId;
+
+ // Set back to discovered
+ listenbrainzPlaylistStates[playlistMbid].phase = 'discovered';
+
+ // Update backend state
+ try {
+ await fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ phase: 'discovered' })
+ });
+ console.log(`✅ [Modal Close] Updated backend phase for ListenBrainz playlist ${playlistMbid} to 'discovered'`);
+ } catch (error) {
+ console.error(`❌ [Modal Close] Error updating backend phase for ListenBrainz playlist ${playlistMbid}:`, error);
+ }
+
+ console.log(`🔄 [Modal Close] Reset ListenBrainz playlist ${playlistMbid} to discovered phase`);
+ }
+ } else {
+ console.error(`❌ [Modal Close] No ListenBrainz state found for mbid: ${playlistMbid}`);
+ }
+ }
+
+ // Reset Spotify Public playlist phase to 'discovered' when modal is closed
+ if (playlistId.startsWith('spotify_public_')) {
+ const spUrlHash = playlistId.replace('spotify_public_', '');
+
+ console.log(`🧹 [Modal Close] Processing Spotify Public playlist close: playlistId="${playlistId}", urlHash="${spUrlHash}"`);
+
+ if (spotifyPublicPlaylistStates[spUrlHash]) {
+ const currentPhase = spotifyPublicPlaylistStates[spUrlHash].phase;
+ console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
+
+ const preservedData = {
+ playlist: spotifyPublicPlaylistStates[spUrlHash].playlist,
+ discovery_results: spotifyPublicPlaylistStates[spUrlHash].discovery_results,
+ spotify_matches: spotifyPublicPlaylistStates[spUrlHash].spotify_matches,
+ discovery_progress: spotifyPublicPlaylistStates[spUrlHash].discovery_progress,
+ convertedSpotifyPlaylistId: spotifyPublicPlaylistStates[spUrlHash].convertedSpotifyPlaylistId
+ };
+
+ delete spotifyPublicPlaylistStates[spUrlHash].download_process_id;
+ delete spotifyPublicPlaylistStates[spUrlHash].phase;
+
+ Object.assign(spotifyPublicPlaylistStates[spUrlHash], preservedData);
+ spotifyPublicPlaylistStates[spUrlHash].phase = 'discovered';
+
+ console.log(`🧹 [Modal Close] Reset Spotify Public playlist ${spUrlHash} - cleared download state, preserved discovery data`);
+ }
+
+ updateSpotifyPublicCardPhase(spUrlHash, 'discovered');
+
+ try {
+ await fetch(`/api/spotify-public/update_phase/${spUrlHash}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ phase: 'discovered' })
+ });
+ console.log(`✅ [Modal Close] Updated backend phase for Spotify Public playlist ${spUrlHash} to 'discovered'`);
+ } catch (error) {
+ console.error(`❌ [Modal Close] Error updating backend phase for Spotify Public playlist ${spUrlHash}:`, error);
+ }
+ }
+
+ // Reset Deezer playlist phase to 'discovered' when modal is closed
+ if (playlistId.startsWith('deezer_')) {
+ const deezerPlaylistId = playlistId.replace('deezer_', '');
+
+ console.log(`🧹 [Modal Close] Processing Deezer playlist close: playlistId="${playlistId}", deezerPlaylistId="${deezerPlaylistId}"`);
+
+ if (deezerPlaylistStates[deezerPlaylistId]) {
+ const currentPhase = deezerPlaylistStates[deezerPlaylistId].phase;
+ console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
+
+ const preservedData = {
+ playlist: deezerPlaylistStates[deezerPlaylistId].playlist,
+ discovery_results: deezerPlaylistStates[deezerPlaylistId].discovery_results,
+ spotify_matches: deezerPlaylistStates[deezerPlaylistId].spotify_matches,
+ discovery_progress: deezerPlaylistStates[deezerPlaylistId].discovery_progress,
+ convertedSpotifyPlaylistId: deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId
+ };
+
+ delete deezerPlaylistStates[deezerPlaylistId].download_process_id;
+ delete deezerPlaylistStates[deezerPlaylistId].phase;
+
+ Object.assign(deezerPlaylistStates[deezerPlaylistId], preservedData);
+ deezerPlaylistStates[deezerPlaylistId].phase = 'discovered';
+
+ console.log(`🧹 [Modal Close] Reset Deezer playlist ${deezerPlaylistId} - cleared download state, preserved discovery data`);
+ }
+
+ updateDeezerCardPhase(deezerPlaylistId, 'discovered');
+
+ try {
+ await fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ phase: 'discovered' })
+ });
+ console.log(`✅ [Modal Close] Updated backend phase for Deezer playlist ${deezerPlaylistId} to 'discovered'`);
+ } catch (error) {
+ console.error(`❌ [Modal Close] Error updating backend phase for Deezer playlist ${deezerPlaylistId}:`, error);
+ }
+ }
+
+ // Clear wishlist modal state when modal is fully closed
+ if (playlistId === 'wishlist') {
+ WishlistModalState.clear(); // Clear all tracking since modal is fully closed
+ console.log('📱 [Modal State] Cleared wishlist modal state on full close');
+ }
+
+ // Clean up artist download if this is an artist album playlist
+ if (playlistId.startsWith('artist_album_')) {
+ console.log(`🧹 [MODAL CLOSE] Cleaning up artist download for completed modal: ${playlistId}`);
+ cleanupArtistDownload(playlistId);
+ console.log(`✅ [MODAL CLOSE] Artist download cleanup completed for: ${playlistId}`);
+ }
+
+ // Clean up search download if this is an enhanced search playlist
+ if (playlistId.startsWith('enhanced_search_')) {
+ console.log(`🧹 [MODAL CLOSE] Cleaning up search download for completed modal: ${playlistId}`);
+ cleanupSearchDownload(playlistId);
+ console.log(`✅ [MODAL CLOSE] Search download cleanup completed for: ${playlistId}`);
+ }
+
+ // Clean up Beatport download if this is a beatport chart or release playlist
+ if (playlistId.startsWith('beatport_chart_') || playlistId.startsWith('beatport_release_')) {
+ console.log(`🧹 [MODAL CLOSE] Cleaning up Beatport download for completed modal: ${playlistId}`);
+ cleanupBeatportDownload(playlistId);
+ console.log(`✅ [MODAL CLOSE] Beatport download cleanup completed for: ${playlistId}`);
+ }
+
+ // Remove from discover download sidebar if this is a discover page download
+ if (discoverDownloads && discoverDownloads[playlistId]) {
+ console.log(`🧹 [MODAL CLOSE] Removing discover download bubble: ${playlistId}`);
+ removeDiscoverDownload(playlistId);
+ console.log(`✅ [MODAL CLOSE] Discover download bubble removed for: ${playlistId}`);
+ }
+
+ // Automatic cleanup and server operations after successful downloads
+ await handlePostDownloadAutomation(playlistId, process);
+
+ cleanupDownloadProcess(playlistId);
+ }
+}
+
+/**
+ * Extract unique album cover images from tracks
+ */
+function extractUniqueCoverImages(tracks, maxCovers = 20) {
+ const uniqueCovers = new Set();
+ const covers = [];
+
+ for (const track of tracks) {
+ if (covers.length >= maxCovers) break;
+
+ let coverUrl = null;
+ let spotifyData = track.spotify_data;
+
+ // Parse spotify_data if it's a string
+ if (typeof spotifyData === 'string') {
+ try {
+ spotifyData = JSON.parse(spotifyData);
+ } catch (e) {
+ continue;
+ }
+ }
+
+ // Extract cover URL
+ coverUrl = spotifyData?.album?.images?.[0]?.url;
+
+ // Add to list if unique and valid
+ if (coverUrl && !uniqueCovers.has(coverUrl)) {
+ uniqueCovers.add(coverUrl);
+ covers.push(coverUrl);
+ }
+ }
+
+ return covers;
+}
+
+/**
+ * Shuffle array using Fisher-Yates algorithm
+ */
+function shuffleArray(array) {
+ const shuffled = [...array];
+ for (let i = shuffled.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+ }
+ return shuffled;
+}
+
+/**
+ * Generate mosaic grid background HTML with continuous scrolling rows
+ */
+function generateMosaicBackground(coverUrls) {
+ // If less than 3 covers, use gradient fallback
+ if (!coverUrls || coverUrls.length < 3) {
+ return `
+
+
+ `;
+ }
+
+ // Cap covers per row to 15 for GPU performance (avoids hundreds of tiles)
+ if (coverUrls.length > 15) {
+ coverUrls = coverUrls.slice(0, 15);
+ }
+
+ const rows = 4;
+ let mosaicHTML = '
+
+ ⚡ Wing It
+ +${trackCount} track${trackCount !== 1 ? 's' : ''} from ${source}. No metadata discovery — uses raw names. Failed tracks won't be added to wishlist.
+ +';
+
+ // Calculate scroll speed based on number of images
+ // More images = longer duration to maintain consistent visual speed
+ // Minimum 40s to prevent scrolling too fast
+ const scrollSpeed = Math.max(40, coverUrls.length * 2);
+
+ for (let row = 0; row < rows; row++) {
+ const isEvenRow = row % 2 === 0;
+ const direction = isEvenRow ? 'left' : 'right';
+
+ // Randomize order for each row
+ const shuffledCovers = shuffleArray(coverUrls);
+
+ // Create row wrapper
+ mosaicHTML += `
';
+ mosaicHTML += ''; // Dark overlay for readability
+
+ return mosaicHTML;
+}
+
+/**
+ * Open wishlist overview modal showing category breakdown
+ * This is the NEW entry point for wishlist from dashboard
+ */
+async function openWishlistOverviewModal() {
+ try {
+ showLoadingOverlay('Loading wishlist...');
+
+ // Fetch wishlist stats
+ const statsResponse = await fetch('/api/wishlist/stats');
+ const statsData = await statsResponse.json();
+
+ if (!statsResponse.ok) {
+ throw new Error(statsData.error || 'Failed to fetch wishlist stats');
+ }
+
+ const { singles, albums, total } = statsData;
+
+ if (total === 0) {
+ hideLoadingOverlay();
+ showToast('Wishlist is empty. No tracks to process.', 'info');
+ return;
+ }
+
+ // Fetch album covers for mosaic backgrounds
+ // Limit to 50 tracks per category (enough to get 20 unique covers while being efficient)
+ const albumCoversPromise = fetch('/api/wishlist/tracks?category=albums&limit=50').then(r => r.json());
+ const singleCoversPromise = fetch('/api/wishlist/tracks?category=singles&limit=50').then(r => r.json());
+
+ const [albumTracksData, singleTracksData] = await Promise.all([albumCoversPromise, singleCoversPromise]);
+
+ // Extract unique album covers (max 20 per category)
+ const albumCovers = extractUniqueCoverImages(albumTracksData.tracks || [], 20);
+ const singleCovers = extractUniqueCoverImages(singleTracksData.tracks || [], 20);
+
+ // Create modal if it doesn't exist
+ let modal = document.getElementById('wishlist-overview-modal');
+ if (!modal) {
+ modal = document.createElement('div');
+ modal.id = 'wishlist-overview-modal';
+ modal.className = 'modal-overlay';
+ document.body.appendChild(modal);
+ }
+
+ // Fetch current cycle
+ const cycleResponse = await fetch('/api/wishlist/cycle');
+ const cycleData = await cycleResponse.json();
+ const currentCycle = cycleData.cycle || 'albums';
+
+ // Format countdown timer
+ const nextRunSeconds = statsData.next_run_in_seconds || 0;
+ const countdownText = formatCountdownTime(nextRunSeconds);
+ const nextCycleText = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
+
+ modal.innerHTML = `
+ `;
+ mosaicHTML += `
'; // Close wrapper
+ }
+
+ mosaicHTML += '`;
+
+ // Generate tiles - duplicate 2 times for smooth infinite scroll
+ for (let duplicate = 0; duplicate < 2; duplicate++) {
+ for (let i = 0; i < shuffledCovers.length; i++) {
+ const coverUrl = shuffledCovers[i];
+ mosaicHTML += `
+
'; // Close row
+ mosaicHTML += '
+
+
+ `;
+ }
+ }
+
+ mosaicHTML += '
+
+ `;
+
+ modal.style.display = 'flex';
+ hideLoadingOverlay();
+
+ // Start countdown timer update interval
+ startWishlistCountdownTimer(currentCycle, nextRunSeconds);
+
+ } catch (error) {
+ console.error('Error opening wishlist overview:', error);
+ showToast(`Failed to load wishlist: ${error.message}`, 'error');
+ hideLoadingOverlay();
+ }
+}
+
+function startWishlistCountdownTimer(currentCycle, initialSeconds) {
+ // Clear any existing interval
+ if (wishlistCountdownInterval) {
+ clearInterval(wishlistCountdownInterval);
+ }
+
+ let remainingSeconds = initialSeconds;
+ const nextCycleText = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
+
+ wishlistCountdownInterval = setInterval(async () => {
+ remainingSeconds--;
+
+ // Check if auto-processing has started (every 2 seconds to avoid overwhelming backend)
+ if (remainingSeconds % 2 === 0 || remainingSeconds <= 0) {
+ // Use WebSocket data if available, otherwise fall back to HTTP
+ if (socketConnected && _lastWishlistStats) {
+ const data = _lastWishlistStats;
+ if (data.is_auto_processing) {
+ if (!_wishlistAutoProcessingNotified) {
+ navigateToPage('active-downloads');
+ showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
+ _wishlistAutoProcessingNotified = true;
+ }
+ return;
+ }
+ if (remainingSeconds <= 0) {
+ remainingSeconds = data.next_run_in_seconds || 0;
+ const timerElement = document.getElementById('wishlist-next-auto-timer');
+ if (timerElement) {
+ const countdownText = formatCountdownTime(remainingSeconds);
+ timerElement.textContent = `Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}`;
+ }
+ }
+ } else {
+ try {
+ const response = await fetch('/api/wishlist/stats');
+ const data = await response.json();
+
+ // AUTO-CLOSE DETECTION: If auto-processing started, close modal and notify user (once)
+ if (data.is_auto_processing) {
+ if (!_wishlistAutoProcessingNotified) {
+ console.log('🤖 [Wishlist] Auto-processing detected, closing overview modal');
+ closeWishlistOverviewModal();
+ showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
+ _wishlistAutoProcessingNotified = true;
+ }
+ return; // Exit interval
+ }
+
+ // Update remaining seconds if timer expired
+ if (remainingSeconds <= 0) {
+ remainingSeconds = data.next_run_in_seconds || 0;
+
+ // Also update cycle in case it changed
+ const newCycle = data.current_cycle || 'albums';
+ const newCycleText = newCycle === 'albums' ? 'Albums/EPs' : 'Singles';
+
+ const timerElement = document.getElementById('wishlist-next-auto-timer');
+ if (timerElement) {
+ const countdownText = formatCountdownTime(remainingSeconds);
+ timerElement.textContent = `Next Auto: ${newCycleText}${countdownText ? ' in ' + countdownText : ''}`;
+ }
+ }
+ } catch (error) {
+ console.debug('Error updating wishlist countdown:', error);
+ }
+ } // end else (HTTP fallback)
+ }
+
+ // Always update the display countdown
+ const timerElement = document.getElementById('wishlist-next-auto-timer');
+ if (timerElement) {
+ const countdownText = formatCountdownTime(remainingSeconds);
+ timerElement.textContent = `Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}`;
+ }
+ }, 1000); // Update every second
+}
+
+function closeWishlistOverviewModal() {
+ console.log('🚪 closeWishlistOverviewModal() called');
+
+ // Stop countdown timer
+ if (wishlistCountdownInterval) {
+ clearInterval(wishlistCountdownInterval);
+ wishlistCountdownInterval = null;
+ }
+
+ const modal = document.getElementById('wishlist-overview-modal');
+ console.log('Modal element:', modal);
+ if (modal) {
+ modal.style.display = 'none';
+ console.log('Modal display set to none');
+ // Also remove from DOM to ensure clean state
+ modal.remove();
+ console.log('Modal removed from DOM');
+ } else {
+ console.warn('Modal element not found');
+ }
+ window.selectedWishlistCategory = null;
+ console.log('✅ Modal closed');
+}
+
+async function cleanupWishlistOverview() {
+ console.log('🧹 cleanupWishlistOverview() called');
+
+ if (!await showConfirmDialog({ title: 'Cleanup Wishlist', message: 'This will remove all tracks from the wishlist that already exist in your library. Continue?' })) {
+ return;
+ }
+
+ try {
+ showLoadingOverlay('Cleaning up wishlist...');
+
+ const response = await fetch('/api/wishlist/cleanup', {
+ method: 'POST'
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ const removedCount = result.removed_count || 0;
+
+ if (removedCount > 0) {
+ showToast(`Cleanup complete! Removed ${removedCount} tracks that already exist in your library`, 'success');
+ } else {
+ showToast('No tracks needed to be removed', 'info');
+ }
+
+ // Check if wishlist is now empty
+ const statsResponse = await fetch('/api/wishlist/stats');
+ const statsData = await statsResponse.json();
+
+ if (statsData.total === 0) {
+ // Wishlist is empty, refresh the page to show empty state
+ wishlistPageState.isInitialized = false;
+ await initializeWishlistPage();
+ await updateWishlistCount();
+ } else {
+ // Wishlist still has items, refresh the page to show updated counts
+ wishlistPageState.isInitialized = false;
+ await initializeWishlistPage();
+ }
+ } else {
+ showToast(`Failed to cleanup wishlist: ${result.error || 'Unknown error'}`, 'error');
+ }
+
+ hideLoadingOverlay();
+
+ } catch (error) {
+ console.error('Error cleaning up wishlist:', error);
+ showToast(`Failed to cleanup wishlist: ${error.message}`, 'error');
+ hideLoadingOverlay();
+ }
+}
+
+async function clearEntireWishlist() {
+ console.log('🗑️ clearEntireWishlist() called');
+
+ if (!await showConfirmDialog({ title: 'Clear Wishlist', message: 'WARNING: This will permanently delete ALL tracks from your wishlist.\n\nThis action cannot be undone.\n\nAre you sure you want to continue?', confirmText: 'Clear All', destructive: true })) {
+ console.log('User cancelled confirmation');
+ return;
+ }
+
+ console.log('User confirmed, proceeding with clear...');
+
+ try {
+ showLoadingOverlay('Clearing wishlist...');
+ console.log('Loading overlay shown');
+
+ const response = await fetch('/api/wishlist/clear', {
+ method: 'POST'
+ });
+ console.log('API response received:', response.status);
+
+ const result = await response.json();
+ console.log('Clear wishlist response:', result);
+
+ hideLoadingOverlay();
+ console.log('Loading overlay hidden');
+
+ if (result.success) {
+ console.log('Clear was successful, showing toast...');
+ showToast('Wishlist cleared successfully', 'success');
+
+ console.log('Updating wishlist button count...');
+ await updateWishlistCount();
+
+ console.log('Refreshing wishlist page...');
+ wishlistPageState.isInitialized = false;
+ await initializeWishlistPage();
+ } else {
+ console.error('Clear failed:', result.error);
+ showToast(`Failed to clear wishlist: ${result.error || 'Unknown error'}`, 'error');
+ }
+
+ } catch (error) {
+ console.error('Error clearing wishlist:', error);
+ hideLoadingOverlay();
+ showToast(`Failed to clear wishlist: ${error.message}`, 'error');
+ }
+}
+
+async function selectWishlistCategory(category) {
+ try {
+ window.selectedWishlistCategory = category;
+
+ const tracksList = document.getElementById('wishlist-tracks-list');
+ const categoryTracksSection = document.getElementById('wishlist-category-tracks');
+ const nebulaEl = document.getElementById('wishlist-nebula');
+ const downloadBtn = document.getElementById('wishlist-download-btn');
+ const categoryName = document.getElementById('wishlist-category-name');
+
+ if (nebulaEl) nebulaEl.style.display = 'none';
+ categoryTracksSection.style.display = 'block';
+ downloadBtn.style.display = 'inline-block';
+ categoryName.textContent = category === 'albums' ? 'Albums / EPs' : 'Singles';
+
+ tracksList.innerHTML = '
+
+
+
+
+ ×
+ 🎵 Wishlist Overview
+
+ ${total} Total Tracks
+ Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading tracks...
';
+
+ const _wlPageSize = window._wlNextLimit || 200;
+ window._wlNextLimit = null;
+ const response = await fetch(`/api/wishlist/tracks?category=${category}&limit=${_wlPageSize}`);
+ const data = await response.json();
+
+ if (!response.ok) throw new Error(data.error || 'Failed to fetch tracks');
+
+ const tracks = data.tracks || [];
+ const totalAvailable = data.total || tracks.length;
+ window._wlCategory = category;
+ window._wlOffset = tracks.length;
+ window._wlTotal = totalAvailable;
+
+ if (tracks.length === 0) {
+ tracksList.innerHTML = 'No tracks in this category
';
+ return;
+ }
+
+ // For Albums/EPs, group by album
+ if (category === 'albums') {
+ const albumGroups = {};
+
+ tracks.forEach(track => {
+ let spotifyData = track.spotify_data;
+ if (typeof spotifyData === 'string') {
+ try {
+ spotifyData = JSON.parse(spotifyData);
+ } catch (e) {
+ spotifyData = null;
+ }
+ }
+
+ const rawAlbum = spotifyData?.album;
+ const albumName = (typeof rawAlbum === 'string' ? rawAlbum : rawAlbum?.name) || 'Unknown Album';
+
+ // Handle both object format {name: '...'} and sanitized string format
+ let artistName = 'Unknown Artist';
+ let artistId = null;
+ if (spotifyData?.artists?.[0]?.name) {
+ // Object format from Spotify API
+ artistName = spotifyData.artists[0].name;
+ artistId = spotifyData.artists[0].id;
+ } else if (spotifyData?.artists?.[0] && typeof spotifyData.artists[0] === 'string') {
+ // Sanitized string format
+ artistName = spotifyData.artists[0];
+ } else if (Array.isArray(track.artists) && track.artists.length > 0) {
+ // Fallback to track.artists
+ if (typeof track.artists[0] === 'string') {
+ artistName = track.artists[0];
+ } else if (track.artists[0]?.name) {
+ artistName = track.artists[0].name;
+ artistId = track.artists[0].id;
+ }
+ }
+
+ const albumImage = spotifyData?.album?.images?.[0]?.url || '';
+
+ // Use album ID if available, otherwise create unique key from album + artist
+ // Sanitize the ID to remove all special characters that could break DOM IDs or CSS selectors
+ const albumId = spotifyData?.album?.id || `${albumName}_${artistName}`
+ .replace(/[^a-zA-Z0-9\s_-]/g, '') // Remove all special chars except spaces, underscores, hyphens
+ .replace(/\s+/g, '_') // Replace spaces with underscores
+ .toLowerCase();
+
+ if (!albumGroups[albumId]) {
+ albumGroups[albumId] = {
+ albumName,
+ artistName,
+ artistId,
+ albumImage,
+ tracks: []
+ };
+ }
+
+ const spotifyTrackId = track.spotify_track_id || track.id || '';
+
+ albumGroups[albumId].tracks.push({
+ name: track.name || 'Unknown Track',
+ artistName,
+ trackNumber: spotifyData?.track_number || 0,
+ spotifyTrackId
+ });
+ });
+
+ // Render album cards
+ let albumsHTML = '';
+ Object.entries(albumGroups).forEach(([albumId, albumData]) => {
+ // Sort tracks by track number
+ albumData.tracks.sort((a, b) => a.trackNumber - b.trackNumber);
+
+ const tracksListHTML = albumData.tracks.map(track => `
+
';
+
+ tracksList.innerHTML = albumsHTML;
+ if (totalAvailable > tracks.length) {
+ tracksList.insertAdjacentHTML('beforeend',
+ ``);
+ }
+ _attachWishlistDelegation(tracksList);
+
+ } else {
+ // For Singles, show list with album images
+ let tracksHTML = '';
+ tracks.forEach((track, index) => {
+ const trackName = track.name || 'Unknown Track';
+
+ let spotifyData = track.spotify_data;
+ if (typeof spotifyData === 'string') {
+ try {
+ spotifyData = JSON.parse(spotifyData);
+ } catch (e) {
+ spotifyData = null;
+ }
+ }
+
+ let artistName = 'Unknown Artist';
+ if (spotifyData?.artists?.[0]?.name) {
+ artistName = spotifyData.artists[0].name;
+ } else if (Array.isArray(track.artists) && track.artists.length > 0) {
+ if (typeof track.artists[0] === 'string') {
+ artistName = track.artists[0];
+ } else if (track.artists[0]?.name) {
+ artistName = track.artists[0].name;
+ }
+ }
+
+ let albumName = 'Unknown Album';
+ if (spotifyData?.album?.name) {
+ albumName = spotifyData.album.name;
+ } else if (typeof track.album === 'string') {
+ albumName = track.album;
+ } else if (track.album?.name) {
+ albumName = track.album.name;
+ }
+
+ const albumImage = spotifyData?.album?.images?.[0]?.url || '';
+ const spotifyTrackId = track.spotify_track_id || track.id || '';
+
+ tracksHTML += `
+
+
+ ${track.name}
+
+
+ `).join('');
+
+ // Handle missing album images with a placeholder
+ const albumImageStyle = albumData.albumImage
+ ? `background-image: url('${albumData.albumImage}')`
+ : `background: linear-gradient(135deg, rgba(30, 30, 30, 0.9) 0%, rgba(50, 50, 50, 0.9) 100%); display: flex; align-items: center; justify-content: center; font-size: 40px;`;
+ const albumImageContent = albumData.albumImage ? '' : '💿';
+
+ albumsHTML += `
+
+
+ `;
+ });
+ albumsHTML += '
+
+
+
+ ${albumImageContent}
+
+
+
+
+ ${albumData.albumName}
+ ${albumData.artistName}
+ ${albumData.tracks.length} track${albumData.tracks.length !== 1 ? 's' : ''}
+
+
+
+
+ `;
+ });
+
+ tracksList.innerHTML = tracksHTML;
+ if (totalAvailable > tracks.length) {
+ tracksList.insertAdjacentHTML('beforeend',
+ ``);
+ }
+ _attachWishlistDelegation(tracksList);
+ }
+
+ } catch (error) {
+ console.error('Error loading category tracks:', error);
+ showToast(`Failed to load tracks: ${error.message}`, 'error');
+ }
+}
+
+async function loadMoreWishlistTracks() {
+ const btn = document.querySelector('.wishlist-load-more-btn');
+ if (btn) { btn.textContent = 'Loading...'; btn.disabled = true; }
+ // Increase page size and reload
+ window._wlOffset = (window._wlOffset || 200) + 200;
+ // Override the page size for this reload
+ window._wlNextLimit = window._wlOffset;
+ selectWishlistCategory(window._wlCategory);
+}
+
+function _attachWishlistDelegation(container) {
+ // Single click handler for all wishlist album/track interactions
+ container.addEventListener('click', (e) => {
+ const target = e.target;
+
+ // Skip checkbox wrapper clicks — handled by change listener
+ if (target.closest('.wishlist-checkbox-wrapper')) return;
+
+ // Album header click (expand/collapse)
+ const header = target.closest('.wishlist-album-header');
+ if (header && !target.closest('.wishlist-delete-album-btn')) {
+ toggleAlbumTracks(header.dataset.albumId);
+ return;
+ }
+
+ // Album delete button
+ const albumDelBtn = target.closest('.wishlist-delete-album-btn');
+ if (albumDelBtn) {
+ e.stopPropagation();
+ removeAlbumFromWishlist(albumDelBtn.dataset.albumId, e);
+ return;
+ }
+
+ // Track delete button
+ const trackDelBtn = target.closest('.wishlist-delete-btn');
+ if (trackDelBtn && trackDelBtn.dataset.trackId) {
+ e.stopPropagation();
+ removeTrackFromWishlist(trackDelBtn.dataset.trackId, e);
+ return;
+ }
+ });
+
+ // Separate change handler for checkboxes (more reliable than click for inputs)
+ container.addEventListener('change', (e) => {
+ const target = e.target;
+ if (target.classList.contains('wishlist-album-select-all-cb')) {
+ toggleWishlistAlbumSelection(target.dataset.albumId, target.checked);
+ } else if (target.classList.contains('wishlist-select-cb')) {
+ updateWishlistBatchBar();
+ }
+ });
+}
+
+function backToCategories() {
+ _nebulaBack();
+}
+
+function toggleAlbumTracks(albumId) {
+ const tracksElement = document.getElementById(`tracks-${albumId}`);
+ const expandIcon = document.getElementById(`expand-icon-${albumId}`);
+
+ if (tracksElement.style.display === 'none') {
+ tracksElement.style.display = 'block';
+ expandIcon.textContent = '▲';
+ } else {
+ tracksElement.style.display = 'none';
+ expandIcon.textContent = '▼';
+ }
+}
+
+/**
+ * Get all checked wishlist track checkboxes
+ */
+function getCheckedWishlistTracks() {
+ return Array.from(document.querySelectorAll('.wishlist-select-cb:checked'));
+}
+
+/**
+ * Toggle select all / deselect all tracks in the current wishlist category
+ */
+function toggleWishlistSelectAll() {
+ const allCheckboxes = document.querySelectorAll('.wishlist-select-cb');
+ const albumCheckboxes = document.querySelectorAll('.wishlist-album-select-all-cb');
+ const btn = document.getElementById('wishlist-select-all-btn');
+ const allChecked = allCheckboxes.length > 0 && Array.from(allCheckboxes).every(cb => cb.checked);
+
+ const newState = !allChecked;
+
+ allCheckboxes.forEach(cb => { cb.checked = newState; });
+ albumCheckboxes.forEach(cb => { cb.checked = newState; });
+
+ // Expand all albums when selecting all
+ if (newState) {
+ document.querySelectorAll('.wishlist-album-tracks').forEach(el => {
+ el.style.display = 'block';
+ });
+ document.querySelectorAll('[id^="expand-icon-"]').forEach(icon => {
+ icon.textContent = '▲';
+ });
+ }
+
+ if (btn) btn.textContent = newState ? 'Deselect All' : 'Select All';
+ updateWishlistBatchBar();
+}
+
+/**
+ * Update the wishlist batch action bar based on checkbox selection
+ */
+function updateWishlistBatchBar() {
+ const checked = getCheckedWishlistTracks();
+ const bar = document.getElementById('wishlist-batch-bar');
+ const countEl = document.getElementById('wishlist-batch-count');
+
+ if (!bar || !countEl) return;
+
+ if (checked.length > 0) {
+ bar.style.display = 'flex';
+ countEl.textContent = `${checked.length} selected`;
+ } else {
+ bar.style.display = 'none';
+ }
+
+ // Sync the Select All button text
+ const btn = document.getElementById('wishlist-select-all-btn');
+ if (btn) {
+ const allCheckboxes = document.querySelectorAll('.wishlist-select-cb');
+ const allChecked = allCheckboxes.length > 0 && Array.from(allCheckboxes).every(cb => cb.checked);
+ btn.textContent = allChecked ? 'Deselect All' : 'Select All';
+ }
+}
+
+/**
+ * Toggle all track checkboxes within an album when album header checkbox is clicked
+ */
+function toggleWishlistAlbumSelection(albumId, checked) {
+ const tracksContainer = document.getElementById(`tracks-${albumId}`);
+ if (tracksContainer) {
+ // Expand the album tracks if selecting
+ if (checked) {
+ tracksContainer.style.display = 'block';
+ const expandIcon = document.getElementById(`expand-icon-${albumId}`);
+ if (expandIcon) expandIcon.textContent = '▲';
+ }
+ tracksContainer.querySelectorAll('.wishlist-select-cb').forEach(cb => {
+ cb.checked = checked;
+ });
+ }
+ updateWishlistBatchBar();
+}
+
+/**
+ * Batch remove selected tracks from wishlist
+ */
+async function batchRemoveFromWishlist() {
+ const checked = getCheckedWishlistTracks();
+ if (checked.length === 0) return;
+
+ const count = checked.length;
+ const confirmed = await showConfirmationModal(
+ 'Remove Tracks',
+ `Remove ${count} track${count !== 1 ? 's' : ''} from your wishlist?`,
+ '🗑️'
+ );
+
+ if (!confirmed) return;
+
+ const trackIds = checked.map(cb => cb.getAttribute('data-track-id'));
+
+ try {
+ const response = await fetch('/api/wishlist/remove-batch', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ spotify_track_ids: trackIds })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast(`Removed ${data.removed} track(s) from wishlist`, 'success');
+
+ // Reload the current category to refresh the list
+ if (window.selectedWishlistCategory) {
+ await selectWishlistCategory(window.selectedWishlistCategory);
+ }
+
+ // Update wishlist count in sidebar
+ await updateWishlistCount();
+ } else {
+ showToast(`Failed to remove tracks: ${data.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Error batch removing from wishlist:', error);
+ showToast('Failed to remove tracks from wishlist', 'error');
+ }
+}
+
+function showConfirmationModal(title, message, icon = '⚠️') {
+ return new Promise((resolve) => {
+ // Create modal if it doesn't exist
+ let modal = document.getElementById('confirmation-modal-overlay');
+ if (!modal) {
+ modal = document.createElement('div');
+ modal.id = 'confirmation-modal-overlay';
+ modal.className = 'confirmation-modal-overlay';
+ document.body.appendChild(modal);
+ }
+
+ // Set modal content
+ modal.innerHTML = `
+
+
+
+ ${trackName}
+ ${artistName} • ${albumName}
+
+
+
+ `;
+
+ // Show modal with animation
+ setTimeout(() => {
+ modal.classList.add('show');
+ }, 10);
+
+ // Escape key handler - defined outside so we can remove it
+ const handleEscape = (e) => {
+ if (e.key === 'Escape') {
+ handleCancel();
+ }
+ };
+
+ // Handle button clicks
+ const handleCancel = () => {
+ document.removeEventListener('keydown', handleEscape);
+ modal.classList.remove('show');
+ setTimeout(() => {
+ modal.remove();
+ }, 200);
+ resolve(false);
+ };
+
+ const handleConfirm = () => {
+ document.removeEventListener('keydown', handleEscape);
+ modal.classList.remove('show');
+ setTimeout(() => {
+ modal.remove();
+ }, 200);
+ resolve(true);
+ };
+
+ document.getElementById('confirm-cancel').addEventListener('click', handleCancel);
+ document.getElementById('confirm-yes').addEventListener('click', handleConfirm);
+
+ // Close on overlay click
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ handleCancel();
+ }
+ });
+
+ // Add Escape key listener
+ document.addEventListener('keydown', handleEscape);
+ });
+}
+
+async function removeTrackFromWishlist(spotifyTrackId, event) {
+ // Stop event propagation to prevent triggering parent click handlers
+ if (event) {
+ event.stopPropagation();
+ }
+
+ const confirmed = await showConfirmationModal(
+ 'Remove Track',
+ 'Are you sure you want to remove this track from your wishlist?',
+ '🗑️'
+ );
+
+ if (!confirmed) {
+ return;
+ }
+
+ try {
+ const response = await fetch('/api/wishlist/remove-track', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ spotify_track_id: spotifyTrackId })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast('Track removed from wishlist', 'success');
+
+ // Reload the current category to refresh the list
+ if (window.selectedWishlistCategory) {
+ await selectWishlistCategory(window.selectedWishlistCategory);
+ }
+
+ // Update wishlist count in sidebar
+ await updateWishlistCount();
+ } else {
+ showToast(`Failed to remove track: ${data.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Error removing track from wishlist:', error);
+ showToast('Failed to remove track from wishlist', 'error');
+ }
+}
+
+async function removeAlbumFromWishlist(albumId, event) {
+ // Stop event propagation to prevent triggering parent click handlers
+ if (event) {
+ event.stopPropagation();
+ }
+
+ const confirmed = await showConfirmationModal(
+ 'Remove Album',
+ 'Are you sure you want to remove all tracks from this album from your wishlist?',
+ '💿'
+ );
+
+ if (!confirmed) {
+ return;
+ }
+
+ try {
+ const response = await fetch('/api/wishlist/remove-album', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ album_id: albumId })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast(`Removed ${data.removed_count} track(s) from wishlist`, 'success');
+
+ // Reload the current category to refresh the list
+ if (window.selectedWishlistCategory) {
+ await selectWishlistCategory(window.selectedWishlistCategory);
+ }
+
+ // Update wishlist count in sidebar
+ await updateWishlistCount();
+ } else {
+ showToast(`Failed to remove album: ${data.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Error removing album from wishlist:', error);
+ showToast('Failed to remove album from wishlist', 'error');
+ }
+}
+
+async function downloadSelectedCategory() {
+ const category = window.selectedWishlistCategory;
+ if (!category) {
+ showToast('No category selected', 'error');
+ return;
+ }
+
+ // Collect checked track IDs
+ const checkedBoxes = document.querySelectorAll('.wishlist-select-cb:checked');
+ const selectedTrackIds = new Set(Array.from(checkedBoxes).map(cb => cb.dataset.trackId).filter(Boolean));
+
+ await openDownloadMissingWishlistModal(category, selectedTrackIds.size > 0 ? selectedTrackIds : null);
+}
+
+async function openDownloadMissingWishlistModal(category = null, selectedTrackIds = null) {
+ showLoadingOverlay('Loading wishlist...');
+ const playlistId = "wishlist"; // Use a consistent ID for wishlist
+
+ // Check if a process is already active for the wishlist
+ if (activeDownloadProcesses[playlistId]) {
+ console.log(`Modal for wishlist already exists. Showing it.`);
+ const process = activeDownloadProcesses[playlistId];
+ if (process.modalElement) {
+ // Show helpful message if it's a completed process
+ if (process.status === 'complete') {
+ showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+ }
+ process.modalElement.style.display = 'flex';
+ WishlistModalState.setVisible(); // Track that modal is now visible
+ }
+ hideLoadingOverlay(); // Always hide overlay before returning
+ return; // Don't create a new one
+ }
+
+ console.log(`📥 Opening Download Missing Tracks modal for wishlist${category ? ' (' + category + ')' : ''}`);
+
+ // Store category in global state for when process starts
+ window.currentWishlistCategory = category;
+
+ // Fetch actual wishlist tracks from the server
+ let tracks;
+ try {
+ // Build API URL with optional category filter
+ const apiUrl = category ? `/api/wishlist/tracks?category=${category}` : '/api/wishlist/tracks';
+
+ const response = await fetch('/api/wishlist/count');
+ const countData = await response.json();
+ if (countData.count === 0) {
+ showToast('Wishlist is empty. No tracks to download.', 'info');
+ hideLoadingOverlay();
+ return;
+ }
+
+ // Fetch the actual wishlist tracks for display (filtered by category if specified)
+ const tracksResponse = await fetch(apiUrl);
+ if (!tracksResponse.ok) {
+ throw new Error('Failed to fetch wishlist tracks');
+ }
+ const tracksData = await tracksResponse.json();
+ tracks = tracksData.tracks || [];
+
+ // Filter to only selected tracks if user made a selection
+ if (selectedTrackIds && selectedTrackIds.size > 0) {
+ tracks = tracks.filter(t => selectedTrackIds.has(t.id) || selectedTrackIds.has(t.spotify_track_id));
+ console.log(`📥 Filtered to ${tracks.length} selected tracks (from ${tracksData.tracks?.length || 0} total)`);
+ }
+
+ } catch (error) {
+ showToast(`Failed to fetch wishlist data: ${error.message}`, 'error');
+ hideLoadingOverlay();
+ return;
+ }
+
+ currentPlaylistTracks = tracks;
+ currentModalPlaylistId = playlistId;
+
+ let modal = document.createElement('div');
+ modal.id = `download-missing-modal-${playlistId}`; // Unique ID
+ modal.className = 'download-missing-modal'; // Use class for styling
+ modal.style.display = 'none'; // Start hidden
+ document.body.appendChild(modal);
+
+ // Register the new process in our global state tracker
+ activeDownloadProcesses[playlistId] = {
+ status: 'idle', // idle, running, complete, cancelled
+ modalElement: modal,
+ poller: null,
+ batchId: null,
+ playlist: { id: playlistId, name: "Wishlist" }, // Create a pseudo-playlist object
+ tracks: tracks
+ };
+
+ // Generate hero section for wishlist context
+ const heroContext = {
+ type: 'wishlist',
+ trackCount: tracks.length,
+ playlistId: playlistId
+ };
+
+ modal.innerHTML = `
+
+ `;
+
+ applyProgressiveTrackRendering(playlistId, tracks.length);
+ modal.style.display = 'flex';
+ hideLoadingOverlay();
+ WishlistModalState.setVisible(); // Track that new wishlist modal is now visible
+}
+
+async function startWishlistMissingTracksProcess(playlistId) {
+ const process = activeDownloadProcesses[playlistId];
+ if (!process) return;
+
+ console.log(`🚀 Kicking off wishlist missing tracks process`);
+ try {
+ process.status = 'running';
+ // Note: Wishlist processes don't affect sync page refresh button state
+ document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'none';
+ document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'inline-block';
+
+ // Check if force download toggle is enabled
+ const forceDownloadCheckbox = document.getElementById(`force-download-all-${playlistId}`);
+ const forceDownloadAll = forceDownloadCheckbox ? forceDownloadCheckbox.checked : false;
+
+ // Hide the force download toggle during processing
+ const forceToggleContainer = forceDownloadCheckbox ? forceDownloadCheckbox.closest('.force-download-toggle-container') : null;
+ if (forceToggleContainer) {
+ forceToggleContainer.style.display = 'none';
+ }
+
+ // Extract track IDs from what the user is currently seeing in the modal
+ // This prevents race conditions where wishlist changes between modal open and analysis start
+ const trackIds = process.tracks ? process.tracks.map(t => t.spotify_track_id || t.id).filter(id => id) : null;
+ console.log(`🎯 [Wishlist] Sending ${trackIds ? trackIds.length : 'all'} specific track IDs to prevent race condition`);
+
+ const response = await fetch('/api/wishlist/download_missing', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ force_download_all: forceDownloadAll,
+ category: window.currentWishlistCategory, // Keep for backward compat
+ track_ids: trackIds // NEW: Send exact tracks to process
+ })
+ });
+
+ const data = await response.json();
+ if (!data.success) {
+ // Special handling for auto-processing conflict
+ if (response.status === 409) {
+ console.log('🤖 [Wishlist] Auto-processing is running, redirecting to download manager');
+ showToast('Wishlist auto-processing is already running. Opening Download Manager...', 'info');
+
+ // Close wishlist modal and show download manager
+ const wishlistModal = document.getElementById('download-modal-wishlist');
+ if (wishlistModal) {
+ wishlistModal.remove();
+ }
+ delete activeDownloadProcesses[playlistId];
+
+ // Open download manager to show active batch
+ setTimeout(() => {
+ const downloadManager = document.getElementById('download-manager-modal');
+ if (downloadManager) {
+ downloadManager.style.display = 'flex';
+ } else {
+ openDownloadManagerModal();
+ }
+ }, 300);
+ return;
+ }
+ // Special handling for rate limit
+ if (response.status === 429) {
+ throw new Error(`${data.error} Try closing some other download processes first.`);
+ }
+ throw new Error(data.error);
+ }
+
+ process.batchId = data.batch_id;
+ console.log(`✅ Wishlist process started successfully. Batch ID: ${data.batch_id}`);
+
+ // Start polling for updates
+ startModalDownloadPolling(playlistId);
+
+ } catch (error) {
+ console.error('Error starting wishlist missing tracks process:', error);
+ showToast(`Error: ${error.message}`, 'error');
+
+ // Reset UI state on error
+ process.status = 'idle';
+ // Note: Wishlist processes don't affect sync page refresh button state
+ document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'inline-block';
+ document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
+
+ // Show the force download toggle again
+ const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
+ if (forceToggleContainer) {
+ forceToggleContainer.style.display = 'flex';
+ }
+ }
+}
+
+async function startMissingTracksProcess(playlistId) {
+ const process = activeDownloadProcesses[playlistId];
+ if (!process) return;
+
+ console.log(`🚀 Kicking off unified missing tracks process for playlist: ${playlistId}`);
+ try {
+ process.status = 'running';
+ updatePlaylistCardUI(playlistId);
+ updateRefreshButtonState();
+
+ // Set album to downloading status if this is an artist album
+ if (playlistId.startsWith('artist_album_')) {
+ // Format: artist_album_{artist.id}_{album.id}
+ const parts = playlistId.split('_');
+ if (parts.length >= 4) {
+ const albumId = parts.slice(3).join('_'); // In case album ID has underscores
+ const totalTracks = process.tracks ? process.tracks.length : 0;
+ setAlbumDownloadingStatus(albumId, 0, totalTracks);
+ console.log(`🔄 Set album ${albumId} to downloading status (0/${totalTracks} tracks)`);
+ console.log(`🔍 Virtual playlist ID: ${playlistId} → Album ID: ${albumId}`);
+ }
+ }
+
+ // Update YouTube playlist phase to 'downloading' if this is a YouTube playlist
+ if (playlistId.startsWith('youtube_')) {
+ const urlHash = playlistId.replace('youtube_', '');
+ updateYouTubeCardPhase(urlHash, 'downloading');
+ // Also update mirrored playlist card if applicable
+ if (urlHash.startsWith('mirrored_')) {
+ updateMirroredCardPhase(urlHash, 'downloading');
+ }
+ }
+
+ // Update Tidal playlist phase to 'downloading' if this is a Tidal playlist
+ if (playlistId.startsWith('tidal_')) {
+ const tidalPlaylistId = playlistId.replace('tidal_', '');
+ if (tidalPlaylistStates[tidalPlaylistId]) {
+ tidalPlaylistStates[tidalPlaylistId].phase = 'downloading';
+ updateTidalCardPhase(tidalPlaylistId, 'downloading');
+ console.log(`🔄 Updated Tidal playlist ${tidalPlaylistId} to downloading phase`);
+ }
+ }
+
+ // Update Beatport chart phase to 'downloading' if this is a Beatport chart
+ if (playlistId.startsWith('beatport_')) {
+ const urlHash = playlistId.replace('beatport_', '');
+ const state = youtubePlaylistStates[urlHash];
+
+ if (state && state.is_beatport_playlist) {
+ const chartHash = state.beatport_chart_hash || urlHash;
+
+ // Update frontend states
+ state.phase = 'downloading';
+ if (beatportChartStates[chartHash]) {
+ beatportChartStates[chartHash].phase = 'downloading';
+ }
+
+ // Update card UI
+ updateBeatportCardPhase(chartHash, 'downloading');
+
+ // Update backend state
+ try {
+ fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ phase: 'downloading' })
+ });
+ } catch (error) {
+ console.warn('⚠️ Error updating backend Beatport phase to downloading:', error);
+ }
+
+ console.log(`🔄 Updated Beatport chart ${chartHash} to downloading phase`);
+ }
+ }
+
+ // Update Spotify Public playlist phase to 'downloading' if this is a Spotify Public playlist
+ if (playlistId.startsWith('spotify_public_')) {
+ const urlHash = playlistId.replace('spotify_public_', '');
+ if (spotifyPublicPlaylistStates[urlHash]) {
+ spotifyPublicPlaylistStates[urlHash].phase = 'downloading';
+ spotifyPublicPlaylistStates[urlHash].convertedSpotifyPlaylistId = playlistId;
+ updateSpotifyPublicCardPhase(urlHash, 'downloading');
+
+ try {
+ fetch(`/api/spotify-public/update_phase/${urlHash}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ phase: 'downloading', converted_spotify_playlist_id: playlistId })
+ });
+ } catch (error) {
+ console.warn('Error updating backend Spotify Public phase to downloading:', error);
+ }
+
+ console.log(`🔄 Updated Spotify Public playlist ${urlHash} to downloading phase`);
+ }
+ }
+
+ // Update Deezer playlist phase to 'downloading' if this is a Deezer playlist
+ if (playlistId.startsWith('deezer_')) {
+ const deezerPlaylistId = playlistId.replace('deezer_', '');
+ if (deezerPlaylistStates[deezerPlaylistId]) {
+ deezerPlaylistStates[deezerPlaylistId].phase = 'downloading';
+ deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId = playlistId;
+ updateDeezerCardPhase(deezerPlaylistId, 'downloading');
+
+ try {
+ fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ phase: 'downloading', converted_spotify_playlist_id: playlistId })
+ });
+ } catch (error) {
+ console.warn('Error updating backend Deezer phase to downloading:', error);
+ }
+
+ console.log(`🔄 Updated Deezer playlist ${deezerPlaylistId} to downloading phase`);
+ }
+ }
+
+ // Update ListenBrainz playlist phase to 'downloading' if this is a ListenBrainz playlist
+ if (playlistId.startsWith('listenbrainz_')) {
+ const playlistMbid = playlistId.replace('listenbrainz_', '');
+ const state = listenbrainzPlaylistStates[playlistMbid];
+
+ if (state) {
+ // Update frontend state
+ state.phase = 'downloading';
+
+ // Update backend state
+ try {
+ fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ phase: 'downloading' })
+ });
+ } catch (error) {
+ console.warn('⚠️ Error updating backend ListenBrainz phase to downloading:', error);
+ }
+
+ console.log(`🔄 Updated ListenBrainz playlist ${playlistMbid} to downloading phase`);
+ }
+ }
+ document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'none';
+ document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'inline-block';
+
+ // Hide wishlist button if it exists (only for non-wishlist modals)
+ const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
+ if (wishlistBtn) {
+ wishlistBtn.style.display = 'none';
+ }
+
+ // Add to discover download sidebar if this is a discover page download
+ if (process.discoverMetadata) {
+ const playlistName = process.playlist.name;
+ const imageUrl = process.discoverMetadata.imageUrl;
+ const type = process.discoverMetadata.type;
+ addDiscoverDownload(playlistId, playlistName, type, imageUrl);
+ console.log(`📥 [BEGIN ANALYSIS] Added discover download: ${playlistName}`);
+ }
+
+ // Check if force download toggle is enabled
+ const forceDownloadCheckbox = document.getElementById(`force-download-all-${playlistId}`);
+ const forceDownloadAll = forceDownloadCheckbox ? forceDownloadCheckbox.checked : false;
+
+ // Check if playlist folder mode toggle is enabled (only for sync page playlists)
+ const playlistFolderModeCheckbox = document.getElementById(`playlist-folder-mode-${playlistId}`);
+ const playlistFolderMode = playlistFolderModeCheckbox ? playlistFolderModeCheckbox.checked : false;
+
+ // Hide the force download toggle during processing
+ const forceToggleContainer = forceDownloadCheckbox ? forceDownloadCheckbox.closest('.force-download-toggle-container') : null;
+ if (forceToggleContainer) {
+ forceToggleContainer.style.display = 'none';
+ }
+
+ // Filter tracks based on checkbox selection (if checkboxes exist in this modal)
+ const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
+ let selectedTracks = process.tracks;
+ if (tbody) {
+ const allCbs = tbody.querySelectorAll('.track-select-cb');
+ if (allCbs.length > 0) {
+ // Checkboxes exist — filter to only checked tracks
+ const checkedCbs = tbody.querySelectorAll('.track-select-cb:checked');
+ const selectedIndices = new Set([...checkedCbs].map(cb => parseInt(cb.dataset.trackIndex)));
+ console.log(`🔲 [Track Selection] Total checkboxes: ${allCbs.length}, Checked: ${checkedCbs.length}`);
+ console.log(`🔲 [Track Selection] Checked indices:`, [...selectedIndices]);
+ console.log(`🔲 [Track Selection] process.tracks has ${process.tracks.length} items, first: "${process.tracks[0]?.name}", last: "${process.tracks[process.tracks.length - 1]?.name}"`);
+ // Stamp each selected track with its original table index so the backend
+ // maps status updates back to the correct modal row
+ selectedTracks = process.tracks
+ .map((track, i) => ({ ...track, _original_index: i }))
+ .filter(track => selectedIndices.has(track._original_index));
+ console.log(`🔲 [Track Selection] Filtered to ${selectedTracks.length} tracks:`, selectedTracks.map(t => `[${t._original_index}] ${t.name}`));
+ // Disable checkboxes once analysis starts
+ allCbs.forEach(cb => { cb.disabled = true; });
+ }
+ }
+ const selectAllCb = document.getElementById(`select-all-${playlistId}`);
+ if (selectAllCb) selectAllCb.disabled = true;
+
+ // Prepare request body - add album/artist context for artist album downloads
+ const wingItState = youtubePlaylistStates[playlistId] || {};
+ const isWingIt = wingItState.wing_it || false;
+ const requestBody = {
+ tracks: selectedTracks,
+ force_download_all: forceDownloadAll || isWingIt,
+ wing_it: isWingIt,
+ };
+
+ // If this is an artist album download, use album name and include full context
+ // Match 'artist_album_', 'enhanced_search_album_', 'discover_album_', and 'seasonal_album_' prefixes
+ // Note: 'enhanced_search_track_' is excluded — single track search results use singles context
+ const _isAlbumContext = playlistId.startsWith('artist_album_') || playlistId.startsWith('enhanced_search_album_') || playlistId.startsWith('discover_album_') || playlistId.startsWith('seasonal_album_') || playlistId.startsWith('spotify_library_') || playlistId.startsWith('issue_download_') || playlistId.startsWith('library_redownload_') || playlistId.startsWith('beatport_release_');
+ const _isSearchTrack = playlistId.startsWith('enhanced_search_track_') || playlistId.startsWith('gsearch_track_');
+ if (_isAlbumContext || _isSearchTrack) {
+ requestBody.playlist_name = process.album?.name || process.playlist.name;
+ requestBody.is_album_download = _isAlbumContext; // false for single track search results
+ requestBody.album_context = process.album; // Full Spotify album object
+ requestBody.artist_context = process.artist; // Full Spotify artist object
+ console.log(`🎵 [${_isAlbumContext ? 'Album' : 'Single Track'}] Sending context: ${process.album?.name} by ${process.artist?.name}`);
+ } else {
+ // For playlists/wishlists, use the virtual playlist name
+ requestBody.playlist_name = process.playlist.name;
+ // Add playlist folder mode flag for sync page playlists
+ requestBody.playlist_folder_mode = playlistFolderMode;
+ if (playlistFolderMode) {
+ console.log(`📁 [Playlist Folder] Enabled for playlist: ${process.playlist.name}`);
+ }
+ }
+
+ const response = await fetch(`/api/playlists/${playlistId}/start-missing-process`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(requestBody)
+ });
+
+ const data = await response.json();
+ if (!data.success) {
+ // Special handling for rate limit
+ if (response.status === 429) {
+ throw new Error(`${data.error} Try closing some other download processes first.`);
+ }
+ throw new Error(data.error);
+ }
+
+ process.batchId = data.batch_id;
+
+ // Update Beatport backend state with download_process_id now that we have the batchId
+ if (playlistId.startsWith('beatport_')) {
+ const urlHash = playlistId.replace('beatport_', '');
+ const state = youtubePlaylistStates[urlHash];
+ if (state && state.is_beatport_playlist) {
+ const chartHash = state.beatport_chart_hash || urlHash;
+ try {
+ fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ phase: 'downloading',
+ download_process_id: data.batch_id
+ })
+ });
+ console.log(`🔄 Updated Beatport backend with download_process_id: ${data.batch_id}`);
+ } catch (error) {
+ console.warn('⚠️ Error updating Beatport backend with download_process_id:', error);
+ }
+ }
+ }
+
+ // Update ListenBrainz backend state with download_process_id and convertedSpotifyPlaylistId
+ if (playlistId.startsWith('listenbrainz_')) {
+ const playlistMbid = playlistId.replace('listenbrainz_', '');
+ const state = listenbrainzPlaylistStates[playlistMbid];
+ if (state) {
+ // Store in frontend state
+ state.download_process_id = data.batch_id;
+ state.convertedSpotifyPlaylistId = playlistId;
+
+ // Update backend state
+ try {
+ fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ phase: 'downloading',
+ download_process_id: data.batch_id,
+ converted_spotify_playlist_id: playlistId
+ })
+ });
+ console.log(`🔄 Updated ListenBrainz backend with download_process_id: ${data.batch_id}`);
+ } catch (error) {
+ console.warn('⚠️ Error updating ListenBrainz backend with download_process_id:', error);
+ }
+ }
+ }
+
+ startModalDownloadPolling(playlistId);
+ } catch (error) {
+ showToast(`Failed to start process: ${error.message}`, 'error');
+ process.status = 'cancelled';
+
+ // Reset button states on error
+ const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+ const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+ const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
+ if (beginBtn) beginBtn.style.display = 'inline-block';
+ if (cancelBtn) cancelBtn.style.display = 'none';
+ if (wishlistBtn) wishlistBtn.style.display = 'inline-block';
+
+ // Show the force download toggle again
+ const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
+ if (forceToggleContainer) {
+ forceToggleContainer.style.display = 'flex';
+ }
+
+ cleanupDownloadProcess(playlistId);
+ }
+}
+
+
+function updateTrackAnalysisResults(playlistId, results) {
+ // Update match results for all rows (tracks are now pre-populated)
+ for (const result of results) {
+ const matchElement = document.getElementById(`match-${playlistId}-${result.track_index}`);
+ if (matchElement) {
+ matchElement.textContent = result.found ? '✅ Found' : '❌ Missing';
+ matchElement.className = `track-match-status ${result.found ? 'match-found' : 'match-missing'}`;
+ }
+ }
+}
+
+
+
+// ============================================================================
+// GLOBAL BATCHED POLLING SYSTEM - Optimized for multiple concurrent modals
+// ============================================================================
+
+let globalDownloadStatusPoller = null;
+let globalPollingFailureCount = 0; // Track consecutive failures for exponential backoff
+let globalPollingBaseInterval = 2000; // Base polling interval in ms - MATCHES sync.py exactly
+
+function startGlobalDownloadPolling() {
+ // Always run HTTP polling as a fallback — WebSocket connections can silently
+ // stop delivering messages (room subscription lost, server emit error, proxy
+ // timeout) without triggering a disconnect event. The 2-second poll is cheap
+ // (single batched request) and ensures modals never go stale.
+ if (globalDownloadStatusPoller) {
+ console.debug('🔄 [Global Polling] Already running, skipping start');
+ return; // Prevent duplicate pollers
+ }
+
+ console.log('🔄 [Global Polling] Starting batched download status polling');
+
+ globalDownloadStatusPoller = setInterval(async () => {
+ if (document.hidden) return; // Skip polling when tab is not visible
+ // Get all active processes that need polling
+ const activeBatchIds = [];
+ const batchToPlaylistMap = {};
+ let hasOpenWishlistModal = false;
+
+ Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
+ // Include running AND recently-completed batches — ensures late task
+ // status updates still reach the modal so rows don't freeze mid-download
+ if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
+ activeBatchIds.push(process.batchId);
+ batchToPlaylistMap[process.batchId] = playlistId;
+ }
+
+ // Check if there's an open wishlist modal (visible and idle/waiting)
+ if (playlistId === 'wishlist' && process.modalElement &&
+ process.modalElement.style.display === 'flex' &&
+ (!process.batchId || process.status !== 'running')) {
+ hasOpenWishlistModal = true;
+ }
+ });
+
+ // Special handling for open wishlist modal - check for new auto-processing
+ if (hasOpenWishlistModal) {
+ try {
+ const response = await fetch('/api/active-processes');
+ if (response.ok) {
+ const data = await response.json();
+ const processes = data.active_processes || [];
+ const serverWishlistProcess = processes.find(p => p.playlist_id === 'wishlist');
+
+ if (serverWishlistProcess) {
+ console.log('🔄 [Global Polling] Detected auto-processing for open wishlist modal - rehydrating');
+ await rehydrateModal(serverWishlistProcess, false); // false = not user-requested
+ }
+ }
+ } catch (error) {
+ console.debug('⚠️ [Global Polling] Failed to check for wishlist auto-processing:', error);
+ }
+ }
+
+ if (activeBatchIds.length === 0) {
+ console.debug('📊 [Global Polling] No active processes, continuing polling');
+ return;
+ }
+
+ try {
+ // Single batched API call for all active processes
+ const queryParams = activeBatchIds.map(id => `batch_ids=${id}`).join('&');
+ const response = await fetch(`/api/download_status/batch?${queryParams}`);
+
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ console.debug(`📊 [Global Polling] Received batched update for ${Object.keys(data.batches).length} processes`);
+
+ // Process each batch's status data using existing logic
+ Object.entries(data.batches).forEach(([batchId, statusData]) => {
+ const playlistId = batchToPlaylistMap[batchId];
+ if (!playlistId || statusData.error) {
+ if (statusData.error) {
+ console.error(`❌ [Global Polling] Error for batch ${batchId}:`, statusData.error);
+ }
+ return;
+ }
+
+ // Use existing modal update logic - zero changes needed!
+ processModalStatusUpdate(playlistId, statusData);
+ });
+
+ // ENHANCED: Reset failure count on successful polling
+ globalPollingFailureCount = 0;
+
+ } catch (error) {
+ console.error('❌ [Global Polling] Batched request failed:', error);
+
+ // ENHANCED: Implement exponential backoff on failure
+ globalPollingFailureCount++;
+
+ if (globalPollingFailureCount >= 5) {
+ console.error(`🚨 [Global Polling] ${globalPollingFailureCount} consecutive failures, continuing with backoff`);
+ // Don't stop polling - just continue with exponential backoff
+ }
+
+ // Exponential backoff: increase interval temporarily
+ const backoffInterval = Math.min(globalPollingBaseInterval * Math.pow(2, globalPollingFailureCount - 1), 8000);
+ console.warn(`⚠️ [Global Polling] Failure ${globalPollingFailureCount}/5, backing off to ${backoffInterval}ms`);
+
+ // Temporarily adjust the polling interval
+ if (globalDownloadStatusPoller) {
+ clearInterval(globalDownloadStatusPoller);
+ globalDownloadStatusPoller = null;
+
+ // Restart with backoff interval
+ setTimeout(() => {
+ if (Object.keys(activeDownloadProcesses).length > 0) {
+ startGlobalDownloadPollingWithInterval(backoffInterval);
+ }
+ }, backoffInterval);
+ }
+ }
+ }, globalPollingBaseInterval); // Use base interval initially
+}
+
+function startGlobalDownloadPollingWithInterval(interval) {
+ if (globalDownloadStatusPoller) {
+ console.debug('🔄 [Global Polling] Already running, skipping start with interval');
+ return;
+ }
+
+ console.log(`🔄 [Global Polling] Starting with interval ${interval}ms`);
+
+ // Use the exact same logic as startGlobalDownloadPolling but with custom interval
+ globalDownloadStatusPoller = setInterval(async () => {
+ const activeBatchIds = [];
+ const batchToPlaylistMap = {};
+ let hasOpenWishlistModal = false;
+
+ Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
+ if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
+ activeBatchIds.push(process.batchId);
+ batchToPlaylistMap[process.batchId] = playlistId;
+ }
+
+ // Check if there's an open wishlist modal (visible and idle/waiting)
+ if (playlistId === 'wishlist' && process.modalElement &&
+ process.modalElement.style.display === 'flex' &&
+ (!process.batchId || process.status !== 'running')) {
+ hasOpenWishlistModal = true;
+ }
+ });
+
+ // Special handling for open wishlist modal - check for new auto-processing
+ if (hasOpenWishlistModal) {
+ try {
+ const response = await fetch('/api/active-processes');
+ if (response.ok) {
+ const data = await response.json();
+ const processes = data.active_processes || [];
+ const serverWishlistProcess = processes.find(p => p.playlist_id === 'wishlist');
+
+ if (serverWishlistProcess) {
+ console.log('🔄 [Global Polling] Detected auto-processing for open wishlist modal - rehydrating');
+ await rehydrateModal(serverWishlistProcess, false); // false = not user-requested
+ }
+ }
+ } catch (error) {
+ console.debug('⚠️ [Global Polling] Failed to check for wishlist auto-processing:', error);
+ }
+ }
+
+ if (activeBatchIds.length === 0) {
+ console.debug('📊 [Global Polling] No active processes, continuing polling');
+ return;
+ }
+
+ try {
+ const queryParams = activeBatchIds.map(id => `batch_ids=${id}`).join('&');
+ const response = await fetch(`/api/download_status/batch?${queryParams}`);
+
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ console.debug(`📊 [Global Polling] Received batched update for ${Object.keys(data.batches).length} processes`);
+
+ Object.entries(data.batches).forEach(([batchId, statusData]) => {
+ const playlistId = batchToPlaylistMap[batchId];
+ if (!playlistId || statusData.error) {
+ if (statusData.error) {
+ console.error(`❌ [Global Polling] Error for batch ${batchId}:`, statusData.error);
+ }
+ return;
+ }
+ processModalStatusUpdate(playlistId, statusData);
+ });
+
+ // Success - reset to normal interval if we were backing off
+ globalPollingFailureCount = 0;
+ if (interval !== globalPollingBaseInterval) {
+ console.log('✅ [Global Polling] Recovered from backoff, returning to normal interval');
+ clearInterval(globalDownloadStatusPoller);
+ globalDownloadStatusPoller = null;
+ startGlobalDownloadPolling(); // Restart with normal interval
+ }
+
+ } catch (error) {
+ console.error('❌ [Global Polling] Request failed:', error);
+ globalPollingFailureCount++;
+
+ if (globalPollingFailureCount >= 5) {
+ console.error(`🚨 [Global Polling] Too many failures, continuing with backoff`);
+ // Don't stop polling - just continue with exponential backoff
+ }
+ }
+ }, interval);
+}
+
+function stopGlobalDownloadPolling() {
+ if (globalDownloadStatusPoller) {
+ console.log('🛑 [Global Polling] Stopping batched download status polling');
+ clearInterval(globalDownloadStatusPoller);
+ globalDownloadStatusPoller = null;
+ }
+}
+
+// --- Error tooltip for failed/cancelled downloads (fixed-position, escapes overflow) ---
+function _getErrorTooltipPopup() {
+ let el = document.getElementById('error-tooltip-popup');
+ if (!el) {
+ el = document.createElement('div');
+ el.id = 'error-tooltip-popup';
+ document.body.appendChild(el);
+ }
+ return el;
+}
+
+function _hideErrorTooltip() {
+ const popup = document.getElementById('error-tooltip-popup');
+ if (popup) popup.classList.remove('visible');
+}
+
+function _ensureErrorTooltipListeners(statusEl) {
+ if (statusEl._errorTooltipBound) return;
+ statusEl._errorTooltipBound = true;
+ statusEl.addEventListener('mouseenter', function () {
+ const msg = this.dataset.errorMsg;
+ if (!msg || !this.offsetParent) return; // skip if element is hidden
+ const popup = _getErrorTooltipPopup();
+ popup.textContent = msg;
+ popup.classList.add('visible');
+ const rect = this.getBoundingClientRect();
+ const popupRect = popup.getBoundingClientRect();
+ let left = rect.left + rect.width / 2 - popupRect.width / 2;
+ let top = rect.top - popupRect.height - 10;
+ // Keep within viewport
+ if (left < 8) left = 8;
+ if (left + popupRect.width > window.innerWidth - 8) left = window.innerWidth - 8 - popupRect.width;
+ if (top < 8) { top = rect.bottom + 10; } // flip below if no room above
+ popup.style.left = left + 'px';
+ popup.style.top = top + 'px';
+ });
+ statusEl.addEventListener('mouseleave', _hideErrorTooltip);
+
+ // Dismiss tooltip when the scrollable modal body scrolls
+ const scrollParent = statusEl.closest('.download-missing-modal-body');
+ if (scrollParent && !scrollParent._errorTooltipScrollBound) {
+ scrollParent._errorTooltipScrollBound = true;
+ scrollParent.addEventListener('scroll', _hideErrorTooltip, { passive: true });
+ }
+}
+
+function _ensureCandidatesClickListener(statusEl) {
+ if (statusEl._candidatesClickBound) return;
+ statusEl._candidatesClickBound = true;
+ statusEl.addEventListener('click', function (e) {
+ e.stopPropagation();
+ _hideErrorTooltip();
+ const taskId = this.dataset.taskId;
+ if (taskId) showCandidatesModal(taskId);
+ });
+}
+
+async function showCandidatesModal(taskId) {
+ try {
+ const resp = await fetch(`/api/downloads/task/${encodeURIComponent(taskId)}/candidates`);
+ if (!resp.ok) { console.error('Failed to fetch candidates:', resp.status); return; }
+ const data = await resp.json();
+ _renderCandidatesModal(data);
+ } catch (err) {
+ console.error('Error fetching candidates:', err);
+ }
+}
+
+function _renderCandidatesModal(data) {
+ let overlay = document.getElementById('candidates-modal-overlay');
+ if (overlay) overlay.remove();
+
+ const trackName = data.track_info?.name || 'Unknown Track';
+ const trackArtist = data.track_info?.artist || 'Unknown Artist';
+ const candidates = data.candidates || [];
+ const errorMsg = data.error_message || '';
+
+ const fmtSize = (bytes) => {
+ if (!bytes) return '-';
+ const units = ['B', 'KB', 'MB', 'GB'];
+ let s = bytes, u = 0;
+ while (s >= 1024 && u < units.length - 1) { s /= 1024; u++; }
+ return `${s.toFixed(1)} ${units[u]}`;
+ };
+ const fmtDur = (ms) => {
+ if (!ms) return '-';
+ const sec = Math.floor(ms / 1000);
+ return `${Math.floor(sec / 60)}:${(sec % 60).toString().padStart(2, '0')}`;
+ };
+
+ let tableRows = '';
+ if (candidates.length === 0) {
+ tableRows = `${title}
+
+
+
+
`;
+
+ document.body.appendChild(overlay);
+ requestAnimationFrame(() => overlay.classList.add('visible'));
+
+ // Bind download buttons
+ overlay.querySelectorAll('.candidates-download-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const idx = parseInt(btn.dataset.index);
+ const c = candidates[idx];
+ if (c) downloadCandidate(data.task_id, c, trackName);
+ });
+ });
+}
+
+async function downloadCandidate(taskId, candidate, trackName) {
+ if (!await showConfirmDialog({ title: 'Download File', message: `Download this file as "${trackName}"?\n\n${candidate.filename?.split(/[/\\]/).pop() || 'Unknown file'}\nfrom ${candidate.username || 'Unknown user'}`, confirmText: 'Download' })) return;
+ try {
+ const resp = await fetch(`/api/downloads/task/${encodeURIComponent(taskId)}/download-candidate`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(candidate)
+ });
+ const result = await resp.json();
+ if (result.success) {
+ closeCandidatesModal();
+ showToast(result.message || 'Download initiated', 'success');
+ } else {
+ showToast(`Failed: ${result.error}`, 'error');
+ }
+ } catch (err) {
+ console.error('Error initiating manual download:', err);
+ showToast('Failed to initiate download', 'error');
+ }
+}
+
+function closeCandidatesModal() {
+ const overlay = document.getElementById('candidates-modal-overlay');
+ if (overlay) {
+ overlay.classList.remove('visible');
+ setTimeout(() => overlay.remove(), 300);
+ }
+}
+
+function processModalStatusUpdate(playlistId, data) {
+ // This function contains ALL the existing polling logic from startModalDownloadPolling
+ // Extracted so it can be called from both individual and batched polling
+ const process = activeDownloadProcesses[playlistId];
+ if (!process) {
+ console.debug(`⚠️ [Status Update] No process found for ${playlistId}, skipping update`);
+ return;
+ }
+
+ if (data.error) {
+ console.error(`❌ [Status Update] Error for ${playlistId}: ${data.error}`);
+ return;
+ }
+
+ // ENHANCED: Validate response data to prevent UI corruption
+ if (!data || typeof data !== 'object') {
+ console.error(`❌ [Status Update] Invalid data for ${playlistId}:`, data);
+ return;
+ }
+
+ // ENHANCED: Validate task data structure
+ if (data.tasks && !Array.isArray(data.tasks)) {
+ console.error(`❌ [Status Update] Invalid tasks data for ${playlistId} - not an array:`, data.tasks);
+ return;
+ }
+
+ console.debug(`📊 [Status Update] Processing update for ${playlistId}: phase=${data.phase}, tasks=${(data.tasks || []).length}`);
+
+ // Note: Wishlist modal visibility is now managed by handleWishlistButtonClick() only
+ // Auto-show logic has been simplified to prevent conflicts
+
+ if (data.phase === 'analysis') {
+ const progress = data.analysis_progress;
+ const percent = progress.total > 0 ? (progress.processed / progress.total) * 100 : 0;
+ document.getElementById(`analysis-progress-fill-${playlistId}`).style.width = `${percent}%`;
+ document.getElementById(`analysis-progress-text-${playlistId}`).textContent =
+ `${progress.processed}/${progress.total} tracks analyzed`;
+ if (data.analysis_results) {
+ updateTrackAnalysisResults(playlistId, data.analysis_results);
+ // Update stats when we first get analysis results
+ const foundCount = data.analysis_results.filter(r => r.found).length;
+ const missingCount = data.analysis_results.filter(r => !r.found).length;
+ document.getElementById(`stat-found-${playlistId}`).textContent = foundCount;
+ document.getElementById(`stat-missing-${playlistId}`).textContent = missingCount;
+
+ // Auto-save M3U file for playlists after analysis
+ autoSavePlaylistM3U(playlistId);
+ }
+ } else if (data.phase === 'downloading' || data.phase === 'complete' || data.phase === 'error') {
+ console.debug(`📊 [Status Update] Processing ${data.phase} phase for playlistId: ${playlistId}, tasks: ${(data.tasks || []).length}`);
+
+ if (document.getElementById(`analysis-progress-fill-${playlistId}`).style.width !== '100%') {
+ document.getElementById(`analysis-progress-fill-${playlistId}`).style.width = '100%';
+ document.getElementById(`analysis-progress-text-${playlistId}`).textContent = 'Analysis complete!';
+ if (data.analysis_results) {
+ updateTrackAnalysisResults(playlistId, data.analysis_results);
+ const foundCount = data.analysis_results.filter(r => r.found).length;
+ const missingCount = data.analysis_results.filter(r => !r.found).length;
+ document.getElementById(`stat-found-${playlistId}`).textContent = foundCount;
+ document.getElementById(`stat-missing-${playlistId}`).textContent = missingCount;
+ }
+ }
+ const missingTracks = (data.analysis_results || []).filter(r => !r.found);
+ const missingCount = missingTracks.length;
+ let completedCount = 0;
+ let failedOrCancelledCount = 0;
+ let notFoundCount = 0;
+
+ // Verify modal exists before processing tasks
+ const modal = document.getElementById(`download-missing-modal-${playlistId}`);
+ if (!modal) {
+ console.error(`❌ [Status Update] Modal not found: download-missing-modal-${playlistId}`);
+ return;
+ }
+
+ // Update download progress text immediately when entering downloading phase
+ // This handles the case where tasks array is empty or still being populated
+ const downloadProgressText = document.getElementById(`download-progress-text-${playlistId}`);
+ if (data.phase === 'downloading' && missingCount > 0 && (!data.tasks || data.tasks.length === 0)) {
+ // No tasks yet, but we're in downloading phase with missing tracks
+ if (downloadProgressText) {
+ downloadProgressText.textContent = 'Preparing downloads...';
+ console.log(`📥 [Download Phase] Preparing ${missingCount} downloads...`);
+ }
+ }
+
+ (data.tasks || []).forEach(task => {
+ const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${task.track_index}"]`);
+ if (!row) {
+ console.debug(`❌ [Status Update] Row not found for playlistId: ${playlistId}, track_index: ${task.track_index}`);
+ return;
+ }
+
+ // V2 SYSTEM: Check for persistent cancel state from backend
+ const isV2Task = task.playlist_id !== undefined; // V2 tasks have playlist_id
+ const cancelRequested = task.cancel_requested || false;
+ const uiState = task.ui_state || 'normal';
+
+ // Legacy protection for old system compatibility
+ if (row.dataset.locallyCancelled === 'true' && !isV2Task) {
+ failedOrCancelledCount++;
+ return; // Only skip for legacy system tasks
+ }
+
+ // Mark row with V2 system info
+ if (isV2Task) {
+ row.dataset.useV2System = 'true';
+ row.dataset.cancelRequested = cancelRequested.toString();
+ row.dataset.uiState = uiState;
+ }
+
+ row.dataset.taskId = task.task_id;
+ const statusEl = document.getElementById(`download-${playlistId}-${task.track_index}`);
+ const actionsEl = document.getElementById(`actions-${playlistId}-${task.track_index}`);
+
+ let statusText = '';
+ // V2 SYSTEM: Handle UI state override for cancelling tasks
+ if (isV2Task && uiState === 'cancelling' && task.status !== 'cancelled') {
+ statusText = '🔄 Cancelling...';
+ } else {
+ switch (task.status) {
+ case 'pending': statusText = '⏸️ Pending'; break;
+ case 'searching': statusText = '🔍 Searching...'; break;
+ case 'downloading': statusText = `⏬ Downloading... ${Math.round(task.progress || 0)}%`; break;
+ case 'post_processing': statusText = '⌛ Processing...'; break;
+ case 'completed': statusText = '✅ Completed'; completedCount++; break;
+ case 'not_found': statusText = '🔇 Not Found'; notFoundCount++; break;
+ case 'failed': statusText = '❌ Failed'; failedOrCancelledCount++; break;
+ case 'cancelled': statusText = '🚫 Cancelled'; failedOrCancelledCount++; break;
+ default: statusText = `⚪ ${task.status}`; break;
+ }
+ }
+
+ if (statusEl) {
+ statusEl.classList.remove('has-error-tooltip');
+ statusEl.removeAttribute('title');
+ statusEl.removeAttribute('data-error-msg');
+ statusEl.textContent = statusText;
+
+ if ((task.status === 'failed' || task.status === 'cancelled' || task.status === 'not_found') && task.error_message) {
+ statusEl.classList.add('has-error-tooltip');
+ statusEl.dataset.errorMsg = task.error_message;
+ _ensureErrorTooltipListeners(statusEl);
+ }
+ // Make not_found and failed cells clickable to review search candidates
+ if ((task.status === 'not_found' || task.status === 'failed') && task.has_candidates) {
+ statusEl.classList.add('has-candidates');
+ statusEl.dataset.taskId = task.task_id;
+ _ensureCandidatesClickListener(statusEl);
+ }
+ console.debug(`✅ [Status Update] Updated track ${task.track_index} to: ${statusText}${isV2Task ? ' (V2)' : ''}`);
+ } else {
+ console.warn(`❌ [Status Update] Status element not found: download-${playlistId}-${task.track_index}`);
+ }
+
+ // V2 SYSTEM: Smart button management with persistent state awareness
+ if (actionsEl && !['completed', 'failed', 'cancelled', 'not_found', 'post_processing'].includes(task.status)) {
+ // Check if we're in a cancelling state
+ if (isV2Task && uiState === 'cancelling') {
+ actionsEl.innerHTML = 'Cancelling...';
+ } else {
+ // Create V2 cancel button for all active tasks
+ const onclickHandler = isV2Task ? 'cancelTrackDownloadV2' : 'cancelTrackDownload';
+ actionsEl.innerHTML = ``;
+ }
+ } else if (actionsEl && ['completed', 'failed', 'cancelled', 'not_found', 'post_processing'].includes(task.status)) {
+ actionsEl.innerHTML = '-'; // No actions available for terminal or processing states
+ }
+ });
+
+ // ENHANCED: Validate worker counts from server data
+ const serverActiveWorkers = data.active_count || 0;
+ const maxWorkers = data.max_concurrent || 3;
+
+ // V2 SYSTEM: Simplified worker counting - backend is authoritative
+ // Count active tasks, excluding locally cancelled legacy tasks only
+ const clientActiveWorkers = (data.tasks || []).filter(task => {
+ const row = document.querySelector(`tr[data-track-index="${task.track_index}"]`);
+ const isLegacyCancelled = row && row.dataset.locallyCancelled === 'true' && !row.dataset.useV2System;
+ return ['searching', 'downloading', 'queued'].includes(task.status) && !isLegacyCancelled;
+ }).length;
+
+ // Log discrepancies for debugging
+ if (serverActiveWorkers !== clientActiveWorkers) {
+ console.warn(`🔍 [Worker Validation] ${playlistId}: server reports ${serverActiveWorkers} active, client sees ${clientActiveWorkers} active tasks`);
+
+ // If server reports 0 but client sees active tasks, this might indicate ghost workers were fixed
+ if (serverActiveWorkers === 0 && clientActiveWorkers > 0) {
+ console.warn(`🚨 [Worker Validation] Server reports 0 workers but client sees ${clientActiveWorkers} active tasks - potential UI desync`);
+ }
+ }
+
+ console.debug(`📊 [Worker Status] ${playlistId}: ${serverActiveWorkers}/${maxWorkers} active workers, ${clientActiveWorkers} client-side active tasks`);
+
+ const totalFinished = completedCount + failedOrCancelledCount + notFoundCount;
+ const progressPercent = missingCount > 0 ? (totalFinished / missingCount) * 100 : 0;
+ document.getElementById(`download-progress-fill-${playlistId}`).style.width = `${progressPercent}%`;
+ document.getElementById(`download-progress-text-${playlistId}`).textContent = `${completedCount}/${missingCount} completed (${progressPercent.toFixed(0)}%)`;
+ document.getElementById(`stat-downloaded-${playlistId}`).textContent = completedCount;
+
+ // Auto-save M3U file once when all downloads finish (not on every poll cycle).
+ // Previously this fired on EVERY 2-second poll when completedCount > 0, flooding
+ // the server with heavyweight M3U generation requests that exhausted Flask threads
+ // and caused the batch status endpoint to hang — killing the poller.
+
+ // CLIENT-SIDE COMPLETION: Only complete when ALL task rows in the UI reflect a terminal state.
+ // Using totalFinished (derived from DOM updates in THIS render pass) prevents premature
+ // completion when the server sends phase='complete' before all rows have been updated.
+ const allTracksFinished = totalFinished >= missingCount && missingCount > 0 && totalFinished > 0;
+ // Extra guard: require the server to also report no active tasks
+ const serverHasActiveWork = (data.tasks || []).some(t =>
+ ['downloading', 'searching', 'queued', 'pending', 'post_processing'].includes(t.status));
+ if (allTracksFinished && !serverHasActiveWork && process.status !== 'complete') {
+ console.log(`🎯 [Client Completion] All ${totalFinished}/${missingCount} tracks finished - completing modal locally`);
+
+ // Hide cancel button and mark as complete
+ document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
+ process.status = 'complete';
+ updatePlaylistCardUI(playlistId);
+
+ // Save M3U once on completion (not during progress polling)
+ if (completedCount > 0) {
+ autoSavePlaylistM3U(playlistId);
+ }
+
+ // Show the force download toggle again
+ const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
+ if (forceToggleContainer) {
+ forceToggleContainer.style.display = 'flex';
+ }
+
+ // Set album to downloaded status if this is an artist album
+ if (playlistId.startsWith('artist_album_')) {
+ const parts = playlistId.split('_');
+ if (parts.length >= 4) {
+ const albumId = parts.slice(3).join('_');
+ setTimeout(() => setAlbumDownloadedStatus(albumId), 500); // Small delay to ensure UI updates
+ }
+ }
+
+ // Update mirrored playlist card phase on client-side completion
+ if (playlistId.startsWith('youtube_')) {
+ const urlHash = playlistId.replace('youtube_', '');
+ if (urlHash.startsWith('mirrored_')) {
+ updateMirroredCardPhase(urlHash, 'download_complete');
+ }
+ }
+
+ // Auto-save final M3U file for playlists
+ autoSavePlaylistM3U(playlistId);
+
+ // Show completion message
+ let completionParts = [`${completedCount} downloaded`];
+ if (notFoundCount > 0) completionParts.push(`${notFoundCount} not found`);
+ if (failedOrCancelledCount > 0) completionParts.push(`${failedOrCancelledCount} failed`);
+ const completionMessage = `Download complete! ${completionParts.join(', ')}.`;
+ showToast(completionMessage, 'success');
+
+ // Refresh server playlists tab so it reflects newly synced tracks
+ if (typeof loadServerPlaylists === 'function') {
+ setTimeout(() => loadServerPlaylists(), 2000);
+ }
+
+ // Auto-close wishlist modal when completed (for auto-processing)
+ if (playlistId === 'wishlist') {
+ console.log('🔄 [Auto-Wishlist] Auto-closing completed wishlist modal to enable next cycle');
+ setTimeout(() => {
+ closeDownloadMissingModal(playlistId);
+ }, 3000); // 3-second delay to show completion message
+ }
+
+ // Check if any other processes still need polling
+ checkAndCleanupGlobalPolling();
+
+ return; // Skip waiting for backend signal
+ }
+
+ // FIXED: Only trigger completion logic when backend actually reports batch as complete
+ // Don't assume completion based on task counts - let backend determine when truly complete
+ if (data.phase === 'complete' || data.phase === 'error') {
+ // Enhanced check for background auto-processing for wishlist
+ const isWishlist = (playlistId === 'wishlist');
+ const isModalHidden = (process.modalElement && process.modalElement.style.display === 'none');
+ const isAutoInitiated = data.auto_initiated || false; // Server indicates if batch was auto-started
+ const isBackgroundWishlist = isWishlist && (isModalHidden || isAutoInitiated);
+
+ // Note: Auto-show logic removed - wishlist modal visibility managed by user interaction only
+
+ if (data.phase === 'cancelled') {
+ process.status = 'cancelled';
+
+ // Reset YouTube playlist phase to 'discovered' if this is a YouTube playlist on cancel
+ if (playlistId.startsWith('youtube_')) {
+ const urlHash = playlistId.replace('youtube_', '');
+ updateYouTubeCardPhase(urlHash, 'discovered');
+ if (urlHash.startsWith('mirrored_')) {
+ updateMirroredCardPhase(urlHash, 'discovered');
+ }
+ }
+
+ showToast(`Process cancelled for ${process.playlist.name}.`, 'info');
+ } else if (data.phase === 'error') {
+ process.status = 'complete'; // Treat as complete to allow cleanup
+ updatePlaylistCardUI(playlistId); // Update card to show ready for review
+
+ // Reset YouTube playlist phase to 'discovered' if this is a YouTube playlist on error
+ if (playlistId.startsWith('youtube_')) {
+ const urlHash = playlistId.replace('youtube_', '');
+ updateYouTubeCardPhase(urlHash, 'discovered');
+ if (urlHash.startsWith('mirrored_')) {
+ updateMirroredCardPhase(urlHash, 'discovered');
+ }
+ }
+
+ showToast(`Process for ${process.playlist.name} failed!`, 'error');
+ } else {
+ process.status = 'complete';
+ updatePlaylistCardUI(playlistId); // Update card to show ready for review
+
+ // Update YouTube playlist phase to 'download_complete' if this is a YouTube playlist
+ if (playlistId.startsWith('youtube_')) {
+ const urlHash = playlistId.replace('youtube_', '');
+ updateYouTubeCardPhase(urlHash, 'download_complete');
+ if (urlHash.startsWith('mirrored_')) {
+ updateMirroredCardPhase(urlHash, 'download_complete');
+ }
+ }
+
+ // Update Tidal playlist phase to 'download_complete' if this is a Tidal playlist
+ if (playlistId.startsWith('tidal_')) {
+ const tidalPlaylistId = playlistId.replace('tidal_', '');
+ if (tidalPlaylistStates[tidalPlaylistId]) {
+ tidalPlaylistStates[tidalPlaylistId].phase = 'download_complete';
+ // Store the download process ID for potential modal rehydration
+ tidalPlaylistStates[tidalPlaylistId].download_process_id = process.batchId;
+ updateTidalCardPhase(tidalPlaylistId, 'download_complete');
+ console.log(`✅ [Status Complete] Updated Tidal playlist ${tidalPlaylistId} to download_complete phase`);
+ }
+ }
+
+ // Update Beatport chart phase to 'download_complete' if this is a Beatport chart
+ if (playlistId.startsWith('beatport_')) {
+ const urlHash = playlistId.replace('beatport_', '');
+ const state = youtubePlaylistStates[urlHash];
+
+ if (state && state.is_beatport_playlist) {
+ const chartHash = state.beatport_chart_hash || urlHash;
+
+ // Update frontend states
+ state.phase = 'download_complete';
+ state.download_process_id = process.batchId;
+ if (beatportChartStates[chartHash]) {
+ beatportChartStates[chartHash].phase = 'download_complete';
+ }
+
+ // Update card UI
+ updateBeatportCardPhase(chartHash, 'download_complete');
+
+ // Update backend state
+ try {
+ fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ phase: 'download_complete',
+ download_process_id: process.batchId
+ })
+ });
+ } catch (error) {
+ console.warn('⚠️ Error updating backend Beatport phase to download_complete:', error);
+ }
+
+ console.log(`✅ [Status Complete] Updated Beatport chart ${chartHash} to download_complete phase`);
+ }
+ }
+
+ // Handle background wishlist processing completion specially
+ if (isBackgroundWishlist) {
+ console.log(`🎉 Background wishlist processing complete: ${completedCount} downloaded, ${notFoundCount} not found, ${failedOrCancelledCount} failed`);
+
+ // Reset modal to idle state to prevent "complete" phase disruption
+ setTimeout(() => {
+ resetWishlistModalToIdleState();
+ // Server-side auto-processing will handle next cycle automatically
+ }, 500);
+
+ return; // Skip normal completion handling
+ }
+
+ // Show completion summary with wishlist stats (matching sync.py behavior)
+ let completionMessage = `Process complete for ${process.playlist.name}!`;
+ let messageType = 'success';
+
+ // Check for wishlist summary from backend (added when failed/cancelled tracks are processed)
+ if (data.wishlist_summary) {
+ const summary = data.wishlist_summary;
+ let summaryParts = [`Downloaded: ${completedCount}`];
+ if (notFoundCount > 0) summaryParts.push(`Not Found: ${notFoundCount}`);
+ if (failedOrCancelledCount > 0) summaryParts.push(`Failed: ${failedOrCancelledCount}`);
+ completionMessage = `Download process complete! ${summaryParts.join(', ')}.`;
+
+ if (summary.tracks_added > 0) {
+ completionMessage += ` Added ${summary.tracks_added} failed track${summary.tracks_added !== 1 ? 's' : ''} to wishlist for automatic retry.`;
+ } else if (summary.total_failed > 0) {
+ completionMessage += ` ${summary.total_failed} track${summary.total_failed !== 1 ? 's' : ''} could not be added to wishlist.`;
+ messageType = 'warning';
+ }
+ }
+
+ showToast(completionMessage, messageType);
+ }
+
+ document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
+
+ // Mark process as complete and trigger cleanup check
+ process.status = 'complete';
+ updatePlaylistCardUI(playlistId);
+
+ // Check if any other processes still need polling
+ checkAndCleanupGlobalPolling();
+ }
+ }
+}
+
+function checkAndCleanupGlobalPolling() {
+ // Check if any processes still need polling
+ const hasActivePolling = Object.values(activeDownloadProcesses)
+ .some(p => p.batchId && p.status === 'running');
+
+ if (!hasActivePolling) {
+ console.debug('🧹 [Cleanup] No more active processes, continuing polling');
+ // Keep polling active - no need to stop
+ }
+}
+
+// LEGACY FUNCTION: Keep for backward compatibility, but now uses global polling
+function startModalDownloadPolling(playlistId) {
+ const process = activeDownloadProcesses[playlistId];
+ if (!process || !process.batchId) return;
+
+ console.log(`🔄 [Legacy Polling] Starting polling for ${playlistId}, delegating to global poller`);
+
+ // Clear any existing individual poller (cleanup)
+ if (process.poller) {
+ clearInterval(process.poller);
+ process.poller = null;
+ }
+
+ // Mark process as running to be picked up by global poller
+ process.status = 'running';
+
+ // Start global polling if not already running
+ startGlobalDownloadPolling();
+
+ // Create dummy poller for backward compatibility with cleanup functions
+ ensureLegacyCompatibility(playlistId);
+}
+
+// For backward compatibility with cleanup functions that expect process.poller
+// Creates a dummy poller that will be cleaned up by the existing cleanup logic
+function createLegacyPoller(playlistId) {
+ const process = activeDownloadProcesses[playlistId];
+ if (!process) return;
+
+ // Create a dummy interval that just checks if the process is still active
+ // This ensures existing cleanup logic that calls clearInterval(process.poller) works
+ process.poller = setInterval(() => {
+ // This dummy poller doesn't do anything - global poller handles updates
+ if (!activeDownloadProcesses[playlistId] || process.status === 'complete') {
+ clearInterval(process.poller);
+ process.poller = null;
+ return;
+ }
+ }, 5000); // Very infrequent check, just for cleanup compatibility
+}
+
+// Call this to create the legacy poller after starting global polling
+function ensureLegacyCompatibility(playlistId) {
+ const process = activeDownloadProcesses[playlistId];
+ if (process && !process.poller) {
+ createLegacyPoller(playlistId);
+ }
+}
+async function updateModalWithLiveDownloadProgress() {
+ try {
+ if (!currentDownloadBatchId) return;
+
+ // Fetch live download data from the downloads API
+ const response = await fetch('/api/downloads/status');
+ const downloadData = await response.json();
+
+ if (downloadData.error) return;
+
+ // Get all active and finished downloads
+ const allDownloads = { ...(downloadData.active || {}), ...(downloadData.finished || {}) };
+
+ // Update modal tracks that have active downloads
+ const modalRows = document.querySelectorAll('.download-missing-modal tr[data-track-index]');
+
+ for (const row of modalRows) {
+ const taskId = row.dataset.taskId;
+ if (!taskId) continue;
+
+ // Find corresponding download by checking if filename/title matches
+ const trackName = row.querySelector('.track-name')?.textContent?.trim();
+ if (!trackName) continue;
+
+ // Search for matching download
+ for (const [downloadId, downloadInfo] of Object.entries(allDownloads)) {
+ // Extract display title from filename (handle YouTube encoding)
+ let downloadTitle = '';
+ if (downloadInfo.filename) {
+ if ((downloadInfo.username === 'youtube' || downloadInfo.username === 'tidal' || downloadInfo.username === 'qobuz' || downloadInfo.username === 'hifi') && downloadInfo.filename.includes('||')) {
+ const parts = downloadInfo.filename.split('||');
+ downloadTitle = parts[1] || parts[0];
+ } else {
+ downloadTitle = downloadInfo.filename.split(/[\\/]/).pop();
+ }
+ }
+
+ // Simple matching - could be improved with better logic
+ if (downloadTitle && trackName && (
+ downloadTitle.toLowerCase().includes(trackName.toLowerCase()) ||
+ trackName.toLowerCase().includes(downloadTitle.toLowerCase())
+ )) {
+ // Update the track with live download progress
+ const statusElement = row.querySelector('.track-download-status');
+ const progress = downloadInfo.percentComplete || 0;
+ const state = downloadInfo.state || '';
+
+ if (statusElement && state.includes('InProgress') && progress > 0) {
+ statusElement.textContent = `⏬ Downloading... ${Math.round(progress)}%`;
+ statusElement.className = 'track-download-status download-downloading';
+ } else if (statusElement && (state.includes('Completed') || state.includes('Succeeded'))) {
+ statusElement.textContent = '✅ Completed';
+ statusElement.className = 'track-download-status download-complete';
+ }
+
+ break; // Found a match, stop searching
+ }
+ }
+ }
+
+ } catch (error) {
+ // Silent fail - don't spam console during normal operation
+ }
+}
+
+function toggleAllTrackSelections(playlistId, checked) {
+ const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
+ if (!tbody) return;
+ const checkboxes = tbody.querySelectorAll('.track-select-cb');
+ checkboxes.forEach(cb => { cb.checked = checked; });
+ updateTrackSelectionCount(playlistId);
+}
+
+function updateTrackSelectionCount(playlistId) {
+ const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
+ if (!tbody) return;
+ const allCbs = tbody.querySelectorAll('.track-select-cb');
+ const checkedCbs = tbody.querySelectorAll('.track-select-cb:checked');
+ const total = allCbs.length;
+ const selected = checkedCbs.length;
+
+ // Update selection count label
+ const countLabel = document.getElementById(`track-selection-count-${playlistId}`);
+ if (countLabel) {
+ countLabel.textContent = `${selected} / ${total} tracks selected`;
+ }
+
+ // Update select-all checkbox state
+ const selectAll = document.getElementById(`select-all-${playlistId}`);
+ if (selectAll) {
+ selectAll.checked = selected === total;
+ selectAll.indeterminate = selected > 0 && selected < total;
+ }
+
+ // Update row dimming
+ allCbs.forEach(cb => {
+ const row = cb.closest('tr');
+ if (row) row.classList.toggle('track-deselected', !cb.checked);
+ });
+
+ // Disable Begin Analysis and Add to Wishlist buttons when 0 selected
+ const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+ if (beginBtn) {
+ beginBtn.disabled = selected === 0;
+ }
+ const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
+ if (wishlistBtn) {
+ wishlistBtn.disabled = selected === 0;
+ }
+}
+
+async function cancelAllOperations(playlistId) {
+ const process = activeDownloadProcesses[playlistId];
+ if (!process) return;
+
+ // Prevent multiple cancel all operations
+ if (process.cancellingAll) {
+ console.log(`⚠️ Cancel All already in progress for ${playlistId}`);
+ return;
+ }
+ process.cancellingAll = true;
+
+ console.log(`🚫 Cancel All clicked for playlist ${playlistId} - closing modal and cleaning up server`);
+
+ showToast('Cancelling all operations and closing modal...', 'info');
+
+ // Mark process as complete immediately so polling stops
+ process.status = 'complete';
+
+ // Stop any active polling
+ if (process.poller) {
+ clearInterval(process.poller);
+ process.poller = null;
+ }
+
+ // Tell server to stop starting new downloads and clean up the batch
+ if (process.batchId) {
+ try {
+ // Cancel the batch (stops new downloads from starting)
+ const cancelResponse = await fetch(`/api/playlists/${process.batchId}/cancel_batch`, {
+ method: 'POST'
+ });
+ if (cancelResponse.ok) {
+ const cancelData = await cancelResponse.json();
+ console.log(`✅ Server stopped new downloads for batch ${process.batchId}`);
+ }
+ } catch (error) {
+ console.warn('Error during server batch cancel:', error);
+ }
+ }
+
+ // Close the modal immediately - this will handle cleanup
+ closeDownloadMissingModal(playlistId);
+
+ showToast('Modal closed. Active downloads will finish in background.', 'success');
+}
+
+function resetToInitialState() {
+ // Reset UI
+ document.getElementById('begin-analysis-btn').style.display = 'inline-block';
+ document.getElementById('start-downloads-btn').style.display = 'none';
+ document.getElementById('cancel-all-btn').style.display = 'none';
+
+ // Reset progress bars
+ document.getElementById('analysis-progress-fill').style.width = '0%';
+ document.getElementById('download-progress-fill').style.width = '0%';
+ document.getElementById('analysis-progress-text').textContent = 'Ready to start';
+ document.getElementById('download-progress-text').textContent = 'Waiting for analysis';
+
+ // Reset stats
+ document.getElementById('stat-found').textContent = '-';
+ document.getElementById('stat-missing').textContent = '-';
+ document.getElementById('stat-downloaded').textContent = '0';
+
+ // Reset track table
+ const tbody = document.getElementById('download-tracks-tbody');
+ if (tbody) {
+ const rows = tbody.querySelectorAll('tr');
+ rows.forEach((row, index) => {
+ const matchElement = row.querySelector('.track-match-status');
+ const downloadElement = row.querySelector('.track-download-status');
+ const actionsElement = row.querySelector('.track-actions');
+
+ if (matchElement) {
+ matchElement.textContent = '🔍 Pending';
+ matchElement.className = 'track-match-status match-checking';
+ }
+ if (downloadElement) {
+ downloadElement.textContent = '-';
+ downloadElement.className = 'track-download-status';
+ }
+ if (actionsElement) {
+ actionsElement.textContent = '-';
+ }
+ });
+ }
+
+ // Reset state
+ activeAnalysisTaskId = null;
+ analysisResults = [];
+ missingTracks = [];
+}
+
+// ===============================
+// NEW ATOMIC CANCEL SYSTEM V2
+// ===============================
+
+async function cancelTrackDownloadV2(playlistId, trackIndex) {
+ /**
+ * NEW ATOMIC CANCEL SYSTEM V2
+ *
+ * - No optimistic UI updates
+ * - Single API call handles everything atomically
+ * - Backend is single source of truth for all state
+ * - No race conditions or dual state management
+ */
+ const process = activeDownloadProcesses[playlistId];
+ if (!process) {
+ console.warn(`❌ [Cancel V2] No process found for playlist: ${playlistId}`);
+ return;
+ }
+
+ const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${trackIndex}"]`);
+ if (!row) {
+ console.warn(`❌ [Cancel V2] No row found for track index: ${trackIndex}`);
+ return;
+ }
+
+ // Check if already in cancelling state
+ const statusEl = document.getElementById(`download-${playlistId}-${trackIndex}`);
+ const currentStatus = statusEl ? statusEl.textContent : '';
+
+ if (currentStatus.includes('Cancelling') || currentStatus.includes('Cancelled')) {
+ console.log(`⚠️ [Cancel V2] Task already being cancelled or cancelled: ${currentStatus}`);
+ return;
+ }
+
+ console.log(`🎯 [Cancel V2] Starting atomic cancel: playlist=${playlistId}, track=${trackIndex}`);
+
+ // V2 SYSTEM: Set temporary UI state - will be confirmed by server
+ row.dataset.uiState = 'cancelling';
+
+ // Show loading state only - no optimistic "cancelled" state
+ if (statusEl) {
+ statusEl.textContent = '🔄 Cancelling...';
+ }
+
+ // Disable the cancel button to prevent double-clicks
+ const actionsEl = document.getElementById(`actions-${playlistId}-${trackIndex}`);
+ if (actionsEl) {
+ actionsEl.innerHTML = 'Cancelling...';
+ }
+
+ try {
+ const response = await fetch('/api/downloads/cancel_task_v2', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ playlist_id: playlistId,
+ track_index: trackIndex
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ console.log(`✅ [Cancel V2] Successfully cancelled: ${data.task_info.track_name}`);
+ showToast(`Cancelled "${data.task_info.track_name}" and added to wishlist.`, 'success');
+
+ // Let the status polling system update the UI with server truth
+ // No manual UI updates - backend is authoritative
+
+ } else {
+ console.error(`❌ [Cancel V2] Cancel failed: ${data.error}`);
+ showToast(`Cancel failed: ${data.error}`, 'error');
+
+ // Reset UI to previous state on failure
+ row.dataset.uiState = 'normal'; // Reset UI state
+ if (statusEl) {
+ statusEl.textContent = '❌ Cancel Failed';
+ }
+ if (actionsEl) {
+ actionsEl.innerHTML = ``;
+ }
+ }
+
+ } catch (error) {
+ console.error(`❌ [Cancel V2] Network/API error:`, error);
+ showToast(`Cancel request failed: ${error.message}`, 'error');
+
+ // Reset UI on network error
+ row.dataset.uiState = 'normal'; // Reset UI state
+ if (statusEl) {
+ statusEl.textContent = '❌ Cancel Failed';
+ }
+ if (actionsEl) {
+ actionsEl.innerHTML = ``;
+ }
+ }
+}
+
+// ===============================
+// LEGACY CANCEL SYSTEM (OLD)
+// ===============================
+
+async function cancelTrackDownload(playlistId, trackIndex) {
+ const process = activeDownloadProcesses[playlistId];
+ if (!process) return;
+
+ const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${trackIndex}"]`);
+ if (!row) return;
+
+ // Prevent double cancellation
+ if (row.dataset.locallyCancelled === 'true') {
+ return; // Already cancelled locally
+ }
+
+ const taskId = row.dataset.taskId;
+ if (!taskId) {
+ showToast('Task not started yet, cannot cancel.', 'warning');
+ return;
+ }
+
+ // UI update for immediate feedback - mark as cancelled FIRST to prevent race conditions
+ row.dataset.locallyCancelled = 'true';
+ document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '🚫 Cancelling...';
+ document.getElementById(`actions-${playlistId}-${trackIndex}`).innerHTML = '-';
+
+ try {
+ const response = await fetch('/api/downloads/cancel_task', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ task_id: taskId })
+ });
+ const data = await response.json();
+ if (data.success) {
+ // Update final UI state after successful cancellation
+ document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '🚫 Cancelled';
+ showToast('Download cancelled and added to wishlist.', 'info');
+ } else {
+ throw new Error(data.error);
+ }
+ } catch (error) {
+ // Reset UI state if cancellation failed
+ row.dataset.locallyCancelled = 'false';
+ document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '❌ Cancel Failed';
+ showToast(`Could not cancel task: ${error.message}`, 'error');
+ }
+}
+
+// Find and REPLACE the old startPlaylistSyncFromModal function
+async function startPlaylistSync(playlistId) {
+ const startTime = Date.now();
+ console.log(`🚀 [${new Date().toTimeString().split(' ')[0]}] Starting sync for playlist: ${playlistId}`);
+ const playlist = spotifyPlaylists.find(p => p.id === playlistId);
+ if (!playlist) {
+ console.error(`❌ Could not find playlist data for ID: ${playlistId}`);
+ showToast('Could not find playlist data.', 'error');
+ return;
+ }
+ console.log(`✅ Found playlist: ${playlist.name} with ${playlist.track_count || 'unknown'} tracks`);
+
+ // Check if already syncing to prevent duplicate syncs
+ if (activeSyncPollers[playlistId]) {
+ showToast('Sync already in progress for this playlist', 'warning');
+ return;
+ }
+
+ // Update button state immediately for user feedback
+ const syncBtn = document.getElementById(`sync-btn-${playlistId}`);
+ if (syncBtn) {
+ syncBtn.disabled = true;
+ syncBtn.textContent = '⏳ Syncing...';
+ }
+
+ // Ensure we have the full track list before starting
+ let tracks = playlistTrackCache[playlistId];
+ if (!tracks) {
+ const trackFetchStart = Date.now();
+ console.log(`🔄 [${new Date().toTimeString().split(' ')[0]}] Cache miss - fetching tracks for playlist ${playlistId}`);
+ try {
+ // Use the right endpoint based on playlist source
+ const fetchUrl = playlistId.startsWith('deezer_arl_')
+ ? `/api/deezer/arl-playlist/${playlistId.replace('deezer_arl_', '')}`
+ : `/api/spotify/playlist/${playlistId}`;
+ const response = await fetch(fetchUrl);
+ const fullPlaylist = await response.json();
+ if (fullPlaylist.error) throw new Error(fullPlaylist.error);
+ tracks = fullPlaylist.tracks;
+ playlistTrackCache[playlistId] = tracks; // Cache it
+ const trackFetchTime = Date.now() - trackFetchStart;
+ console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Fetched and cached ${tracks.length} tracks (took ${trackFetchTime}ms)`);
+ } catch (error) {
+ console.error(`❌ Failed to fetch tracks:`, error);
+ showToast(`Failed to fetch tracks for sync: ${error.message}`, 'error');
+ return;
+ }
+ } else {
+ console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Using cached tracks: ${tracks.length} tracks`);
+ }
+
+ // DON'T close the modal - let it show live progress like the GUI
+
+ try {
+ const syncStartTime = Date.now();
+ console.log(`🔄 [${new Date().toTimeString().split(' ')[0]}] Making API call to /api/sync/start with ${tracks.length} tracks`);
+ const response = await fetch('/api/sync/start', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ playlist_id: playlist.id,
+ playlist_name: playlist.name,
+ tracks: tracks, // Send the full track list
+ image_url: playlist.image_url || ''
+ })
+ });
+
+ const syncRequestTime = Date.now() - syncStartTime;
+ console.log(`📡 [${new Date().toTimeString().split(' ')[0]}] API response status: ${response.status} (took ${syncRequestTime}ms)`);
+ const data = await response.json();
+ console.log(`📡 [${new Date().toTimeString().split(' ')[0]}] API response data:`, data);
+
+ if (!data.success) throw new Error(data.error);
+
+ const totalTime = Date.now() - startTime;
+ console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Sync started successfully for "${playlist.name}" (total time: ${totalTime}ms)`);
+ showToast(`Sync started for "${playlist.name}"`, 'success');
+
+ // Show initial sync state in modal if open
+ const modal = document.getElementById('playlist-details-modal') || document.getElementById('deezer-arl-playlist-details-modal');
+ if (modal && modal.style.display !== 'none') {
+ const statusDisplay = document.getElementById(`modal-sync-status-${playlist.id}`);
+ if (statusDisplay) {
+ statusDisplay.style.display = 'flex';
+ console.log(`📊 [${new Date().toTimeString().split(' ')[0]}] Showing modal sync status for ${playlist.id}`);
+ }
+ }
+
+ updateCardToSyncing(playlist.id, 0); // Initial state
+ startSyncPolling(playlist.id);
+
+ } catch (error) {
+ console.error(`❌ Failed to start sync:`, error);
+ showToast(`Failed to start sync: ${error.message}`, 'error');
+ updateCardToDefault(playlist.id);
+ }
+}
+
+// Add these new helper functions to script.js
+
+function startSyncPolling(playlistId) {
+ // Clear any existing poller for this playlist
+ if (activeSyncPollers[playlistId]) {
+ clearInterval(activeSyncPollers[playlistId]);
+ }
+
+ // Phase 5: Subscribe via WebSocket
+ if (socketConnected) {
+ socket.emit('sync:subscribe', { playlist_ids: [playlistId] });
+ _syncProgressCallbacks[playlistId] = (data) => {
+ if (data.status === 'syncing') {
+ const progress = data.progress;
+ updateCardToSyncing(playlistId, progress.progress, progress);
+ updateModalSyncProgress(playlistId, progress);
+ } else if (data.status === 'finished' || data.status === 'error' || data.status === 'cancelled') {
+ stopSyncPolling(playlistId);
+ updateCardToDefault(playlistId, data);
+ closePlaylistDetailsModal();
+ }
+ };
+ }
+
+ // Start a new poller that checks every 2 seconds
+ console.log(`🔄 Starting sync polling for playlist: ${playlistId}`);
+ activeSyncPollers[playlistId] = setInterval(async () => {
+ // Always poll — no dedicated WebSocket events for discovery progress
+ try {
+ console.log(`📊 Polling sync status for: ${playlistId}`);
+ const response = await fetch(`/api/sync/status/${playlistId}`);
+ const state = await response.json();
+ console.log(`📊 Poll response:`, state);
+
+ if (state.status === 'syncing') {
+ const progress = state.progress;
+ console.log(`📊 Sync progress:`, progress);
+ console.log(` 📊 Progress values: ${progress.progress}% | Total: ${progress.total_tracks} | Matched: ${progress.matched_tracks} | Failed: ${progress.failed_tracks}`);
+ console.log(` 📊 Current step: "${progress.current_step}" | Current track: "${progress.current_track}"`);
+
+ // Use the actual progress percentage from the sync service
+ updateCardToSyncing(playlistId, progress.progress, progress);
+ // Also update the modal if it's open
+ updateModalSyncProgress(playlistId, progress);
+ } else if (state.status === 'finished' || state.status === 'error' || state.status === 'cancelled') {
+ console.log(`🏁 Sync completed with status: ${state.status}`);
+ stopSyncPolling(playlistId);
+ updateCardToDefault(playlistId, state);
+ // Also update the modal if it's open
+ closePlaylistDetailsModal(); closeDeezerArlPlaylistDetailsModal(); // Close modal on completion/error
+ }
+ } catch (error) {
+ console.error(`❌ Error polling sync status for ${playlistId}:`, error);
+ stopSyncPolling(playlistId);
+ updateCardToDefault(playlistId, { status: 'error', error: 'Polling failed' });
+ }
+ }, 2000); // Poll every 2 seconds
+ updateRefreshButtonState();
+}
+
+function stopSyncPolling(playlistId) {
+ if (activeSyncPollers[playlistId]) {
+ clearInterval(activeSyncPollers[playlistId]);
+ delete activeSyncPollers[playlistId];
+ }
+ // Phase 5: Unsubscribe and clean up callback
+ if (_syncProgressCallbacks[playlistId]) {
+ if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
+ delete _syncProgressCallbacks[playlistId];
+ }
+ updateRefreshButtonState();
+}
+
+// Sync sidebar visibility helpers
+function showSyncSidebar() {
+ const sidebar = document.querySelector('.sync-sidebar');
+ const contentArea = document.querySelector('.sync-content-area');
+ if (sidebar && contentArea && window.innerWidth > 1300) {
+ sidebar.style.display = '';
+ contentArea.style.gridTemplateColumns = '2.5fr 0.75fr';
+ }
+}
+
+function hideSyncSidebar() {
+ const sidebar = document.querySelector('.sync-sidebar');
+ const contentArea = document.querySelector('.sync-content-area');
+ if (sidebar && contentArea) {
+ sidebar.style.display = 'none';
+ contentArea.style.gridTemplateColumns = '1fr';
+ }
+}
+
+// Sequential Sync Functions
+function startSequentialSync() {
+ // Initialize manager if needed
+ if (!sequentialSyncManager) {
+ sequentialSyncManager = new SequentialSyncManager();
+ }
+
+ // Check if already running - if so, cancel
+ if (sequentialSyncManager.isRunning) {
+ sequentialSyncManager.cancel();
+ return;
+ }
+
+ // Validate selection
+ if (selectedPlaylists.size === 0) {
+ showToast('No playlists selected for sync', 'error');
+ return;
+ }
+
+ // Get playlist order from DOM to maintain display order
+ const playlistCards = document.querySelectorAll('.playlist-card');
+ const orderedPlaylistIds = [];
+
+ playlistCards.forEach(card => {
+ const playlistId = card.dataset.playlistId;
+ if (selectedPlaylists.has(playlistId)) {
+ orderedPlaylistIds.push(playlistId);
+ }
+ });
+
+ console.log(`🚀 Starting sequential sync for ${orderedPlaylistIds.length} playlists`);
+
+ // Show sidebar for sync progress
+ showSyncSidebar();
+
+ // Start sequential sync
+ sequentialSyncManager.start(orderedPlaylistIds);
+
+ // Disable playlist selection during sync
+ disablePlaylistSelection(true);
+}
+
+function disablePlaylistSelection(disabled) {
+ const checkboxes = document.querySelectorAll('.playlist-checkbox');
+ checkboxes.forEach(checkbox => {
+ checkbox.disabled = disabled;
+ });
+}
+
+function hasActiveOperations() {
+ const hasActiveSyncs = Object.keys(activeSyncPollers).length > 0;
+ // Only check non-wishlist download processes for sync page refresh button
+ const hasActiveDownloads = Object.entries(activeDownloadProcesses)
+ .filter(([playlistId, process]) => playlistId !== 'wishlist') // Exclude wishlist
+ .some(([_, process]) => process.status === 'running');
+ const hasSequentialSync = sequentialSyncManager && sequentialSyncManager.isRunning;
+ return hasActiveSyncs || hasActiveDownloads || hasSequentialSync;
+}
+
+
+function updateRefreshButtonState() {
+ const refreshBtn = document.getElementById('spotify-refresh-btn');
+ if (!refreshBtn) return;
+
+ if (hasActiveOperations()) {
+ refreshBtn.disabled = true;
+ // Provide context-specific text
+ const hasActiveSyncs = Object.keys(activeSyncPollers).length > 0;
+ const hasSequentialSync = sequentialSyncManager && sequentialSyncManager.isRunning;
+ if (hasActiveSyncs || hasSequentialSync) {
+ refreshBtn.textContent = '🔄 Syncing...';
+ } else {
+ refreshBtn.textContent = '📥 Downloading...';
+ }
+ } else {
+ refreshBtn.disabled = false;
+ refreshBtn.textContent = '🔄 Refresh';
+ }
+}
+
+function updateCardToSyncing(playlistId, percent, progress = null) {
+ const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
+ if (!card) return;
+
+ const progressBar = card.querySelector('.sync-progress-indicator');
+ progressBar.style.display = 'block';
+
+ let progressText = 'Starting...';
+ let actualPercent = percent || 0;
+
+ if (progress) {
+ // Create detailed progress text like the GUI
+ const matched = progress.matched_tracks || 0;
+ const failed = progress.failed_tracks || 0;
+ const total = progress.total_tracks || 0;
+ const currentStep = progress.current_step || 'Processing';
+
+ // Calculate actual progress as processed/total, not just successful/total
+ if (total > 0) {
+ const processed = matched + failed;
+ actualPercent = Math.round((processed / total) * 100);
+ progressText = `${currentStep}: ${processed}/${total} (${matched} matched, ${failed} failed)`;
+ } else {
+ progressText = currentStep;
+ }
+
+ // If there's a current track being processed, show it
+ if (progress.current_track) {
+ progressText += ` - ${progress.current_track}`;
+ }
+ }
+
+ // Build live status counter HTML (same as modal)
+ let statusCounterHTML = '';
+ if (progress && progress.total_tracks > 0) {
+ const matched = progress.matched_tracks || 0;
+ const failed = progress.failed_tracks || 0;
+ const total = progress.total_tracks || 0;
+ const processed = matched + failed;
+ const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+ statusCounterHTML = `
+
+
+
+
+
+ Search Results
+${escapeHtml(trackName)} — ${escapeHtml(trackArtist)}
+
+ ${errorMsg ? `
+ ${escapeHtml(errorMsg)}
` : ''}
+ ${candidates.length} candidate${candidates.length !== 1 ? 's' : ''} found${candidates.length > 0 ? ' but none passed filters' : ''}
+
+
+
+
+ | # | File | Quality | Size | Duration | User | + |
|---|
+ ♪ ${total}
+ /
+ ✓ ${matched}
+ /
+ ✗ ${failed}
+ (${percentage}%)
+
+ `;
+ }
+
+ progressBar.innerHTML = `
+ ${statusCounterHTML}
+
+ ${progressText}
+ `;
+}
+
+function updateCardToDefault(playlistId, finalState = null) {
+ const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
+ if (!card) return;
+
+ const progressBar = card.querySelector('.sync-progress-indicator');
+ progressBar.style.display = 'none';
+ progressBar.innerHTML = '';
+
+ const statusEl = card.querySelector('.playlist-card-status');
+ if (finalState) {
+ if (finalState.status === 'finished') {
+ statusEl.textContent = `Synced: Just now`;
+ statusEl.className = 'playlist-card-status status-synced';
+
+ // Check if any tracks were added to wishlist
+ const wishlistCount = finalState.progress?.wishlist_added_count || finalState.result?.wishlist_added_count || 0;
+ const unmatchedTracks = finalState.progress?.unmatched_tracks || finalState.result?.unmatched_tracks || [];
+ const playlistName = card.querySelector('.playlist-card-name').textContent;
+
+ if (wishlistCount > 0 && unmatchedTracks.length > 0) {
+ const trackList = unmatchedTracks.map(t => `${t.artist} - ${t.name}`).join(', ');
+ showToast(`Sync complete for "${playlistName}". ${wishlistCount} not found in library: ${trackList}`, 'warning');
+ } else if (wishlistCount > 0) {
+ showToast(`Sync complete for "${playlistName}". Added ${wishlistCount} missing track${wishlistCount > 1 ? 's' : ''} to wishlist.`, 'success');
+ } else {
+ showToast(`Sync complete for "${playlistName}"`, 'success');
+ }
+ } else {
+ statusEl.textContent = `Sync Failed`;
+ statusEl.className = 'playlist-card-status status-needs-sync'; // Or a new error class
+ showToast(`Sync failed: ${finalState.error || 'Unknown error'}`, 'error');
+ }
+ }
+}
+
+// Update the modal's sync progress display (matches GUI functionality)
+function updateModalSyncProgress(playlistId, progress) {
+ const modal = document.getElementById('playlist-details-modal') || document.getElementById('deezer-arl-playlist-details-modal');
+ if (modal && modal.style.display !== 'none') {
+ console.log(`📊 Updating modal sync progress for ${playlistId}:`, progress);
+
+ // Show sync status display
+ const statusDisplay = document.getElementById(`modal-sync-status-${playlistId}`);
+ if (statusDisplay) {
+ statusDisplay.style.display = 'flex';
+
+ // Update counters (matching GUI exactly)
+ const totalEl = document.getElementById(`modal-total-${playlistId}`);
+ const matchedEl = document.getElementById(`modal-matched-${playlistId}`);
+ const failedEl = document.getElementById(`modal-failed-${playlistId}`);
+ const percentageEl = document.getElementById(`modal-percentage-${playlistId}`);
+
+ const total = progress.total_tracks || 0;
+ const matched = progress.matched_tracks || 0;
+ const failed = progress.failed_tracks || 0;
+
+ if (totalEl) totalEl.textContent = total;
+ if (matchedEl) matchedEl.textContent = matched;
+ if (failedEl) failedEl.textContent = failed;
+
+ // Calculate percentage like GUI
+ if (total > 0) {
+ const processed = matched + failed;
+ const percentage = Math.round((processed / total) * 100);
+ if (percentageEl) percentageEl.textContent = percentage;
+ }
+
+ console.log(`📊 Modal updated: ♪ ${total} / ✓ ${matched} / ✗ ${failed} (${Math.round((matched + failed) / total * 100)}%)`);
+ } else {
+ console.warn(`❌ Modal sync status display not found for ${playlistId}`);
+ }
+ } else {
+ console.log(`📊 Modal not open for ${playlistId}, skipping update`);
+ }
+}
+
+
+// Download tracking state management - matching GUI functionality
+let activeDownloads = {};
+let finishedDownloads = {};
+let downloadStatusInterval = null;
+let isDownloadPollingActive = false;
+
+async function loadDownloadsData() {
+ // Downloads page loads search results dynamically
+ console.log('Downloads page loaded');
+
+ // Event listeners are already set up in initializeSearch() - don't duplicate them
+ const clearButton = document.querySelector('.controls-panel__clear-btn');
+ const cancelAllButton = document.querySelector('.controls-panel__cancel-all-btn');
+
+ if (clearButton) {
+ clearButton.addEventListener('click', clearFinishedDownloads);
+ }
+ if (cancelAllButton) {
+ cancelAllButton.addEventListener('click', cancelAllDownloads);
+ }
+
+ // Start sophisticated polling system (1-second interval like GUI)
+ startDownloadPolling();
+
+ // Initialize tab management
+ initializeDownloadTabs();
+}
+
+function startDownloadPolling() {
+ if (isDownloadPollingActive) return;
+
+ console.log('Starting download status polling (1-second interval)');
+ isDownloadPollingActive = true;
+
+ // Initial call
+ updateDownloadQueues();
+
+ // Start 1-second polling (matching GUI's 1000ms timer)
+ downloadStatusInterval = setInterval(updateDownloadQueues, 1000);
+}
+
+function stopDownloadPolling() {
+ if (downloadStatusInterval) {
+ clearInterval(downloadStatusInterval);
+ downloadStatusInterval = null;
+ }
+ isDownloadPollingActive = false;
+ console.log('Stopped download status polling');
+}
+
+async function updateDownloadQueues() {
+ if (document.hidden) return; // Skip polling when tab is not visible
+ try {
+ const response = await fetch('/api/downloads/status');
+ const data = await response.json();
+
+ if (data.error) {
+ console.error("Error fetching download status:", data.error);
+ return;
+ }
+
+ const newActive = {};
+ const newFinished = {};
+
+ // Terminal states matching GUI logic
+ const terminalStates = ['Completed', 'Succeeded', 'Cancelled', 'Canceled', 'Failed', 'Errored'];
+
+ // Process transfers exactly like GUI
+ data.transfers.forEach(item => {
+ const isTerminal = terminalStates.some(state =>
+ item.state && item.state.includes(state)
+ );
+
+ if (isTerminal) {
+ newFinished[item.id] = item;
+ } else {
+ newActive[item.id] = item;
+ }
+ });
+
+ // Update global state
+ activeDownloads = newActive;
+ finishedDownloads = newFinished;
+
+ // Render both queues
+ renderQueue('active-queue', activeDownloads, true);
+ renderQueue('finished-queue', finishedDownloads, false);
+
+ // Update tab counts
+ updateTabCounts();
+
+ // Update stats in the side panel
+ updateDownloadStats();
+
+ } catch (error) {
+ // Only log errors occasionally to avoid console spam
+ if (Math.random() < 0.1) {
+ console.error("Failed to update download queues:", error);
+ }
+ }
+}
+
+function renderQueue(containerId, downloads, isActiveQueue) {
+ const container = document.getElementById(containerId);
+ if (!container) return;
+
+ const downloadIds = Object.keys(downloads);
+
+ if (downloadIds.length === 0) {
+ container.innerHTML = ``;
+ return;
+ }
+
+ let html = '';
+ for (const id of downloadIds) {
+ const item = downloads[id];
+
+ // Extract display title from filename
+ let title = 'Unknown File';
+ if (item.filename) {
+ // YouTube/Tidal filenames are encoded as "id||title"
+ if ((item.username === 'youtube' || item.username === 'tidal' || item.username === 'qobuz' || item.username === 'hifi') && item.filename.includes('||')) {
+ const parts = item.filename.split('||');
+ title = parts[1] || parts[0]; // Use title part, fallback to id
+ } else {
+ // Regular Soulseek filename - extract last part of path
+ title = item.filename.split(/[\\/]/).pop();
+ }
+ }
+
+ const progress = item.percentComplete || 0;
+ const bytesTransferred = item.bytesTransferred || 0;
+ const totalBytes = item.size || 0;
+ const speed = item.averageSpeed || 0;
+
+ // Format file size
+ const formatSize = (bytes) => {
+ if (!bytes) return 'Unknown size';
+ const units = ['B', 'KB', 'MB', 'GB'];
+ let size = bytes;
+ let unitIndex = 0;
+ while (size >= 1024 && unitIndex < units.length - 1) {
+ size /= 1024;
+ unitIndex++;
+ }
+ return `${size.toFixed(1)} ${units[unitIndex]}`;
+ };
+
+ // Format speed
+ const formatSpeed = (bytesPerSecond) => {
+ if (!bytesPerSecond || bytesPerSecond <= 0) return '';
+ return `${formatSize(bytesPerSecond)}/s`;
+ };
+
+ let actionButtonHTML = '';
+ if (isActiveQueue) {
+ // Active items get progress bar and cancel button
+ actionButtonHTML = `
+
+
+
+
+ `;
+ } else {
+ // Finished items get status and open button
+ let statusClass = '';
+ if (item.state.includes('Cancelled')) statusClass = 'status--cancelled';
+ else if (item.state.includes('Failed') || item.state.includes('Errored')) statusClass = 'status--failed';
+ else if (item.state.includes('Completed') || item.state.includes('Succeeded')) statusClass = 'status--completed';
+
+ actionButtonHTML = `
+
+ ${item.state} - ${progress.toFixed(1)}%
+ ${speed > 0 ? `• ${formatSpeed(speed)}` : ''}
+ ${totalBytes > 0 ? `• ${formatSize(bytesTransferred)} / ${formatSize(totalBytes)}` : ''}
+
+
+ ${item.state}
+
+
+ `;
+ }
+
+ // Enrich with metadata from backend context (artist, album, artwork)
+ const meta = item._meta || {};
+ const sourceLabels = { youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', lidarr: 'Lidarr' };
+ const sourceBadge = sourceLabels[item.username] || item.username;
+
+ html += `
+
+
+ `;
+ }
+ container.innerHTML = html;
+}
+
+function updateTabCounts() {
+ const activeCount = Object.keys(activeDownloads).length;
+ const finishedCount = Object.keys(finishedDownloads).length;
+
+ const activeTabBtn = document.querySelector('.tab-btn[data-tab="active-queue"]');
+ const finishedTabBtn = document.querySelector('.tab-btn[data-tab="finished-queue"]');
+
+ if (activeTabBtn) activeTabBtn.textContent = `Download Queue (${activeCount})`;
+ if (finishedTabBtn) finishedTabBtn.textContent = `Finished (${finishedCount})`;
+}
+
+function updateDownloadStats() {
+ const activeCount = Object.keys(activeDownloads).length;
+ const finishedCount = Object.keys(finishedDownloads).length;
+
+ const activeLabel = document.getElementById('active-downloads-label');
+ const finishedLabel = document.getElementById('finished-downloads-label');
+
+ if (activeLabel) activeLabel.textContent = `• Active Downloads: ${activeCount}`;
+ if (finishedLabel) finishedLabel.textContent = `• Finished Downloads: ${finishedCount}`;
+}
+
+function initializeDownloadTabs() {
+ const tabButtons = document.querySelectorAll('.tab-btn');
+ tabButtons.forEach(btn => {
+ btn.addEventListener('click', () => switchDownloadTab(btn));
+ });
+}
+
+function switchDownloadTab(button) {
+ const targetTabId = button.getAttribute('data-tab');
+
+ // Update buttons
+ document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+ button.classList.add('active');
+
+ // Update content panes
+ document.querySelectorAll('.download-queue').forEach(queue => queue.classList.remove('active'));
+ const targetQueue = document.getElementById(targetTabId);
+ if (targetQueue) targetQueue.classList.add('active');
+}
+
+async function cancelDownloadItem(downloadId, username) {
+ try {
+ const response = await fetch('/api/downloads/cancel', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ download_id: downloadId, username: username })
+ });
+ const result = await response.json();
+
+ if (result.success) {
+ showToast('Download cancelled', 'success');
+ } else {
+ showToast(`Failed to cancel: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Error cancelling download:', error);
+ showToast('Error sending cancel request', 'error');
+ }
+}
+
+async function clearFinishedDownloads() {
+ const finishedCount = Object.keys(finishedDownloads).length;
+ if (finishedCount === 0) {
+ showToast('No finished downloads to clear', 'error');
+ return;
+ }
+
+ try {
+ const response = await fetch('/api/downloads/clear-finished', {
+ method: 'POST'
+ });
+ const result = await response.json();
+
+ if (result.success) {
+ showToast('Finished downloads cleared', 'success');
+ } else {
+ showToast(`Failed to clear: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Error clearing finished downloads:', error);
+ showToast('Error sending clear request', 'error');
+ }
+}
+
+async function cancelAllDownloads() {
+ if (!await showConfirmDialog({ title: 'Cancel All Downloads', message: 'Cancel ALL active downloads and clear the transfer list? This cannot be undone.', confirmText: 'Cancel All', destructive: true })) {
+ return;
+ }
+
+ try {
+ const response = await fetch('/api/downloads/cancel-all', {
+ method: 'POST'
+ });
+ const result = await response.json();
+
+ if (result.success) {
+ showToast('All downloads cancelled and cleared', 'success');
+ } else {
+ showToast(`Failed to cancel: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Error cancelling all downloads:', error);
+ showToast('Error cancelling downloads', 'error');
+ }
+}
+
+// REPLACE the old performDownloadsSearch function with this new one.
+async function performDownloadsSearch() {
+ const query = document.getElementById('downloads-search-input').value.trim();
+ if (!query) {
+ showToast('Please enter a search term', 'error');
+ return;
+ }
+
+ // --- UI Element References ---
+ const searchInput = document.getElementById('downloads-search-input');
+ const searchButton = document.getElementById('downloads-search-btn');
+ const cancelButton = document.getElementById('downloads-cancel-btn');
+ const statusText = document.getElementById('search-status-text');
+ const spinner = document.querySelector('.spinner-animation');
+ const dots = document.querySelector('.dots-animation');
+
+ // --- Start a new AbortController for this search ---
+ searchAbortController = new AbortController();
+
+ try {
+ // --- 1. Update UI to "Searching" State ---
+ searchInput.disabled = true;
+ searchButton.disabled = true;
+ cancelButton.classList.remove('hidden');
+ spinner.classList.remove('hidden');
+ dots.classList.remove('hidden');
+ statusText.textContent = `Searching for '${query}'...`;
+ displayDownloadsResults([]); // Clear previous results
+
+ // --- 2. Perform the Fetch Request ---
+ const response = await fetch('/api/search', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ query }),
+ signal: searchAbortController.signal // Link fetch to the AbortController
+ });
+
+ const data = await response.json();
+
+ if (data.error) {
+ throw new Error(data.error);
+ }
+
+ const results = data.results || [];
+ allSearchResults = results;
+ resetFilters();
+ applyFiltersAndSort();
+
+ // --- 3. Update UI with Success State ---
+ if (results.length === 0) {
+ statusText.textContent = `No results found for '${query}'`;
+ showToast('No results found', 'error');
+ } else {
+ document.getElementById('filters-container').classList.remove('hidden');
+
+ // Count albums and singles like the GUI app
+ let totalAlbums = 0;
+ let totalTracks = 0;
+
+ results.forEach(result => {
+ if (result.result_type === 'album') {
+ totalAlbums++;
+ } else {
+ totalTracks++;
+ }
+ });
+
+ statusText.textContent = `✨ Found ${results.length} results • ${totalAlbums} albums, ${totalTracks} singles`;
+ showToast(`Found ${results.length} results`, 'success');
+ }
+
+ } catch (error) {
+ // --- 4. Handle Errors, Including Cancellation ---
+ if (error.name === 'AbortError') {
+ // This specific error is thrown when the user clicks "Cancel"
+ statusText.textContent = 'Search was cancelled.';
+ showToast('Search cancelled', 'info');
+ displayDownloadsResults([]); // Clear any partial results
+ } else {
+ console.error('Search failed:', error);
+ statusText.textContent = `Search failed: ${error.message}`;
+ showToast('Search failed', 'error');
+ }
+ } finally {
+ // --- 5. Clean Up UI Regardless of Outcome ---
+ searchInput.disabled = false;
+ searchButton.disabled = false;
+ cancelButton.classList.add('hidden');
+ spinner.classList.add('hidden');
+ dots.classList.add('hidden');
+ searchAbortController = null; // Clear the controller
+ }
+}
+
+function displayDownloadsResults(results) {
+ const resultsArea = document.getElementById('search-results-area');
+ if (!resultsArea) return;
+
+ if (!results.length) {
+ resultsArea.innerHTML = '
+ ${meta.artwork_url
+ ? `
`
+ : '
+ ♫
'}
+
+
+ ${title}
+ ${meta.artist || meta.album ? `
+
+ ` : ''}
+
+ ${sourceBadge}
+ ${meta.quality ? `${escapeHtml(meta.quality)}` : ''}
+
+
+ ${actionButtonHTML}
+
+ No search results found.
Disc 1
`;
+ }
+ let discNum = 1;
+ result.tracks.forEach((track, trackIndex) => {
+ if (discBreaks.has(trackIndex)) {
+ discNum++;
+ trackListHtml += `Disc ${discNum}
`;
+ }
+ const trackSize = track.size ? `${(track.size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
+ const trackBitrate = track.bitrate ? `${track.bitrate}kbps` : '';
+ trackListHtml += `
+
+
+ `;
+ });
+ }
+
+ html += `
+
+
+ ${escapeHtml(track.title || `Track ${trackIndex + 1}`)}
+
+ ${track.track_number ? `${track.track_number}. ` : ''}${escapeHtml(track.artist || result.artist || 'Unknown Artist')} • ${trackSize} • ${escapeHtml(track.quality || 'Unknown')} ${trackBitrate}
+
+
+
+
+
+
+
+
+ `;
+ } else {
+ const sizeText = result.size ? `${(result.size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
+ const bitrateText = result.bitrate ? `${result.bitrate}kbps` : '';
+ html += `
+
+
+
+
+
+
+
+ ${escapeHtml(result.album_title || result.title || 'Unknown Album')}
+ by ${escapeHtml(result.artist || 'Unknown Artist')}
+
+ ${trackCount} tracks • ${totalSize} • ${escapeHtml(result.quality || 'Mixed')}
+
+ Shared by ${escapeHtml(result.username || 'Unknown')}
+
+
+
+
+
+
+
+ `;
+ }
+ });
+
+ resultsArea.innerHTML = html;
+ // Store results globally for download functions
+ window.currentSearchResults = results;
+}
+
+async function downloadTrack(index) {
+ const results = window.currentSearchResults;
+ if (!results || !results[index]) return;
+
+ const track = results[index];
+
+ try {
+ const response = await fetch('/api/download', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(track)
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast(`Download started: ${track.title}`, 'success');
+ } else {
+ showToast(`Download failed: ${data.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Download error:', error);
+ showToast('Failed to start download', 'error');
+ }
+}
+
+async function downloadAlbum(index) {
+ const results = window.currentSearchResults;
+ if (!results || !results[index]) return;
+
+ const album = results[index];
+
+ try {
+ const response = await fetch('/api/download', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(album)
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast(data.message, 'success');
+ } else {
+ showToast(`Album download failed: ${data.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Album download error:', error);
+ showToast('Failed to start album download', 'error');
+ }
+}
+
+// Matched download functions
+function matchedDownloadTrack(index) {
+ const results = window.currentSearchResults;
+ if (!results || !results[index]) return;
+
+ const track = results[index];
+ console.log('🎯 Starting matched download for single track:', track);
+
+ // Open matching modal for single track
+ openMatchingModal(track, false, null);
+}
+
+function matchedDownloadAlbum(index) {
+ const results = window.currentSearchResults;
+ if (!results || !results[index]) return;
+
+ const album = results[index];
+ console.log('🎯 Starting matched download for album:', album);
+
+ // Open matching modal for album download
+ openMatchingModal(album, true, album);
+}
+
+function matchedDownloadAlbumTrack(albumIndex, trackIndex) {
+ const results = window.currentSearchResults;
+ if (!results || !results[albumIndex]) return;
+
+ const album = results[albumIndex];
+ if (!album.tracks || !album.tracks[trackIndex]) return;
+
+ const track = album.tracks[trackIndex];
+
+ // Ensure track has necessary properties from parent album
+ track.username = album.username;
+ track.artist = track.artist || album.artist;
+ track.album = album.album_title || album.title;
+
+ console.log('🎯 Starting matched download for album track:', track);
+
+ // Open matching modal for single track (from album context)
+ openMatchingModal(track, false, null);
+}
+
+function toggleAlbumExpansion(albumIndex) {
+ const albumCard = document.querySelector(`[data-album-index="${albumIndex}"]`);
+ if (!albumCard) return;
+
+ const trackList = albumCard.querySelector('.album-track-list');
+ const indicator = albumCard.querySelector('.album-expand-indicator');
+
+ if (trackList.style.display === 'none' || !trackList.style.display) {
+ // Expand
+ trackList.style.display = 'block';
+ indicator.textContent = '▼';
+ albumCard.classList.add('expanded');
+ } else {
+ // Collapse
+ trackList.style.display = 'none';
+ indicator.textContent = '▶';
+ albumCard.classList.remove('expanded');
+ }
+}
+
+async function downloadAlbumTrack(albumIndex, trackIndex) {
+ const results = window.currentSearchResults;
+ if (!results || !results[albumIndex] || !results[albumIndex].tracks || !results[albumIndex].tracks[trackIndex]) return;
+
+ const track = results[albumIndex].tracks[trackIndex];
+
+ try {
+ const response = await fetch('/api/download', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ ...track,
+ result_type: 'track'
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast(`Download started: ${track.title}`, 'success');
+ } else {
+ showToast(`Track download failed: ${data.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Track download error:', error);
+ showToast('Failed to start track download', 'error');
+ }
+}
+
+// ===============================
+// STREAMING WRAPPER FUNCTIONS
+// ===============================
+
+async function streamTrack(index) {
+ // Stream a single track from search results
+ try {
+ console.log(`🎵 streamTrack called with index: ${index}`);
+ console.log(`🎵 window.currentSearchResults:`, window.currentSearchResults);
+
+ if (!window.currentSearchResults || !window.currentSearchResults[index]) {
+ console.error(`❌ No search results or invalid index. Results length: ${window.currentSearchResults ? window.currentSearchResults.length : 'undefined'}`);
+ showToast('Track not found', 'error');
+ return;
+ }
+
+ const result = window.currentSearchResults[index];
+ console.log(`🎵 Streaming track:`, result);
+
+ // Check for unsupported formats before streaming (streaming sources use encoded filenames, skip check)
+ const isStreamingSource = result.username === 'youtube' || result.username === 'tidal' || result.username === 'qobuz' || result.username === 'hifi';
+ if (!isStreamingSource && result.filename) {
+ const format = getFileExtension(result.filename);
+ console.log(`🎵 [STREAM CHECK] File: ${result.filename}, Extension: ${format}`);
+
+ const isSupported = isAudioFormatSupported(result.filename);
+ console.log(`🎵 [STREAM CHECK] Format ${format} supported: ${isSupported}`);
+
+ if (!isSupported) {
+ showToast(`Sorry, ${format.toUpperCase()} format is not supported in your browser. Try downloading instead.`, 'error');
+ return;
+ }
+ }
+
+ await startStream(result);
+
+ } catch (error) {
+ console.error('Track streaming error:', error);
+ showToast('Failed to start track stream', 'error');
+ }
+}
+
+
+async function streamAlbumTrack(albumIndex, trackIndex) {
+ // Stream a specific track from an album
+ try {
+ console.log(`🎵 streamAlbumTrack called with albumIndex: ${albumIndex}, trackIndex: ${trackIndex}`);
+ console.log(`🎵 window.currentSearchResults:`, window.currentSearchResults);
+
+ if (!window.currentSearchResults || !window.currentSearchResults[albumIndex]) {
+ console.error(`❌ No search results or invalid album index. Results length: ${window.currentSearchResults ? window.currentSearchResults.length : 'undefined'}`);
+ showToast('Album not found', 'error');
+ return;
+ }
+
+ const album = window.currentSearchResults[albumIndex];
+ console.log(`🎵 Album data:`, album);
+
+ // Surgical Fix: Handle YouTube/Tidal results which are "flat" (no tracks array)
+ if (album.username === 'youtube' || album.username === 'tidal' || album.username === 'qobuz' || album.username === 'hifi') {
+ // For YouTube/Tidal results, the "album" is actually the track itself
+ const track = album;
+ const trackData = {
+ ...track,
+ username: track.username,
+ filename: track.filename,
+ artist: track.artist,
+ album: track.title, // Use title as album name for player
+ title: track.title
+ };
+ console.log(`🎵 Streaming YouTube track directly:`, trackData);
+ await startStream(trackData);
+ return;
+ }
+
+ if (!album.tracks || !album.tracks[trackIndex]) {
+ console.error(`❌ No tracks in album or invalid track index. Tracks length: ${album.tracks ? album.tracks.length : 'undefined'}`);
+ showToast('Track not found in album', 'error');
+ return;
+ }
+
+ const track = album.tracks[trackIndex];
+ console.log(`🎵 Streaming album track:`, track);
+
+ // Ensure album tracks have required fields
+ const trackData = {
+ ...track,
+ username: track.username || album.username,
+ filename: track.filename || track.path,
+ artist: track.artist || album.artist,
+ album: track.album || album.title || album.album
+ };
+
+ console.log(`🎵 Enhanced track data:`, trackData);
+
+ // Check for unsupported formats before streaming (streaming sources use encoded filenames, skip check)
+ const isStreamingSource2 = trackData.username === 'youtube' || trackData.username === 'tidal' || trackData.username === 'qobuz' || trackData.username === 'hifi';
+ if (!isStreamingSource2 && trackData.filename && !isAudioFormatSupported(trackData.filename)) {
+ const format = getFileExtension(trackData.filename);
+ showToast(`Sorry, ${format.toUpperCase()} format is not supported in web browsers. Try downloading instead.`, 'error');
+ return;
+ }
+
+ await startStream(trackData);
+
+ } catch (error) {
+ console.error('Album track streaming error:', error);
+ showToast('Failed to start track stream', 'error');
+ }
+}
+
+async function loadArtistsData() {
+ try {
+ const response = await fetch(API.artists);
+ const data = await response.json();
+
+ const artistsGrid = document.getElementById('artists-grid');
+ if (data.artists && data.artists.length) {
+ artistsGrid.innerHTML = data.artists.map(artist => `
+
+
+ ${escapeHtml(result.title || 'Unknown Title')}
+ by ${escapeHtml(result.artist || 'Unknown Artist')}
+
+ ${sizeText} • ${escapeHtml(result.quality || 'Unknown')} ${bitrateText}
+
+ Shared by ${escapeHtml(result.username || 'Unknown')}
+
+
+
+
+
+
+
+ `).join('');
+ } else {
+ artistsGrid.innerHTML = '
+ ${artist.image ?
+ `
` :
+ '
+ 🎵
'
+ }
+
+
+ ${escapeHtml(artist.name)}
+ ${artist.album_count || 0} albums
+ No artists found
';
+ }
+ } catch (error) {
+ console.error('Error loading artists data:', error);
+ document.getElementById('artists-grid').innerHTML = 'Error loading artists
';
+ }
+}
+
+// ===============================
+// UTILITY FUNCTIONS
+// ===============================
+
+function showLoadingOverlay(message = 'Loading...') {
+ const overlay = document.getElementById('loading-overlay');
+ const messageElement = overlay.querySelector('.loading-message');
+ messageElement.textContent = message;
+ overlay.classList.remove('hidden');
+}
+
+function hideLoadingOverlay() {
+ document.getElementById('loading-overlay').classList.add('hidden');
+}
+
+// ==================================================================================
+// NOTIFICATION SYSTEM — Compact toasts + bell button + notification history panel
+// ==================================================================================
+
+const _notifState = {
+ history: [],
+ unreadCount: 0,
+ panelOpen: false,
+ currentToast: null,
+ toastTimer: null,
+ maxHistory: 50,
+};
+const _recentToastKeys = new Map();
+
+const _notifIcons = { success: '✓', error: '✕', warning: '⚠', info: 'ℹ' };
+
+function showToast(message, type = 'success', helpSection = null) {
+ const toastKey = `${type}:${message}`;
+ const now = Date.now();
+
+ // Deduplication — suppress identical toasts within 5 seconds
+ if (_recentToastKeys.has(toastKey) && now - _recentToastKeys.get(toastKey) < 5000) return;
+ _recentToastKeys.set(toastKey, now);
+ for (const [k, t] of _recentToastKeys) { if (now - t > 10000) _recentToastKeys.delete(k); }
+
+ // Add to notification history
+ const entry = { id: now + Math.random(), message, type, helpSection, timestamp: now, read: false };
+ _notifState.history.unshift(entry);
+ if (_notifState.history.length > _notifState.maxHistory) _notifState.history.pop();
+ _notifState.unreadCount++;
+ _updateNotifBadge();
+
+ // Show compact toast — dismiss current if showing
+ const container = document.getElementById('toast-container');
+ if (!container) return;
+
+ if (_notifState.currentToast && container.contains(_notifState.currentToast)) {
+ _notifState.currentToast.classList.add('toast-exit');
+ const old = _notifState.currentToast;
+ setTimeout(() => { if (container.contains(old)) container.removeChild(old); }, 200);
+ }
+ if (_notifState.toastTimer) clearTimeout(_notifState.toastTimer);
+
+ const icon = _notifIcons[type] || 'ℹ';
+ const toast = document.createElement('div');
+ toast.className = `toast-compact toast-${type}`;
+ toast.innerHTML = `${_escToast(message)}`;
+ if (helpSection) {
+ const link = document.createElement('span');
+ link.className = 'toast-compact-link';
+ link.textContent = 'Learn more →';
+ link.onclick = e => { e.stopPropagation(); if (typeof navigateToDocsSection === 'function') navigateToDocsSection(helpSection); };
+ toast.appendChild(link);
+ }
+ toast.onclick = () => { toast.classList.add('toast-exit'); setTimeout(() => { if (container.contains(toast)) container.removeChild(toast); }, 200); };
+
+ container.appendChild(toast);
+ requestAnimationFrame(() => toast.classList.add('toast-enter'));
+ _notifState.currentToast = toast;
+
+ _notifState.toastTimer = setTimeout(() => {
+ if (container.contains(toast)) {
+ toast.classList.add('toast-exit');
+ setTimeout(() => { if (container.contains(toast)) container.removeChild(toast); }, 300);
+ }
+ _notifState.currentToast = null;
+ }, helpSection ? 5000 : 3500);
+}
+
+function _escToast(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+function _escAttr(s) { return _escToast(s).replace(/'/g, "\\'").replace(/\n/g, ' ').replace(/\r/g, ''); }
+
+function _updateNotifBadge() {
+ const badge = document.getElementById('notif-bell-badge');
+ if (badge) {
+ badge.textContent = _notifState.unreadCount > 99 ? '99+' : _notifState.unreadCount;
+ badge.style.display = _notifState.unreadCount > 0 ? '' : 'none';
+ }
+}
+
+function toggleNotifPanel() {
+ if (_notifState.panelOpen) {
+ _closeNotifPanel();
+ } else {
+ _openNotifPanel();
+ }
+}
+
+function _openNotifPanel() {
+ _closeNotifPanel(); // Remove existing
+
+ _notifState.panelOpen = true;
+ _notifState.unreadCount = 0;
+ _notifState.history.forEach(e => e.read = true);
+ _updateNotifBadge();
+
+ const btn = document.getElementById('notif-bell-btn');
+ const panel = document.createElement('div');
+ panel.id = 'notif-panel';
+ panel.className = 'notif-panel';
+
+ const entries = _notifState.history;
+
+ panel.innerHTML = `
+
+ Notifications
+ ${entries.length > 0 ? '' : ''}
+
+
+ ${entries.length === 0 ? '
+ `;
+
+ document.body.appendChild(panel);
+
+ // Position above the bell button
+ if (btn) {
+ const rect = btn.getBoundingClientRect();
+ panel.style.right = (window.innerWidth - rect.right) + 'px';
+ panel.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
+ }
+
+ requestAnimationFrame(() => panel.classList.add('visible'));
+
+ // Close on outside click
+ setTimeout(() => {
+ const closeHandler = e => {
+ if (!panel.contains(e.target) && e.target.id !== 'notif-bell-btn') {
+ _closeNotifPanel();
+ document.removeEventListener('click', closeHandler);
+ }
+ };
+ document.addEventListener('click', closeHandler);
+ }, 100);
+}
+
+function _closeNotifPanel() {
+ _notifState.panelOpen = false;
+ const panel = document.getElementById('notif-panel');
+ if (panel) {
+ panel.classList.remove('visible');
+ setTimeout(() => panel.remove(), 200);
+ }
+}
+
+function _clearNotifHistory() {
+ _notifState.history = [];
+ _notifState.unreadCount = 0;
+ _updateNotifBadge();
+ _closeNotifPanel();
+}
+
+function _notifTimeAgo(ts) {
+ const s = Math.floor((Date.now() - ts) / 1000);
+ if (s < 5) return 'just now';
+ if (s < 60) return `${s}s ago`;
+ const m = Math.floor(s / 60);
+ if (m < 60) return `${m}m ago`;
+ const h = Math.floor(m / 60);
+ if (h < 24) return `${h}h ago`;
+ return `${Math.floor(h / 24)}d ago`;
+}
+
+// ==================================================================================
+// Music video download handler — defined at top level so both enhanced and global search can use it
+function _downloadMusicVideo(cardEl, video) {
+ if (cardEl.classList.contains('downloading') || cardEl.classList.contains('completed')) return;
+ cardEl.classList.add('downloading');
+ cardEl.onclick = null;
+
+ const playBtn = cardEl.querySelector('.enh-video-play');
+ const progressRing = cardEl.querySelector('.enh-video-progress-ring');
+ const progressBar = cardEl.querySelector('.enh-video-progress-bar');
+ const doneIcon = cardEl.querySelector('.enh-video-done');
+ const errorIcon = cardEl.querySelector('.enh-video-error');
+
+ if (playBtn) playBtn.classList.add('hidden');
+ if (progressRing) progressRing.classList.remove('hidden');
+
+ fetch('/api/music-video/download', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ video_id: video.video_id, url: video.url, title: video.title, channel: video.channel }),
+ }).then(res => {
+ if (!res.ok) throw new Error('Download request failed');
+ const circumference = 97.4;
+ const pollInterval = setInterval(async () => {
+ try {
+ const statusRes = await fetch(`/api/music-video/status/${video.video_id}`);
+ const status = await statusRes.json();
+ if (progressBar && status.progress > 0) {
+ progressBar.style.strokeDashoffset = circumference - (status.progress / 100) * circumference;
+ }
+ if (status.status === 'completed') {
+ clearInterval(pollInterval);
+ cardEl.classList.remove('downloading');
+ cardEl.classList.add('completed');
+ if (progressRing) progressRing.classList.add('hidden');
+ if (doneIcon) doneIcon.classList.remove('hidden');
+ } else if (status.status === 'error') {
+ clearInterval(pollInterval);
+ cardEl.classList.remove('downloading');
+ cardEl.classList.add('errored');
+ if (progressRing) progressRing.classList.add('hidden');
+ if (errorIcon) errorIcon.classList.remove('hidden');
+ cardEl.onclick = () => _downloadMusicVideo(cardEl, video);
+ }
+ } catch (e) { }
+ }, 500);
+ }).catch(e => {
+ cardEl.classList.remove('downloading');
+ if (progressRing) progressRing.classList.add('hidden');
+ if (playBtn) playBtn.classList.remove('hidden');
+ if (errorIcon) errorIcon.classList.remove('hidden');
+ cardEl.onclick = () => _downloadMusicVideo(cardEl, video);
+ });
+}
+
+// Global search video click — decodes base64 video data and delegates to _downloadMusicVideo
+function _gsClickVideo(cardEl) {
+ try {
+ const encoded = cardEl.dataset.video;
+ const video = JSON.parse(decodeURIComponent(escape(atob(encoded))));
+ _downloadMusicVideo(cardEl, video);
+ } catch (e) {
+ console.error('Failed to parse video data:', e);
+ }
+}
+
+// GLOBAL SEARCH BAR — Spotlight-style search from anywhere
+// ==================================================================================
+
+const _gsState = {
+ active: false,
+ query: '',
+ data: null,
+ sources: {},
+ activeSource: null,
+ abortCtrl: null,
+ altAbortCtrl: null,
+ debounceTimer: null,
+};
+
+(function initGlobalSearch() {
+ // Defer init until DOM is ready
+ const _doInit = () => {
+ const bar = document.getElementById('gsearch-bar');
+ const input = document.getElementById('gsearch-input');
+ const results = document.getElementById('gsearch-results');
+ if (!input || !bar) return;
+
+ bar.addEventListener('click', () => input.focus());
+
+ input.addEventListener('focus', () => {
+ bar.classList.add('active');
+ _gsState.active = true;
+ const shortcut = document.getElementById('gsearch-shortcut');
+ if (shortcut) shortcut.style.display = 'none';
+ if (_gsState.data && _gsState.query) _gsShowResults();
+ });
+
+ // No blur handler — closing is handled by click-outside and Escape only
+ // This prevents tab switching and result clicks from closing the panel
+
+ const clearBtn = document.getElementById('gsearch-clear');
+
+ input.addEventListener('input', () => {
+ const q = input.value.trim();
+ _gsState.query = q;
+ if (clearBtn) clearBtn.style.display = q.length > 0 ? '' : 'none';
+ if (_gsState.debounceTimer) clearTimeout(_gsState.debounceTimer);
+ if (q.length < 2) { _gsHideResults(); return; }
+ _gsState.debounceTimer = setTimeout(() => _gsPerformSearch(q), 300);
+ });
+
+ if (clearBtn) {
+ clearBtn.addEventListener('click', e => {
+ e.stopPropagation();
+ input.value = '';
+ _gsState.query = '';
+ _gsState.data = null;
+ clearBtn.style.display = 'none';
+ _gsHideResults();
+ input.focus();
+ });
+ }
+
+ input.addEventListener('keydown', e => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ if (_gsState.debounceTimer) clearTimeout(_gsState.debounceTimer);
+ const q = input.value.trim();
+ if (q.length >= 2) _gsPerformSearch(q);
+ } else if (e.key === 'Escape') {
+ _gsDeactivate();
+ input.blur();
+ }
+ });
+
+ // Keyboard shortcuts
+ document.addEventListener('keydown', e => {
+ if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); input.focus(); return; }
+ if (e.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)) { e.preventDefault(); input.focus(); }
+ });
+
+ // Click outside to close — uses delayed check because tab clicks replace DOM
+ document.addEventListener('click', e => {
+ if (!_gsState.active) return;
+ // Skip if click was recent interaction with search system (within 100ms of a switch)
+ if (_gsState._lastInteraction && Date.now() - _gsState._lastInteraction < 200) return;
+ setTimeout(() => {
+ if (!_gsState.active) return;
+ const freshBar = document.getElementById('gsearch-bar');
+ const freshResults = document.getElementById('gsearch-results');
+ const target = e.target;
+ if (freshBar?.contains(target) || freshResults?.contains(target)) return;
+ _gsDeactivate();
+ }, 100);
+ });
+
+ // Collapse on sidebar navigation + hide on downloads page
+ document.addEventListener('click', e => {
+ if (e.target.closest('.sidebar-link, .nav-item, .back-btn')) {
+ if (_gsState.active) _gsDeactivate();
+ // Check after navigation which page we're on
+ setTimeout(_gsUpdateVisibility, 200);
+ }
+ });
+ };
+ if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => { _doInit(); _gsUpdateVisibility(); });
+ else { _doInit(); setTimeout(_gsUpdateVisibility, 500); }
+})();
+
+function _gsUpdateVisibility() {
+ const bar = document.getElementById('gsearch-bar');
+ if (!bar) return;
+ // Hide on downloads page where enhanced search already exists
+ const onDownloads = typeof currentPage !== 'undefined' && currentPage === 'downloads';
+ bar.style.display = onDownloads ? 'none' : '';
+ if (onDownloads && _gsState.active) _gsDeactivate();
+}
+
+function _gsDeactivate() {
+ const bar = document.getElementById('gsearch-bar');
+ const shortcut = document.getElementById('gsearch-shortcut');
+ if (bar) bar.classList.remove('active');
+ if (shortcut) shortcut.style.display = '';
+ _gsState.active = false;
+ _gsHideResults();
+}
+
+function _gsHideResults() {
+ const r = document.getElementById('gsearch-results');
+ if (r) r.classList.remove('visible');
+}
+
+function _gsShowResults() {
+ const r = document.getElementById('gsearch-results');
+ if (r && r.innerHTML.trim()) r.classList.add('visible');
+}
+
+async function _gsPerformSearch(query) {
+ if (_gsState.abortCtrl) _gsState.abortCtrl.abort();
+ if (_gsState.altAbortCtrl) _gsState.altAbortCtrl.abort();
+ _gsState.abortCtrl = new AbortController();
+ _gsState.altAbortCtrl = new AbortController();
+
+ const results = document.getElementById('gsearch-results');
+ if (!results) return;
+
+ results.innerHTML = 'No notifications yet
' :
+ entries.map(e => {
+ const icon = _notifIcons[e.type] || 'ℹ';
+ const ago = _notifTimeAgo(e.timestamp);
+ const unreadDot = e.read ? '' : '';
+ const learnMore = e.helpSection ? `Learn more →` : '';
+ return `
+
+ ${unreadDot}
+
+
`;
+ }).join('')}
+
+
+ ${_escToast(e.message)}
+
+ Searching...
';
+ results.classList.add('visible');
+
+ try {
+ const res = await fetch('/api/enhanced-search', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ query }),
+ signal: _gsState.abortCtrl.signal,
+ });
+ const data = await res.json();
+ _gsState.data = data;
+ _gsState.activeSource = data.primary_source || 'spotify';
+ _gsState.sources = {};
+ _gsState.sources[_gsState.activeSource] = {
+ artists: data.spotify_artists || [],
+ albums: data.spotify_albums || [],
+ tracks: data.spotify_tracks || [],
+ };
+
+ _gsRender(data);
+
+ // Async library ownership check — adds badges + swaps play buttons for library tracks
+ setTimeout(() => _gsLibraryCheck(), 200);
+
+ // Fetch alternate sources — stream NDJSON so slow sources render incrementally
+ const alts = data.alternate_sources || [];
+ for (const src of alts) {
+ if (src === _gsState.activeSource) continue;
+ _gsFetchSourceStream(src, query);
+ }
+ } catch (e) {
+ if (e.name !== 'AbortError') results.innerHTML = 'Search failed
';
+ }
+}
+
+async function _gsFetchSourceStream(src, query) {
+ try {
+ const res = await fetch(`/api/enhanced-search/source/${src}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ query }),
+ signal: _gsState.altAbortCtrl.signal,
+ });
+ if (!res.ok) return;
+
+ if (!_gsState.sources[src]) {
+ const loadingSet = src === 'youtube_videos' ? new Set(['videos']) : new Set(['artists', 'albums', 'tracks']);
+ _gsState.sources[src] = { artists: [], albums: [], tracks: [], videos: [], available: true, _loading: loadingSet };
+ }
+ const sourceData = _gsState.sources[src];
+
+ const reader = res.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ buffer += decoder.decode(value, { stream: true });
+
+ let idx;
+ while ((idx = buffer.indexOf('\n')) !== -1) {
+ const line = buffer.slice(0, idx).trim();
+ buffer = buffer.slice(idx + 1);
+ if (!line) continue;
+ try {
+ const chunk = JSON.parse(line);
+ if (chunk.type === 'artists') { sourceData.artists = chunk.data; if (sourceData._loading) sourceData._loading.delete('artists'); }
+ else if (chunk.type === 'albums') { sourceData.albums = chunk.data; if (sourceData._loading) sourceData._loading.delete('albums'); }
+ else if (chunk.type === 'tracks') { sourceData.tracks = chunk.data; if (sourceData._loading) sourceData._loading.delete('tracks'); }
+ else if (chunk.type === 'videos') { sourceData.videos = chunk.data; if (sourceData._loading) sourceData._loading.delete('videos'); }
+ if (chunk.type === 'done') delete sourceData._loading;
+ _gsRenderTabs();
+ // Re-render content if this is the active source tab
+ if (_gsState.activeSource === src && _gsState.data) {
+ _gsRender(_gsState.data);
+ }
+ } catch (e) { }
+ }
+ }
+ _gsRenderTabs();
+ } catch (e) {
+ if (e.name !== 'AbortError') console.debug(`GS alt source ${src} failed:`, e);
+ }
+}
+
+function _gsRender(data) {
+ const results = document.getElementById('gsearch-results');
+ if (!results) return;
+
+ // Music Videos tab — render video grid instead of regular results
+ if (_gsState.activeSource === 'youtube_videos') {
+ const src = _gsState.sources['youtube_videos'] || {};
+ const videos = src.videos || [];
+ const isLoading = src._loading && src._loading.size > 0;
+ let h = '';
+ h += `Results${videos.length} videos
`;
+ h += '';
+ h += '';
+ if (isLoading) {
+ h += '
';
+ results.innerHTML = h;
+ results.classList.add('visible');
+ _gsRenderTabs();
+ return;
+ }
+
+ const src = _gsState.sources[_gsState.activeSource] || {};
+ const loading = src._loading || new Set();
+ const dbArtists = data?.db_artists || [];
+ const artists = src.artists || [];
+ const allAlbums = src.albums || [];
+ const albums = allAlbums.filter(a => !a.album_type || a.album_type === 'album' || a.album_type === 'compilation');
+ const singles = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
+ const tracks = src.tracks || [];
+ const total = dbArtists.length + artists.length + albums.length + singles.length + tracks.length;
+ const isLoading = loading.size > 0;
+
+ if (total === 0 && !isLoading) {
+ results.innerHTML = ` Searching YouTube...
';
+ } else if (videos.length === 0) {
+ h += `No music videos found for "${_escToast(_gsState.query)}"
`;
+ } else {
+ h += '🎬 Music Videos
';
+ h += '';
+ h += videos.map(v => {
+ const dur = v.duration ? `${Math.floor(v.duration / 60)}:${String(v.duration % 60).padStart(2, '0')}` : '';
+ const views = v.view_count >= 1000000 ? `${(v.view_count / 1000000).toFixed(1)}M` : v.view_count >= 1000 ? `${(v.view_count / 1000).toFixed(1)}K` : (v.view_count || '');
+ const vJson = btoa(unescape(encodeURIComponent(JSON.stringify(v))));
+ return `
';
+ }
+ h += '
+ 
+
+
`;
+ }).join('');
+ h += '▶
+
+
+ ${dur ? `${dur}` : ''}${_escToast(v.title)}
${_escToast(v.channel)}${views ? ` · ${views} views` : ''}
No results for "${_escToast(_gsState.query)}"
Try different keywords or check spelling
`;
+ results.classList.add('visible');
+ return;
+ }
+
+ const sourceLabels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs', hydrabase: 'Hydrabase', youtube_videos: 'Music Videos', musicbrainz: 'MusicBrainz' };
+ const srcLabel = sourceLabels[_gsState.activeSource] || _gsState.activeSource || '';
+
+ let h = '';
+ h += `Try different keywords or check spelling
Results${total} items
`;
+ h += '';
+ h += '';
+
+ if (dbArtists.length) {
+ h += '
';
+ results.innerHTML = h;
+ results.classList.add('visible');
+ _gsRenderTabs();
+
+ // Lazy load artist images for sources that don't provide them (iTunes/Deezer)
+ _gsLazyLoadArtistImages();
+}
+
+async function _gsLazyLoadArtistImages() {
+ const grid = document.getElementById('gsearch-artists-grid');
+ if (!grid) return;
+ const cards = grid.querySelectorAll('[data-needs-image="true"]');
+ if (cards.length === 0) return;
+ const activeSrc = _gsState.activeSource || 'spotify';
+
+ for (const card of cards) {
+ const artistId = card.dataset.artistId;
+ if (!artistId) continue;
+ try {
+ const res = await fetch(`/api/artist/${artistId}/image?source=${activeSrc}`);
+ const data = await res.json();
+ if (data.success && data.image_url) {
+ const artDiv = card.querySelector('.gsearch-item-art');
+ if (artDiv) artDiv.innerHTML = `📚 In Your Library
';
+ h += dbArtists.map(a => ``).join('');
+ h += '
';
+ }
+
+ if (artists.length) {
+ h += `${a.image_url ? `
` : '🎤'}
${_escToast(a.name)}
Library
🎤 Artists ${srcLabel}
`;
+ h += artists.map(a => ``).join('');
+ h += '
';
+ } else if (loading.has('artists')) {
+ h += `${a.image_url ? `` : '🎤'}
${_escToast(a.name)}
🎤 Artists ${srcLabel}
Loading artists...
`;
+ }
+
+ const activeSrc = _gsState.activeSource || 'spotify';
+
+ if (albums.length) {
+ h += `💿 Albums ${srcLabel}
`;
+ h += albums.map(a => {
+ const ar = a.artist || (a.artists ? a.artists.join(', ') : '');
+ const yr = a.release_date ? a.release_date.substring(0, 4) : '';
+ const img = (a.image_url || '').replace(/'/g, "\\'");
+ return ``;
+ }).join('');
+ h += '
';
+ }
+
+ if (!albums.length && !singles.length && loading.has('albums')) {
+ h += `${a.image_url ? `` : '💿'}
${_escToast(a.name)}
${_escToast(ar)}${yr ? ` · ${yr}` : ''}
💿 Albums ${srcLabel}
Loading albums...
`;
+ }
+
+ if (singles.length) {
+ h += `🎶 Singles & EPs ${srcLabel}
`;
+ h += singles.map(a => {
+ const ar = a.artist || (a.artists ? a.artists.join(', ') : '');
+ const img = (a.image_url || '').replace(/'/g, "\\'");
+ return ``;
+ }).join('');
+ h += '
';
+ }
+
+ if (tracks.length) {
+ h += `${a.image_url ? `` : '🎶'}
${_escToast(a.name)}
${_escToast(ar)}
🎵 Tracks ${srcLabel}
`;
+ h += tracks.map(t => {
+ const ar = t.artist || (t.artists ? t.artists.join(', ') : '');
+ const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
+ return ``;
+ }).join('');
+ h += '
';
+ } else if (loading.has('tracks')) {
+ h += `${t.image_url ? `` : '🎵'}
${_escToast(t.name)}
${_escToast(ar)}${t.album ? ` · ${_escToast(t.album)}` : ''}
${dur}
🎵 Tracks ${srcLabel}
Loading tracks...
`;
+ }
+
+ h += '
+
+
`;
+ return;
+ }
+
+ // Populate findings job filter dropdown
+ const jobFilter = document.getElementById('repair-findings-job-filter');
+ if (jobFilter && jobFilter.options.length <= 1) {
+ jobs.forEach(job => {
+ const opt = document.createElement('option');
+ opt.value = job.job_id;
+ opt.textContent = job.display_name;
+ jobFilter.appendChild(opt);
+ });
+ }
+
+ container.innerHTML = jobs.map(job => {
+ const lastRunText = job.last_run ? formatCacheAge(job.last_run.finished_at) : 'Never';
+ const nextRunText = job.next_run ? formatCacheAge(job.next_run) : (job.enabled ? 'Pending' : '-');
+ const statusClass = job.is_running ? 'running' : (job.enabled ? 'idle' : 'disabled');
+ const dotClass = job.is_running ? 'running' : (job.enabled ? 'enabled' : 'disabled');
+ const cardClass = job.is_running ? 'running' : (!job.enabled ? 'disabled' : '');
+
+ // Build flow badges
+ const flowParts = [];
+ flowParts.push(`${job.is_running ? '▶ Running' : 'Scan'}`);
+ if (job.auto_fix) {
+ flowParts.push('→');
+ const isDryRun = job.settings && job.settings.dry_run === true;
+ if (isDryRun) {
+ flowParts.push('Dry Run');
+ } else {
+ flowParts.push('Auto-fix');
+ }
+ }
+ // Show pending findings count
+ const findingsCount = job.last_run ? (job.last_run.findings_created || 0) : 0;
+ if (findingsCount > 0) {
+ flowParts.push('→');
+ flowParts.push(`${findingsCount} finding${findingsCount !== 1 ? 's' : ''}`);
+ }
+
+ // Build meta parts
+ const metaParts = [];
+ metaParts.push('Last: ' + lastRunText);
+ metaParts.push('Next: ' + nextRunText);
+ if (job.last_run) {
+ metaParts.push(`Scanned: ${(job.last_run.items_scanned || 0).toLocaleString()}`);
+ if (job.last_run.auto_fixed) metaParts.push(`Fixed: ${job.last_run.auto_fixed}`);
+ }
+ if (job.last_run && job.last_run.duration_seconds) {
+ metaParts.push(`${job.last_run.duration_seconds.toFixed(1)}s`);
+ }
+
+ // Build settings HTML
+ let settingsHtml = '';
+ if (job.settings && Object.keys(job.settings).length > 0) {
+ const settingsRows = Object.entries(job.settings).map(([key, val]) => {
+ // Section header: keys starting with `_section_` render as a
+ // group divider + title instead of a setting row. The value
+ // is the human-readable title.
+ if (key.startsWith('_section_')) {
+ return `No Maintenance Jobs
+ Library maintenance jobs will appear here once available.
+ ${val}
`;
+ }
+ const label = _prettifyRepairSettingKey(key);
+ const inputType = typeof val === 'boolean' ? 'checkbox' :
+ typeof val === 'number' ? 'number' : 'text';
+ const inputVal = inputType === 'checkbox' ?
+ (val ? ' checked' : '') :
+ ` value="${val}"`;
+ return `
+
+
+
`;
+ }).join('');
+
+ settingsHtml = `
+ `;
+ }
+
+ return `
+
`;
+ }).join('');
+
+ } catch (error) {
+ console.error('Error loading repair jobs:', error);
+ container.innerHTML = '
+
+
+ ${settingsHtml}
+
+
+ ${job.display_name}
+ ${job.description || ''}
+ ${flowParts.join('')}
+
+
+
+
+ ${Object.keys(job.settings || {}).length > 0 ?
+ `` : ''}
+
+
+ Error loading jobs
';
+ }
+}
+
+async function toggleRepairJob(jobId, enabled) {
+ try {
+ await fetch(`/api/repair/jobs/${jobId}/toggle`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ enabled })
+ });
+ // Update card visuals immediately
+ const card = document.querySelector(`.repair-job-card[data-job-id="${jobId}"]`);
+ if (card) {
+ card.classList.toggle('disabled', !enabled);
+ const dot = card.querySelector('.repair-job-status');
+ if (dot) dot.className = 'repair-job-status ' + (enabled ? 'enabled' : 'disabled');
+ }
+ } catch (error) {
+ console.error('Error toggling job:', error);
+ showToast('Error toggling job', 'error');
+ }
+}
+
+function expandRepairJobSettings(jobId) {
+ const el = document.getElementById(`repair-settings-${jobId}`);
+ if (el) el.style.display = el.style.display === 'none' ? '' : 'none';
+}
+
+function showRepairJobHelp(jobId) {
+ const job = _repairJobsCache[jobId];
+ if (!job) return;
+
+ // Remove existing overlay if present
+ let overlay = document.getElementById('repair-help-overlay');
+ if (overlay) overlay.remove();
+
+ // Build settings summary (skip `_section_` group-header sentinels)
+ let settingsHtml = '';
+ if (job.settings && Object.keys(job.settings).length > 0) {
+ const rows = Object.entries(job.settings)
+ .filter(([key]) => !key.startsWith('_section_'))
+ .map(([key, val]) => {
+ const label = _prettifyRepairSettingKey(key);
+ const display = typeof val === 'boolean' ? (val ? 'Yes' : 'No') : val;
+ return `${label}${display}
`;
+ }).join('');
+ settingsHtml = `
+
`;
+ }
+
+ // Build info badges
+ const badges = [];
+ if (job.auto_fix) {
+ const isDryRun = job.settings && job.settings.dry_run === true;
+ badges.push(isDryRun
+ ? 'Dry Run'
+ : 'Auto-fix');
+ } else {
+ badges.push('Scan Only');
+ }
+ badges.push(`Every ${job.interval_hours}h`);
+ if (job.enabled) {
+ badges.push('Enabled');
+ } else {
+ badges.push('Disabled');
+ }
+
+ // Format help text paragraphs
+ const helpBody = (job.help_text || job.description || '').split('\n\n').map(p => {
+ if (p.startsWith('Settings:\n')) {
+ const lines = p.split('\n').slice(1);
+ return 'Current Settings
+ ${rows}
+ ' +
+ lines.map(l => `
';
+ }
+ return `${l.replace(/^- /, '')}
`).join('') +
+ '${p.replace(/\n/g, '
')}
+
+ `;
+ document.body.appendChild(overlay);
+}
+
+async function saveRepairJobSettings(jobId) {
+ try {
+ const inputs = document.querySelectorAll(`.repair-setting-input[data-job="${jobId}"]`);
+ let intervalHours = null;
+ const settings = {};
+
+ inputs.forEach(input => {
+ const key = input.dataset.key;
+ if (key === '_interval_hours') {
+ intervalHours = parseInt(input.value) || 24;
+ } else {
+ if (input.type === 'checkbox') settings[key] = input.checked;
+ else if (input.type === 'number') settings[key] = parseFloat(input.value);
+ else settings[key] = input.value;
+ }
+ });
+
+ await fetch(`/api/repair/jobs/${jobId}/settings`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ interval_hours: intervalHours, settings })
+ });
+
+ showToast('Settings saved', 'success');
+ } catch (error) {
+ console.error('Error saving job settings:', error);
+ showToast('Error saving settings', 'error');
+ }
+}
+
+async function runRepairJobNow(jobId) {
+ try {
+ await fetch(`/api/repair/jobs/${jobId}/run`, { method: 'POST' });
+ showToast('Job started', 'success');
+ setTimeout(() => loadRepairJobs(), 1000);
+ } catch (error) {
+ console.error('Error running job:', error);
+ showToast('Error starting job', 'error');
+ }
+}
+
+// ── Repair Job Live Progress ──
+const _repairProgressLogCounts = {};
+const _repairProgressHideTimers = {};
+
+function updateRepairJobProgressFromData(data) {
+ for (const [jobId, state] of Object.entries(data)) {
+ const card = document.querySelector(`.repair-job-card[data-job-id="${jobId}"]`);
+ if (!card) continue;
+
+ // Update status dot
+ const statusDot = card.querySelector('.repair-job-status');
+ if (statusDot) {
+ if (state.status === 'running') statusDot.className = 'repair-job-status running';
+ else if (state.status === 'finished') statusDot.className = 'repair-job-status enabled';
+ else if (state.status === 'error') statusDot.className = 'repair-job-status enabled';
+ }
+
+ // Update flow badge to show running state
+ const firstBadge = card.querySelector('.repair-flow-badge.scan');
+ if (firstBadge) {
+ if (state.status === 'running') firstBadge.innerHTML = '▶ Running';
+ else if (state.status === 'finished') firstBadge.innerHTML = '✓ Complete';
+ else if (state.status === 'error') firstBadge.innerHTML = '✗ Error';
+ }
+
+ // Add/update card running class
+ card.classList.toggle('running', state.status === 'running');
+ card.classList.remove('disabled');
+
+ // Create or find progress panel (bar-first layout like automation)
+ let panel = card.querySelector('.repair-job-progress');
+ if (!panel) {
+ panel = document.createElement('div');
+ panel.className = 'repair-job-progress';
+ panel.innerHTML = `
+
+
+
+ `;
+ card.appendChild(panel);
+ }
+
+ // Show panel
+ panel.classList.add('visible');
+ panel.classList.toggle('finished', state.status === 'finished');
+ panel.classList.toggle('error', state.status === 'error');
+
+ if (state.status === 'running') {
+ panel.classList.remove('finished', 'error');
+ if (_repairProgressHideTimers[jobId]) {
+ clearTimeout(_repairProgressHideTimers[jobId]);
+ delete _repairProgressHideTimers[jobId];
+ }
+ // Reset log for re-run
+ if (_repairProgressLogCounts[jobId] > 0 && state.log && state.log.length < _repairProgressLogCounts[jobId]) {
+ const existingLog = panel.querySelector('.repair-progress-log');
+ if (existingLog) existingLog.innerHTML = '';
+ _repairProgressLogCounts[jobId] = 0;
+ }
+ }
+
+ // Update progress bar
+ const bar = panel.querySelector('.repair-progress-bar');
+ if (bar) bar.style.width = (state.progress || 0) + '%';
+
+ // Update phase
+ const phaseEl = panel.querySelector('.repair-progress-phase');
+ if (phaseEl && state.phase) phaseEl.textContent = state.phase;
+
+ // Update log
+ const logEl = panel.querySelector('.repair-progress-log');
+ if (logEl && state.log) {
+ const prevCount = _repairProgressLogCounts[jobId] || 0;
+ if (state.log.length > prevCount) {
+ const newLines = state.log.slice(prevCount);
+ for (const line of newLines) {
+ const div = document.createElement('div');
+ div.className = 'repair-log-line ' + (line.type || 'info');
+ div.textContent = line.text;
+ logEl.appendChild(div);
+ }
+ logEl.scrollTop = logEl.scrollHeight;
+ }
+ _repairProgressLogCounts[jobId] = state.log.length;
+ }
+
+ // Auto-hide panel after completion
+ if (state.status === 'finished' || state.status === 'error') {
+ if (!_repairProgressHideTimers[jobId]) {
+ _repairProgressHideTimers[jobId] = setTimeout(() => {
+ panel.classList.remove('visible');
+ card.classList.remove('running');
+ delete _repairProgressHideTimers[jobId];
+ delete _repairProgressLogCounts[jobId];
+ // Reload to get updated stats
+ loadRepairJobs();
+ }, 30000);
+ }
+ } else {
+ // Clear any existing hide timer if job restarts
+ if (_repairProgressHideTimers[jobId]) {
+ clearTimeout(_repairProgressHideTimers[jobId]);
+ delete _repairProgressHideTimers[jobId];
+ }
+ }
+ }
+}
+
+async function loadRepairFindingsDashboard() {
+ const dashboard = document.getElementById('repair-findings-dashboard');
+ if (!dashboard) return;
+
+ try {
+ const response = await fetch('/api/repair/findings/counts');
+ if (!response.ok) throw new Error('Failed to fetch counts');
+ const data = await response.json();
+
+ const pending = data.pending || 0;
+ const resolved = data.resolved || 0;
+ const dismissed = data.dismissed || 0;
+ const autoFixed = data.auto_fixed || 0;
+ const byJob = data.by_job || {};
+
+ // Summary stats row
+ let html = '
+
+ ${job.display_name}
+ +${badges.join('')}
+ ${helpBody}
+ ${settingsHtml}
+ ';
+ html += `
';
+
+ // Per-job chips (only if there are pending findings)
+ const jobIds = Object.keys(byJob).sort((a, b) => byJob[b].total - byJob[a].total);
+ if (jobIds.length > 0) {
+ html += '
+ ${pending.toLocaleString()} pending
+
`;
+ html += `
+ ${resolved.toLocaleString()} resolved
+
`;
+ html += `
+ ${dismissed.toLocaleString()} dismissed
+
`;
+ if (autoFixed > 0) {
+ html += `
+ ${autoFixed.toLocaleString()} auto-fixed
+
`;
+ }
+ html += '';
+ const jobFilter = document.getElementById('repair-findings-job-filter');
+ const activeJob = jobFilter ? jobFilter.value : '';
+
+ for (const jid of jobIds) {
+ const job = byJob[jid];
+ const isActive = activeJob === jid;
+ const severityDots = [];
+ if (job.warning > 0) severityDots.push(``);
+ if (job.info > 0) severityDots.push(``);
+
+ html += `
';
+ }
+
+ dashboard.innerHTML = html;
+
+ // Load cache health stats
+ _loadCacheHealthStats(dashboard);
+ } catch (error) {
+ console.error('Error loading findings dashboard:', error);
+ dashboard.innerHTML = '';
+ }
+}
+
+async function _loadCacheHealthStats(dashboard) {
+ try {
+ const response = await fetch('/api/repair/cache-health');
+ if (!response.ok) return;
+ const stats = await response.json();
+ if (!stats.total_entities && !stats.total_searches) return;
+
+ const healthScore = stats.junk_entities === 0 && stats.stale_mb_nulls === 0 ? 'healthy' : stats.junk_entities > 50 ? 'poor' : 'fair';
+ const healthLabel = healthScore === 'healthy' ? 'Healthy' : healthScore === 'fair' ? 'Needs Cleanup' : 'Needs Attention';
+
+ // Remove any existing cache-health bar before appending — prevents
+ // stacking when multiple dashboard refreshes race and each resolved
+ // fetch appends its own section.
+ dashboard.querySelectorAll('.repair-cache-health').forEach(el => el.remove());
+
+ const section = document.createElement('div');
+ section.className = 'repair-cache-health';
+ section.innerHTML = `
+
+ `;
+ dashboard.appendChild(section);
+ } catch (error) {
+ console.error('Error loading cache health:', error);
+ }
+}
+
+async function openCacheHealthModal() {
+ if (document.getElementById('cache-health-modal-overlay')) return;
+
+ const overlay = document.createElement('div');
+ overlay.id = 'cache-health-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ overlay.innerHTML = `
+
+ ${job.total.toLocaleString()}
+ ${_escFinding(job.display_name || jid.replace(/_/g, ' '))}
+ ${severityDots.length ? `` : ''}
+
`;
+ }
+ html += '
+
+ `;
+ document.body.appendChild(overlay);
+
+ try {
+ const response = await fetch('/api/repair/cache-health');
+ if (!response.ok) throw new Error('Failed to load');
+ const s = await response.json();
+
+ const body = overlay.querySelector('.cache-health-body');
+ const healthScore = s.junk_entities === 0 && s.stale_mb_nulls === 0 ? 'healthy' : s.junk_entities > 50 ? 'poor' : 'fair';
+ const healthEmoji = healthScore === 'healthy' ? '✓' : healthScore === 'fair' ? '⚠' : '❌';
+ const healthLabel = healthScore === 'healthy' ? 'Cache is healthy' : healthScore === 'fair' ? 'Minor issues detected' : 'Cleanup recommended';
+
+ body.innerHTML = `
+
+
+
+
+
+
+
+
+ Cache Health
+Metadata cache status across all sources
+
+
+
+
+
+
+ Loading cache stats...
+
+
+
+
+ ${healthLabel}
+
+
+
+
+
+ ${s.total_entities.toLocaleString()}
+ Total Entities
+
+
+ ${s.total_searches.toLocaleString()}
+ Search Results
+
+
+ ${s.junk_entities}
+ Junk Entries
+ 0 ? 'onclick="openFailedMBLookupsModal()"' : ''}>
+
+ ${s.stale_mb_nulls}
+ Failed MB Lookups
+ ${s.stale_mb_nulls > 0 ? 'Manage ›
' : ''}
+
+
+
+ By Source
+
+
+
+
+ By Type
+
+ ${Object.entries(s.by_type || {}).map(([type, count]) => `${type}s ${count.toLocaleString()}`).join('')}
+
+
+
+ `;
+ } catch (error) {
+ const body = overlay.querySelector('.cache-health-body');
+ body.innerHTML = 'Metrics
+
+
+ Average Age${s.avg_age_days} days
+ Total Cache Hits${s.total_access_hits.toLocaleString()}
+ Expiring in 24h${s.expiring_24h}
+ Expiring in 7 days${s.expiring_7d}
+ Failed to load cache stats
';
+ }
+}
+
+// ── Failed MB Lookups Management Modal ──
+let _failedMBState = { items: [], total: 0, page: 1, filter: '', typeFilter: '', typeCounts: {} };
+
+async function openFailedMBLookupsModal() {
+ if (document.getElementById('failed-mb-modal-overlay')) return;
+
+ const overlay = document.createElement('div');
+ overlay.id = 'failed-mb-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ overlay.innerHTML = `
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ // Search debounce
+ const searchInput = overlay.querySelector('#failed-mb-search');
+ let searchTimer = null;
+ searchInput.addEventListener('input', () => {
+ clearTimeout(searchTimer);
+ searchTimer = setTimeout(() => {
+ _failedMBState.filter = searchInput.value;
+ _failedMBState.page = 1;
+ _loadFailedMBLookups();
+ }, 300);
+ });
+
+ _failedMBState = { items: [], total: 0, page: 1, filter: '', typeFilter: '', typeCounts: {} };
+ await _loadFailedMBLookups();
+}
+
+async function _loadFailedMBLookups() {
+ const body = document.getElementById('failed-mb-body');
+ if (!body) return;
+
+ // Only fetch type_counts on first load — cache them for tab switches
+ const needCounts = Object.keys(_failedMBState.typeCounts).length === 0;
+ const params = new URLSearchParams({
+ page: _failedMBState.page,
+ limit: 50,
+ });
+ if (needCounts) params.set('counts', 'true');
+ if (_failedMBState.typeFilter) params.set('entity_type', _failedMBState.typeFilter);
+ if (_failedMBState.filter) params.set('search', _failedMBState.filter);
+
+ try {
+ const resp = await fetch(`/api/metadata-cache/failed-mb-lookups?${params}`);
+ if (!resp.ok) throw new Error('Failed to load');
+ const data = await resp.json();
+ _failedMBState.items = data.items;
+ _failedMBState.total = data.total;
+ if (data.type_counts) _failedMBState.typeCounts = data.type_counts;
+
+ // Render type filter tabs
+ const tabsEl = document.getElementById('failed-mb-tabs');
+ if (tabsEl) {
+ const allCount = Object.values(_failedMBState.typeCounts).reduce((a, b) => a + b, 0);
+ let tabsHTML = ``;
+ const typeLabels = { artist: 'Artists', release: 'Albums', recording: 'Tracks' };
+ for (const [type, count] of Object.entries(_failedMBState.typeCounts)) {
+ tabsHTML += ``;
+ }
+ tabsEl.innerHTML = tabsHTML;
+ }
+
+ // Render items
+ if (data.items.length === 0) {
+ body.innerHTML = `
+
+
+
+
+
+ Failed MusicBrainz Lookups
+Tracks, albums, and artists that couldn't be matched automatically
+
+
+
+
+ Loading...
${_failedMBState.filter ? 'No matches for your search' : 'No failed lookups — cache is clean!'}
`;
+ } else {
+ const typeIcons = { artist: '🎤', release: '💿', recording: '🎵' };
+ body.innerHTML = data.items.map(item => `
+
+
+
+ `).join('');
+ }
+
+ // Pagination footer
+ const footer = document.getElementById('failed-mb-footer');
+ if (footer) {
+ const totalPages = Math.ceil(data.total / 50);
+ footer.innerHTML = totalPages > 1 ? `
+
+
+
+ ${escapeHtml(item.entity_name)}
+ ${item.artist_name ? `${escapeHtml(item.artist_name)}
` : ''}
+
+
+
+
+
+
+ Page ${_failedMBState.page} of ${totalPages} (${data.total} total)
+
+
+ ` : `${data.total} entries
`;
+ }
+ } catch (err) {
+ body.innerHTML = 'Failed to load data
';
+ }
+}
+
+function _failedMBSetType(type) {
+ _failedMBState.typeFilter = type;
+ _failedMBState.page = 1;
+ _loadFailedMBLookups();
+}
+
+function _failedMBPage(page) {
+ _failedMBState.page = page;
+ _loadFailedMBLookups();
+}
+
+async function _failedMBDelete(entryId) {
+ try {
+ const resp = await fetch(`/api/metadata-cache/mb-entry/${entryId}`, { method: 'DELETE' });
+ if (resp.ok) {
+ const row = document.querySelector(`.failed-mb-item[data-id="${entryId}"]`);
+ if (row) {
+ row.style.opacity = '0';
+ setTimeout(() => {
+ row.remove();
+ _failedMBState.typeCounts = {}; // Force refresh counts
+ _loadFailedMBLookups();
+ }, 200);
+ }
+ }
+ } catch (err) {
+ showToast('Failed to delete entry', 'error');
+ }
+}
+
+async function _failedMBClearAll() {
+ if (!confirm(`Clear all ${_failedMBState.total} failed lookups? They will be retried on next enrichment run.`)) return;
+ try {
+ const resp = await fetch('/api/metadata-cache/clear-musicbrainz?failed_only=true', { method: 'DELETE' });
+ const data = await resp.json();
+ if (data.success) {
+ showToast(`Cleared ${data.cleared} failed lookups`, 'success');
+ _failedMBState.page = 1;
+ _failedMBState.typeCounts = {}; // Force refresh counts
+ _loadFailedMBLookups();
+ }
+ } catch (err) {
+ showToast('Failed to clear lookups', 'error');
+ }
+}
+
+// ── MusicBrainz Search Sub-Modal ──
+async function _failedMBSearch(entryId, entityType, entityName, artistName) {
+ // Remove existing search modal if any
+ const existing = document.getElementById('mb-search-modal-overlay');
+ if (existing) existing.remove();
+
+ const overlay = document.createElement('div');
+ overlay.id = 'mb-search-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.style.zIndex = '10001';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ const typeLabels = { artist: 'Artist', release: 'Album', recording: 'Track' };
+ overlay.innerHTML = `
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ // Toggle artist row visibility based on type
+ const typeSelect = overlay.querySelector('#mb-search-type');
+ typeSelect.addEventListener('change', () => {
+ const artistRow = overlay.querySelector('#mb-search-artist-row');
+ artistRow.style.display = typeSelect.value === 'artist' ? 'none' : '';
+ });
+
+ // Enter to search
+ overlay.querySelectorAll('.mb-search-input').forEach(input => {
+ input.addEventListener('keydown', (e) => { if (e.key === 'Enter') _runMBSearch(entryId); });
+ });
+
+ // Auto-search on open
+ _runMBSearch(entryId);
+}
+
+async function _runMBSearch(entryId) {
+ const resultsEl = document.getElementById('mb-search-results');
+ const typeEl = document.getElementById('mb-search-type');
+ const queryEl = document.getElementById('mb-search-query');
+ const artistEl = document.getElementById('mb-search-artist');
+ const goBtn = document.getElementById('mb-search-go-btn');
+ if (!resultsEl || !queryEl) return;
+
+ const type = typeEl.value;
+ const query = queryEl.value.trim();
+ const artist = artistEl ? artistEl.value.trim() : '';
+ if (!query) return;
+
+ goBtn.disabled = true;
+ goBtn.textContent = 'Searching...';
+ resultsEl.innerHTML = '
+
+
+
+
+ Search MusicBrainz
+Find a match for: ${escapeHtml(entityName)}${artistName ? ` by ${escapeHtml(artistName)}` : ''}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enter a search query and click Search
+ Searching MusicBrainz...
No results found. Try adjusting your search.
';
+ return;
+ }
+
+ resultsEl.innerHTML = data.results.map((r, i) => {
+ const scoreColor = r.score >= 90 ? '#4ade80' : r.score >= 70 ? '#fbbf24' : '#f87171';
+ let detail = '';
+ if (type === 'release') detail = [r.artist, r.date, r.track_count ? `${r.track_count} tracks` : ''].filter(Boolean).join(' · ');
+ else if (type === 'recording') detail = [r.artist, r.album].filter(Boolean).join(' · ');
+ else detail = [r.type, r.country].filter(Boolean).join(' · ');
+
+ return `
+
+
+ `;
+ }).join('');
+ } catch (err) {
+ resultsEl.innerHTML = `${r.score}%
+
+
+ ${escapeHtml(r.name)}
+ ${r.disambiguation ? `${escapeHtml(r.disambiguation)}
` : ''}
+ ${detail ? `${escapeHtml(detail)}
` : ''}
+ ${r.mbid.substring(0, 8)}...
+ Search error: ${err.message}
`;
+ } finally {
+ goBtn.disabled = false;
+ goBtn.textContent = 'Search';
+ }
+}
+
+async function _selectMBMatch(entryId, mbid, mbName) {
+ try {
+ const resp = await fetch('/api/metadata-cache/mb-match', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ entry_id: entryId, mbid, mb_name: mbName })
+ });
+ const data = await resp.json();
+ if (data.success) {
+ showToast(`Matched to: ${mbName}`, 'success');
+ // Close search modal, refresh list with fresh counts
+ const searchOverlay = document.getElementById('mb-search-modal-overlay');
+ if (searchOverlay) searchOverlay.remove();
+ _failedMBState.typeCounts = {};
+ _loadFailedMBLookups();
+ } else {
+ showToast(data.error || 'Failed to save match', 'error');
+ }
+ } catch (err) {
+ showToast('Failed to save match', 'error');
+ }
+}
+
+function filterFindingsByJob(jobId) {
+ const jobFilter = document.getElementById('repair-findings-job-filter');
+ if (!jobFilter) return;
+
+ // Toggle: click same chip again to clear filter
+ if (jobFilter.value === jobId) {
+ jobFilter.value = '';
+ } else {
+ jobFilter.value = jobId;
+ }
+ _repairFindingsPage = 0;
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+}
+
+async function loadRepairFindings() {
+ const container = document.getElementById('repair-findings-list');
+ if (!container) return;
+
+ const jobFilter = document.getElementById('repair-findings-job-filter');
+ const severityFilter = document.getElementById('repair-findings-severity-filter');
+ const statusFilter = document.getElementById('repair-findings-status-filter');
+
+ const params = new URLSearchParams();
+ if (jobFilter && jobFilter.value) params.set('job_id', jobFilter.value);
+ if (severityFilter && severityFilter.value) params.set('severity', severityFilter.value);
+ if (statusFilter && statusFilter.value) params.set('status', statusFilter.value);
+ params.set('page', _repairFindingsPage);
+ params.set('limit', REPAIR_FINDINGS_PAGE_SIZE);
+
+ try {
+ const response = await fetch(`/api/repair/findings?${params}`);
+ if (!response.ok) throw new Error('Failed to fetch findings');
+ const data = await response.json();
+ const items = data.items || [];
+
+ _repairSelectedFindings.clear();
+ _repairFindingsTotal = data.total || 0;
+ const bulkBar = document.getElementById('repair-findings-bulk');
+ if (bulkBar) bulkBar.style.display = 'none';
+ const selectAllCb = document.getElementById('repair-select-all-cb');
+ if (selectAllCb) { selectAllCb.checked = false; selectAllCb.indeterminate = false; }
+
+ if (items.length === 0) {
+ container.innerHTML = `
+
+
`;
+ document.getElementById('repair-findings-pagination').innerHTML = '';
+ return;
+ }
+
+ const severityIcons = { info: 'ℹ️', warning: '⚠️', critical: '🔴' };
+ const typeLabels = {
+ dead_file: 'Dead File', orphan_file: 'Orphan', acoustid_mismatch: 'Wrong Song',
+ acoustid_no_match: 'No Match', fake_lossless: 'Fake Lossless',
+ duplicate_tracks: 'Duplicate', incomplete_album: 'Incomplete',
+ path_mismatch: 'Path Mismatch', metadata_gap: 'Missing Metadata',
+ missing_cover_art: 'Missing Art', track_number_mismatch: 'Track Number',
+ missing_lossy_copy: 'No Lossy Copy'
+ };
+
+ // Finding types that have an automated fix action
+ const fixableTypes = {
+ dead_file: 'Re-download',
+ orphan_file: 'Resolve',
+ track_number_mismatch: 'Fix',
+ missing_cover_art: 'Apply Art',
+ metadata_gap: 'Apply',
+ duplicate_tracks: 'Keep Best',
+ incomplete_album: 'Auto-Fill',
+ missing_lossy_copy: 'Convert',
+ acoustid_mismatch: 'Fix',
+ missing_discography_track: 'Add to Wishlist',
+ };
+
+ container.innerHTML = items.map(f => {
+ const icon = severityIcons[f.severity] || 'ℹ️';
+ const age = formatCacheAge(f.created_at);
+ const actionLabels = {
+ removed_db_entry: 'Entry Removed', added_to_wishlist: 'Wishlisted', deleted_file: 'File Deleted',
+ already_gone: 'Already Gone', fixed_track_number: 'Track # Fixed',
+ applied_cover_art: 'Art Applied', applied_metadata: 'Metadata Applied',
+ removed_duplicates: 'Duplicates Removed',
+ };
+ let statusBadge = '';
+ if (f.status !== 'pending') {
+ const actionText = actionLabels[f.user_action] || f.status;
+ statusBadge = `${actionText}`;
+ }
+ const typeLabel = typeLabels[f.finding_type] || f.finding_type.replace(/_/g, ' ');
+ const d = f.details || {};
+ const filePath = f.file_path || d.original_path || d.file_path || '';
+ const fixLabel = fixableTypes[f.finding_type];
+
+ return `All Clear
+ No findings match your filters. Your library is looking good!
+
+
`;
+ }).join('');
+
+ // Pagination
+ renderRepairFindingsPagination(data.total, data.page);
+
+ } catch (error) {
+ console.error('Error loading findings:', error);
+ container.innerHTML = '
+
+
+
+
+
+
+
+
+ ${_escFinding(f.title)}
+ ${typeLabel}
+ ${statusBadge}
+
+ ${_escFinding(f.description || '')}
+ ${filePath ? `${_escFinding(filePath)}
` : ''}
+
+
+ ${f.status === 'pending' ? `
+ ${fixLabel ? `` : ''}
+
+ ` : ''}
+
+
+
+
+
+ ${_renderFindingDetail(f)}
+
+ Error loading findings
';
+ }
+}
+
+function _escFinding(s) {
+ if (!s) return '';
+ return s.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
+}
+
+function _renderScoreBar(value, label) {
+ const pct = Math.round((value || 0) * 100);
+ const cls = pct >= 80 ? 'good' : pct >= 50 ? 'warn' : 'bad';
+ return ``;
+}
+
+function _formatFileSize(bytes) {
+ if (!bytes) return '-';
+ if (bytes < 1024) return bytes + ' B';
+ if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+ return (bytes / 1048576).toFixed(1) + ' MB';
+}
+
+function _renderPlayButton(f) {
+ const d = f.details || {};
+ const filePath = f.file_path || d.file_path || d.original_path;
+ if (!filePath) return '';
+ const title = d.expected_title || d.title || d.file_title || d.matched_title || '';
+ const artist = d.expected_artist || d.artist || d.artist_name || '';
+ const album = d.album || d.album_title || '';
+ const albumArt = d.album_thumb_url || '';
+ return ``;
+}
+
+function playFindingTrack(btn) {
+ const track = {
+ file_path: btn.dataset.path,
+ title: btn.dataset.title || 'Unknown Track',
+ id: btn.dataset.entityId || null
+ };
+ const albumTitle = btn.dataset.album || '';
+ const artistName = btn.dataset.artist || '';
+ playLibraryTrack(track, albumTitle, artistName);
+}
+
+function _renderFindingMedia(d) {
+ const albumUrl = d.album_thumb_url;
+ const artistUrl = d.artist_thumb_url;
+ if (!albumUrl && !artistUrl) return '';
+ let html = '';
+ if (albumUrl) {
+ const albumLabel = d.album_title || 'Album';
+ html += `
';
+ return html;
+}
+
+function _renderFindingDetail(f) {
+ const d = f.details || {};
+ const rows = [];
+ const media = _renderFindingMedia(d);
+
+ switch (f.finding_type) {
+ case 'dead_file':
+ if (d.artist) rows.push(['Artist', d.artist]);
+ if (d.album) rows.push(['Album', d.album]);
+ if (d.title) rows.push(['Title', d.title]);
+ if (d.track_id) rows.push(['Track ID', d.track_id]);
+ if (d.original_path) rows.push(['Original Path', d.original_path, 'path']);
+ return media + _gridRows(rows) + _renderPlayButton(f);
+
+ case 'orphan_file':
+ if (d.folder) rows.push(['Folder', d.folder, 'path']);
+ if (d.format) rows.push(['Format', d.format.toUpperCase()]);
+ if (d.file_size) rows.push(['File Size', _formatFileSize(d.file_size)]);
+ if (d.modified) rows.push(['Last Modified', d.modified]);
+ if (f.file_path) rows.push(['Full Path', f.file_path, 'path']);
+ return _gridRows(rows) + _renderPlayButton(f);
+
+ case 'acoustid_mismatch': {
+ let html = media + '
+ })
+ ${_escFinding(albumLabel)}
+
`;
+ }
+ if (artistUrl) {
+ const artistLabel = d.artist_name || d.artist || 'Artist';
+ html += `
+ })
+ ${_escFinding(artistLabel)}
+
`;
+ }
+ html += '';
+ html += _renderScoreBar(d.fingerprint_score, 'Fingerprint');
+ html += _renderScoreBar(d.title_similarity, 'Title Match');
+ html += _renderScoreBar(d.artist_similarity, 'Artist Match');
+ html += '
';
+ rows.push(['Expected Title', d.expected_title || '-']);
+ rows.push(['Expected Artist', d.expected_artist || '-']);
+ rows.push(['AcoustID Title', d.acoustid_title || '-', 'highlight']);
+ rows.push(['AcoustID Artist', d.acoustid_artist || '-', 'highlight']);
+ if (f.file_path) rows.push(['File', f.file_path, 'path']);
+ return html + _gridRows(rows) + _renderPlayButton(f);
+ }
+
+ case 'acoustid_no_match':
+ if (d.expected_title) rows.push(['Expected Title', d.expected_title]);
+ if (d.expected_artist) rows.push(['Expected Artist', d.expected_artist]);
+ if (f.file_path) rows.push(['File', f.file_path, 'path']);
+ return media + _gridRows(rows) + _renderPlayButton(f);
+
+ case 'fake_lossless': {
+ const cutoff = d.detected_cutoff_khz || 0;
+ const expectedMin = d.expected_min_khz || 0;
+ const nyquist = d.nyquist_khz || (d.sample_rate ? d.sample_rate / 2000 : 22.05);
+ let flHtml = '';
+ if (cutoff && expectedMin) {
+ const cutoffPct = Math.min(100, Math.round((cutoff / nyquist) * 100));
+ const expectedPct = Math.min(100, Math.round((expectedMin / nyquist) * 100));
+ flHtml += ``;
+ }
+ if (d.format) rows.push(['Format', d.format.toUpperCase()]);
+ if (d.sample_rate) rows.push(['Sample Rate', `${d.sample_rate} Hz`]);
+ if (d.bit_depth) rows.push(['Bit Depth', `${d.bit_depth}-bit`]);
+ if (d.bitrate) rows.push(['Bitrate', `${d.bitrate} kbps`]);
+ if (d.file_size) rows.push(['File Size', _formatFileSize(d.file_size)]);
+ if (f.file_path) rows.push(['File', f.file_path, 'path']);
+ return flHtml + _gridRows(rows) + _renderPlayButton(f);
+ }
+
+ case 'duplicate_tracks':
+ if (!d.tracks || !d.tracks.length) return _gridRows([['Count', d.count || '?']]);
+ // Determine best copy (same logic as backend: highest bitrate, then duration, then track number)
+ const bestDup = d.tracks.reduce((best, t) => {
+ const bBr = best.bitrate || 0, tBr = t.bitrate || 0;
+ const bDur = best.duration || 0, tDur = t.duration || 0;
+ const bTn = best.track_number || 0, tTn = t.track_number || 0;
+ return (tBr > bBr || (tBr === bBr && tDur > bDur) || (tBr === bBr && tDur === bDur && tTn > bTn)) ? t : best;
+ }, d.tracks[0]);
+ const findingId = f.id;
+ return media + `${d.tracks.map((t, i) => {
+ const tid = t.track_id || t.id;
+ const isBest = (t.id === bestDup.id);
+ return `
+
+
+ ${isBest ? 'KEEP' : 'REMOVE'}
+ ${_escFinding(t.title)} by ${_escFinding(t.artist)}
+
+ Album: ${_escFinding(t.album || 'Unknown')}${t.bitrate ? ` · ${t.bitrate} kbps` : ''}${t.duration ? ` · ${Math.round(t.duration)}s` : ''}${t.track_number ? ` · Track #${t.track_number}` : ''}
+ ${t.file_path ? `${_escFinding(t.file_path)}` : ''}
+
`;
+ }).join('')}Click on a version to keep it, or use "Keep Best" for auto-selection
`;
+
+ case 'incomplete_album':
+ if (d.artist) rows.push(['Artist', d.artist]);
+ if (d.album_title) rows.push(['Album', d.album_title]);
+ if (d.primary_source && d.primary_album_id) {
+ const primaryLabel = d.primary_source.charAt(0).toUpperCase() + d.primary_source.slice(1);
+ rows.push([`${primaryLabel} ID`, d.primary_album_id]);
+ if (d.spotify_album_id && d.primary_source !== 'spotify') {
+ rows.push(['Spotify ID', d.spotify_album_id]);
+ }
+ } else if (d.spotify_album_id) {
+ rows.push(['Spotify ID', d.spotify_album_id]);
+ }
+ let incHtml = media + _gridRows(rows);
+ const actual = d.actual_tracks || 0, expected = d.expected_tracks || 0;
+ if (expected > 0) {
+ const pct = Math.round((actual / expected) * 100);
+ incHtml += ``;
+ }
+ if (d.missing_tracks && d.missing_tracks.length) {
+ incHtml += `${d.missing_tracks.map(t => `
+
`;
+ }
+ return incHtml;
+
+ case 'path_mismatch':
+ if (d.from) rows.push(['Current Path', d.from, 'path']);
+ if (d.to) rows.push(['Expected Path', d.to, 'success']);
+ return _gridRows(rows);
+
+ case 'metadata_gap':
+ if (d.artist) rows.push(['Artist', d.artist]);
+ if (d.album) rows.push(['Album', d.album]);
+ if (d.title) rows.push(['Title', d.title]);
+ if (d.spotify_track_id) rows.push(['Spotify ID', d.spotify_track_id]);
+ if (d.resolved_source) rows.push(['Resolved Source', d.resolved_source]);
+ if (d.resolved_track_id) rows.push(['Resolved Track ID', d.resolved_track_id]);
+ if (d.found_fields && typeof d.found_fields === 'object') {
+ Object.entries(d.found_fields).forEach(([k, v]) => {
+ rows.push([`Found: ${k}`, String(v), 'success']);
+ });
+ }
+ return media + _gridRows(rows);
+
+ case 'missing_cover_art':
+ if (d.artist) rows.push(['Artist', d.artist]);
+ if (d.album_title) rows.push(['Album', d.album_title]);
+ if (d.spotify_album_id) rows.push(['Spotify ID', d.spotify_album_id]);
+ let artHtml = '';
+ // Show artist image + found artwork side by side
+ if (d.artist_thumb_url || d.found_artwork_url) {
+ artHtml += '
+ #${t.track_number || '?'} ${_escFinding(t.name || t.title || 'Unknown')}
+ ${t.source && t.source !== 'spotify' ? `Source: ${_escFinding(t.source)}${t.source_track_id ? ` · ID: ${_escFinding(t.source_track_id)}` : ''}` : ''}
+ ${t.duration_ms ? `Duration: ${Math.round(t.duration_ms / 1000)}s` : ''}
+
`).join('')}';
+ if (d.artist_thumb_url) {
+ artHtml += `
';
+ }
+ artHtml += _gridRows(rows);
+ return artHtml;
+
+ case 'track_number_mismatch':
+ if (d.album_title) rows.push(['Album', d.album_title]);
+ if (d.artist_name) rows.push(['Artist', d.artist_name]);
+ if (d.matched_title) rows.push(['Matched To', d.matched_title]);
+ if (d.file_title) rows.push(['File Title', d.file_title]);
+ if (d.current_track_num !== undefined) rows.push(['Current Track #', String(d.current_track_num)]);
+ if (d.correct_track_num !== undefined) rows.push(['Correct Track #', String(d.correct_track_num), 'success']);
+ if (f.file_path) rows.push(['File', f.file_path, 'path']);
+ let tnHtml = media;
+ if (d.match_score) {
+ tnHtml += '
+ })
+ ${_escFinding(d.artist || 'Artist')}
+
`;
+ }
+ if (d.found_artwork_url) {
+ artHtml += `
+ })
+ Found Artwork
+
`;
+ }
+ artHtml += '';
+ tnHtml += _renderScoreBar(d.match_score, 'Title Match');
+ tnHtml += '
';
+ }
+ tnHtml += _gridRows(rows);
+ if (d.changes && d.changes.length) {
+ tnHtml += `${d.changes.map(c => `
+
`;
+ }
+ tnHtml += _renderPlayButton(f);
+ return tnHtml;
+
+ default:
+ // Generic: render all detail keys
+ Object.entries(d).forEach(([k, v]) => {
+ if (typeof v !== 'object' && !k.endsWith('_thumb_url')) {
+ rows.push([k.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()), String(v)]);
+ }
+ });
+ if (f.file_path) rows.push(['File', f.file_path, 'path']);
+ return (media || '') + (rows.length ? _gridRows(rows) : 'No additional details available');
+ }
+}
+
+function _gridRows(rows) {
+ if (!rows.length) return '';
+ return `${_escFinding(c)}
`).join('')}${rows.map(([k, v, cls]) =>
+ `${_escFinding(k)}${_escFinding(v)}`
+ ).join('')}
`;
+}
+
+function toggleFindingDetail(id) {
+ const panel = document.getElementById(`repair-detail-${id}`);
+ const btn = document.querySelector(`.repair-finding-expand-btn[data-finding="${id}"]`);
+ if (!panel) return;
+ const isOpen = panel.classList.toggle('open');
+ if (btn) btn.classList.toggle('open', isOpen);
+}
+
+function toggleFindingSelect(id, checked) {
+ if (checked) _repairSelectedFindings.add(id);
+ else _repairSelectedFindings.delete(id);
+
+ _updateFindingsBulkBar();
+}
+
+function _updateFindingsBulkBar() {
+ const bulkBar = document.getElementById('repair-findings-bulk');
+ const count = _repairSelectedFindings.size;
+ if (bulkBar) bulkBar.style.display = count > 0 ? '' : 'none';
+ const countEl = document.getElementById('repair-bulk-count');
+ if (countEl) countEl.textContent = count > 0 ? `${count} selected` : '';
+
+ // Show "Fix All (N)" when all on page are selected and there are more pages
+ const fixAllBtn = document.getElementById('repair-fix-all-btn');
+ if (fixAllBtn && _repairFindingsTotal > 0) {
+ const allPageSelected = count > 0 && count >= document.querySelectorAll('.repair-finding-card').length;
+ fixAllBtn.style.display = (allPageSelected && _repairFindingsTotal > count) ? '' : 'none';
+ fixAllBtn.textContent = `Fix All ${_repairFindingsTotal}`;
+ }
+
+ // Sync "Select All" checkbox
+ const selectAllCb = document.getElementById('repair-select-all-cb');
+ if (selectAllCb) {
+ const totalOnPage = document.querySelectorAll('.repair-finding-card').length;
+ selectAllCb.checked = totalOnPage > 0 && count >= totalOnPage;
+ selectAllCb.indeterminate = count > 0 && count < totalOnPage;
+ }
+}
+
+function toggleSelectAllFindings(checked) {
+ const checkboxes = document.querySelectorAll('.repair-finding-select input[type="checkbox"]');
+ checkboxes.forEach(cb => {
+ cb.checked = checked;
+ const card = cb.closest('.repair-finding-card');
+ if (card) {
+ const id = parseInt(card.dataset.id);
+ if (checked) _repairSelectedFindings.add(id);
+ else _repairSelectedFindings.delete(id);
+ }
+ });
+ _updateFindingsBulkBar();
+}
+
+async function fixAllMatchingFindings() {
+ const jobFilter = document.getElementById('repair-findings-job-filter');
+ const severityFilter = document.getElementById('repair-findings-severity-filter');
+ const jobId = jobFilter ? jobFilter.value : '';
+ const severity = severityFilter ? severityFilter.value : '';
+
+ // If fixing orphan files or dead files, prompt for action FIRST
+ let fixAction = null;
+ // Discography backfill: 3-option prompt (Add to Wishlist / Just Clear / Cancel).
+ // "Just Clear" bypasses bulk-fix entirely and goes through the clear endpoint,
+ // which is why it's handled inline and returns early.
+ if (jobId === 'discography_backfill') {
+ const choice = await _promptDiscographyBackfillAction(_repairFindingsTotal);
+ if (!choice) return;
+ if (choice === 'dismiss') {
+ if (!await showConfirmDialog({
+ title: 'Clear All Discography Findings',
+ message: `Clear all ${_repairFindingsTotal} discography backfill findings without adding any to the wishlist? Tracks can be re-detected next scan.`,
+ confirmText: 'Clear All',
+ destructive: false
+ })) return;
+ showToast(`Clearing ${_repairFindingsTotal} findings...`, 'info');
+ try {
+ const resp = await fetch('/api/repair/findings/clear', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ job_id: 'discography_backfill', status: 'pending' })
+ });
+ const result = await resp.json();
+ if (result.success) {
+ showToast(`Cleared ${result.deleted} findings`, 'success');
+ } else {
+ showToast(result.error || 'Clear failed', 'error');
+ }
+ } catch (err) {
+ console.error('Error clearing findings:', err);
+ showToast('Error clearing findings', 'error');
+ }
+ _repairSelectedFindings.clear();
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+ updateRepairStatus();
+ return;
+ }
+ // 'add_to_wishlist' falls through to bulk-fix. No destructive warning —
+ // the backend handler only adds tracks to the wishlist.
+ } else if (jobId === 'dead_file_cleaner') {
+ fixAction = await _promptDeadFileAction();
+ if (!fixAction) return;
+ } else if (jobId === 'orphan_file_detector' || _isMassOrphanFix(jobId, _repairFindingsTotal)) {
+ fixAction = await _promptOrphanAction();
+ if (!fixAction) return;
+ // Confirm before proceeding
+ if (fixAction === 'delete' && _repairFindingsTotal > 50) {
+ if (!await showWitnessMeDialog(_repairFindingsTotal)) return;
+ } else if (fixAction === 'delete') {
+ if (!await showConfirmDialog({
+ title: 'Delete Orphan Files',
+ message: `Permanently delete ${_repairFindingsTotal} orphan files from disk? This cannot be undone.`,
+ confirmText: 'Delete',
+ destructive: true
+ })) return;
+ } else if (fixAction === 'staging') {
+ if (!await showConfirmDialog({
+ title: 'Move to Staging',
+ message: `Move ${_repairFindingsTotal} orphan files to the import folder? Files are NOT deleted — you can review and import them.`,
+ confirmText: 'Move All to Staging',
+ destructive: false
+ })) return;
+ }
+ } else {
+ const scopeLabel = jobId ? jobId.replace(/_/g, ' ') : 'all jobs';
+ if (!await showConfirmDialog({
+ title: 'Fix All Findings',
+ message: `Apply fixes to all ${_repairFindingsTotal} pending fixable findings for ${scopeLabel}? This may delete files or remove database entries depending on finding type.`,
+ confirmText: 'Fix All',
+ destructive: true
+ })) return;
+ }
+
+ showToast(`Fixing ${_repairFindingsTotal} findings...`, 'info');
+
+ try {
+ const body = {};
+ if (jobId) body.job_id = jobId;
+ if (severity) body.severity = severity;
+ if (fixAction) body.fix_action = fixAction;
+
+ const response = await fetch('/api/repair/findings/bulk-fix', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body)
+ });
+ const result = await response.json();
+ if (result.success) {
+ let msg = `Fixed ${result.fixed}${result.failed ? `, ${result.failed} failed` : ''} of ${result.total}`;
+ if (result.errors && result.errors.length > 0) {
+ msg += `: ${result.errors[0].error}`;
+ }
+ showToast(msg, result.fixed > 0 ? 'success' : 'error');
+ } else {
+ showToast(result.error || 'Bulk fix failed', 'error');
+ }
+ } catch (error) {
+ console.error('Error in bulk fix:', error);
+ showToast('Error applying bulk fix', 'error');
+ }
+
+ _repairSelectedFindings.clear();
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+ updateRepairStatus();
+}
+
+function renderRepairFindingsPagination(total, currentPage) {
+ const container = document.getElementById('repair-findings-pagination');
+ if (!container) return;
+
+ const totalPages = Math.ceil(total / REPAIR_FINDINGS_PAGE_SIZE);
+ if (totalPages <= 1) { container.innerHTML = ''; return; }
+
+ let html = '';
+ if (currentPage > 0) {
+ html += ``;
+ }
+
+ // Smart page range
+ let startPage = Math.max(0, currentPage - 3);
+ let endPage = Math.min(totalPages, startPage + 7);
+ if (endPage - startPage < 7) startPage = Math.max(0, endPage - 7);
+
+ if (startPage > 0) {
+ html += ``;
+ if (startPage > 1) html += '...';
+ }
+ for (let i = startPage; i < endPage; i++) {
+ html += ``;
+ }
+ if (endPage < totalPages) {
+ if (endPage < totalPages - 1) html += '...';
+ html += ``;
+ }
+
+ if (currentPage < totalPages - 1) {
+ html += ``;
+ }
+ html += `${total.toLocaleString()} total`;
+ container.innerHTML = html;
+}
+
+async function selectDuplicateToKeep(findingId, keepTrackId) {
+ if (!await showConfirmDialog({ title: 'Keep This Version', message: 'Keep this version and remove the other duplicate(s)?', confirmText: 'Keep', destructive: true })) return;
+ try {
+ const response = await fetch(`/api/repair/findings/${findingId}/fix`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ fix_action: keepTrackId }),
+ });
+ const result = await response.json();
+ if (result.success) {
+ showToast(result.message || 'Duplicate resolved', 'success');
+ } else {
+ showToast(result.error || 'Failed to resolve duplicate', 'error');
+ }
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+ updateRepairStatus();
+ } catch (error) {
+ console.error('Error fixing duplicate:', error);
+ showToast('Error resolving duplicate', 'error');
+ }
+}
+
+async function fixRepairFinding(id, findingType) {
+ // Orphan files require user to choose an action
+ let fixAction = null;
+ if (findingType === 'orphan_file') {
+ fixAction = await _promptOrphanAction();
+ if (!fixAction) return; // User cancelled
+ }
+ // Dead files: re-download or just remove from DB
+ if (findingType === 'dead_file') {
+ fixAction = await _promptDeadFileAction();
+ if (!fixAction) return;
+ }
+ // AcoustID mismatch: retag, redownload, or delete
+ if (findingType === 'acoustid_mismatch') {
+ fixAction = await _promptAcoustidAction();
+ if (!fixAction) return;
+ }
+ // Discography backfill: add to wishlist or just clear the finding
+ if (findingType === 'missing_discography_track') {
+ const choice = await _promptDiscographyBackfillAction(1);
+ if (!choice) return; // cancel
+ if (choice === 'dismiss') {
+ // User just wants to remove the finding without adding to wishlist
+ await dismissRepairFinding(id);
+ return;
+ }
+ // 'add_to_wishlist' — fall through to the fix endpoint. The handler
+ // already defaults to adding to wishlist, so no fix_action is needed.
+ }
+
+ const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+ const fixBtn = card ? card.querySelector('.repair-finding-btn.fix') : null;
+ let originalText = '';
+ if (fixBtn) {
+ originalText = fixBtn.textContent;
+ fixBtn.disabled = true;
+ fixBtn.textContent = '...';
+ }
+ try {
+ const body = fixAction ? { fix_action: fixAction } : {};
+ const response = await fetch(`/api/repair/findings/${id}/fix`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body),
+ });
+ const result = await response.json();
+ if (result.success) {
+ showToast(result.message || 'Fixed successfully', 'success');
+ } else {
+ showToast(result.error || 'Fix failed', 'error');
+ }
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+ updateRepairStatus();
+ } catch (error) {
+ console.error('Error fixing finding:', error);
+ showToast('Error applying fix', 'error');
+ if (fixBtn) {
+ fixBtn.disabled = false;
+ fixBtn.textContent = originalText;
+ }
+ }
+}
+
+function _promptOrphanAction() {
+ return new Promise(resolve => {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
+ overlay.innerHTML = `
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ overlay.querySelector('#_orphan-staging').onclick = () => { overlay.remove(); resolve('staging'); };
+ overlay.querySelector('#_orphan-delete').onclick = () => { overlay.remove(); resolve('delete'); };
+ overlay.querySelector('#_orphan-cancel').onclick = () => { overlay.remove(); resolve(null); };
+ overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+ });
+}
+
+function _promptDeadFileAction() {
+ return new Promise(resolve => {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
+ overlay.innerHTML = `
+ Orphan File Action
+
+ Choose how to handle orphan files. Staging is safe and reversible.
+
+
+
+
+
+
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ overlay.querySelector('#_dead-redownload').onclick = () => { overlay.remove(); resolve('redownload'); };
+ overlay.querySelector('#_dead-remove').onclick = () => { overlay.remove(); resolve('remove'); };
+ overlay.querySelector('#_dead-cancel').onclick = () => { overlay.remove(); resolve(null); };
+ overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+ });
+}
+
+function _promptAcoustidAction() {
+ return new Promise(resolve => {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
+ overlay.innerHTML = `
+ Dead File Action
+
+ This track's file no longer exists on disk. Choose how to handle it.
+
+
+
+
+
+
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ overlay.querySelector('#_acid-retag').onclick = () => { overlay.remove(); resolve('retag'); };
+ overlay.querySelector('#_acid-redownload').onclick = () => { overlay.remove(); resolve('redownload'); };
+ overlay.querySelector('#_acid-delete').onclick = () => { overlay.remove(); resolve('delete'); };
+ overlay.querySelector('#_acid-cancel').onclick = () => { overlay.remove(); resolve(null); };
+ overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+ });
+}
+
+function _promptDiscographyBackfillAction(count = 1) {
+ const isSingle = count <= 1;
+ const headerText = isSingle ? 'Missing Discography Track' : `Missing Discography Tracks (${count})`;
+ const bodyText = isSingle
+ ? 'Add this track to the wishlist for automatic download, or just clear the finding?'
+ : `Add all ${count} selected tracks to the wishlist for automatic download, or just clear the findings?`;
+ const addLabel = isSingle ? 'Add to Wishlist' : `Add All ${count} to Wishlist`;
+ const clearLabel = isSingle ? 'Just Clear Finding' : 'Just Clear Findings';
+
+ return new Promise(resolve => {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
+ overlay.innerHTML = `
+ AcoustID Mismatch
+
+ The audio fingerprint doesn't match the expected track. Choose how to fix it.
+
+
+
+
+
+
+
+ Retag = update metadata to match actual audio • Re-download = add correct track to wishlist & delete wrong file • Delete = remove file and DB entry
+
+
+
+
+
+
+ `;
+ // Assign text content (avoids HTML-escaping gotchas with dynamic values)
+ overlay.querySelector('#_dbf-header').textContent = headerText;
+ overlay.querySelector('#_dbf-body').textContent = bodyText;
+ overlay.querySelector('#_dbf-add').textContent = addLabel;
+ overlay.querySelector('#_dbf-dismiss').textContent = clearLabel;
+ document.body.appendChild(overlay);
+
+ overlay.querySelector('#_dbf-add').onclick = () => { overlay.remove(); resolve('add_to_wishlist'); };
+ overlay.querySelector('#_dbf-dismiss').onclick = () => { overlay.remove(); resolve('dismiss'); };
+ overlay.querySelector('#_dbf-cancel').onclick = () => { overlay.remove(); resolve(null); };
+ overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+ });
+}
+
+async function resolveRepairFinding(id) {
+ try {
+ await fetch(`/api/repair/findings/${id}/resolve`, { method: 'POST' });
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+ updateRepairStatus();
+ } catch (error) {
+ console.error('Error resolving finding:', error);
+ }
+}
+
+async function dismissRepairFinding(id) {
+ try {
+ await fetch(`/api/repair/findings/${id}/dismiss`, { method: 'POST' });
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+ updateRepairStatus();
+ } catch (error) {
+ console.error('Error dismissing finding:', error);
+ }
+}
+
+async function bulkRepairAction(action) {
+ if (_repairSelectedFindings.size === 0) return;
+ try {
+ await fetch('/api/repair/findings/bulk', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ ids: Array.from(_repairSelectedFindings), action })
+ });
+ showToast(`${_repairSelectedFindings.size} findings ${action === 'dismiss' ? 'dismissed' : 'resolved'}`, 'success');
+ _repairSelectedFindings.clear();
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+ updateRepairStatus();
+ } catch (error) {
+ console.error('Error bulk updating findings:', error);
+ showToast('Error updating findings', 'error');
+ }
+}
+
+async function bulkFixFindings() {
+ if (_repairSelectedFindings.size === 0) return;
+ const ids = Array.from(_repairSelectedFindings);
+
+ // If any selected findings are orphan files, prompt for action FIRST
+ const selectedOrphanCards = ids.filter(id => {
+ const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+ return card && card.dataset.jobId === 'orphan_file_detector';
+ });
+ let orphanFixAction = null;
+ if (selectedOrphanCards.length > 0) {
+ orphanFixAction = await _promptOrphanAction();
+ if (!orphanFixAction) return;
+ // Only show scary dialog for mass deletion, not staging
+ if (orphanFixAction === 'delete' && selectedOrphanCards.length > MASS_ORPHAN_THRESHOLD) {
+ const hasMassFlag = ids.some(id => {
+ const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+ return card && card.dataset.massOrphan === 'true';
+ });
+ if (hasMassFlag && !await showWitnessMeDialog(selectedOrphanCards.length)) return;
+ }
+ }
+
+ // If any selected findings are dead files, prompt for action
+ const selectedDeadCards = ids.filter(id => {
+ const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+ return card && card.dataset.jobId === 'dead_file_cleaner';
+ });
+ let deadFixAction = null;
+ if (selectedDeadCards.length > 0) {
+ deadFixAction = await _promptDeadFileAction();
+ if (!deadFixAction) return;
+ }
+
+ // If any selected findings are AcoustID mismatches, prompt for action
+ const selectedAcoustidCards = ids.filter(id => {
+ const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+ return card && card.dataset.jobId === 'acoustid_scanner';
+ });
+ let acoustidFixAction = null;
+ if (selectedAcoustidCards.length > 0) {
+ acoustidFixAction = await _promptAcoustidAction();
+ if (!acoustidFixAction) return;
+ }
+
+ // If any selected findings are discography backfill, prompt once (add-to-wishlist vs clear)
+ const selectedBackfillCards = ids.filter(id => {
+ const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+ return card && card.dataset.jobId === 'discography_backfill';
+ });
+ let backfillAction = null;
+ if (selectedBackfillCards.length > 0) {
+ backfillAction = await _promptDiscographyBackfillAction(selectedBackfillCards.length);
+ if (!backfillAction) return;
+ }
+
+ let fixed = 0, failed = 0, lastError = '';
+ showToast(`Fixing ${ids.length} findings...`, 'info');
+
+ for (const id of ids) {
+ try {
+ // Determine if this finding needs a specific action
+ const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+ const isOrphan = card && card.dataset.jobId === 'orphan_file_detector';
+ const isDead = card && card.dataset.jobId === 'dead_file_cleaner';
+ const isAcoustid = card && card.dataset.jobId === 'acoustid_scanner';
+ const isBackfill = card && card.dataset.jobId === 'discography_backfill';
+
+ // Discography backfill "Just Clear" path uses the dismiss endpoint,
+ // not the fix endpoint — so handle it inline before the fix call.
+ if (isBackfill && backfillAction === 'dismiss') {
+ try {
+ const resp = await fetch(`/api/repair/findings/${id}/dismiss`, { method: 'POST' });
+ if (resp.ok) fixed++;
+ else { failed++; lastError = 'dismiss failed'; }
+ } catch {
+ failed++;
+ }
+ continue;
+ }
+
+ let body = {};
+ if (isOrphan && orphanFixAction) body = { fix_action: orphanFixAction };
+ else if (isDead && deadFixAction) body = { fix_action: deadFixAction };
+ else if (isAcoustid && acoustidFixAction) body = { fix_action: acoustidFixAction };
+ // Discography backfill "Add to Wishlist" falls through with empty body
+ // — the fix handler already adds to wishlist by default.
+
+ const response = await fetch(`/api/repair/findings/${id}/fix`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body),
+ });
+ const result = await response.json();
+ if (result.success) fixed++;
+ else { failed++; lastError = result.error || 'unknown error'; }
+ } catch {
+ failed++;
+ }
+ }
+
+ _repairSelectedFindings.clear();
+ let fixMsg = `Fixed ${fixed}${failed ? `, ${failed} failed` : ''}`;
+ if (failed && lastError) fixMsg += `: ${lastError}`;
+ showToast(fixMsg, fixed > 0 ? 'success' : 'error');
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+ updateRepairStatus();
+}
+
+async function clearRepairFindings() {
+ const jobFilter = document.getElementById('repair-findings-job-filter');
+ const statusFilter = document.getElementById('repair-findings-status-filter');
+ const jobId = jobFilter ? jobFilter.value : '';
+ const status = statusFilter ? statusFilter.value : '';
+
+ const scopeLabel = jobId ? jobId.replace(/_/g, ' ') : 'all jobs';
+ const statusLabel = status ? ` (${status})` : '';
+ if (!await showConfirmDialog({
+ title: 'Clear Findings',
+ message: `Delete all findings for ${scopeLabel}${statusLabel}? This cannot be undone.`,
+ confirmText: 'Clear',
+ destructive: true
+ })) return;
+
+ try {
+ const body = {};
+ if (jobId) body.job_id = jobId;
+ if (status) body.status = status;
+
+ const response = await fetch('/api/repair/findings/clear', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body)
+ });
+ const result = await response.json();
+ if (result.success) {
+ showToast(`Cleared ${result.deleted} findings`, 'success');
+ } else {
+ showToast(result.error || 'Failed to clear findings', 'error');
+ }
+ _repairSelectedFindings.clear();
+ loadRepairFindingsDashboard();
+ loadRepairFindings();
+ updateRepairStatus();
+ } catch (error) {
+ console.error('Error clearing findings:', error);
+ showToast('Error clearing findings', 'error');
+ }
+}
+
+async function loadRepairHistory() {
+ const container = document.getElementById('repair-history-list');
+ if (!container) return;
+
+ try {
+ const response = await fetch('/api/repair/history?limit=50');
+ if (!response.ok) throw new Error('Failed to fetch history');
+ const data = await response.json();
+ const runs = data.runs || [];
+
+ if (runs.length === 0) {
+ container.innerHTML = `
+
+
+
+
+
+
+
`;
+ return;
+ }
+
+ container.innerHTML = runs.map(run => {
+ const duration = run.duration_seconds ? `${run.duration_seconds.toFixed(1)}s` : '-';
+ const age = formatCacheAge(run.started_at);
+ const statusClass = run.status === 'completed' ? 'success' :
+ run.status === 'failed' ? 'error' : 'running';
+
+ // Build stat pills
+ const stats = [];
+ stats.push(`${(run.items_scanned || 0).toLocaleString()} scanned`);
+ if (run.findings_created) stats.push(`${run.findings_created} findings`);
+ if (run.auto_fixed) stats.push(`${run.auto_fixed} fixed`);
+ if (run.errors) stats.push(`${run.errors} errors`);
+
+ // Format timestamps
+ const startTime = run.started_at ? new Date(run.started_at).toLocaleString() : '-';
+ const endTime = run.finished_at ? new Date(run.finished_at).toLocaleString() : 'In progress';
+
+ return `No History Yet
+ Job run history will appear here after maintenance jobs complete their first scan.
+
+
`;
+ }).join('');
+
+ } catch (error) {
+ console.error('Error loading repair history:', error);
+ container.innerHTML = '
+
+ ${run.display_name || run.job_id}
+ ${run.status}
+ ${duration}
+
+ ${stats.join('')}
+
+ Error loading history
';
+ }
+}
+
+// Initialize Repair Worker UI on page load
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ const button = document.getElementById('repair-button');
+ if (button) {
+ button.addEventListener('click', openRepairModal);
+ updateRepairStatus();
+ setInterval(updateRepairStatus, 5000);
+ }
+ });
+} else {
+ const button = document.getElementById('repair-button');
+ if (button) {
+ button.addEventListener('click', openRepairModal);
+ updateRepairStatus();
+ setInterval(updateRepairStatus, 5000);
+ }
+}
+
+// ===================================================================
+
diff --git a/webui/static/init.js b/webui/static/init.js
new file mode 100644
index 00000000..047e3675
--- /dev/null
+++ b/webui/static/init.js
@@ -0,0 +1,2359 @@
+// INITIALIZATION
+// ===============================
+
+// ---- Accent Color System ----
+
+function getAccentFallbackColors() {
+ let accent = localStorage.getItem('soulsync-accent') || '#1db954';
+ if (!/^#[0-9a-fA-F]{6}$/.test(accent)) accent = '#1db954';
+ // Compute a lighter variant for the second color
+ const r = parseInt(accent.slice(1, 3), 16), g = parseInt(accent.slice(3, 5), 16), b = parseInt(accent.slice(5, 7), 16);
+ const lighter = '#' + [Math.min(r + 20, 255), Math.min(g + 30, 255), Math.min(b + 12, 255)]
+ .map(v => v.toString(16).padStart(2, '0')).join('');
+ return [accent, lighter];
+}
+
+function applyAccentColor(hex) {
+ // Validate hex format — reject corrupt values
+ if (typeof hex !== 'string' || !/^#[0-9a-fA-F]{6}$/.test(hex)) {
+ hex = '#1db954'; // fallback to default
+ }
+ // Convert hex to RGB
+ const r = parseInt(hex.slice(1, 3), 16);
+ const g = parseInt(hex.slice(3, 5), 16);
+ const b = parseInt(hex.slice(5, 7), 16);
+
+ // Convert RGB to HSL
+ const rn = r / 255, gn = g / 255, bn = b / 255;
+ const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
+ const l = (max + min) / 2;
+ let h = 0, s = 0;
+ if (max !== min) {
+ const d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+ else if (max === gn) h = ((bn - rn) / d + 2) / 6;
+ else h = ((rn - gn) / d + 4) / 6;
+ }
+
+ // Compute light variant: +16% lightness
+ const lightL = Math.min(l + 0.16, 0.95);
+ // Compute neon variant: high lightness + boosted saturation
+ const neonL = Math.min(l + 0.30, 0.95);
+ const neonS = Math.min(s + 0.1, 1.0);
+
+ function hslToRgb(h, s, l) {
+ if (s === 0) { const v = Math.round(l * 255); return [v, v, v]; }
+ const hue2rgb = (p, q, t) => {
+ if (t < 0) t += 1; if (t > 1) t -= 1;
+ if (t < 1 / 6) return p + (q - p) * 6 * t;
+ if (t < 1 / 2) return q;
+ if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+ return p;
+ };
+ const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ const p = 2 * l - q;
+ return [Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+ Math.round(hue2rgb(p, q, h) * 255),
+ Math.round(hue2rgb(p, q, h - 1 / 3) * 255)];
+ }
+
+ const light = hslToRgb(h, s, lightL);
+ const neon = hslToRgb(h, neonS, neonL);
+
+ const root = document.documentElement.style;
+ root.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
+ root.setProperty('--accent-light-rgb', `${light[0]}, ${light[1]}, ${light[2]}`);
+ root.setProperty('--accent-neon-rgb', `${neon[0]}, ${neon[1]}, ${neon[2]}`);
+
+ // Store for instant restore on next page load
+ localStorage.setItem('soulsync-accent', hex);
+
+ // Update preview swatch if it exists
+ const swatch = document.getElementById('accent-preview-swatch');
+ if (swatch) swatch.style.background = hex;
+}
+
+function applyParticlesSetting(enabled) {
+ const canvas = document.getElementById('page-particles-canvas');
+ if (canvas) canvas.style.display = enabled ? '' : 'none';
+ if (window.pageParticles) {
+ if (enabled) {
+ const activePage = document.querySelector('.page.active');
+ if (activePage) {
+ window.pageParticles.setPage(activePage.id.replace('-page', ''));
+ }
+ } else {
+ window.pageParticles.stop();
+ }
+ }
+ window._particlesEnabled = enabled;
+ localStorage.setItem('soulsync-particles', String(enabled));
+}
+
+function applyWorkerOrbsSetting(enabled) {
+ window._workerOrbsEnabled = enabled;
+ localStorage.setItem('soulsync-worker-orbs', String(enabled));
+ if (window.workerOrbs) {
+ if (enabled) {
+ const activePage = document.querySelector('.page.active');
+ if (activePage && activePage.id === 'dashboard-page') {
+ window.workerOrbs.setPage('dashboard');
+ }
+ } else {
+ window.workerOrbs.setPage('_disabled');
+ }
+ }
+}
+
+function initAccentColorListeners() {
+ const presetSelect = document.getElementById('accent-preset');
+ const customGroup = document.getElementById('custom-color-group');
+ const customPicker = document.getElementById('accent-custom-color');
+ if (!presetSelect) return;
+
+ presetSelect.addEventListener('change', () => {
+ const val = presetSelect.value;
+ if (val === 'custom') {
+ if (customGroup) customGroup.style.display = '';
+ if (customPicker) applyAccentColor(customPicker.value);
+ } else {
+ if (customGroup) customGroup.style.display = 'none';
+ applyAccentColor(val);
+ }
+ });
+
+ if (customPicker) {
+ customPicker.addEventListener('input', () => {
+ applyAccentColor(customPicker.value);
+ });
+ }
+
+ // Particles toggle — apply immediately on change
+ const particlesCheckbox = document.getElementById('particles-enabled');
+ if (particlesCheckbox) {
+ particlesCheckbox.addEventListener('change', () => {
+ applyParticlesSetting(particlesCheckbox.checked);
+ });
+ }
+
+ // Worker orbs toggle — apply immediately on change
+ const workerOrbsCheckbox = document.getElementById('worker-orbs-enabled');
+ if (workerOrbsCheckbox) {
+ workerOrbsCheckbox.addEventListener('change', () => {
+ applyWorkerOrbsSetting(workerOrbsCheckbox.checked);
+ });
+ }
+
+ // Reduce effects toggle — apply immediately on change
+ const reduceEffectsCheckbox = document.getElementById('reduce-effects-enabled');
+ if (reduceEffectsCheckbox) {
+ reduceEffectsCheckbox.addEventListener('change', () => {
+ applyReduceEffects(reduceEffectsCheckbox.checked);
+ });
+ }
+}
+
+function applyReduceEffects(enabled) {
+ if (enabled) {
+ document.body.classList.add('reduce-effects');
+ } else {
+ document.body.classList.remove('reduce-effects');
+ }
+ localStorage.setItem('soulsync-reduce-effects', enabled ? '1' : '0');
+}
+
+// Bootstrap accent and reduce-effects from localStorage instantly (prevents flash)
+(function () {
+ if (localStorage.getItem('soulsync-reduce-effects') === '1') {
+ document.body.classList.add('reduce-effects');
+ }
+ const saved = localStorage.getItem('soulsync-accent');
+ if (saved) applyAccentColor(saved);
+ // Bootstrap particles setting from localStorage
+ const particlesSaved = localStorage.getItem('soulsync-particles');
+ if (particlesSaved === 'false') {
+ window._particlesEnabled = false;
+ const canvas = document.getElementById('page-particles-canvas');
+ if (canvas) canvas.style.display = 'none';
+ }
+ // Bootstrap worker orbs setting from localStorage
+ const workerOrbsSaved = localStorage.getItem('soulsync-worker-orbs');
+ if (workerOrbsSaved === 'false') {
+ window._workerOrbsEnabled = false;
+ }
+})();
+
+// ── Profile System ─────────────────────────────────────────────
+let currentProfile = null;
+
+function getProfileHomePage() {
+ if (!currentProfile) return 'dashboard';
+ if (currentProfile.home_page) return currentProfile.home_page;
+ return currentProfile.is_admin ? 'dashboard' : 'discover';
+}
+
+function isPageAllowed(pageId) {
+ if (!currentProfile) return true;
+ if (currentProfile.id === 1) return true;
+ if (pageId === 'help' || pageId === 'issues') return true;
+ if (pageId === 'artist-detail') {
+ // artist-detail requires library access
+ const ap = currentProfile.allowed_pages;
+ if (!ap) return true;
+ return ap.includes('library');
+ }
+ if (pageId === 'settings') return currentProfile.is_admin;
+ const ap = currentProfile.allowed_pages;
+ if (!ap) return true; // null = all pages
+ return ap.includes(pageId);
+}
+
+function canDownload() {
+ if (!currentProfile) return true;
+ if (currentProfile.id === 1) return true;
+ return currentProfile.can_download !== false && currentProfile.can_download !== 0;
+}
+
+function renderProfileAvatar(el, profile) {
+ // Renders avatar as image (if avatar_url set) or colored initial fallback
+ // Preserves existing classes, ensures 'profile-avatar' is present
+ if (!el.classList.contains('profile-avatar') && !el.classList.contains('profile-indicator-avatar') && !el.classList.contains('profile-pin-avatar')) {
+ el.className = 'profile-avatar';
+ }
+ el.style.background = profile.avatar_color || '#6366f1';
+ el.textContent = '';
+ if (profile.avatar_url) {
+ const img = document.createElement('img');
+ img.src = profile.avatar_url;
+ img.alt = profile.name;
+ img.className = 'profile-avatar-img';
+ img.onerror = () => {
+ img.remove();
+ el.textContent = profile.name.charAt(0).toUpperCase();
+ };
+ el.appendChild(img);
+ } else {
+ el.textContent = profile.name.charAt(0).toUpperCase();
+ }
+}
+
+async function initProfileSystem() {
+ try {
+ // Check if a session already has a profile selected
+ const currentRes = await fetch('/api/profiles/current');
+ const currentData = await currentRes.json();
+ if (currentData.success && currentData.profile) {
+ currentProfile = currentData.profile;
+ updateProfileIndicator();
+
+ // Check if launch PIN is required
+ if (currentData.launch_pin_required) {
+ showLaunchPinScreen();
+ return false; // Defer app init until PIN verified
+ }
+
+ return true; // Profile already selected, skip picker
+ }
+
+ // Fetch all profiles
+ const res = await fetch('/api/profiles');
+ const data = await res.json();
+ const profiles = data.profiles || [];
+
+ if (profiles.length === 0) {
+ // No profiles yet — auto-select admin profile 1
+ await selectProfile(1);
+ return true;
+ }
+
+ if (profiles.length === 1) {
+ // Only one profile — always auto-select (PIN only matters with multiple profiles)
+ await selectProfile(profiles[0].id);
+
+ // Re-check for launch PIN after auto-select
+ const recheck = await fetch('/api/profiles/current');
+ const recheckData = await recheck.json();
+ if (recheckData.launch_pin_required) {
+ showLaunchPinScreen();
+ return false;
+ }
+
+ return true;
+ }
+
+ // Multiple profiles or PIN required — show picker
+ showProfilePicker(profiles);
+ return false; // App init deferred until profile selected
+ } catch (e) {
+ console.error('Profile init error:', e);
+ return true; // Fall through to normal init
+ }
+}
+
+// ── Launch PIN Lock Screen ─────────────────────────────────────────────
+
+function showLaunchPinScreen() {
+ const overlay = document.getElementById('launch-pin-overlay');
+ if (!overlay) return;
+ overlay.style.display = 'flex';
+
+ const input = document.getElementById('launch-pin-input');
+ const submit = document.getElementById('launch-pin-submit');
+ const error = document.getElementById('launch-pin-error');
+
+ input.value = '';
+ error.style.display = 'none';
+ setTimeout(() => input.focus(), 100);
+
+ const doSubmit = async () => {
+ const pin = input.value.trim();
+ if (!pin) return;
+
+ submit.disabled = true;
+ submit.textContent = 'Verifying...';
+
+ try {
+ const res = await fetch('/api/profiles/verify-launch-pin', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ pin })
+ });
+ const data = await res.json();
+
+ if (data.success) {
+ // Server session flag set by verify endpoint — consumed on next /api/profiles/current call
+ overlay.style.display = 'none';
+ initApp(); // Now safe to load the full app
+ } else {
+ error.textContent = data.error || 'Invalid PIN';
+ error.style.display = 'block';
+ input.value = '';
+ input.focus();
+ // Shake animation
+ overlay.querySelector('.launch-pin-container').classList.add('shake');
+ setTimeout(() => overlay.querySelector('.launch-pin-container').classList.remove('shake'), 500);
+ }
+ } catch (e) {
+ error.textContent = 'Connection error';
+ error.style.display = 'block';
+ }
+
+ submit.disabled = false;
+ submit.textContent = 'Unlock';
+ };
+
+ // Remove old listeners to prevent stacking
+ const newSubmit = submit.cloneNode(true);
+ submit.parentNode.replaceChild(newSubmit, submit);
+ newSubmit.addEventListener('click', doSubmit);
+
+ input.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') doSubmit();
+ });
+}
+
+// ── Security Settings Helpers ──────────────────────────────────────────
+
+async function saveSecurityPin() {
+ const pin = document.getElementById('security-new-pin').value;
+ const confirm = document.getElementById('security-confirm-pin').value;
+ const msg = document.getElementById('security-pin-msg');
+
+ if (!pin || pin.length < 4) {
+ msg.textContent = 'PIN must be at least 4 characters';
+ msg.style.display = 'block';
+ msg.style.color = '#ff5252';
+ return;
+ }
+ if (pin !== confirm) {
+ msg.textContent = 'PINs do not match';
+ msg.style.display = 'block';
+ msg.style.color = '#ff5252';
+ return;
+ }
+
+ try {
+ const res = await fetch('/api/profiles/1/set-pin', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ pin })
+ });
+ const data = await res.json();
+
+ if (data.success) {
+ msg.textContent = 'PIN saved! You can now enable the lock screen.';
+ msg.style.color = '#4caf50';
+ msg.style.display = 'block';
+
+ // Update UI — hide setup, show change, enable toggle
+ document.getElementById('security-pin-setup').style.display = 'none';
+ document.getElementById('security-change-pin-section').style.display = 'block';
+ document.getElementById('security-require-pin').disabled = false;
+
+ // Clear inputs
+ document.getElementById('security-new-pin').value = '';
+ document.getElementById('security-confirm-pin').value = '';
+ } else {
+ msg.textContent = data.error || 'Failed to save PIN';
+ msg.style.color = '#ff5252';
+ msg.style.display = 'block';
+ }
+ } catch (e) {
+ msg.textContent = 'Connection error';
+ msg.style.color = '#ff5252';
+ msg.style.display = 'block';
+ }
+}
+
+function handleSecurityPinToggle(checkbox) {
+ // If trying to enable but no PIN, show the setup section
+ if (checkbox.checked) {
+ const setupSection = document.getElementById('security-pin-setup');
+ if (setupSection.style.display !== 'none' || checkbox.disabled) {
+ checkbox.checked = false;
+ setupSection.style.display = 'block';
+ document.getElementById('security-new-pin').focus();
+ return;
+ }
+ }
+ // Auto-save this setting
+ saveSettings(true);
+}
+
+function showChangeSecurityPin() {
+ document.getElementById('security-pin-setup').style.display = 'block';
+ document.getElementById('security-new-pin').focus();
+}
+
+// ── Forgot PIN Recovery ────────────────────────────────────────────────
+
+function showForgotPinView() {
+ document.getElementById('launch-pin-entry').style.display = 'none';
+ document.getElementById('launch-pin-recovery').style.display = 'block';
+ document.getElementById('launch-recovery-input').value = '';
+ document.getElementById('launch-recovery-error').style.display = 'none';
+ setTimeout(() => document.getElementById('launch-recovery-input').focus(), 100);
+}
+
+function showPinEntryView() {
+ document.getElementById('launch-pin-recovery').style.display = 'none';
+ document.getElementById('launch-pin-entry').style.display = 'block';
+ setTimeout(() => document.getElementById('launch-pin-input').focus(), 100);
+}
+
+async function submitRecoveryCredential() {
+ const input = document.getElementById('launch-recovery-input');
+ const error = document.getElementById('launch-recovery-error');
+ const btn = document.getElementById('launch-recovery-submit');
+ const credential = input.value.trim();
+
+ if (!credential) return;
+
+ btn.disabled = true;
+ btn.textContent = 'Verifying...';
+ error.style.display = 'none';
+
+ try {
+ const res = await fetch('/api/profiles/reset-pin-via-credential', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ credential })
+ });
+ const data = await res.json();
+
+ if (data.success) {
+ sessionStorage.setItem('soulsync_pin_ok', '1');
+ document.getElementById('launch-pin-overlay').style.display = 'none';
+ initApp();
+ setTimeout(() => showToast('PIN cleared. You can set a new one in Settings → Advanced.', 'success'), 1000);
+ } else {
+ error.textContent = data.error || 'Credential not recognized';
+ error.style.display = 'block';
+ input.value = '';
+ input.focus();
+ document.getElementById('launch-pin-container').classList.add('shake');
+ setTimeout(() => document.getElementById('launch-pin-container').classList.remove('shake'), 500);
+ }
+ } catch (e) {
+ error.textContent = 'Connection error';
+ error.style.display = 'block';
+ }
+
+ btn.disabled = false;
+ btn.textContent = 'Verify & Reset PIN';
+}
+
+// ── Profile PIN Forgot Recovery ────────────────────────────────────────
+function showProfileForgotPin() {
+ const dialog = document.getElementById('profile-pin-dialog');
+ const content = dialog.querySelector('.profile-pin-content');
+
+ // Store the profile ID we're recovering for
+ const profileName = document.getElementById('profile-pin-name').textContent;
+
+ // Replace dialog content with recovery form
+ content.dataset.prevHtml = content.innerHTML;
+ content.innerHTML = `
+ Reset PIN for ${profileName}
+Enter any configured API credential
(Spotify secret, Plex token, etc.)
Loading...
';
+
+ try {
+ // Load all per-profile service data in parallel
+ const [lbRes, spotifyRes] = await Promise.all([
+ fetch('/api/profiles/me/listenbrainz'),
+ fetch('/api/profiles/me/spotify'),
+ ]);
+ const lbData = await lbRes.json();
+ const spotifyData = await spotifyRes.json();
+
+ body.innerHTML = '';
+ const isNonAdmin = currentProfile && !currentProfile.is_admin;
+
+ if (isNonAdmin) {
+ // Tabbed layout for non-admin with multiple sections
+ const tabs = [
+ { id: 'music', label: 'Music Services' },
+ { id: 'server', label: 'Server' },
+ { id: 'scrobble', label: 'Scrobbling' },
+ ];
+ const tabBar = document.createElement('div');
+ tabBar.className = 'ps-tabbar';
+ tabs.forEach((t, i) => {
+ const btn = document.createElement('button');
+ btn.className = 'ps-tab' + (i === 0 ? ' active' : '');
+ btn.textContent = t.label;
+ btn.onclick = () => {
+ tabBar.querySelectorAll('.ps-tab').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ body.querySelectorAll('.ps-tab-content').forEach(c => c.classList.remove('active'));
+ const target = document.getElementById(`ps-tab-${t.id}`);
+ if (target) target.classList.add('active');
+ };
+ tabBar.appendChild(btn);
+ });
+ body.appendChild(tabBar);
+
+ // Music Services tab
+ const musicTab = document.createElement('div');
+ musicTab.id = 'ps-tab-music';
+ musicTab.className = 'ps-tab-content active';
+ renderPersonalSettingsSpotify(musicTab, spotifyData);
+ renderPersonalSettingsTidal(musicTab);
+ body.appendChild(musicTab);
+
+ // Server tab
+ const serverTab = document.createElement('div');
+ serverTab.id = 'ps-tab-server';
+ serverTab.className = 'ps-tab-content';
+ serverTab.innerHTML = 'Loading libraries...
';
+ body.appendChild(serverTab);
+ // Load server libraries async (don't block modal)
+ fetch('/api/profiles/me/server-library').then(r => r.json()).then(libData => {
+ serverTab.innerHTML = '';
+ renderPersonalSettingsServerLibrary(serverTab, libData);
+ }).catch(() => {
+ serverTab.innerHTML = '';
+ renderPersonalSettingsServerLibrary(serverTab, {});
+ });
+
+ // Scrobbling tab
+ const scrobbleTab = document.createElement('div');
+ scrobbleTab.id = 'ps-tab-scrobble';
+ scrobbleTab.className = 'ps-tab-content';
+ body.appendChild(scrobbleTab);
+ // Render LB into the scrobble tab
+ const origBody = body;
+ renderPersonalSettingsLB(lbData, scrobbleTab);
+ } else {
+ // Admin: just ListenBrainz, no tabs
+ const content = document.createElement('div');
+ content.style.padding = '18px 22px 22px';
+ body.appendChild(content);
+ renderPersonalSettingsLB(lbData, content);
+ }
+ } catch (e) {
+ body.innerHTML = 'Failed to load settings
';
+ }
+}
+
+function closePersonalSettings() {
+ const overlay = document.getElementById('personal-settings-overlay');
+ if (overlay) overlay.style.display = 'none';
+}
+
+function renderPersonalSettingsSpotify(body, data) {
+ const hasCreds = data.has_credentials;
+ const clientId = data.client_id || '';
+
+ let contentHtml;
+ if (hasCreds) {
+ contentHtml = `
+
+
+
+
+
+ Credentials configured
+ Client ID: ${escapeHtml(clientId.substring(0, 8))}...
+ Personal Spotify app
+
+
+
+
+ `;
+ } else {
+ contentHtml = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create an app at developer.spotify.com and add the redirect URI
+
+
+
+
+ `;
+ }
+
+ const section = document.createElement('div');
+ section.id = 'ps-spotify-section';
+ section.innerHTML = `
+
+
+ `;
+
+ const existing = document.getElementById('ps-spotify-section');
+ if (existing) existing.replaceWith(section);
+ else body.appendChild(section);
+}
+
+async function savePersonalSpotify() {
+ const clientId = document.getElementById('ps-spotify-client-id')?.value?.trim();
+ const clientSecret = document.getElementById('ps-spotify-client-secret')?.value?.trim();
+ const redirectUri = document.getElementById('ps-spotify-redirect-uri')?.value?.trim();
+ const resultEl = document.getElementById('ps-spotify-result');
+
+ if (!clientId || !clientSecret) {
+ if (resultEl) resultEl.innerHTML = '
+
+ Spotify
+ + + ${hasCreds ? 'Configured' : 'Not configured'} + +
+ Connect your own Spotify account to see your playlists instead of the admin's.
+
+ ${contentHtml}
+ Client ID and Secret are required
';
+ return;
+ }
+
+ try {
+ const res = await fetch('/api/profiles/me/spotify', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ client_id: clientId, client_secret: clientSecret, redirect_uri: redirectUri })
+ });
+ const data = await res.json();
+ if (data.success) {
+ showToast('Spotify credentials saved', 'success');
+ openPersonalSettings(); // Reload to show connected state
+ } else {
+ if (resultEl) resultEl.innerHTML = `${data.error || 'Failed to save'}
`;
+ }
+ } catch (e) {
+ if (resultEl) resultEl.innerHTML = 'Network error
';
+ }
+}
+
+async function authenticatePersonalSpotify() {
+ // Trigger OAuth flow with profile_id in state so callback knows which profile
+ window.open('/auth/spotify?profile_id=' + (currentProfile?.id || ''), '_blank');
+}
+
+function renderPersonalSettingsTidal(body) {
+ const section = document.createElement('div');
+ section.id = 'ps-tidal-section';
+ section.innerHTML = `
+
+
+ `;
+ const existing = document.getElementById('ps-tidal-section');
+ if (existing) existing.replaceWith(section);
+ else body.appendChild(section);
+}
+
+function authenticatePersonalTidal() {
+ window.open('/auth/tidal?profile_id=' + (currentProfile?.id || ''), '_blank');
+}
+
+async function renderPersonalSettingsServerLibrary(container, profileData) {
+ const section = document.createElement('div');
+ section.id = 'ps-server-library-section';
+
+ // Detect which server is active
+ let serverType = 'none';
+ let libraries = [];
+ let users = [];
+ const currentLib = profileData || {};
+
+ try {
+ // Try each server type to find the active one
+ const plexRes = await fetch('/api/plex/music-libraries');
+ if (plexRes.ok) {
+ const plexData = await plexRes.json();
+ if (plexData.libraries && plexData.libraries.length > 0) {
+ serverType = 'plex';
+ libraries = plexData.libraries;
+ }
+ }
+ } catch (e) { }
+
+ if (serverType === 'none') {
+ try {
+ const jellyRes = await fetch('/api/jellyfin/music-libraries');
+ if (jellyRes.ok) {
+ const jellyData = await jellyRes.json();
+ if (jellyData.libraries && jellyData.libraries.length > 0) {
+ serverType = 'jellyfin';
+ libraries = jellyData.libraries;
+ users = jellyData.users || [];
+ }
+ }
+ } catch (e) { }
+ }
+
+ if (serverType === 'none') {
+ section.innerHTML = `
+
+
+ Tidal
+
+ Connect your own Tidal account to see your playlists. Uses the admin's Tidal app credentials.
+
+
+
+
+
+
+ `;
+ } else if (serverType === 'plex') {
+ const selectedLib = currentLib.plex_library_id || '';
+ const optionsHtml = libraries.map(lib => {
+ const name = lib.name || lib.title || lib;
+ const val = typeof lib === 'string' ? lib : (lib.name || lib.title);
+ return ``;
+ }).join('');
+
+ section.innerHTML = `
+
+
+ Media Server
+No media server connected. Ask your admin to configure Plex, Jellyfin, or Navidrome in Settings.
+
+
+ `;
+ } else if (serverType === 'jellyfin') {
+ const selectedUser = currentLib.jellyfin_user_id || '';
+ const selectedLib = currentLib.jellyfin_library_id || '';
+
+ const userOpts = users.map(u => {
+ const uid = u.id || u.Id;
+ const uname = u.name || u.Name;
+ return ``;
+ }).join('');
+
+ const libOpts = libraries.map(lib => {
+ const lid = lib.key || lib.id || lib.Id;
+ const lname = lib.name || lib.Name || lib.title;
+ return ``;
+ }).join('');
+
+ section.innerHTML = `
+
+
+ Plex Library
+ + + ${selectedLib ? 'Custom' : 'Default'} + +Choose which Plex music library your playlists sync to.
+
+
+
+
+
+
+
+
+
+ `;
+ }
+
+ const existing = document.getElementById('ps-server-library-section');
+ if (existing) existing.replaceWith(section);
+ else container.appendChild(section);
+}
+
+async function savePersonalServerLibrary() {
+ try {
+ const plexSelect = document.getElementById('ps-plex-library-select');
+ const jellyUserSelect = document.getElementById('ps-jellyfin-user-select');
+ const jellyLibSelect = document.getElementById('ps-jellyfin-library-select');
+
+ if (plexSelect) {
+ await fetch('/api/profiles/me/server-library', {
+ method: 'POST', headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ server_type: 'plex', library_id: plexSelect.value || null })
+ });
+ }
+ if (jellyUserSelect || jellyLibSelect) {
+ await fetch('/api/profiles/me/server-library', {
+ method: 'POST', headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ server_type: 'jellyfin',
+ user_id: jellyUserSelect?.value || null,
+ library_id: jellyLibSelect?.value || null
+ })
+ });
+ }
+
+ showToast('Server library settings saved', 'success');
+ } catch (e) {
+ showToast('Error saving settings', 'error');
+ }
+}
+
+async function disconnectPersonalSpotify() {
+ try {
+ const res = await fetch('/api/profiles/me/spotify', { method: 'DELETE' });
+ const data = await res.json();
+ if (data.success) {
+ showToast('Spotify credentials removed — using shared config', 'info');
+ openPersonalSettings(); // Reload
+ }
+ } catch (e) {
+ showToast('Error removing credentials', 'error');
+ }
+}
+
+function renderPersonalSettingsLB(data, container) {
+ const body = container || document.getElementById('personal-settings-body');
+ const connected = data.connected;
+ const username = data.username || '';
+ const baseUrl = data.base_url || '';
+ const source = data.source || 'global';
+
+ const tokenFormHtml = `
+
+
+ Jellyfin
+ + + ${selectedUser || selectedLib ? 'Custom' : 'Default'} + +Choose which Jellyfin user and library your playlists sync to.
+ ${users.length ? `` : ''}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get your token from listenbrainz.org/profile
+
+
+
+
+
+ `;
+
+ let contentHtml;
+ if (connected && source === 'profile') {
+ // Personal token — show connected state with Disconnect
+ const serverDisplay = baseUrl ? baseUrl.replace(/\/1$/, '').replace(/^https?:\/\//, '') : 'api.listenbrainz.org';
+ contentHtml = `
+
+
+
+
+
+ Connected as ${escapeHtml(username)}
+ ${escapeHtml(serverDisplay)}
+ Personal token
+
+
+
+ `;
+ } else if (connected && source === 'global') {
+ // Using admin's shared token — show status + option to set own token
+ const serverDisplay = baseUrl ? baseUrl.replace(/\/1$/, '').replace(/^https?:\/\//, '') : 'api.listenbrainz.org';
+ contentHtml = `
+
+
+
+
+
+ Connected as ${escapeHtml(username)}
+ ${escapeHtml(serverDisplay)}
+ Using shared token from Settings
+
+
+ `;
+ } else {
+ // Not connected at all
+ contentHtml = tokenFormHtml;
+ }
+
+ const section = document.createElement('div');
+ section.id = 'ps-listenbrainz-section';
+ section.innerHTML = `
+ Set your own token to use a different ListenBrainz account:
+ ${tokenFormHtml}
+
+
+ `;
+ // Replace existing or append
+ const existing = document.getElementById('ps-listenbrainz-section');
+ if (existing) existing.replaceWith(section);
+ else body.appendChild(section);
+}
+
+async function testPersonalListenBrainz() {
+ const token = document.getElementById('ps-lb-token')?.value?.trim();
+ const baseUrl = document.getElementById('ps-lb-base-url')?.value?.trim() || '';
+ const resultEl = document.getElementById('ps-lb-result');
+ if (!token) {
+ if (resultEl) resultEl.innerHTML = '
+
+ ${contentHtml}
+ ListenBrainz
+ + + ${connected ? 'Connected' : 'Not connected'} + +Please enter a token
';
+ return;
+ }
+ if (resultEl) resultEl.innerHTML = 'Testing...
';
+ try {
+ const res = await fetch('/api/profiles/me/listenbrainz/test', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ token, base_url: baseUrl })
+ });
+ const data = await res.json();
+ if (data.success) {
+ resultEl.innerHTML = `Valid token — ${escapeHtml(data.username)}
`;
+ } else {
+ resultEl.innerHTML = `${escapeHtml(data.error || 'Invalid token')}
`;
+ }
+ } catch (e) {
+ resultEl.innerHTML = 'Connection failed
';
+ }
+}
+
+async function connectPersonalListenBrainz() {
+ const token = document.getElementById('ps-lb-token')?.value?.trim();
+ const baseUrl = document.getElementById('ps-lb-base-url')?.value?.trim() || '';
+ const resultEl = document.getElementById('ps-lb-result');
+ if (!token) {
+ if (resultEl) resultEl.innerHTML = 'Please enter a token
';
+ return;
+ }
+ // Disable buttons during connect
+ document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = true);
+ if (resultEl) resultEl.innerHTML = 'Connecting...
';
+ try {
+ const res = await fetch('/api/profiles/me/listenbrainz', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ token, base_url: baseUrl })
+ });
+ const data = await res.json();
+ if (data.success) {
+ showToast(`Connected to ListenBrainz as ${data.username}`, 'success');
+ // Re-render as connected
+ renderPersonalSettingsLB({ connected: true, username: data.username, base_url: baseUrl, source: 'profile' });
+ // Refresh LB playlists on discover page
+ _invalidateListenBrainzCache();
+ if (typeof initializeListenBrainzTabs === 'function') {
+ initializeListenBrainzTabs();
+ }
+ } else {
+ resultEl.innerHTML = `${escapeHtml(data.error || 'Connection failed')}
`;
+ document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = false);
+ }
+ } catch (e) {
+ resultEl.innerHTML = 'Connection failed
';
+ document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = false);
+ }
+}
+
+async function disconnectPersonalListenBrainz() {
+ try {
+ await fetch('/api/profiles/me/listenbrainz', { method: 'DELETE' });
+ showToast('ListenBrainz disconnected', 'info');
+ // Re-render as disconnected — re-fetch to check if global fallback exists
+ const res = await fetch('/api/profiles/me/listenbrainz');
+ const data = await res.json();
+ renderPersonalSettingsLB(data);
+ // Refresh LB playlists on discover page
+ _invalidateListenBrainzCache();
+ if (typeof initializeListenBrainzTabs === 'function') {
+ initializeListenBrainzTabs();
+ }
+ } catch (e) {
+ showToast('Failed to disconnect', 'error');
+ }
+}
+
+function _invalidateListenBrainzCache() {
+ if (typeof listenbrainzPlaylistsLoaded !== 'undefined') listenbrainzPlaylistsLoaded = false;
+ if (typeof listenbrainzPlaylistsCache !== 'undefined') {
+ try { Object.keys(listenbrainzPlaylistsCache).forEach(k => delete listenbrainzPlaylistsCache[k]); } catch (e) { }
+ }
+ if (typeof listenbrainzTracksCache !== 'undefined') {
+ try { Object.keys(listenbrainzTracksCache).forEach(k => delete listenbrainzTracksCache[k]); } catch (e) { }
+ }
+}
+
+function initProfileManagement() {
+ const manageBtn = document.getElementById('manage-profiles-btn');
+ const closeBtn = document.getElementById('profile-manage-close');
+ const createBtn = document.getElementById('create-profile-btn');
+ const adminPinBtn = document.getElementById('set-admin-pin-btn');
+
+ if (manageBtn) {
+ manageBtn.onclick = () => {
+ document.getElementById('profile-manage-panel').style.display = 'flex';
+ loadProfileManageList();
+ };
+ }
+
+ if (closeBtn) {
+ closeBtn.onclick = () => {
+ document.getElementById('profile-manage-panel').style.display = 'none';
+ // Refresh picker — keep cancel button if user already has a profile selected
+ const hasCancel = !!currentProfile;
+ fetch('/api/profiles').then(r => r.json()).then(d => {
+ showProfilePicker(d.profiles || [], hasCancel);
+ });
+ };
+ }
+
+ // Color picker
+ let selectedColor = '#6366f1';
+ document.querySelectorAll('.profile-color-swatch').forEach(swatch => {
+ swatch.onclick = () => {
+ document.querySelectorAll('.profile-color-swatch').forEach(s => s.classList.remove('selected'));
+ swatch.classList.add('selected');
+ selectedColor = swatch.dataset.color;
+ };
+ });
+ // Select first by default
+ const firstSwatch = document.querySelector('.profile-color-swatch');
+ if (firstSwatch) firstSwatch.classList.add('selected');
+
+ if (createBtn) {
+ createBtn.onclick = async () => {
+ const name = document.getElementById('new-profile-name').value.trim();
+ const avatarUrl = document.getElementById('new-profile-avatar-url').value.trim();
+ const pin = document.getElementById('new-profile-pin').value;
+ if (!name) return;
+
+ // Collect profile settings
+ const homePage = document.getElementById('new-profile-home-page').value || null;
+ const pageCheckboxes = document.querySelectorAll('#new-profile-allowed-pages input[type="checkbox"]:not(:disabled)');
+ const allChecked = Array.from(pageCheckboxes).every(cb => cb.checked);
+ const allowedPages = allChecked ? null : Array.from(pageCheckboxes).filter(cb => cb.checked).map(cb => cb.value);
+ const canDl = document.getElementById('new-profile-can-download').checked;
+
+ const res = await fetch('/api/profiles', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ name, avatar_color: selectedColor,
+ avatar_url: avatarUrl || undefined,
+ pin: pin || undefined,
+ home_page: homePage,
+ allowed_pages: allowedPages,
+ can_download: canDl
+ })
+ });
+ const data = await res.json();
+ if (data.success) {
+ document.getElementById('new-profile-name').value = '';
+ document.getElementById('new-profile-avatar-url').value = '';
+ document.getElementById('new-profile-pin').value = '';
+ document.getElementById('new-profile-home-page').value = '';
+ pageCheckboxes.forEach(cb => cb.checked = true);
+ document.getElementById('new-profile-can-download').checked = true;
+ loadProfileManageList();
+ // Show admin PIN section if >1 profiles and admin has no PIN
+ checkAdminPinRequired();
+ } else {
+ alert(data.error || 'Failed to create profile');
+ }
+ };
+ }
+
+ if (adminPinBtn) {
+ adminPinBtn.onclick = async () => {
+ const pin = document.getElementById('admin-pin-input').value;
+ if (!pin || pin.length < 1) return;
+ // Find admin profile
+ const res = await fetch('/api/profiles');
+ const data = await res.json();
+ const admin = (data.profiles || []).find(p => p.is_admin);
+ if (!admin) return;
+
+ try {
+ const pinRes = await fetch(`/api/profiles/${admin.id}/set-pin`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ pin })
+ });
+ const pinData = await pinRes.json();
+ if (!pinData.success) {
+ alert(pinData.error || 'Failed to set PIN');
+ return;
+ }
+ } catch (e) {
+ alert('Connection error');
+ return;
+ }
+ document.getElementById('admin-pin-input').value = '';
+ document.getElementById('admin-pin-section').style.display = 'none';
+ loadProfileManageList();
+ };
+ }
+}
+
+async function loadProfileManageList() {
+ const list = document.getElementById('profile-manage-list');
+ const res = await fetch('/api/profiles');
+ const data = await res.json();
+ const profiles = data.profiles || [];
+
+ list.innerHTML = '';
+ profiles.forEach(p => {
+ const item = document.createElement('div');
+ item.className = 'profile-manage-item';
+
+ const av = document.createElement('div');
+ renderProfileAvatar(av, p);
+ item.appendChild(av);
+
+ const info = document.createElement('div');
+ info.className = 'profile-info';
+ const nameDiv = document.createElement('div');
+ nameDiv.className = 'name';
+ nameDiv.textContent = p.name + (p.has_pin ? ' 🔒' : '');
+ info.appendChild(nameDiv);
+ const roleTags = [];
+ if (p.is_admin) roleTags.push('Admin');
+ if (p.can_download === false) roleTags.push('No Downloads');
+ if (p.allowed_pages) roleTags.push(`${p.allowed_pages.length} pages`);
+ if (roleTags.length) {
+ const roleDiv = document.createElement('div');
+ roleDiv.className = 'role';
+ roleDiv.textContent = roleTags.join(' · ');
+ info.appendChild(roleDiv);
+ }
+ item.appendChild(info);
+
+ const actions = document.createElement('div');
+ actions.className = 'profile-manage-actions';
+
+ const editBtn = document.createElement('button');
+ editBtn.className = 'profile-edit-btn';
+ editBtn.dataset.id = p.id;
+ editBtn.dataset.name = p.name;
+ editBtn.dataset.color = p.avatar_color || '#6366f1';
+ editBtn.dataset.avatarUrl = p.avatar_url || '';
+ editBtn.dataset.homePage = p.home_page || '';
+ editBtn.dataset.allowedPages = p.allowed_pages ? JSON.stringify(p.allowed_pages) : '';
+ editBtn.dataset.canDownload = p.can_download !== false ? '1' : '0';
+ editBtn.dataset.isAdmin = p.is_admin ? '1' : '0';
+ editBtn.title = 'Edit profile';
+ editBtn.textContent = '✏️';
+ actions.appendChild(editBtn);
+
+ if (!p.is_admin) {
+ const delBtn = document.createElement('button');
+ delBtn.className = 'profile-delete-btn';
+ delBtn.dataset.id = p.id;
+ delBtn.title = 'Delete profile';
+ delBtn.textContent = '🗑️';
+ actions.appendChild(delBtn);
+ }
+
+ item.appendChild(actions);
+ list.appendChild(item);
+ });
+
+ // Bind edit buttons
+ list.querySelectorAll('.profile-edit-btn').forEach(btn => {
+ btn.onclick = () => {
+ showProfileEditForm(btn.dataset.id, btn.dataset.name, btn.dataset.color, btn.dataset.avatarUrl, {
+ home_page: btn.dataset.homePage || '',
+ allowed_pages: btn.dataset.allowedPages ? JSON.parse(btn.dataset.allowedPages) : null,
+ can_download: btn.dataset.canDownload !== '0',
+ is_admin: btn.dataset.isAdmin === '1'
+ });
+ };
+ });
+
+ // Bind delete buttons
+ list.querySelectorAll('.profile-delete-btn').forEach(btn => {
+ btn.onclick = async () => {
+ if (!await showConfirmDialog({ title: 'Delete Profile', message: 'Delete this profile and all its data?', confirmText: 'Delete', destructive: true })) return;
+ try {
+ const res = await fetch(`/api/profiles/${btn.dataset.id}`, { method: 'DELETE' });
+ const data = await res.json();
+ if (!data.success) {
+ alert(data.error || 'Failed to delete profile');
+ }
+ } catch (e) {
+ alert('Connection error');
+ }
+ loadProfileManageList();
+ };
+ });
+
+ checkAdminPinRequired();
+}
+
+function showProfileEditForm(profileId, currentName, currentColor, currentAvatarUrl, profileSettings = {}) {
+ const list = document.getElementById('profile-manage-list');
+ // Remove any existing edit form
+ const existing = document.getElementById('profile-edit-form');
+ if (existing) existing.remove();
+
+ const isAdmin = currentProfile && currentProfile.is_admin;
+ const isEditingAdmin = profileSettings.is_admin;
+ const editColors = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#3b82f6', '#ef4444', '#8b5cf6', '#14b8a6'];
+ const pageLabels = {
+ dashboard: 'Dashboard', sync: 'Sync', downloads: 'Search', discover: 'Discover',
+ artists: 'Artists', automations: 'Automations', library: 'Library', stats: 'Listening Stats',
+ 'playlist-explorer': 'Playlist Explorer', import: 'Import', help: 'Help & Docs'
+ };
+
+ const form = document.createElement('div');
+ form.id = 'profile-edit-form';
+ form.className = 'profile-edit-form';
+
+ const nameInput = document.createElement('input');
+ nameInput.type = 'text';
+ nameInput.className = 'profile-input';
+ nameInput.value = currentName;
+ nameInput.maxLength = 20;
+ nameInput.placeholder = 'Profile name';
+ form.appendChild(nameInput);
+
+ const urlInput = document.createElement('input');
+ urlInput.type = 'url';
+ urlInput.className = 'profile-input';
+ urlInput.value = currentAvatarUrl || '';
+ urlInput.placeholder = 'Avatar image URL (optional)';
+ form.appendChild(urlInput);
+
+ const colorRow = document.createElement('div');
+ colorRow.className = 'profile-color-picker';
+ let editColor = currentColor;
+ editColors.forEach(c => {
+ const swatch = document.createElement('span');
+ swatch.className = 'profile-color-swatch' + (c === currentColor ? ' selected' : '');
+ swatch.style.background = c;
+ swatch.dataset.color = c;
+ swatch.onclick = () => {
+ colorRow.querySelectorAll('.profile-color-swatch').forEach(s => s.classList.remove('selected'));
+ swatch.classList.add('selected');
+ editColor = c;
+ };
+ colorRow.appendChild(swatch);
+ });
+ form.appendChild(colorRow);
+
+ // Home page selector — visible to everyone (self-edit or admin editing others)
+ const homeLabel = document.createElement('label');
+ homeLabel.className = 'profile-settings-label';
+ homeLabel.textContent = 'Home Page';
+ form.appendChild(homeLabel);
+
+ const homeSelect = document.createElement('select');
+ homeSelect.className = 'profile-input';
+ const defaultOpt = document.createElement('option');
+ defaultOpt.value = '';
+ defaultOpt.textContent = isEditingAdmin ? 'Default (Dashboard)' : 'Default (Discover)';
+ homeSelect.appendChild(defaultOpt);
+ // Filter home page options to only allowed pages
+ const allowedSet = profileSettings.allowed_pages;
+ Object.entries(pageLabels).forEach(([id, label]) => {
+ if (allowedSet && !allowedSet.includes(id)) return; // Skip non-permitted
+ const opt = document.createElement('option');
+ opt.value = id;
+ opt.textContent = label;
+ if (id === profileSettings.home_page) opt.selected = true;
+ homeSelect.appendChild(opt);
+ });
+ form.appendChild(homeSelect);
+
+ // Admin-only settings: allowed pages & can_download
+ let pageCheckboxes = [];
+ let canDlCheckbox = null;
+ if (isAdmin && !isEditingAdmin) {
+ const apLabel = document.createElement('label');
+ apLabel.className = 'profile-settings-label';
+ apLabel.textContent = 'Page Access';
+ form.appendChild(apLabel);
+
+ const apContainer = document.createElement('div');
+ apContainer.className = 'profile-page-checkboxes';
+ Object.entries(pageLabels).forEach(([id, label]) => {
+ const lbl = document.createElement('label');
+ const cb = document.createElement('input');
+ cb.type = 'checkbox';
+ cb.value = id;
+ cb.checked = !allowedSet || allowedSet.includes(id);
+ lbl.appendChild(cb);
+ lbl.appendChild(document.createTextNode(' ' + label));
+ apContainer.appendChild(lbl);
+ pageCheckboxes.push(cb);
+ });
+ // Always-on help
+ const helpLbl = document.createElement('label');
+ const helpCb = document.createElement('input');
+ helpCb.type = 'checkbox';
+ helpCb.checked = true;
+ helpCb.disabled = true;
+ helpLbl.appendChild(helpCb);
+ helpLbl.appendChild(document.createTextNode(' Help & Docs'));
+ apContainer.appendChild(helpLbl);
+ form.appendChild(apContainer);
+
+ const dlLabel = document.createElement('label');
+ dlLabel.className = 'profile-checkbox-label';
+ canDlCheckbox = document.createElement('input');
+ canDlCheckbox.type = 'checkbox';
+ canDlCheckbox.checked = profileSettings.can_download !== false;
+ dlLabel.appendChild(canDlCheckbox);
+ dlLabel.appendChild(document.createTextNode(' Can download music'));
+ form.appendChild(dlLabel);
+ }
+
+ const btnRow = document.createElement('div');
+ btnRow.className = 'profile-edit-buttons';
+
+ const saveBtn = document.createElement('button');
+ saveBtn.className = 'profile-create-btn';
+ saveBtn.textContent = 'Save';
+ saveBtn.onclick = async () => {
+ const newName = nameInput.value.trim();
+ if (!newName) { alert('Name cannot be empty'); return; }
+ const newAvatarUrl = urlInput.value.trim() || null;
+ const payload = { name: newName, avatar_color: editColor, avatar_url: newAvatarUrl };
+
+ // Home page
+ payload.home_page = homeSelect.value || null;
+
+ // Admin-only fields
+ if (isAdmin && !isEditingAdmin && pageCheckboxes.length) {
+ const allChecked = pageCheckboxes.every(cb => cb.checked);
+ payload.allowed_pages = allChecked ? null : pageCheckboxes.filter(cb => cb.checked).map(cb => cb.value);
+ payload.can_download = canDlCheckbox ? canDlCheckbox.checked : true;
+ }
+
+ try {
+ const res = await fetch(`/api/profiles/${profileId}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload)
+ });
+ const data = await res.json();
+ if (data.success) {
+ // Update sidebar indicator if editing current profile
+ if (currentProfile && currentProfile.id == profileId) {
+ currentProfile.name = newName;
+ currentProfile.avatar_color = editColor;
+ currentProfile.avatar_url = newAvatarUrl;
+ if (payload.home_page !== undefined) currentProfile.home_page = payload.home_page;
+ if (payload.allowed_pages !== undefined) currentProfile.allowed_pages = payload.allowed_pages;
+ if (payload.can_download !== undefined) currentProfile.can_download = payload.can_download;
+ updateProfileIndicator();
+ }
+ loadProfileManageList();
+ } else {
+ alert(data.error || 'Failed to update profile');
+ }
+ } catch (e) {
+ alert('Connection error');
+ }
+ };
+ btnRow.appendChild(saveBtn);
+
+ const cancelBtn = document.createElement('button');
+ cancelBtn.className = 'profile-picker-cancel';
+ cancelBtn.textContent = 'Cancel';
+ cancelBtn.onclick = () => form.remove();
+ btnRow.appendChild(cancelBtn);
+
+ form.appendChild(btnRow);
+ list.appendChild(form);
+ nameInput.focus();
+ nameInput.select();
+}
+
+function showSelfEditForm() {
+ if (!currentProfile) return;
+ const overlay = document.getElementById('profile-picker-overlay');
+ const container = overlay.querySelector('.profile-picker-container');
+
+ // Hide the picker grid and show self-edit form
+ const grid = document.getElementById('profile-picker-grid');
+ const actions = document.getElementById('profile-picker-actions');
+ grid.style.display = 'none';
+ actions.style.display = 'none';
+
+ // Remove any existing self-edit form
+ const existing = document.getElementById('self-edit-form');
+ if (existing) existing.remove();
+
+ const pageLabels = {
+ dashboard: 'Dashboard', sync: 'Sync', downloads: 'Search', discover: 'Discover',
+ artists: 'Artists', automations: 'Automations', library: 'Library', stats: 'Listening Stats',
+ 'playlist-explorer': 'Playlist Explorer', import: 'Import', help: 'Help & Docs'
+ };
+
+ const form = document.createElement('div');
+ form.id = 'self-edit-form';
+ form.className = 'profile-edit-form';
+ form.style.marginTop = '16px';
+
+ const title = document.createElement('h3');
+ title.textContent = 'My Profile';
+ title.style.cssText = 'color: #fff; margin: 0 0 12px; font-size: 18px;';
+ form.appendChild(title);
+
+ // Name
+ const nameInput = document.createElement('input');
+ nameInput.type = 'text';
+ nameInput.className = 'profile-input';
+ nameInput.value = currentProfile.name;
+ nameInput.maxLength = 20;
+ nameInput.placeholder = 'Profile name';
+ form.appendChild(nameInput);
+
+ // Home page
+ const homeLabel = document.createElement('label');
+ homeLabel.className = 'profile-settings-label';
+ homeLabel.textContent = 'Home Page';
+ form.appendChild(homeLabel);
+
+ const homeSelect = document.createElement('select');
+ homeSelect.className = 'profile-input';
+ const defaultOpt = document.createElement('option');
+ defaultOpt.value = '';
+ defaultOpt.textContent = 'Default (Discover)';
+ homeSelect.appendChild(defaultOpt);
+ const ap = currentProfile.allowed_pages;
+ Object.entries(pageLabels).forEach(([id, label]) => {
+ if (ap && !ap.includes(id)) return;
+ const opt = document.createElement('option');
+ opt.value = id;
+ opt.textContent = label;
+ if (id === currentProfile.home_page) opt.selected = true;
+ homeSelect.appendChild(opt);
+ });
+ form.appendChild(homeSelect);
+
+ // Buttons
+ const btnRow = document.createElement('div');
+ btnRow.className = 'profile-edit-buttons';
+ btnRow.style.marginTop = '12px';
+
+ const saveBtn = document.createElement('button');
+ saveBtn.className = 'profile-create-btn';
+ saveBtn.textContent = 'Save';
+ saveBtn.onclick = async () => {
+ const newName = nameInput.value.trim();
+ if (!newName) { alert('Name cannot be empty'); return; }
+ try {
+ const res = await fetch(`/api/profiles/${currentProfile.id}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ name: newName, home_page: homeSelect.value || null })
+ });
+ const data = await res.json();
+ if (data.success) {
+ currentProfile.name = newName;
+ currentProfile.home_page = homeSelect.value || null;
+ updateProfileIndicator();
+ closeSelfEdit();
+ hideProfilePicker();
+ } else {
+ alert(data.error || 'Failed to update');
+ }
+ } catch (e) {
+ alert('Connection error');
+ }
+ };
+ btnRow.appendChild(saveBtn);
+
+ const cancelBtn = document.createElement('button');
+ cancelBtn.className = 'profile-picker-cancel';
+ cancelBtn.textContent = 'Cancel';
+ cancelBtn.onclick = () => closeSelfEdit();
+ btnRow.appendChild(cancelBtn);
+
+ form.appendChild(btnRow);
+ container.appendChild(form);
+
+ function closeSelfEdit() {
+ form.remove();
+ grid.style.display = '';
+ actions.style.display = '';
+ }
+}
+
+async function checkAdminPinRequired() {
+ const res = await fetch('/api/profiles');
+ const data = await res.json();
+ const profiles = data.profiles || [];
+ const admin = profiles.find(p => p.is_admin);
+ const section = document.getElementById('admin-pin-section');
+
+ if (profiles.length > 1 && admin && !admin.has_pin && section) {
+ section.style.display = '';
+ } else if (section) {
+ section.style.display = 'none';
+ }
+}
+
+document.addEventListener('DOMContentLoaded', async function () {
+ console.log('SoulSync WebUI initializing...');
+
+ // Check if first-run setup wizard should be shown
+ const params = new URLSearchParams(window.location.search);
+ const forceSetup = params.get('setup') === '1';
+ let showWizard = forceSetup;
+
+ if (!forceSetup) {
+ try {
+ const setupResp = await fetch('/api/setup/status');
+ const setupData = await setupResp.json();
+ if (!setupData.setup_complete) {
+ showWizard = true;
+ localStorage.removeItem('soulsync_setup_complete');
+ }
+ } catch (e) {
+ console.warn('Setup status check failed, continuing normal init:', e);
+ }
+ }
+
+ if (showWizard && typeof openSetupWizard === 'function') {
+ window._onSetupWizardComplete = function () {
+ _continueAppInit();
+ };
+ openSetupWizard();
+ return; // Defer init until wizard closes
+ }
+
+ _continueAppInit();
+});
+
+async function _continueAppInit() {
+ // Initialize profile management UI handlers
+ initProfileManagement();
+
+ // Check profiles first — may show picker instead of app
+ const profileReady = await initProfileSystem();
+ if (!profileReady) {
+ console.log('Waiting for profile selection...');
+ return; // App init deferred until profile is selected via picker
+ }
+
+ initApp();
+}
+
+function initApp() {
+ // Initialize components
+ initializeNavigation();
+ initializeMobileNavigation();
+ initializeMediaPlayer();
+ initExpandedPlayer();
+ initializeSyncPage();
+ initializeWatchlist();
+ initializeDownloadManagerToggle();
+
+
+ // Initialize WebSocket connection (falls back to HTTP polling if unavailable)
+ initializeWebSocket();
+
+ // Start global service status polling for sidebar (works on all pages)
+ // Initial fetch for immediate data, then setInterval as fallback when WebSocket is disconnected
+ fetchAndUpdateServiceStatus();
+ setInterval(fetchAndUpdateServiceStatus, 5000); // Every 5 seconds (no-op when WebSocket active)
+
+ // Check for updates on load and every hour
+ checkForUpdates();
+ setInterval(checkForUpdates, 3600000);
+
+ // Refresh key data immediately when user returns to this tab
+ document.addEventListener('visibilitychange', () => {
+ if (!document.hidden) {
+ fetchAndUpdateServiceStatus();
+ // Refresh dashboard-specific data if on dashboard
+ const dashboardPage = document.getElementById('dashboard-page');
+ if (dashboardPage && dashboardPage.classList.contains('active')) {
+ fetchAndUpdateSystemStats();
+ fetchAndUpdateActivityFeed();
+ }
+ }
+ });
+
+ // Start always-on download polling (batched, minimal overhead)
+ startGlobalDownloadPolling();
+
+ // Load issues badge count
+ loadIssuesBadge();
+
+ // Load initial data
+ loadInitialData();
+
+ // Handle window resize to re-check track title scrolling
+ window.addEventListener('resize', function () {
+ if (currentTrack) {
+ const trackTitleElement = document.getElementById('track-title');
+ const trackTitle = currentTrack.title || 'Unknown Track';
+ setTimeout(() => {
+ checkAndEnableScrolling(trackTitleElement, trackTitle);
+ }, 100); // Small delay to allow layout to settle
+ }
+ });
+
+ console.log('SoulSync WebUI initialized successfully!');
+}
+
+// ===============================
+// NAVIGATION SYSTEM
+// ===============================
+
+function initializeNavigation() {
+ const navButtons = document.querySelectorAll('.nav-button');
+
+ navButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const page = button.getAttribute('data-page');
+ navigateToPage(page);
+ });
+ });
+
+ window.addEventListener('popstate', (event) => {
+ const page = (event.state && event.state.page) || _getPageFromPath();
+ if (page && page !== currentPage) {
+ navigateToPage(page, { skipPushState: true });
+ }
+ });
+}
+
+const _DEEPLINK_VALID_PAGES = new Set([
+ 'dashboard', 'sync', 'downloads', 'discover', 'artists', 'automations',
+ 'library', 'import', 'settings', 'help', 'issues', 'stats', 'watchlist',
+ 'wishlist', 'active-downloads', 'artist-detail', 'playlist-explorer',
+ 'hydrabase', 'tools'
+]);
+
+function _getPageFromPath() {
+ const path = window.location.pathname.replace(/^\/+|\/+$/g, '');
+ if (!path) return 'dashboard';
+ const basePage = path.split('/')[0];
+ if (!_DEEPLINK_VALID_PAGES.has(basePage)) return 'dashboard';
+ // Context-dependent pages fall back to a sensible parent
+ if (basePage === 'artist-detail') return 'artists';
+ if (basePage === 'playlist-explorer') return 'library';
+ return basePage;
+}
+
+// ===============================
+// MOBILE NAVIGATION
+// ===============================
+
+function initializeMobileNavigation() {
+ const hamburgerBtn = document.getElementById('hamburger-btn');
+ const sidebar = document.querySelector('.sidebar');
+ const overlay = document.getElementById('mobile-overlay');
+
+ if (!hamburgerBtn || !sidebar || !overlay) return;
+
+ function openMobileNav() {
+ sidebar.classList.add('mobile-open');
+ hamburgerBtn.classList.add('active');
+ overlay.classList.add('active');
+ document.body.classList.add('mobile-nav-open');
+ }
+
+ function closeMobileNav() {
+ sidebar.classList.remove('mobile-open');
+ hamburgerBtn.classList.remove('active');
+ overlay.classList.remove('active');
+ document.body.classList.remove('mobile-nav-open');
+ }
+
+ hamburgerBtn.addEventListener('click', () => {
+ if (sidebar.classList.contains('mobile-open')) {
+ closeMobileNav();
+ } else {
+ openMobileNav();
+ }
+ });
+
+ overlay.addEventListener('click', closeMobileNav);
+
+ // Close sidebar on nav button click (mobile only)
+ document.querySelectorAll('.nav-button').forEach(btn => {
+ btn.addEventListener('click', () => {
+ if (window.innerWidth <= 768) {
+ closeMobileNav();
+ }
+ });
+ });
+}
+
+function initializeWatchlist() {
+ // Watchlist button navigates to watchlist page
+ const watchlistButton = document.getElementById('watchlist-button');
+ if (watchlistButton) {
+ watchlistButton.addEventListener('click', () => navigateToPage('watchlist'));
+ }
+
+ // Wishlist button: quick check for active download, otherwise navigate to page
+ const wishlistButton = document.getElementById('wishlist-button');
+ if (wishlistButton) {
+ wishlistButton.addEventListener('click', async () => {
+ // Fast path: check if we already know about an active wishlist process
+ const clientProcess = activeDownloadProcesses['wishlist'];
+ if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
+ clientProcess.modalElement.style.display = 'flex';
+ WishlistModalState.setVisible();
+ return;
+ }
+ // Slow path: ask the server (with timeout to prevent button feeling dead)
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 2000);
+ const resp = await fetch('/api/active-processes', { signal: controller.signal });
+ clearTimeout(timeout);
+ if (resp.ok) {
+ const data = await resp.json();
+ const serverProcess = (data.active_processes || []).find(p => p.playlist_id === 'wishlist');
+ if (serverProcess) {
+ try {
+ WishlistModalState.clearUserClosed();
+ await rehydrateModal(serverProcess, true);
+ } catch (e) {
+ console.debug('Rehydration failed, navigating to page:', e);
+ navigateToPage('wishlist');
+ }
+ return;
+ }
+ }
+ } catch (e) {
+ // Timeout or network error — just navigate
+ }
+ navigateToPage('wishlist');
+ });
+ }
+
+ // Update watchlist count initially
+ updateWatchlistButtonCount();
+
+ // Update count every 10 seconds
+ setInterval(updateWatchlistButtonCount, 10000);
+
+ console.log('Watchlist system initialized');
+}
+
+function initializeDownloadManagerToggle() {
+ const toggleButton = document.getElementById('toggle-download-manager-btn');
+ const downloadsContent = document.querySelector('.downloads-content');
+
+ if (!toggleButton || !downloadsContent) {
+ console.log('Download manager toggle not found on this page');
+ return;
+ }
+
+ // Load saved state from localStorage (hidden by default for more search space)
+ const isHidden = localStorage.getItem('downloadManagerHidden') !== 'false';
+ if (isHidden) {
+ downloadsContent.classList.add('manager-hidden');
+ }
+
+ // Add click handler
+ toggleButton.addEventListener('click', () => {
+ const isCurrentlyHidden = downloadsContent.classList.contains('manager-hidden');
+
+ if (isCurrentlyHidden) {
+ downloadsContent.classList.remove('manager-hidden');
+ localStorage.setItem('downloadManagerHidden', 'false');
+ } else {
+ downloadsContent.classList.add('manager-hidden');
+ localStorage.setItem('downloadManagerHidden', 'true');
+ }
+ });
+
+ console.log('Download manager toggle initialized');
+}
+
+function navigateToPage(pageId, options = {}) {
+ if (pageId === currentPage) return;
+
+ // Permission guard — redirect to home page if not allowed
+ if (!isPageAllowed(pageId)) {
+ const home = getProfileHomePage();
+ if (home !== currentPage && isPageAllowed(home)) {
+ navigateToPage(home);
+ }
+ return;
+ }
+
+ // Update navigation buttons (only if there's a nav button for this page)
+ document.querySelectorAll('.nav-button').forEach(btn => {
+ btn.classList.remove('active');
+ });
+
+ // Handle artist-detail page specially - it should highlight the 'library' nav button
+ const navPageId = pageId === 'artist-detail' ? 'library' : pageId;
+ const navButton = document.querySelector(`[data-page="${navPageId}"]`);
+ if (navButton) {
+ navButton.classList.add('active');
+ }
+
+ // Update pages
+ document.querySelectorAll('.page').forEach(page => {
+ page.classList.remove('active');
+ });
+ document.getElementById(`${pageId}-page`).classList.add('active');
+
+ currentPage = pageId;
+
+ if (!options.skipPushState) {
+ const urlPath = pageId === 'dashboard' ? '/' : '/' + pageId;
+ if (window.location.pathname !== urlPath) {
+ history.pushState({ page: pageId }, '', urlPath);
+ }
+ }
+
+ // Show/hide global search bar (hide on downloads page where enhanced search exists)
+ if (typeof _gsUpdateVisibility === 'function') _gsUpdateVisibility();
+
+ // Show/hide discover download sidebar based on page
+ const downloadSidebar = document.getElementById('discover-download-sidebar');
+ if (downloadSidebar) {
+ if (pageId === 'discover') {
+ // Show sidebar on discover page if there are active downloads
+ const activeDownloads = Object.keys(discoverDownloads || {}).length;
+ console.log(`📊 [NAVIGATE] Discover page - ${activeDownloads} active downloads`);
+ if (activeDownloads > 0) {
+ // Update the sidebar UI to render the bubbles
+ console.log(`🔄 [NAVIGATE] Updating discover download bar UI`);
+ updateDiscoverDownloadBar();
+ }
+ } else {
+ // Always hide sidebar on other pages
+ downloadSidebar.classList.add('hidden');
+ }
+ }
+
+ // Load page-specific data
+ loadPageData(pageId);
+
+ // Update page background particles
+ if (window.pageParticles && window._particlesEnabled !== false) window.pageParticles.setPage(pageId);
+
+ // Update worker orbs
+ if (window.workerOrbs) window.workerOrbs.setPage(pageId);
+}
+
+// REPLACE your old loadPageData function with this one:
+// REPLACE your old loadPageData function with this corrected one
+
+async function loadPageData(pageId) {
+ try {
+ // Stop any active polling when navigating away
+ stopDbStatsPolling();
+ stopDbUpdatePolling();
+ stopWishlistCountPolling();
+ stopLogPolling();
+ // Stop watchlist/wishlist page timers when navigating away
+ if (watchlistCountdownInterval) { clearInterval(watchlistCountdownInterval); watchlistCountdownInterval = null; }
+ if (wishlistCountdownInterval) { clearInterval(wishlistCountdownInterval); wishlistCountdownInterval = null; }
+ if (typeof _stopNebulaLivePolling === 'function') _stopNebulaLivePolling();
+ if (pageId !== 'sync') {
+ cleanupBeatportContent();
+ }
+ switch (pageId) {
+ case 'dashboard':
+ await loadDashboardData();
+ loadDashboardSyncHistory();
+ break;
+ case 'sync':
+ initializeSyncPage();
+ await loadSyncData();
+ break;
+ case 'downloads':
+ initializeSearch();
+ initializeSearchModeToggle();
+ initializeFilters();
+ await loadDownloadsData();
+ break;
+ case 'artists':
+ // Only fully initialize if not already initialized
+ if (!artistsPageState.isInitialized) {
+ initializeArtistsPage();
+ } else {
+ // Just restore state if already initialized
+ restoreArtistsPageState();
+ }
+ break;
+ case 'active-downloads':
+ loadActiveDownloadsPage();
+ break;
+ case 'library':
+ // Check if we should return to artist detail view instead of list
+ if (artistDetailPageState.currentArtistId && artistDetailPageState.currentArtistName) {
+ navigateToPage('artist-detail');
+ if (!artistDetailPageState.isInitialized) {
+ initializeArtistDetailPage();
+ loadArtistDetailData(artistDetailPageState.currentArtistId, artistDetailPageState.currentArtistName);
+ }
+ // Already initialized — DOM content persists, no reload needed
+ } else {
+ if (!libraryPageState.isInitialized) {
+ initializeLibraryPage();
+ }
+ // Already initialized — DOM content persists, no reload needed
+ }
+ break;
+ case 'artist-detail':
+ // Artist detail page is handled separately by navigateToArtistDetail()
+ break;
+ case 'discover':
+ if (!discoverPageInitialized) {
+ await loadDiscoverPage();
+ discoverPageInitialized = true;
+ }
+ // Already initialized — DOM content persists, no reload needed
+ break;
+ case 'playlist-explorer':
+ initExplorer();
+ break;
+ case 'settings':
+ initializeSettings();
+ switchSettingsTab('connections');
+ await loadSettingsData();
+ await loadQualityProfile();
+ loadApiKeys();
+ loadBlacklistCount();
+ break;
+ case 'stats':
+ initializeStatsPage();
+ break;
+ case 'import':
+ initializeImportPage();
+ break;
+ case 'hydrabase':
+ // Check connection status and pre-fill saved credentials
+ try {
+ const hsResp = await fetch('/api/hydrabase/status');
+ const hsData = await hsResp.json();
+ _hydrabaseConnected = hsData.connected;
+ document.getElementById('hydra-connection-status').textContent = hsData.connected ? 'Connected' : 'Disconnected';
+ document.getElementById('hydra-connection-status').style.color = hsData.connected ? 'rgb(var(--accent-light-rgb))' : '#888';
+ document.getElementById('hydra-connect-btn').textContent = hsData.connected ? 'Disconnect' : 'Connect';
+ // Pre-fill saved credentials
+ if (hsData.saved_url) {
+ document.getElementById('hydra-ws-url').value = hsData.saved_url;
+ }
+ if (hsData.saved_api_key) {
+ document.getElementById('hydra-api-key').value = hsData.saved_api_key;
+ }
+ // Update peer count
+ if (hsData.peer_count !== null && hsData.peer_count !== undefined) {
+ document.getElementById('hydra-peer-count').textContent = `Peers: ${hsData.peer_count}`;
+ }
+ } catch (e) { }
+ // Load comparisons
+ loadHydrabaseComparisons();
+ break;
+ case 'tools':
+ await initializeToolsPage();
+ break;
+ case 'watchlist':
+ await initializeWatchlistPage();
+ break;
+ case 'wishlist':
+ await initializeWishlistPage();
+ break;
+ case 'automations':
+ await loadAutomations();
+ break;
+ case 'issues':
+ await loadIssuesPage();
+ break;
+ case 'help':
+ initializeDocsPage();
+ break;
+ }
+ } catch (error) {
+ console.error(`Error loading ${pageId} data:`, error);
+ showToast(`Failed to load ${pageId} data`, 'error');
+ }
+}
+
+// ===============================
+// SERVICE STATUS MONITORING
+// ===============================
+
+// Legacy function - now handled by fetchAndUpdateServiceStatus
+// Keeping this for compatibility but it's no longer actively used
+
+// Old updateStatusIndicator function removed - replaced by updateSidebarServiceStatus
+
+// ===============================
+
diff --git a/webui/static/library.js b/webui/static/library.js
new file mode 100644
index 00000000..90f9b3ad
--- /dev/null
+++ b/webui/static/library.js
@@ -0,0 +1,6653 @@
+// LIBRARY PAGE FUNCTIONALITY
+// ===============================
+
+// Library page state
+const libraryPageState = {
+ isInitialized: false,
+ currentSearch: "",
+ currentLetter: "all",
+ currentPage: 1,
+ limit: 75,
+ debounceTimer: null,
+ watchlistFilter: "all",
+ sourceFilter: ""
+};
+
+function initializeLibraryPage() {
+ console.log("🔧 Initializing Library page...");
+
+ try {
+ // Initialize search functionality
+ initializeLibrarySearch();
+
+ // Initialize watchlist filter
+ initializeWatchlistFilter();
+
+ // Initialize metadata source filter
+ initializeSourceFilter();
+
+ // Initialize alphabet selector
+ initializeAlphabetSelector();
+
+ // Initialize pagination
+ initializeLibraryPagination();
+
+ // Load initial data
+ loadLibraryArtists();
+
+ // Show download bubbles if any exist
+ showLibraryDownloadsSection();
+
+ libraryPageState.isInitialized = true;
+ console.log("✅ Library page initialized successfully");
+
+ } catch (error) {
+ console.error("❌ Error initializing Library page:", error);
+ showToast("Failed to initialize Library page", "error");
+ }
+}
+
+function initializeLibrarySearch() {
+ const searchInput = document.getElementById("library-search-input");
+ if (!searchInput) return;
+
+ searchInput.addEventListener("input", (e) => {
+ const query = e.target.value.trim();
+
+ // Clear existing debounce timer
+ if (libraryPageState.debounceTimer) {
+ clearTimeout(libraryPageState.debounceTimer);
+ }
+
+ // Debounce search requests
+ libraryPageState.debounceTimer = setTimeout(() => {
+ libraryPageState.currentSearch = query;
+ libraryPageState.currentPage = 1; // Reset to first page
+ loadLibraryArtists();
+ }, 300);
+ });
+
+ // Clear search on Escape key
+ searchInput.addEventListener("keydown", (e) => {
+ if (e.key === "Escape") {
+ searchInput.value = "";
+ libraryPageState.currentSearch = "";
+ libraryPageState.currentPage = 1;
+ loadLibraryArtists();
+ }
+ });
+}
+
+function initializeWatchlistFilter() {
+ const filterButtons = document.querySelectorAll(".watchlist-filter-btn");
+ const watchAllBtn = document.getElementById("library-watchlist-all-btn");
+
+ filterButtons.forEach(button => {
+ button.addEventListener("click", () => {
+ const filter = button.getAttribute("data-filter");
+
+ // Update active state
+ filterButtons.forEach(btn => btn.classList.remove("active"));
+ button.classList.add("active");
+
+ // Show/hide "Watch All Unwatched" button
+ if (watchAllBtn) {
+ if (filter === "unwatched") {
+ watchAllBtn.classList.remove("hidden");
+ } else {
+ watchAllBtn.classList.add("hidden");
+ }
+ }
+
+ // Update state and reload
+ libraryPageState.watchlistFilter = filter;
+ libraryPageState.currentPage = 1;
+ loadLibraryArtists();
+ });
+ });
+}
+
+function initializeSourceFilter() {
+ const select = document.getElementById('library-source-filter');
+ if (!select) return;
+ select.addEventListener('change', () => {
+ libraryPageState.sourceFilter = select.value;
+ libraryPageState.currentPage = 1;
+ loadLibraryArtists();
+ });
+}
+
+function initializeAlphabetSelector() {
+ const alphabetButtons = document.querySelectorAll(".alphabet-btn");
+
+ alphabetButtons.forEach(button => {
+ button.addEventListener("click", () => {
+ const letter = button.getAttribute("data-letter");
+
+ // Update active state
+ alphabetButtons.forEach(btn => btn.classList.remove("active"));
+ button.classList.add("active");
+
+ // Update state and load data
+ libraryPageState.currentLetter = letter;
+ libraryPageState.currentPage = 1; // Reset to first page
+ loadLibraryArtists();
+ });
+ });
+}
+
+function initializeLibraryPagination() {
+ const prevBtn = document.getElementById("prev-page-btn");
+ const nextBtn = document.getElementById("next-page-btn");
+
+ if (prevBtn) {
+ prevBtn.addEventListener("click", () => {
+ if (libraryPageState.currentPage > 1) {
+ libraryPageState.currentPage--;
+ loadLibraryArtists();
+ }
+ });
+ }
+
+ if (nextBtn) {
+ nextBtn.addEventListener("click", () => {
+ libraryPageState.currentPage++;
+ loadLibraryArtists();
+ });
+ }
+}
+
+async function loadLibraryArtists() {
+ try {
+ // Show loading state
+ showLibraryLoading(true);
+
+ // Build query parameters
+ const params = new URLSearchParams({
+ search: libraryPageState.currentSearch,
+ letter: libraryPageState.currentLetter,
+ page: libraryPageState.currentPage,
+ limit: libraryPageState.limit,
+ watchlist: libraryPageState.watchlistFilter
+ });
+ if (libraryPageState.sourceFilter) params.set('source_filter', libraryPageState.sourceFilter);
+
+ // Fetch artists from API
+ const response = await fetch(`/api/library/artists?${params}`);
+ const data = await response.json();
+
+ if (!data.success) {
+ throw new Error(data.error || "Failed to load artists");
+ }
+
+ // Update UI with artists
+ displayLibraryArtists(data.artists);
+ updateLibraryPagination(data.pagination);
+ updateLibraryStats(data.pagination.total_count);
+
+ // Hide loading state
+ showLibraryLoading(false);
+
+ // Show empty state if no artists
+ if (data.artists.length === 0) {
+ showLibraryEmpty(true);
+ } else {
+ showLibraryEmpty(false);
+ }
+
+ } catch (error) {
+ console.error("❌ Error loading library artists:", error);
+ showToast("Failed to load artists", "error");
+ showLibraryLoading(false);
+ showLibraryEmpty(true);
+ }
+}
+
+function displayLibraryArtists(artists) {
+ const grid = document.getElementById("library-artists-grid");
+ if (!grid) return;
+
+ // Build all cards as HTML string for single DOM write (much faster than createElement loop)
+ grid.innerHTML = artists.map((artist, i) => {
+ try { return buildLibraryArtistCardHTML(artist, i); }
+ catch (e) { console.error('Failed to render artist card:', artist.name, e); return ''; }
+ }).join('');
+
+ // Attach click handlers via event delegation (single listener vs 75+ individual)
+ grid.onclick = (e) => {
+ // Ignore clicks on badge icons (they open external links / toggle watchlist)
+ const badge = e.target.closest('.source-card-icon');
+ if (badge) {
+ e.stopPropagation();
+ const url = badge.dataset.url;
+ if (url) { window.open(url, '_blank'); return; }
+ // Watchlist toggle
+ if (badge.classList.contains('watch-card-icon') && badge.dataset.unwatched) {
+ const card = badge.closest('.library-artist-card');
+ if (card) {
+ const artistId = card.dataset.artistId;
+ const artistName = card.dataset.artistName;
+ const artist = artists.find(a => String(a.id) === artistId);
+ if (artist) toggleLibraryCardWatchlist(badge, artist);
+ }
+ }
+ return;
+ }
+ const card = e.target.closest('.library-artist-card');
+ if (card) {
+ navigateToArtistDetail(card.dataset.artistId, card.dataset.artistName);
+ }
+ };
+}
+
+function buildLibraryArtistCardHTML(artist, index) {
+ const _esc = (s) => (s || '').replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''');
+ const delay = Math.min(index * 20, 600); // Cap at 600ms so last cards don't wait too long
+
+ // Build badge icons
+ const badges = [];
+ if (artist.spotify_artist_id) badges.push({ logo: SPOTIFY_LOGO_URL, fb: 'SP', title: 'Spotify', url: `https://open.spotify.com/artist/${artist.spotify_artist_id}` });
+ if (artist.musicbrainz_id) badges.push({ logo: MUSICBRAINZ_LOGO_URL, fb: 'MB', title: 'MusicBrainz', url: `https://musicbrainz.org/artist/${artist.musicbrainz_id}` });
+ if (artist.deezer_id) badges.push({ logo: DEEZER_LOGO_URL, fb: 'Dz', title: 'Deezer', url: `https://www.deezer.com/artist/${artist.deezer_id}` });
+ if (artist.audiodb_id) {
+ const slug = artist.name ? artist.name.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '') : '';
+ badges.push({ logo: typeof getAudioDBLogoURL === 'function' ? getAudioDBLogoURL() : '', fb: 'ADB', title: 'AudioDB', url: `https://www.theaudiodb.com/artist/${artist.audiodb_id}-${slug}` });
+ }
+ if (artist.itunes_artist_id) badges.push({ logo: ITUNES_LOGO_URL, fb: 'IT', title: 'Apple Music', url: `https://music.apple.com/artist/${artist.itunes_artist_id}` });
+ if (artist.lastfm_url) badges.push({ logo: LASTFM_LOGO_URL, fb: 'LFM', title: 'Last.fm', url: artist.lastfm_url });
+ if (artist.genius_url) badges.push({ logo: GENIUS_LOGO_URL, fb: 'GEN', title: 'Genius', url: artist.genius_url });
+ if (artist.tidal_id) badges.push({ logo: TIDAL_LOGO_URL, fb: 'TD', title: 'Tidal', url: `https://tidal.com/browse/artist/${artist.tidal_id}` });
+ if (artist.qobuz_id) badges.push({ logo: QOBUZ_LOGO_URL, fb: 'Qz', title: 'Qobuz', url: `https://www.qobuz.com/artist/${artist.qobuz_id}` });
+ if (artist.discogs_id) badges.push({ logo: DISCOGS_LOGO_URL, fb: 'DC', title: 'Discogs', url: `https://www.discogs.com/artist/${artist.discogs_id}` });
+ if (artist.soul_id && !String(artist.soul_id).startsWith('soul_unnamed_')) badges.push({ logo: '/static/trans2.png', fb: 'SS', title: `SoulID: ${artist.soul_id}`, url: null });
+
+ // Watchlist badge
+ const hasActiveSourceId = currentMusicSourceName === 'iTunes'
+ ? (artist.itunes_artist_id || artist.spotify_artist_id)
+ : (artist.spotify_artist_id || artist.itunes_artist_id);
+ let watchBadgeHTML = '';
+ if (artist.is_watched) {
+ watchBadgeHTML = ``;
+ } else if (hasActiveSourceId) {
+ watchBadgeHTML = ``;
+ }
+
+ const maxPerColumn = 6;
+ const needsOverflow = badges.length > maxPerColumn;
+ const badgeIcon = (b) => `${b.logo ? `})
` : `${b.fb}`}
`;
+
+ let badgeContainerHTML = '';
+ if (badges.length > 0 || watchBadgeHTML) {
+ if (needsOverflow) {
+ badgeContainerHTML = `
+
`;
+ } else {
+ badgeContainerHTML = `${watchBadgeHTML}${badges.slice(maxPerColumn).map(badgeIcon).join('')}
+ ${badges.slice(0, maxPerColumn).map(badgeIcon).join('')}
+ ${badges.map(badgeIcon).join('')}${watchBadgeHTML}
`;
+ }
+ }
+
+ // Image
+ const hasImage = artist.image_url && artist.image_url.trim() !== '';
+ const deezerFallback = artist.deezer_id ? `if(!this.dataset.triedDeezer){this.dataset.triedDeezer='true';this.src='https://api.deezer.com/artist/${artist.deezer_id}/image?size=big'}else{this.parentNode.innerHTML='🎵
'}` : `this.parentNode.innerHTML='🎵
'`;
+ const imageHTML = hasImage
+ ? `🎵
+ ${badgeContainerHTML}
+ ${imageHTML}
+
`;
+}
+
+function updateLibraryPagination(pagination) {
+ const prevBtn = document.getElementById("prev-page-btn");
+ const nextBtn = document.getElementById("next-page-btn");
+ const pageInfo = document.getElementById("page-info");
+ const paginationContainer = document.getElementById("library-pagination");
+
+ if (!paginationContainer) return;
+
+ // Update button states
+ if (prevBtn) {
+ prevBtn.disabled = !pagination.has_prev;
+ }
+
+ if (nextBtn) {
+ nextBtn.disabled = !pagination.has_next;
+ }
+
+ // Update page info
+ if (pageInfo) {
+ pageInfo.textContent = `Page ${pagination.page} of ${pagination.total_pages}`;
+ }
+
+ // Show/hide pagination based on total pages
+ if (pagination.total_pages > 1) {
+ paginationContainer.classList.remove("hidden");
+ } else {
+ paginationContainer.classList.add("hidden");
+ }
+}
+
+function updateLibraryStats(totalCount) {
+ const countElement = document.getElementById("library-artist-count");
+ if (countElement) {
+ countElement.textContent = totalCount;
+ }
+}
+
+function showLibraryLoading(show) {
+ const loadingElement = document.getElementById("library-loading");
+ if (loadingElement) {
+ if (show) {
+ loadingElement.classList.remove("hidden");
+ } else {
+ loadingElement.classList.add("hidden");
+ }
+ }
+}
+
+function showLibraryEmpty(show) {
+ const emptyElement = document.getElementById("library-empty");
+ if (emptyElement) {
+ if (show) {
+ emptyElement.classList.remove("hidden");
+ } else {
+ emptyElement.classList.add("hidden");
+ }
+ }
+}
+
+async function openWatchAllUnwatchedModal() {
+ if (document.getElementById('watch-all-modal-overlay')) return;
+
+ const sourceIdField = currentMusicSourceName === 'iTunes' ? 'itunes_artist_id'
+ : currentMusicSourceName === 'Deezer' ? 'deezer_id' : 'spotify_artist_id';
+ const sourceName = currentMusicSourceName || 'Spotify';
+
+ const overlay = document.createElement('div');
+ overlay.id = 'watch-all-modal-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) closeWatchAllUnwatchedModal(); };
+
+ overlay.innerHTML = `
+
+
+ ${_esc(artist.name)}
+${trackStat}
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ // Fetch all unwatched artists paginated (SQLite variable limit safe)
+ try {
+ const eligible = [];
+ const ineligible = [];
+ let page = 1;
+ const pageSize = 400;
+ const countEl = document.getElementById('watch-all-load-count');
+
+ while (true) {
+ if (!document.getElementById('watch-all-modal-overlay')) return;
+ if (countEl) countEl.textContent = `${eligible.length + ineligible.length} artists loaded...`;
+
+ const params = new URLSearchParams({ search: '', letter: 'all', page, limit: pageSize, watchlist: 'unwatched' });
+ const response = await fetch(`/api/library/artists?${params}`);
+ const data = await response.json();
+ if (!data.success) throw new Error(data.error || 'Failed to load artists');
+
+ for (const a of (data.artists || [])) {
+ if (a[sourceIdField]) eligible.push(a);
+ else ineligible.push(a);
+ }
+
+ if (!data.pagination.has_next) break;
+ page++;
+ }
+
+ _renderWatchAllModalContent(overlay, eligible, ineligible, sourceName);
+ } catch (error) {
+ console.error('Error loading unwatched artists:', error);
+ const body = overlay.querySelector('.watch-all-body');
+ if (body) body.innerHTML = `
+
+
+
+
+
+
+
+ Watch All Unwatched
+Add unwatched artists with ${_esc(sourceName)} IDs to your watchlist
+
+
+
+
+
+
+ Loading unwatched artists...
+
+ Failed to load artists
RetryNo unwatched artists found
';
+ html += ``;
+ html += ``;
+ html += ``;
+ html += '
';
+
+ // Search filter
+ if (eligible.length > 10) {
+ html += '';
+ }
+
+ // Eligible grid
+ if (eligible.length > 0) {
+ html += '${eligible.length}
Ready to watch
${ineligible.length}
No ${_esc(sourceName)} ID
${eligible.length + ineligible.length}
Total unwatched
Artists to be watched
';
+ html += '';
+ html += _buildWatchAllRows(eligible, false);
+ html += '
';
+ }
+
+ // Ineligible section
+ if (ineligible.length > 0) {
+ html += `
+
`;
+ }
+
+ if (eligible.length === 0) {
+ html += `
+
+
+
+ ${ineligible.length} artist${ineligible.length !== 1 ? 's' : ''} without ${_esc(sourceName)} ID
+
+ ▼
+
+
+ These artists haven't been matched to ${_esc(sourceName)} yet. The background enrichment worker will match them over time.
+ ${_buildWatchAllRows(ineligible, true)}
+ None of your unwatched artists have a ${_esc(sourceName)} ID yet
The background enrichment worker will match them over time.
🎵
`;
+ html += `
+
`;
+ }
+ return html;
+}
+
+function _filterWatchAllList(query) {
+ const q = query.toLowerCase().trim();
+ document.querySelectorAll('#watch-all-eligible-grid .watch-all-cell').forEach(cell => {
+ cell.style.display = !q || cell.dataset.name.includes(q) ? '' : 'none';
+ });
+}
+
+async function _confirmWatchAllUnwatched(overlay, expectedCount) {
+ const confirmBtn = overlay.querySelector('#watch-all-confirm-btn');
+ const cancelBtn = overlay.querySelector('.watch-all-btn-cancel');
+ if (confirmBtn) { confirmBtn.disabled = true; confirmBtn.textContent = 'Adding...'; }
+ if (cancelBtn) cancelBtn.disabled = true;
+
+ try {
+ const response = await fetch('/api/library/watchlist-all-unwatched', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' }
+ });
+ const data = await response.json();
+
+ if (data.success) {
+ const body = overlay.querySelector('.watch-all-body');
+ body.innerHTML = `${img}
+ ${_esc(a.name)}
+
+
+
+
`;
+
+ if (confirmBtn) confirmBtn.style.display = 'none';
+ if (cancelBtn) { cancelBtn.disabled = false; cancelBtn.textContent = 'Close'; }
+ overlay.dataset.needsRefresh = 'true';
+ } else {
+ throw new Error(data.error || 'Failed to add artists');
+ }
+ } catch (error) {
+ console.error('Error in watch all:', error);
+ if (confirmBtn) { confirmBtn.disabled = false; confirmBtn.textContent = `Watch All (${expectedCount})`; }
+ if (cancelBtn) cancelBtn.disabled = false;
+ showToast('Failed to add artists to watchlist', 'error');
+ }
+}
+
+function closeWatchAllUnwatchedModal() {
+ const overlay = document.getElementById('watch-all-modal-overlay');
+ if (!overlay) return;
+ const needsRefresh = overlay.dataset.needsRefresh === 'true';
+ overlay.remove();
+ if (needsRefresh) loadLibraryArtists();
+}
+
+async function toggleLibraryCardWatchlist(btn, artist) {
+ if (btn.disabled) return;
+ btn.disabled = true;
+
+ // Support both badge-style (.watch-icon-label) and button-style (.watchlist-text)
+ const label = btn.querySelector('.watch-icon-label') || btn.querySelector('.watchlist-text');
+ const isWatching = btn.classList.contains('watched') || btn.classList.contains('watching');
+
+ if (label) label.textContent = '...';
+
+ try {
+ // Use the ID matching the active metadata source
+ const artistId = currentMusicSourceName === 'iTunes'
+ ? (artist.itunes_artist_id || artist.spotify_artist_id)
+ : (artist.spotify_artist_id || artist.itunes_artist_id);
+ if (!artistId) throw new Error('No iTunes or Spotify ID available for this artist');
+
+ if (isWatching) {
+ const response = await fetch('/api/watchlist/remove', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: artistId })
+ });
+ const data = await response.json();
+ if (!data.success) throw new Error(data.error);
+
+ btn.classList.remove('watched', 'watching');
+ btn.style.opacity = '0.4';
+ btn.title = 'Add to Watchlist';
+ if (label) label.textContent = 'Watch';
+ showToast(`Removed ${artist.name} from watchlist`, 'success');
+ } else {
+ const response = await fetch('/api/watchlist/add', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: artistId, artist_name: artist.name })
+ });
+ const data = await response.json();
+ if (!data.success) throw new Error(data.error);
+
+ btn.classList.add('watched');
+ btn.style.opacity = '';
+ btn.title = 'Remove from Watchlist';
+ if (label) label.textContent = 'Watching';
+ showToast(`Added ${artist.name} to watchlist`, 'success');
+ }
+
+ if (typeof updateWatchlistCount === 'function') {
+ updateWatchlistCount();
+ }
+ } catch (error) {
+ console.error('Error toggling library card watchlist:', error);
+ if (label) label.textContent = isWatching ? 'Watching' : 'Watch';
+ showToast(`Error: ${error.message}`, 'error');
+ } finally {
+ btn.disabled = false;
+ }
+}
+
+// ===============================================
+// Artist Detail Page Functions
+// ===============================================
+
+// Artist detail page state
+let artistDetailPageState = {
+ isInitialized: false,
+ currentArtistId: null,
+ currentArtistName: null,
+ enhancedView: false,
+ enhancedData: null,
+ expandedAlbums: new Set(),
+ selectedTracks: new Set(),
+ editingCell: null,
+ enhancedTrackSort: {}
+};
+
+// Discography filter state
+let discographyFilterState = {
+ categories: { albums: true, eps: true, singles: true },
+ content: { live: true, compilations: true, featured: true },
+ ownership: 'all' // 'all', 'owned', 'missing'
+};
+
+function navigateToArtistDetail(artistId, artistName) {
+ console.log(`🎵 Navigating to artist detail: ${artistName} (ID: ${artistId})`);
+
+ // Abort any in-progress completion stream
+ if (artistDetailPageState.completionController) {
+ artistDetailPageState.completionController.abort();
+ artistDetailPageState.completionController = null;
+ }
+
+ // Cancel any active inline edit and close manual match modal before resetting state
+ cancelInlineEdit();
+ const existingMatchOverlay = document.getElementById('enhanced-manual-match-overlay');
+ if (existingMatchOverlay) existingMatchOverlay.remove();
+
+ // Store current artist info and reset enhanced view state
+ artistDetailPageState.currentArtistId = artistId;
+ artistDetailPageState.currentArtistName = artistName;
+ artistDetailPageState.enhancedData = null;
+ artistDetailPageState.expandedAlbums = new Set();
+ artistDetailPageState.selectedTracks = new Set();
+ artistDetailPageState.enhancedTrackSort = {};
+ artistDetailPageState.enhancedView = false;
+
+ // Reset enhanced view toggle to standard
+ const toggleBtns = document.querySelectorAll('.enhanced-view-toggle-btn');
+ toggleBtns.forEach(btn => {
+ btn.classList.toggle('active', btn.getAttribute('data-view') === 'standard');
+ });
+ const enhancedContainer = document.getElementById('enhanced-view-container');
+ if (enhancedContainer) enhancedContainer.classList.add('hidden');
+ const standardSections = document.querySelector('.discography-sections');
+ if (standardSections) standardSections.classList.remove('hidden');
+ // Restore standard view filter groups
+ const filterGroups = document.querySelectorAll('#discography-filters .filter-group');
+ filterGroups.forEach(group => {
+ const label = group.querySelector('.filter-label');
+ if (label && label.textContent !== 'View') group.style.display = '';
+ });
+ const dividers = document.querySelectorAll('#discography-filters .filter-divider');
+ dividers.forEach(d => d.style.display = '');
+ // Hide bulk bar
+ const bulkBar = document.getElementById('enhanced-bulk-bar');
+ if (bulkBar) bulkBar.classList.remove('visible');
+
+ // Navigate to artist detail page
+ navigateToPage('artist-detail');
+
+ // Initialize if needed and load data
+ if (!artistDetailPageState.isInitialized) {
+ initializeArtistDetailPage();
+ }
+
+ // Load artist data
+ loadArtistDetailData(artistId, artistName);
+}
+
+function initializeArtistDetailPage() {
+ console.log("🔧 Initializing Artist Detail page...");
+
+ // Initialize back button
+ const backBtn = document.getElementById("artist-detail-back-btn");
+ if (backBtn) {
+ backBtn.addEventListener("click", () => {
+ console.log("🔙 Returning to Library page");
+ // Abort any in-progress completion stream
+ if (artistDetailPageState.completionController) {
+ artistDetailPageState.completionController.abort();
+ artistDetailPageState.completionController = null;
+ }
+ // Clear artist detail state so we go back to the list view
+ artistDetailPageState.currentArtistId = null;
+ artistDetailPageState.currentArtistName = null;
+ navigateToPage('library');
+ });
+ }
+
+ // Initialize retry button
+ const retryBtn = document.getElementById("artist-detail-retry-btn");
+ if (retryBtn) {
+ retryBtn.addEventListener("click", () => {
+ if (artistDetailPageState.currentArtistId && artistDetailPageState.currentArtistName) {
+ loadArtistDetailData(artistDetailPageState.currentArtistId, artistDetailPageState.currentArtistName);
+ }
+ });
+ }
+
+ // Initialize discography filter buttons
+ initializeDiscographyFilters();
+
+ artistDetailPageState.isInitialized = true;
+ console.log("✅ Artist Detail page initialized successfully");
+}
+
+async function loadArtistDetailData(artistId, artistName) {
+ console.log(`🔄 Loading artist detail data for: ${artistName} (ID: ${artistId})`);
+
+ // Reset discography filters to defaults
+ resetDiscographyFilters();
+
+ // Show loading state and hide all content
+ showArtistDetailLoading(true);
+ showArtistDetailError(false);
+ showArtistDetailMain(false);
+ showArtistDetailHero(false);
+
+ // Don't update header until data loads to avoid showing stale data
+
+ try {
+ // Call API to get artist discography data
+ const response = await fetch(`/api/artist-detail/${artistId}`);
+
+ if (!response.ok) {
+ throw new Error(`Failed to load artist data: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to load artist data');
+ }
+
+ console.log(`✅ Loaded artist detail data:`, data);
+
+ // Hide loading and show all content
+ showArtistDetailLoading(false);
+ showArtistDetailMain(true);
+ showArtistDetailHero(true);
+
+ console.log(`🎨 Main content visibility:`, document.getElementById('artist-detail-main'));
+ console.log(`🎨 Albums section:`, document.getElementById('albums-section'));
+
+ // Populate the page with data (which updates the hero section and sets textContent)
+ populateArtistDetailPage(data);
+
+ // Update header with artist name and MusicBrainz link LAST to avoid overwrite
+ updateArtistDetailPageHeaderWithData(data.artist);
+
+ // Render per-artist enrichment coverage
+ renderArtistEnrichmentCoverage(data.enrichment_coverage);
+
+ // Start streaming ownership checks if we have Spotify discography with checking state
+ if (data.discography && data.discography.albums) {
+ const hasChecking = [...(data.discography.albums || []), ...(data.discography.eps || []), ...(data.discography.singles || [])]
+ .some(r => r.owned === null);
+ if (hasChecking) {
+ // Store discography for stream updates
+ artistDetailPageState.currentDiscography = data.discography;
+ checkLibraryCompletion(data.artist.name, data.discography);
+ }
+ }
+
+ // Check if artist has tracks eligible for quality enhancement
+ checkArtistEnhanceEligibility(artistId);
+
+ } catch (error) {
+ console.error(`❌ Error loading artist detail data:`, error);
+
+ // Show error state (keep hero section hidden)
+ showArtistDetailLoading(false);
+ showArtistDetailError(true, error.message);
+ showArtistDetailHero(false);
+
+ showToast(`Failed to load artist details: ${error.message}`, "error");
+ }
+}
+
+function updateArtistDetailPageHeader(artistName) {
+ // Update header title
+ const headerTitle = document.getElementById("artist-detail-name");
+ if (headerTitle) {
+ headerTitle.textContent = artistName;
+ }
+
+ // Update main artist name
+ const mainTitle = document.getElementById("artist-info-name");
+ if (mainTitle) {
+ mainTitle.textContent = artistName;
+ }
+}
+
+function updateArtistDetailPageHeaderWithData(artist) {
+ // Update name
+ const mainTitle = document.getElementById("artist-detail-name");
+ if (mainTitle) {
+ mainTitle.textContent = artist.name;
+ // Remove any old source links that were appended to the h1
+ mainTitle.querySelectorAll('.source-link-btn').forEach(el => el.remove());
+ }
+
+ // Render badges in dedicated container
+ const badgesContainer = document.getElementById("artist-hero-badges");
+ if (badgesContainer) {
+ const _hb = (logo, fallback, title, url) => {
+ const inner = logo
+ ? `Added ${data.added} artist${data.added !== 1 ? 's' : ''} to watchlist
+ ${data.skipped_already > 0 ? `${data.skipped_already} already watched
` : ''}
+ ${data.skipped_no_id > 0 ? `${data.skipped_no_id} skipped (no external ID)
` : ''}
+ ${inner}
`;
+ };
+
+ const adbSlug = artist.name ? artist.name.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '') : '';
+ const badges = [];
+ if (artist.spotify_artist_id) badges.push(_hb(SPOTIFY_LOGO_URL, 'SP', 'Spotify', `https://open.spotify.com/artist/${artist.spotify_artist_id}`));
+ if (artist.musicbrainz_id) badges.push(_hb(MUSICBRAINZ_LOGO_URL, 'MB', 'MusicBrainz', `https://musicbrainz.org/artist/${artist.musicbrainz_id}`));
+ if (artist.deezer_id) badges.push(_hb(DEEZER_LOGO_URL, 'Dz', 'Deezer', `https://www.deezer.com/artist/${artist.deezer_id}`));
+ if (artist.audiodb_id) badges.push(_hb(typeof getAudioDBLogoURL === 'function' ? getAudioDBLogoURL() : '', 'ADB', 'AudioDB', `https://www.theaudiodb.com/artist/${artist.audiodb_id}-${adbSlug}`));
+ if (artist.itunes_artist_id) badges.push(_hb(ITUNES_LOGO_URL, 'IT', 'Apple Music', `https://music.apple.com/artist/${artist.itunes_artist_id}`));
+ if (artist.lastfm_url) badges.push(_hb(LASTFM_LOGO_URL, 'LFM', 'Last.fm', artist.lastfm_url));
+ if (artist.genius_url) badges.push(_hb(GENIUS_LOGO_URL, 'GEN', 'Genius', artist.genius_url));
+ if (artist.tidal_id) badges.push(_hb(TIDAL_LOGO_URL, 'TD', 'Tidal', `https://tidal.com/browse/artist/${artist.tidal_id}`));
+ if (artist.qobuz_id) badges.push(_hb(QOBUZ_LOGO_URL, 'Qz', 'Qobuz', `https://www.qobuz.com/artist/${artist.qobuz_id}`));
+ if (artist.discogs_id) badges.push(_hb(DISCOGS_LOGO_URL, 'DC', 'Discogs', `https://www.discogs.com/artist/${artist.discogs_id}`));
+ if (artist.soul_id && !String(artist.soul_id).startsWith('soul_unnamed_')) badges.push(_hb('/static/trans2.png', 'SS', `SoulID: ${artist.soul_id}`, null));
+
+ badgesContainer.innerHTML = badges.join('');
+ }
+}
+
+function renderArtistEnrichmentCoverage(enrichment) {
+ const el = document.getElementById('artist-enrichment-coverage');
+ if (!el) return;
+
+ if (!enrichment || !enrichment.total_tracks) {
+ el.style.display = 'none';
+ return;
+ }
+
+ const services = [
+ { name: 'Spotify', key: 'spotify', color: '#1db954' },
+ { name: 'MusicBrainz', key: 'musicbrainz', color: '#ba55d3' },
+ { name: 'Deezer', key: 'deezer', color: '#a238ff' },
+ { name: 'Last.fm', key: 'lastfm', color: '#d51007' },
+ { name: 'iTunes', key: 'itunes', color: '#fc3c44' },
+ { name: 'AudioDB', key: 'audiodb', color: '#1a9fff' },
+ { name: 'Discogs', key: 'discogs', color: '#D4A574' },
+ { name: 'Genius', key: 'genius', color: '#ffff64' },
+ { name: 'Tidal', key: 'tidal', color: '#00ffff' },
+ { name: 'Qobuz', key: 'qobuz', color: '#4285f4' },
+ ];
+
+ const r = 20, circ = 2 * Math.PI * r;
+
+ el.style.display = '';
+ el.innerHTML = `
+ Enrichment Coverage
+
+ ${services.map((s, i) => {
+ const pct = enrichment[s.key] || 0;
+ const offset = circ - (circ * pct / 100);
+ const delay = (i * 0.08).toFixed(2);
+ return `
+ `;
+}
+
+function populateArtistDetailPage(data) {
+ const artist = data.artist;
+ const discography = data.discography;
+
+ console.log(`🎨 Populating artist detail page for: ${artist.name}`);
+ console.log(`📀 Discography data:`, discography);
+ console.log(`📀 Albums:`, discography.albums);
+ console.log(`📀 EPs:`, discography.eps);
+ console.log(`📀 Singles:`, discography.singles);
+
+ // Update hero section with image, name, and stats
+ updateArtistHeroSection(artist, discography);
+
+ // Update genres (if element exists)
+ updateArtistGenres(artist.genres);
+
+ // Update summary stats (if element exists)
+ updateArtistSummaryStats(discography);
+
+ // Populate discography sections
+ populateDiscographySections(discography);
+
+ // Initialize library watchlist button if it exists (for library page)
+ const libraryWatchlistBtn = document.getElementById('library-artist-watchlist-btn');
+ if (libraryWatchlistBtn && data.spotify_artist && data.spotify_artist.spotify_artist_id) {
+ initializeLibraryWatchlistButton(data.spotify_artist.spotify_artist_id, data.spotify_artist.spotify_artist_name);
+ }
+}
+
+function updateArtistDetailImage(imageUrl, artistName) {
+ const imageElement = document.getElementById("artist-detail-image");
+ const fallbackElement = document.getElementById("artist-image-fallback");
+
+ if (imageUrl && imageUrl.trim() !== "") {
+ imageElement.src = imageUrl;
+ imageElement.alt = artistName;
+ imageElement.classList.remove("hidden");
+ fallbackElement.classList.add("hidden");
+
+ imageElement.onerror = () => {
+ console.log(`Failed to load artist image for ${artistName}: ${imageUrl}`);
+ // Replace with fallback on error
+ imageElement.classList.add("hidden");
+ fallbackElement.classList.remove("hidden");
+ };
+
+ imageElement.onload = () => {
+ console.log(`Successfully loaded artist image for ${artistName}: ${imageUrl}`);
+ };
+ } else {
+ console.log(`No image URL for ${artistName}: '${imageUrl}'`);
+ imageElement.classList.add("hidden");
+ fallbackElement.classList.remove("hidden");
+ }
+}
+
+function updateArtistGenres(genres) {
+ const genresContainer = document.getElementById("artist-genres");
+ if (!genresContainer) return;
+
+ genresContainer.innerHTML = "";
+
+ // Clear any previous artist format tags (they arrive later via streaming)
+ const oldFormats = genresContainer.parentElement?.querySelector('.artist-formats');
+ if (oldFormats) oldFormats.remove();
+
+ if (genres && genres.length > 0) {
+ genres.forEach(genre => {
+ const genreTag = document.createElement("span");
+ genreTag.className = "genre-tag";
+ genreTag.textContent = genre;
+ genresContainer.appendChild(genreTag);
+ });
+ }
+}
+
+function updateArtistSummaryStats(discography) {
+ const allReleases = [...discography.albums, ...discography.eps, ...discography.singles];
+ const hasChecking = allReleases.some(r => r.owned === null);
+
+ const ownedAlbums = discography.albums.filter(album => album.owned === true).length;
+ const missingAlbums = discography.albums.filter(album => album.owned === false).length;
+ const totalAlbums = discography.albums.length;
+ const completionPercentage = totalAlbums > 0 ? Math.round((ownedAlbums / totalAlbums) * 100) : 0;
+
+ // Update owned albums count
+ const ownedElement = document.getElementById("owned-albums-count");
+ if (ownedElement) {
+ ownedElement.textContent = hasChecking ? '...' : ownedAlbums;
+ }
+
+ // Update missing albums count
+ const missingElement = document.getElementById("missing-albums-count");
+ if (missingElement) {
+ missingElement.textContent = hasChecking ? '...' : missingAlbums;
+ }
+
+ // Update completion percentage
+ const completionElement = document.getElementById("completion-percentage");
+ if (completionElement) {
+ completionElement.textContent = hasChecking ? 'Checking...' : `${completionPercentage}%`;
+ }
+}
+
+function updateArtistHeaderStats(albumCount, trackCount) {
+ // This function is deprecated - now using updateArtistHeroSection
+ console.log("📊 Using new hero section instead of old header stats");
+}
+
+function updateArtistHeroSection(artist, discography) {
+ console.log("🖼️ Updating artist hero section");
+
+ // Update artist image with detailed debugging
+ const imageElement = document.getElementById("artist-detail-image");
+ const fallbackElement = document.getElementById("artist-detail-image-fallback");
+
+ console.log(`🖼️ Debug Artist image info:`);
+ console.log(` - URL: '${artist.image_url}'`);
+ console.log(` - Type: ${typeof artist.image_url}`);
+ console.log(` - Full artist object:`, artist);
+ console.log(` - Image element:`, imageElement);
+ console.log(` - Fallback element:`, fallbackElement);
+
+ if (artist.image_url && artist.image_url.trim() !== "" && artist.image_url !== "null") {
+ console.log(`✅ Setting image src to: ${artist.image_url}`);
+ imageElement.src = artist.image_url;
+ imageElement.alt = artist.name;
+ imageElement.style.display = "block";
+ if (fallbackElement) {
+ fallbackElement.style.display = "none";
+ }
+
+ imageElement.onload = () => {
+ console.log(`✅ Successfully loaded artist image: ${artist.image_url}`);
+ };
+
+ imageElement.onerror = () => {
+ console.error(`❌ Failed to load artist image: ${artist.image_url}`);
+ // Try Deezer fallback before emoji
+ if (artist.deezer_id && !imageElement.dataset.triedDeezer) {
+ imageElement.dataset.triedDeezer = 'true';
+ imageElement.src = `https://api.deezer.com/artist/${artist.deezer_id}/image?size=big`;
+ } else {
+ imageElement.style.display = "none";
+ if (fallbackElement) {
+ fallbackElement.style.display = "flex";
+ }
+ }
+ };
+ } else {
+ console.log(`🖼️ No valid image URL - showing fallback for ${artist.name}`);
+ imageElement.style.display = "none";
+ if (fallbackElement) {
+ fallbackElement.style.display = "flex";
+ }
+ }
+
+ // Update artist name
+ const nameElement = document.getElementById("artist-detail-name");
+ if (nameElement) {
+ nameElement.textContent = artist.name;
+ }
+
+ // Calculate and update stats for each category
+ updateCategoryStats('albums', discography.albums);
+ updateCategoryStats('eps', discography.eps);
+ updateCategoryStats('singles', discography.singles);
+
+ // Show Download Discography button(s) if there are any releases
+ const _totalReleases = (discography.albums?.length || 0) + (discography.eps?.length || 0) + (discography.singles?.length || 0);
+ const _discogWrap = document.getElementById('discog-download-wrap');
+ if (_discogWrap) _discogWrap.style.display = _totalReleases > 0 ? '' : 'none';
+ const _discogBtnArtists = document.getElementById('discog-download-btn-artists');
+ if (_discogBtnArtists) _discogBtnArtists.style.display = _totalReleases > 0 ? '' : 'none';
+
+ // Last.fm stats (listeners / playcount)
+ const _fmtNum = (n) => {
+ if (!n || n <= 0) return '0';
+ if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+ if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+ return n.toLocaleString();
+ };
+
+ const listenersEl = document.getElementById('artist-hero-listeners');
+ if (listenersEl) {
+ if (artist.lastfm_listeners) {
+ listenersEl.querySelector('.hero-stat-value').textContent = _fmtNum(artist.lastfm_listeners);
+ listenersEl.style.display = '';
+ } else {
+ listenersEl.style.display = 'none';
+ }
+ }
+
+ const playcountEl = document.getElementById('artist-hero-playcount');
+ if (playcountEl) {
+ if (artist.lastfm_playcount) {
+ playcountEl.querySelector('.hero-stat-value').textContent = _fmtNum(artist.lastfm_playcount);
+ playcountEl.style.display = '';
+ } else {
+ playcountEl.style.display = 'none';
+ }
+ }
+
+ // Last.fm bio
+ const bioEl = document.getElementById('artist-hero-bio');
+ if (bioEl) {
+ const bio = artist.lastfm_bio;
+ if (bio && bio.trim()) {
+ // Strip HTML tags and "Read more on Last.fm" links
+ let cleanBio = bio.replace(/
+
`;
+ }).join('')}
+
+
+ ${Math.round(pct)}
+
+ ${s.name}
+
+ ${i + 1}
+
+ ${_escAttr(t.name)}
+ ${_fmtNum(t.playcount)}
+
+ `).join('');
+
+ // Attach play handlers via delegation (avoids inline JS escaping issues)
+ container.onclick = (e) => {
+ const btn = e.target.closest('.hero-top-track-play');
+ if (btn) {
+ e.stopPropagation();
+ playStatsTrack(btn.dataset.track, btn.dataset.artist, '');
+ }
+ };
+ sidebar.style.display = '';
+ } catch (e) {
+ console.debug('Failed to load top tracks:', e);
+ sidebar.style.display = 'none';
+ }
+}
+
+function updateCategoryStats(category, releases) {
+ const hasChecking = releases.some(r => r.owned === null);
+ const owned = releases.filter(r => r.owned === true).length;
+ const total = releases.length;
+ const completion = total > 0 ? Math.round((owned / total) * 100) : 100;
+
+ // Update stats text (compact: "3/12")
+ const statsElement = document.getElementById(`${category}-stats`);
+ if (statsElement) {
+ statsElement.textContent = hasChecking ? '...' : `${owned}/${total}`;
+ }
+
+ // Update completion bar
+ const fillElement = document.getElementById(`${category}-completion-fill`);
+ if (fillElement) {
+ if (hasChecking) {
+ fillElement.style.width = '100%';
+ fillElement.classList.add('checking');
+ } else {
+ fillElement.style.width = `${completion}%`;
+ fillElement.classList.remove('checking');
+ }
+ }
+}
+
+function populateDiscographySections(discography) {
+ // Populate albums
+ populateReleaseSection('albums', discography.albums);
+
+ // Populate EPs
+ populateReleaseSection('eps', discography.eps);
+
+ // Populate singles
+ populateReleaseSection('singles', discography.singles);
+
+ // Apply any active filters after populating
+ applyDiscographyFilters();
+}
+
+function populateReleaseSection(sectionType, releases) {
+ const gridId = `${sectionType}-grid`;
+ const ownedCountId = `${sectionType}-owned-count`;
+ const missingCountId = `${sectionType}-missing-count`;
+
+ const grid = document.getElementById(gridId);
+ if (!grid) return;
+
+ // Clear existing content
+ grid.innerHTML = "";
+
+ const hasChecking = releases.some(r => r.owned === null);
+ const ownedCount = releases.filter(release => release.owned === true).length;
+ const missingCount = releases.filter(release => release.owned === false).length;
+
+ // Update section stats
+ const ownedElement = document.getElementById(ownedCountId);
+ const missingElement = document.getElementById(missingCountId);
+
+ if (ownedElement) {
+ ownedElement.textContent = hasChecking ? 'Checking...' : `${ownedCount} owned`;
+ }
+
+ if (missingElement) {
+ missingElement.textContent = hasChecking ? '' : `${missingCount} missing`;
+ }
+
+ // Create release cards
+ releases.forEach((release, index) => {
+ const card = createReleaseCard(release);
+ grid.appendChild(card);
+ });
+
+ console.log(`📀 Populated ${sectionType} section: ${ownedCount} owned, ${missingCount} missing`);
+ console.log(`📀 Grid element:`, grid);
+ console.log(`📀 Grid children count:`, grid.children.length);
+}
+
+function createReleaseCard(release) {
+ const card = document.createElement("div");
+ const isChecking = release.owned === null;
+ card.className = `release-card${isChecking ? " checking" : (release.owned ? "" : " missing")}`;
+ const releaseId = release.id || "";
+ card.setAttribute("data-release-id", releaseId);
+ // Store mutable reference so stream updates propagate to click handler
+ card._releaseData = release;
+
+ // Tag card for content-type filtering
+ const titleLower = (release.title || '').toLowerCase();
+ const livePattern = /\b(live)\b|\(live[^)]*\)|\[live[^]]*\]/i;
+ const compilationPattern = /\b(greatest hits|best of|collection|anthology|essential)\b/i;
+ const featuredPattern = /\(?\bfeat\.?\s|\bft\.?\s|\bfeaturing\b/i;
+ const isLive = livePattern.test(release.title || '') || (release.album_type === 'compilation' && livePattern.test(release.title || ''));
+ const isCompilation = (release.album_type === 'compilation') || compilationPattern.test(release.title || '');
+ const isFeatured = featuredPattern.test(release.title || '');
+ card.setAttribute("data-is-live", isLive ? "true" : "false");
+ card.setAttribute("data-is-compilation", isCompilation ? "true" : "false");
+ card.setAttribute("data-is-featured", isFeatured ? "true" : "false");
+
+ // Add MusicBrainz icon if available
+ let mbIcon = null;
+ if (release.musicbrainz_release_id) {
+ mbIcon = document.createElement("div");
+ mbIcon.className = "mb-card-icon";
+ mbIcon.title = "View on MusicBrainz";
+ mbIcon.innerHTML = `💿
`;
+ };
+ imageContainer.appendChild(img);
+ } else {
+ imageContainer.innerHTML = `💿
`;
+ }
+
+ // Create title
+ const title = document.createElement("h4");
+ title.className = "release-title";
+ title.textContent = release.title;
+ title.title = release.title;
+
+ // Create year - extract from release_date (Spotify format) or fall back to year field
+ const year = document.createElement("div");
+ year.className = "release-year";
+
+ let yearText = "Unknown Year";
+
+ // DEBUG: Log the release data to see what we're working with (remove this after testing)
+ // console.log(`🔍 DEBUG: Release "${release.title}" data:`, {
+ // title: release.title,
+ // owned: release.owned,
+ // year: release.year,
+ // release_date: release.release_date,
+ // track_completion: release.track_completion
+ // });
+
+ // First try to extract year from release_date (Spotify format: "YYYY-MM-DD")
+ if (release.release_date) {
+ try {
+ // Extract year directly from string to avoid timezone issues
+ const yearMatch = release.release_date.match(/^(\d{4})/);
+ if (yearMatch) {
+ const releaseYear = parseInt(yearMatch[1]);
+ if (releaseYear && !isNaN(releaseYear) && releaseYear > 1900 && releaseYear <= new Date().getFullYear() + 1) {
+ yearText = releaseYear.toString();
+ }
+ } else {
+ // Fallback to Date parsing if format is different
+ const releaseYear = new Date(release.release_date).getFullYear();
+ if (releaseYear && !isNaN(releaseYear) && releaseYear > 1900 && releaseYear <= new Date().getFullYear() + 1) {
+ yearText = releaseYear.toString();
+ }
+ }
+ } catch (e) {
+ console.warn('Error parsing release_date:', release.release_date, e);
+ }
+ }
+
+ // Fallback to direct year field if release_date parsing failed
+ if (yearText === "Unknown Year" && release.year) {
+ yearText = release.year.toString();
+ }
+
+ year.textContent = yearText;
+
+ // Create completion info
+ const completion = document.createElement("div");
+ completion.className = "release-completion";
+
+ const completionText = document.createElement("span");
+ const completionBar = document.createElement("div");
+ completionBar.className = "completion-bar";
+
+ const completionFill = document.createElement("div");
+ completionFill.className = "completion-fill";
+
+ if (release.owned === null || release.track_completion === 'checking') {
+ // Checking state - ownership not yet resolved
+ completionText.textContent = "Checking...";
+ completionText.className = "completion-text checking";
+ completionFill.className += " checking";
+ completionFill.style.width = "100%";
+ } else if (release.owned) {
+ // Handle new detailed track completion object
+ if (release.track_completion && typeof release.track_completion === 'object') {
+ const completion = release.track_completion;
+ const percentage = completion.percentage || 100;
+ const ownedTracks = completion.owned_tracks || 0;
+ const totalTracks = completion.total_tracks || 0;
+ const missingTracks = completion.missing_tracks || 0;
+
+ completionFill.style.width = `${percentage}%`;
+
+ if (missingTracks === 0) {
+ completionText.textContent = `Complete (${ownedTracks})`;
+ completionText.className = "completion-text complete";
+ completionFill.className += " complete";
+ } else {
+ completionText.textContent = `${ownedTracks}/${totalTracks} tracks`;
+ completionText.className = "completion-text partial";
+ completionFill.className += " partial";
+
+ // Add missing tracks indicator
+ completionText.title = `Missing ${missingTracks} track${missingTracks !== 1 ? 's' : ''}`;
+ }
+ } else {
+ // Fallback for legacy simple percentage
+ const percentage = release.track_completion || 100;
+ completionFill.style.width = `${percentage}%`;
+
+ if (percentage === 100) {
+ completionText.textContent = "Complete";
+ completionText.className = "completion-text complete";
+ completionFill.className += " complete";
+ } else {
+ completionText.textContent = `${percentage}%`;
+ completionText.className = "completion-text partial";
+ completionFill.className += " partial";
+ }
+ }
+ } else {
+ const totalTr = release.total_tracks || release.track_completion?.total_tracks || 0;
+ completionText.textContent = totalTr > 0 ? `Missing (${totalTr} tracks)` : "Not in library";
+ completionText.className = "completion-text missing";
+ completionFill.className += " missing";
+ completionFill.style.width = "0%";
+ }
+
+ completionBar.appendChild(completionFill);
+ completion.appendChild(completionText);
+ completion.appendChild(completionBar);
+
+ // Assemble card
+ card.appendChild(imageContainer);
+ card.appendChild(title);
+ card.appendChild(year);
+ card.appendChild(completion);
+
+ // Add MusicBrainz icon LAST to ensure it's on top
+ if (release.musicbrainz_release_id && mbIcon) { // Check if mbIcon was created
+ card.appendChild(mbIcon);
+ }
+
+ // Add click handler for release card (uses card._releaseData for mutable reference)
+ card.addEventListener("click", async () => {
+ const rel = card._releaseData;
+ console.log(`Clicked on release: ${rel.title} (Owned: ${rel.owned})`);
+
+ // Still checking - ignore click
+ if (rel.owned === null) {
+ showToast(`Still checking ownership for ${rel.title}...`, "info");
+ return;
+ }
+
+ showLoadingOverlay('Loading album...');
+
+ // For missing or incomplete releases, open wishlist modal
+ try {
+ // Convert release object to album format expected by our function
+ const albumData = {
+ id: rel.id,
+ name: rel.title,
+ image_url: rel.image_url,
+ release_date: rel.year ? `${rel.year}-01-01` : '',
+ album_type: rel.album_type || rel.type || 'album',
+ total_tracks: (rel.track_completion && typeof rel.track_completion === 'object')
+ ? rel.track_completion.total_tracks : (rel.track_count || 1)
+ };
+
+ // Get current artist from artist detail page state
+ const currentArtist = artistDetailPageState.currentArtistName ? {
+ id: artistDetailPageState.currentArtistId,
+ name: artistDetailPageState.currentArtistName,
+ image_url: getArtistImageFromPage() || '' // Get artist image from page
+ } : null;
+
+ if (!currentArtist) {
+ console.error('❌ No current artist found for release click');
+ showToast('Error: No artist information available', 'error');
+ return;
+ }
+
+ // Load tracks for the album (pass name/artist for Hydrabase support)
+ const _aat2 = new URLSearchParams({ name: albumData.name || '', artist: currentArtist.name || '' });
+ const response = await fetch(`/api/album/${albumData.id}/tracks?${_aat2}`);
+ if (!response.ok) {
+ throw new Error(`Failed to load album tracks: ${response.status}`);
+ }
+
+ const data = await response.json();
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ throw new Error('No tracks found for this release');
+ }
+
+ // Use the actual album type from release data
+ const albumType = rel.album_type || rel.type || 'album';
+
+ // Open the Add to Wishlist modal immediately (no waiting for ownership check)
+ hideLoadingOverlay();
+ await openAddToWishlistModal(albumData, currentArtist, data.tracks, albumType);
+
+ // Always lazy-load track ownership + metadata (non-blocking)
+ lazyLoadTrackOwnership(currentArtist.name, data.tracks, card, albumData.name);
+
+ } catch (error) {
+ hideLoadingOverlay();
+ console.error('❌ Error handling release click:', error);
+ showToast(`Error opening wishlist modal: ${error.message}`, 'error');
+ }
+ });
+
+ return card;
+}
+
+/**
+ * Helper function to get artist image from the current artist detail page
+ */
+function getArtistImageFromPage() {
+ try {
+ // Try to get from artist detail image element
+ const artistDetailImage = document.getElementById('artist-detail-image');
+ if (artistDetailImage && artistDetailImage.src && artistDetailImage.src !== window.location.href) {
+ return artistDetailImage.src;
+ }
+
+ // Try to get from artist hero image
+ const artistImage = document.getElementById('artist-image');
+ if (artistImage) {
+ const bgImage = window.getComputedStyle(artistImage).backgroundImage;
+ if (bgImage && bgImage !== 'none') {
+ // Extract URL from CSS background-image
+ const urlMatch = bgImage.match(/url\(["']?(.*?)["']?\)/);
+ if (urlMatch && urlMatch[1]) {
+ return urlMatch[1];
+ }
+ }
+ }
+
+ return null;
+ } catch (error) {
+ console.warn('Error getting artist image from page:', error);
+ return null;
+ }
+}
+
+// ================================================================================================
+// LIBRARY COMPLETION STREAMING - Two-phase lazy-load pattern
+// ================================================================================================
+
+async function checkLibraryCompletion(artistName, discography) {
+ // Abort any in-progress check
+ if (artistDetailPageState.completionController) {
+ artistDetailPageState.completionController.abort();
+ }
+ artistDetailPageState.completionController = new AbortController();
+
+ const payload = {
+ artist_name: artistName,
+ albums: discography.albums || [],
+ eps: discography.eps || [],
+ singles: discography.singles || [],
+ source: discography?.source || null
+ };
+
+ try {
+ const response = await fetch('/api/library/completion-stream', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload),
+ signal: artistDetailPageState.completionController.signal
+ });
+
+ if (!response.ok) {
+ console.error(`❌ Completion stream failed: ${response.status}`);
+ return;
+ }
+
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+ let ownedCounts = { albums: 0, eps: 0, singles: 0 };
+ let totalCounts = { albums: 0, eps: 0, singles: 0 };
+ const artistFormatSet = new Set();
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+
+ buffer += decoder.decode(value, { stream: true });
+ const lines = buffer.split('\n');
+ buffer = lines.pop(); // Keep incomplete line in buffer
+
+ for (const line of lines) {
+ if (!line.startsWith('data: ')) continue;
+ try {
+ const eventData = JSON.parse(line.slice(6));
+ if (eventData.type === 'completion') {
+ updateLibraryReleaseCard(eventData);
+ totalCounts[eventData.category]++;
+ if (eventData.status !== 'missing' && eventData.status !== 'error') {
+ ownedCounts[eventData.category]++;
+ // Accumulate formats for artist-level summary
+ if (eventData.formats) {
+ eventData.formats.forEach(f => artistFormatSet.add(f));
+ }
+ }
+ // Update stats incrementally
+ updateCategoryStatsFromStream(
+ eventData.category,
+ ownedCounts[eventData.category],
+ totalCounts[eventData.category] - ownedCounts[eventData.category]
+ );
+ } else if (eventData.type === 'complete') {
+ console.log(`✅ Library completion stream done: ${eventData.processed_count} items`);
+ // Final stats recalculation
+ recalculateSummaryStats(artistFormatSet);
+ }
+ } catch (parseError) {
+ console.warn('Error parsing SSE event:', parseError, line);
+ }
+ }
+ }
+ } catch (error) {
+ if (error.name === 'AbortError') {
+ console.log('🛑 Library completion stream aborted (navigation)');
+ } else {
+ console.error('❌ Error in library completion stream:', error);
+ }
+ }
+}
+
+function updateLibraryReleaseCard(data) {
+ const releaseId = data.id || "";
+ const card = document.querySelector(`[data-release-id="${releaseId}"]`);
+ if (!card) return;
+
+ const isOwned = data.status !== 'missing' && data.status !== 'error';
+
+ // Update card class
+ card.classList.remove('checking', 'missing');
+ if (!isOwned) {
+ card.classList.add('missing');
+ }
+
+ // Use real numbers — no rounding or overrides
+ const isComplete = data.owned_tracks >= data.expected_tracks && data.owned_tracks > 0;
+ const effectiveMissing = data.expected_tracks - data.owned_tracks;
+
+ // Update the mutable release data on the card
+ if (card._releaseData) {
+ card._releaseData.owned = isOwned;
+ if (isOwned && data.expected_tracks > 0) {
+ card._releaseData.track_completion = {
+ owned_tracks: data.owned_tracks,
+ total_tracks: isComplete ? data.owned_tracks : data.expected_tracks,
+ percentage: isComplete ? 100 : data.completion_percentage,
+ missing_tracks: effectiveMissing
+ };
+ } else if (isOwned) {
+ card._releaseData.track_completion = {
+ owned_tracks: data.owned_tracks,
+ total_tracks: data.owned_tracks,
+ percentage: 100,
+ missing_tracks: 0
+ };
+ } else {
+ card._releaseData.track_completion = 0;
+ }
+ }
+
+ // Update completion text element in-place
+ const completionText = card.querySelector('.completion-text');
+ if (completionText) {
+ completionText.classList.remove('checking', 'complete', 'partial', 'missing');
+ if (isOwned) {
+ if (effectiveMissing <= 0) {
+ completionText.textContent = `Complete (${data.owned_tracks})`;
+ completionText.className = 'completion-text complete';
+ } else {
+ completionText.textContent = `${data.owned_tracks}/${data.expected_tracks} tracks`;
+ completionText.className = 'completion-text partial';
+ completionText.title = `Missing ${effectiveMissing} track${effectiveMissing !== 1 ? 's' : ''}`;
+ }
+ } else {
+ completionText.textContent = 'Missing';
+ completionText.className = 'completion-text missing';
+ }
+ }
+
+ // Update completion fill bar in-place
+ const completionFill = card.querySelector('.completion-fill');
+ if (completionFill) {
+ completionFill.classList.remove('checking', 'complete', 'partial', 'missing');
+ if (isOwned) {
+ const pct = isComplete ? 100 : (data.completion_percentage || 100);
+ completionFill.style.width = `${pct}%`;
+ completionFill.classList.add(effectiveMissing <= 0 ? 'complete' : 'partial');
+ } else {
+ completionFill.style.width = '0%';
+ completionFill.classList.add('missing');
+ }
+ }
+
+ // Display format tags on owned releases
+ if (isOwned && data.formats && data.formats.length > 0) {
+ // Store formats on release data for modal use
+ if (card._releaseData) {
+ card._releaseData.formats = data.formats;
+ }
+ // Remove any existing format tags
+ const existingFormats = card.querySelector('.release-formats');
+ if (existingFormats) existingFormats.remove();
+
+ const formatsDiv = document.createElement('div');
+ formatsDiv.className = 'release-formats';
+ formatsDiv.innerHTML = data.formats.map(f => `${f}`).join('');
+ card.appendChild(formatsDiv);
+ }
+
+ // Re-apply filters so newly resolved cards respect active filters
+ applyDiscographyFilters();
+}
+
+function updateCategoryStatsFromStream(category, ownedCount, missingCount) {
+ const total = ownedCount + missingCount;
+ const completion = total > 0 ? Math.round((ownedCount / total) * 100) : 100;
+
+ const statsElement = document.getElementById(`${category}-stats`);
+ if (statsElement) {
+ statsElement.textContent = `${ownedCount}/${total}`;
+ }
+
+ const fillElement = document.getElementById(`${category}-completion-fill`);
+ if (fillElement) {
+ fillElement.classList.remove('checking');
+ fillElement.style.width = `${completion}%`;
+ }
+}
+
+function recalculateSummaryStats(artistFormatSet) {
+ const disc = artistDetailPageState.currentDiscography;
+ if (!disc) return;
+
+ // Recalculate from the live card data
+ const categories = ['albums', 'eps', 'singles'];
+ for (const cat of categories) {
+ const grid = document.getElementById(`${cat}-grid`);
+ if (!grid) continue;
+ let owned = 0, missing = 0;
+ grid.querySelectorAll('.release-card').forEach(card => {
+ if (card._releaseData) {
+ if (card._releaseData.owned === true) owned++;
+ else if (card._releaseData.owned === false) missing++;
+ }
+ });
+ updateCategoryStatsFromStream(cat, owned, missing);
+ }
+
+ // Update summary stats (albums only, matches original behavior)
+ const albumGrid = document.getElementById('albums-grid');
+ if (albumGrid) {
+ let ownedAlbums = 0, missingAlbums = 0;
+ albumGrid.querySelectorAll('.release-card').forEach(card => {
+ if (card._releaseData) {
+ if (card._releaseData.owned === true) ownedAlbums++;
+ else if (card._releaseData.owned === false) missingAlbums++;
+ }
+ });
+ const total = ownedAlbums + missingAlbums;
+ const pct = total > 0 ? Math.round((ownedAlbums / total) * 100) : 0;
+
+ const ownedEl = document.getElementById("owned-albums-count");
+ if (ownedEl) ownedEl.textContent = ownedAlbums;
+ const missingEl = document.getElementById("missing-albums-count");
+ if (missingEl) missingEl.textContent = missingAlbums;
+ const completionEl = document.getElementById("completion-percentage");
+ if (completionEl) completionEl.textContent = `${pct}%`;
+ }
+
+ // Display artist-level format summary
+ if (artistFormatSet && artistFormatSet.size > 0) {
+ const heroInfo = document.querySelector('.artist-hero-section .artist-info');
+ if (heroInfo) {
+ // Remove any existing artist format tag
+ const existing = heroInfo.querySelector('.artist-formats');
+ if (existing) existing.remove();
+
+ const formatsDiv = document.createElement('div');
+ formatsDiv.className = 'artist-formats';
+ formatsDiv.innerHTML = [...artistFormatSet].sort()
+ .map(f => `${f}`)
+ .join('');
+ // Insert after genres container
+ const genresContainer = heroInfo.querySelector('.artist-genres-container');
+ if (genresContainer && genresContainer.nextSibling) {
+ heroInfo.insertBefore(formatsDiv, genresContainer.nextSibling);
+ } else {
+ heroInfo.appendChild(formatsDiv);
+ }
+ }
+ }
+}
+
+// ===============================================
+// Discography Filter Functions
+// ===============================================
+
+function initializeDiscographyFilters() {
+ const container = document.getElementById('discography-filters');
+ if (!container) return;
+
+ container.addEventListener('click', (e) => {
+ const btn = e.target.closest('.discography-filter-btn');
+ if (!btn) return;
+
+ const filterType = btn.dataset.filter;
+ const value = btn.dataset.value;
+
+ if (filterType === 'category') {
+ // Multi-toggle: toggle this category on/off
+ btn.classList.toggle('active');
+ discographyFilterState.categories[value] = btn.classList.contains('active');
+ } else if (filterType === 'content') {
+ // Multi-toggle: toggle this content type on/off
+ btn.classList.toggle('active');
+ discographyFilterState.content[value] = btn.classList.contains('active');
+ } else if (filterType === 'ownership') {
+ // Single-select: deactivate siblings, activate this one
+ container.querySelectorAll('[data-filter="ownership"]').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ discographyFilterState.ownership = value;
+ }
+
+ applyDiscographyFilters();
+ });
+}
+
+function resetDiscographyFilters() {
+ discographyFilterState.categories = { albums: true, eps: true, singles: true };
+ discographyFilterState.content = { live: true, compilations: true, featured: true };
+ discographyFilterState.ownership = 'all';
+
+ // Reset button visual states
+ const container = document.getElementById('discography-filters');
+ if (!container) return;
+ container.querySelectorAll('.discography-filter-btn').forEach(btn => {
+ const filterType = btn.dataset.filter;
+ const value = btn.dataset.value;
+ if (filterType === 'ownership') {
+ btn.classList.toggle('active', value === 'all');
+ } else {
+ btn.classList.add('active');
+ }
+ });
+}
+
+function applyDiscographyFilters() {
+ const categories = ['albums', 'eps', 'singles'];
+
+ for (const cat of categories) {
+ const section = document.getElementById(`${cat}-section`);
+ if (!section) continue;
+
+ // Category toggle — hide entire section
+ if (!discographyFilterState.categories[cat]) {
+ section.style.display = 'none';
+ continue;
+ }
+ section.style.display = '';
+
+ // Filter individual cards within the section
+ const grid = document.getElementById(`${cat}-grid`);
+ if (!grid) continue;
+
+ let visibleOwned = 0;
+ let visibleMissing = 0;
+ let visibleCount = 0;
+
+ grid.querySelectorAll('.release-card').forEach(card => {
+ let hidden = false;
+
+ // Content filters
+ if (!discographyFilterState.content.live && card.getAttribute('data-is-live') === 'true') {
+ hidden = true;
+ }
+ if (!discographyFilterState.content.compilations && card.getAttribute('data-is-compilation') === 'true') {
+ hidden = true;
+ }
+ if (!discographyFilterState.content.featured && card.getAttribute('data-is-featured') === 'true') {
+ hidden = true;
+ }
+
+ // Ownership filter (only apply if card is not still checking)
+ if (!hidden && discographyFilterState.ownership !== 'all' && card._releaseData) {
+ const owned = card._releaseData.owned;
+ if (owned !== null) { // Don't hide cards still being checked
+ if (discographyFilterState.ownership === 'owned' && !owned) hidden = true;
+ if (discographyFilterState.ownership === 'missing' && owned) hidden = true;
+ }
+ }
+
+ card.style.display = hidden ? 'none' : '';
+
+ // Count visible cards for stats
+ if (!hidden && card._releaseData) {
+ visibleCount++;
+ if (card._releaseData.owned === true) visibleOwned++;
+ else if (card._releaseData.owned === false) visibleMissing++;
+ }
+ });
+
+ // Update section stats to reflect filtered view
+ const ownedEl = document.getElementById(`${cat}-owned-count`);
+ const missingEl = document.getElementById(`${cat}-missing-count`);
+ if (ownedEl) ownedEl.textContent = `${visibleOwned} owned`;
+ if (missingEl) missingEl.textContent = `${visibleMissing} missing`;
+
+ // Hide section entirely if all cards are hidden
+ section.style.display = visibleCount === 0 ? 'none' : '';
+ }
+}
+
+// ==================== Download Discography Modal ====================
+
+async function openDiscographyModal() {
+ // Support both Artists search page and Library artist detail page
+ let artist = artistsPageState.selectedArtist;
+ let discography = artistsPageState.artistDiscography;
+ let completionCache = artistsPageState.cache.completionData;
+
+ // Fallback to Library page state if Artists page has no data for THIS artist
+ const libId = artistDetailPageState.currentArtistId;
+ const libName = artistDetailPageState.currentArtistName;
+ const isLibraryPage = libId && libName;
+ const artistsPageMatchesLibrary = artist && isLibraryPage && artist.name?.toLowerCase() === libName?.toLowerCase();
+
+ if (isLibraryPage && (!artist || !discography || !artistsPageMatchesLibrary)) {
+ // On library page — don't trust stale artistsPageState from a previous Artists page search
+ artist = { id: libId, name: libName, image_url: document.getElementById('artist-detail-image')?.src || '' };
+ discography = null;
+
+ let metadataArtistId = null;
+ try {
+ showToast('Loading discography...', 'info');
+
+ // Fetch the artist's metadata IDs from the DB (enhanced view may not be loaded)
+ let lookupId = libId;
+ try {
+ const idRes = await fetch(`/api/library/artist/${libId}/enhanced`);
+ const idData = await idRes.json();
+ if (idData.success && idData.artist) {
+ const a = idData.artist;
+ metadataArtistId = a.spotify_artist_id || a.itunes_artist_id || a.deezer_id || null;
+ lookupId = metadataArtistId || libId;
+ }
+ } catch (e) {
+ console.debug('[Discography] Could not fetch artist IDs, using DB id');
+ }
+
+ const res = await fetch(`/api/artist/${encodeURIComponent(lookupId)}/discography?artist_name=${encodeURIComponent(libName)}`);
+ const data = await res.json();
+
+ if (!data.error) {
+ discography = { albums: data.albums || [], singles: data.singles || [] };
+ if (discography.albums.length > 0 || discography.singles.length > 0) {
+ artistsPageState.artistDiscography = discography;
+ // Use metadata source ID for the modal (needed for download API calls)
+ if (metadataArtistId) artist.id = metadataArtistId;
+ artistsPageState.selectedArtist = artist;
+ } else {
+ discography = null;
+ }
+ }
+ } catch (e) {
+ console.error('Failed to load discography:', e);
+ }
+ }
+
+ if (!artist || !discography) {
+ showToast('No discography found. Try searching this artist on the Artists page instead.', 'error');
+ return;
+ }
+
+ const completionData = (completionCache || {})[artist.id] || {};
+ const allReleases = [
+ ...(discography.albums || []).map(a => ({ ...a, _type: 'album' })),
+ ...(discography.eps || []).map(a => ({ ...a, _type: 'ep' })),
+ ...(discography.singles || []).map(a => ({ ...a, _type: 'single' })),
+ ];
+
+ // Build modal
+ const overlay = document.createElement('div');
+ overlay.className = 'discog-modal-overlay';
+ overlay.id = 'discog-modal-overlay';
+
+ const artistImg = artist.image_url || '';
+
+ overlay.innerHTML = `
+
+
+ `;
+
+ document.body.appendChild(overlay);
+ requestAnimationFrame(() => overlay.classList.add('visible'));
+ _updateDiscogFooterCount();
+
+ // Bind submit button (avoids onclick being intercepted by helper system)
+ document.getElementById('discog-submit-btn')?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ startDiscographyDownload();
+ });
+}
+
+function _esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+function _renderDiscogCard(release, index, completionData) {
+ const comp = completionData?.albums?.find(c => c.id === release.id) || completionData?.singles?.find(c => c.id === release.id);
+ const status = comp?.status || 'unknown';
+ const isOwned = status === 'completed';
+ const isPartial = status === 'partial' || status === 'nearly_complete';
+ const year = release.release_date ? release.release_date.substring(0, 4) : '';
+ const tracks = release.total_tracks || 0;
+ const img = release.image_url || '';
+ const checked = !isOwned;
+ const statusClass = isOwned ? 'owned' : isPartial ? 'partial' : '';
+ const statusIcon = isOwned ? '✓' : isPartial ? '◐' : '';
+
+ return `
+
+ `;
+}
+
+function toggleDiscogFilter(btn) {
+ btn.classList.toggle('active');
+ const type = btn.dataset.type;
+ document.querySelectorAll(`.discog-card[data-type="${type}"]`).forEach(card => {
+ card.style.display = btn.classList.contains('active') ? '' : 'none';
+ });
+ _updateDiscogFooterCount();
+}
+
+function discogSelectAll(select) {
+ document.querySelectorAll('.discog-card-cb').forEach(cb => {
+ if (cb.closest('.discog-card').style.display !== 'none') {
+ cb.checked = select;
+ }
+ });
+ _updateDiscogFooterCount();
+}
+
+function _updateDiscogFooterCount() {
+ const checked = document.querySelectorAll('.discog-card-cb:checked');
+ let releases = 0, tracks = 0;
+ checked.forEach(cb => {
+ if (cb.closest('.discog-card').style.display !== 'none') {
+ releases++;
+ tracks += parseInt(cb.dataset.tracks) || 0;
+ }
+ });
+ const info = document.getElementById('discog-footer-info');
+ const btn = document.getElementById('discog-submit-text');
+ if (info) info.textContent = `${releases} release${releases !== 1 ? 's' : ''} · ${tracks} tracks`;
+ if (btn) btn.textContent = releases > 0 ? `Add ${releases} to Wishlist` : 'Select releases';
+ const submitBtn = document.getElementById('discog-submit-btn');
+ if (submitBtn) submitBtn.disabled = releases === 0;
+}
+
+async function startDiscographyDownload() {
+ let artist = artistsPageState.selectedArtist;
+ // Fallback to library page state
+ if (!artist && artistDetailPageState.currentArtistId) {
+ artist = { id: artistDetailPageState.currentArtistId, name: artistDetailPageState.currentArtistName || 'Unknown' };
+ }
+ if (!artist || !artist.id) {
+ showToast('No artist data available', 'error');
+ return;
+ }
+
+ const checked = document.querySelectorAll('.discog-card-cb:checked');
+ const albumEntries = [];
+ checked.forEach(cb => {
+ if (cb.closest('.discog-card').style.display !== 'none') {
+ albumEntries.push({
+ id: cb.dataset.albumId,
+ tracks: parseInt(cb.dataset.tracks) || 0
+ });
+ }
+ });
+ // Sort by track count descending — process Deluxe/expanded editions first
+ // so their tracks get added before standard editions (which then get deduped)
+ albumEntries.sort((a, b) => b.tracks - a.tracks);
+ const albumIds = albumEntries.map(e => e.id);
+
+ if (albumIds.length === 0) return;
+
+ // Switch to progress view
+ const grid = document.getElementById('discog-grid');
+ const progress = document.getElementById('discog-progress');
+ const footer = document.getElementById('discog-footer');
+ const filterBar = document.querySelector('.discog-filter-bar');
+
+ if (grid) grid.style.display = 'none';
+ if (filterBar) filterBar.style.display = 'none';
+ if (progress) {
+ progress.style.display = '';
+ progress.innerHTML = '';
+ }
+
+ // Build progress items
+ const albumMap = {};
+ checked.forEach(cb => {
+ if (cb.closest('.discog-card').style.display !== 'none') {
+ const card = cb.closest('.discog-card');
+ const id = cb.dataset.albumId;
+ const title = card.querySelector('.discog-card-title')?.textContent || '';
+ const img = card.querySelector('.discog-card-art img')?.src || '';
+ albumMap[id] = { title, img };
+
+ const item = document.createElement('div');
+ item.className = 'discog-progress-item';
+ item.id = `discog-prog-${id}`;
+ item.innerHTML = `
+
+
+
+
+
+
+
+ Download Discography
+${_esc(artist.name)}
+
+ ${allReleases.map((r, i) => _renderDiscogCard(r, i, completionData)).join('')}
+
+
+
+ ${img ? `` : '🎵'}
+
+
+
+ `;
+ progress.appendChild(item);
+ }
+ });
+
+ // Update footer
+ const submitBtn = document.getElementById('discog-submit-btn');
+ if (submitBtn) submitBtn.style.display = 'none';
+ if (footer) {
+ const info = document.getElementById('discog-footer-info');
+ if (info) info.textContent = 'Processing... this may take a moment';
+ }
+
+ // Mark all items as active
+ document.querySelectorAll('.discog-progress-item').forEach(item => item.classList.add('active'));
+
+ try {
+ const response = await fetch(`/api/artist/${artist.id}/download-discography`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ album_ids: albumIds, artist_name: artist.name })
+ });
+
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+
+ buffer += decoder.decode(value, { stream: true });
+ const lines = buffer.split('\n');
+ buffer = lines.pop(); // Keep incomplete line in buffer
+
+ for (const line of lines) {
+ if (!line.trim()) continue;
+ try {
+ const data = JSON.parse(line);
+
+ if (data.status === 'complete') {
+ _handleDiscogProgress({ type: 'complete', total_added: data.total_added, total_skipped: data.total_skipped });
+ } else {
+ // Per-album update
+ const item = document.getElementById(`discog-prog-${data.album_id}`);
+ if (!item) continue;
+
+ const statusEl = item.querySelector('.discog-prog-status');
+ const iconEl = item.querySelector('.discog-prog-icon');
+ item.classList.remove('active');
+
+ if (data.status === 'done') {
+ const parts = [];
+ if (data.tracks_added > 0) parts.push(`${data.tracks_added} added`);
+ if (data.tracks_skipped > 0) parts.push(`${data.tracks_skipped} skipped`);
+ statusEl.textContent = parts.join(', ') || 'No new tracks';
+ iconEl.innerHTML = data.tracks_added > 0 ? '✓' : '—';
+ item.classList.add(data.tracks_added > 0 ? 'done' : 'skipped');
+ } else if (data.status === 'error') {
+ statusEl.textContent = data.message || 'Error';
+ iconEl.innerHTML = '✗';
+ item.classList.add('error');
+ }
+ }
+ } catch (e) { /* skip malformed line */ }
+ }
+ }
+ } catch (err) {
+ showToast(`Discography download failed: ${err.message}`, 'error');
+ }
+}
+
+function _handleDiscogProgress(data) {
+ if (data.type === 'album') {
+ const item = document.getElementById(`discog-prog-${data.album_id}`);
+ if (!item) return;
+
+ const statusEl = item.querySelector('.discog-prog-status');
+ const iconEl = item.querySelector('.discog-prog-icon');
+
+ if (data.status === 'processing') {
+ statusEl.textContent = `Processing ${data.tracks_total} tracks...`;
+ item.classList.add('active');
+ } else if (data.status === 'done') {
+ const parts = [];
+ if (data.tracks_added > 0) parts.push(`${data.tracks_added} added`);
+ if (data.tracks_skipped > 0) parts.push(`${data.tracks_skipped} skipped`);
+ statusEl.textContent = parts.join(', ') || 'No new tracks';
+ iconEl.innerHTML = data.tracks_added > 0 ? '✓' : '—';
+ item.classList.remove('active');
+ item.classList.add(data.tracks_added > 0 ? 'done' : 'skipped');
+ } else if (data.status === 'error') {
+ statusEl.textContent = data.message || 'Error';
+ iconEl.innerHTML = '✗';
+ item.classList.add('error');
+ }
+ } else if (data.type === 'complete') {
+ const info = document.getElementById('discog-footer-info');
+ if (info) info.textContent = `Done — ${data.total_added} tracks added, ${data.total_skipped} skipped`;
+
+ // Show "Process Wishlist" button
+ const footer = document.querySelector('.discog-footer-actions');
+ if (footer && data.total_added > 0) {
+ footer.innerHTML = `
+
+
+ `;
+ } else if (footer) {
+ footer.innerHTML = '';
+ }
+ }
+}
+
+function closeDiscographyModal() {
+ const overlay = document.getElementById('discog-modal-overlay');
+ if (overlay) {
+ overlay.classList.remove('visible');
+ setTimeout(() => overlay.remove(), 300);
+ }
+}
+
+// ==================== Enhanced Library Management View ====================
+
+function isEnhancedAdmin() {
+ return currentProfile && currentProfile.is_admin;
+}
+
+function toggleEnhancedView(enabled) {
+
+ const standardSections = document.querySelector('.discography-sections');
+ const enhancedContainer = document.getElementById('enhanced-view-container');
+ const toggleBtns = document.querySelectorAll('.enhanced-view-toggle-btn');
+
+ if (!standardSections || !enhancedContainer) return;
+
+ artistDetailPageState.enhancedView = enabled;
+
+ // Update toggle button states
+ toggleBtns.forEach(btn => {
+ const view = btn.getAttribute('data-view');
+ btn.classList.toggle('active', (view === 'enhanced') === enabled);
+ });
+
+ // Hide/show standard filter groups (not relevant in enhanced view)
+ const filterGroups = document.querySelectorAll('#discography-filters .filter-group');
+ filterGroups.forEach(group => {
+ const label = group.querySelector('.filter-label');
+ if (label && label.textContent !== 'View') {
+ group.style.display = enabled ? 'none' : '';
+ }
+ });
+ const dividers = document.querySelectorAll('#discography-filters .filter-divider');
+ dividers.forEach((d, i) => {
+ if (i < dividers.length - 1) d.style.display = enabled ? 'none' : '';
+ });
+
+ if (enabled) {
+ standardSections.classList.add('hidden');
+ enhancedContainer.classList.remove('hidden');
+
+ if (!artistDetailPageState.enhancedData) {
+ loadEnhancedViewData(artistDetailPageState.currentArtistId);
+ } else {
+ renderEnhancedView();
+ }
+ } else {
+ standardSections.classList.remove('hidden');
+ enhancedContainer.classList.add('hidden');
+ const bulkBar = document.getElementById('enhanced-bulk-bar');
+ if (bulkBar) bulkBar.classList.remove('visible');
+ }
+}
+
+async function loadEnhancedViewData(artistId) {
+ const container = document.getElementById('enhanced-view-container');
+ if (!container) return;
+
+ container.innerHTML = '${_esc(title)}
+ Waiting...
+ Loading library data...
';
+
+ try {
+ const response = await fetch(`/api/library/artist/${artistId}/enhanced`);
+ const data = await response.json();
+
+ if (!data.success) throw new Error(data.error || 'Failed to load enhanced data');
+
+ artistDetailPageState.enhancedData = data;
+ artistDetailPageState.expandedAlbums = new Set();
+ artistDetailPageState.selectedTracks = new Set();
+ artistDetailPageState.enhancedTrackSort = {};
+ artistDetailPageState.serverType = data.server_type || null;
+ _tagPreviewServerType = data.server_type || null;
+ _rebuildAlbumMap();
+ renderEnhancedView();
+
+ } catch (error) {
+ console.error('Error loading enhanced view data:', error);
+ container.innerHTML = `Failed to load: ${escapeHtml(error.message)}
`;
+ }
+}
+
+function renderEnhancedView() {
+ const container = document.getElementById('enhanced-view-container');
+ const data = artistDetailPageState.enhancedData;
+ if (!container || !data) return;
+
+ container.innerHTML = '';
+
+ // Artist metadata card (visual + editable)
+ container.appendChild(renderArtistMetaPanel(data.artist));
+
+ // Library stats summary bar
+ container.appendChild(renderEnhancedStatsBar(data));
+
+ // Group albums by type
+ const grouped = { album: [], ep: [], single: [] };
+ (data.albums || []).forEach(album => {
+ const type = (album.record_type || 'album').toLowerCase();
+ if (grouped[type]) grouped[type].push(album);
+ else grouped[type] = [album];
+ });
+
+ const sectionLabels = { album: 'Albums', ep: 'EPs', single: 'Singles' };
+ for (const [type, label] of Object.entries(sectionLabels)) {
+ const albums = grouped[type] || [];
+ if (albums.length === 0) continue;
+ container.appendChild(renderEnhancedSection(type, label, albums));
+ }
+}
+
+function renderEnhancedStatsBar(data) {
+ const bar = document.createElement('div');
+ bar.className = 'enhanced-stats-bar';
+
+ const albums = data.albums || [];
+ const totalAlbums = albums.filter(a => (a.record_type || 'album') === 'album').length;
+ const totalEps = albums.filter(a => a.record_type === 'ep').length;
+ const totalSingles = albums.filter(a => a.record_type === 'single').length;
+ const totalTracks = albums.reduce((s, a) => s + (a.tracks ? a.tracks.length : 0), 0);
+
+ // Calculate total duration
+ let totalDurationMs = 0;
+ albums.forEach(a => (a.tracks || []).forEach(t => { totalDurationMs += (t.duration || 0); }));
+ const totalHours = Math.floor(totalDurationMs / 3600000);
+ const totalMins = Math.floor((totalDurationMs % 3600000) / 60000);
+
+ // Calculate format breakdown
+ const formatCounts = {};
+ albums.forEach(a => (a.tracks || []).forEach(t => {
+ const fmt = extractFormat(t.file_path);
+ if (fmt !== '-') formatCounts[fmt] = (formatCounts[fmt] || 0) + 1;
+ }));
+
+ const statsItems = [
+ { value: totalAlbums, label: 'Albums', icon: '💿' },
+ { value: totalEps, label: 'EPs', icon: '📀' },
+ { value: totalSingles, label: 'Singles', icon: '♪' },
+ { value: totalTracks, label: 'Tracks', icon: '🎵' },
+ { value: totalHours > 0 ? `${totalHours}h ${totalMins}m` : `${totalMins}m`, label: 'Duration', icon: '⏲' },
+ ];
+
+ let statsHtml = statsItems.map(s =>
+ `
+ ${s.value}
+ ${s.label}
+
`
+ ).join('');
+
+ // Format badges
+ const formatBadges = Object.entries(formatCounts)
+ .sort((a, b) => b[1] - a[1])
+ .map(([fmt, count]) => {
+ const cls = fmt === 'FLAC' ? 'flac' : (fmt === 'MP3' ? 'mp3' : 'other');
+ return `${fmt} (${count})`;
+ }).join('');
+
+ bar.innerHTML = `
+ ${statsHtml}
+ ${formatBadges}
+ `;
+
+ return bar;
+}
+
+function renderArtistMetaPanel(artist) {
+ const panel = document.createElement('div');
+ panel.className = 'enhanced-artist-meta';
+ panel.id = 'enhanced-artist-meta';
+
+ // Build using DOM to avoid innerHTML escaping issues
+ const header = document.createElement('div');
+ header.className = 'enhanced-artist-meta-header';
+
+ // Left side: artist image + name display
+ const headerLeft = document.createElement('div');
+ headerLeft.className = 'enhanced-artist-meta-header-left';
+
+ if (artist.thumb_url) {
+ const img = document.createElement('img');
+ img.className = 'enhanced-artist-meta-image';
+ img.src = artist.thumb_url;
+ img.alt = artist.name || '';
+ img.onerror = function () { this.style.display = 'none'; };
+ headerLeft.appendChild(img);
+ }
+
+ const headerInfo = document.createElement('div');
+ headerInfo.className = 'enhanced-artist-meta-info';
+ const artistTitle = document.createElement('div');
+ artistTitle.className = 'enhanced-artist-meta-name';
+ artistTitle.textContent = artist.name || 'Unknown Artist';
+ headerInfo.appendChild(artistTitle);
+
+ // ID badges row (clickable links)
+ const idBadges = document.createElement('div');
+ idBadges.className = 'enhanced-artist-id-badges';
+ const idSources = [
+ { key: 'spotify_artist_id', label: 'Spotify', svc: 'spotify' },
+ { key: 'musicbrainz_id', label: 'MusicBrainz', svc: 'musicbrainz' },
+ { key: 'deezer_id', label: 'Deezer', svc: 'deezer' },
+ { key: 'audiodb_id', label: 'AudioDB', svc: 'audiodb' },
+ { key: 'discogs_id', label: 'Discogs', svc: 'discogs' },
+ { key: 'itunes_artist_id', label: 'iTunes', svc: 'itunes' },
+ { key: 'lastfm_url', label: 'Last.fm', svc: 'lastfm' },
+ { key: 'genius_url', label: 'Genius', svc: 'genius' },
+ { key: 'tidal_id', label: 'Tidal', svc: 'tidal' },
+ { key: 'qobuz_id', label: 'Qobuz', svc: 'qobuz' },
+ ];
+ idSources.forEach(src => {
+ if (artist[src.key]) {
+ idBadges.appendChild(makeClickableBadge(src.svc, 'artist', artist[src.key], src.label));
+ }
+ });
+ headerInfo.appendChild(idBadges);
+ headerLeft.appendChild(headerInfo);
+ header.appendChild(headerLeft);
+
+ // Right side: admin actions
+ const headerRight = document.createElement('div');
+ headerRight.className = 'enhanced-artist-meta-actions';
+
+ if (isEnhancedAdmin()) {
+ const editToggle = document.createElement('button');
+ editToggle.className = 'enhanced-meta-edit-toggle';
+ editToggle.textContent = 'Edit Metadata';
+ editToggle.onclick = () => {
+ const form = document.getElementById('enhanced-artist-meta-form');
+ if (form) {
+ const isVisible = !form.classList.contains('hidden');
+ form.classList.toggle('hidden');
+ editToggle.textContent = isVisible ? 'Edit Metadata' : 'Hide Editor';
+ editToggle.classList.toggle('active', !isVisible);
+ }
+ };
+ headerRight.appendChild(editToggle);
+
+ // Enrich dropdown button
+ const enrichWrap = document.createElement('div');
+ enrichWrap.className = 'enhanced-enrich-wrap';
+ const enrichBtn = document.createElement('button');
+ enrichBtn.className = 'enhanced-enrich-btn';
+ enrichBtn.textContent = 'Enrich ▾';
+ enrichBtn.onclick = (e) => {
+ e.stopPropagation();
+ enrichMenu.classList.toggle('visible');
+ };
+ enrichWrap.appendChild(enrichBtn);
+
+ const enrichMenu = document.createElement('div');
+ enrichMenu.className = 'enhanced-enrich-menu';
+ const services = [
+ { id: 'spotify', label: 'Spotify', icon: '🟢' },
+ { id: 'musicbrainz', label: 'MusicBrainz', icon: '🟠' },
+ { id: 'deezer', label: 'Deezer', icon: '🟣' },
+ { id: 'discogs', label: 'Discogs', icon: '🟤' },
+ { id: 'audiodb', label: 'AudioDB', icon: '🔵' },
+ { id: 'itunes', label: 'iTunes', icon: '🔴' },
+ { id: 'lastfm', label: 'Last.fm', icon: '⚪' },
+ { id: 'genius', label: 'Genius', icon: '🟡' },
+ { id: 'tidal', label: 'Tidal', icon: '⬛' },
+ { id: 'qobuz', label: 'Qobuz', icon: '🔷' },
+ ];
+ services.forEach(svc => {
+ const item = document.createElement('div');
+ item.className = 'enhanced-enrich-menu-item';
+ item.textContent = `${svc.icon} ${svc.label}`;
+ item.onclick = (e) => {
+ e.stopPropagation();
+ enrichMenu.classList.remove('visible');
+ runEnrichment('artist', artist.id, svc.id, artist.name, '', artist.id);
+ };
+ enrichMenu.appendChild(item);
+ });
+ enrichWrap.appendChild(enrichMenu);
+ headerRight.appendChild(enrichWrap);
+ }
+
+ // Sync / Validate button
+ const syncBtn = document.createElement('button');
+ syncBtn.className = 'enhanced-sync-btn';
+ syncBtn.innerHTML = '🔄 Sync';
+ syncBtn.title = 'Validate files — removes stale entries for tracks no longer on disk';
+ syncBtn.onclick = async (e) => {
+ e.stopPropagation();
+ syncBtn.disabled = true;
+ syncBtn.textContent = 'Syncing...';
+ try {
+ const res = await fetch(`/api/library/artist/${artist.id}/sync`, { method: 'POST' });
+ const data = await res.json();
+ if (data.success) {
+ const parts = [];
+ if (data.new_albums > 0) parts.push(`+${data.new_albums} albums`);
+ if (data.new_tracks > 0) parts.push(`+${data.new_tracks} tracks`);
+ if (data.stale_removed > 0) parts.push(`${data.stale_removed} stale removed`);
+ if (data.empty_albums_removed > 0) parts.push(`${data.empty_albums_removed} empty albums cleaned`);
+ if (data.name_updated) parts.push('name updated');
+ if (parts.length === 0) parts.push('Already in sync');
+ showToast(`${data.artist_name}: ${parts.join(', ')}`, 'success');
+ // Refresh enhanced view if anything changed
+ if (data.stale_removed > 0 || data.empty_albums_removed > 0) {
+ loadEnhancedViewData(artist.id);
+ }
+ } else {
+ showToast(`Sync failed: ${data.error}`, 'error');
+ }
+ } catch (err) {
+ showToast(`Sync failed: ${err.message}`, 'error');
+ }
+ syncBtn.disabled = false;
+ syncBtn.innerHTML = '🔄 Sync';
+ };
+ headerRight.appendChild(syncBtn);
+
+ const reorgAllBtn = document.createElement('button');
+ reorgAllBtn.className = 'enhanced-sync-btn';
+ reorgAllBtn.innerHTML = '📁 Reorganize All';
+ reorgAllBtn.title = 'Reorganize all albums for this artist using path template';
+ reorgAllBtn.onclick = () => _showReorganizeAllModal();
+ headerRight.appendChild(reorgAllBtn);
+
+ header.appendChild(headerRight);
+
+ panel.appendChild(header);
+
+ // Match status row (clickable to rematch)
+ const statusRow = document.createElement('div');
+ statusRow.className = 'enhanced-match-status-row';
+ const statusServices = [
+ { key: 'spotify_match_status', label: 'Spotify', attempted: 'spotify_last_attempted', svc: 'spotify' },
+ { key: 'musicbrainz_match_status', label: 'MusicBrainz', attempted: 'musicbrainz_last_attempted', svc: 'musicbrainz' },
+ { key: 'deezer_match_status', label: 'Deezer', attempted: 'deezer_last_attempted', svc: 'deezer' },
+ { key: 'audiodb_match_status', label: 'AudioDB', attempted: 'audiodb_last_attempted', svc: 'audiodb' },
+ { key: 'discogs_match_status', label: 'Discogs', attempted: 'discogs_last_attempted', svc: 'discogs' },
+ { key: 'itunes_match_status', label: 'iTunes', attempted: 'itunes_last_attempted', svc: 'itunes' },
+ { key: 'lastfm_match_status', label: 'Last.fm', attempted: 'lastfm_last_attempted', svc: 'lastfm' },
+ { key: 'genius_match_status', label: 'Genius', attempted: 'genius_last_attempted', svc: 'genius' },
+ { key: 'tidal_match_status', label: 'Tidal', attempted: 'tidal_last_attempted', svc: 'tidal' },
+ { key: 'qobuz_match_status', label: 'Qobuz', attempted: 'qobuz_last_attempted', svc: 'qobuz' },
+ ];
+ statusServices.forEach(s => {
+ const status = artist[s.key];
+ const attempted = artist[s.attempted];
+ const chip = document.createElement('span');
+ chip.className = `enhanced-match-chip clickable ${status === 'matched' ? 'matched' : (status === 'not_found' ? 'not-found' : 'pending')}`;
+ chip.textContent = `${s.label}: ${status || 'pending'}`;
+ const tipParts = [];
+ if (attempted) tipParts.push(`Last: ${new Date(attempted).toLocaleString()}`);
+ tipParts.push('Click to rematch');
+ chip.title = tipParts.join(' · ');
+ chip.onclick = () => openManualMatchModal('artist', artist.id, s.svc, artist.name, artist.id);
+ statusRow.appendChild(chip);
+ });
+ panel.appendChild(statusRow);
+
+ // Collapsible edit form (hidden by default)
+ const form = document.createElement('div');
+ form.className = 'enhanced-artist-meta-form hidden';
+ form.id = 'enhanced-artist-meta-form';
+
+ const editableFields = [
+ { key: 'name', label: 'Artist Name', type: 'text' },
+ { key: 'genres', label: 'Genres (comma separated)', type: 'text', isArray: true },
+ { key: 'label', label: 'Label', type: 'text' },
+ { key: 'style', label: 'Style', type: 'text' },
+ { key: 'mood', label: 'Mood', type: 'text' },
+ { key: 'summary', label: 'Summary / Bio', type: 'textarea', wide: true },
+ ];
+
+ const grid = document.createElement('div');
+ grid.className = 'enhanced-artist-meta-grid';
+
+ editableFields.forEach(f => {
+ const fieldDiv = document.createElement('div');
+ fieldDiv.className = 'enhanced-meta-field' + (f.wide ? ' wide' : '');
+
+ const label = document.createElement('label');
+ label.className = 'enhanced-meta-field-label';
+ label.textContent = f.label;
+ fieldDiv.appendChild(label);
+
+ const val = f.isArray
+ ? (Array.isArray(artist[f.key]) ? artist[f.key].join(', ') : (artist[f.key] || ''))
+ : (artist[f.key] || '');
+
+ if (f.type === 'textarea') {
+ const ta = document.createElement('textarea');
+ ta.className = 'enhanced-meta-field-input';
+ ta.dataset.field = f.key;
+ ta.placeholder = f.label + '...';
+ ta.textContent = val;
+ fieldDiv.appendChild(ta);
+ } else {
+ const inp = document.createElement('input');
+ inp.type = 'text';
+ inp.className = 'enhanced-meta-field-input';
+ inp.dataset.field = f.key;
+ inp.value = val;
+ inp.placeholder = f.label + '...';
+ fieldDiv.appendChild(inp);
+ }
+
+ grid.appendChild(fieldDiv);
+ });
+
+ form.appendChild(grid);
+
+ // Save/revert buttons
+ const formActions = document.createElement('div');
+ formActions.className = 'enhanced-artist-form-actions';
+ const revertBtn = document.createElement('button');
+ revertBtn.className = 'enhanced-meta-cancel-btn';
+ revertBtn.textContent = 'Revert';
+ revertBtn.onclick = () => revertArtistMetadata();
+ const saveBtn = document.createElement('button');
+ saveBtn.className = 'enhanced-meta-save-btn';
+ saveBtn.textContent = 'Save Changes';
+ saveBtn.onclick = () => saveArtistMetadata();
+ formActions.appendChild(revertBtn);
+ formActions.appendChild(saveBtn);
+ form.appendChild(formActions);
+
+ panel.appendChild(form);
+
+ return panel;
+}
+
+function renderEnhancedSection(type, label, albums) {
+ const section = document.createElement('div');
+ section.className = 'enhanced-section';
+
+ const totalTracks = albums.reduce((sum, a) => sum + (a.tracks ? a.tracks.length : 0), 0);
+
+ const sectionHeader = document.createElement('div');
+ sectionHeader.className = 'enhanced-section-header';
+ sectionHeader.innerHTML = `
+ ${label}
+ ${albums.length} release${albums.length !== 1 ? 's' : ''} · ${totalTracks} tracks
+ `;
+ section.appendChild(sectionHeader);
+
+ const grid = document.createElement('div');
+ grid.className = 'enhanced-album-grid';
+
+ albums.forEach(album => {
+ const wrapper = document.createElement('div');
+ wrapper.className = 'enhanced-album-wrapper';
+ wrapper.id = `enhanced-album-wrapper-${album.id}`;
+ const isExpanded = artistDetailPageState.expandedAlbums.has(album.id);
+ if (isExpanded) wrapper.classList.add('expanded');
+
+ wrapper.appendChild(renderAlbumRow(album, type));
+
+ const tracksPanel = document.createElement('div');
+ tracksPanel.className = 'enhanced-tracks-panel';
+ tracksPanel.id = `enhanced-tracks-panel-${album.id}`;
+ if (isExpanded) tracksPanel.classList.add('visible');
+ const inner = document.createElement('div');
+ inner.className = 'enhanced-tracks-panel-inner';
+ if (isExpanded) {
+ inner.dataset.rendered = 'true';
+ inner.appendChild(renderExpandedAlbumHeader(album));
+ inner.appendChild(renderAlbumMetaRow(album));
+ inner.appendChild(renderTrackTable(album));
+ }
+ tracksPanel.appendChild(inner);
+ wrapper.appendChild(tracksPanel);
+
+ grid.appendChild(wrapper);
+ });
+ section.appendChild(grid);
+
+ return section;
+}
+
+function renderAlbumRow(album, type) {
+ const row = document.createElement('div');
+ row.className = 'enhanced-album-row';
+ row.id = `enhanced-album-row-${album.id}`;
+
+ if (artistDetailPageState.expandedAlbums.has(album.id)) row.classList.add('expanded');
+
+ const trackCount = album.tracks ? album.tracks.length : 0;
+ const typeClass = (type || 'album').toLowerCase();
+
+ // Total duration for this album
+ let albumDurMs = 0;
+ (album.tracks || []).forEach(t => { albumDurMs += (t.duration || 0); });
+ const albumDur = formatDurationMs(albumDurMs);
+
+ // Format breakdown for this album
+ const fmts = {};
+ (album.tracks || []).forEach(t => {
+ const f = extractFormat(t.file_path);
+ if (f !== '-') fmts[f] = (fmts[f] || 0) + 1;
+ });
+ const primaryFormat = Object.keys(fmts).sort((a, b) => fmts[b] - fmts[a])[0] || '';
+
+ // Build with DOM for safety
+ const expandIcon = document.createElement('span');
+ expandIcon.className = 'enhanced-album-expand-icon';
+ expandIcon.innerHTML = '▶';
+ row.appendChild(expandIcon);
+
+ // Album art - larger, prominent
+ const artWrap = document.createElement('div');
+ artWrap.className = 'enhanced-album-art-wrap';
+ if (album.thumb_url) {
+ const img = document.createElement('img');
+ img.className = 'enhanced-album-thumb';
+ img.src = album.thumb_url;
+ img.alt = '';
+ img.loading = 'lazy';
+ img.onerror = function () {
+ const fallback = document.createElement('div');
+ fallback.className = 'enhanced-album-thumb-fallback';
+ fallback.innerHTML = '🎵';
+ this.replaceWith(fallback);
+ };
+ artWrap.appendChild(img);
+ } else {
+ const fallback = document.createElement('div');
+ fallback.className = 'enhanced-album-thumb-fallback';
+ fallback.innerHTML = '🎵';
+ artWrap.appendChild(fallback);
+ }
+ row.appendChild(artWrap);
+
+ // Info block (title + meta line)
+ const infoBlock = document.createElement('div');
+ infoBlock.className = 'enhanced-album-info-block';
+
+ const titleEl = document.createElement('span');
+ titleEl.className = 'enhanced-album-title';
+ titleEl.textContent = album.title || 'Unknown';
+ titleEl.title = album.title || '';
+ infoBlock.appendChild(titleEl);
+
+ const metaLine = document.createElement('span');
+ metaLine.className = 'enhanced-album-meta-line';
+ const metaParts = [];
+ if (album.year) metaParts.push(String(album.year));
+ metaParts.push(`${trackCount} track${trackCount !== 1 ? 's' : ''}`);
+ if (albumDur !== '-') metaParts.push(albumDur);
+ if (album.label) metaParts.push(album.label);
+ metaLine.textContent = metaParts.join(' \u00B7 ');
+ infoBlock.appendChild(metaLine);
+
+ row.appendChild(infoBlock);
+
+ // Type badge
+ const badge = document.createElement('span');
+ badge.className = `enhanced-album-type-badge ${typeClass}`;
+ badge.textContent = type;
+ row.appendChild(badge);
+
+ // Format badge inline
+ if (primaryFormat) {
+ const fmtBadge = document.createElement('span');
+ const fmtClass = primaryFormat === 'FLAC' ? 'flac' : (primaryFormat === 'MP3' ? 'mp3' : 'other');
+ fmtBadge.className = `enhanced-format-badge ${fmtClass}`;
+ fmtBadge.textContent = primaryFormat;
+ row.appendChild(fmtBadge);
+ }
+
+ row.addEventListener('click', () => toggleAlbumExpand(album.id));
+
+ return row;
+}
+
+function toggleAlbumExpand(albumId) {
+ const row = document.getElementById(`enhanced-album-row-${albumId}`);
+ const panel = document.getElementById(`enhanced-tracks-panel-${albumId}`);
+ const wrapper = document.getElementById(`enhanced-album-wrapper-${albumId}`);
+ if (!row || !panel) return;
+
+ const isExpanded = artistDetailPageState.expandedAlbums.has(albumId);
+
+ if (isExpanded) {
+ artistDetailPageState.expandedAlbums.delete(albumId);
+ row.classList.remove('expanded');
+ panel.classList.remove('visible');
+ if (wrapper) wrapper.classList.remove('expanded');
+ } else {
+ artistDetailPageState.expandedAlbums.add(albumId);
+ row.classList.add('expanded');
+ panel.classList.add('visible');
+ if (wrapper) wrapper.classList.add('expanded');
+
+ // Lazy render
+ const inner = panel.querySelector('.enhanced-tracks-panel-inner');
+ if (inner && !inner.dataset.rendered) {
+ const album = findEnhancedAlbum(albumId);
+ if (album) {
+ inner.innerHTML = '';
+ inner.appendChild(renderExpandedAlbumHeader(album));
+ inner.appendChild(renderAlbumMetaRow(album));
+ inner.appendChild(renderTrackTable(album));
+ inner.dataset.rendered = 'true';
+ }
+ }
+ }
+}
+
+function findEnhancedAlbum(albumId) {
+ // Use cached map for O(1) lookups instead of O(n) array scan
+ if (artistDetailPageState._albumMap) {
+ return artistDetailPageState._albumMap.get(String(albumId)) || null;
+ }
+ const data = artistDetailPageState.enhancedData;
+ if (!data || !data.albums) return null;
+ return data.albums.find(a => String(a.id) === String(albumId));
+}
+
+function _rebuildAlbumMap() {
+ const data = artistDetailPageState.enhancedData;
+ if (!data || !data.albums) { artistDetailPageState._albumMap = null; return; }
+ const map = new Map();
+ data.albums.forEach(a => map.set(String(a.id), a));
+ artistDetailPageState._albumMap = map;
+}
+
+function renderExpandedAlbumHeader(album) {
+ const header = document.createElement('div');
+ header.className = 'enhanced-expanded-header';
+
+ // Large album art
+ if (album.thumb_url) {
+ const img = document.createElement('img');
+ img.className = 'enhanced-expanded-art';
+ img.src = album.thumb_url;
+ img.alt = album.title || '';
+ img.onerror = function () { this.style.display = 'none'; };
+ header.appendChild(img);
+ }
+
+ const info = document.createElement('div');
+ info.className = 'enhanced-expanded-info';
+
+ const title = document.createElement('div');
+ title.className = 'enhanced-expanded-title';
+ title.textContent = album.title || 'Unknown';
+ info.appendChild(title);
+
+ const meta = document.createElement('div');
+ meta.className = 'enhanced-expanded-meta';
+
+ const details = [];
+ if (album.year) details.push(String(album.year));
+ const trackCount = album.tracks ? album.tracks.length : 0;
+ details.push(`${trackCount} track${trackCount !== 1 ? 's' : ''}`);
+ let durMs = 0;
+ (album.tracks || []).forEach(t => { durMs += (t.duration || 0); });
+ if (durMs > 0) details.push(formatDurationMs(durMs));
+ if (album.label) details.push(album.label);
+ if (album.record_type) details.push(album.record_type.toUpperCase());
+
+ meta.textContent = details.join(' \u00B7 ');
+ info.appendChild(meta);
+
+ // Genre tags
+ const genres = Array.isArray(album.genres) ? album.genres : [];
+ if (genres.length > 0) {
+ const genreRow = document.createElement('div');
+ genreRow.className = 'enhanced-expanded-genres';
+ genres.forEach(g => {
+ const tag = document.createElement('span');
+ tag.className = 'enhanced-genre-tag';
+ tag.textContent = g;
+ genreRow.appendChild(tag);
+ });
+ info.appendChild(genreRow);
+ }
+
+ // External ID badges (clickable links)
+ const ids = document.createElement('div');
+ ids.className = 'enhanced-expanded-ids';
+ const idFields = [
+ { key: 'spotify_album_id', label: 'Spotify', svc: 'spotify' },
+ { key: 'musicbrainz_release_id', label: 'MusicBrainz', svc: 'musicbrainz' },
+ { key: 'deezer_id', label: 'Deezer', svc: 'deezer' },
+ { key: 'audiodb_id', label: 'AudioDB', svc: 'audiodb' },
+ { key: 'discogs_id', label: 'Discogs', svc: 'discogs' },
+ { key: 'itunes_album_id', label: 'iTunes', svc: 'itunes' },
+ { key: 'lastfm_url', label: 'Last.fm', svc: 'lastfm' },
+ ];
+ idFields.forEach(f => {
+ if (album[f.key]) {
+ ids.appendChild(makeClickableBadge(f.svc, 'album', album[f.key], f.label));
+ }
+ });
+ if (ids.children.length > 0) info.appendChild(ids);
+
+ // Resolve artist name for enrichment calls
+ const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+
+ // Match status chips (clickable to rematch)
+ const statusRow = document.createElement('div');
+ statusRow.className = 'enhanced-match-status-row compact';
+ const statusSvcs = [
+ { key: 'spotify_match_status', label: 'Spotify', attempted: 'spotify_last_attempted', svc: 'spotify' },
+ { key: 'musicbrainz_match_status', label: 'MB', attempted: 'musicbrainz_last_attempted', svc: 'musicbrainz' },
+ { key: 'deezer_match_status', label: 'Deezer', attempted: 'deezer_last_attempted', svc: 'deezer' },
+ { key: 'audiodb_match_status', label: 'AudioDB', attempted: 'audiodb_last_attempted', svc: 'audiodb' },
+ { key: 'discogs_match_status', label: 'Discogs', attempted: 'discogs_last_attempted', svc: 'discogs' },
+ { key: 'itunes_match_status', label: 'iTunes', attempted: 'itunes_last_attempted', svc: 'itunes' },
+ { key: 'lastfm_match_status', label: 'Last.fm', attempted: 'lastfm_last_attempted', svc: 'lastfm' },
+ ];
+ statusSvcs.forEach(s => {
+ const status = album[s.key];
+ const attempted = album[s.attempted];
+ const chip = document.createElement('span');
+ chip.className = `enhanced-match-chip clickable ${status === 'matched' ? 'matched' : (status === 'not_found' ? 'not-found' : 'pending')}`;
+ chip.textContent = `${s.label}: ${status || '—'}`;
+ const tipParts = [];
+ if (attempted) tipParts.push(`Last: ${new Date(attempted).toLocaleString()}`);
+ tipParts.push('Click to rematch');
+ chip.title = tipParts.join(' · ');
+ chip.onclick = (e) => {
+ e.stopPropagation();
+ const aId = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : '';
+ openManualMatchModal('album', album.id, s.svc, album.title || '', aId);
+ };
+ statusRow.appendChild(chip);
+ });
+ info.appendChild(statusRow);
+
+ // Action buttons row
+ const enrichRow = document.createElement('div');
+ enrichRow.className = 'enhanced-expanded-actions';
+
+ if (isEnhancedAdmin()) {
+ const albumEnrichWrap = document.createElement('div');
+ albumEnrichWrap.className = 'enhanced-enrich-wrap';
+ const albumEnrichBtn = document.createElement('button');
+ albumEnrichBtn.className = 'enhanced-enrich-btn small';
+ albumEnrichBtn.textContent = 'Enrich Album ▾';
+ albumEnrichBtn.onclick = (e) => { e.stopPropagation(); albumEnrichMenu.classList.toggle('visible'); };
+ albumEnrichWrap.appendChild(albumEnrichBtn);
+ const albumEnrichMenu = document.createElement('div');
+ albumEnrichMenu.className = 'enhanced-enrich-menu';
+ [
+ { id: 'spotify', label: 'Spotify', icon: '🟢' },
+ { id: 'musicbrainz', label: 'MusicBrainz', icon: '🟠' },
+ { id: 'deezer', label: 'Deezer', icon: '🟣' },
+ { id: 'discogs', label: 'Discogs', icon: '🟤' },
+ { id: 'audiodb', label: 'AudioDB', icon: '🔵' },
+ { id: 'itunes', label: 'iTunes', icon: '🔴' },
+ { id: 'lastfm', label: 'Last.fm', icon: '⚪' },
+ { id: 'genius', label: 'Genius', icon: '🟡' },
+ ].forEach(svc => {
+ const item = document.createElement('div');
+ item.className = 'enhanced-enrich-menu-item';
+ item.textContent = `${svc.icon} ${svc.label}`;
+ item.onclick = (e) => {
+ e.stopPropagation();
+ albumEnrichMenu.classList.remove('visible');
+ const aId = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : '';
+ runEnrichment('album', album.id, svc.id, album.title || '', artistName, aId);
+ };
+ albumEnrichMenu.appendChild(item);
+ });
+ albumEnrichWrap.appendChild(albumEnrichMenu);
+ enrichRow.appendChild(albumEnrichWrap);
+
+ const writeTagsBtn = document.createElement('button');
+ writeTagsBtn.className = 'enhanced-write-tags-album-btn';
+ writeTagsBtn.innerHTML = '✎ Write All Tags';
+ writeTagsBtn.title = 'Write DB metadata to file tags for all tracks in this album';
+ writeTagsBtn.onclick = (e) => { e.stopPropagation(); writeAlbumTags(album.id); };
+ enrichRow.appendChild(writeTagsBtn);
+
+ const rgAlbumBtn = document.createElement('button');
+ rgAlbumBtn.className = 'enhanced-rg-album-btn';
+ rgAlbumBtn.innerHTML = '♫ ReplayGain';
+ rgAlbumBtn.title = 'Analyze ReplayGain for all tracks in this album (writes track + album gain)';
+ rgAlbumBtn.dataset.albumId = album.id;
+ rgAlbumBtn.onclick = (e) => { e.stopPropagation(); analyzeAlbumReplayGain(album.id, rgAlbumBtn); };
+ enrichRow.appendChild(rgAlbumBtn);
+
+ const reorganizeBtn = document.createElement('button');
+ reorganizeBtn.className = 'enhanced-reorganize-album-btn';
+ reorganizeBtn.innerHTML = '📁 Reorganize';
+ reorganizeBtn.title = 'Reorganize album files using a custom path template';
+ reorganizeBtn.onclick = (e) => { e.stopPropagation(); showReorganizeModal(album.id); };
+ enrichRow.appendChild(reorganizeBtn);
+
+ const redownloadBtn = document.createElement('button');
+ redownloadBtn.className = 'enhanced-redownload-album-btn';
+ redownloadBtn.innerHTML = '↻ Redownload';
+ redownloadBtn.title = 'Redownload this album (opens Download Missing modal with force-download)';
+ redownloadBtn.onclick = (e) => {
+ e.stopPropagation();
+ const aName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+ redownloadLibraryAlbum(album, aName, redownloadBtn);
+ };
+ enrichRow.appendChild(redownloadBtn);
+
+ const deleteAlbumBtn = document.createElement('button');
+ deleteAlbumBtn.className = 'enhanced-delete-album-btn';
+ deleteAlbumBtn.textContent = 'Delete Album';
+ deleteAlbumBtn.onclick = (e) => { e.stopPropagation(); deleteLibraryAlbum(album.id); };
+ enrichRow.appendChild(deleteAlbumBtn);
+ }
+
+ // Report Issue button (available to all users)
+ const reportBtn = document.createElement('button');
+ reportBtn.className = 'enhanced-report-issue-btn';
+ reportBtn.innerHTML = '⚑ Report Issue';
+ reportBtn.title = 'Report a problem with this album';
+ reportBtn.onclick = (e) => {
+ e.stopPropagation();
+ const aName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+ showReportIssueModal('album', album.id, album.title || '', aName);
+ };
+ enrichRow.appendChild(reportBtn);
+
+ info.appendChild(enrichRow);
+
+ header.appendChild(info);
+ return header;
+}
+
+function renderAlbumMetaRow(album) {
+ const row = document.createElement('div');
+ row.className = 'enhanced-album-meta-row';
+ row.id = `enhanced-album-meta-${album.id}`;
+
+ const fields = [
+ { key: 'title', label: 'Title', value: album.title || '' },
+ { key: 'year', label: 'Year', value: album.year || '', type: 'number' },
+ { key: 'genres', label: 'Genres', value: Array.isArray(album.genres) ? album.genres.join(', ') : (album.genres || '') },
+ { key: 'label', label: 'Label', value: album.label || '' },
+ { key: 'style', label: 'Style', value: album.style || '' },
+ { key: 'mood', label: 'Mood', value: album.mood || '' },
+ { key: 'record_type', label: 'Type', value: album.record_type || 'album' },
+ { key: 'explicit', label: 'Explicit', value: album.explicit ? '1' : '0' },
+ ];
+
+ const admin = isEnhancedAdmin();
+ fields.forEach(f => {
+ const fieldDiv = document.createElement('div');
+ fieldDiv.className = 'enhanced-album-meta-field';
+ const label = document.createElement('label');
+ label.className = 'enhanced-album-meta-label';
+ label.textContent = f.label;
+ fieldDiv.appendChild(label);
+ if (admin) {
+ const input = document.createElement('input');
+ input.className = 'enhanced-album-meta-input';
+ input.type = f.type || 'text';
+ input.dataset.albumId = album.id;
+ input.dataset.field = f.key;
+ input.value = String(f.value);
+ input.addEventListener('click', e => e.stopPropagation());
+ fieldDiv.appendChild(input);
+ } else {
+ const span = document.createElement('span');
+ span.className = 'enhanced-album-meta-value';
+ span.textContent = String(f.value) || '—';
+ fieldDiv.appendChild(span);
+ }
+ row.appendChild(fieldDiv);
+ });
+
+ if (admin) {
+ const saveDiv = document.createElement('div');
+ saveDiv.className = 'enhanced-album-meta-field';
+ const spacer = document.createElement('label');
+ spacer.className = 'enhanced-album-meta-label';
+ spacer.innerHTML = ' ';
+ saveDiv.appendChild(spacer);
+ const saveBtn = document.createElement('button');
+ saveBtn.className = 'enhanced-album-save-btn';
+ saveBtn.textContent = 'Save Album';
+ saveBtn.onclick = (e) => { e.stopPropagation(); saveAlbumMetadata(album.id); };
+ saveDiv.appendChild(saveBtn);
+ row.appendChild(saveDiv);
+ }
+
+ return row;
+}
+
+function _buildTrackRow(track, album, admin) {
+ const tr = document.createElement('tr');
+ tr.dataset.trackId = track.id;
+ tr.dataset.albumId = album.id;
+ if (artistDetailPageState.selectedTracks.has(String(track.id))) tr.classList.add('selected');
+
+ // Checkbox (admin only)
+ if (admin) {
+ const cbTd = document.createElement('td');
+ const cb = document.createElement('input');
+ cb.type = 'checkbox';
+ cb.className = 'enhanced-track-checkbox';
+ cb.checked = artistDetailPageState.selectedTracks.has(String(track.id));
+ cbTd.appendChild(cb);
+ tr.appendChild(cbTd);
+ }
+
+ // Play button
+ const playTd = document.createElement('td');
+ playTd.className = 'col-play';
+ const playBtn = document.createElement('button');
+ playBtn.className = 'enhanced-play-btn';
+ playBtn.innerHTML = '▶';
+ playBtn.title = track.file_path ? 'Play track' : 'No file available';
+ if (!track.file_path) playBtn.disabled = true;
+ playTd.appendChild(playBtn);
+ tr.appendChild(playTd);
+
+ // Track number
+ const numTd = document.createElement('td');
+ numTd.className = 'col-num' + (admin ? ' editable' : '');
+ numTd.textContent = track.track_number || '-';
+ tr.appendChild(numTd);
+
+ // Disc number
+ const discTd = document.createElement('td');
+ discTd.className = 'col-disc';
+ discTd.textContent = track.disc_number || '-';
+ tr.appendChild(discTd);
+
+ // Title
+ const titleTd = document.createElement('td');
+ titleTd.className = 'col-title' + (admin ? ' editable' : '');
+ titleTd.textContent = track.title || 'Unknown';
+ tr.appendChild(titleTd);
+
+ // Duration
+ const durTd = document.createElement('td');
+ durTd.className = 'col-duration';
+ durTd.textContent = formatDurationMs(track.duration);
+ tr.appendChild(durTd);
+
+ // Format
+ const fmtTd = document.createElement('td');
+ fmtTd.className = 'col-format';
+ const format = extractFormat(track.file_path);
+ const fmtSpan = document.createElement('span');
+ const fmtClass = format === 'FLAC' ? 'flac' : (format === 'MP3' ? 'mp3' : 'other');
+ fmtSpan.className = `enhanced-format-badge ${fmtClass}`;
+ fmtSpan.textContent = format;
+ fmtTd.appendChild(fmtSpan);
+ tr.appendChild(fmtTd);
+
+ // Bitrate
+ const brTd = document.createElement('td');
+ brTd.className = 'col-bitrate';
+ const brSpan = document.createElement('span');
+ const brClass = (track.bitrate || 0) >= 320 ? 'high' : ((track.bitrate || 0) >= 192 ? 'medium' : 'low');
+ brSpan.className = `enhanced-bitrate ${brClass}`;
+ brSpan.textContent = track.bitrate ? track.bitrate + ' kbps' : '-';
+ brTd.appendChild(brSpan);
+ tr.appendChild(brTd);
+
+ // BPM
+ const bpmTd = document.createElement('td');
+ bpmTd.className = 'col-bpm' + (admin ? ' editable' : '');
+ bpmTd.textContent = track.bpm || '-';
+ tr.appendChild(bpmTd);
+
+ // File path
+ const pathTd = document.createElement('td');
+ pathTd.className = 'col-path';
+ const filePath = track.file_path || '-';
+ const fileName = filePath !== '-' ? filePath.split(/[\\/]/).pop() : '-';
+ pathTd.textContent = fileName;
+ pathTd.title = filePath;
+ tr.appendChild(pathTd);
+
+ // Match status chips
+ const matchTd = document.createElement('td');
+ matchTd.className = 'col-match';
+ const matchCell = document.createElement('div');
+ matchCell.className = 'enhanced-track-match-cell';
+ const trackServices = [
+ { svc: 'spotify', col: 'spotify_track_id', label: 'SP' },
+ { svc: 'musicbrainz', col: 'musicbrainz_recording_id', label: 'MB' },
+ { svc: 'deezer', col: 'deezer_id', label: 'Dz' },
+ { svc: 'audiodb', col: 'audiodb_id', label: 'ADB' },
+ { svc: 'itunes', col: 'itunes_track_id', label: 'iT' },
+ { svc: 'lastfm', col: 'lastfm_url', label: 'LFM' },
+ { svc: 'genius', col: 'genius_id', label: 'Gen' },
+ ];
+ trackServices.forEach(s => {
+ const hasId = !!track[s.col];
+ const chip = document.createElement('span');
+ chip.className = 'enhanced-track-match-chip' + (hasId ? ' matched' : ' not-found');
+ chip.textContent = s.label;
+ chip.title = hasId ? `${s.svc}: ${track[s.col]}` : `${s.svc}: no match`;
+ chip.dataset.service = s.svc;
+ matchCell.appendChild(chip);
+ });
+ matchTd.appendChild(matchCell);
+ tr.appendChild(matchTd);
+
+ // Add to Queue button
+ const queueTd = document.createElement('td');
+ queueTd.className = 'col-queue';
+ if (track.file_path) {
+ const queueBtn = document.createElement('button');
+ queueBtn.className = 'enhanced-queue-btn';
+ queueBtn.innerHTML = '+';
+ queueBtn.title = 'Add to queue';
+ queueTd.appendChild(queueBtn);
+ }
+ tr.appendChild(queueTd);
+
+ if (admin) {
+ // Write Tags button (admin only)
+ const tagTd = document.createElement('td');
+ tagTd.className = 'col-writetag';
+ if (track.file_path) {
+ const tagBtn = document.createElement('button');
+ tagBtn.className = 'enhanced-write-tag-btn';
+ tagBtn.innerHTML = '✎';
+ tagBtn.title = 'Write tags to file';
+ tagTd.appendChild(tagBtn);
+
+ const rgBtn = document.createElement('button');
+ rgBtn.className = 'enhanced-rg-btn';
+ rgBtn.textContent = 'RG';
+ rgBtn.title = 'Analyze & write ReplayGain (track gain)';
+ tagTd.appendChild(rgBtn);
+ }
+ tr.appendChild(tagTd);
+
+ // Track actions cell — source info, redownload, delete (admin only)
+ const actionsTd = document.createElement('td');
+ actionsTd.className = 'col-track-actions';
+ actionsTd.innerHTML = `
+
+
+
+
+
+ `;
+ tr.appendChild(actionsTd);
+ } else {
+ // Report Issue button per track (non-admin)
+ const reportTd = document.createElement('td');
+ reportTd.className = 'col-report';
+ const reportBtn = document.createElement('button');
+ reportBtn.className = 'enhanced-track-report-btn';
+ reportBtn.innerHTML = '⚑';
+ reportBtn.title = 'Report issue with this track';
+ reportTd.appendChild(reportBtn);
+ tr.appendChild(reportTd);
+ }
+
+ // Mobile actions column (visible only on mobile via CSS)
+ const mobileTd = document.createElement('td');
+ mobileTd.className = 'col-mobile-actions';
+ const mobileBtn = document.createElement('button');
+ mobileBtn.className = 'enhanced-mobile-actions-btn';
+ mobileBtn.innerHTML = '⋯';
+ mobileBtn.title = 'Actions';
+ mobileTd.appendChild(mobileBtn);
+ tr.appendChild(mobileTd);
+
+ return tr;
+}
+
+function _getTrackDataFromRow(tr) {
+ const trackId = tr.dataset.trackId;
+ const albumId = tr.dataset.albumId;
+ const album = findEnhancedAlbum(albumId);
+ if (!album) return null;
+ const track = (album.tracks || []).find(t => String(t.id) === String(trackId));
+ return track ? { track, album, trackId, albumId } : null;
+}
+
+function _attachTableDelegation(table, album) {
+ // Single click handler for the entire table — replaces 12-16 per-row handlers
+ const admin = isEnhancedAdmin();
+ table.addEventListener('click', (e) => {
+ const target = e.target;
+ const tr = target.closest('tr[data-track-id]');
+
+ // Header checkbox (select all)
+ if (target.closest('thead') && target.classList.contains('enhanced-track-checkbox')) {
+ toggleSelectAllTracks(album.id, target.checked);
+ return;
+ }
+
+ // Sort header click
+ const th = target.closest('th[data-sort-field]');
+ if (th) {
+ cancelInlineEdit();
+ const sortField = th.dataset.sortField;
+ const current = artistDetailPageState.enhancedTrackSort[album.id];
+ const ascending = current && current.field === sortField ? !current.ascending : true;
+ artistDetailPageState.enhancedTrackSort[album.id] = { field: sortField, ascending };
+ sortEnhancedTracks(album, sortField, ascending);
+ _rebuildTbody(table, album);
+ // Update header sort indicators
+ table.querySelectorAll('th[data-sort-field]').forEach(h => {
+ const sf = h.dataset.sortField;
+ const baseLabel = h.dataset.label || '';
+ const sort = artistDetailPageState.enhancedTrackSort[album.id];
+ h.textContent = sort && sort.field === sf ? baseLabel + (sort.ascending ? ' \u25B2' : ' \u25BC') : baseLabel;
+ });
+ return;
+ }
+
+ if (!tr) return;
+ const info = _getTrackDataFromRow(tr);
+ if (!info) return;
+ const { track, trackId } = info;
+
+ // Checkbox
+ if (target.classList.contains('enhanced-track-checkbox')) {
+ toggleTrackSelection(String(trackId));
+ return;
+ }
+
+ // Play button
+ if (target.closest('.enhanced-play-btn')) {
+ e.stopPropagation();
+ if (track.file_path) {
+ const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+ playLibraryTrack(track, album.title || '', artistName);
+ }
+ return;
+ }
+
+ // Inline editable cells (admin)
+ if (admin) {
+ const cell = target.closest('td.editable');
+ if (cell) {
+ e.stopPropagation();
+ if (cell.classList.contains('col-num')) {
+ startInlineEdit(cell, 'track', track.id, 'track_number', track.track_number || '');
+ } else if (cell.classList.contains('col-title')) {
+ startInlineEdit(cell, 'track', track.id, 'title', track.title || '');
+ } else if (cell.classList.contains('col-bpm')) {
+ startInlineEdit(cell, 'track', track.id, 'bpm', track.bpm || '');
+ }
+ return;
+ }
+ }
+
+ // Match chip click (admin — open manual match modal)
+ if (admin) {
+ const chip = target.closest('.enhanced-track-match-chip');
+ if (chip) {
+ e.stopPropagation();
+ const svc = chip.dataset.service;
+ const aId = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : null;
+ openManualMatchModal('track', track.id, svc, track.title || '', aId);
+ return;
+ }
+ }
+
+ // Queue button
+ if (target.closest('.enhanced-queue-btn')) {
+ e.stopPropagation();
+ if (track.file_path) {
+ const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+ let albumArt = album.thumb_url || null;
+ if (!albumArt && artistDetailPageState.enhancedData) {
+ albumArt = artistDetailPageState.enhancedData.artist?.thumb_url;
+ }
+ addToQueue({
+ title: track.title || 'Unknown Track',
+ artist: artistName || 'Unknown Artist',
+ album: album.title || 'Unknown Album',
+ file_path: track.file_path,
+ filename: track.file_path,
+ is_library: true,
+ image_url: albumArt,
+ id: track.id,
+ artist_id: artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : null,
+ album_id: album.id,
+ bitrate: track.bitrate,
+ sample_rate: track.sample_rate
+ });
+ }
+ return;
+ }
+
+ // Write tags button (admin)
+ if (target.closest('.enhanced-write-tag-btn')) {
+ e.stopPropagation();
+ showTagPreview(track.id);
+ return;
+ }
+
+ // ReplayGain analyze button (admin)
+ if (target.closest('.enhanced-rg-btn')) {
+ e.stopPropagation();
+ analyzeTrackReplayGain(track.id, target.closest('.enhanced-rg-btn'));
+ return;
+ }
+
+ // Source info button (admin)
+ if (target.closest('.enhanced-source-info-btn')) {
+ e.stopPropagation();
+ showTrackSourceInfo(track, target.closest('.enhanced-source-info-btn'));
+ return;
+ }
+
+ // Redownload button (admin)
+ if (target.closest('.enhanced-redownload-btn')) {
+ e.stopPropagation();
+ showTrackRedownloadModal(track, album);
+ return;
+ }
+
+ // Delete button (admin)
+ if (target.closest('.enhanced-delete-btn')) {
+ e.stopPropagation();
+ deleteLibraryTrack(track.id, album.id);
+ return;
+ }
+
+ // Report button (non-admin)
+ if (target.closest('.enhanced-track-report-btn')) {
+ e.stopPropagation();
+ const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+ showReportIssueModal('track', track.id, track.title || 'Unknown', artistName, album.title || '');
+ return;
+ }
+
+ // Mobile actions button (⋯)
+ if (target.closest('.enhanced-mobile-actions-btn')) {
+ e.stopPropagation();
+ _showMobileTrackActions(track, album);
+ return;
+ }
+ });
+}
+
+function _showMobileTrackActions(track, album) {
+ // Remove any existing popover
+ document.querySelectorAll('.mobile-popover-overlay, .enhanced-mobile-actions-popover').forEach(el => el.remove());
+
+ const overlay = document.createElement('div');
+ overlay.className = 'mobile-popover-overlay';
+
+ const popover = document.createElement('div');
+ popover.className = 'enhanced-mobile-actions-popover';
+
+ const title = document.createElement('div');
+ title.className = 'popover-title';
+ title.textContent = track.title || 'Track';
+ popover.appendChild(title);
+
+ const admin = isEnhancedAdmin();
+ const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+ const albumArt = album.thumb_url || (artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist?.thumb_url : null);
+
+ const actions = [];
+ if (track.file_path) {
+ actions.push({
+ icon: '▶', label: 'Play', action: () => {
+ playLibraryTrack({ id: track.id, title: track.title, file_path: track.file_path, bitrate: track.bitrate, artist_id: artistDetailPageState.enhancedData?.artist?.id, album_id: album.id }, album.title || '', artistName);
+ }
+ });
+ actions.push({
+ icon: '+', label: 'Add to Queue', action: () => {
+ addToQueue({ title: track.title || 'Unknown', artist: artistName, album: album.title || '', file_path: track.file_path, filename: track.file_path, is_library: true, image_url: albumArt, id: track.id, artist_id: artistDetailPageState.enhancedData?.artist?.id, album_id: album.id, bitrate: track.bitrate });
+ }
+ });
+ }
+ if (admin && track.file_path) {
+ actions.push({ icon: '✎', label: 'Write Tags', action: () => showTagPreview(track.id) });
+ }
+ if (admin) {
+ actions.push({ icon: 'ℹ', label: 'Source Info', action: () => showTrackSourceInfo(track, null) });
+ actions.push({ icon: '↻', label: 'Redownload Track', action: () => showTrackRedownloadModal(track, album) });
+ actions.push({ icon: '✕', label: 'Delete Track', cls: 'popover-delete', action: () => deleteLibraryTrack(track.id, album.id) });
+ }
+
+ actions.forEach(a => {
+ const btn = document.createElement('button');
+ if (a.cls) btn.className = a.cls;
+ btn.innerHTML = `${a.label}`;
+ btn.addEventListener('click', () => { close(); a.action(); });
+ popover.appendChild(btn);
+ });
+
+ const cancelBtn = document.createElement('button');
+ cancelBtn.className = 'popover-cancel';
+ cancelBtn.textContent = 'Cancel';
+ cancelBtn.addEventListener('click', close);
+ popover.appendChild(cancelBtn);
+
+ function close() {
+ overlay.remove();
+ popover.remove();
+ }
+ overlay.addEventListener('click', close);
+
+ document.body.appendChild(overlay);
+ document.body.appendChild(popover);
+}
+
+function _rebuildTbody(table, album) {
+ // Replace only the tbody — keeps thead and event delegation intact
+ const admin = isEnhancedAdmin();
+ const oldTbody = table.querySelector('tbody');
+ const newTbody = document.createElement('tbody');
+ (album.tracks || []).forEach(track => {
+ newTbody.appendChild(_buildTrackRow(track, album, admin));
+ });
+ if (oldTbody) table.replaceChild(newTbody, oldTbody);
+ else table.appendChild(newTbody);
+}
+
+function renderTrackTable(album) {
+ const wrapper = document.createElement('div');
+ const tracks = album.tracks || [];
+
+ // Re-apply stored sort order if any
+ const activeSort = artistDetailPageState.enhancedTrackSort[album.id];
+ if (activeSort) {
+ sortEnhancedTracks(album, activeSort.field, activeSort.ascending);
+ }
+
+ if (tracks.length === 0) {
+ wrapper.innerHTML = 'No tracks in database
';
+ return wrapper;
+ }
+
+ const table = document.createElement('table');
+ table.className = 'enhanced-track-table';
+ table.dataset.albumId = album.id;
+
+ const admin = isEnhancedAdmin();
+ // Clear stale selections for non-admin to prevent ghost state
+ if (!admin) {
+ artistDetailPageState.selectedTracks.clear();
+ }
+
+ // Header
+ const thead = document.createElement('thead');
+ const headRow = document.createElement('tr');
+ if (admin) {
+ const selectAllTh = document.createElement('th');
+ const selectAllCb = document.createElement('input');
+ selectAllCb.type = 'checkbox';
+ selectAllCb.className = 'enhanced-track-checkbox';
+ selectAllTh.appendChild(selectAllCb);
+ headRow.appendChild(selectAllTh);
+ }
+
+ const columns = [
+ { label: '', cls: 'col-play' },
+ { label: '#', cls: 'col-num', sortField: 'track_number' },
+ { label: 'Disc', cls: 'col-disc', sortField: 'disc_number' },
+ { label: 'Title', cls: 'col-title', sortField: 'title' },
+ { label: 'Duration', cls: 'col-duration', sortField: 'duration' },
+ { label: 'Format', cls: 'col-format', sortField: 'format' },
+ { label: 'Bitrate', cls: 'col-bitrate', sortField: 'bitrate' },
+ { label: 'BPM', cls: 'col-bpm', sortField: 'bpm' },
+ { label: 'File', cls: 'col-path' },
+ { label: 'Match', cls: 'col-match' },
+ { label: '', cls: 'col-queue' },
+ ...(admin ? [
+ { label: '', cls: 'col-writetag' },
+ { label: '', cls: 'col-delete' },
+ ] : [
+ { label: '', cls: 'col-report' },
+ ]),
+ { label: '', cls: 'col-mobile-actions' },
+ ];
+ const currentSort = artistDetailPageState.enhancedTrackSort[album.id];
+ columns.forEach(col => {
+ const th = document.createElement('th');
+ th.className = col.cls;
+ if (col.sortField) {
+ let headerText = col.label;
+ if (currentSort && currentSort.field === col.sortField) {
+ headerText += currentSort.ascending ? ' \u25B2' : ' \u25BC';
+ }
+ th.textContent = headerText;
+ th.style.cursor = 'pointer';
+ th.dataset.sortField = col.sortField;
+ th.dataset.label = col.label;
+ } else {
+ th.textContent = col.label;
+ }
+ headRow.appendChild(th);
+ });
+ thead.appendChild(headRow);
+ table.appendChild(thead);
+
+ // Body
+ const tbody = document.createElement('tbody');
+ tracks.forEach(track => {
+ tbody.appendChild(_buildTrackRow(track, album, admin));
+ });
+ table.appendChild(tbody);
+
+ // Single delegated event listener for the whole table
+ _attachTableDelegation(table, album);
+
+ wrapper.appendChild(table);
+ return wrapper;
+}
+
+function sortEnhancedTracks(album, field, ascending) {
+ const tracks = album.tracks || [];
+ tracks.sort((a, b) => {
+ let valA, valB;
+ if (field === 'format') {
+ valA = extractFormat(a.file_path);
+ valB = extractFormat(b.file_path);
+ } else {
+ valA = a[field];
+ valB = b[field];
+ }
+ if (valA == null) return 1;
+ if (valB == null) return -1;
+ if (['track_number', 'disc_number', 'bpm', 'bitrate', 'duration'].includes(field)) {
+ return ascending ? (Number(valA) - Number(valB)) : (Number(valB) - Number(valA));
+ }
+ valA = String(valA).toLowerCase();
+ valB = String(valB).toLowerCase();
+ return ascending ? valA.localeCompare(valB) : valB.localeCompare(valA);
+ });
+}
+
+async function deleteLibraryTrack(trackId, albumId) {
+ cancelInlineEdit();
+
+ // Smart delete dialog — three options
+ const choice = await _showSmartDeleteDialog();
+ if (!choice) return;
+
+ const params = new URLSearchParams();
+ if (choice === 'delete_file') params.set('delete_file', 'true');
+
+ try {
+ const response = await fetch(`/api/library/track/${trackId}?${params}`, { method: 'DELETE' });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ let msg = 'Track removed from library';
+ let toastType = 'success';
+ if (result.file_deleted) {
+ msg = 'Track deleted from library and disk';
+ } else if (result.file_error) {
+ msg = 'Track removed from library but file could not be deleted';
+ toastType = 'warning';
+ }
+ if (result.blacklisted) msg += ' (source blacklisted)';
+ showToast(msg, toastType);
+ if (result.file_error) {
+ showToast(result.file_error, 'error', 8000);
+ }
+
+ if (artistDetailPageState.enhancedData) {
+ const albums = artistDetailPageState.enhancedData.albums || [];
+ const album = albums.find(a => a.id === albumId);
+ if (album) {
+ album.tracks = (album.tracks || []).filter(t => t.id !== trackId);
+ }
+ }
+ artistDetailPageState.selectedTracks.delete(String(trackId));
+ renderEnhancedView();
+ } catch (error) {
+ showToast(`Delete failed: ${error.message}`, 'error');
+ }
+}
+
+function _showSmartDeleteDialog() {
+ return new Promise(resolve => {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+
+ const close = (val) => { overlay.remove(); resolve(val); };
+ overlay.onclick = e => { if (e.target === overlay) close(null); };
+
+ overlay.innerHTML = `
+
+
+ `;
+
+ overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
+ btn.addEventListener('click', () => close(btn.dataset.choice));
+ });
+ overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
+
+ // Escape to close
+ const escHandler = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escHandler); close(null); } };
+ document.addEventListener('keydown', escHandler);
+
+ document.body.appendChild(overlay);
+ });
+}
+
+// ==================================================================================
+// TRACK SOURCE INFO — View download provenance and blacklist sources
+// ==================================================================================
+
+async function showTrackSourceInfo(track, anchorEl) {
+ // Remove existing popover
+ const existing = document.getElementById('source-info-popover');
+ if (existing) existing.remove();
+
+ const popover = document.createElement('div');
+ popover.id = 'source-info-popover';
+ popover.className = 'source-info-popover';
+ popover.innerHTML = '
+
+ Delete Track
+ +How should this track be deleted?
+ +Loading source info...
';
+
+ document.body.appendChild(popover);
+
+ // Position near the button or center on mobile
+ if (anchorEl) {
+ const rect = anchorEl.getBoundingClientRect();
+ const popW = 360;
+ let left = rect.left - popW - 8;
+ if (left < 10) left = rect.right + 8;
+ let top = rect.top - 20;
+ if (top + 300 > window.innerHeight) top = window.innerHeight - 310;
+ popover.style.left = `${left}px`;
+ popover.style.top = `${Math.max(10, top)}px`;
+ } else {
+ popover.style.left = '50%';
+ popover.style.top = '50%';
+ popover.style.transform = 'translate(-50%, -50%)';
+ }
+
+ requestAnimationFrame(() => popover.classList.add('visible'));
+
+ // Close on outside click
+ const closeHandler = e => {
+ if (!popover.contains(e.target) && e.target !== anchorEl) {
+ popover.remove();
+ document.removeEventListener('click', closeHandler);
+ }
+ };
+ setTimeout(() => document.addEventListener('click', closeHandler), 100);
+
+ // Escape to close
+ const escH = e => { if (e.key === 'Escape') { popover.remove(); document.removeEventListener('keydown', escH); document.removeEventListener('click', closeHandler); } };
+ document.addEventListener('keydown', escH);
+
+ try {
+ const res = await fetch(`/api/library/track/${track.id}/source-info`);
+ const data = await res.json();
+
+ if (!data.success || !data.downloads || data.downloads.length === 0) {
+ popover.innerHTML = `
+
+ Source Info
+
+
+ No download source data available for this track. Source tracking starts with new downloads.
+ `;
+ return;
+ }
+
+ const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer: '💜' };
+ const serviceLabels = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer: 'Deezer' };
+
+ const dl = data.downloads[0]; // Most recent download
+ const icon = serviceIcons[dl.source_service] || '📦';
+ const label = serviceLabels[dl.source_service] || dl.source_service;
+ const displayFile = dl.source_filename ? dl.source_filename.replace(/\\/g, '/').split('/').pop() : 'Unknown';
+ const sizeStr = dl.source_size ? `${(dl.source_size / 1048576).toFixed(1)} MB` : '';
+ const dateStr = dl.created_at ? timeAgo(dl.created_at) : '';
+
+ popover.innerHTML = `
+
+ Source Info
+
+
+
+
+ ${dl.source_username && dl.source_filename ? `
+
+ Service
+ ${icon} ${label}
+
+ ${dl.source_service === 'soulseek' && dl.source_username ? `
+ User
+ ${_esc(dl.source_username)}
+
` : ''}
+
+ Original File
+ ${_esc(displayFile)}
+
+ ${sizeStr ? `
+ Size
+ ${sizeStr}
+
` : ''}
+ ${dl.audio_quality ? `
+ Quality
+ ${_esc(dl.audio_quality)}
+
` : ''}
+ ${dl.bit_depth || dl.sample_rate || dl.bitrate ? `
+ Audio
+ ${[dl.bit_depth ? `${dl.bit_depth}-bit` : '', dl.sample_rate ? `${(dl.sample_rate / 1000).toFixed(1)}kHz` : '', dl.bitrate ? `${Math.round(dl.bitrate / 1000)}kbps` : ''].filter(Boolean).join(' · ')}
+
` : ''}
+ ${dateStr ? `
+ Downloaded
+ ${dateStr}
+
` : ''}
+ ${dl.status !== 'completed' ? `
+ Status
+ ${dl.status}
+
` : ''}
+
+
+
` : ''}
+ ${data.downloads.length > 1 ? `${data.downloads.length} download records for this track
` : ''}
+ `;
+
+ // Blacklist button handler
+ const blBtn = document.getElementById('source-info-blacklist-btn');
+ if (blBtn) {
+ blBtn.addEventListener('click', async () => {
+ if (!await showConfirmDialog({ title: 'Blacklist Source', message: `Blacklist "${displayFile}" from ${dl.source_service === 'soulseek' ? dl.source_username : label}? This source will be skipped in future downloads.`, confirmText: 'Blacklist', destructive: true })) return;
+
+ try {
+ const db_res = await fetch('/api/library/blacklist', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ track_title: dl.track_title || track.title,
+ track_artist: dl.track_artist || '',
+ blocked_filename: dl.source_filename,
+ blocked_username: dl.source_username,
+ reason: 'user_rejected'
+ })
+ });
+ const result = await db_res.json();
+ if (result.success) {
+ showToast('Source blacklisted', 'success');
+ blBtn.disabled = true;
+ blBtn.textContent = '⛔ Blacklisted';
+ } else {
+ showToast(result.error || 'Failed to blacklist', 'error');
+ }
+ } catch (e) {
+ showToast('Error: ' + e.message, 'error');
+ }
+ });
+ }
+
+ } catch (e) {
+ popover.innerHTML = `Error loading source info: ${_esc(e.message)}
`;
+ }
+}
+
+
+// ==================================================================================
+// TRACK REDOWNLOAD MODAL — Multi-step: metadata selection → source selection → download
+// ==================================================================================
+
+async function showTrackRedownloadModal(track, album) {
+ const overlay = document.createElement('div');
+ overlay.id = 'redownload-overlay';
+ overlay.className = 'redownload-overlay';
+ overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
+
+ const artistName = artistDetailPageState.enhancedData?.artist?.name || '';
+ const ext = (track.file_path || '').split('.').pop().toUpperCase();
+ const fmt = ['FLAC', 'MP3', 'OPUS', 'OGG', 'M4A', 'WAV'].includes(ext) ? ext : '';
+
+ overlay.innerHTML = `
+
+
+ `;
+
+ // Escape to close
+ const escH = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escH); overlay.remove(); } };
+ document.addEventListener('keydown', escH);
+
+ document.body.appendChild(overlay);
+
+ // Auto-search metadata
+ try {
+ const res = await fetch(`/api/library/track/${track.id}/redownload/search-metadata`, { method: 'POST' });
+ const data = await res.json();
+ if (!data.success) throw new Error(data.error);
+
+ // Set album art in header if available
+ const artEl = document.getElementById('redownload-current-art');
+ if (artEl && data.current_track?.thumb_url) {
+ artEl.innerHTML = `
+
+
+
+
+ Redownload Track
+Find the correct version and download from your preferred source
+
+
+
+
+ 🎵
+
+
+ ${_esc(track.title)}
+
+
+ ${fmt ? `${fmt}` : ''}
+ ${track.bitrate ? `${track.bitrate}k` : ''}
+
+
+
+ 1 Choose Metadata
+
+ 2 Choose Source
+
+ 3 Downloading
+
+
+
+
+ Searching metadata sources...
+
+ Error: ${_esc(e.message)}
`;
+ }
+}
+
+function _renderRedownloadStep1(overlay, track, data) {
+ const body = document.getElementById('redownload-body');
+ if (!body) return;
+
+ const sources = Object.keys(data.metadata_results);
+ if (sources.length === 0) {
+ body.innerHTML = 'No metadata sources available. Check your Spotify/iTunes/Deezer connections.
';
+ return;
+ }
+
+ const bestSource = data.best_match?.source || sources[0];
+ const sourceIcons = { spotify: '🟢', itunes: '🍎', deezer: '🟣', hydrabase: '🔷' };
+ const sourceLabels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs', hydrabase: 'Hydrabase' };
+
+ // Build columns — one per source, side by side
+ const columnsHtml = sources.map(source => {
+ const results = data.metadata_results[source] || [];
+ const icon = sourceIcons[source] || '📋';
+ const label = sourceLabels[source] || source;
+
+ let itemsHtml;
+ if (results.length === 0) {
+ itemsHtml = `No results
`;
+ } else {
+ itemsHtml = results.slice(0, 8).map((r, i) => {
+ const pct = Math.round((r.match_score || 0) * 100);
+ const cls = pct >= 90 ? 'high' : pct >= 70 ? 'medium' : 'low';
+ const dur = r.duration_ms ? `${Math.floor(r.duration_ms / 60000)}:${String(Math.floor((r.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
+ const checked = (source === bestSource && i === 0) ? 'checked' : '';
+ return `
+ `;
+ }).join('');
+ }
+
+ return `
+
+
`;
+ }).join('');
+
+ body.innerHTML = `
+
+ ${label}
+ ${results.length}
+
+ ${itemsHtml}
+ ${columnsHtml}
`;
+
+ // Add sticky footer for Step 1
+ const modal = overlay.querySelector('.redownload-modal');
+ const oldFooter = modal.querySelector('.redownload-sticky-footer');
+ if (oldFooter) oldFooter.remove();
+ const footer = document.createElement('div');
+ footer.className = 'redownload-sticky-footer';
+ footer.innerHTML = `
+
+
+
+
+ `;
+ modal.appendChild(footer);
+
+ // Next button
+ document.getElementById('redownload-next-btn').addEventListener('click', async () => {
+ const checked = body.querySelector('input[name="metadata-choice"]:checked');
+ if (!checked) { showToast('Select a metadata source first', 'error'); return; }
+ const [source, idx] = checked.value.split('|');
+ selectedMeta = data.metadata_results[source][parseInt(idx)];
+ selectedMeta._source = source;
+
+ // Update step indicator
+ overlay.querySelectorAll('.redownload-step').forEach(s => s.classList.remove('active'));
+ overlay.querySelector('.redownload-step[data-step="2"]').classList.add('active');
+
+ // Stream results from all download sources — columns appear as each source responds
+ // Body gets the scrollable content, footer is sticky outside the scroll
+ body.innerHTML = `
+
+
+ `;
+ // Add sticky footer outside the scrollable body
+ const existingFooter = overlay.querySelector('.redownload-sticky-footer');
+ if (existingFooter) existingFooter.remove();
+ const modal = overlay.querySelector('.redownload-modal');
+ const footer = document.createElement('div');
+ footer.className = 'redownload-sticky-footer';
+ footer.innerHTML = `
+
+ Searching download sources...
+
+
+
+
+ `;
+ modal.appendChild(footer);
+
+ // Wire up download button IMMEDIATELY (before streaming starts)
+ // so it works as soon as results appear
+ window._redownloadCandidates = [];
+ window._redownloadMetadata = selectedMeta;
+ document.getElementById('redownload-start-btn').addEventListener('click', async () => {
+ const checked = document.querySelector('input[name="source-choice"]:checked');
+ if (!checked) { showToast('Select a download source', 'error'); return; }
+ const cand = window._redownloadCandidates[parseInt(checked.value)];
+ if (!cand) { showToast('Invalid selection', 'error'); return; }
+ const deleteOld = document.getElementById('redownload-delete-old-check')?.checked ?? true;
+
+ overlay.querySelectorAll('.redownload-step').forEach(s => s.classList.remove('active'));
+ overlay.querySelector('.redownload-step[data-step="3"]').classList.add('active');
+
+ // Remove sticky footer for step 3
+ const ft = overlay.querySelector('.redownload-sticky-footer');
+ if (ft) ft.remove();
+
+ const body = document.getElementById('redownload-body');
+ body.innerHTML = `
+
+
+ `;
+
+ try {
+ const res = await fetch(`/api/library/track/${track.id}/redownload/start`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ metadata: window._redownloadMetadata, candidate: cand, delete_old_file: deleteOld })
+ });
+ const startData = await res.json();
+ if (!startData.success) throw new Error(startData.error);
+ _pollRedownloadProgress(startData.task_id, overlay);
+ } catch (e) {
+ body.innerHTML = `Downloading: ${_esc(cand.display_name)}
+ from ${_esc(cand.source_service === 'soulseek' ? cand.username : (cand.source_service || 'unknown'))}
+
+ Starting download...
+ Download failed: ${_esc(e.message)}
`;
+ }
+ });
+
+ _streamRedownloadSources(overlay, track, selectedMeta);
+ });
+}
+
+async function _streamRedownloadSources(overlay, track, metadata) {
+ const columnsEl = document.getElementById('rdl-src-columns');
+ const loadingEl = document.getElementById('rdl-src-loading');
+ const startBtn = document.getElementById('redownload-start-btn');
+ if (!columnsEl) return;
+
+ const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer_dl: '💜', hybrid: '⚡' };
+ const serviceLabels = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Auto' };
+
+ let allCandidates = [];
+ let firstResult = true;
+ let bestGlobalIdx = -1;
+
+ try {
+ const res = await fetch(`/api/library/track/${track.id}/redownload/search-sources`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ metadata })
+ });
+
+ const reader = res.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ buffer += decoder.decode(value, { stream: true });
+
+ const lines = buffer.split('\n');
+ buffer = lines.pop(); // keep incomplete line
+
+ for (const line of lines) {
+ if (!line.trim()) continue;
+ try {
+ const data = JSON.parse(line);
+ if (data.done) continue;
+
+ const svc = data.source;
+ const candidates = data.candidates || [];
+
+ // Remove loading spinner on first result
+ if (firstResult && loadingEl) { loadingEl.remove(); firstResult = false; }
+
+ // Assign global indices
+ const startIdx = allCandidates.length;
+ candidates.forEach((c, i) => { c._globalIdx = startIdx + i; });
+ allCandidates.push(...candidates);
+ window._redownloadCandidates = allCandidates; // Keep global ref updated for button handler
+
+ // Find best overall candidate
+ bestGlobalIdx = -1;
+ let bestConf = 0;
+ allCandidates.forEach((c, i) => {
+ if (!c.blacklisted && c.confidence > bestConf) { bestConf = c.confidence; bestGlobalIdx = i; }
+ });
+
+ // Render column for this source
+ const icon = serviceIcons[svc] || '📦';
+ const label = serviceLabels[svc] || svc;
+
+ const itemsHtml = candidates.length === 0
+ ? 'No results
'
+ : candidates.slice(0, 10).map(c => {
+ const confPct = Math.round((c.confidence || 0) * 100);
+ const confCls = confPct >= 90 ? 'high' : confPct >= 70 ? 'medium' : 'low';
+ const isRec = c._globalIdx === bestGlobalIdx;
+ const blClass = c.blacklisted ? ' blacklisted' : '';
+ const dur = c.duration ? `${Math.floor(c.duration / 60000)}:${String(Math.floor((c.duration % 60000) / 1000)).padStart(2, '0')}` : '';
+ return `
+ `;
+ }).join('');
+
+ const colEl = document.createElement('div');
+ colEl.className = 'rdl-src-col';
+ colEl.style.animation = 'fadeSlideUp 0.3s ease both';
+ colEl.innerHTML = `
+
+
+ ${label}
+ ${candidates.length}
+
+ ${itemsHtml}
+ `;
+ columnsEl.appendChild(colEl);
+
+ // Enable the download button
+ if (startBtn && allCandidates.some(c => !c.blacklisted)) {
+ startBtn.disabled = false;
+ startBtn.textContent = 'Download Selected';
+ }
+
+ } catch (e) { /* skip malformed lines */ }
+ }
+ }
+ } catch (e) {
+ if (loadingEl) loadingEl.innerHTML = `Error: ${_esc(e.message)}
`;
+ }
+
+ // If no results at all
+ if (allCandidates.length === 0 && loadingEl) {
+ loadingEl.innerHTML = 'No download sources found for this track.
';
+ }
+
+ // Update the shared candidates array (button handler reads from window._redownloadCandidates)
+ window._redownloadCandidates = allCandidates;
+}
+
+/* _renderRedownloadStep2 removed — replaced by _streamRedownloadSources above */
+if (false) {
+ const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer_dl: '💜', hybrid: '⚡' };
+ const serviceLabels = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Auto' };
+
+ // Group candidates by source service
+ const grouped = {};
+ candidates.forEach((c, i) => {
+ c._origIdx = i; // preserve original index for radio value
+ const svc = c.source_service || 'unknown';
+ if (!grouped[svc]) grouped[svc] = [];
+ grouped[svc].push(c);
+ });
+
+ // Build columns — one per source
+ const sourceColumnsHtml = Object.entries(grouped).map(([svc, items]) => {
+ const icon = serviceIcons[svc] || '📦';
+ const label = serviceLabels[svc] || svc;
+
+ const itemsHtml = items.slice(0, 10).map(c => {
+ const confPct = Math.round((c.confidence || 0) * 100);
+ const confCls = confPct >= 90 ? 'high' : confPct >= 70 ? 'medium' : 'low';
+ const isRecommended = c._origIdx === bestIdx && !c.blacklisted;
+ const checked = isRecommended ? 'checked' : '';
+ const blClass = c.blacklisted ? ' blacklisted' : '';
+ const dur = c.duration ? `${Math.floor(c.duration / 60000)}:${String(Math.floor((c.duration % 60000) / 1000)).padStart(2, '0')}` : '';
+
+ return `
+ `;
+ }).join('');
+
+ return `
+
+
`;
+ }).join('');
+
+ body.innerHTML = `
+
+
+ ${label}
+ ${items.length}
+
+ ${itemsHtml}
+ ${sourceColumnsHtml}
+
+
+
+
+
+ `;
+
+ document.getElementById('redownload-start-btn').addEventListener('click', async () => {
+ const checked = body.querySelector('input[name="source-choice"]:checked');
+ if (!checked) { showToast('Select a download source', 'error'); return; }
+ const candidate = candidates[parseInt(checked.value)];
+ const deleteOld = document.getElementById('redownload-delete-old-check')?.checked ?? true;
+
+ // Update step indicator
+ overlay.querySelectorAll('.redownload-step').forEach(s => s.classList.remove('active'));
+ overlay.querySelector('.redownload-step[data-step="3"]').classList.add('active');
+
+ body.innerHTML = `
+
+
+ `;
+
+ try {
+ const res = await fetch(`/api/library/track/${track.id}/redownload/start`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ metadata, candidate, delete_old_file: deleteOld })
+ });
+ const startData = await res.json();
+ if (!startData.success) throw new Error(startData.error);
+
+ // Poll for progress
+ _pollRedownloadProgress(startData.task_id, overlay);
+ } catch (e) {
+ body.innerHTML = `Downloading: ${_esc(candidate.display_name)}
+ from ${_esc(candidate.username)}
+
+ Starting download...
+ Download failed: ${_esc(e.message)}
`;
+ }
+ });
+}
+
+function _pollRedownloadProgress(taskId, overlay) {
+ let completed = false;
+
+ const poll = setInterval(async () => {
+ if (completed) return;
+
+ // Get fresh DOM references every tick (in case DOM was rebuilt)
+ const bar = document.getElementById('redownload-progress-bar');
+ const status = document.getElementById('redownload-progress-status');
+
+ try {
+ // Poll real download progress from /api/downloads/status
+ const dlRes = await fetch('/api/downloads/status');
+ const dlData = await dlRes.json();
+ const transfers = dlData.transfers || [];
+
+ // Find any active transfer
+ let bestTransfer = null;
+ for (const t of transfers) {
+ const st = (t.state || '').toLowerCase();
+ if (st.includes('inprogress') || st.includes('queued') || st.includes('initializing')) {
+ bestTransfer = t;
+ break;
+ }
+ }
+
+ if (bestTransfer) {
+ const pct = bestTransfer.percentComplete || 0;
+ const transferred = bestTransfer.bytesTransferred || 0;
+ const total = bestTransfer.size || 0;
+ const transferredMB = (transferred / 1048576).toFixed(1);
+ const totalMB = (total / 1048576).toFixed(1);
+
+ if (bar) bar.style.width = `${Math.min(95, pct)}%`;
+ if (status) {
+ status.textContent = total > 0
+ ? `Downloading... ${Math.round(pct)}% (${transferredMB} / ${totalMB} MB)`
+ : `Downloading... ${Math.round(pct)}%`;
+ }
+ } else {
+ // No active slskd transfer — streaming source or post-processing
+ if (bar) bar.style.width = '80%';
+ if (status) status.textContent = 'Processing...';
+ }
+
+ // Check for batch completion
+ const procRes = await fetch('/api/active-processes');
+ const procData = await procRes.json();
+ const procs = procData.active_processes || [];
+ const ourBatch = procs.find(p => p.batch_id && p.batch_id.includes('redownload_batch_'));
+
+ if (!ourBatch) {
+ completed = true;
+ clearInterval(poll);
+ if (bar) bar.style.width = '100%';
+ if (status) status.textContent = 'Complete! File replaced successfully.';
+ showToast('Track redownloaded successfully', 'success');
+ setTimeout(() => {
+ overlay.remove();
+ if (artistDetailPageState.enhancedData?.artist?.id) {
+ loadEnhancedViewData(artistDetailPageState.enhancedData.artist.id);
+ }
+ }, 2000);
+ }
+ } catch (e) { /* ignore poll errors */ }
+ }, 1500);
+
+ // Safety timeout — 5 minutes
+ setTimeout(() => {
+ if (!completed) {
+ clearInterval(poll);
+ const status = document.getElementById('redownload-progress-status');
+ if (status) status.textContent = 'Download may still be in progress. Check the dashboard.';
+ }
+ }, 300000);
+}
+
+async function deleteLibraryAlbum(albumId) {
+ const choice = await _showAlbumDeleteDialog();
+ if (!choice) return;
+
+ const deleteFiles = choice === 'delete_files';
+ const params = deleteFiles ? '?delete_files=true' : '';
+
+ try {
+ const response = await fetch(`/api/library/album/${albumId}${params}`, { method: 'DELETE' });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ let msg = `Album removed from library (${result.tracks_deleted || 0} tracks)`;
+ let toastType = 'success';
+ if (deleteFiles) {
+ if (result.files_deleted > 0) {
+ msg = `Album deleted — ${result.files_deleted} files removed from disk`;
+ }
+ if (result.files_failed > 0) {
+ msg += ` (${result.files_failed} files could not be deleted)`;
+ toastType = 'warning';
+ }
+ }
+ showToast(msg, toastType);
+
+ if (artistDetailPageState.enhancedData) {
+ const album = (artistDetailPageState.enhancedData.albums || []).find(a => a.id === albumId);
+ if (album && album.tracks) {
+ album.tracks.forEach(t => artistDetailPageState.selectedTracks.delete(String(t.id)));
+ }
+ artistDetailPageState.enhancedData.albums = (artistDetailPageState.enhancedData.albums || []).filter(a => a.id !== albumId);
+ _rebuildAlbumMap();
+ }
+ artistDetailPageState.expandedAlbums.delete(albumId);
+ delete artistDetailPageState.enhancedTrackSort[albumId];
+ renderEnhancedView();
+ } catch (error) {
+ showToast(`Delete failed: ${error.message}`, 'error');
+ }
+}
+
+function _showAlbumDeleteDialog() {
+ return new Promise(resolve => {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+
+ const close = (val) => { overlay.remove(); resolve(val); };
+ overlay.onclick = e => { if (e.target === overlay) close(null); };
+
+ overlay.innerHTML = `
+
+
+ `;
+
+ overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
+ btn.addEventListener('click', () => close(btn.dataset.choice));
+ });
+ overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
+
+ const escHandler = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escHandler); close(null); } };
+ document.addEventListener('keydown', escHandler);
+
+ document.body.appendChild(overlay);
+ });
+}
+
+function extractFormat(filePath) {
+ if (!filePath) return '-';
+ const ext = filePath.split('.').pop().toLowerCase();
+ const formatMap = { mp3: 'MP3', flac: 'FLAC', m4a: 'AAC', ogg: 'OGG', opus: 'OPUS', wav: 'WAV', wma: 'WMA', aac: 'AAC' };
+ return formatMap[ext] || ext.toUpperCase();
+}
+
+function formatDurationMs(ms) {
+ if (!ms) return '-';
+ const totalSeconds = Math.floor(ms / 1000);
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}
+
+function getServiceUrl(service, entityType, id) {
+ if (!id) return null;
+ const urls = {
+ spotify: {
+ artist: `https://open.spotify.com/artist/${id}`,
+ album: `https://open.spotify.com/album/${id}`,
+ track: `https://open.spotify.com/track/${id}`,
+ },
+ musicbrainz: {
+ artist: `https://musicbrainz.org/artist/${id}`,
+ album: `https://musicbrainz.org/release/${id}`,
+ track: `https://musicbrainz.org/recording/${id}`,
+ },
+ deezer: {
+ artist: `https://www.deezer.com/artist/${id}`,
+ album: `https://www.deezer.com/album/${id}`,
+ track: `https://www.deezer.com/track/${id}`,
+ },
+ audiodb: {
+ artist: `https://www.theaudiodb.com/artist/${id}`,
+ album: `https://www.theaudiodb.com/album/${id}`,
+ track: `https://www.theaudiodb.com/track/${id}`,
+ },
+ itunes: {
+ artist: `https://music.apple.com/artist/${id}`,
+ album: `https://music.apple.com/album/${id}`,
+ track: `https://music.apple.com/song/${id}`,
+ },
+ lastfm: {
+ artist: id, // lastfm_url is already a full URL
+ album: id,
+ track: id,
+ },
+ genius: {
+ artist: id, // genius_url is already a full URL
+ track: id, // genius_url on tracks is already a full URL
+ },
+ tidal: {
+ artist: `https://tidal.com/browse/artist/${id}`,
+ album: `https://tidal.com/browse/album/${id}`,
+ track: `https://tidal.com/browse/track/${id}`,
+ },
+ qobuz: {
+ artist: `https://www.qobuz.com/artist/${id}`,
+ album: `https://www.qobuz.com/album/${id}`,
+ track: `https://www.qobuz.com/track/${id}`,
+ },
+ };
+ return urls[service] && urls[service][entityType] || null;
+}
+
+function makeClickableBadge(service, entityType, id, label) {
+ const url = getServiceUrl(service, entityType, id);
+ if (url) {
+ const a = document.createElement('a');
+ a.className = `enhanced-id-badge ${service === 'musicbrainz' ? 'mb' : service}`;
+ a.href = url;
+ a.target = '_blank';
+ a.rel = 'noopener noreferrer';
+ a.textContent = label;
+ a.title = `${label}: ${id} (click to open)`;
+ a.onclick = (e) => e.stopPropagation();
+ return a;
+ }
+ const span = document.createElement('span');
+ span.className = `enhanced-id-badge ${service === 'musicbrainz' ? 'mb' : service}`;
+ span.textContent = label;
+ span.title = `${label}: ${id}`;
+ return span;
+}
+
+// ---- Inline Editing ----
+
+function startInlineEdit(cell, type, id, field, currentValue) {
+ if (cell.querySelector('.enhanced-inline-input')) return;
+ cancelInlineEdit();
+
+ const isNumeric = ['track_number', 'bpm'].includes(field);
+ const originalContent = cell.innerHTML;
+ cell.dataset.originalContent = originalContent;
+
+ const input = document.createElement('input');
+ input.type = isNumeric ? 'number' : 'text';
+ input.className = 'enhanced-inline-input' + (isNumeric ? ' num' : '');
+ input.value = currentValue || '';
+ if (field === 'bpm') input.step = '0.1';
+ if (field === 'track_number') { input.min = '1'; input.step = '1'; }
+
+ cell.innerHTML = '';
+ cell.appendChild(input);
+ input.focus();
+ input.select();
+
+ artistDetailPageState.editingCell = { cell, type, id, field, originalContent };
+
+ input.addEventListener('click', e => e.stopPropagation());
+ input.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ saveInlineEdit(type, id, field, input.value);
+ } else if (e.key === 'Escape') {
+ cancelInlineEdit();
+ }
+ e.stopPropagation();
+ });
+ input.addEventListener('blur', () => {
+ setTimeout(() => {
+ if (artistDetailPageState.editingCell && artistDetailPageState.editingCell.cell === cell) {
+ saveInlineEdit(type, id, field, input.value);
+ }
+ }, 150);
+ });
+}
+
+async function saveInlineEdit(type, id, field, newValue) {
+ const editInfo = artistDetailPageState.editingCell;
+ if (!editInfo) return;
+ artistDetailPageState.editingCell = null;
+
+ let parsedValue = newValue;
+ if (field === 'track_number') parsedValue = parseInt(newValue) || null;
+ else if (field === 'bpm') parsedValue = parseFloat(newValue) || null;
+ else if (field === 'explicit') parsedValue = parseInt(newValue) || 0;
+
+ const url = type === 'track' ? `/api/library/track/${id}` : `/api/library/album/${id}`;
+
+ try {
+ const response = await fetch(url, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ [field]: parsedValue })
+ });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ const displayValue = parsedValue !== null && parsedValue !== '' ? String(parsedValue) : '-';
+ editInfo.cell.textContent = displayValue;
+ updateLocalEnhancedData(type, id, field, parsedValue);
+ showToast(`Updated ${field}`, 'success');
+ } catch (error) {
+ console.error('Failed to save inline edit:', error);
+ editInfo.cell.innerHTML = editInfo.originalContent;
+ showToast(`Failed to update: ${error.message}`, 'error');
+ }
+}
+
+function cancelInlineEdit() {
+ const editInfo = artistDetailPageState.editingCell;
+ if (!editInfo) return;
+ editInfo.cell.innerHTML = editInfo.originalContent;
+ artistDetailPageState.editingCell = null;
+}
+
+function updateLocalEnhancedData(type, id, field, value) {
+ const data = artistDetailPageState.enhancedData;
+ if (!data) return;
+
+ if (type === 'track') {
+ for (const album of data.albums) {
+ const track = (album.tracks || []).find(t => String(t.id) === String(id));
+ if (track) { track[field] = value; break; }
+ }
+ } else if (type === 'album') {
+ const album = data.albums.find(a => String(a.id) === String(id));
+ if (album) album[field] = value;
+ } else if (type === 'artist') {
+ data.artist[field] = value;
+ }
+}
+
+// ---- Track Selection & Bulk Operations ----
+
+function toggleTrackSelection(trackId) {
+ trackId = String(trackId);
+ if (artistDetailPageState.selectedTracks.has(trackId)) {
+ artistDetailPageState.selectedTracks.delete(trackId);
+ } else {
+ artistDetailPageState.selectedTracks.add(trackId);
+ }
+ const row = document.querySelector(`tr[data-track-id="${trackId}"]`);
+ if (row) row.classList.toggle('selected', artistDetailPageState.selectedTracks.has(trackId));
+ updateBulkBar();
+}
+
+function toggleSelectAllTracks(albumId, checked) {
+ const album = findEnhancedAlbum(albumId);
+ if (!album || !album.tracks) return;
+
+ // Batch update state
+ album.tracks.forEach(track => {
+ const tid = String(track.id);
+ if (checked) artistDetailPageState.selectedTracks.add(tid);
+ else artistDetailPageState.selectedTracks.delete(tid);
+ });
+
+ // Scoped DOM query — only search within this album's panel, not entire document
+ const panel = document.getElementById(`enhanced-tracks-panel-${albumId}`);
+ if (panel) {
+ panel.querySelectorAll('tr[data-track-id]').forEach(row => {
+ row.classList.toggle('selected', checked);
+ const cb = row.querySelector('.enhanced-track-checkbox');
+ if (cb) cb.checked = checked;
+ });
+ }
+ updateBulkBar();
+}
+
+function clearTrackSelection() {
+ // Scoped batch clear — query the container once instead of per-track
+ const container = document.getElementById('enhanced-view-container');
+ if (container) {
+ container.querySelectorAll('tr[data-track-id].selected').forEach(row => {
+ row.classList.remove('selected');
+ const cb = row.querySelector('.enhanced-track-checkbox');
+ if (cb) cb.checked = false;
+ });
+ container.querySelectorAll('.enhanced-track-table thead .enhanced-track-checkbox').forEach(cb => cb.checked = false);
+ }
+ artistDetailPageState.selectedTracks.clear();
+ updateBulkBar();
+}
+
+function updateBulkBar() {
+ const bar = document.getElementById('enhanced-bulk-bar');
+ const count = document.getElementById('enhanced-bulk-count');
+ if (!bar || !count) return;
+ if (!isEnhancedAdmin()) {
+ bar.classList.remove('visible');
+ return;
+ }
+ const n = artistDetailPageState.selectedTracks.size;
+ count.textContent = n;
+ bar.classList.toggle('visible', n > 0);
+}
+
+function showBulkEditModal() {
+ const overlay = document.getElementById('enhanced-bulk-edit-overlay');
+ const body = document.getElementById('enhanced-bulk-modal-body');
+ const title = document.getElementById('enhanced-bulk-modal-title');
+ if (!overlay || !body) return;
+
+ const count = artistDetailPageState.selectedTracks.size;
+ title.textContent = `Batch Edit ${count} Track${count !== 1 ? 's' : ''}`;
+
+ body.innerHTML = `
+
+
+ Delete Album
+ +How should this album be deleted?
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ overlay.classList.remove('hidden');
+}
+
+function closeBulkEditModal() {
+ const overlay = document.getElementById('enhanced-bulk-edit-overlay');
+ if (overlay) overlay.classList.add('hidden');
+}
+
+async function executeBulkEdit() {
+ const trackIds = Array.from(artistDetailPageState.selectedTracks);
+ if (trackIds.length === 0) return;
+
+ const updates = {};
+ const trackNum = document.getElementById('bulk-edit-track-number');
+ const bpm = document.getElementById('bulk-edit-bpm');
+ const style = document.getElementById('bulk-edit-style');
+ const mood = document.getElementById('bulk-edit-mood');
+ const explicit = document.getElementById('bulk-edit-explicit');
+
+ if (trackNum && trackNum.value !== '') updates.track_number = parseInt(trackNum.value);
+ if (bpm && bpm.value !== '') updates.bpm = parseFloat(bpm.value);
+ if (style && style.value !== '') updates.style = style.value;
+ if (mood && mood.value !== '') updates.mood = mood.value;
+ if (explicit && explicit.value !== '') updates.explicit = parseInt(explicit.value);
+
+ if (Object.keys(updates).length === 0) {
+ showToast('No changes to apply', 'error');
+ return;
+ }
+
+ try {
+ const response = await fetch('/api/library/tracks/batch', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ track_ids: trackIds, updates })
+ });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ showToast(`Updated ${result.updated_count} tracks`, 'success');
+ closeBulkEditModal();
+
+ for (const [field, val] of Object.entries(updates)) {
+ trackIds.forEach(tid => updateLocalEnhancedData('track', tid, field, val));
+ }
+
+ reRenderExpandedPanels();
+ clearTrackSelection();
+
+ } catch (error) {
+ console.error('Bulk edit failed:', error);
+ showToast(`Bulk edit failed: ${error.message}`, 'error');
+ }
+}
+
+// ---- Save Artist / Album Metadata ----
+
+async function saveArtistMetadata() {
+ const form = document.getElementById('enhanced-artist-meta-form');
+ if (!form) return;
+
+ const inputs = form.querySelectorAll('.enhanced-meta-field-input');
+ const updates = {};
+ const original = artistDetailPageState.enhancedData.artist;
+
+ inputs.forEach(input => {
+ const field = input.dataset.field;
+ if (!field) return;
+ let value = (input.tagName === 'TEXTAREA' ? input.value : input.value).trim();
+
+ let origVal = original[field];
+ if (field === 'genres') {
+ const newGenres = value ? value.split(',').map(g => g.trim()).filter(Boolean) : [];
+ const origGenres = Array.isArray(origVal) ? origVal : [];
+ if (JSON.stringify(newGenres) !== JSON.stringify(origGenres)) updates[field] = newGenres;
+ } else {
+ if ((value || '') !== (origVal || '')) updates[field] = value || null;
+ }
+ });
+
+ if (Object.keys(updates).length === 0) {
+ showToast('No changes to save', 'error');
+ return;
+ }
+
+ try {
+ const response = await fetch(`/api/library/artist/${original.id}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(updates)
+ });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ for (const [field, value] of Object.entries(updates)) {
+ artistDetailPageState.enhancedData.artist[field] = value;
+ }
+
+ // Update the display name in the header
+ if (updates.name) {
+ const nameEl = document.querySelector('.enhanced-artist-meta-name');
+ if (nameEl) nameEl.textContent = updates.name;
+ }
+
+ showToast(`Artist metadata saved (${(result.updated_fields || []).join(', ')})`, 'success');
+ } catch (error) {
+ console.error('Failed to save artist metadata:', error);
+ showToast(`Failed to save: ${error.message}`, 'error');
+ }
+}
+
+function revertArtistMetadata() {
+ const data = artistDetailPageState.enhancedData;
+ if (!data) return;
+
+ const panel = document.getElementById('enhanced-artist-meta');
+ if (!panel) return;
+
+ const parent = panel.parentNode;
+ const newPanel = renderArtistMetaPanel(data.artist);
+ parent.replaceChild(newPanel, panel);
+ showToast('Reverted to saved values', 'success');
+}
+
+async function saveAlbumMetadata(albumId) {
+ const metaRow = document.getElementById(`enhanced-album-meta-${albumId}`);
+ if (!metaRow) return;
+
+ const album = findEnhancedAlbum(albumId);
+ if (!album) return;
+
+ const inputs = metaRow.querySelectorAll('.enhanced-album-meta-input');
+ const updates = {};
+
+ inputs.forEach(input => {
+ const field = input.dataset.field;
+ if (!field) return;
+ let value = input.value.trim();
+
+ if (field === 'genres') {
+ const newGenres = value ? value.split(',').map(g => g.trim()).filter(Boolean) : [];
+ const origGenres = Array.isArray(album.genres) ? album.genres : [];
+ if (JSON.stringify(newGenres) !== JSON.stringify(origGenres)) updates[field] = newGenres;
+ } else if (field === 'year' || field === 'explicit' || field === 'track_count') {
+ const numVal = value !== '' ? parseInt(value) : null;
+ if (numVal !== (album[field] || null)) updates[field] = numVal;
+ } else {
+ if ((value || '') !== (album[field] || '')) updates[field] = value || null;
+ }
+ });
+
+ if (Object.keys(updates).length === 0) {
+ showToast('No album changes to save', 'error');
+ return;
+ }
+
+ try {
+ const response = await fetch(`/api/library/album/${albumId}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(updates)
+ });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ for (const [field, value] of Object.entries(updates)) {
+ album[field] = value;
+ }
+
+ // Update album row display
+ const albumRow = document.getElementById(`enhanced-album-row-${albumId}`);
+ if (albumRow) {
+ if (updates.title) {
+ const titleEl = albumRow.querySelector('.enhanced-album-title');
+ if (titleEl) { titleEl.textContent = updates.title; titleEl.title = updates.title; }
+ }
+ if (updates.year !== undefined) {
+ const yearEl = albumRow.querySelector('.enhanced-album-year');
+ if (yearEl) yearEl.textContent = updates.year || '-';
+ }
+ }
+
+ showToast(`Album metadata saved (${(result.updated_fields || []).join(', ')})`, 'success');
+ } catch (error) {
+ console.error('Failed to save album metadata:', error);
+ showToast(`Failed to save: ${error.message}`, 'error');
+ }
+}
+
+function reRenderExpandedPanels() {
+ artistDetailPageState.expandedAlbums.forEach(albumId => {
+ const panel = document.getElementById(`enhanced-tracks-panel-${albumId}`);
+ if (!panel) return;
+ const inner = panel.querySelector('.enhanced-tracks-panel-inner');
+ if (!inner) return;
+
+ const album = findEnhancedAlbum(albumId);
+ if (album) {
+ inner.innerHTML = '';
+ inner.appendChild(renderExpandedAlbumHeader(album));
+ inner.appendChild(renderAlbumMetaRow(album));
+ inner.appendChild(renderTrackTable(album));
+ }
+ });
+}
+
+// ---- Manual Match Modal ----
+
+function openManualMatchModal(entityType, entityId, service, defaultQuery, artistId) {
+ // Remove existing modal if any
+ const existing = document.getElementById('enhanced-manual-match-overlay');
+ if (existing) existing.remove();
+
+ const serviceLabels = {
+ spotify: 'Spotify', musicbrainz: 'MusicBrainz', deezer: 'Deezer',
+ audiodb: 'AudioDB', itunes: 'iTunes', lastfm: 'Last.fm', genius: 'Genius'
+ };
+
+ const overlay = document.createElement('div');
+ overlay.id = 'enhanced-manual-match-overlay';
+ overlay.className = 'modal-overlay';
+ overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+ const modal = document.createElement('div');
+ modal.className = 'enhanced-manual-match-modal';
+
+ // Header
+ const header = document.createElement('div');
+ header.className = 'enhanced-bulk-modal-header';
+ const title = document.createElement('h3');
+ title.textContent = `Match ${entityType} on ${serviceLabels[service] || service}`;
+ header.appendChild(title);
+ const closeBtn = document.createElement('button');
+ closeBtn.className = 'enhanced-bulk-modal-close';
+ closeBtn.innerHTML = '×';
+ closeBtn.onclick = () => overlay.remove();
+ header.appendChild(closeBtn);
+ modal.appendChild(header);
+
+ // Search bar
+ const searchRow = document.createElement('div');
+ searchRow.className = 'enhanced-match-search-row';
+ const searchInput = document.createElement('input');
+ searchInput.type = 'text';
+ searchInput.className = 'enhanced-match-search-input';
+ searchInput.placeholder = `Search ${serviceLabels[service] || service}...`;
+ searchInput.value = defaultQuery;
+ searchRow.appendChild(searchInput);
+ const searchBtn = document.createElement('button');
+ searchBtn.className = 'enhanced-enrich-btn';
+ searchBtn.textContent = 'Search';
+ searchBtn.onclick = () => doManualMatchSearch(service, entityType, searchInput.value, resultsContainer, entityId, artistId);
+ searchRow.appendChild(searchBtn);
+
+ // Clear Match button — lets user revert a wrong match to not_found
+ const clearBtn = document.createElement('button');
+ clearBtn.className = 'enhanced-enrich-btn';
+ clearBtn.style.cssText = 'background:rgba(255,80,80,0.12);color:#ff6b6b;margin-left:6px';
+ clearBtn.textContent = 'Clear Match';
+ clearBtn.title = 'Remove the current match — reverts to Not Found';
+ clearBtn.onclick = async () => {
+ if (!confirm(`Clear ${serviceLabels[service] || service} match for this ${entityType}? It will revert to "Not Found".`)) return;
+ try {
+ const res = await fetch('/api/library/clear-match', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ entity_type: entityType, entity_id: entityId, service, artist_id: artistId })
+ });
+ const data = await res.json();
+ if (data.success) {
+ showToast(`Cleared ${serviceLabels[service] || service} match`, 'success');
+ overlay.remove();
+ if (data.updated_data) {
+ artistDetailPageState.enhancedData = data.updated_data;
+ renderEnhancedArtistView(data.updated_data, true);
+ }
+ } else {
+ showToast(data.error || 'Failed to clear match', 'error');
+ }
+ } catch (e) {
+ showToast('Error clearing match', 'error');
+ }
+ };
+ searchRow.appendChild(clearBtn);
+
+ modal.appendChild(searchRow);
+
+ // Handle Enter key
+ searchInput.onkeydown = (e) => {
+ if (e.key === 'Enter') searchBtn.click();
+ };
+
+ // Results container
+ const resultsContainer = document.createElement('div');
+ resultsContainer.className = 'enhanced-match-results';
+ resultsContainer.innerHTML = 'Press Search or Enter to find matches
';
+ modal.appendChild(resultsContainer);
+
+ overlay.appendChild(modal);
+ document.body.appendChild(overlay);
+
+ // Auto-search on open
+ searchInput.focus();
+ searchBtn.click();
+}
+
+async function doManualMatchSearch(service, entityType, query, container, entityId, artistId) {
+ if (!query.trim()) {
+ container.innerHTML = 'Enter a search term
';
+ return;
+ }
+
+ container.innerHTML = 'Searching...
';
+
+ try {
+ const response = await fetch('/api/library/search-service', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ service, entity_type: entityType, query: query.trim() })
+ });
+
+ const data = await response.json();
+ if (!data.success) throw new Error(data.error);
+
+ const results = data.results || [];
+ container.innerHTML = '';
+
+ if (results.length === 0) {
+ container.innerHTML = 'No results found. Try a different search.
';
+ return;
+ }
+
+ results.forEach(result => {
+ const row = document.createElement('div');
+ row.className = 'enhanced-match-result-row';
+
+ if (result.image) {
+ const img = document.createElement('img');
+ img.className = 'enhanced-match-result-img';
+ img.src = result.image;
+ img.alt = '';
+ img.onerror = function () { this.style.display = 'none'; };
+ row.appendChild(img);
+ } else {
+ const placeholder = document.createElement('div');
+ placeholder.className = 'enhanced-match-result-img-placeholder';
+ placeholder.innerHTML = '🎵';
+ row.appendChild(placeholder);
+ }
+
+ const info = document.createElement('div');
+ info.className = 'enhanced-match-result-info';
+ const name = document.createElement('div');
+ name.className = 'enhanced-match-result-name';
+ name.textContent = result.name || 'Unknown';
+ info.appendChild(name);
+ if (result.extra) {
+ const extra = document.createElement('div');
+ extra.className = 'enhanced-match-result-extra';
+ extra.textContent = result.extra;
+ info.appendChild(extra);
+ }
+ const idLine = document.createElement('div');
+ idLine.className = 'enhanced-match-result-id';
+ const providerLabel = result.provider && result.provider !== service ? ` (${result.provider})` : '';
+ idLine.textContent = `ID: ${result.id}${providerLabel}`;
+ info.appendChild(idLine);
+ row.appendChild(info);
+
+ const matchBtn = document.createElement('button');
+ matchBtn.className = 'enhanced-meta-save-btn';
+ matchBtn.textContent = 'Match';
+ matchBtn.onclick = () => applyManualMatch(entityType, entityId, result.provider || service, result.id, artistId);
+ row.appendChild(matchBtn);
+
+ container.appendChild(row);
+ });
+
+ } catch (error) {
+ container.innerHTML = `Error: ${escapeHtml(error.message)}
`;
+ }
+}
+
+async function applyManualMatch(entityType, entityId, service, serviceId, artistId) {
+ try {
+ showToast(`Matching ${entityType} to ${service}...`, 'info');
+
+ const response = await fetch('/api/library/manual-match', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ entity_type: entityType,
+ entity_id: entityId,
+ service: service,
+ service_id: serviceId,
+ artist_id: artistId
+ })
+ });
+
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ showToast(`Manually matched to ${service} ID: ${serviceId}`, 'success');
+
+ // Close modal
+ const overlay = document.getElementById('enhanced-manual-match-overlay');
+ if (overlay) overlay.remove();
+
+ // Update view with fresh data
+ if (result.updated_data && result.updated_data.success) {
+ artistDetailPageState.enhancedData = result.updated_data;
+ _rebuildAlbumMap();
+ renderEnhancedView();
+ } else if (artistDetailPageState.currentArtistId) {
+ await loadEnhancedViewData(artistDetailPageState.currentArtistId);
+ }
+
+ } catch (error) {
+ showToast(`Match failed: ${error.message}`, 'error');
+ }
+}
+
+// ---- Enrichment ----
+
+let _enrichmentInFlight = false;
+
+async function runEnrichment(entityType, entityId, service, name, artistName, artistId) {
+ if (_enrichmentInFlight) {
+ showToast('An enrichment is already in progress', 'error');
+ return;
+ }
+
+ _enrichmentInFlight = true;
+
+ // Add loading class to all match chips for this service
+ const chipPrefixes = {
+ 'spotify': ['spotify', 'sp'],
+ 'musicbrainz': ['musicbrainz', 'mb'],
+ 'deezer': ['deezer', 'dz'],
+ 'audiodb': ['audiodb', 'adb'],
+ 'itunes': ['itunes', 'it'],
+ 'lastfm': ['last.fm', 'lfm'],
+ 'genius': ['genius', 'gen'],
+ };
+ const prefixes = chipPrefixes[service] || [service];
+ document.querySelectorAll('.enhanced-match-chip').forEach(chip => {
+ const chipText = chip.textContent.toLowerCase();
+ if (prefixes.some(p => chipText.startsWith(p))) {
+ chip.classList.add('loading');
+ }
+ });
+
+ showToast(`Enriching ${entityType} from ${service}...`, 'info');
+
+ try {
+ const response = await fetch('/api/library/enrich', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ entity_type: entityType,
+ entity_id: entityId,
+ service: service,
+ name: name,
+ artist_name: artistName,
+ artist_id: artistId
+ })
+ });
+
+ const result = await response.json();
+
+ if (response.status === 429) {
+ showToast(result.error || 'Another enrichment is in progress', 'error');
+ return;
+ }
+
+ if (!result.success) {
+ throw new Error(result.error || 'Enrichment failed');
+ }
+
+ // Show per-service results
+ const results = result.results || {};
+ const successes = Object.entries(results).filter(([, r]) => r.success).map(([s]) => s);
+ const failures = Object.entries(results).filter(([, r]) => !r.success).map(([s, r]) => `${s}: ${r.error}`);
+
+ if (successes.length > 0) {
+ showToast(`Enriched from: ${successes.join(', ')}`, 'success');
+ }
+ if (failures.length > 0) {
+ showToast(`Failed: ${failures.join('; ')}`, 'error');
+ }
+
+ // Update local data with fresh response and re-render (preserves expanded state)
+ if (result.updated_data && result.updated_data.success) {
+ artistDetailPageState.enhancedData = result.updated_data;
+ _rebuildAlbumMap();
+ renderEnhancedView();
+ } else if (artistDetailPageState.currentArtistId) {
+ await loadEnhancedViewData(artistDetailPageState.currentArtistId);
+ }
+
+ } catch (error) {
+ console.error('Enrichment error:', error);
+ showToast(`Enrichment error: ${error.message}`, 'error');
+ } finally {
+ _enrichmentInFlight = false;
+ document.querySelectorAll('.enhanced-match-chip.loading').forEach(c => c.classList.remove('loading'));
+ }
+}
+
+// Close enrich dropdowns when clicking outside (early bail when enhanced view isn't active)
+document.addEventListener('click', (e) => {
+ if (!artistDetailPageState.enhancedView) return;
+ if (!e.target.closest('.enhanced-enrich-wrap')) {
+ document.querySelectorAll('.enhanced-enrich-menu.visible').forEach(m => m.classList.remove('visible'));
+ }
+});
+
+// ---- Write Tags to File ----
+
+let _tagPreviewTrackId = null;
+let _tagPreviewServerType = null;
+
+async function showTagPreview(trackId) {
+ _tagPreviewTrackId = trackId;
+ _tagPreviewServerType = null;
+ const overlay = document.getElementById('tag-preview-overlay');
+ const body = document.getElementById('tag-preview-body');
+ const title = document.getElementById('tag-preview-title');
+ if (!overlay || !body) return;
+
+ title.textContent = 'Write Tags to File';
+ body.innerHTML = 'Loading tag comparison...
';
+ overlay.classList.remove('hidden');
+
+ // Hide sync checkbox until we know server type
+ const syncLabel = document.getElementById('tag-preview-sync-label');
+ if (syncLabel) syncLabel.classList.add('hidden');
+
+ try {
+ const response = await fetch(`/api/library/track/${trackId}/tag-preview`);
+ const result = await response.json();
+ if (!result.success) {
+ body.innerHTML = `${escapeHtml(result.error)}
`;
+ return;
+ }
+
+ const diff = result.diff || [];
+ const hasChanges = result.has_changes;
+
+ // Show server sync checkbox if a server is connected (not navidrome — it auto-detects)
+ _tagPreviewServerType = result.server_type || null;
+ if (syncLabel && _tagPreviewServerType && _tagPreviewServerType !== 'navidrome') {
+ const syncText = document.getElementById('tag-preview-sync-text');
+ if (syncText) syncText.textContent = `Sync to ${_tagPreviewServerType === 'plex' ? 'Plex' : 'Jellyfin'}`;
+ syncLabel.classList.remove('hidden');
+ }
+
+ let html = '| Field | Current File Tag | DB Value | '; + html += '|
|---|---|---|---|
| ${d.field} | `; + html += `${escapeHtml(d.file_value) || 'empty'} | `; + html += `${arrow} | `; + html += `${escapeHtml(d.db_value) || 'empty'} | `; + html += '
File tags already match DB metadata
';
+ }
+
+ body.innerHTML = html;
+
+ const writeBtn = document.getElementById('tag-preview-write-btn');
+ if (writeBtn) {
+ writeBtn.disabled = !hasChanges && !document.getElementById('tag-preview-embed-cover')?.checked;
+ }
+
+ } catch (error) {
+ body.innerHTML = `Failed to load preview: ${escapeHtml(error.message)}
`;
+ }
+}
+
+function closeTagPreviewModal() {
+ const overlay = document.getElementById('tag-preview-overlay');
+ if (overlay) overlay.classList.add('hidden');
+ _tagPreviewTrackId = null;
+}
+
+async function executeWriteTags() {
+ if (!_tagPreviewTrackId) return;
+
+ const writeBtn = document.getElementById('tag-preview-write-btn');
+ if (writeBtn) {
+ writeBtn.disabled = true;
+ writeBtn.textContent = 'Writing...';
+ }
+
+ const embedCover = document.getElementById('tag-preview-embed-cover')?.checked ?? true;
+ const syncToServer = document.getElementById('tag-preview-sync-server')?.checked && _tagPreviewServerType && _tagPreviewServerType !== 'navidrome';
+
+ try {
+ const response = await fetch(`/api/library/track/${_tagPreviewTrackId}/write-tags`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ embed_cover: embedCover, sync_to_server: syncToServer })
+ });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ const fieldCount = (result.written_fields || []).length;
+ let msg = `Tags written successfully (${fieldCount} fields)`;
+ if (result.server_sync) {
+ const ss = result.server_sync;
+ if (ss.synced > 0) msg += ` — synced to ${_tagPreviewServerType === 'plex' ? 'Plex' : 'Jellyfin'}`;
+ else if (ss.failed > 0) msg += ` — server sync failed`;
+ }
+ showToast(msg, 'success');
+ closeTagPreviewModal();
+
+ } catch (error) {
+ showToast(`Failed to write tags: ${error.message}`, 'error');
+ } finally {
+ if (writeBtn) {
+ writeBtn.disabled = false;
+ writeBtn.textContent = 'Write Tags';
+ }
+ }
+}
+
+async function writeAlbumTags(albumId) {
+ const album = findEnhancedAlbum(albumId);
+ if (!album) return;
+
+ const tracks = (album.tracks || []).filter(t => t.file_path);
+ if (tracks.length === 0) {
+ showToast('No tracks with files in this album', 'error');
+ return;
+ }
+
+ await showBatchTagPreview(tracks.map(t => t.id), album.title);
+}
+
+async function batchWriteTagsSelected() {
+ const trackIds = Array.from(artistDetailPageState.selectedTracks);
+ if (trackIds.length === 0) return;
+
+ await showBatchTagPreview(trackIds, null);
+}
+
+async function showBatchTagPreview(trackIds, albumTitle) {
+ const overlay = document.getElementById('batch-tag-preview-overlay');
+ const body = document.getElementById('batch-tag-preview-body');
+ const titleEl = document.getElementById('batch-tag-preview-title');
+ const summary = document.getElementById('batch-tag-preview-summary');
+ const writeBtn = document.getElementById('batch-tag-preview-write-btn');
+ if (!overlay || !body) return;
+
+ titleEl.textContent = albumTitle ? `Write Tags — ${albumTitle}` : `Write Tags — ${trackIds.length} Tracks`;
+ body.innerHTML = 'Loading tag previews...
';
+ summary.innerHTML = '';
+ writeBtn.disabled = true;
+ overlay.classList.remove('hidden');
+
+ // Hide sync checkbox until we know server type
+ const syncLabel = document.getElementById('batch-tag-preview-sync-label');
+ if (syncLabel) syncLabel.classList.add('hidden');
+
+ try {
+ const response = await fetch('/api/library/tracks/tag-preview-batch', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ track_ids: trackIds })
+ });
+ const result = await response.json();
+ if (!result.success) {
+ body.innerHTML = `${escapeHtml(result.error)}
`;
+ return;
+ }
+
+ const tracks = result.tracks || [];
+ const serverType = result.server_type || null;
+
+ // Show sync checkbox if server connected
+ if (syncLabel && serverType && serverType !== 'navidrome') {
+ const syncText = document.getElementById('batch-tag-preview-sync-text');
+ if (syncText) syncText.textContent = `Sync to ${serverType === 'plex' ? 'Plex' : 'Jellyfin'}`;
+ syncLabel.classList.remove('hidden');
+ }
+
+ // Categorize tracks
+ const withChanges = tracks.filter(t => t.has_changes);
+ const noChanges = tracks.filter(t => !t.error && !t.has_changes);
+ const errors = tracks.filter(t => t.error);
+
+ // Summary bar
+ let summaryHtml = '';
+ if (withChanges.length > 0) summaryHtml += `${withChanges.length} with changes`;
+ if (noChanges.length > 0) summaryHtml += `${noChanges.length} unchanged`;
+ if (errors.length > 0) summaryHtml += `${errors.length} unavailable`;
+ summaryHtml += '
';
+ summary.innerHTML = summaryHtml;
+
+ // Build track accordion
+ let html = '';
+
+ // Tracks with changes (expanded by default)
+ withChanges.forEach(track => {
+ html += _renderBatchTrackDiff(track, true);
+ });
+
+ // Errors
+ errors.forEach(track => {
+ html += ``;
+ html += `
`;
+ });
+
+ // Unchanged tracks (collapsed)
+ if (noChanges.length > 0) {
+ html += ``;
+ html += `${track.track_number || '—'}`;
+ html += `${escapeHtml(track.title)}`;
+ html += `${escapeHtml(track.error)}`;
+ html += `
`;
+ html += `
`;
+ }
+
+ if (withChanges.length === 0 && errors.length === 0) {
+ html += '`;
+ html += `${noChanges.length} track${noChanges.length !== 1 ? 's' : ''} already up to date`;
+ html += `▾`;
+ html += `
`;
+ html += ``;
+ noChanges.forEach(track => {
+ html += `
`;
+ html += `${track.track_number || '—'}`;
+ html += `${escapeHtml(track.title)}`;
+ html += `✓ Tags match`;
+ html += `
`;
+ });
+ html += `All file tags already match DB metadata
';
+ }
+
+ body.innerHTML = html;
+
+ // Store state for write action
+ overlay._batchTrackIds = trackIds;
+ overlay._batchServerType = serverType;
+ writeBtn.disabled = withChanges.length === 0;
+
+ } catch (error) {
+ body.innerHTML = `Failed to load previews: ${escapeHtml(error.message)}
`;
+ }
+}
+
+function _renderBatchTrackDiff(track, expanded) {
+ let html = `';
+ return html;
+}
+
+function closeBatchTagPreviewModal() {
+ const overlay = document.getElementById('batch-tag-preview-overlay');
+ if (overlay) {
+ overlay.classList.add('hidden');
+ overlay._batchTrackIds = null;
+ overlay._batchServerType = null;
+ }
+}
+
+async function executeBatchWriteTags() {
+ const overlay = document.getElementById('batch-tag-preview-overlay');
+ const trackIds = overlay?._batchTrackIds;
+ if (!trackIds || trackIds.length === 0) return;
+
+ const writeBtn = document.getElementById('batch-tag-preview-write-btn');
+ if (writeBtn) {
+ writeBtn.disabled = true;
+ writeBtn.textContent = 'Writing...';
+ }
+
+ const embedCover = document.getElementById('batch-tag-preview-embed-cover')?.checked ?? true;
+ const serverType = overlay._batchServerType;
+ const syncToServer = document.getElementById('batch-tag-preview-sync-server')?.checked && serverType && serverType !== 'navidrome';
+
+ closeBatchTagPreviewModal();
+ await _startBatchWriteTags(trackIds, embedCover, syncToServer);
+
+ if (writeBtn) {
+ writeBtn.disabled = false;
+ writeBtn.textContent = 'Write Tags';
+ }
+}
+
+async function _startBatchWriteTags(trackIds, embedCover, syncToServer = false) {
+ try {
+ const response = await fetch('/api/library/tracks/write-tags-batch', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ track_ids: trackIds, embed_cover: embedCover, sync_to_server: syncToServer })
+ });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ showToast(`Writing tags for ${trackIds.length} tracks...`, 'info');
+ _pollBatchWriteTagsStatus();
+
+ } catch (error) {
+ showToast(`Failed to start tag write: ${error.message}`, 'error');
+ }
+}
+
+let _batchWriteTagsPollTimer = null;
+
+function _pollBatchWriteTagsStatus() {
+ if (_batchWriteTagsPollTimer) clearTimeout(_batchWriteTagsPollTimer);
+
+ async function poll() {
+ try {
+ const response = await fetch('/api/library/tracks/write-tags-batch/status');
+ const state = await response.json();
+
+ if (state.status === 'running') {
+ if (state.sync_phase === 'syncing') {
+ const serverName = state.sync_server === 'plex' ? 'Plex' : state.sync_server === 'jellyfin' ? 'Jellyfin' : state.sync_server;
+ showToast(`Syncing to ${serverName}...`, 'info');
+ } else {
+ const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
+ showToast(`Writing tags: ${state.processed}/${state.total} (${pct}%) — ${state.current_track}`, 'info');
+ }
+ _batchWriteTagsPollTimer = setTimeout(poll, 1000);
+ } else if (state.status === 'done') {
+ let msg = `Tags written: ${state.written} succeeded, ${state.failed} failed`;
+ if (state.sync_phase === 'done') {
+ const serverName = state.sync_server === 'plex' ? 'Plex' : state.sync_server === 'jellyfin' ? 'Jellyfin' : state.sync_server;
+ if (state.sync_synced > 0 && state.sync_failed === 0) {
+ msg += ` — synced to ${serverName}`;
+ } else if (state.sync_failed > 0) {
+ msg += ` — ${serverName} sync: ${state.sync_synced} synced, ${state.sync_failed} failed`;
+ }
+ }
+ // Surface the first error reason so users can diagnose (e.g. "File not found")
+ if (state.failed > 0 && state.errors && state.errors.length > 0) {
+ const firstErr = state.errors[0].error || 'Unknown error';
+ msg += ` (${firstErr})`;
+ }
+ showToast(msg, state.failed > 0 || state.sync_failed > 0 ? 'warning' : 'success');
+ _batchWriteTagsPollTimer = null;
+ }
+ } catch (error) {
+ console.error('Poll write-tags status failed:', error);
+ _batchWriteTagsPollTimer = null;
+ }
+ }
+
+ _batchWriteTagsPollTimer = setTimeout(poll, 800);
+}
+
+// ── ReplayGain Analysis ──
+
+let _rgBatchPollTimer = null;
+let _rgAlbumPollTimer = null;
+
+/**
+ * Analyze a single track and write track-level ReplayGain tags.
+ * Synchronous on the server side (~1–3 s). Shows spinner on the button.
+ */
+async function analyzeTrackReplayGain(trackId, btn) {
+ if (btn) {
+ btn.disabled = true;
+ btn.textContent = '…';
+ }
+ try {
+ const res = await fetch(`/api/library/track/${trackId}/analyze-replaygain`, { method: 'POST' });
+ const data = await res.json();
+ if (data.success) {
+ showToast(`ReplayGain written: ${data.track_gain} (${data.lufs} LUFS)`, 'success');
+ } else {
+ showToast(`ReplayGain failed: ${data.error}`, 'error');
+ }
+ } catch (err) {
+ showToast('ReplayGain analysis failed', 'error');
+ } finally {
+ if (btn) {
+ btn.disabled = false;
+ btn.textContent = 'RG';
+ }
+ }
+}
+
+/**
+ * Analyze all tracks in an album and write track + album ReplayGain tags.
+ * Kicks off a background job; polls for progress.
+ */
+async function analyzeAlbumReplayGain(albumId, btn) {
+ if (btn) {
+ btn.disabled = true;
+ btn.innerHTML = '♫ Analyzing…';
+ }
+ try {
+ const res = await fetch(`/api/library/album/${albumId}/analyze-replaygain`, { method: 'POST' });
+ const data = await res.json();
+ if (!data.success) {
+ showToast(`ReplayGain: ${data.error}`, 'error');
+ if (btn) { btn.disabled = false; btn.innerHTML = '♫ ReplayGain'; }
+ return;
+ }
+ showToast('Album ReplayGain analysis started…', 'info');
+ _pollAlbumRgStatus(albumId, btn);
+ } catch (err) {
+ showToast('Failed to start album ReplayGain analysis', 'error');
+ if (btn) { btn.disabled = false; btn.innerHTML = '♫ ReplayGain'; }
+ }
+}
+
+function _pollAlbumRgStatus(albumId, btn) {
+ if (_rgAlbumPollTimer) clearTimeout(_rgAlbumPollTimer);
+
+ async function poll() {
+ try {
+ const res = await fetch(`/api/library/album/${albumId}/analyze-replaygain/status`);
+ const state = await res.json();
+
+ if (state.status === 'running') {
+ const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
+ showToast(`ReplayGain: ${state.processed}/${state.total} tracks (${pct}%)`, 'info');
+ _rgAlbumPollTimer = setTimeout(poll, 1200);
+ } else if (state.status === 'done') {
+ const msg = `ReplayGain done: ${state.analyzed} analyzed, ${state.failed} failed`;
+ showToast(msg, state.failed > 0 ? 'warning' : 'success');
+ if (btn) { btn.disabled = false; btn.innerHTML = '♫ ReplayGain'; }
+ _rgAlbumPollTimer = null;
+ }
+ } catch (err) {
+ console.error('ReplayGain album poll failed:', err);
+ if (btn) { btn.disabled = false; btn.innerHTML = '♫ ReplayGain'; }
+ _rgAlbumPollTimer = null;
+ }
+ }
+
+ _rgAlbumPollTimer = setTimeout(poll, 1000);
+}
+
+/**
+ * Analyze selected tracks (track gain only — they may span albums).
+ */
+async function batchAnalyzeReplayGainSelected() {
+ const trackIds = Array.from(artistDetailPageState.selectedTracks);
+ if (trackIds.length === 0) return;
+
+ try {
+ const res = await fetch('/api/library/tracks/analyze-replaygain-batch', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ track_ids: trackIds }),
+ });
+ const data = await res.json();
+ if (!data.success) {
+ showToast(`ReplayGain: ${data.error}`, 'error');
+ return;
+ }
+ showToast(`ReplayGain analysis started for ${trackIds.length} tracks…`, 'info');
+ _pollBatchRgStatus();
+ } catch (err) {
+ showToast('Failed to start batch ReplayGain analysis', 'error');
+ }
+}
+
+function _pollBatchRgStatus() {
+ if (_rgBatchPollTimer) clearTimeout(_rgBatchPollTimer);
+
+ async function poll() {
+ try {
+ const res = await fetch('/api/library/tracks/analyze-replaygain-batch/status');
+ const state = await res.json();
+
+ if (state.status === 'running') {
+ const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
+ showToast(`ReplayGain: ${state.processed}/${state.total} (${pct}%) — ${state.current_track}`, 'info');
+ _rgBatchPollTimer = setTimeout(poll, 1000);
+ } else if (state.status === 'done') {
+ const msg = `ReplayGain done: ${state.analyzed} written, ${state.failed} failed`;
+ showToast(msg, state.failed > 0 ? 'warning' : 'success');
+ _rgBatchPollTimer = null;
+ }
+ } catch (err) {
+ console.error('ReplayGain batch poll failed:', err);
+ _rgBatchPollTimer = null;
+ }
+ }
+
+ _rgBatchPollTimer = setTimeout(poll, 800);
+}
+
+// ── Reorganize Album Files ──
+
+let _reorganizeAlbumId = null;
+let _reorganizePollTimer = null;
+
+async function showReorganizeModal(albumId) {
+ _reorganizeAlbumId = albumId;
+ const overlay = document.getElementById('reorganize-overlay');
+ const body = document.getElementById('reorganize-modal-body');
+ const title = document.getElementById('reorganize-modal-title');
+ const applyBtn = document.getElementById('reorganize-apply-btn');
+ if (!overlay || !body) return;
+
+ // Find album data from enhanced view state
+ let albumData = null;
+ let artistName = '';
+ if (artistDetailPageState.enhancedData) {
+ artistName = artistDetailPageState.enhancedData.artist.name || '';
+ const allAlbums = artistDetailPageState.enhancedData.albums || [];
+ albumData = allAlbums.find(a => String(a.id) === String(albumId));
+ }
+
+ title.textContent = `Reorganize: ${albumData ? albumData.title : 'Album'}`;
+ if (applyBtn) {
+ applyBtn.disabled = true;
+ applyBtn.textContent = 'Apply';
+ applyBtn.onclick = () => executeReorganize();
+ }
+
+ // Build modal content
+ const variables = [
+ { var: '$artist', desc: 'Track artist', example: artistName || 'Artist' },
+ { var: '$albumartist', desc: 'Album artist', example: artistName || 'Album Artist' },
+ { var: '$artistletter', desc: 'First letter of artist', example: (artistName || 'A')[0].toUpperCase() },
+ { var: '$album', desc: 'Album title', example: albumData ? albumData.title : 'Album' },
+ { var: '$albumtype', desc: 'Album/EP/Single', example: 'Album' },
+ { var: '$title', desc: 'Track title', example: 'Track Name' },
+ { var: '$track', desc: 'Track number (zero-padded)', example: '01' },
+ { var: '$disc', desc: 'Disc number (filename only)', example: '01' },
+ { var: '$cdnum', desc: 'CD label — "CD01" on multi-disc, empty otherwise', example: 'CD01' },
+ { var: '$year', desc: 'Release year', example: albumData && albumData.year ? String(albumData.year) : '2024' },
+ { var: '$quality', desc: 'Audio quality (filename only)', example: 'FLAC 16bit/44kHz' },
+ ];
+
+ let html = '';
+
+ // Template input
+ html += '
';
+
+ // Preview area
+ html += '';
+ html += '';
+ html += '
Use
';
+ // Load saved template from settings, fall back to default
+ let savedTemplate = '$albumartist/$albumartist - $album/$track - $title';
+ try {
+ const settingsResp = await fetch('/api/settings');
+ if (settingsResp.ok) {
+ const settings = await settingsResp.json();
+ savedTemplate = settings.file_organization?.templates?.album_path || savedTemplate;
+ }
+ } catch (_) { }
+ html += ' {
+ html += `/ to separate folders. The last segment becomes the filename.`;
+ html += `
';
+ });
+ html += '${v.var}${v.desc}`;
+ html += '';
+ html += '
';
+
+ html += '';
+ html += '';
+ html += '';
+ html += '
';
+ html += '';
+ html += '
Click "Generate Preview" to see how files will be reorganized.
';
+ html += 'Loading preview...
';
+
+ try {
+ const response = await fetch(`/api/library/album/${_reorganizeAlbumId}/reorganize/preview`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ template })
+ });
+ const result = await response.json();
+ if (!result.success) {
+ previewBody.innerHTML = `${escapeHtml(result.error || 'Preview failed')}
`;
+ return;
+ }
+
+ const tracks = result.tracks || [];
+ if (tracks.length === 0) {
+ previewBody.innerHTML = 'No tracks found.
';
+ return;
+ }
+
+ let hasChanges = false;
+ let hasCollisions = false;
+ let html = '| # | Title | Current Path | New Path | '; + html += '|
|---|---|---|---|---|
| ${t.track_number || ''} | `; + html += `${escapeHtml(t.title)} | `; + html += `${noFile ? 'File not found' : escapeHtml(t.current_path)} | `; + html += `${collision ? '!!' : unchanged ? '=' : noFile ? '' : '→'} | `; + html += `${noFile ? '' : escapeHtml(t.new_path)}${collision ? ' (collision)' : ''} | `; + html += '
`;
+ if (changedCount > 0) summary += `${changedCount} will move`;
+ if (skippedCount > 0) summary += `${skippedCount} unchanged`;
+ if (missingCount > 0) summary += `${missingCount} missing`;
+ if (collisionCount > 0) summary += `${collisionCount} collision${collisionCount !== 1 ? 's' : ''} — add $track or $disc to fix`;
+ summary += '
';
+
+ previewBody.innerHTML = summary + html;
+
+ // Block apply if collisions exist
+ if (applyBtn) applyBtn.disabled = !hasChanges || hasCollisions;
+
+ } catch (error) {
+ previewBody.innerHTML = `Error: ${escapeHtml(error.message)}
`;
+ }
+}
+
+async function executeReorganize() {
+ const template = document.getElementById('reorganize-template-input')?.value?.trim();
+ if (!template || !_reorganizeAlbumId) return;
+
+ const applyBtn = document.getElementById('reorganize-apply-btn');
+ if (applyBtn) {
+ applyBtn.disabled = true;
+ applyBtn.textContent = 'Reorganizing...';
+ }
+
+ try {
+ const response = await fetch(`/api/library/album/${_reorganizeAlbumId}/reorganize`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ template })
+ });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error);
+
+ closeReorganizeModal();
+ showToast(`Reorganizing ${result.total} tracks...`, 'info');
+ _pollReorganizeStatus();
+
+ } catch (error) {
+ showToast(`Reorganize failed: ${error.message}`, 'error');
+ if (applyBtn) {
+ applyBtn.disabled = false;
+ applyBtn.textContent = 'Apply';
+ }
+ }
+}
+
+function _pollReorganizeStatus() {
+ if (_reorganizePollTimer) clearTimeout(_reorganizePollTimer);
+
+ async function poll() {
+ try {
+ const response = await fetch('/api/library/album/reorganize/status');
+ const state = await response.json();
+
+ if (state.status === 'running') {
+ const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
+ showToast(`Reorganizing: ${state.processed}/${state.total} (${pct}%) — ${state.current_track}`, 'info');
+ _reorganizePollTimer = setTimeout(poll, 800);
+ } else if (state.status === 'done') {
+ let msg = `Reorganized: ${state.moved} moved`;
+ if (state.skipped > 0) msg += `, ${state.skipped} skipped`;
+ if (state.failed > 0) msg += `, ${state.failed} failed`;
+ if (state.failed > 0 && state.errors && state.errors.length > 0) {
+ msg += ` (${state.errors[0].error})`;
+ }
+ showToast(msg, state.failed > 0 ? 'warning' : 'success');
+ _reorganizePollTimer = null;
+
+ // Refresh the enhanced view to show updated paths
+ if (artistDetailPageState.currentArtistId && artistDetailPageState.enhancedView) {
+ loadEnhancedViewData(artistDetailPageState.currentArtistId);
+ }
+ }
+ } catch (error) {
+ console.error('Poll reorganize status failed:', error);
+ _reorganizePollTimer = null;
+ }
+ }
+
+ _reorganizePollTimer = setTimeout(poll, 600);
+}
+
+// ── Reorganize All Albums for Artist ──
+
+let _reorganizeAllRunning = false;
+
+async function _showReorganizeAllModal() {
+ if (!artistDetailPageState.enhancedData) {
+ showToast('No album data loaded', 'error');
+ return;
+ }
+ const albums = artistDetailPageState.enhancedData.albums || [];
+ const artistName = artistDetailPageState.enhancedData.artist.name || 'Artist';
+
+ if (albums.length === 0) {
+ showToast('No albums to reorganize', 'error');
+ return;
+ }
+
+ const overlay = document.getElementById('reorganize-overlay');
+ const body = document.getElementById('reorganize-modal-body');
+ const title = document.getElementById('reorganize-modal-title');
+ const applyBtn = document.getElementById('reorganize-apply-btn');
+ if (!overlay || !body) return;
+
+ title.textContent = `Reorganize All Albums — ${artistName}`;
+
+ // Load saved template
+ let savedTemplate = '$albumartist/$albumartist - $album/$track - $title';
+ try {
+ const settingsResp = await fetch('/api/settings');
+ if (settingsResp.ok) {
+ const settings = await settingsResp.json();
+ savedTemplate = settings.file_organization?.templates?.album_path || savedTemplate;
+ }
+ } catch (_) { }
+
+ let html = '';
+
+ // Template input
+ html += '
';
+ body.innerHTML = html;
+
+ // Wire apply button for bulk mode
+ if (applyBtn) {
+ applyBtn.disabled = false;
+ applyBtn.textContent = 'Reorganize All';
+ applyBtn.onclick = () => _executeReorganizeAll();
+ }
+
+ overlay.classList.remove('hidden');
+}
+
+async function _executeReorganizeAll() {
+ if (_reorganizeAllRunning) return;
+
+ const templateInput = document.getElementById('reorganize-template-input');
+ const template = templateInput ? templateInput.value.trim() : '';
+ if (!template) {
+ showToast('Template cannot be empty', 'error');
+ return;
+ }
+
+ const albums = artistDetailPageState.enhancedData.albums || [];
+ const total = albums.length;
+ const artistName = artistDetailPageState.enhancedData.artist?.name || 'this artist';
+
+ const confirmed = await showConfirmDialog({
+ title: 'Reorganize All Albums',
+ message: `This will reorganize ${total} album${total !== 1 ? 's' : ''} for ${artistName} using the template:\n\n${template}\n\nFiles will be moved and renamed. This cannot be undone.`,
+ confirmText: 'Reorganize All',
+ destructive: false,
+ });
+ if (!confirmed) return;
+
+ _reorganizeAllRunning = true;
+ const applyBtn = document.getElementById('reorganize-apply-btn');
+ if (applyBtn) { applyBtn.disabled = true; applyBtn.textContent = 'Working...'; }
+
+ // Close modal
+ const overlay = document.getElementById('reorganize-overlay');
+ if (overlay) overlay.classList.add('hidden');
+
+ let succeeded = 0, failed = 0;
+
+ for (let i = 0; i < total; i++) {
+ const album = albums[i];
+ showToast(`Reorganizing album ${i + 1}/${total}: ${album.title}`, 'info');
+
+ try {
+ const resp = await fetch(`/api/library/album/${album.id}/reorganize`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ template }),
+ });
+ const result = await resp.json();
+ if (!result.success) {
+ showToast(`Failed: ${album.title} — ${result.error || 'unknown error'}`, 'error');
+ failed++;
+ continue;
+ }
+
+ // Wait for this album to finish
+ await _waitForReorganizeComplete();
+ succeeded++;
+ } catch (err) {
+ showToast(`Error: ${album.title} — ${err.message}`, 'error');
+ failed++;
+ }
+ }
+
+ let msg = `Reorganized ${succeeded} of ${total} album${total !== 1 ? 's' : ''}`;
+ if (failed > 0) msg += ` (${failed} failed)`;
+ showToast(msg, failed > 0 ? 'warning' : 'success');
+
+ _reorganizeAllRunning = false;
+ if (applyBtn) { applyBtn.disabled = false; applyBtn.textContent = 'Reorganize All'; }
+
+ // Refresh enhanced view
+ if (artistDetailPageState.currentArtistId && artistDetailPageState.enhancedView) {
+ loadEnhancedViewData(artistDetailPageState.currentArtistId);
+ }
+}
+
+function _waitForReorganizeComplete() {
+ return new Promise(resolve => {
+ const poll = setInterval(async () => {
+ try {
+ const resp = await fetch('/api/library/album/reorganize/status');
+ const state = await resp.json();
+ if (state.status === 'done' || state.status === 'idle') {
+ clearInterval(poll);
+ resolve();
+ }
+ } catch {
+ clearInterval(poll);
+ resolve();
+ }
+ }, 800);
+ });
+}
+
+async function playLibraryTrack(track, albumTitle, artistName) {
+ if (!track.file_path) {
+ showToast('No file available for this track', 'error');
+ return;
+ }
+
+ try {
+ // Stop any current playback first
+ if (audioPlayer && !audioPlayer.paused) {
+ audioPlayer.pause();
+ }
+
+ // Get album art from enhanced data if available
+ let albumArt = null;
+ if (artistDetailPageState.enhancedData) {
+ const albums = artistDetailPageState.enhancedData.albums || [];
+ for (const a of albums) {
+ if ((a.tracks || []).some(t => t.id === track.id)) {
+ albumArt = a.thumb_url;
+ break;
+ }
+ }
+ if (!albumArt) albumArt = artistDetailPageState.enhancedData.artist?.thumb_url;
+ }
+ if (!albumArt && track._stats_image) albumArt = track._stats_image;
+
+ // Set track info in the media player UI
+ setTrackInfo({
+ title: track.title || 'Unknown Track',
+ artist: artistName || 'Unknown Artist',
+ album: albumTitle || 'Unknown Album',
+ filename: track.file_path,
+ is_library: true,
+ image_url: albumArt,
+ id: track.id,
+ artist_id: track.artist_id,
+ album_id: track.album_id,
+ bitrate: track.bitrate,
+ sample_rate: track.sample_rate
+ });
+
+ // Show loading state
+ showLoadingAnimation();
+ const loadingText = document.querySelector('.loading-text');
+ if (loadingText) {
+ loadingText.textContent = 'Loading library track...';
+ }
+
+ // POST to library play endpoint
+ const response = await fetch('/api/library/play', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ file_path: track.file_path,
+ title: track.title || '',
+ artist: artistName || '',
+ album: albumTitle || ''
+ })
+ });
+
+ const result = await response.json();
+ if (!result.success) {
+ // File not on disk — fall back to streaming from configured source
+ console.warn('Library file not found, falling back to stream source');
+ hideLoadingAnimation();
+ const streamRes = await fetch('/api/enhanced-search/stream-track', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ track_name: track.title || '',
+ artist_name: artistName || '',
+ album_name: albumTitle || '',
+ })
+ });
+ const streamData = await streamRes.json();
+ if (streamData.success && streamData.result) {
+ streamData.result.artist = artistName;
+ streamData.result.title = track.title;
+ streamData.result.album = albumTitle;
+ streamData.result.image_url = track._stats_image || null;
+ startStream(streamData.result);
+ return;
+ }
+ throw new Error(result.error || 'Failed to start library playback');
+ }
+
+ // Re-apply repeat-one loop property
+ if (audioPlayer) audioPlayer.loop = (npRepeatMode === 'one');
+ // Stream state is already "ready" — start audio playback directly
+ await startAudioPlayback();
+
+ } catch (error) {
+ console.error('Library playback error:', error);
+ showToast(`Playback error: ${error.message}`, 'error');
+ hideLoadingAnimation();
+ clearTrack();
+ }
+}
+
+// ==================== End Enhanced Library Management View ====================
+
+// UI state management functions
+function showArtistDetailLoading(show) {
+ const loadingElement = document.getElementById("artist-detail-loading");
+ if (loadingElement) {
+ if (show) {
+ loadingElement.classList.remove("hidden");
+ } else {
+ loadingElement.classList.add("hidden");
+ }
+ }
+}
+
+function showArtistDetailError(show, message = "") {
+ const errorElement = document.getElementById("artist-detail-error");
+ const errorMessageElement = document.getElementById("artist-detail-error-message");
+
+ if (errorElement) {
+ if (show) {
+ errorElement.classList.remove("hidden");
+ if (errorMessageElement && message) {
+ errorMessageElement.textContent = message;
+ }
+ } else {
+ errorElement.classList.add("hidden");
+ }
+ }
+}
+
+function showArtistDetailMain(show) {
+ const mainElement = document.getElementById("artist-detail-main");
+ if (mainElement) {
+ if (show) {
+ mainElement.classList.remove("hidden");
+ } else {
+ mainElement.classList.add("hidden");
+ }
+ }
+}
+
+function showArtistDetailHero(show) {
+ const heroElement = document.getElementById("artist-hero-section");
+ if (heroElement) {
+ if (show) {
+ heroElement.classList.remove("hidden");
+ } else {
+ heroElement.classList.add("hidden");
+ }
+ }
+}
+
+/**
+ * Initialize the library page watchlist button
+ */
+async function initializeLibraryWatchlistButton(artistId, artistName) {
+ const button = document.getElementById('library-artist-watchlist-btn');
+ if (!button) return;
+
+ console.log(`🔧 Initializing library watchlist button for: ${artistName} (${artistId})`);
+
+ // Reset button state
+ button.disabled = false;
+ button.classList.remove('watching');
+
+ // Set up click handler
+ button.onclick = (e) => toggleLibraryWatchlist(e, artistId, artistName);
+
+ // Check and update current status
+ await updateLibraryWatchlistButtonStatus(artistId);
+}
+
+/**
+ * Toggle watchlist status for library page
+ */
+async function toggleLibraryWatchlist(event, artistId, artistName) {
+ event.preventDefault();
+
+ const button = document.getElementById('library-artist-watchlist-btn');
+ const icon = button.querySelector('.watchlist-icon');
+ const text = button.querySelector('.watchlist-text');
+
+ // Show loading state
+ const originalText = text.textContent;
+ text.textContent = 'Loading...';
+ button.disabled = true;
+
+ try {
+ // Check current status
+ const checkResponse = await fetch('/api/watchlist/check', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: artistId })
+ });
+
+ const checkData = await checkResponse.json();
+ if (!checkData.success) {
+ throw new Error(checkData.error || 'Failed to check watchlist status');
+ }
+
+ const isWatching = checkData.is_watching;
+
+ // Toggle watchlist status
+ const endpoint = isWatching ? '/api/watchlist/remove' : '/api/watchlist/add';
+ const payload = isWatching ?
+ { artist_id: artistId } :
+ { artist_id: artistId, artist_name: artistName };
+
+ const response = await fetch(endpoint, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload)
+ });
+
+ const data = await response.json();
+
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to update watchlist');
+ }
+
+ // Update button state based on new status
+ if (isWatching) {
+ // Was watching, now removed
+ icon.textContent = '👁️';
+ text.textContent = 'Add to Watchlist';
+ button.classList.remove('watching');
+ console.log(`❌ Removed ${artistName} from watchlist`);
+ } else {
+ // Was not watching, now added
+ icon.textContent = '👁️';
+ text.textContent = 'Watching...';
+ button.classList.add('watching');
+ console.log(`✅ Added ${artistName} to watchlist`);
+ }
+
+ // Update dashboard watchlist count if function exists
+ if (typeof updateWatchlistCount === 'function') {
+ updateWatchlistCount();
+ }
+
+ showToast(data.message, 'success');
+
+ } catch (error) {
+ console.error('Error toggling library watchlist:', error);
+
+ // Restore button state
+ text.textContent = originalText;
+ showToast(`Error: ${error.message}`, 'error');
+
+ } finally {
+ button.disabled = false;
+ }
+}
+
+/**
+ * Update library watchlist button status based on current state
+ */
+async function updateLibraryWatchlistButtonStatus(artistId) {
+ const button = document.getElementById('library-artist-watchlist-btn');
+ if (!button) return;
+
+ try {
+ const response = await fetch('/api/watchlist/check', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ artist_id: artistId })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ const icon = button.querySelector('.watchlist-icon');
+ const text = button.querySelector('.watchlist-text');
+
+ if (data.is_watching) {
+ icon.textContent = '👁️';
+ text.textContent = 'Watching...';
+ button.classList.add('watching');
+ } else {
+ icon.textContent = '👁️';
+ text.textContent = 'Add to Watchlist';
+ button.classList.remove('watching');
+ }
+ }
+ } catch (error) {
+ console.warn('Failed to check library watchlist status:', error);
+ }
+}
+
+// =================================
+
diff --git a/webui/static/media-player.js b/webui/static/media-player.js
new file mode 100644
index 00000000..85f25796
--- /dev/null
+++ b/webui/static/media-player.js
@@ -0,0 +1,2399 @@
+// MEDIA PLAYER FUNCTIONALITY
+// ===============================
+
+function initializeMediaPlayer() {
+ const trackTitle = document.getElementById('track-title');
+ const playButton = document.getElementById('play-button');
+ const stopButton = document.getElementById('stop-button');
+ const volumeSlider = document.getElementById('volume-slider');
+
+ // Start in idle state (no track playing)
+ const player = document.getElementById('media-player');
+ if (player && !currentTrack) player.classList.add('idle');
+
+ // Initialize HTML5 audio player
+ audioPlayer = document.getElementById('audio-player');
+ if (audioPlayer) {
+ // Set up audio event listeners
+ audioPlayer.addEventListener('timeupdate', updateAudioProgress);
+ audioPlayer.addEventListener('ended', onAudioEnded);
+ audioPlayer.addEventListener('error', onAudioError);
+ audioPlayer.addEventListener('loadstart', onAudioLoadStart);
+ audioPlayer.addEventListener('canplay', onAudioCanPlay);
+
+ // Set initial volume
+ audioPlayer.volume = 0.7; // 70%
+ if (volumeSlider) volumeSlider.value = 70;
+ }
+
+ // Track title click handled by initExpandedPlayer's media-player click handler
+
+ // Media controls
+ playButton.addEventListener('click', handlePlayPause);
+ stopButton.addEventListener('click', handleStop);
+ if (volumeSlider) volumeSlider.addEventListener('input', handleVolumeChange);
+
+ // Progress bar controls
+ const progressBar = document.getElementById('progress-bar');
+ if (progressBar) {
+ // Handle seeking
+ progressBar.addEventListener('input', handleProgressBarChange);
+ progressBar.addEventListener('mousedown', () => {
+ progressBar.dataset.seeking = 'true';
+ });
+ progressBar.addEventListener('mouseup', () => {
+ delete progressBar.dataset.seeking;
+ });
+ }
+
+ // Update volume slider styling
+ if (volumeSlider) volumeSlider.addEventListener('input', updateVolumeSliderAppearance);
+
+ // Mini player prev / next buttons
+ const miniPrevBtn = document.getElementById('mini-prev-btn');
+ const miniNextBtn = document.getElementById('mini-next-btn');
+ if (miniPrevBtn) miniPrevBtn.addEventListener('click', (e) => { e.stopPropagation(); playPreviousInQueue(); });
+ if (miniNextBtn) miniNextBtn.addEventListener('click', (e) => { e.stopPropagation(); playNextInQueue(); });
+}
+
+function toggleMediaPlayerExpansion() {
+ // No-op: controls are always visible in the new layout.
+ // Kept for backward compatibility with any callers.
+}
+
+function extractTrackTitle(filename) {
+ if (!filename) return null;
+
+ // Remove file extension
+ let title = filename.replace(/\.[^/.]+$/, '');
+
+ // Remove path components, keep only the filename
+ title = title.split('/').pop().split('\\').pop();
+
+ // Clean up common filename patterns
+ title = title
+ .replace(/^\d+\.?\s*/, '') // Remove track numbers at start
+ .replace(/^\d+\s*-\s*/, '') // Remove "01 - " patterns
+ .replace(/\s*-\s*\d{4}\s*$/, '') // Remove years at end
+ .replace(/\s*\[\d+kbps\].*$/, '') // Remove bitrate info
+ .replace(/\s*\(.*?\)\s*$/, '') // Remove parenthetical info at end
+ .trim();
+
+ return title || null;
+}
+
+function setTrackInfo(track) {
+ currentTrack = track;
+
+ const trackTitleElement = document.getElementById('track-title');
+ const trackTitle = track.title || 'Unknown Track';
+
+ // Set up the HTML structure for scrolling
+ trackTitleElement.innerHTML = `${escapeHtml(trackTitle)}`;
+
+ document.getElementById('artist-name').textContent = track.artist || 'Unknown Artist';
+ document.getElementById('album-name').textContent = track.album || 'Unknown Album';
+
+ // Check if title needs scrolling (similar to GUI app)
+ setTimeout(() => {
+ checkAndEnableScrolling(trackTitleElement, trackTitle);
+ }, 100); // Allow DOM to settle
+
+ // Enable controls
+ document.getElementById('play-button').disabled = false;
+ document.getElementById('stop-button').disabled = false;
+
+ // Hide no track message and expand player
+ document.getElementById('no-track-message').classList.add('hidden');
+ document.getElementById('media-player').classList.remove('idle');
+
+ // Sync expanded player and media session
+ updateNpTrackInfo();
+ updateMediaSessionMetadata();
+ updateMediaSessionPlaybackState();
+}
+
+function checkAndEnableScrolling(element, text) {
+ // Remove any existing scrolling class and reset styles
+ element.classList.remove('scrolling');
+ element.style.removeProperty('--scroll-distance');
+
+ // Force a layout to get accurate measurements
+ element.offsetWidth;
+
+ // Get the inner text element
+ const titleTextElement = element.querySelector('.title-text');
+ if (!titleTextElement) return;
+
+ // Check if text is wider than container
+ const containerWidth = element.offsetWidth;
+ const textWidth = titleTextElement.scrollWidth;
+
+ // Enable scrolling if text is significantly wider than container
+ if (textWidth > containerWidth + 15) {
+ const scrollDistance = containerWidth - textWidth;
+ element.style.setProperty('--scroll-distance', `${scrollDistance}px`);
+ element.classList.add('scrolling');
+ console.log(`📜 Enabled scrolling for title: "${text}"`);
+ console.log(`📜 Container: ${containerWidth}px, Text: ${textWidth}px, Scroll: ${scrollDistance}px`);
+ }
+}
+
+
+function clearTrack() {
+ // Clear track state
+ currentTrack = null;
+ isPlaying = false;
+
+ const trackTitleElement = document.getElementById('track-title');
+ trackTitleElement.innerHTML = 'No track';
+ trackTitleElement.classList.remove('scrolling'); // Remove scrolling animation
+ trackTitleElement.style.removeProperty('--scroll-distance'); // Clear CSS variable
+
+ document.getElementById('artist-name').textContent = 'Unknown Artist';
+ document.getElementById('album-name').textContent = 'Unknown Album';
+ // Reset play button SVGs (don't use textContent — it destroys SVG children)
+ const clearPlayBtn = document.getElementById('play-button');
+ const clearPlayIcon = clearPlayBtn.querySelector('.play-icon');
+ const clearPauseIcon = clearPlayBtn.querySelector('.pause-icon');
+ if (clearPlayIcon) clearPlayIcon.style.display = '';
+ if (clearPauseIcon) clearPauseIcon.style.display = 'none';
+ clearPlayBtn.disabled = true;
+ document.getElementById('stop-button').disabled = true;
+
+ // Reset progress bar and time displays
+ const progressBar = document.getElementById('progress-bar');
+ const progressFill = document.getElementById('progress-fill');
+ if (progressBar) {
+ progressBar.value = 0;
+ delete progressBar.dataset.seeking;
+ }
+ if (progressFill) {
+ progressFill.style.width = '0%';
+ }
+
+ const currentTimeElement = document.getElementById('current-time');
+ const totalTimeElement = document.getElementById('total-time');
+ if (currentTimeElement) currentTimeElement.textContent = '0:00';
+ if (totalTimeElement) totalTimeElement.textContent = '0:00';
+
+ // Hide loading animation
+ hideLoadingAnimation();
+
+ // Show no track message and collapse player
+ document.getElementById('no-track-message').classList.remove('hidden');
+ document.getElementById('media-player').classList.add('idle');
+
+ // Reset queue state
+ npQueue = [];
+ npQueueIndex = -1;
+
+ // Sync expanded player and media session
+ updateNpTrackInfo();
+ updateNpPlayButton();
+ updateNpProgress();
+ renderNpQueue();
+ updateNpPrevNextButtons();
+ updateMediaSessionPlaybackState();
+ stopSidebarVisualizer();
+ if (npModalOpen) closeNowPlayingModal();
+
+ console.log('🧹 Track cleared and media player reset');
+}
+
+function setPlayingState(playing) {
+ isPlaying = playing;
+ const playButton = document.getElementById('play-button');
+ // Toggle SVG icons (don't use textContent — it destroys SVG children)
+ const playIcon = playButton.querySelector('.play-icon');
+ const pauseIcon = playButton.querySelector('.pause-icon');
+ if (playIcon) playIcon.style.display = playing ? 'none' : '';
+ if (pauseIcon) pauseIcon.style.display = playing ? '' : 'none';
+ updateNpPlayButton();
+ updateMediaSessionPlaybackState();
+
+ // Sidebar audio visualizer
+ if (playing) {
+ npInitVisualizer();
+ startSidebarVisualizer();
+ } else {
+ stopSidebarVisualizer();
+ }
+}
+
+async function handlePlayPause() {
+ // Use new streaming system toggle function
+ togglePlayback();
+}
+
+async function handleStop() {
+ // Use new streaming system stop function
+ await stopStream();
+ clearTrack();
+}
+
+function handleVolumeChange(event) {
+ const volume = event.target.value;
+ updateVolumeSliderAppearance();
+
+ // Update HTML5 audio player volume
+ if (audioPlayer) {
+ audioPlayer.volume = volume / 100;
+ }
+
+ // Sync modal volume and clear mute state
+ npMuted = false;
+ const npVol = document.getElementById('np-volume-slider');
+ const npFill = document.getElementById('np-volume-fill');
+ if (npVol) npVol.value = volume;
+ if (npFill) npFill.style.width = volume + '%';
+ updateNpMuteIcon();
+}
+
+function handleProgressBarChange(event) {
+ // Handle seeking in the audio track
+ if (!audioPlayer || !audioPlayer.duration) return;
+
+ const progress = parseFloat(event.target.value);
+ const newTime = (progress / 100) * audioPlayer.duration;
+
+ console.log(`🎯 Seeking to ${formatTime(newTime)} (${progress.toFixed(1)}%)`);
+
+ try {
+ audioPlayer.currentTime = newTime;
+
+ // Update visual progress immediately
+ const progressFill = document.getElementById('progress-fill');
+ if (progressFill) {
+ progressFill.style.width = `${progress}%`;
+ }
+
+ // Update time displays immediately
+ const currentTimeElement = document.getElementById('current-time');
+ if (currentTimeElement) {
+ currentTimeElement.textContent = formatTime(newTime);
+ }
+
+ // Sync modal progress
+ const npBar = document.getElementById('np-progress-bar');
+ const npFill = document.getElementById('np-progress-fill');
+ const npTime = document.getElementById('np-current-time');
+ if (npBar) npBar.value = progress;
+ if (npFill) npFill.style.width = progress + '%';
+ if (npTime) npTime.textContent = formatTime(newTime);
+ } catch (error) {
+ console.warn('⚠️ Seek failed:', error.message);
+ // Reset progress bar to current position
+ const actualProgress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+ event.target.value = actualProgress;
+ const progressFill = document.getElementById('progress-fill');
+ if (progressFill) {
+ progressFill.style.width = `${actualProgress}%`;
+ }
+ }
+}
+
+function updateVolumeSliderAppearance() {
+ const slider = document.getElementById('volume-slider');
+ if (!slider) return;
+ const value = slider.value;
+ slider.style.setProperty('--volume-percent', `${value}%`);
+}
+
+function showLoadingAnimation() {
+ document.getElementById('loading-animation').classList.remove('hidden');
+}
+
+function hideLoadingAnimation() {
+ document.getElementById('loading-animation').classList.add('hidden');
+}
+
+function setLoadingProgress(percentage) {
+ const loadingAnimation = document.getElementById('loading-animation');
+ const progressBar = loadingAnimation.querySelector('.loading-progress');
+ const loadingText = loadingAnimation.querySelector('.loading-text');
+
+ loadingAnimation.classList.remove('hidden');
+ progressBar.style.width = `${percentage}%`;
+ loadingText.textContent = `${Math.round(percentage)}%`;
+}
+
+// ===============================
+// STREAMING FUNCTIONALITY
+// ===============================
+
+let _streamLock = false;
+
+async function startStream(searchResult) {
+ // Start streaming a track - handles same track toggle and new track streaming
+ try {
+ // Prevent multiple concurrent stream starts (rapid clicking)
+ if (_streamLock) {
+ console.log('⏳ Stream already starting, ignoring duplicate click');
+ return;
+ }
+
+ console.log(`🎮 startStream() called with data:`, searchResult);
+
+ // Check if this is the same track that's currently playing/loading
+ const currentTrackId = currentTrack ? `${currentTrack.username}:${currentTrack.filename}` : null;
+ const newTrackId = `${searchResult.username}:${searchResult.filename}`;
+
+ console.log(`🎮 startStream() called for: ${searchResult.filename}`);
+ console.log(`🎮 Current track ID: ${currentTrackId}`);
+ console.log(`🎮 New track ID: ${newTrackId}`);
+
+ if (currentTrackId === newTrackId && audioPlayer && !audioPlayer.paused) {
+ // Same track clicked while playing - toggle pause
+ console.log("🔄 Toggling playback for same track");
+ togglePlayback();
+ return;
+ }
+
+ // Lock to prevent duplicate stream starts
+ _streamLock = true;
+
+ // Different track or no current track - start new stream
+ console.log("🎵 Starting new stream");
+
+ // Stop current streaming/playback if any
+ await stopStream();
+
+ // Set track info and show loading state
+ setTrackInfo({
+ title: extractTrackTitle(searchResult.filename) || searchResult.title || 'Unknown Track',
+ artist: searchResult.artist || searchResult.username || 'Unknown Artist',
+ album: searchResult.album || 'Unknown Album',
+ username: searchResult.username,
+ filename: searchResult.filename,
+ image_url: searchResult.image_url || searchResult.album_cover_url || null
+ });
+
+ showLoadingAnimation();
+ setLoadingProgress(0);
+
+ // Start streaming request
+ const response = await fetch(API.stream.start, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(searchResult)
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to start streaming');
+ }
+
+ console.log("✅ Stream started successfully");
+
+ // Start status polling
+ startStreamStatusPolling();
+
+ } catch (error) {
+ console.error('Error starting stream:', error);
+ showToast(`Failed to start stream: ${error.message}`, 'error');
+ hideLoadingAnimation();
+ clearTrack();
+ } finally {
+ _streamLock = false;
+ }
+}
+
+function startStreamStatusPolling() {
+ // Start polling for stream status updates with retry logic
+ if (streamStatusPoller) {
+ clearInterval(streamStatusPoller);
+ }
+
+ // Reset polling state
+ streamPollingRetries = 0;
+ streamPollingInterval = 1000; // Reset to 1-second interval
+
+ console.log('🔄 Starting enhanced stream status polling');
+ updateStreamStatus(); // Initial check
+ streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
+}
+
+function stopStreamStatusPolling() {
+ // Stop polling for stream status updates
+ if (streamStatusPoller) {
+ clearInterval(streamStatusPoller);
+ streamStatusPoller = null;
+ streamPollingRetries = 0;
+ streamPollingInterval = 1000; // Reset interval
+ console.log('⏹️ Stopped stream status polling');
+ }
+}
+
+// Phase 4: Track last known tool statuses to prevent repeated toasts on terminal states
+let _lastToolStatus = {};
+
+// Phase 5: Sync/Discovery/Scan WebSocket router functions
+function updateSyncProgressFromData(data) {
+ const pid = data.playlist_id;
+ const callback = _syncProgressCallbacks[pid];
+ if (callback) callback(data);
+}
+
+function updateDiscoveryProgressFromData(data) {
+ const id = data.id;
+ const callback = _discoveryProgressCallbacks[id];
+ if (callback) callback(data);
+}
+
+function updateWatchlistScanFromData(data) {
+ if (!data.success) return;
+ if (_lastWatchlistScanStatus === data.status && data.status !== 'scanning') return;
+ _lastWatchlistScanStatus = data.status;
+ handleWatchlistScanData(data);
+}
+
+function updateMediaScanFromData(data) {
+ if (!data.success || !data.status) return;
+ const status = data.status;
+ const statusKey = status.is_scanning ? 'scanning' : (status.status || 'unknown');
+ if (_lastMediaScanStatus === statusKey && statusKey !== 'scanning') return;
+ _lastMediaScanStatus = statusKey;
+
+ const phaseLabel = document.getElementById('media-scan-phase-label');
+ const progressLabel = document.getElementById('media-scan-progress-label');
+ const button = document.getElementById('media-scan-btn');
+ const progressBar = document.getElementById('media-scan-progress-bar');
+ const statusValue = document.getElementById('media-scan-status');
+
+ if (status.is_scanning) {
+ if (phaseLabel) phaseLabel.textContent = 'Media server scanning...';
+ if (progressLabel) progressLabel.textContent = status.progress_message || 'Scan in progress';
+ } else if (status.status === 'idle') {
+ if (button) button.disabled = false;
+ if (phaseLabel) phaseLabel.textContent = 'Scan completed successfully';
+ if (progressBar) progressBar.style.width = '0%';
+ if (progressLabel) progressLabel.textContent = 'Ready for next scan';
+ if (statusValue) {
+ statusValue.textContent = 'Idle';
+ statusValue.style.color = '#b3b3b3';
+ }
+ showToast('✅ Media scan completed', 'success', 3000);
+ }
+}
+
+let _wishlistAutoProcessingNotified = false;
+function updateWishlistStatsFromData(data) {
+ // Auto-processing detection: close modal and notify (once only)
+ if (data.is_auto_processing) {
+ if (!_wishlistAutoProcessingNotified) {
+ if (currentPage === 'wishlist') navigateToPage('active-downloads');
+ showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
+ _wishlistAutoProcessingNotified = true;
+ }
+ return;
+ }
+ // Reset flag when auto-processing ends
+ _wishlistAutoProcessingNotified = false;
+ // Store latest stats for countdown timer refresh
+ _lastWishlistStats = data;
+}
+
+async function updateStreamStatus() {
+ if (socketConnected) return; // WebSocket handles this
+ // Poll server for streaming progress and handle state changes with enhanced error recovery
+ try {
+ const controller = new AbortController();
+ const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout
+
+ const response = await fetch(API.stream.status, {
+ signal: controller.signal
+ });
+
+ clearTimeout(timeoutId);
+
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+
+ // Reset retry count on successful response
+ streamPollingRetries = 0;
+ streamPollingInterval = 1000; // Reset to normal interval
+
+ // Update current stream state
+ currentStream.status = data.status;
+ currentStream.progress = data.progress;
+
+ switch (data.status) {
+ case 'loading':
+ setLoadingProgress(data.progress);
+ // Update loading text with progress
+ const loadingText = document.querySelector('.loading-text');
+ if (loadingText && data.progress > 0) {
+ loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
+ }
+ break;
+
+ case 'queued':
+ // Show queue status with better messaging
+ const queueText = document.querySelector('.loading-text');
+ if (queueText) {
+ queueText.textContent = 'Queuing with uploader...';
+ }
+ setLoadingProgress(0); // Reset progress for queue state
+ break;
+
+ case 'ready':
+ // Stream is ready - start audio playback
+ console.log('🎵 Stream ready, starting audio playback');
+ stopStreamStatusPolling();
+ // Restore player UI if JS state was wiped (e.g. page refresh)
+ if (!currentTrack && data.track_info) {
+ const ti = data.track_info;
+ setTrackInfo({
+ title: ti.name || ti.title || 'Unknown Track',
+ artist: ti.artist || 'Unknown Artist',
+ album: ti.album || 'Unknown Album',
+ filename: ti.filename || '',
+ is_library: !!ti.is_library,
+ image_url: ti.image_url || null,
+ id: ti.id || null,
+ artist_id: ti.artist_id || null,
+ album_id: ti.album_id || null,
+ });
+ }
+ await startAudioPlayback();
+ break;
+
+ case 'error':
+ console.error('❌ Streaming error:', data.error_message);
+ stopStreamStatusPolling();
+ hideLoadingAnimation();
+ showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
+ clearTrack();
+ break;
+
+ case 'stopped':
+ // Handle stopped state — do NOT clear track here; explicit stop (handleStop)
+ // calls clearTrack() directly. Clearing here collapses the player mid-playback
+ // when the backend transitions to 'stopped' after audio naturally ends or during
+ // queue track transitions.
+ console.log('🛑 Stream stopped');
+ stopStreamStatusPolling();
+ hideLoadingAnimation();
+ break;
+ }
+
+ } catch (error) {
+ streamPollingRetries++;
+ console.warn(`Stream status polling error (attempt ${streamPollingRetries}):`, error.message);
+
+ if (streamPollingRetries >= maxStreamPollingRetries) {
+ // Too many consecutive failures - give up
+ console.error('❌ Stream status polling failed after maximum retries');
+ stopStreamStatusPolling();
+ hideLoadingAnimation();
+ showToast('Lost connection to streaming server', 'error');
+ clearTrack();
+ } else {
+ // Implement exponential backoff for retries
+ const backoffMultiplier = Math.min(streamPollingRetries, 5); // Max 5x backoff
+ streamPollingInterval = 1000 * backoffMultiplier;
+
+ // Restart polling with new interval
+ if (streamStatusPoller) {
+ clearInterval(streamStatusPoller);
+ streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
+ console.log(`🔄 Retrying stream status polling with ${streamPollingInterval}ms interval`);
+ }
+ }
+ }
+}
+
+function updateStreamStatusFromData(data) {
+ const prev = _lastToolStatus['stream'];
+ _lastToolStatus['stream'] = data.status;
+ // Skip repeated terminal states to avoid duplicate toasts/actions
+ if (prev !== undefined && data.status === prev && data.status !== 'loading' && data.status !== 'queued') return;
+
+ currentStream.status = data.status;
+ currentStream.progress = data.progress;
+
+ switch (data.status) {
+ case 'loading':
+ setLoadingProgress(data.progress);
+ const loadingText = document.querySelector('.loading-text');
+ if (loadingText && data.progress > 0) {
+ loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
+ }
+ break;
+ case 'queued':
+ const queueText = document.querySelector('.loading-text');
+ if (queueText) {
+ queueText.textContent = 'Queuing with uploader...';
+ }
+ setLoadingProgress(0);
+ break;
+ case 'ready':
+ console.log('🎵 Stream ready, starting audio playback');
+ stopStreamStatusPolling();
+ // Restore player UI if JS state was wiped (e.g. page refresh)
+ if (!currentTrack && data.track_info) {
+ const ti = data.track_info;
+ setTrackInfo({
+ title: ti.name || ti.title || 'Unknown Track',
+ artist: ti.artist || 'Unknown Artist',
+ album: ti.album || 'Unknown Album',
+ filename: ti.filename || '',
+ is_library: !!ti.is_library,
+ image_url: ti.image_url || null,
+ id: ti.id || null,
+ artist_id: ti.artist_id || null,
+ album_id: ti.album_id || null,
+ });
+ }
+ startAudioPlayback();
+ break;
+ case 'error':
+ console.error('❌ Streaming error:', data.error_message);
+ stopStreamStatusPolling();
+ hideLoadingAnimation();
+ showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
+ clearTrack();
+ break;
+ case 'stopped':
+ // Do NOT clear track here — explicit stop (handleStop) calls clearTrack() directly.
+ // Clearing here collapses the player after audio naturally ends or during queue transitions.
+ console.log('🛑 Stream stopped');
+ stopStreamStatusPolling();
+ hideLoadingAnimation();
+ break;
+ }
+}
+
+async function startAudioPlayback() {
+ // Start HTML5 audio playback of the streamed file with enhanced state management
+ try {
+ if (!audioPlayer) {
+ throw new Error('Audio player not initialized');
+ }
+
+ // Show loading state while preparing audio
+ const loadingText = document.querySelector('.loading-text');
+ if (loadingText) {
+ loadingText.textContent = 'Preparing playback...';
+ }
+
+ // Set audio source with cache-busting timestamp
+ const audioUrl = `/stream/audio?t=${new Date().getTime()}`;
+ console.log(`🎵 Loading audio from: ${audioUrl}`);
+
+ // Clear any existing source first
+ audioPlayer.pause();
+ audioPlayer.currentTime = 0;
+ audioPlayer.src = '';
+
+ // Set new source
+ audioPlayer.src = audioUrl;
+ audioPlayer.load(); // Force reload
+
+ // Wait for audio to be ready with promise-based approach
+ await new Promise((resolve, reject) => {
+ const timeout = setTimeout(() => {
+ reject(new Error('Audio loading timeout'));
+ }, 15000); // 15-second timeout
+
+ const onCanPlay = () => {
+ clearTimeout(timeout);
+ audioPlayer.removeEventListener('canplay', onCanPlay);
+ audioPlayer.removeEventListener('error', onError);
+ resolve();
+ };
+
+ const onError = (event) => {
+ clearTimeout(timeout);
+ audioPlayer.removeEventListener('canplay', onCanPlay);
+ audioPlayer.removeEventListener('error', onError);
+ const error = event.target.error || new Error('Audio loading failed');
+ reject(error);
+ };
+
+ audioPlayer.addEventListener('canplay', onCanPlay);
+ audioPlayer.addEventListener('error', onError);
+
+ // If already ready, resolve immediately
+ if (audioPlayer.readyState >= 3) { // HAVE_FUTURE_DATA
+ onCanPlay();
+ }
+ });
+
+ console.log('✅ Audio loaded and ready for playback');
+
+ // Try to start playback with retry logic
+ let retryCount = 0;
+ const maxRetries = 3;
+
+ while (retryCount < maxRetries) {
+ try {
+ await audioPlayer.play();
+ console.log('✅ Audio playback started successfully');
+
+ // Update UI to playing state
+ hideLoadingAnimation();
+ setPlayingState(true);
+
+ // Show media player if hidden
+ const noTrackMessage = document.getElementById('no-track-message');
+ if (noTrackMessage) {
+ noTrackMessage.classList.add('hidden');
+ }
+
+ // Update volume to current slider value
+ const volumeSlider = document.getElementById('volume-slider');
+ if (volumeSlider) {
+ audioPlayer.volume = volumeSlider.value / 100;
+ }
+
+ // Enable play/stop buttons
+ const playButton = document.getElementById('play-button');
+ const stopButton = document.getElementById('stop-button');
+ if (playButton) playButton.disabled = false;
+ if (stopButton) stopButton.disabled = false;
+
+ return; // Success!
+
+ } catch (playError) {
+ retryCount++;
+ console.warn(`⚠️ Audio play attempt ${retryCount} failed:`, playError.message);
+
+ if (retryCount >= maxRetries) {
+ throw playError; // Re-throw after max retries
+ }
+
+ // Wait before retry with exponential backoff
+ await new Promise(resolve => setTimeout(resolve, 1000 * retryCount));
+ }
+ }
+
+ } catch (error) {
+ console.error('❌ Error starting audio playback:', error);
+ hideLoadingAnimation();
+
+ // Provide user-friendly error messages
+ let userMessage = 'Playback failed';
+
+ if (error.message.includes('no supported source') ||
+ error.message.includes('Not supported') ||
+ error.message.includes('MEDIA_ELEMENT_ERROR')) {
+ userMessage = 'Audio format not supported by your browser. Try downloading instead.';
+ } else if (error.message.includes('network') || error.message.includes('fetch')) {
+ userMessage = 'Network error - please check your connection';
+ } else if (error.message.includes('decode')) {
+ userMessage = 'Audio file is corrupted or incompatible';
+ } else if (error.message.includes('timeout')) {
+ userMessage = 'Audio loading timeout - file may be too large';
+ } else if (error.message.includes('AbortError')) {
+ userMessage = 'Playback was interrupted';
+ }
+
+ showToast(userMessage, 'error');
+ // Only clear track if not in queue playback mode — queue handles its own error recovery
+ if (npQueue.length === 0) {
+ clearTrack();
+ }
+ }
+}
+
+async function stopStream() {
+ // Stop streaming and clean up all state
+ try {
+ // Stop status polling
+ stopStreamStatusPolling();
+
+ // Stop audio playback
+ if (audioPlayer) {
+ audioPlayer.pause();
+ audioPlayer.src = '';
+ }
+
+ // Call backend stop endpoint
+ const response = await fetch(API.stream.stop, { method: 'POST' });
+ if (response.ok) {
+ const data = await response.json();
+ console.log('🛑 Stream stopped:', data.message);
+ }
+
+ // Reset UI state
+ hideLoadingAnimation();
+ setPlayingState(false);
+
+ // Reset stream state
+ currentStream = {
+ status: 'stopped',
+ progress: 0,
+ track: null
+ };
+
+ } catch (error) {
+ console.error('Error stopping stream:', error);
+ }
+}
+
+function togglePlayback() {
+ // Toggle play/pause for currently loaded audio
+ if (!audioPlayer || !currentTrack) {
+ console.log('⚠️ No audio player or track to toggle');
+ return;
+ }
+
+ if (audioPlayer.paused) {
+ audioPlayer.play()
+ .then(() => {
+ setPlayingState(true);
+ console.log('▶️ Resumed playback');
+ })
+ .catch(error => {
+ console.error('Error resuming playback:', error);
+ showToast('Failed to resume playback', 'error');
+ });
+ } else {
+ audioPlayer.pause();
+ setPlayingState(false);
+ console.log('⏸️ Paused playback');
+ }
+}
+
+// ===============================
+// AUDIO EVENT HANDLERS
+// ===============================
+
+function updateAudioProgress() {
+ // Update progress bar based on audio playback time
+ if (!audioPlayer || !audioPlayer.duration) return;
+
+ const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+
+ // Update progress bar
+ const progressBar = document.getElementById('progress-bar');
+ const progressFill = document.getElementById('progress-fill');
+ if (progressBar && !progressBar.dataset.seeking) {
+ progressBar.value = progress;
+ // Update visual progress fill
+ if (progressFill) {
+ progressFill.style.width = `${progress}%`;
+ }
+ }
+
+ // Update time display
+ const currentTimeElement = document.getElementById('current-time');
+ const totalTimeElement = document.getElementById('total-time');
+
+ if (currentTimeElement) {
+ currentTimeElement.textContent = formatTime(audioPlayer.currentTime);
+ }
+ if (totalTimeElement) {
+ totalTimeElement.textContent = formatTime(audioPlayer.duration);
+ }
+
+ // Sync expanded player modal
+ if (npModalOpen) updateNpProgress();
+}
+
+function onAudioEnded() {
+ // Handle audio playback completion
+ console.log('🏁 Audio playback ended');
+ setPlayingState(false);
+
+ // Reset progress to beginning
+ const progressBar = document.getElementById('progress-bar');
+ const progressFill = document.getElementById('progress-fill');
+ if (progressBar) {
+ progressBar.value = 0;
+ }
+ if (progressFill) {
+ progressFill.style.width = '0%';
+ }
+
+ const currentTimeElement = document.getElementById('current-time');
+ if (currentTimeElement) {
+ currentTimeElement.textContent = '0:00';
+ }
+
+ // Repeat-one is handled by audioPlayer.loop (set in handleNpRepeat)
+ // Auto-advance to next track if queue has a next item (guard against race conditions)
+ if (npQueue.length > 0 && !npLoadingQueueItem) {
+ const hasNext = npShuffleOn
+ ? npQueue.length > 1
+ : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all');
+ if (hasNext) { playNextInQueue(); return; }
+ }
+
+ // Radio mode: auto-fetch similar tracks when queue is exhausted
+ if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
+ npFetchRadioTracks();
+ }
+}
+
+function onAudioError(event) {
+ // Handle audio playback errors
+ const error = event.target.error;
+ console.error('❌ Audio error:', error);
+
+ // Don't show error toast if it's just a format/codec issue and retrying
+ if (error && error.code) {
+ console.error(`Audio error code: ${error.code}, message: ${error.message || 'Unknown error'}`);
+
+ // Only show user-facing errors for serious issues
+ if (error.code === 4) { // MEDIA_ELEMENT_ERROR: Media not supported
+ console.warn('⚠️ Media format not supported by browser, but streaming may still work');
+ // Don't clear track or show error - let retry logic handle it
+ return;
+ }
+ }
+
+ hideLoadingAnimation();
+
+ // Only clear track after a short delay to allow for recovery
+ setTimeout(() => {
+ if (audioPlayer && audioPlayer.error) {
+ let userMessage = 'Audio format not supported by your browser. Try downloading instead.';
+
+ if (error && error.code) {
+ switch (error.code) {
+ case 1: // MEDIA_ERR_ABORTED
+ userMessage = 'Playback was stopped';
+ break;
+ case 2: // MEDIA_ERR_NETWORK
+ userMessage = 'Network error - please try again';
+ break;
+ case 3: // MEDIA_ERR_DECODE
+ userMessage = 'Audio file is corrupted or incompatible';
+ break;
+ case 4: // MEDIA_ERR_SRC_NOT_SUPPORTED
+ userMessage = 'Audio format not supported by your browser. Try downloading instead.';
+ break;
+ }
+ }
+
+ showToast(userMessage, 'error');
+ // Only clear track if not in queue playback — queue handles its own recovery
+ if (npQueue.length === 0) {
+ clearTrack();
+ }
+ }
+ }, 2000);
+}
+
+function onAudioLoadStart() {
+ // Handle audio load start
+ console.log('🔄 Audio loading started');
+}
+
+function onAudioCanPlay() {
+ // Handle when audio can start playing
+ console.log('✅ Audio ready to play');
+}
+
+function formatTime(seconds) {
+ // Format seconds as MM:SS
+ if (!seconds || !isFinite(seconds)) return '0:00';
+
+ const minutes = Math.floor(seconds / 60);
+ const secs = Math.floor(seconds % 60);
+ return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
+
+function formatCountdownTime(seconds) {
+ // Format seconds as countdown timer (e.g., "24m 13s", "2h 15m", "23h 59m")
+ if (seconds === null || seconds === undefined || seconds < 0) return '';
+ if (seconds === 0) return '0s'; // Show "0s" instead of hiding timer
+
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ const secs = Math.floor(seconds % 60);
+
+ if (hours > 0) {
+ return `${hours}h ${minutes}m`;
+ } else if (minutes > 0) {
+ return `${minutes}m ${secs}s`;
+ } else {
+ return `${secs}s`;
+ }
+}
+
+// ===============================
+// AUDIO FORMAT SUPPORT DETECTION
+// ===============================
+
+function getFileExtension(filename) {
+ if (!filename) return '';
+ const ext = filename.toLowerCase().match(/\.([^.]+)$/);
+ return ext ? ext[1] : '';
+}
+
+function isAudioFormatSupported(filename) {
+ const ext = getFileExtension(filename);
+ const supportedFormats = ['mp3', 'ogg', 'wav']; // Most reliable formats
+ const partialSupport = ['flac', 'aac', 'm4a', 'opus', 'webm']; // Test browser support
+ const unsupported = ['wma', 'ape', 'aiff']; // Generally problematic
+
+ if (supportedFormats.includes(ext)) {
+ return true;
+ }
+
+ if (partialSupport.includes(ext)) {
+ // Test if browser can actually play this format
+ return canPlayAudioFormat(ext);
+ }
+
+ return false; // Unsupported formats
+}
+
+function canPlayAudioFormat(extension) {
+ const audio = document.createElement('audio');
+
+ const mimeTypes = {
+ 'mp3': 'audio/mpeg',
+ 'ogg': 'audio/ogg; codecs="vorbis"',
+ 'wav': 'audio/wav',
+ 'flac': 'audio/flac',
+ 'aac': 'audio/aac',
+ 'm4a': 'audio/mp4; codecs="mp4a.40.2"', // More specific M4A MIME type
+ 'opus': 'audio/ogg; codecs="opus"',
+ 'webm': 'audio/webm; codecs="opus"',
+ 'wma': 'audio/x-ms-wma'
+ };
+
+ const mimeType = mimeTypes[extension];
+ if (!mimeType) {
+ console.warn(`🎵 [FORMAT CHECK] No MIME type found for extension: ${extension}`);
+ return false;
+ }
+
+ const canPlay = audio.canPlayType(mimeType);
+ console.log(`🎵 [FORMAT CHECK] ${extension} (${mimeType}): ${canPlay}`);
+
+ let isSupported = canPlay === 'probably' || canPlay === 'maybe';
+
+ // Special handling for M4A - try fallback MIME types if first one fails
+ if (!isSupported && extension === 'm4a') {
+ const fallbackMimeTypes = ['audio/mp4', 'audio/x-m4a', 'audio/aac'];
+ console.log(`🎵 [FORMAT CHECK] M4A failed with primary MIME type, trying fallbacks...`);
+
+ for (const fallbackMime of fallbackMimeTypes) {
+ const fallbackResult = audio.canPlayType(fallbackMime);
+ console.log(`🎵 [FORMAT CHECK] M4A fallback (${fallbackMime}): ${fallbackResult}`);
+ if (fallbackResult === 'probably' || fallbackResult === 'maybe') {
+ isSupported = true;
+ console.log(`🎵 [FORMAT CHECK] M4A supported with fallback MIME type: ${fallbackMime}`);
+ break;
+ }
+ }
+ }
+
+ console.log(`🎵 [FORMAT CHECK] ${extension} final support result: ${isSupported}`);
+ return isSupported;
+}
+
+// ===============================
+// EXPANDED NOW PLAYING MODAL
+// ===============================
+
+let npModalOpen = false;
+let npRepeatMode = 'off'; // 'off' | 'all' | 'one'
+let npShuffleOn = false;
+let npQueue = [];
+let npQueueIndex = -1;
+let npMuted = false;
+let npPreMuteVolume = 70;
+let npMediaSessionThrottle = 0;
+let npLoadingQueueItem = false;
+let npRadioMode = false;
+let npRecentlyPlayedIds = [];
+let npAudioContext = null;
+let npAnalyser = null;
+let npMediaSource = null;
+let npVizAnimFrame = null;
+let npVizInitialized = false;
+
+function initExpandedPlayer() {
+ const closeBtn = document.getElementById('np-close-btn');
+ const overlay = document.getElementById('np-modal-overlay');
+ const playBtn = document.getElementById('np-play-btn');
+ const stopBtn = document.getElementById('np-stop-btn');
+ const shuffleBtn = document.getElementById('np-shuffle-btn');
+ const repeatBtn = document.getElementById('np-repeat-btn');
+ const muteBtn = document.getElementById('np-mute-btn');
+ const npProgressBar = document.getElementById('np-progress-bar');
+ const npVolumeSlider = document.getElementById('np-volume-slider');
+
+ if (!overlay) return;
+
+ // Close handlers
+ closeBtn.addEventListener('click', closeNowPlayingModal);
+ overlay.addEventListener('click', (e) => { if (e.target === overlay) closeNowPlayingModal(); });
+
+ // Control handlers
+ playBtn.addEventListener('click', () => { togglePlayback(); });
+ stopBtn.addEventListener('click', async () => { await handleStop(); closeNowPlayingModal(); });
+ shuffleBtn.addEventListener('click', handleNpShuffle);
+ repeatBtn.addEventListener('click', handleNpRepeat);
+ muteBtn.addEventListener('click', handleNpMuteToggle);
+
+ // Progress bar (mouse)
+ npProgressBar.addEventListener('input', handleNpProgressBarChange);
+ npProgressBar.addEventListener('mousedown', () => { npProgressBar.dataset.seeking = 'true'; });
+ npProgressBar.addEventListener('mouseup', () => { delete npProgressBar.dataset.seeking; });
+
+ // Progress bar (touch)
+ npProgressBar.addEventListener('touchstart', () => { npProgressBar.dataset.seeking = 'true'; }, { passive: true });
+ npProgressBar.addEventListener('touchmove', (e) => {
+ const touch = e.touches[0];
+ const rect = npProgressBar.getBoundingClientRect();
+ const pct = Math.max(0, Math.min(100, ((touch.clientX - rect.left) / rect.width) * 100));
+ npProgressBar.value = pct;
+ npProgressBar.dispatchEvent(new Event('input'));
+ }, { passive: true });
+ npProgressBar.addEventListener('touchend', () => { delete npProgressBar.dataset.seeking; }, { passive: true });
+
+ // Volume slider
+ npVolumeSlider.addEventListener('input', handleNpVolumeChange);
+
+ // Keyboard shortcuts (global)
+ document.addEventListener('keydown', handlePlayerKeyboardShortcuts);
+
+ // Make sidebar media player clickable to open modal
+ const mediaPlayer = document.getElementById('media-player');
+ if (mediaPlayer) {
+ mediaPlayer.style.cursor = 'pointer';
+ mediaPlayer.addEventListener('click', (e) => {
+ // Don't open modal when clicking controls (let expand-hint through)
+ if (e.target.closest('.play-button, .stop-button, .volume-slider, .volume-control, .progress-bar, .volume-icon, .mini-nav-btn') && !e.target.closest('.expand-hint')) return;
+ if (currentTrack) openNowPlayingModal();
+ });
+ }
+
+ // Prev / Next buttons
+ const prevBtn = document.getElementById('np-prev-btn');
+ const nextBtn = document.getElementById('np-next-btn');
+ if (prevBtn) prevBtn.addEventListener('click', () => { playPreviousInQueue(); });
+ if (nextBtn) nextBtn.addEventListener('click', () => { playNextInQueue(); });
+
+ // Queue panel toggle + clear
+ const queueToggle = document.getElementById('np-queue-toggle');
+ if (queueToggle) {
+ queueToggle.addEventListener('click', () => {
+ const body = document.getElementById('np-queue-body');
+ if (body) body.classList.toggle('hidden');
+ queueToggle.classList.toggle('active');
+ });
+ }
+ const queueClearBtn = document.getElementById('np-queue-clear');
+ if (queueClearBtn) queueClearBtn.addEventListener('click', () => { clearQueue(); });
+
+ // Radio mode button
+ const radioBtn = document.getElementById('np-radio-btn');
+ if (radioBtn) {
+ radioBtn.addEventListener('click', () => {
+ npRadioMode = !npRadioMode;
+ radioBtn.classList.toggle('active', npRadioMode);
+ showToast(npRadioMode ? 'Radio mode on — similar tracks will auto-queue' : 'Radio mode off', 'success');
+ // Immediately fetch radio tracks if turned on while playing with empty/exhausted queue
+ if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
+ const hasNext = npQueue.length > 0 && (npShuffleOn
+ ? npQueue.length > 1
+ : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
+ if (!hasNext) {
+ // Add current track to queue first so it appears as "now playing" in context
+ if (npQueue.length === 0 && currentTrack.is_library) {
+ npQueue.push({
+ title: currentTrack.title,
+ artist: currentTrack.artist,
+ album: currentTrack.album,
+ file_path: currentTrack.filename || currentTrack.file_path,
+ filename: currentTrack.filename || currentTrack.file_path,
+ is_library: true,
+ image_url: currentTrack.image_url,
+ id: currentTrack.id,
+ artist_id: currentTrack.artist_id,
+ album_id: currentTrack.album_id,
+ bitrate: currentTrack.bitrate
+ });
+ npQueueIndex = 0;
+ renderNpQueue();
+ updateNpPrevNextButtons();
+ }
+ npFetchRadioTracks();
+ }
+ }
+ });
+ }
+
+ // Action button (Go to Artist)
+ const gotoArtistBtn = document.getElementById('np-goto-artist');
+ if (gotoArtistBtn) {
+ gotoArtistBtn.addEventListener('click', () => {
+ if (currentTrack && currentTrack.artist_id) {
+ closeNowPlayingModal();
+ navigateToArtistDetail(currentTrack.artist_id, currentTrack.artist || '');
+ }
+ });
+ }
+ // Buffering state listeners on audioPlayer
+ if (audioPlayer) {
+ audioPlayer.addEventListener('waiting', () => {
+ const ring = document.getElementById('np-buffering-ring');
+ if (ring) ring.classList.remove('hidden');
+ });
+ audioPlayer.addEventListener('canplay', () => {
+ const ring = document.getElementById('np-buffering-ring');
+ if (ring) ring.classList.add('hidden');
+ });
+ audioPlayer.addEventListener('playing', () => {
+ const ring = document.getElementById('np-buffering-ring');
+ if (ring) ring.classList.add('hidden');
+ });
+ }
+
+ // Init Media Session API
+ initMediaSession();
+}
+
+function openNowPlayingModal() {
+ const overlay = document.getElementById('np-modal-overlay');
+ if (!overlay) return;
+ npModalOpen = true;
+ overlay.classList.remove('hidden');
+ document.body.style.overflow = 'hidden';
+ syncExpandedPlayerUI();
+ // Start visualizer if already playing
+ if (isPlaying) { npInitVisualizer(); npStartVisualizerLoop(); }
+}
+
+function closeNowPlayingModal() {
+ const overlay = document.getElementById('np-modal-overlay');
+ if (!overlay) return;
+ npModalOpen = false;
+ overlay.classList.add('hidden');
+ document.body.style.overflow = '';
+ npStopVisualizerLoop();
+}
+
+function syncExpandedPlayerUI() {
+ if (!npModalOpen) return;
+
+ // Track info
+ updateNpTrackInfo();
+
+ // Play state
+ updateNpPlayButton();
+
+ // Progress
+ updateNpProgress();
+
+ // Volume
+ const sidebarVol = document.getElementById('volume-slider');
+ const npVol = document.getElementById('np-volume-slider');
+ const npVolFill = document.getElementById('np-volume-fill');
+ if (sidebarVol && npVol) {
+ npVol.value = sidebarVol.value;
+ if (npVolFill) npVolFill.style.width = sidebarVol.value + '%';
+ }
+
+ // Visualizer
+ const viz = document.getElementById('np-visualizer');
+ if (viz) viz.classList.toggle('playing', isPlaying);
+
+ // Queue
+ renderNpQueue();
+ updateNpPrevNextButtons();
+}
+
+function updateNpTrackInfo() {
+ const titleEl = document.getElementById('np-track-title');
+ const artistEl = document.getElementById('np-artist-name');
+ const albumEl = document.getElementById('np-album-name');
+ const artImg = document.getElementById('np-album-art');
+ const artPlaceholder = document.getElementById('np-album-art-placeholder');
+ const badgesEl = document.getElementById('np-format-badges');
+ const actionBtns = document.getElementById('np-action-buttons');
+
+ if (!titleEl) return;
+
+ // Sidebar album art
+ const sidebarArt = document.getElementById('sidebar-album-art');
+
+ if (currentTrack) {
+ // Track text transition animation
+ const textEls = [titleEl, artistEl, albumEl];
+ const oldTitle = titleEl.textContent;
+ const newTitle = currentTrack.title || 'Unknown Track';
+ const trackChanged = oldTitle !== newTitle && oldTitle !== 'No track';
+
+ titleEl.textContent = newTitle;
+ artistEl.textContent = currentTrack.artist || 'Unknown Artist';
+ albumEl.textContent = currentTrack.album || 'Unknown Album';
+
+ if (trackChanged) {
+ textEls.forEach(el => {
+ el.classList.remove('np-text-transition');
+ void el.offsetWidth; // force reflow
+ el.classList.add('np-text-transition');
+ });
+ }
+
+ // Album art (modal + sidebar) + ambient glow extraction
+ const artUrl = getNpAlbumArtUrl();
+ if (artUrl && artImg) {
+ // Only set crossOrigin for external URLs — local paths break with CORS headers
+ if (artUrl.startsWith('http')) {
+ artImg.crossOrigin = 'anonymous';
+ } else {
+ artImg.removeAttribute('crossOrigin');
+ }
+ artImg.src = artUrl;
+ artImg.classList.remove('hidden');
+ artImg.onerror = () => { artImg.classList.add('hidden'); npResetAmbientGlow(); };
+ artImg.onload = () => { npExtractAmbientColor(artImg); };
+ } else if (artImg) {
+ artImg.classList.add('hidden');
+ npResetAmbientGlow();
+ }
+ if (sidebarArt) {
+ if (artUrl) {
+ sidebarArt.src = artUrl;
+ sidebarArt.style.display = '';
+ sidebarArt.onerror = () => { sidebarArt.src = '/static/trans2.png'; };
+ } else {
+ sidebarArt.src = '/static/trans2.png';
+ }
+ }
+
+ // Format badges (richer: include bitrate/sample_rate)
+ if (badgesEl) {
+ badgesEl.innerHTML = '';
+ const filename = currentTrack.filename || '';
+ if (filename) {
+ const ext = getFileExtension(filename);
+ if (ext) {
+ let label = ext.toUpperCase();
+ if (currentTrack.sample_rate) {
+ const khz = (currentTrack.sample_rate / 1000);
+ label += ' ' + (khz % 1 === 0 ? khz.toFixed(0) : khz.toFixed(1)) + 'kHz';
+ }
+ const badge = document.createElement('span');
+ badge.className = 'np-format-badge' + (ext === 'flac' ? ' flac' : '');
+ badge.textContent = label;
+ badgesEl.appendChild(badge);
+ }
+ if (currentTrack.bitrate) {
+ const brBadge = document.createElement('span');
+ brBadge.className = 'np-format-badge';
+ brBadge.textContent = currentTrack.bitrate + 'k';
+ badgesEl.appendChild(brBadge);
+ }
+ }
+ }
+
+ // Action buttons visibility
+ if (actionBtns) {
+ const hasArtist = currentTrack.artist_id;
+ actionBtns.classList.toggle('hidden', !hasArtist);
+ }
+
+ // Track recently played for radio mode
+ if (currentTrack.id && !npRecentlyPlayedIds.includes(currentTrack.id)) {
+ npRecentlyPlayedIds.push(currentTrack.id);
+ if (npRecentlyPlayedIds.length > 50) npRecentlyPlayedIds.shift();
+ }
+ } else {
+ titleEl.textContent = 'No track';
+ artistEl.textContent = 'Unknown Artist';
+ albumEl.textContent = 'Unknown Album';
+ if (artImg) artImg.classList.add('hidden');
+ if (sidebarArt) sidebarArt.src = '/static/trans2.png';
+ if (badgesEl) badgesEl.innerHTML = '';
+ if (actionBtns) actionBtns.classList.add('hidden');
+ npResetAmbientGlow();
+ }
+}
+
+function npExtractAmbientColor(imgEl) {
+ try {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = 50;
+ canvas.height = 50;
+ ctx.drawImage(imgEl, 0, 0, 50, 50);
+ const data = ctx.getImageData(0, 0, 50, 50).data;
+ let rSum = 0, gSum = 0, bSum = 0, count = 0;
+ for (let i = 0; i < data.length; i += 16) { // sample every 4th pixel
+ const r = data[i], g = data[i + 1], b = data[i + 2];
+ const brightness = (r + g + b) / 3;
+ if (brightness > 20 && brightness < 230) {
+ rSum += r; gSum += g; bSum += b; count++;
+ }
+ }
+ if (count > 0) {
+ const modal = document.querySelector('.np-modal');
+ if (modal) {
+ modal.style.setProperty('--np-ambient-r', Math.round(rSum / count));
+ modal.style.setProperty('--np-ambient-g', Math.round(gSum / count));
+ modal.style.setProperty('--np-ambient-b', Math.round(bSum / count));
+ }
+ }
+ } catch (e) {
+ // Cross-origin or canvas error — ignore silently
+ }
+}
+
+function npResetAmbientGlow() {
+ const modal = document.querySelector('.np-modal');
+ if (modal) {
+ modal.style.setProperty('--np-ambient-r', '29');
+ modal.style.setProperty('--np-ambient-g', '185');
+ modal.style.setProperty('--np-ambient-b', '84');
+ }
+}
+
+function updateNpPlayButton() {
+ const playIcon = document.querySelector('.np-icon-play');
+ const pauseIcon = document.querySelector('.np-icon-pause');
+ if (playIcon && pauseIcon) {
+ playIcon.classList.toggle('hidden', isPlaying);
+ pauseIcon.classList.toggle('hidden', !isPlaying);
+ }
+
+ const viz = document.getElementById('np-visualizer');
+ if (viz) viz.classList.toggle('playing', isPlaying);
+
+ // Drive Web Audio visualizer (only when modal is open to save CPU)
+ if (isPlaying && npModalOpen) {
+ npInitVisualizer();
+ npStartVisualizerLoop();
+ } else {
+ npStopVisualizerLoop();
+ }
+}
+
+function updateNpProgress() {
+ if (!npModalOpen || !audioPlayer) return;
+
+ const npProgressBar = document.getElementById('np-progress-bar');
+ const npProgressFill = document.getElementById('np-progress-fill');
+ const npCurrentTime = document.getElementById('np-current-time');
+ const npTotalTime = document.getElementById('np-total-time');
+
+ if (audioPlayer.duration) {
+ const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+ if (npProgressBar && !npProgressBar.dataset.seeking) {
+ npProgressBar.value = progress;
+ }
+ if (npProgressFill) npProgressFill.style.width = progress + '%';
+ if (npCurrentTime) npCurrentTime.textContent = formatTime(audioPlayer.currentTime);
+ if (npTotalTime) npTotalTime.textContent = formatTime(audioPlayer.duration);
+ } else {
+ if (npProgressBar) npProgressBar.value = 0;
+ if (npProgressFill) npProgressFill.style.width = '0%';
+ if (npCurrentTime) npCurrentTime.textContent = '0:00';
+ if (npTotalTime) npTotalTime.textContent = '0:00';
+ }
+}
+
+function handleNpProgressBarChange(event) {
+ if (!audioPlayer || !audioPlayer.duration) return;
+ const progress = parseFloat(event.target.value);
+ const newTime = (progress / 100) * audioPlayer.duration;
+
+ try {
+ audioPlayer.currentTime = newTime;
+
+ // Sync sidebar progress
+ const sidebarBar = document.getElementById('progress-bar');
+ const sidebarFill = document.getElementById('progress-fill');
+ if (sidebarBar) sidebarBar.value = progress;
+ if (sidebarFill) sidebarFill.style.width = progress + '%';
+
+ // Sync modal progress fill
+ const npFill = document.getElementById('np-progress-fill');
+ if (npFill) npFill.style.width = progress + '%';
+
+ // Update time displays
+ const sidebarTime = document.getElementById('current-time');
+ const npTime = document.getElementById('np-current-time');
+ if (sidebarTime) sidebarTime.textContent = formatTime(newTime);
+ if (npTime) npTime.textContent = formatTime(newTime);
+ } catch (error) {
+ console.warn('Seek failed:', error.message);
+ }
+}
+
+function handleNpVolumeChange(event) {
+ const volume = parseInt(event.target.value);
+ if (audioPlayer) audioPlayer.volume = volume / 100;
+
+ // Sync sidebar volume slider
+ const sidebarVol = document.getElementById('volume-slider');
+ if (sidebarVol) {
+ sidebarVol.value = volume;
+ sidebarVol.style.setProperty('--volume-percent', volume + '%');
+ }
+
+ // Update modal volume fill
+ const npFill = document.getElementById('np-volume-fill');
+ if (npFill) npFill.style.width = volume + '%';
+
+ // Update mute state
+ npMuted = volume === 0;
+ updateNpMuteIcon();
+}
+
+function handleNpMuteToggle() {
+ const npVol = document.getElementById('np-volume-slider');
+ if (!npVol) return;
+
+ if (npMuted) {
+ // Unmute — restore previous volume
+ npVol.value = npPreMuteVolume;
+ npVol.dispatchEvent(new Event('input'));
+ npMuted = false;
+ } else {
+ // Mute — save current volume, set to 0
+ npPreMuteVolume = parseInt(npVol.value) || 70;
+ npVol.value = 0;
+ npVol.dispatchEvent(new Event('input'));
+ npMuted = true;
+ }
+ updateNpMuteIcon();
+}
+
+function updateNpMuteIcon() {
+ const muteBtn = document.getElementById('np-mute-btn');
+ const volIcon = muteBtn ? muteBtn.querySelector('.np-icon-vol') : null;
+ const mutedIcon = muteBtn ? muteBtn.querySelector('.np-icon-muted') : null;
+ if (volIcon && mutedIcon) {
+ volIcon.classList.toggle('hidden', npMuted);
+ mutedIcon.classList.toggle('hidden', !npMuted);
+ }
+ if (muteBtn) muteBtn.classList.toggle('muted', npMuted);
+}
+
+function handleNpShuffle() {
+ npShuffleOn = !npShuffleOn;
+ const btn = document.getElementById('np-shuffle-btn');
+ if (btn) btn.classList.toggle('active', npShuffleOn);
+ updateNpPrevNextButtons();
+}
+
+function handleNpRepeat() {
+ const badge = document.getElementById('np-repeat-one-badge');
+ if (npRepeatMode === 'off') {
+ npRepeatMode = 'all';
+ if (audioPlayer) audioPlayer.loop = false;
+ } else if (npRepeatMode === 'all') {
+ npRepeatMode = 'one';
+ if (audioPlayer) audioPlayer.loop = true;
+ } else {
+ npRepeatMode = 'off';
+ if (audioPlayer) audioPlayer.loop = false;
+ }
+ const btn = document.getElementById('np-repeat-btn');
+ if (btn) btn.classList.toggle('active', npRepeatMode !== 'off');
+ if (badge) badge.classList.toggle('hidden', npRepeatMode !== 'one');
+ updateNpPrevNextButtons();
+}
+
+// ===============================
+// QUEUE MANAGEMENT
+// ===============================
+
+function addToQueue(track) {
+ npQueue.push(track);
+ showToast('Added to queue', 'success');
+ renderNpQueue();
+ updateNpPrevNextButtons();
+ // If nothing is currently playing, auto-play the first queued track
+ if (!currentTrack) {
+ playQueueItem(npQueue.length - 1);
+ }
+}
+
+function removeFromQueue(index) {
+ if (index < 0 || index >= npQueue.length) return;
+ const wasCurrentTrack = (index === npQueueIndex);
+ npQueue.splice(index, 1);
+ // Adjust current index
+ if (npQueue.length === 0) {
+ npQueueIndex = -1;
+ // Current track keeps playing but queue is now empty — that's OK
+ } else if (index < npQueueIndex) {
+ npQueueIndex--;
+ } else if (wasCurrentTrack) {
+ // Removed the currently playing item
+ if (npQueueIndex >= npQueue.length) {
+ npQueueIndex = npQueue.length - 1;
+ }
+ // Play the next track at the adjusted index
+ playQueueItem(npQueueIndex);
+ }
+ renderNpQueue();
+ updateNpPrevNextButtons();
+}
+
+function clearQueue() {
+ npQueue = [];
+ npQueueIndex = -1;
+ renderNpQueue();
+ updateNpPrevNextButtons();
+}
+
+function playNextInQueue() {
+ if (npQueue.length === 0) return;
+ if (npShuffleOn) {
+ // Pick a random index that is not the current one
+ const candidates = [];
+ for (let i = 0; i < npQueue.length; i++) {
+ if (i !== npQueueIndex) candidates.push(i);
+ }
+ if (candidates.length === 0) return;
+ const next = candidates[Math.floor(Math.random() * candidates.length)];
+ playQueueItem(next);
+ } else {
+ const next = npQueueIndex + 1;
+ if (next >= npQueue.length) {
+ // End of queue — repeat-all wraps to start
+ if (npRepeatMode === 'all') {
+ playQueueItem(0);
+ }
+ return;
+ }
+ playQueueItem(next);
+ }
+}
+
+function playPreviousInQueue() {
+ // If more than 3 seconds in, restart current track
+ if (audioPlayer && audioPlayer.currentTime > 3) {
+ audioPlayer.currentTime = 0;
+ if (audioPlayer.paused) audioPlayer.play();
+ return;
+ }
+ if (npQueue.length === 0) return;
+ const prev = npQueueIndex - 1;
+ if (prev < 0) {
+ // At start — restart current track
+ if (audioPlayer) {
+ audioPlayer.currentTime = 0;
+ if (audioPlayer.paused) audioPlayer.play();
+ }
+ return;
+ }
+ playQueueItem(prev);
+}
+
+async function playQueueItem(index) {
+ if (index < 0 || index >= npQueue.length) return;
+ if (npLoadingQueueItem) return; // Prevent race condition from double-advance
+ npLoadingQueueItem = true;
+ npQueueIndex = index;
+ const track = npQueue[index];
+
+ try {
+ if (track.is_library) {
+ // Library track playback flow
+ await stopStream();
+ setTrackInfo({
+ title: track.title,
+ artist: track.artist,
+ album: track.album,
+ filename: track.file_path,
+ is_library: true,
+ image_url: track.image_url,
+ id: track.id,
+ artist_id: track.artist_id,
+ album_id: track.album_id,
+ bitrate: track.bitrate,
+ sample_rate: track.sample_rate
+ });
+ showLoadingAnimation();
+
+ const response = await fetch('/api/library/play', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ file_path: track.file_path,
+ title: track.title || '',
+ artist: track.artist || '',
+ album: track.album || ''
+ })
+ });
+ const result = await response.json();
+ if (!result.success) throw new Error(result.error || 'Failed to start playback');
+ // Re-apply repeat-one loop property
+ if (audioPlayer) audioPlayer.loop = (npRepeatMode === 'one');
+ await startAudioPlayback();
+ } else {
+ // Non-library (stream) tracks cannot be queued for auto-advance
+ // Just show track info — the stream flow handles its own playback
+ setTrackInfo({
+ title: track.title,
+ artist: track.artist,
+ album: track.album,
+ filename: track.filename || track.file_path,
+ is_library: false,
+ image_url: track.image_url,
+ id: track.id,
+ artist_id: track.artist_id,
+ album_id: track.album_id,
+ bitrate: track.bitrate,
+ sample_rate: track.sample_rate
+ });
+ }
+ } catch (error) {
+ console.error('Queue playback error:', error);
+ showToast(`Skipping track: ${error.message}`, 'error');
+ hideLoadingAnimation();
+ // Auto-skip to next track on failure instead of stopping the queue
+ npLoadingQueueItem = false;
+ const nextIdx = npQueueIndex + 1;
+ if (nextIdx < npQueue.length) {
+ setTimeout(() => playQueueItem(nextIdx), 500);
+ }
+ return;
+ } finally {
+ npLoadingQueueItem = false;
+ }
+
+ renderNpQueue();
+ updateNpPrevNextButtons();
+}
+
+function renderNpQueue() {
+ const listEl = document.getElementById('np-queue-list');
+ const emptyEl = document.getElementById('np-queue-empty');
+ const countEl = document.getElementById('np-queue-count');
+ if (!listEl) return;
+
+ if (countEl) countEl.textContent = npQueue.length > 0 ? `(${npQueue.length})` : '';
+
+ if (npQueue.length === 0) {
+ listEl.innerHTML = '';
+ if (emptyEl) emptyEl.classList.remove('hidden');
+ return;
+ }
+
+ if (emptyEl) emptyEl.classList.add('hidden');
+ listEl.innerHTML = '';
+
+ npQueue.forEach((track, i) => {
+ const item = document.createElement('div');
+ item.className = 'np-queue-item' + (i === npQueueIndex ? ' active' : '');
+ item.onclick = () => playQueueItem(i);
+
+ const info = document.createElement('div');
+ info.className = 'np-queue-item-info';
+
+ const title = document.createElement('div');
+ title.className = 'np-queue-item-title';
+ title.textContent = track.title || 'Unknown Track';
+
+ const artist = document.createElement('div');
+ artist.className = 'np-queue-item-artist';
+ artist.textContent = track.artist || 'Unknown Artist';
+
+ info.appendChild(title);
+ info.appendChild(artist);
+ item.appendChild(info);
+
+ const removeBtn = document.createElement('button');
+ removeBtn.className = 'np-queue-item-remove';
+ removeBtn.innerHTML = '✕';
+ removeBtn.title = 'Remove from queue';
+ removeBtn.onclick = (e) => {
+ e.stopPropagation();
+ removeFromQueue(i);
+ };
+ item.appendChild(removeBtn);
+
+ listEl.appendChild(item);
+ });
+}
+
+function updateNpPrevNextButtons() {
+ const canPrev = npQueueIndex > 0 || (audioPlayer && audioPlayer.currentTime > 3);
+ const canNext = npQueue.length > 0 && (npShuffleOn ? npQueue.length > 1 : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
+
+ // Full Now Playing modal buttons
+ const prevBtn = document.getElementById('np-prev-btn');
+ const nextBtn = document.getElementById('np-next-btn');
+ if (prevBtn) prevBtn.disabled = !canPrev;
+ if (nextBtn) nextBtn.disabled = !canNext;
+
+ // Mini player buttons
+ const miniPrevBtn = document.getElementById('mini-prev-btn');
+ const miniNextBtn = document.getElementById('mini-next-btn');
+ if (miniPrevBtn) miniPrevBtn.disabled = !canPrev;
+ if (miniNextBtn) miniNextBtn.disabled = !canNext;
+}
+
+function handlePlayerKeyboardShortcuts(event) {
+ // Don't intercept when typing in inputs or when non-player modals are open
+ const tag = document.activeElement.tagName.toLowerCase();
+ if (tag === 'input' || tag === 'textarea' || tag === 'select' || document.activeElement.isContentEditable) return;
+
+ // Only handle when player modal is open OR when no other modal is visible
+ const otherModals = document.querySelectorAll('.modal-overlay:not(.hidden):not(#np-modal-overlay)');
+ if (otherModals.length > 0 && !npModalOpen) return;
+
+ switch (event.key) {
+ case ' ':
+ if (!currentTrack) return;
+ event.preventDefault();
+ togglePlayback();
+ break;
+ case 'ArrowLeft':
+ if (!audioPlayer || !audioPlayer.duration) return;
+ event.preventDefault();
+ audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 5);
+ break;
+ case 'ArrowRight':
+ if (!audioPlayer || !audioPlayer.duration) return;
+ event.preventDefault();
+ audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 5);
+ break;
+ case 'ArrowUp':
+ event.preventDefault();
+ if (audioPlayer) {
+ const newVol = Math.min(1, audioPlayer.volume + 0.05);
+ audioPlayer.volume = newVol;
+ syncVolumeUI(Math.round(newVol * 100));
+ }
+ break;
+ case 'ArrowDown':
+ event.preventDefault();
+ if (audioPlayer) {
+ const newVol = Math.max(0, audioPlayer.volume - 0.05);
+ audioPlayer.volume = newVol;
+ syncVolumeUI(Math.round(newVol * 100));
+ }
+ break;
+ case 'm':
+ case 'M':
+ if (npModalOpen) handleNpMuteToggle();
+ break;
+ case 'Escape':
+ if (npModalOpen) closeNowPlayingModal();
+ break;
+ default:
+ return; // Don't prevent default for unhandled keys
+ }
+}
+
+function syncVolumeUI(volumePercent) {
+ // Sync both sidebar and modal volume UIs
+ const sidebarVol = document.getElementById('volume-slider');
+ const npVol = document.getElementById('np-volume-slider');
+ const npFill = document.getElementById('np-volume-fill');
+
+ if (sidebarVol) {
+ sidebarVol.value = volumePercent;
+ sidebarVol.style.setProperty('--volume-percent', volumePercent + '%');
+ }
+ if (npVol) npVol.value = volumePercent;
+ if (npFill) npFill.style.width = volumePercent + '%';
+}
+
+function getNpAlbumArtUrl() {
+ if (!currentTrack) return null;
+ return currentTrack.image_url || currentTrack.album_cover_url || currentTrack.thumb_url || null;
+}
+
+// ===============================
+// WEB AUDIO VISUALIZER
+// ===============================
+
+function npInitVisualizer() {
+ if (npVizInitialized || !audioPlayer) return;
+ try {
+ if (!npAudioContext) {
+ npAudioContext = new (window.AudioContext || window.webkitAudioContext)();
+ }
+ if (!npMediaSource) {
+ npMediaSource = npAudioContext.createMediaElementSource(audioPlayer);
+ npAnalyser = npAudioContext.createAnalyser();
+ npAnalyser.fftSize = 64;
+ npAnalyser.smoothingTimeConstant = 0.8;
+ npMediaSource.connect(npAnalyser);
+ npAnalyser.connect(npAudioContext.destination);
+ }
+ npVizInitialized = true;
+ } catch (e) {
+ console.warn('Web Audio visualizer init failed, using CSS fallback:', e.message);
+ // Mark as CSS fallback
+ const viz = document.getElementById('np-visualizer');
+ if (viz) viz.classList.add('np-viz-css-fallback');
+ npVizInitialized = true; // don't retry
+ }
+}
+
+function npStartVisualizerLoop() {
+ if (npVizAnimFrame) return; // Already running
+ if (!npAnalyser) return; // No analyser — CSS fallback handles it
+
+ if (npAudioContext && npAudioContext.state === 'suspended') {
+ npAudioContext.resume();
+ }
+
+ const bars = document.querySelectorAll('.np-viz-bar');
+ if (bars.length === 0) return;
+ const bufferLength = npAnalyser.frequencyBinCount;
+ const dataArray = new Uint8Array(bufferLength);
+
+ function draw() {
+ npVizAnimFrame = requestAnimationFrame(draw);
+ npAnalyser.getByteFrequencyData(dataArray);
+
+ // Map 7 bars to frequency bins (skip bin 0 which is DC offset)
+ const binCount = Math.min(bufferLength - 1, 7);
+ for (let i = 0; i < bars.length; i++) {
+ const binIndex = Math.min(i + 1, bufferLength - 1);
+ const value = dataArray[binIndex] / 255; // 0..1
+ const scale = Math.max(0.08, value); // minimum visible height
+ bars[i].style.transform = `scaleY(${scale})`;
+ }
+ }
+ draw();
+}
+
+function npStopVisualizerLoop() {
+ if (npVizAnimFrame) {
+ cancelAnimationFrame(npVizAnimFrame);
+ npVizAnimFrame = null;
+ }
+ // Reset bars to min
+ const bars = document.querySelectorAll('.np-viz-bar');
+ bars.forEach(bar => { bar.style.transform = 'scaleY(0.125)'; });
+}
+
+// ===============================
+// SIDEBAR AUDIO VISUALIZER
+// ===============================
+
+let sidebarVizAnimFrame = null;
+let sidebarVisualizerType = 'bars'; // bars | wave | spectrum | mirror | equalizer | none
+const SIDEBAR_VIZ_BAR_COUNT = 32;
+
+let _sidebarVizBuiltType = null;
+
+function buildSidebarVizElements(type) {
+ const container = document.getElementById('sidebar-visualizer');
+ if (!container) return;
+ if (_sidebarVizBuiltType === type && container.children.length > 0) return;
+ _sidebarVizBuiltType = type;
+ container.innerHTML = '';
+ container.className = 'sidebar-visualizer';
+
+ if (type === 'bars') {
+ container.classList.add('viz-bars');
+ for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
+ const bar = document.createElement('div');
+ bar.className = 'sidebar-viz-bar';
+ container.appendChild(bar);
+ }
+ } else if (type === 'wave' || type === 'spectrum') {
+ container.classList.add('viz-canvas');
+ const canvas = document.createElement('canvas');
+ canvas.className = 'sidebar-viz-canvas';
+ canvas.width = 10;
+ canvas.height = 600;
+ container.appendChild(canvas);
+ } else if (type === 'mirror') {
+ container.classList.add('viz-mirror');
+ for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
+ const bar = document.createElement('div');
+ bar.className = 'sidebar-viz-mirror-bar';
+ container.appendChild(bar);
+ }
+ } else if (type === 'equalizer') {
+ container.classList.add('viz-equalizer');
+ for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
+ const wrap = document.createElement('div');
+ wrap.className = 'sidebar-viz-eq-wrap';
+ const bar = document.createElement('div');
+ bar.className = 'sidebar-viz-eq-bar';
+ const peak = document.createElement('div');
+ peak.className = 'sidebar-viz-eq-peak';
+ wrap.appendChild(bar);
+ wrap.appendChild(peak);
+ container.appendChild(wrap);
+ }
+ }
+}
+
+function startSidebarVisualizer() {
+ const type = sidebarVisualizerType;
+ if (type === 'none') return;
+
+ const container = document.getElementById('sidebar-visualizer');
+ if (!container) return;
+
+ buildSidebarVizElements(type);
+ container.classList.add('active');
+
+ if (sidebarVizAnimFrame) return;
+ if (!npAnalyser) return;
+
+ const bufferLength = npAnalyser.frequencyBinCount;
+ const dataArray = new Uint8Array(bufferLength);
+ const hueStart = 200, hueRange = 160;
+
+ // Helper: average frequency bins for a given segment index
+ function getBinValue(i, count) {
+ const binsPerSeg = Math.max(1, Math.floor((bufferLength - 1) / count));
+ let sum = 0;
+ const start = i * binsPerSeg + 1;
+ for (let b = 0; b < binsPerSeg; b++) sum += dataArray[Math.min(start + b, bufferLength - 1)];
+ return (sum / binsPerSeg) / 255;
+ }
+
+ // ── Bars ──
+ if (type === 'bars') {
+ const bars = container.querySelectorAll('.sidebar-viz-bar');
+ if (bars.length === 0) return;
+ function drawBars() {
+ sidebarVizAnimFrame = requestAnimationFrame(drawBars);
+ npAnalyser.getByteFrequencyData(dataArray);
+ for (let i = 0; i < bars.length; i++) {
+ const value = getBinValue(i, bars.length);
+ const scale = Math.max(0.08, value);
+ const hue = (hueStart + (i / bars.length) * hueRange + value * 30) % 360;
+ bars[i].style.transform = `scaleX(${scale})`;
+ bars[i].style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
+ }
+ }
+ drawBars();
+
+ // ── Wave ──
+ } else if (type === 'wave') {
+ const canvas = container.querySelector('.sidebar-viz-canvas');
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ let hueOffset = 0;
+ function drawWave() {
+ sidebarVizAnimFrame = requestAnimationFrame(drawWave);
+ const ch = container.clientHeight;
+ if (ch > 0 && canvas.height !== ch) canvas.height = ch;
+ npAnalyser.getByteFrequencyData(dataArray);
+ const w = canvas.width, h = canvas.height;
+ if (h === 0) return;
+ ctx.clearRect(0, 0, w, h);
+
+ let totalEnergy = 0;
+ for (let i = 1; i < bufferLength; i++) totalEnergy += dataArray[i];
+ const avgEnergy = totalEnergy / (bufferLength - 1) / 255;
+ hueOffset = (hueOffset + 0.5) % 360;
+
+ const segments = 64;
+ ctx.lineWidth = 3;
+ ctx.lineCap = 'round';
+ ctx.beginPath();
+ for (let i = 0; i <= segments; i++) {
+ const y = (i / segments) * h;
+ const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
+ const value = dataArray[binIdx] / 255;
+ const x = (w / 2) + Math.sin((i / segments) * Math.PI * 4 + Date.now() * 0.003) * value * (w - 2) * 0.4;
+ if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+ }
+ const grad = ctx.createLinearGradient(0, 0, 0, h);
+ grad.addColorStop(0, `hsla(${hueOffset + 200}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
+ grad.addColorStop(0.5, `hsla(${hueOffset + 280}, 80%, 55%, ${0.3 + avgEnergy * 0.7})`);
+ grad.addColorStop(1, `hsla(${hueOffset + 360}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
+ ctx.strokeStyle = grad;
+ ctx.stroke();
+ ctx.lineWidth = 6;
+ ctx.globalAlpha = 0.15 + avgEnergy * 0.2;
+ ctx.stroke();
+ ctx.globalAlpha = 1;
+ }
+ drawWave();
+
+ // ── Spectrum (mountain/terrain fill) ──
+ } else if (type === 'spectrum') {
+ const canvas = container.querySelector('.sidebar-viz-canvas');
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ let hueOffset = 0;
+ // Smoothed values for fluid motion
+ const smoothed = new Float32Array(64);
+
+ function drawSpectrum() {
+ sidebarVizAnimFrame = requestAnimationFrame(drawSpectrum);
+ const ch = container.clientHeight;
+ if (ch > 0 && canvas.height !== ch) canvas.height = ch;
+ npAnalyser.getByteFrequencyData(dataArray);
+ const w = canvas.width, h = canvas.height;
+ if (h === 0) return;
+ ctx.clearRect(0, 0, w, h);
+
+ hueOffset = (hueOffset + 0.3) % 360;
+ const segments = smoothed.length;
+
+ // Smooth the frequency data
+ for (let i = 0; i < segments; i++) {
+ const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
+ const target = dataArray[binIdx] / 255;
+ smoothed[i] += (target - smoothed[i]) * 0.25;
+ }
+
+ // Draw filled mountain shape from left edge
+ ctx.beginPath();
+ ctx.moveTo(0, 0);
+ for (let i = 0; i <= segments; i++) {
+ const y = (i / segments) * h;
+ const value = i < segments ? smoothed[i] : smoothed[segments - 1];
+ const x = value * w * 0.95;
+ ctx.lineTo(x, y);
+ }
+ ctx.lineTo(0, h);
+ ctx.closePath();
+
+ // Gradient fill
+ const fillGrad = ctx.createLinearGradient(0, 0, 0, h);
+ fillGrad.addColorStop(0, `hsla(${hueOffset + 200}, 85%, 55%, 0.7)`);
+ fillGrad.addColorStop(0.25, `hsla(${hueOffset + 240}, 80%, 50%, 0.6)`);
+ fillGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 85%, 50%, 0.65)`);
+ fillGrad.addColorStop(0.75, `hsla(${hueOffset + 330}, 80%, 50%, 0.6)`);
+ fillGrad.addColorStop(1, `hsla(${hueOffset + 360}, 85%, 55%, 0.7)`);
+ ctx.fillStyle = fillGrad;
+ ctx.fill();
+
+ // Bright edge line
+ ctx.beginPath();
+ ctx.moveTo(0, 0);
+ for (let i = 0; i <= segments; i++) {
+ const y = (i / segments) * h;
+ const value = i < segments ? smoothed[i] : smoothed[segments - 1];
+ ctx.lineTo(value * w * 0.95, y);
+ }
+ const lineGrad = ctx.createLinearGradient(0, 0, 0, h);
+ lineGrad.addColorStop(0, `hsla(${hueOffset + 200}, 90%, 70%, 0.9)`);
+ lineGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 90%, 65%, 0.9)`);
+ lineGrad.addColorStop(1, `hsla(${hueOffset + 360}, 90%, 70%, 0.9)`);
+ ctx.strokeStyle = lineGrad;
+ ctx.lineWidth = 1.5;
+ ctx.stroke();
+
+ // Outer glow
+ ctx.lineWidth = 4;
+ ctx.globalAlpha = 0.2;
+ ctx.stroke();
+ ctx.globalAlpha = 1;
+ }
+ drawSpectrum();
+
+ // ── Mirror (bars from center outward) ──
+ } else if (type === 'mirror') {
+ const bars = container.querySelectorAll('.sidebar-viz-mirror-bar');
+ if (bars.length === 0) return;
+ function drawMirror() {
+ sidebarVizAnimFrame = requestAnimationFrame(drawMirror);
+ npAnalyser.getByteFrequencyData(dataArray);
+ const half = Math.floor(bars.length / 2);
+ for (let i = 0; i < half; i++) {
+ const value = getBinValue(i, half);
+ const scale = Math.max(0.06, value);
+ const hue = (hueStart + (i / half) * hueRange + value * 30) % 360;
+ const color = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
+ // Top half — mirror index from center
+ const topIdx = half - 1 - i;
+ const bottomIdx = half + i;
+ bars[topIdx].style.transform = `scaleX(${scale})`;
+ bars[topIdx].style.backgroundColor = color;
+ if (bottomIdx < bars.length) {
+ bars[bottomIdx].style.transform = `scaleX(${scale})`;
+ bars[bottomIdx].style.backgroundColor = color;
+ }
+ }
+ }
+ drawMirror();
+
+ // ── Equalizer (bars with falling peak indicators) ──
+ } else if (type === 'equalizer') {
+ const wraps = container.querySelectorAll('.sidebar-viz-eq-wrap');
+ if (wraps.length === 0) return;
+ const peaks = new Float32Array(wraps.length);
+ const peakVelocity = new Float32Array(wraps.length);
+
+ function drawEqualizer() {
+ sidebarVizAnimFrame = requestAnimationFrame(drawEqualizer);
+ npAnalyser.getByteFrequencyData(dataArray);
+ for (let i = 0; i < wraps.length; i++) {
+ const value = getBinValue(i, wraps.length);
+ const scale = Math.max(0.06, value);
+ const hue = (hueStart + (i / wraps.length) * hueRange + value * 30) % 360;
+ const barEl = wraps[i].querySelector('.sidebar-viz-eq-bar');
+ const peakEl = wraps[i].querySelector('.sidebar-viz-eq-peak');
+
+ barEl.style.transform = `scaleX(${scale})`;
+ barEl.style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
+
+ // Peak hold with gravity
+ if (value > peaks[i]) {
+ peaks[i] = value;
+ peakVelocity[i] = 0;
+ } else {
+ peakVelocity[i] += 0.002; // gravity
+ peaks[i] = Math.max(0, peaks[i] - peakVelocity[i]);
+ }
+ const peakPos = Math.max(0.06, peaks[i]);
+ peakEl.style.left = `${peakPos * 100}%`;
+ peakEl.style.backgroundColor = `hsla(${hue}, 90%, 75%, ${0.6 + peaks[i] * 0.4})`;
+ peakEl.style.boxShadow = `0 0 4px hsla(${hue}, 90%, 70%, ${peaks[i] * 0.5})`;
+ }
+ }
+ drawEqualizer();
+ }
+}
+
+function stopSidebarVisualizer() {
+ if (sidebarVizAnimFrame) {
+ cancelAnimationFrame(sidebarVizAnimFrame);
+ sidebarVizAnimFrame = null;
+ }
+ const container = document.getElementById('sidebar-visualizer');
+ if (container) {
+ container.classList.remove('active');
+ }
+}
+
+// Listen for visualizer type changes in settings — use isPlaying (not wasRunning)
+// so switching from 'none' to a real type while music plays starts the visualizer
+document.addEventListener('change', (e) => {
+ if (e.target.id === 'sidebar-visualizer-type') {
+ const newType = e.target.value;
+ stopSidebarVisualizer();
+ _sidebarVizBuiltType = null; // force rebuild for new type
+ sidebarVisualizerType = newType;
+ if (isPlaying && newType !== 'none') {
+ npInitVisualizer();
+ startSidebarVisualizer();
+ }
+ }
+});
+
+// ===============================
+// RADIO MODE
+// ===============================
+
+async function npFetchRadioTracks() {
+ if (!currentTrack || !currentTrack.id) return;
+ try {
+ npLoadingQueueItem = true;
+ const excludeIds = npRecentlyPlayedIds.join(',');
+ const resp = await fetch(`/api/library/radio?track_id=${currentTrack.id}&limit=50&exclude=${encodeURIComponent(excludeIds)}`);
+ if (!resp.ok) {
+ console.warn('Radio endpoint returned', resp.status);
+ npLoadingQueueItem = false;
+ return;
+ }
+ const data = await resp.json();
+ // Bail if radio was toggled off during the fetch
+ if (!npRadioMode) { npLoadingQueueItem = false; return; }
+ if (data.tracks && data.tracks.length > 0) {
+ data.tracks.forEach(t => {
+ npQueue.push({
+ title: t.title || 'Unknown Track',
+ artist: t.artist || 'Unknown Artist',
+ album: t.album || 'Unknown Album',
+ file_path: t.file_path,
+ filename: t.file_path,
+ is_library: true,
+ image_url: t.image_url || null,
+ id: t.id,
+ artist_id: t.artist_id,
+ album_id: t.album_id,
+ bitrate: t.bitrate,
+ sample_rate: t.sample_rate
+ });
+ });
+ showToast(`Radio: Added ${data.tracks.length} similar tracks`, 'success');
+ renderNpQueue();
+ updateNpPrevNextButtons();
+ npLoadingQueueItem = false;
+ // Only auto-advance if nothing is currently playing (triggered by onAudioEnded)
+ if (!isPlaying) {
+ playNextInQueue();
+ }
+ } else {
+ showToast('Radio: No similar tracks found', 'info');
+ npLoadingQueueItem = false;
+ }
+ } catch (e) {
+ console.warn('Radio fetch error:', e);
+ npLoadingQueueItem = false;
+ }
+}
+
+// Media Session API
+function initMediaSession() {
+ if (!('mediaSession' in navigator)) return;
+
+ navigator.mediaSession.setActionHandler('play', () => {
+ if (audioPlayer && currentTrack) {
+ audioPlayer.play().then(() => setPlayingState(true));
+ }
+ });
+ navigator.mediaSession.setActionHandler('pause', () => {
+ if (audioPlayer) {
+ audioPlayer.pause();
+ setPlayingState(false);
+ }
+ });
+ navigator.mediaSession.setActionHandler('stop', () => {
+ handleStop();
+ });
+ navigator.mediaSession.setActionHandler('seekbackward', () => {
+ if (audioPlayer && audioPlayer.duration) {
+ audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10);
+ }
+ });
+ navigator.mediaSession.setActionHandler('seekforward', () => {
+ if (audioPlayer && audioPlayer.duration) {
+ audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 10);
+ }
+ });
+ navigator.mediaSession.setActionHandler('previoustrack', () => {
+ if (npQueue.length > 0) playPreviousInQueue();
+ });
+ navigator.mediaSession.setActionHandler('nexttrack', () => {
+ if (npQueue.length > 0) playNextInQueue();
+ });
+}
+
+function updateMediaSessionMetadata() {
+ if (!('mediaSession' in navigator) || !currentTrack) return;
+ const artwork = [];
+ const artUrl = getNpAlbumArtUrl();
+ if (artUrl) artwork.push({ src: artUrl, sizes: '512x512', type: 'image/jpeg' });
+
+ navigator.mediaSession.metadata = new MediaMetadata({
+ title: currentTrack.title || 'Unknown Track',
+ artist: currentTrack.artist || 'Unknown Artist',
+ album: currentTrack.album || 'Unknown Album',
+ artwork: artwork
+ });
+}
+
+function updateMediaSessionPlaybackState() {
+ if (!('mediaSession' in navigator)) return;
+ if (!currentTrack) {
+ navigator.mediaSession.playbackState = 'none';
+ } else {
+ navigator.mediaSession.playbackState = isPlaying ? 'playing' : 'paused';
+ }
+}
+
+// ===============================
+
diff --git a/webui/static/pages-extra.js b/webui/static/pages-extra.js
new file mode 100644
index 00000000..333b1de6
--- /dev/null
+++ b/webui/static/pages-extra.js
@@ -0,0 +1,2875 @@
+
+// ==================================================================================
+// PLAYLIST EXPLORER — Visual Discovery Tree
+// ==================================================================================
+
+const _explorer = {
+ initialized: false,
+ mode: 'albums',
+ artists: [],
+ selectedAlbums: new Set(),
+ expandedArtists: new Set(),
+ building: false,
+ playlistId: null,
+ meta: null,
+ _resizeTimer: null,
+};
+
+function initExplorer() {
+ if (_explorer.initialized) return;
+ _explorer.initialized = true;
+ _explorer._playlists = [];
+ _explorer._activeSource = null;
+
+ _explorerLoadPlaylists();
+
+ // Listen for discovery completion to auto-refresh playlist cards
+ if (typeof socket !== 'undefined') {
+ socket.on('discovery:progress', (data) => {
+ if (!document.getElementById('playlist-explorer-page')?.classList.contains('active')) return;
+ // Match mirrored playlist discovery events
+ if (data.phase === 'discovered' || data.phase === 'sync_complete' || data.complete) {
+ // Discovery finished — refresh playlists after brief delay for DB commit
+ setTimeout(() => _explorerLoadPlaylists(), 1500);
+ }
+ // Live progress update on cards during discovery
+ if (data.id && data.id.startsWith('mirrored_')) {
+ const plId = parseInt(data.id.replace('mirrored_', ''));
+ const card = document.querySelector(`.explorer-picker-card[data-id="${plId}"]`);
+ if (card) {
+ const meta = card.querySelector('.explorer-picker-card-meta');
+ if (meta && data.progress != null) {
+ meta.innerHTML = `Discovering... ${Math.round(data.progress)}%`;
+ }
+ }
+ }
+ });
+ }
+}
+
+function _explorerLoadPlaylists() {
+ fetch('/api/mirrored-playlists')
+ .then(r => r.json())
+ .then(data => {
+ const playlists = Array.isArray(data) ? data : (data.playlists || []);
+ _explorer._playlists = playlists;
+
+ if (playlists.length === 0) {
+ const scroll = document.getElementById('explorer-picker-scroll');
+ if (scroll) scroll.innerHTML = '';
+ html += '';
+ html += '
';
+
+ // Album list
+ html += 'This template will be applied to all albums below. Use
';
+ html += ``;
+ html += '/ to separate folders.';
+ html += ``;
+ html += '
';
+
+ html += '';
+ albums.forEach((a, i) => {
+ const trackCount = a.tracks ? a.tracks.length : '?';
+ html += `
`;
+ html += `${escapeHtml(a.title)} (${trackCount} tracks)`;
+ html += '
';
+ });
+ html += 'No mirrored playlists found. Sync a playlist first.
';
+ return;
+ }
+
+ // Group by source
+ const groups = {};
+ playlists.forEach(p => {
+ const src = (p.source || 'other').toLowerCase();
+ if (!groups[src]) groups[src] = [];
+ groups[src].push(p);
+ });
+
+ // Render source tabs
+ const tabsEl = document.getElementById('explorer-picker-tabs');
+ if (tabsEl) {
+ const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer', youtube: 'YouTube', beatport: 'Beatport', file: 'File', other: 'Other' };
+ const sources = Object.keys(groups);
+ if (sources.length <= 1) {
+ tabsEl.style.display = 'none';
+ } else {
+ tabsEl.innerHTML = sources.map((src, i) => {
+ const label = sourceNames[src] || src.charAt(0).toUpperCase() + src.slice(1);
+ const count = groups[src].length;
+ const isActive = _explorer._activeSource === src || (!_explorer._activeSource && i === 0);
+ return ``;
+ }).join('');
+ }
+
+ // Show active or first source
+ const activeSource = _explorer._activeSource || sources[0];
+ _explorer._activeSource = activeSource;
+ explorerRenderPickerCards(activeSource);
+ }
+ })
+ .catch(() => { });
+}
+
+function explorerSwitchPickerTab(source) {
+ _explorer._activeSource = source;
+ document.querySelectorAll('.explorer-picker-tab').forEach(t => t.classList.toggle('active', t.dataset.source === source));
+ explorerRenderPickerCards(source);
+}
+
+function explorerRenderPickerCards(source) {
+ const scroll = document.getElementById('explorer-picker-scroll');
+ if (!scroll) return;
+
+ const filtered = _explorer._playlists.filter(p => (p.source || 'other').toLowerCase() === source);
+ scroll.innerHTML = filtered.map(p => {
+ const img = p.image_url || '';
+ const total = p.total_count || p.track_count || 0;
+ const discovered = p.discovered_count || 0;
+ const pct = total > 0 ? Math.round((discovered / total) * 100) : 0;
+ const isReady = pct >= 50;
+ const isActive = _explorer.playlistId === p.id;
+ const isFullyDiscovered = pct === 100;
+ const wasExplored = !!(p.explored_at || p.explored);
+ const wishlisted = p.wishlisted_count || 0;
+ const inLibrary = p.in_library_count || 0;
+
+ // Status badge: checkmark if explored/in-library, star if ready, % if needs discovery
+ let statusBadge = '';
+ if (inLibrary > 0 && inLibrary >= total * 0.8) {
+ statusBadge = '✓
';
+ } else if (wasExplored) {
+ statusBadge = '✓
';
+ } else if (wishlisted > 0) {
+ statusBadge = '♥
';
+ } else if (isFullyDiscovered) {
+ statusBadge = '★
';
+ } else if (!isReady) {
+ statusBadge = `${pct}%
`;
+ }
+
+ // Meta line with status indicators
+ let metaHTML;
+ const statusParts = [];
+ if (inLibrary > 0) statusParts.push(`${inLibrary} in library`);
+ if (wishlisted > 0) statusParts.push(`${wishlisted} wishlisted`);
+
+ if (isFullyDiscovered) {
+ metaHTML = `${total} tracks · Fully discovered`;
+ } else if (isReady) {
+ metaHTML = `${total} tracks · ${pct}% discovered`;
+ } else {
+ metaHTML = `${total} tracks · ${pct}% discovered`;
+ }
+ if (statusParts.length > 0) {
+ metaHTML += `${statusParts.join(' · ')}`; + } + + // Discover button for undiscovered playlists (replaces redirect to Sync) + const discoverBtn = !isReady ? `` : ''; + + return ` +
+
+ `;
+ }).join('');
+}
+
+function explorerSelectPlaylist(id, el) {
+ _explorer.playlistId = id;
+ document.querySelectorAll('.explorer-picker-card').forEach(c => c.classList.remove('active'));
+ if (el) el.classList.add('active');
+ // Update hint text
+ const hint = document.getElementById('explorer-build-hint');
+ const pl = _explorer._playlists.find(p => p.id === id);
+ if (hint && pl) hint.textContent = `Ready: ${pl.name}`;
+ else if (hint) hint.textContent = '';
+}
+
+function explorerRedirectToDiscover(playlistId) {
+ showToast('This playlist needs more tracks discovered before exploring. Redirecting to Sync...', 'info');
+ navigateToPage('sync');
+ setTimeout(() => {
+ const mirroredBtn = document.querySelector('.sync-tab-button[data-tab="mirrored"]');
+ if (mirroredBtn) mirroredBtn.click();
+ }, 200);
+}
+
+async function explorerStartDiscovery(playlistId) {
+ const card = document.querySelector(`.explorer-picker-card[data-id="${playlistId}"]`);
+ const btn = card?.querySelector('.explorer-picker-discover-btn');
+ if (btn) { btn.disabled = true; btn.textContent = 'Starting...'; }
+
+ try {
+ if (typeof discoverMirroredPlaylist === 'function') {
+ await discoverMirroredPlaylist(playlistId);
+ if (btn) { btn.disabled = false; btn.textContent = 'Open'; btn.title = 'Reopen discovery modal'; }
+
+ // Poll for card updates while discovery is in progress
+ _explorerStartDiscoveryPoller(playlistId);
+ } else {
+ explorerRedirectToDiscover(playlistId);
+ }
+ } catch (err) {
+ showToast(`Discovery failed: ${err.message}`, 'error');
+ if (btn) { btn.disabled = false; btn.textContent = 'Discover'; }
+ }
+}
+
+function _explorerStartDiscoveryPoller(playlistId) {
+ // Poll every 5s to refresh playlist cards until this playlist is ready
+ if (_explorer._discoveryPoller) clearInterval(_explorer._discoveryPoller);
+ _explorer._discoveryPoller = setInterval(async () => {
+ // Stop polling if Explorer page isn't active
+ if (!document.getElementById('playlist-explorer-page')?.classList.contains('active')) {
+ clearInterval(_explorer._discoveryPoller);
+ _explorer._discoveryPoller = null;
+ return;
+ }
+ // Check if the mirrored playlist state shows discovery is done
+ const tempHash = `mirrored_${playlistId}`;
+ const state = youtubePlaylistStates[tempHash];
+ const isDone = state && (state.phase === 'discovered' || state.phase === 'sync_complete');
+
+ // Refresh cards from API
+ await _explorerLoadPlaylists();
+
+ // Stop polling once discovery is complete
+ if (isDone) {
+ clearInterval(_explorer._discoveryPoller);
+ _explorer._discoveryPoller = null;
+ }
+ }, 5000);
+}
+
+function explorerSetMode(mode) {
+ _explorer.mode = mode;
+ document.querySelectorAll('.explorer-mode-btn').forEach(btn => {
+ btn.classList.toggle('active', btn.dataset.mode === mode);
+ });
+}
+
+async function explorerBuildTree() {
+ const playlistId = _explorer.playlistId;
+ if (!playlistId) {
+ showToast('Select a playlist first', 'error');
+ return;
+ }
+ if (_explorer.building) return;
+
+ _explorer.building = true;
+ _explorer.artists = [];
+ _explorer.selectedAlbums.clear();
+ _explorer.expandedArtists.clear();
+ _explorer.playlistId = playlistId;
+
+ const tree = document.getElementById('explorer-tree');
+ const svg = document.getElementById('explorer-svg');
+ const progress = document.getElementById('explorer-progress');
+ const actionBar = document.getElementById('explorer-action-bar');
+ const empty = document.getElementById('explorer-empty');
+ const buildBtn = document.getElementById('explorer-build-btn');
+
+ if (empty) empty.style.display = 'none';
+ if (actionBar) actionBar.style.display = 'none';
+ if (progress) progress.style.display = 'flex';
+ if (buildBtn) { buildBtn.disabled = true; buildBtn.textContent = 'Building...'; }
+ // Clear tree but preserve the SVG element (it lives inside the tree)
+ tree.innerHTML = '';
+ _explorer._zoom = 1;
+ tree.style.transform = '';
+
+ try {
+ const response = await fetch('/api/playlist-explorer/build-tree', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ playlist_id: parseInt(playlistId), mode: _explorer.mode })
+ });
+
+ if (!response.ok) {
+ const err = await response.json();
+ throw new Error(err.error || 'Failed to build tree');
+ }
+
+ // Stream NDJSON
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+ let artistCount = 0;
+ let totalArtists = 0;
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ buffer += decoder.decode(value, { stream: true });
+ const lines = buffer.split('\n');
+ buffer = lines.pop();
+
+ for (const line of lines) {
+ if (!line.trim()) continue;
+ try {
+ const data = JSON.parse(line);
+
+ if (data.type === 'meta') {
+ _explorer.meta = data;
+ totalArtists = data.total_artists;
+ _explorerRenderRoot(data);
+ } else if (data.type === 'artist') {
+ artistCount++;
+ _explorer.artists.push(data);
+ _explorerRenderArtistNode(data, artistCount);
+
+ // Lines drawn after streaming completes (not during — flex reflow drifts positions)
+
+ // Update progress
+ const pct = Math.round((artistCount / totalArtists) * 100);
+ const fill = document.getElementById('explorer-progress-fill');
+ const text = document.getElementById('explorer-progress-text');
+ if (fill) fill.style.width = pct + '%';
+ if (text) text.textContent = `Discovering artists... ${artistCount} of ${totalArtists}`;
+ } else if (data.type === 'complete') {
+ // Done
+ }
+ } catch (e) {
+ console.warn('Explorer: failed to parse NDJSON line', e);
+ }
+ }
+ }
+
+ // Tree built — show action bar, hide progress
+ if (actionBar) actionBar.style.display = 'flex';
+ if (progress) progress.style.display = 'none';
+ _explorerUpdateCount();
+
+ // Mark playlist as explored (server persists via explored_at; update local copy too)
+ const exploredPl = _explorer._playlists.find(p => p.id === playlistId);
+ if (exploredPl) {
+ exploredPl.explored_at = new Date().toISOString();
+ // Update card badge without full re-render
+ const card = document.querySelector(`.explorer-picker-card[data-id="${playlistId}"]`);
+ if (card) {
+ card.classList.add('explored');
+ const oldBadge = card.querySelector('.explorer-picker-card-badge');
+ const badgeHTML = '
+ ${img ? `` : '
+ ♫
'}
+
+
+
+
+
+ ${discoverBtn ? `${p.name || 'Untitled'}
+ ${statusBadge}
+ ${discoverBtn}
` : ''}
+ ✓
';
+ if (oldBadge) {
+ oldBadge.outerHTML = badgeHTML;
+ } else {
+ // Insert badge into the name row
+ const nameRow = card.querySelector('.explorer-picker-card-name-row');
+ if (nameRow) {
+ nameRow.insertAdjacentHTML('beforeend', badgeHTML);
+ }
+ }
+ // Remove discover button if present (no longer needed)
+ const discoverBtn = card.querySelector('.explorer-picker-card-actions');
+ if (discoverBtn) discoverBtn.remove();
+ }
+ }
+
+ // Draw all connections now that the tree is stable
+ setTimeout(() => _explorerRedrawAllConnections(true), 100);
+
+ } catch (err) {
+ showToast('Explorer: ' + err.message, 'error');
+ if (empty) { empty.style.display = 'flex'; }
+ if (progress) progress.style.display = 'none';
+ } finally {
+ _explorer.building = false;
+ if (buildBtn) { buildBtn.disabled = false; buildBtn.textContent = 'Explore'; }
+ }
+}
+
+function _explorerRenderRoot(meta) {
+ const tree = document.getElementById('explorer-tree');
+ const rootHtml = `
+
+
+
+ `;
+ tree.insertAdjacentHTML('afterbegin', rootHtml);
+ _explorer._artistRowSizes = []; // Track row capacities: [2, 3, 4, ...]
+ _explorer._artistCount = 0;
+ _explorer._currentRowIndex = 0;
+}
+
+function _explorerGetOrCreateRow() {
+ const container = document.getElementById('explorer-artist-tiers');
+ if (!container) return null;
+
+ // Determine row sizes: 2, 3, 4, 5... (tree shape)
+ const rowCapacity = _explorer._currentRowIndex + 2;
+ const existingRows = container.querySelectorAll('.explorer-tier-artists');
+ let currentRow = existingRows[existingRows.length - 1];
+
+ if (!currentRow || currentRow.children.length >= (_explorer._currentRowIndex + 2)) {
+ // Need a new row
+ _explorer._currentRowIndex = existingRows.length;
+ const newRow = document.createElement('div');
+ newRow.className = 'explorer-tier explorer-tier-artists';
+ container.appendChild(newRow);
+ return newRow;
+ }
+ return currentRow;
+}
+
+function _explorerRenderArtistNode(artist, index) {
+ const row = _explorerGetOrCreateRow();
+ if (!row) return;
+
+ _explorer._artistCount++;
+ const albumCount = artist.albums ? artist.albums.length : 0;
+ const safeKey = (artist.name || '').replace(/[^a-zA-Z0-9]/g, '_');
+ const hasError = !!artist.error;
+
+ const html = `
+
+
+ ${meta.playlist_image
+ ? `
`
+ : '
+ ♫
'
+ }
+
+
+ SOURCE
+ ${meta.playlist_name}
+
+
+
+ `;
+ row.insertAdjacentHTML('beforeend', html);
+}
+
+function explorerToggleArtist(key) {
+ const children = document.getElementById(`explorer-children-${key}`);
+ const node = document.getElementById(`explorer-node-${key}`);
+ if (!children || !node) return;
+
+ const isExpanded = _explorer.expandedArtists.has(key);
+ if (isExpanded) {
+ _explorer.expandedArtists.delete(key);
+ children.innerHTML = '';
+ node.classList.remove('expanded');
+ } else {
+ _explorer.expandedArtists.add(key);
+ node.classList.add('expanded');
+
+ const artist = _explorer.artists.find(a => (a.name || '').replace(/[^a-zA-Z0-9]/g, '_') === key);
+ if (artist && artist.albums) {
+ const albumsHtml = artist.albums.map((album, i) => {
+ const id = album.spotify_id || `${key}_${i}`;
+ const selected = _explorer.selectedAlbums.has(id);
+ const owned = album.owned;
+ const inPlaylist = album.in_playlist;
+
+ const typeLabel = album.album_type === 'single' ? 'Single' : album.album_type === 'ep' ? 'EP' : 'Album';
+ return `
+
+ ${artist.image_url
+ ? ``
+ : ''
+ }
+
+
+
+
+ ${!hasError && albumCount > 0 ? '' : ''}
+ ${hasError ? '' : ''}
+ ${artist.name || 'Unknown'}
+
+
+
+ `;
+ }).join('');
+ children.innerHTML = albumsHtml;
+ }
+ }
+
+ // Redraw SVG after DOM settles
+ requestAnimationFrame(() => setTimeout(() => _explorerRedrawAllConnections(), 50));
+}
+
+async function explorerExpandAlbumTracks(spotifyAlbumId, nodeKey) {
+ if (!spotifyAlbumId) return;
+ const tracksContainer = document.getElementById(`explorer-tracks-${nodeKey}`);
+ if (!tracksContainer) return;
+
+ // Toggle: if already has content, collapse
+ if (tracksContainer.innerHTML) {
+ tracksContainer.innerHTML = '';
+ requestAnimationFrame(() => setTimeout(() => _explorerRedrawAllConnections(), 50));
+ return;
+ }
+
+ try {
+ const response = await fetch(`/api/playlist-explorer/album-tracks/${spotifyAlbumId}`);
+ const data = await response.json();
+ if (!data.success || !data.tracks) return;
+
+ const tracksHtml = data.tracks.map((t, i) => `
+
+ ${album.image_url
+ ? `
`
+ : ''
+ }
+
+
+
+
+ ${album.title || 'Unknown'}
+
+
+
+
+ ${owned ? 'Owned
' : ''}
+ ${inPlaylist ? '♫
' : ''}
+
+
+ `).join('');
+ tracksContainer.innerHTML = tracksHtml;
+ requestAnimationFrame(() => setTimeout(() => _explorerRedrawAllConnections(), 50));
+ } catch (e) {
+ console.error('Failed to load album tracks:', e);
+ }
+}
+
+function _formatDuration(ms) {
+ if (!ms) return '';
+ const m = Math.floor(ms / 60000);
+ const s = Math.floor((ms % 60000) / 1000);
+ return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+// Track double-click vs single-click on album nodes
+let _explorerClickTimer = null;
+let _explorerLastClickId = null;
+
+function explorerToggleAlbum(id) {
+ // Double-click detection: expand tracks
+ if (_explorerLastClickId === id && _explorerClickTimer) {
+ clearTimeout(_explorerClickTimer);
+ _explorerClickTimer = null;
+ _explorerLastClickId = null;
+ // Double-click — expand tracks
+ const node = document.querySelector(`.explorer-node-album[data-id="${id}"]`);
+ const spotifyId = id.includes('_') ? '' : id; // Only real IDs, not fallback keys
+ explorerExpandAlbumTracks(spotifyId, id);
+ return;
+ }
+
+ _explorerLastClickId = id;
+ _explorerClickTimer = setTimeout(() => {
+ _explorerClickTimer = null;
+ _explorerLastClickId = null;
+
+ // Single click — toggle selection
+ if (_explorer.selectedAlbums.has(id)) {
+ _explorer.selectedAlbums.delete(id);
+ } else {
+ _explorer.selectedAlbums.add(id);
+ }
+
+ const node = document.querySelector(`.explorer-node-album[data-id="${id}"]`);
+ if (node) {
+ const isSelected = _explorer.selectedAlbums.has(id);
+ node.classList.toggle('selected', isSelected);
+ const check = node.querySelector('.explorer-node-select');
+ if (check) check.classList.toggle('active', isSelected);
+ }
+
+ _explorerUpdateCount();
+ }, 250);
+
+ _explorerUpdateCount();
+}
+
+function explorerSelectAll() {
+ _explorer.artists.forEach(a => {
+ (a.albums || []).forEach(album => {
+ if (album.spotify_id && !album.owned) _explorer.selectedAlbums.add(album.spotify_id);
+ });
+ });
+ _explorerRefreshAllCards();
+ _explorerUpdateCount();
+}
+
+function explorerDeselectAll() {
+ _explorer.selectedAlbums.clear();
+ _explorerRefreshAllCards();
+ _explorerUpdateCount();
+}
+
+function _explorerRefreshAllCards() {
+ document.querySelectorAll('.explorer-node-album').forEach(node => {
+ const id = node.dataset.id;
+ const selected = _explorer.selectedAlbums.has(id);
+ node.classList.toggle('selected', selected);
+ const check = node.querySelector('.explorer-node-select');
+ if (check) check.classList.toggle('active', selected);
+ });
+}
+
+function _explorerUpdateCount() {
+ const el = document.getElementById('explorer-selection-count');
+ const count = _explorer.selectedAlbums.size;
+ if (el) el.textContent = `${count} album${count !== 1 ? 's' : ''} selected`;
+ _explorerRefreshArtistIndicators();
+}
+
+function _explorerRefreshArtistIndicators() {
+ // For each artist, check if any of their albums are selected — add visual indicator
+ _explorer.artists.forEach(artist => {
+ const key = (artist.name || '').replace(/[^a-zA-Z0-9]/g, '_');
+ const node = document.getElementById(`explorer-node-${key}`);
+ if (!node) return;
+ const hasSelected = (artist.albums || []).some(a => a.spotify_id && _explorer.selectedAlbums.has(a.spotify_id));
+ node.classList.toggle('has-selection', hasSelected);
+ });
+}
+
+function explorerAddToWishlist() {
+ if (_explorer.selectedAlbums.size === 0) {
+ showToast('No albums selected', 'error');
+ return;
+ }
+
+ // Group selected albums by artist with full metadata
+ const artistSections = [];
+ for (const artist of _explorer.artists) {
+ const artistId = artist.artist_id || artist.spotify_id;
+ if (!artist.albums) continue;
+ const selected = artist.albums.filter(a => a.spotify_id && _explorer.selectedAlbums.has(a.spotify_id));
+ if (selected.length === 0) continue;
+ artistSections.push({ artistId, name: artist.name, image: artist.image_url, albums: selected });
+ }
+
+ if (artistSections.length === 0) { showToast('No valid albums selected', 'error'); return; }
+
+ // Build confirmation modal (mirrors discog-modal pattern)
+ const overlay = document.createElement('div');
+ overlay.className = 'discog-modal-overlay';
+ overlay.id = 'explorer-wishlist-overlay';
+
+ const totalAlbums = artistSections.reduce((s, a) => s + a.albums.length, 0);
+ const totalTracks = artistSections.reduce((s, a) => s + a.albums.reduce((t, al) => t + (al.track_count || 0), 0), 0);
+
+ let cardsHtml = '';
+ artistSections.forEach(section => {
+ cardsHtml += `
+
+
+
+ ${t.track_number}. ${t.name}
+
+ ${_esc(section.name)}
`;
+ section.albums.forEach((album, i) => {
+ const year = album.year || '';
+ const typeLabel = album.album_type === 'single' ? 'Single' : album.album_type === 'ep' ? 'EP' : 'Album';
+ cardsHtml += `
+
+ `;
+ });
+ });
+
+ overlay.innerHTML = `
+
+
+ `;
+
+ document.body.appendChild(overlay);
+ requestAnimationFrame(() => overlay.classList.add('visible'));
+ _explorerWishlistUpdateCount();
+
+ document.getElementById('explorer-wishlist-submit')?.addEventListener('click', () => _explorerWishlistSubmit(artistSections));
+}
+
+function _explorerWishlistToggleFilter(btn) {
+ btn.classList.toggle('active');
+ const type = btn.dataset.type;
+ // Scoped to explorer wishlist modal only
+ document.querySelectorAll(`#explorer-wishlist-overlay .discog-card[data-type="${type}"]`).forEach(card => {
+ card.style.display = btn.classList.contains('active') ? '' : 'none';
+ });
+ _explorerWishlistUpdateCount();
+}
+
+function _explorerWishlistUpdateCount() {
+ const checked = document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb:checked');
+ let releases = 0, tracks = 0;
+ checked.forEach(cb => {
+ if (cb.closest('.discog-card').style.display !== 'none') {
+ releases++;
+ tracks += parseInt(cb.dataset.tracks) || 0;
+ }
+ });
+ const info = document.getElementById('explorer-wishlist-info');
+ const btn = document.getElementById('explorer-wishlist-submit-text');
+ if (info) info.textContent = `${releases} release${releases !== 1 ? 's' : ''} · ${tracks} tracks`;
+ if (btn) btn.textContent = releases > 0 ? `Add ${releases} to Wishlist` : 'Select releases';
+ const submitBtn = document.getElementById('explorer-wishlist-submit');
+ if (submitBtn) submitBtn.disabled = releases === 0;
+}
+
+async function _explorerWishlistSubmit(artistSections) {
+ const grid = document.getElementById('explorer-wishlist-grid');
+ const progress = document.getElementById('explorer-wishlist-progress');
+ const filterBar = document.querySelector('#explorer-wishlist-overlay .discog-filter-bar');
+ const submitBtn = document.getElementById('explorer-wishlist-submit');
+
+ // Collect checked albums grouped by artist
+ const byArtist = {};
+ document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb:checked').forEach(cb => {
+ if (cb.closest('.discog-card').style.display === 'none') return;
+ const card = cb.closest('.discog-card');
+ const artistId = card.dataset.artistId;
+ const albumId = cb.dataset.albumId;
+ const title = card.querySelector('.discog-card-title')?.textContent || '';
+ const img = card.querySelector('.discog-card-art img')?.src || '';
+ if (!byArtist[artistId]) byArtist[artistId] = { albums: [], name: '' };
+ byArtist[artistId].albums.push({ id: albumId, title, img, tracks: parseInt(cb.dataset.tracks) || 0 });
+ });
+
+ // Fill in artist names
+ artistSections.forEach(s => { if (byArtist[s.artistId]) byArtist[s.artistId].name = s.name; });
+
+ // Switch to progress view
+ if (grid) grid.style.display = 'none';
+ if (filterBar) filterBar.style.display = 'none';
+ if (submitBtn) submitBtn.style.display = 'none';
+ if (progress) {
+ progress.style.display = '';
+ progress.innerHTML = '';
+ for (const [artistId, data] of Object.entries(byArtist)) {
+ data.albums.forEach(album => {
+ const item = document.createElement('div');
+ item.className = 'discog-progress-item active';
+ item.id = `explorer-prog-${album.id}`;
+ item.innerHTML = `
+
+
+
+
+
+
+
+ Add to Wishlist
+${artistSections.length} artist${artistSections.length !== 1 ? 's' : ''} · ${totalAlbums} releases
+${cardsHtml}
+
+
+ ${album.img ? `
` : '♫'}
+
+
+
+ `;
+ progress.appendChild(item);
+ });
+ }
+ }
+
+ const info = document.getElementById('explorer-wishlist-info');
+ if (info) info.textContent = 'Processing...';
+
+ let totalAdded = 0;
+
+ for (const [artistId, data] of Object.entries(byArtist)) {
+ // Sort by track count descending (deluxe editions first) BEFORE extracting IDs
+ data.albums.sort((a, b) => b.tracks - a.tracks);
+ const albumIds = data.albums.map(a => a.id);
+
+ try {
+ const response = await fetch(`/api/artist/${artistId}/download-discography`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ album_ids: albumIds, artist_name: data.name })
+ });
+
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ buffer += decoder.decode(value, { stream: true });
+ const lines = buffer.split('\n');
+ buffer = lines.pop();
+ for (const line of lines) {
+ if (!line.trim()) continue;
+ try {
+ const result = JSON.parse(line);
+ if (result.status === 'complete') continue; // Summary line, skip
+ const item = document.getElementById(`explorer-prog-${result.album_id}`);
+ if (item) {
+ const statusEl = item.querySelector('.discog-prog-status');
+ const iconEl = item.querySelector('.discog-prog-icon');
+ if (result.status === 'done') {
+ const added = result.tracks_added || 0;
+ const skipped = result.tracks_skipped || 0;
+ totalAdded += added;
+ if (statusEl) statusEl.textContent = `Added ${added} track${added !== 1 ? 's' : ''}${skipped > 0 ? `, ${skipped} skipped` : ''}`;
+ if (iconEl) iconEl.innerHTML = '✓';
+ item.classList.remove('active');
+ item.classList.add('done');
+ } else if (result.status === 'error') {
+ if (statusEl) statusEl.textContent = result.message || 'Error';
+ if (iconEl) iconEl.innerHTML = '✗';
+ item.classList.remove('active');
+ item.classList.add('error');
+ }
+ }
+ } catch (e) { }
+ }
+ }
+ } catch (e) {
+ console.error(`Explorer wishlist: failed for ${data.name}:`, e);
+ }
+ }
+
+ if (info) info.textContent = `Done — ${totalAdded} tracks added to wishlist`;
+ // Change cancel button label to "Close"
+ const cancelBtn = document.querySelector('#explorer-wishlist-overlay .discog-cancel-btn');
+ if (cancelBtn) cancelBtn.textContent = 'Close';
+ showToast(`Added ${totalAdded} tracks to wishlist`, 'success');
+
+ // Mark albums as added on the tree
+ _explorer.selectedAlbums.forEach(id => {
+ const node = document.querySelector(`.explorer-node-album[data-id="${id}"]`);
+ if (node) { node.classList.add('added'); node.classList.remove('selected'); }
+ });
+ _explorer.selectedAlbums.clear();
+ _explorerUpdateCount();
+ _explorerRefreshArtistIndicators();
+}
+
+function _explorerEnsureDefs() {
+ const svg = document.getElementById('explorer-svg');
+ if (!svg || svg.querySelector('defs')) return;
+ // Read accent color from CSS custom property
+ const accentRgb = getComputedStyle(document.documentElement).getPropertyValue('--accent-rgb').trim() || '100,200,255';
+ const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+ defs.innerHTML = `
+ ${_esc(album.title)}
+ Waiting...
+ ${Array.from({ length: 6 }, (_, i) => `
+
`;
+ }
+
+ try {
+ // Fetch server playlists, mirrored playlists, and sync history names in parallel
+ const [serverRes, mirroredRes, historyNamesRes] = await Promise.all([
+ fetch('/api/server/playlists'),
+ fetch('/api/mirrored-playlists'),
+ fetch('/api/sync/history/names'),
+ ]);
+ const data = await serverRes.json();
+ let mirroredAll = [];
+ try { mirroredAll = await mirroredRes.json(); } catch (_) { }
+ if (!Array.isArray(mirroredAll)) mirroredAll = [];
+ let historyNames = [];
+ try { historyNames = await historyNamesRes.json(); } catch (_) { }
+ if (!Array.isArray(historyNames)) historyNames = [];
+
+ if (!data.success || !data.playlists) {
+ if (container) container.innerHTML = `
+
`).join('')}
+
+
+
+
+
+
+
+
+ ${data.error || 'Could not load server playlists'}
`;
+ return;
+ }
+
+ // Separate synced vs non-synced playlists
+ const mirroredNames = new Set(mirroredAll.map(p => p.name.trim().toLowerCase()));
+ const syncedNames = new Set(historyNames.map(n => n.trim().toLowerCase()));
+ const synced = [];
+ const unsynced = [];
+ for (const pl of data.playlists) {
+ const key = pl.name.trim().toLowerCase();
+ if (mirroredNames.has(key) || syncedNames.has(key)) {
+ pl._synced = true;
+ synced.push(pl);
+ } else {
+ pl._synced = false;
+ unsynced.push(pl);
+ }
+ }
+
+ _serverPlaylists = [...synced, ...unsynced];
+ const title = document.getElementById('server-tab-title');
+ const serverName = data.server_type ? data.server_type.charAt(0).toUpperCase() + data.server_type.slice(1) : '';
+ if (title) title.textContent = `Server Playlists (${serverName})`;
+
+ if (synced.length === 0 && unsynced.length === 0) {
+ if (container) container.innerHTML = 'No playlists found on your media server.
';
+ return;
+ }
+
+ // Server type icon SVG
+ const serverIcons = {
+ plex: '',
+ jellyfin: '',
+ navidrome: ''
+ };
+ const sIcon = serverIcons[data.server_type] || serverIcons.plex;
+
+ function _renderPlCard(pl, i, isSynced) {
+ const hue = (i * 37 + 200) % 360;
+ const safeName = _esc(pl.name).replace(/'/g, "\\'");
+ const cardClass = isSynced ? 'server-pl-card' : 'server-pl-card server-pl-unsynced';
+ const action = isSynced ? 'Open Editor' : 'View Tracks';
+ return `
+
+
+
`;
+ }
+
+ let html = '';
+
+ if (synced.length > 0) {
+ html += `
+
+
+ ${sIcon}
+
+
+
+ ${_esc(pl.name)}
+
+
+
`;
+ }
+
+ if (unsynced.length > 0) {
+ html += `
+
+ Synced Playlists
+ ${synced.length}
+
+ ${synced.map((pl, i) => _renderPlCard(pl, i, true)).join('')}
+
+
`;
+ }
+
+ container.innerHTML = html;
+
+ } catch (e) {
+ if (container) container.innerHTML = `
+
+ Other Server Playlists
+ ${unsynced.length}
+
+ ${unsynced.map((pl, i) => _renderPlCard(pl, i + synced.length, false)).join('')}
+ Error: ${e.message}
`;
+ } finally {
+ if (btn) { btn.disabled = false; btn.textContent = '🔄 Refresh'; }
+ }
+}
+
+async function openServerPlaylistEditor(playlistId, playlistName) {
+ // Step 1: Look up mirrored playlists by name
+ let mirroredPlaylists = [];
+ try {
+ const res = await fetch('/api/mirrored-playlists');
+ const all = await res.json();
+ mirroredPlaylists = (Array.isArray(all) ? all : []).filter(p =>
+ p.name.trim().toLowerCase() === playlistName.trim().toLowerCase()
+ );
+ } catch (e) {
+ console.error('Failed to fetch mirrored playlists:', e);
+ }
+
+ if (mirroredPlaylists.length === 1) {
+ // Single match — go straight to compare
+ _openServerCompareView(playlistId, playlistName, mirroredPlaylists[0]);
+ } else if (mirroredPlaylists.length === 0) {
+ // No match — server-only view
+ _openServerCompareView(playlistId, playlistName, null);
+ } else {
+ // Multiple — disambiguation
+ _showServerDisambig(playlistId, playlistName, mirroredPlaylists);
+ }
+}
+
+// ── Disambiguation ──
+
+function _showServerDisambig(playlistId, playlistName, candidates) {
+ const overlay = document.getElementById('server-disambig-overlay');
+ const list = document.getElementById('server-disambig-list');
+ const subtitle = document.getElementById('server-disambig-subtitle');
+ if (!overlay || !list) return;
+
+ if (subtitle) subtitle.textContent = `"${playlistName}" was found on ${candidates.length} sources. Which one do you want to compare against?`;
+
+ const sourceIcons = { spotify: '🟢', tidal: '🌊', youtube: '▶️', beatport: '🎛️', deezer: '🟣', file: '📄' };
+
+ list.innerHTML = candidates.map((p, i) => {
+ const icon = sourceIcons[p.source] || '📋';
+ const ago = timeAgo(p.mirrored_at || p.updated_at);
+ return `
+
+
+
`;
+ }).join('');
+
+ overlay.classList.remove('hidden');
+ requestAnimationFrame(() => overlay.classList.add('visible'));
+
+ // Escape key + click backdrop to close
+ overlay.onclick = e => { if (e.target === overlay) closeServerDisambig(); };
+ window._disambigEsc = e => { if (e.key === 'Escape') closeServerDisambig(); };
+ document.addEventListener('keydown', window._disambigEsc);
+}
+
+function closeServerDisambig() {
+ const overlay = document.getElementById('server-disambig-overlay');
+ if (overlay) {
+ overlay.classList.remove('visible');
+ setTimeout(() => overlay.classList.add('hidden'), 250);
+ }
+ if (window._disambigEsc) { document.removeEventListener('keydown', window._disambigEsc); window._disambigEsc = null; }
+}
+
+async function selectDisambigPlaylist(playlistId, playlistName, mirroredId) {
+ closeServerDisambig();
+ try {
+ const res = await fetch(`/api/mirrored-playlists/${mirroredId}`);
+ const mirrored = await res.json();
+ _openServerCompareView(playlistId, playlistName, mirrored);
+ } catch (e) {
+ showToast('Failed to load mirrored playlist: ' + e.message, 'error');
+ }
+}
+
+// ── Compare View ──
+
+async function _openServerCompareView(playlistId, playlistName, mirroredPlaylist) {
+ const container = document.getElementById('server-playlist-container');
+ const editor = document.getElementById('server-editor');
+ if (!editor) return;
+
+ if (container) container.style.display = 'none';
+ editor.style.display = '';
+
+ const nameEl = document.getElementById('server-editor-name');
+ const metaEl = document.getElementById('server-editor-meta');
+ const banner = document.getElementById('server-no-source-banner');
+ const sourceScroll = document.getElementById('server-col-source-scroll');
+ const serverScroll = document.getElementById('server-col-server-scroll');
+
+ if (nameEl) nameEl.textContent = playlistName;
+ if (metaEl) metaEl.textContent = 'Loading comparison...';
+ if (banner) banner.style.display = 'none';
+ if (sourceScroll) sourceScroll.innerHTML = '
+
+ ${_esc(p.name)}
+
+ ${_esc(p.source)}
+ ${p.track_count || 0} tracks
+ ${p.owner ? `by ${_esc(p.owner)}` : ''}
+ Mirrored ${ago}
+
+
+
+
+ Loading...
';
+ if (serverScroll) serverScroll.innerHTML = 'Loading...
';
+
+ // Store state
+ _serverEditorState = {
+ playlistId,
+ playlistName,
+ mirroredPlaylist,
+ tracks: [],
+ };
+
+ // Build API URL
+ let url = `/api/server/playlist/${playlistId}/tracks?name=${encodeURIComponent(playlistName)}`;
+ if (mirroredPlaylist && mirroredPlaylist.id) {
+ url += `&mirrored_playlist_id=${mirroredPlaylist.id}`;
+ }
+
+ try {
+ const response = await fetch(url);
+ const data = await response.json();
+ if (!data.success) {
+ if (metaEl) metaEl.textContent = data.error || 'Failed to load';
+ return;
+ }
+
+ _serverEditorState.tracks = data.tracks || [];
+ _serverEditorState.serverType = data.server_type;
+
+ const tracks = _serverEditorState.tracks;
+ const serverLabel = data.server_type ? data.server_type.charAt(0).toUpperCase() + data.server_type.slice(1) : 'Server';
+
+ // Header metadata
+ if (metaEl) metaEl.textContent = `${serverLabel} · ${data.server_track_count || 0} server tracks · ${data.source_track_count || 0} source tracks`;
+
+ // Show no-source banner if needed
+ if (!mirroredPlaylist && banner) {
+ banner.style.display = '';
+ }
+
+ // Stats, filter counts, footer
+ _updateCompareStats(tracks);
+
+ // Column headers
+ const sourceLabel = mirroredPlaylist ? (mirroredPlaylist.source || 'source').charAt(0).toUpperCase() + (mirroredPlaylist.source || 'source').slice(1) : 'Source';
+ const sourceIconMap = { spotify: '🟢', tidal: '🌊', youtube: '▶️', beatport: '🎛️', deezer: '🟣', file: '📄' };
+ const serverIconMap = { plex: '🟠', jellyfin: '🟣', navidrome: '🔵' };
+
+ const srcIconEl = document.getElementById('server-col-source-icon');
+ const srcLabelEl = document.getElementById('server-col-source-label');
+ const srcCountEl = document.getElementById('server-col-source-count');
+ const svrIconEl = document.getElementById('server-col-server-icon');
+ const svrLabelEl = document.getElementById('server-col-server-label');
+ const svrCountEl = document.getElementById('server-col-server-count');
+
+ if (srcIconEl) srcIconEl.textContent = mirroredPlaylist ? (sourceIconMap[mirroredPlaylist.source] || '📋') : '📋';
+ if (srcLabelEl) srcLabelEl.textContent = sourceLabel;
+ if (srcCountEl) srcCountEl.textContent = `${data.source_track_count || 0} tracks`;
+ if (svrIconEl) svrIconEl.textContent = serverIconMap[data.server_type] || '💻';
+ if (svrLabelEl) svrLabelEl.textContent = serverLabel;
+ if (svrCountEl) svrCountEl.textContent = `${data.server_track_count || 0} tracks`;
+
+ // Render columns
+ _renderCompareColumns(tracks);
+
+ // Scroll linking
+ _setupScrollLinking();
+
+ } catch (e) {
+ if (metaEl) metaEl.textContent = 'Error: ' + e.message;
+ }
+}
+
+function _updateCompareStats(tracks) {
+ const matched = tracks.filter(t => t.match_status === 'matched').length;
+ const missing = tracks.filter(t => t.match_status === 'missing').length;
+ const extra = tracks.filter(t => t.match_status === 'extra').length;
+
+ const statsEl = document.getElementById('server-editor-stats');
+ if (statsEl) {
+ statsEl.innerHTML = `
+ ${matched}
Matched
${missing}
Missing
${extra}
Extra
+
`;
+ } else {
+ // Extra track — no source
+ sourceHTML += `
+ ${src.position != null ? src.position : i + 1}
+
+ ${src.image_url ? `
` : ''}
+
+
+
+ ${_esc(src.name)}
+ ${_esc(src.artist || '')}
+ ${dur}
+
+
+
`;
+ }
+
+ // ── Server (right) column ──
+ if (svr) {
+ const dur = _formatDurationMs(svr.duration);
+ const conf = t.confidence != null ? t.confidence : null;
+ let confBadge = '';
+ if (status === 'matched' && conf != null) {
+ const pct = Math.round(conf * 100);
+ const cls = pct >= 100 ? 'exact' : pct >= 90 ? 'high' : 'fuzzy';
+ confBadge = `${pct}%`;
+ }
+ serverHTML += `
+
+ No source track
+
+
+
`;
+ } else {
+ // Missing on server — clickable empty slot
+ const hint = src ? `${src.artist || ''} — ${src.name}` : '';
+ serverHTML += `
+ ${i + 1}
+
+ ${svr.thumb ? `
` : ''}
+
+
+
+ ${confBadge}
+ ${_esc(svr.title)}
+ ${_esc(svr.artist || '')}
+ ${dur}
+
+ ${status === 'matched' ? `` : ''}
+
+
+
+
+
`;
+ }
+ });
+
+ sourceScroll.innerHTML = sourceHTML;
+ serverScroll.innerHTML = serverHTML;
+}
+
+function _setupScrollLinking() {
+ const sourceScroll = document.getElementById('server-col-source-scroll');
+ const serverScroll = document.getElementById('server-col-server-scroll');
+ if (!sourceScroll || !serverScroll) return;
+
+ // Remove old listeners to prevent accumulation on refresh
+ if (window._serverScrollAC) window._serverScrollAC.abort();
+ window._serverScrollAC = new AbortController();
+ const signal = window._serverScrollAC.signal;
+
+ let syncing = false;
+
+ const syncScroll = (from, to) => {
+ if (syncing) return;
+ syncing = true;
+ const maxFrom = from.scrollHeight - from.clientHeight;
+ const maxTo = to.scrollHeight - to.clientHeight;
+ if (maxFrom > 0 && maxTo > 0) {
+ to.scrollTop = (from.scrollTop / maxFrom) * maxTo;
+ }
+ requestAnimationFrame(() => { syncing = false; });
+ };
+
+ sourceScroll.addEventListener('scroll', () => syncScroll(sourceScroll, serverScroll), { signal });
+ serverScroll.addEventListener('scroll', () => syncScroll(serverScroll, sourceScroll), { signal });
+}
+
+function _compareTrackClick(side, index) {
+ const otherSide = side === 'source' ? 'server' : 'source';
+ const otherScroll = document.getElementById(`server-col-${otherSide}-scroll`);
+ const pairId = `pair-${index}`;
+
+ // Clear previous highlights
+ document.querySelectorAll('.server-track-item.highlighted').forEach(el => el.classList.remove('highlighted'));
+
+ // Highlight both paired items
+ document.querySelectorAll(`[data-pair-id="${pairId}"]`).forEach(el => el.classList.add('highlighted'));
+
+ // Scroll the OTHER column to show the paired item
+ const target = otherScroll?.querySelector(`[data-pair-id="${pairId}"]`);
+ if (target) {
+ target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ }
+}
+
+function _serverEditorRefresh() {
+ _openServerCompareView(_serverEditorState.playlistId, _serverEditorState.playlistName, _serverEditorState.mirroredPlaylist);
+}
+
+function serverEditorBack() {
+ const container = document.getElementById('server-playlist-container');
+ const editor = document.getElementById('server-editor');
+ if (editor) editor.style.display = 'none';
+ if (container) container.style.display = '';
+}
+
+function _serverEditorFilter(btn, filter) {
+ btn.closest('.server-editor-filters').querySelectorAll('.discog-filter').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+
+ // Filter both columns simultaneously
+ ['server-col-source-scroll', 'server-col-server-scroll'].forEach(colId => {
+ document.querySelectorAll(`#${colId} .server-track-item`).forEach(item => {
+ const status = item.dataset.status;
+ item.style.display = (filter === 'all' || status === filter) ? '' : 'none';
+ });
+ });
+}
+
+// ── Track Search / Replace ──
+
+async function serverSearchReplace(trackIndex, mode) {
+ const track = _serverEditorState.tracks[trackIndex];
+ if (!track) return;
+
+ const src = track.source_track || {};
+ const svr = track.server_track || {};
+ // Search by track name only first (more reliable than "artist trackname" blob)
+ const searchQuery = src.name ? src.name.trim() : (svr.title || '').trim();
+ const contextArtist = src.artist || svr.artist || '';
+ const contextName = src.name || svr.title || '';
+
+ const existing = document.getElementById('server-search-overlay');
+ if (existing) existing.remove();
+
+ const overlay = document.createElement('div');
+ overlay.id = 'server-search-overlay';
+ overlay.className = 'server-search-overlay';
+ overlay.innerHTML = `
+
+
+ Find & add
+ ${_esc(hint)}
+
+
+
+ `;
+ // Click overlay background or press Escape to close
+ overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
+ overlay._escHandler = e => { if (e.key === 'Escape') overlay.remove(); };
+ document.addEventListener('keydown', overlay._escHandler);
+ // Clean up Escape listener when overlay is removed
+ const obs = new MutationObserver(() => {
+ if (!document.body.contains(overlay)) { document.removeEventListener('keydown', overlay._escHandler); obs.disconnect(); }
+ });
+ obs.observe(document.body, { childList: true });
+
+ const popover = overlay.querySelector('.server-search-popover');
+ popover.dataset.trackIndex = trackIndex;
+ popover.dataset.mode = mode;
+
+ document.body.appendChild(overlay);
+ requestAnimationFrame(() => overlay.classList.add('visible'));
+ document.getElementById('server-search-input')?.focus();
+ document.getElementById('server-search-input')?.select();
+
+ _serverSearchExecute();
+}
+
+async function _serverSearchExecute() {
+ const input = document.getElementById('server-search-input');
+ const results = document.getElementById('server-search-results');
+ const resultsHeader = document.getElementById('server-search-results-header');
+ const popover = document.getElementById('server-search-popover');
+ if (!input || !results || !popover) return;
+
+ const query = input.value.trim();
+ if (!query) {
+ results.innerHTML = '
+
+
+
+
+ ${mode === 'replace' ? 'Swap Track' : 'Add Track to Server'}
+ ${contextName ? `
+ Source:
+ ${_esc(contextArtist)}
+ —
+ ${_esc(contextName)}
+
` : ''}
+
+
+
+
+
+
+
+
+
+
Searching... +
+ Searching... +
Type a search query
';
+ if (resultsHeader) resultsHeader.textContent = '';
+ return;
+ }
+
+ results.innerHTML = 'Searching library...
';
+ if (resultsHeader) resultsHeader.textContent = '';
+
+ try {
+ const response = await fetch(`/api/library/search-tracks?q=${encodeURIComponent(query)}&limit=20`);
+ const data = await response.json();
+
+ if (!data.success || !data.tracks || data.tracks.length === 0) {
+ results.innerHTML = `
+
+
No results found
Try different keywords or a shorter query +
`;
+ return;
+ }
+
+ const trackIndex = parseInt(popover.dataset.trackIndex);
+ const mode = popover.dataset.mode;
+
+ if (resultsHeader) resultsHeader.textContent = `${data.tracks.length} result${data.tracks.length !== 1 ? 's' : ''}`;
+
+ results.innerHTML = data.tracks.map((t, i) => {
+ const ext = (t.file_path || '').split('.').pop().toUpperCase();
+ const format = ['FLAC', 'MP3', 'OPUS', 'OGG', 'M4A', 'AAC', 'WAV'].includes(ext) ? (ext === 'M4A' ? 'AAC' : ext) : '';
+ const dur = _formatDurationMs(t.duration);
+ const bitrateStr = t.bitrate ? `${t.bitrate}k` : '';
+ return `
+ No results found
Try different keywords or a shorter query +
+
+ `;
+ }).join('');
+
+ } catch (e) {
+ results.innerHTML = `
+ ${t.album_thumb_url ? `
` : ''}
+
+
+
+ ${_esc(t.title)}
+
+
+ ${format ? `${format}` : ''}
+ ${bitrateStr ? `${bitrateStr}` : ''}
+ ${dur ? `${dur}` : ''}
+
+
+ Error: ${e.message}
`;
+ }
+}
+
+async function _serverSelectTrack(trackIndex, mode, newTrackId, el) {
+ const track = _serverEditorState.tracks[trackIndex];
+ if (!track) return;
+
+ const btn = el.querySelector('.server-search-select-btn');
+ if (btn) { btn.disabled = true; btn.textContent = '...'; }
+
+ try {
+ let response;
+ if (mode === 'replace') {
+ response = await fetch(`/api/server/playlist/${_serverEditorState.playlistId}/replace-track`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ old_track_id: track.server_track?.id,
+ new_track_id: newTrackId,
+ playlist_name: _serverEditorState.playlistName,
+ })
+ });
+ } else {
+ // Calculate the server-side position for this track
+ // Count how many server tracks exist before this index
+ let serverPos = 0;
+ for (let k = 0; k < trackIndex; k++) {
+ if (_serverEditorState.tracks[k]?.server_track) serverPos++;
+ }
+ response = await fetch(`/api/server/playlist/${_serverEditorState.playlistId}/add-track`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ track_id: newTrackId,
+ playlist_name: _serverEditorState.playlistName,
+ position: serverPos,
+ })
+ });
+ }
+
+ const data = await response.json();
+ if (data.success) {
+ showToast(data.message || 'Track updated', 'success');
+ document.getElementById('server-search-overlay')?.remove();
+ // Update playlist ID if server recreated it (Plex deletes+recreates)
+ if (data.new_playlist_id) _serverEditorState.playlistId = data.new_playlist_id;
+
+ // Re-fetch from server so the compare view reflects the actual server state
+ // and the matching algorithm can correctly wire up the newly added/replaced track
+ _openServerCompareView(_serverEditorState.playlistId, _serverEditorState.playlistName, _serverEditorState.mirroredPlaylist);
+ } else {
+ showToast(data.error || 'Failed to update track', 'error');
+ if (btn) { btn.disabled = false; btn.textContent = 'Select'; }
+ }
+ } catch (e) {
+ showToast('Error: ' + e.message, 'error');
+ if (btn) { btn.disabled = false; btn.textContent = 'Select'; }
+ }
+}
+
+async function _serverRemoveTrack(trackIndex, serverTrackId) {
+ if (!serverTrackId) return;
+
+ const track = _serverEditorState.tracks[trackIndex];
+ const trackTitle = track?.server_track?.title || 'this track';
+
+ if (!await showConfirmDialog({ title: 'Remove Track', message: `Remove "${trackTitle}" from this playlist?`, confirmText: 'Remove', destructive: true })) return;
+
+ try {
+ const response = await fetch(`/api/server/playlist/${_serverEditorState.playlistId}/remove-track`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ track_id: serverTrackId,
+ playlist_name: _serverEditorState.playlistName,
+ })
+ });
+
+ const data = await response.json();
+ if (data.success) {
+ showToast(data.message || 'Track removed', 'success');
+ const pid = data.new_playlist_id || _serverEditorState.playlistId;
+ _serverEditorState.playlistId = pid;
+ _openServerCompareView(pid, _serverEditorState.playlistName, _serverEditorState.mirroredPlaylist);
+ } else {
+ showToast(data.error || 'Failed to remove track', 'error');
+ }
+ } catch (e) {
+ showToast('Error: ' + e.message, 'error');
+ }
+}
+
+
+// Auto-refresh sync cards every 30 seconds when on dashboard
+setInterval(() => {
+ if (typeof currentPage !== 'undefined' && currentPage === 'dashboard') {
+ loadDashboardSyncHistory();
+ }
+}, 30000);
+
+async function loadDashboardSyncHistory() {
+ const container = document.getElementById('sync-history-cards');
+ if (!container) return;
+
+ try {
+ const response = await fetch('/api/sync/history?limit=10');
+ if (!response.ok) return;
+
+ const data = await response.json();
+ // Filter to only show playlist syncs — not album downloads or wishlist processing
+ const entries = (data.entries || []).filter(e => e.sync_type === 'playlist' || !e.sync_type);
+
+ if (entries.length === 0) {
+ container.innerHTML = 'No syncs yet
';
+ return;
+ }
+
+ container.innerHTML = entries.map((entry, cardIndex) => {
+ const found = entry.tracks_found || 0;
+ const total = entry.total_tracks || 0;
+ const downloaded = entry.tracks_downloaded || 0;
+ const failed = entry.tracks_failed || 0;
+ const pct = total > 0 ? Math.round((found / total) * 100) : 0;
+
+ // Health color
+ let healthClass = 'health-good';
+ if (pct < 50) healthClass = 'health-bad';
+ else if (pct < 80) healthClass = 'health-warn';
+
+ // Source badge
+ const sourceLabels = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer', youtube: 'YouTube', beatport: 'Beatport', wishlist: 'Wishlist' };
+ const sourceLabel = sourceLabels[entry.source] || entry.source || 'Unknown';
+
+ // Time
+ const timeStr = entry.started_at ? _relativeTime(entry.started_at) : '';
+
+ // Name
+ const name = entry.artist_name
+ ? `${entry.artist_name} — ${entry.album_name || entry.playlist_name}`
+ : entry.playlist_name || 'Unknown';
+
+ return `
+
+
+
+ `;
+ }).join('');
+
+ } catch (e) {
+ console.warn('Failed to load sync history for dashboard:', e);
+ }
+}
+
+function _relativeTime(dateStr) {
+ try {
+ const d = new Date(dateStr);
+ const now = new Date();
+ const diffMs = now - d;
+ const mins = Math.floor(diffMs / 60000);
+ if (mins < 1) return 'just now';
+ if (mins < 60) return `${mins}m ago`;
+ const hrs = Math.floor(mins / 60);
+ if (hrs < 24) return `${hrs}h ago`;
+ const days = Math.floor(hrs / 24);
+ if (days < 7) return `${days}d ago`;
+ return d.toLocaleDateString();
+ } catch (e) { return ''; }
+}
+
+async function openSyncDetailModal(entryId) {
+ try {
+ showLoadingOverlay('Loading sync details...');
+ const response = await fetch(`/api/sync/history/${entryId}`);
+ const data = await response.json();
+ hideLoadingOverlay();
+
+ if (!data.success || !data.entry) {
+ showToast('Could not load sync details', 'error');
+ return;
+ }
+
+ const entry = data.entry;
+ const trackResults = entry.track_results || [];
+ const name = entry.artist_name
+ ? `${entry.artist_name} — ${entry.album_name || entry.playlist_name}`
+ : entry.playlist_name || 'Unknown';
+
+ // Build modal
+ const overlay = document.createElement('div');
+ overlay.className = 'discog-modal-overlay';
+ overlay.id = 'sync-detail-overlay';
+
+ const found = entry.tracks_found || 0;
+ const total = entry.total_tracks || 0;
+ const downloaded = entry.tracks_downloaded || 0;
+
+ let trackRowsHtml = '';
+ if (trackResults.length > 0) {
+ trackRowsHtml = trackResults.map((t, i) => {
+ const statusIcon = t.status === 'found' ? '✅' : '❌';
+ const statusClass = t.status === 'found' ? 'matched' : 'unmatched';
+ const confPct = Math.round((t.confidence || 0) * 100);
+ const confClass = confPct >= 80 ? 'conf-high' : confPct >= 50 ? 'conf-mid' : 'conf-low';
+ let dlIcon = '';
+ if (t.download_status === 'completed') dlIcon = '✅';
+ else if (t.download_status === 'failed') dlIcon = '❌';
+ else if (t.download_status === 'not_found') dlIcon = '🔇';
+ else if (t.download_status === 'cancelled') dlIcon = '🚫';
+
+ let dlDisplay = dlIcon;
+ if (!dlDisplay && t.download_status === 'wishlist') dlDisplay = '→ Wishlist';
+
+ return `
+
+ ${entry.thumb_url ? `
` : '
+ ♫
'}
+
+
+ ${typeof _esc === 'function' ? _esc(name) : name}
+
+
+
+ ${pct}%
+
+ ${found}/${total} matched${downloaded > 0 ? ` · ${downloaded} ⬇` : ''}${failed > 0 ? ` · ${failed} ✗` : ''}
+ Per-track match data not available for this sync.
Re-sync this playlist to see detailed match results.
+ Re-sync this playlist to see detailed match results.
+
+ `;
+
+ document.body.appendChild(overlay);
+ requestAnimationFrame(() => overlay.classList.add('visible'));
+
+ } catch (e) {
+ hideLoadingOverlay();
+ showToast('Failed to load sync details', 'error');
+ }
+}
+
+async function deleteSyncHistoryCard(entryId, btnEl) {
+ try {
+ const card = btnEl.closest('.sync-history-card');
+ if (card) {
+ card.style.opacity = '0';
+ card.style.transform = 'scale(0.9)';
+ }
+ const resp = await fetch(`/api/sync/history/${entryId}`, { method: 'DELETE' });
+ if (resp.ok) {
+ setTimeout(() => { if (card) card.remove(); }, 200);
+ }
+ } catch (e) {
+ console.warn('Failed to delete sync entry:', e);
+ }
+}
+
+function _syncDetailFilter(btn, filter) {
+ // Update active button
+ btn.closest('.discog-filters').querySelectorAll('.discog-filter').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+
+ // Filter rows
+ document.querySelectorAll('#sync-detail-tbody .sync-detail-row').forEach(row => {
+ if (filter === 'all') {
+ row.style.display = '';
+ } else if (filter === 'matched') {
+ row.style.display = row.classList.contains('matched') ? '' : 'none';
+ } else if (filter === 'unmatched') {
+ row.style.display = row.classList.contains('unmatched') ? '' : 'none';
+ } else if (filter === 'downloaded') {
+ const dlCell = row.querySelector('.sync-detail-dl');
+ row.style.display = dlCell && dlCell.textContent.trim() === '✅' ? '' : 'none';
+ }
+ });
+}
+
+
+// ============================================
+// ACTIVE DOWNLOADS PAGE — Centralized Live View
+// ============================================
+
+let _adlPoller = null;
+let _adlFilter = 'all';
+let _adlData = [];
+let _adlBatches = [];
+let _adlBatchHistory = [];
+let _adlExpandedBatches = new Set();
+let _adlBatchHistoryPoller = null;
+let _adlFilterBatchId = null; // When set, main list shows only this batch
+const _batchColorMap = {};
+const _batchCompletedAt = {}; // batch_id -> timestamp when first seen as complete
+let _batchColorNext = 0;
+
+function _getBatchColor(batchId) {
+ if (!batchId) return -1;
+ if (_batchColorMap[batchId] === undefined) {
+ // Deterministic color from batch_id hash for consistency across reloads
+ let hash = 0;
+ for (let i = 0; i < batchId.length; i++) hash = ((hash << 5) - hash + batchId.charCodeAt(i)) | 0;
+ _batchColorMap[batchId] = Math.abs(hash) % 8;
+ }
+ return _batchColorMap[batchId];
+}
+
+function loadActiveDownloadsPage() {
+ _adlFetch();
+ _adlFetchBatchHistory();
+ // Poll downloads every 2 seconds, history every 60 seconds
+ if (_adlPoller) clearInterval(_adlPoller);
+ _adlPoller = setInterval(() => {
+ if (currentPage === 'active-downloads') _adlFetch();
+ else { clearInterval(_adlPoller); _adlPoller = null; }
+ }, 2000);
+ if (_adlBatchHistoryPoller) clearInterval(_adlBatchHistoryPoller);
+ _adlBatchHistoryPoller = setInterval(() => {
+ if (currentPage === 'active-downloads') _adlFetchBatchHistory();
+ else { clearInterval(_adlBatchHistoryPoller); _adlBatchHistoryPoller = null; }
+ }, 60000);
+}
+
+function adlSetFilter(filter) {
+ _adlFilter = filter;
+ document.querySelectorAll('#adl-filter-pills .adl-pill').forEach(p => p.classList.toggle('active', p.dataset.filter === filter));
+ _adlRender();
+}
+
+async function _adlFetch() {
+ try {
+ const resp = await fetch('/api/downloads/all?limit=300');
+ const data = await resp.json();
+ if (data.success) {
+ _adlData = data.downloads || [];
+ _adlBatches = data.batches || [];
+ _adlRender();
+ _adlRenderBatchPanel();
+ // Don't call _adlUpdateBadge() here — it counts the truncated
+ // 300-item local array. The WebSocket status push already
+ // maintains the badge with the real server-side active count.
+ }
+ } catch (e) {
+ console.error('Downloads page fetch error:', e);
+ }
+}
+
+function _adlUpdateBadge() {
+ const activeCount = _adlData.filter(d => ['downloading', 'searching', 'queued', 'pending', 'post_processing'].includes(d.status)).length;
+ _updateDlNavBadge(activeCount);
+}
+
+function _updateDlNavBadge(count) {
+ const badge = document.getElementById('dl-nav-badge');
+ if (badge) {
+ if (count > 0) {
+ badge.textContent = count;
+ badge.classList.remove('hidden');
+ } else {
+ badge.classList.add('hidden');
+ }
+ }
+}
+
+function _adlRender() {
+ const list = document.getElementById('adl-list');
+ const empty = document.getElementById('adl-empty');
+ const countEl = document.getElementById('adl-count');
+ if (!list) return;
+
+ // Apply filter
+ const activeStatuses = ['downloading', 'searching', 'post_processing'];
+ const queuedStatuses = ['queued'];
+ const completedStatuses = ['completed', 'skipped', 'already_owned'];
+ const failedStatuses = ['failed', 'not_found', 'cancelled'];
+
+ let filtered = _adlData;
+
+ // Batch filter: if a batch card is selected, narrow to that batch first
+ if (_adlFilterBatchId) {
+ filtered = filtered.filter(d => d.batch_id === _adlFilterBatchId);
+ }
+
+ if (_adlFilter === 'active') filtered = filtered.filter(d => activeStatuses.includes(d.status));
+ else if (_adlFilter === 'queued') filtered = filtered.filter(d => queuedStatuses.includes(d.status));
+ else if (_adlFilter === 'completed') filtered = filtered.filter(d => completedStatuses.includes(d.status));
+ else if (_adlFilter === 'failed') filtered = filtered.filter(d => failedStatuses.includes(d.status));
+
+ const completedN = _adlData.filter(d => [...completedStatuses, ...failedStatuses].includes(d.status)).length;
+
+ if (countEl) {
+ const activeN = _adlData.filter(d => activeStatuses.includes(d.status)).length;
+ const queuedN = _adlData.filter(d => queuedStatuses.includes(d.status)).length;
+ const total = _adlData.length;
+ const parts = [];
+ if (activeN > 0) parts.push(`${activeN} active`);
+ if (queuedN > 0) parts.push(`${queuedN} queued`);
+ parts.push(`${total} total`);
+ countEl.textContent = parts.join(' / ');
+ }
+
+ // Show/hide clear button
+ const clearBtn = document.getElementById('adl-clear-btn');
+ if (clearBtn) clearBtn.style.display = completedN > 0 ? '' : 'none';
+
+ // Show/hide cancel-all button — only visible when there's something to cancel
+ const cancelAllBtn = document.getElementById('adl-cancel-all-btn');
+ if (cancelAllBtn) {
+ const hasRunningWork = _adlData.some(d =>
+ [...activeStatuses, ...queuedStatuses].includes(d.status)
+ );
+ cancelAllBtn.style.display = hasRunningWork ? '' : 'none';
+ }
+
+ // Batch filter indicator banner
+ let existingBanner = document.getElementById('adl-batch-filter-banner');
+ if (_adlFilterBatchId) {
+ const batchInfo = _adlBatches.find(b => b.batch_id === _adlFilterBatchId);
+ const batchName = batchInfo ? batchInfo.batch_name : 'Unknown batch';
+ const colorIdx = _getBatchColor(_adlFilterBatchId);
+ const colorDot = colorIdx >= 0 ? `` : '';
+ if (!existingBanner) {
+ existingBanner = document.createElement('div');
+ existingBanner.id = 'adl-batch-filter-banner';
+ existingBanner.className = 'adl-batch-filter-banner';
+ list.parentNode.insertBefore(existingBanner, list);
+ }
+ existingBanner.innerHTML = `${colorDot}Showing: ${_adlEsc(batchName)} `;
+ existingBanner.style.display = '';
+ } else if (existingBanner) {
+ existingBanner.style.display = 'none';
+ }
+
+ if (filtered.length === 0) {
+ if (empty) empty.style.display = '';
+ // Clear any existing rows but keep the empty message
+ list.querySelectorAll('.adl-row').forEach(r => r.remove());
+ return;
+ }
+
+ if (empty) empty.style.display = 'none';
+
+ // Group by status category for section headers
+ const groups = { active: [], queued: [], completed: [], failed: [] };
+ for (const dl of filtered) {
+ const cls = _adlStatusClass(dl.status);
+ if (cls === 'active') groups.active.push(dl);
+ else if (cls === 'queued') groups.queued.push(dl);
+ else if (cls === 'completed') groups.completed.push(dl);
+ else groups.failed.push(dl);
+ }
+
+ let html = '';
+ const sections = [
+ { key: 'active', label: 'Active', items: groups.active },
+ { key: 'queued', label: 'Queued', items: groups.queued },
+ { key: 'completed', label: 'Completed', items: groups.completed },
+ { key: 'failed', label: 'Failed', items: groups.failed },
+ ];
+
+ for (const section of sections) {
+ if (section.items.length === 0) continue;
+ // Only show section headers in "all" filter mode
+ if (_adlFilter === 'all') {
+ html += `
+
+
+
+
+
+
+ Sync Details
+${_esc(name)}
+
+
+
+
+
+
+ | # | ++ | Track | +Artist | +Album | +Match | +Conf. | +Status | +
|---|
${section.label} (${section.items.length})
`;
+ }
+ for (const dl of section.items) {
+ const statusClass = _adlStatusClass(dl.status);
+ const statusLabel = _adlStatusLabel(dl.status);
+ const title = _adlEsc(dl.title || 'Unknown Track');
+ const artist = _adlEsc(dl.artist || '');
+ const album = _adlEsc(dl.album || '');
+ const batchName = _adlEsc(dl.batch_name || '');
+ const error = dl.error ? _adlEsc(dl.error) : '';
+
+ const meta = [artist, album].filter(Boolean).join(' \u00B7 ');
+ const artHtml = dl.artwork
+ ? `
+ ${colorBar}
+ ${artHtml}
+
`;
+ }
+ }
+
+ // Preserve empty element, inject rows
+ const emptyEl = document.getElementById('adl-empty');
+ const emptyHtml = emptyEl ? emptyEl.outerHTML : '';
+ list.innerHTML = emptyHtml + html;
+ const newEmpty = document.getElementById('adl-empty');
+ if (newEmpty) newEmpty.style.display = filtered.length > 0 ? 'none' : '';
+}
+
+function _adlStatusClass(status) {
+ switch (status) {
+ case 'downloading': case 'searching': case 'post_processing': return 'active';
+ case 'queued': case 'pending': return 'queued';
+ case 'completed': case 'skipped': case 'already_owned': return 'completed';
+ case 'failed': case 'not_found': return 'failed';
+ case 'cancelled': return 'cancelled';
+ default: return 'queued';
+ }
+}
+
+function _adlStatusLabel(status) {
+ switch (status) {
+ case 'downloading': return 'Downloading';
+ case 'searching': return 'Searching';
+ case 'post_processing': return 'Processing';
+ case 'queued': case 'pending': return 'Queued';
+ case 'completed': return 'Completed';
+ case 'skipped': return 'Skipped';
+ case 'already_owned': return 'Owned';
+ case 'failed': return 'Failed';
+ case 'not_found': return 'Not Found';
+ case 'cancelled': return 'Cancelled';
+ default: return status;
+ }
+}
+
+function _adlEsc(str) {
+ if (!str) return '';
+ return String(str).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
+}
+
+async function adlClearCompleted() {
+ try {
+ const resp = await fetch('/api/downloads/clear-completed', { method: 'POST' });
+ const data = await resp.json();
+ if (data.success) {
+ if (typeof showToast === 'function') showToast(`Cleared ${data.cleared} downloads`, 'success');
+ _adlFetch();
+ }
+ } catch (e) {
+ console.error('Error clearing completed downloads:', e);
+ }
+}
+
+// ---- Batch Context Panel ----
+
+const _BATCH_FADE_SECONDS = 15; // Remove completed batches after this many seconds
+
+function _adlRenderBatchPanel() {
+ const container = document.getElementById('adl-batch-active');
+ const headerTitle = document.querySelector('.adl-batch-panel-title');
+ if (!container) return;
+
+ const now = Date.now();
+
+ // Filter out batches that completed more than FADE seconds ago
+ const visibleBatches = _adlBatches.filter(batch => {
+ const isTerminal = batch.phase === 'complete' || batch.phase === 'cancelled' || batch.phase === 'error';
+ if (!isTerminal) {
+ delete _batchCompletedAt[batch.batch_id]; // Reset if it came back to life
+ return true;
+ }
+ if (!_batchCompletedAt[batch.batch_id]) {
+ _batchCompletedAt[batch.batch_id] = now;
+ }
+ const elapsed = (now - _batchCompletedAt[batch.batch_id]) / 1000;
+ return elapsed < _BATCH_FADE_SECONDS;
+ });
+
+ // Update header with count
+ if (headerTitle) {
+ const activeCount = visibleBatches.filter(b => b.phase !== 'complete' && b.phase !== 'cancelled' && b.phase !== 'error').length;
+ headerTitle.textContent = activeCount > 0 ? `Batches (${activeCount})` : 'Batches';
+ }
+
+ if (visibleBatches.length === 0) {
+ container.innerHTML = `
+
+ ${title}
+ ${meta ? `` : ''}
+ ${batchName ? `${batchName}${posText ? ' · Track ' + posText : ''}
` : ''}
+ ${error ? `${error}
` : ''}
+
+
+ ${statusLabel}
+
+ ${cancelBtnHtml}
+
+
+
`;
+ return;
+ }
+
+ let html = '';
+ for (const batch of visibleBatches) {
+ const colorIdx = _getBatchColor(batch.batch_id);
+ const colorStyle = colorIdx >= 0 ? `border-left-color: rgba(var(--batch-color-${colorIdx}), 0.6)` : '';
+ const isExpanded = _adlExpandedBatches.has(batch.batch_id);
+ const isFiltered = _adlFilterBatchId === batch.batch_id;
+ const total = batch.total || 1;
+ const done = batch.completed + batch.failed;
+ const pct = Math.round((done / total) * 100);
+ const hasFailed = batch.failed > 0;
+ const isTerminal = batch.phase === 'complete' || batch.phase === 'cancelled' || batch.phase === 'error';
+ const isActive = batch.phase === 'downloading' && batch.active > 0;
+
+ // Fade progress for completing batches
+ let fadeStyle = '';
+ if (isTerminal && _batchCompletedAt[batch.batch_id]) {
+ const elapsed = (now - _batchCompletedAt[batch.batch_id]) / 1000;
+ const fadeStart = _BATCH_FADE_SECONDS * 0.6;
+ if (elapsed > fadeStart) {
+ const fadeProgress = Math.min(1, (elapsed - fadeStart) / (_BATCH_FADE_SECONDS - fadeStart));
+ fadeStyle = `opacity: ${1 - fadeProgress};`;
+ }
+ }
+
+ const sourceBadge = batch.source_page
+ ? `${_adlEsc(batch.source_page)}`
+ : '';
+
+ // Phase label with icon
+ let phaseText = '';
+ let phaseIcon = '';
+ if (batch.phase === 'analysis') {
+ phaseText = 'Analyzing...';
+ phaseIcon = '';
+ } else if (batch.phase === 'downloading') {
+ phaseText = `${batch.completed}/${total} tracks`;
+ if (batch.active > 0) phaseIcon = '';
+ } else if (batch.phase === 'complete') {
+ phaseText = `Done \u2014 ${batch.completed} tracks`;
+ phaseIcon = '\u2713';
+ } else if (batch.phase === 'cancelled') {
+ phaseText = 'Cancelled';
+ } else if (batch.phase === 'error') {
+ phaseText = 'Error';
+ } else {
+ phaseText = batch.phase;
+ }
+
+ // Get first track artwork for batch thumbnail, fallback to initial
+ const batchTracks = _adlData.filter(d => d.batch_id === batch.batch_id);
+ const artworkTrack = batchTracks.find(t => t.artwork);
+ let thumbHtml;
+ if (artworkTrack) {
+ thumbHtml = `No active batches
+ Start a download from Search, Sync, or Wishlist
+ ${initial}
`;
+ }
+
+ // Build expanded tracks list with per-track progress
+ let tracksHtml = '';
+ if (isExpanded) {
+ if (batchTracks.length > 0) {
+ tracksHtml = batchTracks.map(t => {
+ const cls = _adlStatusClass(t.status);
+ const progress = t.progress || 0;
+
+ // Status indicator with detail
+ let statusHtml = '';
+ if (t.status === 'downloading' && progress > 0) {
+ statusHtml = `${Math.round(progress)}%`;
+ } else if (t.status === 'searching') {
+ statusHtml = ``;
+ } else if (t.status === 'post_processing') {
+ statusHtml = `proc`;
+ } else if (cls === 'completed') {
+ statusHtml = `\u2713`;
+ } else if (cls === 'failed') {
+ statusHtml = `\u2717`;
+ } else {
+ statusHtml = `\u00B7`;
+ }
+
+ // Mini progress bar for downloading tracks
+ const miniBar = t.status === 'downloading' && progress > 0
+ ? ``
+ : '';
+
+ return `
+ ${_adlEsc(t.title || 'Unknown')}
+ ${statusHtml}
+ ${miniBar}
+
`;
+ }).join('');
+ } else {
+ tracksHtml = 'No tracks loaded
';
+ }
+ }
+
+ const cardClasses = ['adl-batch-card'];
+ if (isExpanded) cardClasses.push('expanded');
+ if (isActive) cardClasses.push('active-glow');
+ if (isFiltered) cardClasses.push('filtered');
+
+ const playlistId = _adlEsc(batch.playlist_id || '');
+
+ html += `
+
`;
+ }
+
+ container.innerHTML = html;
+}
+
+function _adlToggleBatch(batchId) {
+ if (_adlExpandedBatches.has(batchId)) {
+ _adlExpandedBatches.delete(batchId);
+ } else {
+ _adlExpandedBatches.add(batchId);
+ }
+ _adlRenderBatchPanel();
+}
+
+function _adlOpenBatchModal(batchId, playlistId, batchName) {
+ // For wishlist batches, navigate to wishlist and show modal
+ if (playlistId === 'wishlist') {
+ const clientProcess = activeDownloadProcesses['wishlist'];
+ if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
+ clientProcess.modalElement.style.display = 'flex';
+ if (typeof WishlistModalState !== 'undefined') WishlistModalState.setVisible();
+ } else {
+ rehydrateModal({ playlist_id: playlistId, playlist_name: batchName, batch_id: batchId }, true);
+ }
+ return;
+ }
+
+ // For other batches, try to show existing modal or rehydrate
+ for (const [pid, process] of Object.entries(activeDownloadProcesses)) {
+ if (process.batchId === batchId && process.modalElement && document.body.contains(process.modalElement)) {
+ process.modalElement.style.display = 'flex';
+ return;
+ }
+ }
+ // Rehydrate from server
+ rehydrateModal({ playlist_id: playlistId, playlist_name: batchName, batch_id: batchId }, true);
+}
+
+function _adlFilterByBatch(batchId) {
+ if (_adlFilterBatchId === batchId) {
+ _adlFilterBatchId = null; // Toggle off
+ } else {
+ _adlFilterBatchId = batchId;
+ }
+ _adlRender();
+ _adlRenderBatchPanel();
+}
+
+async function adlCancelRow(btnEl, playlistId, trackIndex) {
+ // Per-row cancel on the Downloads page. Uses the same atomic cancel
+ // endpoint the modal cancel buttons use, so worker slots free properly.
+ if (!playlistId || trackIndex === undefined || trackIndex === null) {
+ showToast('Cannot cancel — missing task coordinates', 'error');
+ return;
+ }
+ // Lock the button so rapid clicks don't fire duplicate requests
+ if (btnEl) {
+ if (btnEl.dataset.cancelling === '1') return;
+ btnEl.dataset.cancelling = '1';
+ btnEl.classList.add('adl-row-cancel-pending');
+ }
+ try {
+ const resp = await fetch('/api/downloads/cancel_task_v2', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ playlist_id: playlistId,
+ track_index: trackIndex
+ })
+ });
+ const data = await resp.json();
+ if (data.success) {
+ const name = data.task_info && data.task_info.track_name ? data.task_info.track_name : 'Track';
+ showToast(`Cancelled "${name}"`, 'info');
+ _adlFetch();
+ } else {
+ showToast(data.error || 'Cancel failed', 'error');
+ if (btnEl) {
+ btnEl.dataset.cancelling = '0';
+ btnEl.classList.remove('adl-row-cancel-pending');
+ }
+ }
+ } catch (e) {
+ console.error('ADL row cancel error:', e);
+ showToast('Cancel request failed', 'error');
+ if (btnEl) {
+ btnEl.dataset.cancelling = '0';
+ btnEl.classList.remove('adl-row-cancel-pending');
+ }
+ }
+}
+
+async function _adlCancelBatch(batchId) {
+ const batch = _adlBatches.find(b => b.batch_id === batchId);
+ const batchName = batch ? batch.batch_name : 'this batch';
+ const confirmed = await showConfirmDialog({
+ title: 'Cancel Batch',
+ message: `Cancel "${batchName}"? All active and queued downloads in this batch will be stopped.`,
+ confirmText: 'Cancel Batch',
+ destructive: true
+ });
+ if (!confirmed) return;
+ try {
+ const resp = await fetch(`/api/playlists/${batchId}/cancel_batch`, { method: 'POST' });
+ const data = await resp.json();
+ if (data.success) {
+ showToast(`Cancelled ${data.cancelled_tasks} downloads`, 'info');
+ _adlFetch();
+ } else {
+ showToast(data.error || 'Failed to cancel batch', 'error');
+ }
+ } catch (e) {
+ showToast('Failed to cancel batch', 'error');
+ }
+}
+
+async function adlCancelAll() {
+ // Cancel every batch with active/queued work — equivalent to clicking
+ // "Cancel All" inside each running download modal. Uses the same
+ // /api/playlists/
+ ${thumbHtml}
+
+
+
+ ${sourceBadge}
+ ${_adlEsc(batch.batch_name || 'Download')}
+
+
+
+ ${!isTerminal ? `` : ''}
+
+
+
+
+ ${tracksHtml}
+
+ ${histDot}
+
`;
+ }).join('');
+}
+
+function adlToggleBatchHistory() {
+ const section = document.getElementById('adl-batch-history-section');
+ if (section) section.classList.toggle('expanded');
+}
+
+function adlToggleBatchPanel() {
+ const panel = document.getElementById('adl-batch-panel');
+ if (panel) panel.classList.toggle('collapsed');
+}
+
+window.adlSetFilter = adlSetFilter;
+window.adlClearCompleted = adlClearCompleted;
+window._adlToggleBatch = _adlToggleBatch;
+window._adlOpenBatchModal = _adlOpenBatchModal;
+window._adlFilterByBatch = _adlFilterByBatch;
+window._adlCancelBatch = _adlCancelBatch;
+window.adlCancelRow = adlCancelRow;
+window.adlCancelAll = adlCancelAll;
+window.adlToggleBatchHistory = adlToggleBatchHistory;
+window.adlToggleBatchPanel = adlToggleBatchPanel;
+
diff --git a/webui/static/script.js b/webui/static/script.js
deleted file mode 100644
index bac9417c..00000000
--- a/webui/static/script.js
+++ /dev/null
@@ -1,77957 +0,0 @@
-// SoulSync WebUI JavaScript - Replicating PyQt6 GUI Functionality
-
-// Global state management
-let currentPage = 'dashboard';
-let currentTrack = null;
-let isPlaying = false;
-let mediaPlayerExpanded = false;
-let searchResults = [];
-let currentStream = {
- status: 'stopped',
- progress: 0,
- track: null
-};
-let currentMusicSourceName = 'Spotify'; // 'Spotify', 'iTunes', or 'Deezer' - updated from status endpoint
-
-// Streaming state management (enhanced functionality)
-let streamStatusPoller = null;
-let audioPlayer = null;
-let streamPollingRetries = 0;
-let streamPollingInterval = 1000; // Start with 1-second polling
-const maxStreamPollingRetries = 10;
-let allSearchResults = [];
-let currentFilterType = 'all';
-let currentFilterFormat = 'all';
-let currentSortBy = 'quality_score';
-let isSortReversed = false;
-let searchAbortController = null;
-let dbStatsInterval = null;
-let dbUpdateStatusInterval = null;
-let qualityScannerStatusInterval = null;
-let duplicateCleanerStatusInterval = null;
-let wishlistCountInterval = null;
-let wishlistCountdownInterval = null; // Countdown timer for wishlist overview modal
-let watchlistCountdownInterval = null; // Countdown timer for watchlist overview modal
-
-// Page state for Watchlist & Wishlist sidebar pages
-let watchlistPageState = { isInitialized: false, artists: [] };
-let wishlistPageState = { isInitialized: false };
-
-// --- Add these globals for the Sync Page ---
-let spotifyPlaylists = [];
-let selectedPlaylists = new Set();
-let activeSyncPollers = {}; // Key: playlist_id, Value: intervalId
-// Phase 5: WebSocket sync/discovery/scan state
-let _syncProgressCallbacks = {};
-let _discoveryProgressCallbacks = {};
-let _lastWatchlistScanStatus = null;
-let _lastMediaScanStatus = null;
-let _lastWishlistStats = null;
-let playlistTrackCache = {}; // Key: playlist_id, Value: tracks array
-let spotifyPlaylistsLoaded = false;
-let activeDownloadProcesses = {};
-let sequentialSyncManager = null;
-
-// --- YouTube Playlist State Management ---
-let youtubePlaylistStates = {}; // Key: url_hash, Value: playlist state
-let activeYouTubePollers = {}; // Key: url_hash, Value: intervalId
-
-// --- Tidal Playlist State Management (Similar to YouTube but loads from API like Spotify) ---
-let tidalPlaylists = [];
-let tidalPlaylistStates = {}; // Key: playlist_id, Value: playlist state with phases
-let tidalPlaylistsLoaded = false;
-let deezerPlaylists = [];
-let deezerPlaylistStates = {};
-let deezerArlPlaylists = [];
-let deezerArlPlaylistsLoaded = false;
-
-// --- Beatport Chart State Management (Similar to YouTube/Tidal) ---
-let beatportChartStates = {}; // Key: chart_hash, Value: chart state with phases
-let beatportContentState = {
- loaded: false,
- loadingPromise: null,
- abortController: null
-};
-
-function getBeatportContentSignal() {
- return beatportContentState.abortController ? beatportContentState.abortController.signal : null;
-}
-
-function throwIfBeatportLoadAborted() {
- if (beatportContentState.abortController && beatportContentState.abortController.signal.aborted) {
- throw new DOMException('Beatport load aborted', 'AbortError');
- }
-}
-
-function stopBeatportDiscoveryAndSyncPolling() {
- Object.entries(activeYouTubePollers).forEach(([identifier, poller]) => {
- const isBeatportChart = !!youtubePlaylistStates[identifier]?.is_beatport_playlist ||
- !!beatportChartStates[identifier];
- if (isBeatportChart) {
- clearInterval(poller);
- delete activeYouTubePollers[identifier];
- }
- });
-
- Object.entries(_discoveryProgressCallbacks).forEach(([identifier]) => {
- const isBeatportChart = !!youtubePlaylistStates[identifier]?.is_beatport_playlist ||
- !!beatportChartStates[identifier];
- if (isBeatportChart) {
- if (socketConnected) socket.emit('discovery:unsubscribe', { ids: [identifier] });
- delete _discoveryProgressCallbacks[identifier];
- }
- });
-
- Object.entries(_syncProgressCallbacks).forEach(([syncPlaylistId]) => {
- const beatportState = Object.values(youtubePlaylistStates).find(state =>
- state && state.is_beatport_playlist && state.syncPlaylistId === syncPlaylistId
- );
- if (beatportState) {
- if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
- delete _syncProgressCallbacks[syncPlaylistId];
- }
- });
-}
-
-function resetBeatportSliderInitFlags() {
- const rebuildSlider = document.getElementById('beatport-rebuild-slider');
- if (rebuildSlider) rebuildSlider.dataset.initialized = 'false';
-
- const releasesSlider = document.getElementById('beatport-releases-slider');
- if (releasesSlider) releasesSlider.dataset.initialized = 'false';
- beatportReleasesSliderState.isInitialized = false;
-
- beatportHypePicksSliderState.isInitialized = false;
-
- const chartsSlider = document.getElementById('beatport-charts-slider');
- if (chartsSlider) chartsSlider.dataset.initialized = 'false';
- beatportChartsSliderState.isInitialized = false;
-
- const djSlider = document.getElementById('beatport-dj-slider');
- if (djSlider) djSlider.dataset.initialized = 'false';
- beatportDJSliderState.isInitialized = false;
-}
-
-function cleanupBeatportContent() {
- const wasLoaded = beatportContentState.loaded || !!beatportContentState.loadingPromise;
- if (!wasLoaded) return;
-
- console.log('🧹 Cleaning up Beatport content...');
-
- if (beatportContentState.abortController) {
- beatportContentState.abortController.abort();
- beatportContentState.abortController = null;
- }
-
- stopBeatportDiscoveryAndSyncPolling();
- cleanupBeatportRebuildSlider();
- cleanupBeatportReleasesSlider();
- cleanupBeatportHypePicksSlider();
- cleanupBeatportChartsSlider();
- cleanupBeatportDJSlider();
- resetBeatportSliderInitFlags();
-
- beatportContentState.loadingPromise = null;
- beatportContentState.loaded = false;
-
- console.log('✅ Beatport content cleaned up');
-}
-
-// --- ListenBrainz Playlist State Management (Similar to YouTube/Tidal/Beatport) ---
-let listenbrainzPlaylistStates = {}; // Key: playlist_mbid, Value: playlist state with phases
-let listenbrainzPlaylistsLoaded = false; // Track if playlists have been loaded from backend
-
-// --- Artists Page State Management ---
-let artistsPageState = {
- currentView: 'search', // 'search', 'results', 'detail'
- searchQuery: '',
- searchResults: [],
- selectedArtist: null,
- sourceOverride: null, // Set when navigating from an alternate search tab
- artistDiscography: {
- albums: [],
- singles: []
- },
- cache: {
- searches: {}, // Cache search results by query
- discography: {}, // Cache discography by artist ID
- colors: {}, // Cache extracted colors by image URL
- completionData: {} // Cache completion data by artist ID
- },
- isInitialized: false // Track if the page has been initialized
-};
-
-// --- Artist Downloads Management State ---
-let artistDownloadBubbles = {}; // Track artist download bubbles: artistId -> { artist, downloads: [], element }
-let artistDownloadModalOpen = false; // Track if artist download modal is open
-let downloadsUpdateTimeout = null; // Debounce downloads section updates
-
-// --- Search Downloads Management State ---
-let searchDownloadBubbles = {}; // Track search download bubbles: artistName -> { artist, downloads: [] }
-let searchDownloadModalOpen = false; // Track if search download modal is open
-
-// --- Beatport Downloads Management State ---
-let beatportDownloadBubbles = {}; // Track Beatport download bubbles: chartKey -> { chart: { name, image }, downloads: [] }
-let beatportDownloadsUpdateTimeout = null; // Debounce Beatport downloads section updates
-
-let artistsSearchTimeout = null;
-let artistsSearchController = null;
-let artistCompletionController = null; // Track ongoing completion check to cancel when navigating away
-let similarArtistsController = null; // Track ongoing similar artists stream to cancel when navigating away
-
-// --- Lazy Background Image Observer ---
-// Watches elements with data-bg-src, applies background-image when visible, unobserves after.
-const lazyBgObserver = new IntersectionObserver((entries) => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- const el = entry.target;
- const src = el.dataset.bgSrc;
- if (src) {
- el.style.backgroundImage = `url('${src}')`;
- delete el.dataset.bgSrc;
- }
- lazyBgObserver.unobserve(el);
- }
- });
-}, { rootMargin: '200px' });
-
-/**
- * Observe all elements with data-bg-src within a container for lazy background loading.
- */
-function observeLazyBackgrounds(container) {
- if (!container) return;
- const elements = container.querySelectorAll('[data-bg-src]');
- elements.forEach(el => lazyBgObserver.observe(el));
-}
-
-// ===============================
-// CONFIRM DIALOG (themed replacement for native confirm())
-// ===============================
-let _confirmResolver = null;
-
-function showConfirmDialog({ title = 'Confirm', message = '', confirmText = 'Confirm', cancelText = 'Cancel', destructive = false } = {}) {
- // Resolve any pending dialog as cancelled before opening a new one
- if (_confirmResolver) {
- _confirmResolver(false);
- _confirmResolver = null;
- }
-
- const overlay = document.getElementById('confirm-modal-overlay');
- const titleEl = document.getElementById('confirm-modal-title');
- const messageEl = document.getElementById('confirm-modal-message');
- const confirmBtn = document.getElementById('confirm-modal-confirm');
- const cancelBtn = document.getElementById('confirm-modal-cancel');
-
- titleEl.textContent = title;
- messageEl.textContent = message;
- confirmBtn.textContent = confirmText;
- cancelBtn.textContent = cancelText;
-
- // Toggle destructive (red) vs primary (accent) confirm button
- confirmBtn.className = destructive
- ? 'modal-button modal-button--cancel'
- : 'modal-button modal-button--primary';
-
- overlay.classList.remove('hidden');
-
- return new Promise(resolve => {
- _confirmResolver = resolve;
- });
-}
-
-function resolveConfirmDialog(result) {
- const overlay = document.getElementById('confirm-modal-overlay');
- overlay.classList.add('hidden');
- if (_confirmResolver) {
- _confirmResolver(result);
- _confirmResolver = null;
- }
-}
-
-/**
- * Nuclear confirmation dialog for mass-destructive operations.
- * User must type an exact phrase to proceed.
- */
-function showWitnessMeDialog(orphanCount) {
- return new Promise(resolve => {
- const overlay = document.createElement('div');
- overlay.className = 'confirm-modal-overlay';
- overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
-
- overlay.innerHTML = `
- ${name} ${sourceLabel}
+ ${statsParts.join(' ')}
+ ${dateText}
+
-
- `;
-
- document.body.appendChild(overlay);
-
- const input = overlay.querySelector('#witness-me-input');
- const confirmBtn = overlay.querySelector('#witness-confirm');
- const cancelBtn = overlay.querySelector('#witness-cancel');
-
- input.addEventListener('input', () => {
- const match = input.value.trim().toLowerCase() === 'witness me';
- confirmBtn.disabled = !match;
- confirmBtn.style.background = match ? '#e74c3c' : '#555';
- confirmBtn.style.color = match ? '#fff' : '#888';
- confirmBtn.style.cursor = match ? 'pointer' : 'not-allowed';
- });
-
- confirmBtn.addEventListener('click', () => {
- document.body.removeChild(overlay);
- resolve(true);
- });
-
- cancelBtn.addEventListener('click', () => {
- document.body.removeChild(overlay);
- resolve(false);
- });
-
- overlay.addEventListener('click', (e) => {
- if (e.target === overlay) {
- document.body.removeChild(overlay);
- resolve(false);
- }
- });
-
- setTimeout(() => input.focus(), 100);
- });
-}
-
-const MASS_ORPHAN_THRESHOLD = 20;
-
-function _isMassOrphanFix(jobId, count) {
- if (count <= MASS_ORPHAN_THRESHOLD) return false;
- // Only trigger if mass_orphan flag is actually set on visible findings
- // (flag is set by backend when >50% of files are orphans — likely path mismatch)
- if (jobId === 'orphan_file_detector' || !jobId) {
- const massCards = document.querySelectorAll('.repair-finding-card[data-mass-orphan="true"]');
- if (massCards.length > 0) return true;
- }
- return false;
-}
-
-// ===============================
-// WEBSOCKET CONNECTION MANAGER
-// ===============================
-let socket = null;
-let socketConnected = false;
-
-function initializeWebSocket() {
- if (typeof io === 'undefined') {
- console.warn('Socket.IO client not loaded — falling back to HTTP polling');
- return;
- }
-
- socket = io({
- transports: ['polling', 'websocket'],
- reconnection: true,
- reconnectionAttempts: Infinity,
- reconnectionDelay: 1000,
- reconnectionDelayMax: 10000,
- timeout: 20000
- });
-
- socket.on('connect', () => {
- console.log('WebSocket connected');
- socketConnected = true;
- resubscribeDownloadBatches();
- // Re-subscribe to any active sync/discovery rooms after reconnect
- const activeSyncIds = Object.keys(_syncProgressCallbacks);
- if (activeSyncIds.length > 0) {
- socket.emit('sync:subscribe', { playlist_ids: activeSyncIds });
- console.log('🔄 Re-subscribed to sync rooms:', activeSyncIds);
- }
- const activeDiscoveryIds = Object.keys(_discoveryProgressCallbacks);
- if (activeDiscoveryIds.length > 0) {
- socket.emit('discovery:subscribe', { ids: activeDiscoveryIds });
- console.log('🔄 Re-subscribed to discovery rooms:', activeDiscoveryIds);
- }
- // Join profile room for scoped watchlist/wishlist count updates
- if (currentProfile) {
- socket.emit('profile:join', { profile_id: currentProfile.id });
- }
- });
-
- socket.on('disconnect', (reason) => {
- console.warn('WebSocket disconnected:', reason);
- socketConnected = false;
- });
-
- socket.on('reconnect', (attemptNumber) => {
- console.log(`WebSocket reconnected after ${attemptNumber} attempts`);
- // Rejoin profile room for scoped WebSocket emits
- if (currentProfile) {
- socket.emit('profile:join', { profile_id: currentProfile.id });
- }
- // Phase 1: Full state refresh on reconnect
- fetchAndUpdateServiceStatus();
- updateWatchlistButtonCount();
- resubscribeDownloadBatches();
- // Phase 2: Refresh dashboard data if on dashboard page
- if (currentPage === 'dashboard') {
- fetchAndUpdateSystemStats();
- fetchAndUpdateActivityFeed();
- fetchAndUpdateDbStats();
- updateWishlistCount();
- }
- });
-
- // Phase 1 event listeners
- socket.on('status:update', handleServiceStatusUpdate);
- socket.on('watchlist:count', handleWatchlistCountUpdate);
- socket.on('downloads:batch_update', handleDownloadBatchUpdate);
-
- // Phase 2 event listeners (dashboard pollers)
- socket.on('rate-monitor:update', _handleRateMonitorUpdate);
- socket.on('dashboard:stats', handleDashboardStats);
- socket.on('dashboard:activity', handleDashboardActivity);
- socket.on('dashboard:toast', handleDashboardToast);
- socket.on('dashboard:db_stats', handleDashboardDbStats);
- socket.on('dashboard:wishlist_count', handleDashboardWishlistCount);
-
- // Phase 3 event listeners (enrichment sidebar workers)
- socket.on('enrichment:musicbrainz', (data) => updateMusicBrainzStatusFromData(data));
- socket.on('enrichment:audiodb', (data) => updateAudioDBStatusFromData(data));
- socket.on('enrichment:discogs', (data) => updateDiscogsStatusFromData(data));
- socket.on('enrichment:deezer', (data) => updateDeezerStatusFromData(data));
- socket.on('enrichment:spotify-enrichment', (data) => updateSpotifyEnrichmentStatusFromData(data));
- socket.on('enrichment:itunes-enrichment', (data) => updateiTunesEnrichmentStatusFromData(data));
- socket.on('enrichment:lastfm-enrichment', (data) => updateLastFMEnrichmentStatusFromData(data));
- socket.on('enrichment:genius-enrichment', (data) => updateGeniusEnrichmentStatusFromData(data));
- socket.on('enrichment:tidal-enrichment', (data) => updateTidalEnrichmentStatusFromData(data));
- socket.on('enrichment:qobuz-enrichment', (data) => updateQobuzEnrichmentStatusFromData(data));
- socket.on('enrichment:hydrabase', (data) => updateHydrabaseStatusFromData(data));
- socket.on('enrichment:repair', (data) => updateRepairStatusFromData(data));
- socket.on('enrichment:soulid', (data) => updateSoulIDStatusFromData(data));
- socket.on('enrichment:listening-stats', () => { }); // Status only, no UI update needed
- socket.on('repair:progress', (data) => updateRepairJobProgressFromData(data));
-
- // Phase 4 event listeners (tool progress)
- socket.on('tool:stream', (data) => updateStreamStatusFromData(data));
- socket.on('tool:quality-scanner', (data) => updateQualityScanProgressFromData(data));
- socket.on('tool:duplicate-cleaner', (data) => updateDuplicateCleanProgressFromData(data));
- socket.on('tool:retag', (data) => updateRetagStatusFromData(data));
- socket.on('tool:db-update', (data) => updateDbProgressFromData(data));
- socket.on('tool:metadata', (data) => updateMetadataStatusFromData(data));
- socket.on('tool:logs', (data) => updateLogsFromData(data));
-
- // Phase 5 event listeners (sync/discovery progress + scans)
- socket.on('sync:progress', (data) => updateSyncProgressFromData(data));
- socket.on('discovery:progress', (data) => updateDiscoveryProgressFromData(data));
- socket.on('scan:watchlist', (data) => updateWatchlistScanFromData(data));
- socket.on('scan:media', (data) => updateMediaScanFromData(data));
- socket.on('wishlist:stats', (data) => updateWishlistStatsFromData(data));
- // Phase 6: Automation progress
- socket.on('automation:progress', (data) => updateAutomationProgressFromData(data));
-}
-
-function handleServiceStatusUpdate(data) {
- // Cache for library status card
- _lastServiceStatus = data;
-
- // Same logic as fetchAndUpdateServiceStatus response handler
- updateServiceStatus('spotify', data.spotify);
- updateServiceStatus('media-server', data.media_server);
- updateServiceStatus('soulseek', data.soulseek);
-
- updateSidebarServiceStatus('spotify', data.spotify);
- updateSidebarServiceStatus('media-server', data.media_server);
- updateSidebarServiceStatus('soulseek', data.soulseek);
-
- // Update downloads nav badge from status push
- if (data.active_downloads !== undefined) _updateDlNavBadge(data.active_downloads);
-
- // Hide sync buttons (not the page) for standalone mode — playlists still browsable/downloadable
- const isSoulsyncStandalone = data.media_server?.type === 'soulsync';
- _isSoulsyncStandalone = isSoulsyncStandalone;
- document.querySelectorAll('.sync-to-server-btn, [id$="-sync-btn"], [onclick*="startPlaylistSync"], [onclick*="syncPlaylistToServer"], [onclick*="startDecadeSync"]').forEach(btn => {
- if (isSoulsyncStandalone) {
- btn.dataset.hiddenByStandalone = '1';
- btn.style.display = 'none';
- } else if (btn.dataset.hiddenByStandalone) {
- delete btn.dataset.hiddenByStandalone;
- btn.style.display = '';
- }
- // If not standalone and not previously hidden by standalone, leave display untouched
- // (preserves display:none on undiscovered LB/Last.fm playlist sync buttons)
- });
-
- // Update enrichment service cards
- if (data.enrichment) renderEnrichmentCards(data.enrichment);
-
- // Spotify rate limit / cooldown / recovery
- if (data.spotify?.rate_limited && data.spotify.rate_limit) {
- handleSpotifyRateLimit(data.spotify.rate_limit);
- _spotifyInCooldown = false;
- } else if (data.spotify?.post_ban_cooldown > 0) {
- if (_spotifyRateLimitShown && !_spotifyInCooldown) {
- _spotifyRateLimitShown = false;
- _spotifyInCooldown = true;
- closeRateLimitModal();
- showToast('Spotify ban expired \u2014 recovering shortly', 'info');
- }
- } else {
- if (_spotifyInCooldown) {
- _spotifyInCooldown = false;
- showToast('Spotify access restored', 'success');
- if (currentPage === 'discover') {
- loadDiscoverPage();
- }
- } else if (_spotifyRateLimitShown) {
- handleSpotifyRateLimit(null);
- }
- }
-}
-
-function _updateHeroBtnCount(buttonId, badgeId, count) {
- const badge = document.getElementById(badgeId);
- if (badge) {
- badge.textContent = count;
- badge.classList.toggle('has-items', count > 0);
- }
-}
-
-function handleWatchlistCountUpdate(data) {
- if (data.success) {
- _updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count);
- // Update sidebar nav badge
- const wlNavBadge = document.getElementById('watchlist-nav-badge');
- if (wlNavBadge) {
- wlNavBadge.textContent = data.count;
- wlNavBadge.classList.toggle('hidden', data.count === 0);
- }
- const watchlistButton = document.getElementById('watchlist-button');
- if (watchlistButton) {
- const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : '';
- if (countdownText) {
- watchlistButton.title = `Next auto-scan in ${countdownText}`;
- }
- }
- }
-}
-
-function handleDownloadBatchUpdate(payload) {
- const { batch_id, data } = payload;
- // Find which playlistId maps to this batch_id
- for (const [playlistId, process] of Object.entries(activeDownloadProcesses)) {
- if (process.batchId === batch_id) {
- processModalStatusUpdate(playlistId, data);
- break;
- }
- }
-}
-
-function resubscribeDownloadBatches() {
- if (!socket || !socketConnected) return;
- const activeBatchIds = [];
- Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
- if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
- activeBatchIds.push(process.batchId);
- }
- });
- if (activeBatchIds.length > 0) {
- socket.emit('downloads:subscribe', { batch_ids: activeBatchIds });
- console.log(`WebSocket subscribed to ${activeBatchIds.length} download batches`);
- }
-}
-
-function subscribeToDownloadBatch(batchId) {
- if (socket && socketConnected && batchId) {
- socket.emit('downloads:subscribe', { batch_ids: [batchId] });
- }
-}
-
-function unsubscribeFromDownloadBatch(batchId) {
- if (socket && socketConnected && batchId) {
- socket.emit('downloads:unsubscribe', { batch_ids: [batchId] });
- }
-}
-
-// --- Phase 2: Dashboard event handlers ---
-
-function handleDashboardStats(data) {
- // Same logic as fetchAndUpdateSystemStats response handler
- updateStatCard('active-downloads-card', data.active_downloads, 'Currently downloading');
- updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed this session');
- updateStatCard('download-speed-card', data.download_speed, 'Combined speed');
- updateStatCard('active-syncs-card', data.active_syncs, 'Playlists syncing');
- updateStatCard('uptime-card', data.uptime, 'Application runtime');
- updateStatCard('memory-card', data.memory_usage, 'Current usage');
-}
-
-function handleDashboardActivity(data) {
- // Same logic as fetchAndUpdateActivityFeed response handler
- updateActivityFeed(data.activities || []);
-}
-
-function handleDashboardToast(activity) {
- // Same logic as checkForActivityToasts response handler
- let toastType = 'info';
- if (activity.icon === '\u2705' || activity.title.includes('Complete')) {
- toastType = 'success';
- } else if (activity.icon === '\u274C' || activity.title.includes('Failed') || activity.title.includes('Error')) {
- toastType = 'error';
- } else if (activity.icon === '\uD83D\uDEAB' || activity.title.includes('Cancelled')) {
- toastType = 'warning';
- }
- showToast(`${activity.title}: ${activity.subtitle}`, toastType);
-}
-
-function handleDashboardDbStats(stats) {
- // Same logic as fetchAndUpdateDbStats response handler
- updateDashboardStatCards(stats);
- updateDbUpdaterCardInfo(stats);
-}
-
-function handleDashboardWishlistCount(data) {
- const count = data.count || 0;
- _updateHeroBtnCount('wishlist-button', 'wishlist-badge', count);
- // Update sidebar nav badge
- const wlNavBadge = document.getElementById('wishlist-nav-badge');
- if (wlNavBadge) {
- wlNavBadge.textContent = count;
- wlNavBadge.classList.toggle('hidden', count === 0);
- }
- const wishlistButton = document.getElementById('wishlist-button');
- if (wishlistButton) {
- if (count === 0) {
- wishlistButton.classList.remove('wishlist-active');
- wishlistButton.classList.add('wishlist-inactive');
- } else {
- wishlistButton.classList.remove('wishlist-inactive');
- wishlistButton.classList.add('wishlist-active');
- }
- }
- checkForAutoInitiatedWishlistProcess();
-}
-
-// ===============================
-// END WEBSOCKET CONNECTION MANAGER
-// ===============================
-
-// --- Service Integration Logo Constants ---
-const MUSICBRAINZ_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/MusicBrainz_Logo_%282016%29.svg/500px-MusicBrainz_Logo_%282016%29.svg.png';
-const DEEZER_LOGO_URL = 'https://cdn.brandfetch.io/idEUKgCNtu/theme/dark/symbol.svg?c=1bxid64Mup7aczewSAYMX&t=1758260798610';
-const SPOTIFY_LOGO_URL = 'https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png';
-const ITUNES_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/ITunes_logo.svg/960px-ITunes_logo.svg.png';
-const LASTFM_LOGO_URL = 'https://www.last.fm/static/images/lastfm_avatar_twitter.52a5d69a85ac.png';
-const GENIUS_LOGO_URL = 'https://images.genius.com/8ed669cadd956443e29c70361ec4f372.1000x1000x1.png';
-const TIDAL_LOGO_URL = 'https://www.svgrepo.com/show/519734/tidal.svg';
-const QOBUZ_LOGO_URL = 'https://www.svgrepo.com/show/504778/qobuz.svg';
-const DISCOGS_LOGO_URL = 'https://www.svgrepo.com/show/305957/discogs.svg';
-function getAudioDBLogoURL() { const el = document.querySelector('img.audiodb-logo'); return el ? el.src : null; }
-
-// --- Wishlist Modal Persistence State Management ---
-const WishlistModalState = {
- // Track if wishlist modal was visible before page refresh
- setVisible: function () {
- localStorage.setItem('wishlist_modal_visible', 'true');
- console.log('📱 [Modal State] Wishlist modal marked as visible in localStorage');
- },
-
- setHidden: function () {
- localStorage.setItem('wishlist_modal_visible', 'false');
- console.log('📱 [Modal State] Wishlist modal marked as hidden in localStorage');
- },
-
- wasVisible: function () {
- const visible = localStorage.getItem('wishlist_modal_visible') === 'true';
- console.log(`📱 [Modal State] Checking if wishlist modal was visible: ${visible}`);
- return visible;
- },
-
- clear: function () {
- localStorage.removeItem('wishlist_modal_visible');
- console.log('📱 [Modal State] Cleared wishlist modal visibility state');
- },
-
- // Track if user manually closed the modal during auto-processing
- setUserClosed: function () {
- localStorage.setItem('wishlist_modal_user_closed', 'true');
- console.log('📱 [Modal State] User manually closed wishlist modal during auto-processing');
- },
-
- clearUserClosed: function () {
- localStorage.removeItem('wishlist_modal_user_closed');
- console.log('📱 [Modal State] Cleared user closed state');
- },
-
- wasUserClosed: function () {
- const closed = localStorage.getItem('wishlist_modal_user_closed') === 'true';
- console.log(`📱 [Modal State] Checking if user closed modal: ${closed}`);
- return closed;
- }
-};
-
-// Sequential Sync Manager Class
-class SequentialSyncManager {
- constructor() {
- this.queue = [];
- this.currentIndex = 0;
- this.isRunning = false;
- this.startTime = null;
- }
-
- start(playlistIds) {
- if (this.isRunning) {
- console.warn('Sequential sync already running');
- return;
- }
-
- // Convert playlist IDs to ordered array (maintain display order)
- this.queue = Array.from(playlistIds);
- this.currentIndex = 0;
- this.isRunning = true;
- this.startTime = Date.now();
-
- console.log(`🚀 Starting sequential sync for ${this.queue.length} playlists:`, this.queue);
- this.updateUI();
- this.syncNext();
- }
-
- async syncNext() {
- if (this.currentIndex >= this.queue.length) {
- this.complete();
- return;
- }
-
- const playlistId = this.queue[this.currentIndex];
- const playlist = spotifyPlaylists.find(p => p.id === playlistId);
- console.log(`🔄 Sequential sync: Processing playlist ${this.currentIndex + 1}/${this.queue.length}: ${playlist?.name || playlistId}`);
-
- this.updateUI();
-
- try {
- // Use existing single sync function
- await startPlaylistSync(playlistId);
-
- // Wait for sync to complete by monitoring the poller
- await this.waitForSyncCompletion(playlistId);
-
- } catch (error) {
- console.error(`❌ Sequential sync: Failed to sync playlist ${playlistId}:`, error);
- showToast(`Failed to sync "${playlist?.name || playlistId}": ${error.message}`, 'error');
- }
-
- // Move to next playlist
- this.currentIndex++;
- setTimeout(() => this.syncNext(), 1000); // Small delay between syncs
- }
-
- async waitForSyncCompletion(playlistId) {
- return new Promise((resolve) => {
- // Monitor the existing sync poller for completion
- const checkCompletion = () => {
- if (!activeSyncPollers[playlistId]) {
- // Poller stopped = sync completed
- resolve();
- return;
- }
- // Check again in 1 second
- setTimeout(checkCompletion, 1000);
- };
- checkCompletion();
- });
- }
-
- complete() {
- const duration = ((Date.now() - this.startTime) / 1000).toFixed(1);
- const completedCount = this.queue.length;
- console.log(`🏁 Sequential sync completed in ${duration}s`);
-
- this.isRunning = false;
- this.queue = [];
- this.currentIndex = 0;
- this.startTime = null;
-
- // Re-enable playlist selection
- disablePlaylistSelection(false);
-
- this.updateUI();
- updateRefreshButtonState(); // Refresh button state after completion
- showToast(`Sequential sync completed for ${completedCount} playlists in ${duration}s`, 'success');
-
- // Hide sidebar after completion
- hideSyncSidebar();
- }
-
- cancel() {
- if (!this.isRunning) return;
-
- console.log('🛑 Cancelling sequential sync');
- this.isRunning = false;
- this.queue = [];
- this.currentIndex = 0;
- this.startTime = null;
-
- // Re-enable playlist selection
- disablePlaylistSelection(false);
-
- this.updateUI();
- updateRefreshButtonState(); // Refresh button state after cancellation
- showToast('Sequential sync cancelled', 'info');
-
- // Hide sidebar after cancellation
- hideSyncSidebar();
- }
-
- updateUI() {
- const startSyncBtn = document.getElementById('start-sync-btn');
- const selectionInfo = document.getElementById('selection-info');
-
- if (!this.isRunning) {
- // Reset to normal state
- if (startSyncBtn) {
- startSyncBtn.textContent = 'Start Sync';
- startSyncBtn.disabled = selectedPlaylists.size === 0;
- }
- if (selectionInfo) {
- const count = selectedPlaylists.size;
- selectionInfo.textContent = count === 0
- ? 'Select playlists to sync'
- : `${count} playlist${count > 1 ? 's' : ''} selected`;
- }
- } else {
- // Show sequential sync status
- if (startSyncBtn) {
- startSyncBtn.textContent = 'Cancel Sequential Sync';
- startSyncBtn.disabled = false;
- }
- if (selectionInfo) {
- const current = this.currentIndex + 1;
- const total = this.queue.length;
- const currentPlaylist = spotifyPlaylists.find(p => p.id === this.queue[this.currentIndex]);
- selectionInfo.textContent = `Syncing ${current}/${total}: ${currentPlaylist?.name || 'Unknown'}`;
- }
- }
- }
-}
-
-// API endpoints
-const API = {
- status: '/status',
- config: '/config',
- settings: '/api/settings',
- testConnection: '/api/test-connection',
- testDashboardConnection: '/api/test-dashboard-connection',
- playlists: '/api/playlists',
- sync: '/api/sync',
- search: '/api/search',
- artists: '/api/artists',
- activity: '/api/activity',
- stream: {
- start: '/api/stream/start',
- status: '/api/stream/status',
- toggle: '/api/stream/toggle',
- stop: '/api/stream/stop'
- }
-};
-
-// ===============================
-// INITIALIZATION
-// ===============================
-
-// ---- Accent Color System ----
-
-function getAccentFallbackColors() {
- let accent = localStorage.getItem('soulsync-accent') || '#1db954';
- if (!/^#[0-9a-fA-F]{6}$/.test(accent)) accent = '#1db954';
- // Compute a lighter variant for the second color
- const r = parseInt(accent.slice(1, 3), 16), g = parseInt(accent.slice(3, 5), 16), b = parseInt(accent.slice(5, 7), 16);
- const lighter = '#' + [Math.min(r + 20, 255), Math.min(g + 30, 255), Math.min(b + 12, 255)]
- .map(v => v.toString(16).padStart(2, '0')).join('');
- return [accent, lighter];
-}
-
-function applyAccentColor(hex) {
- // Validate hex format — reject corrupt values
- if (typeof hex !== 'string' || !/^#[0-9a-fA-F]{6}$/.test(hex)) {
- hex = '#1db954'; // fallback to default
- }
- // Convert hex to RGB
- const r = parseInt(hex.slice(1, 3), 16);
- const g = parseInt(hex.slice(3, 5), 16);
- const b = parseInt(hex.slice(5, 7), 16);
-
- // Convert RGB to HSL
- const rn = r / 255, gn = g / 255, bn = b / 255;
- const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
- const l = (max + min) / 2;
- let h = 0, s = 0;
- if (max !== min) {
- const d = max - min;
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
- if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
- else if (max === gn) h = ((bn - rn) / d + 2) / 6;
- else h = ((rn - gn) / d + 4) / 6;
- }
-
- // Compute light variant: +16% lightness
- const lightL = Math.min(l + 0.16, 0.95);
- // Compute neon variant: high lightness + boosted saturation
- const neonL = Math.min(l + 0.30, 0.95);
- const neonS = Math.min(s + 0.1, 1.0);
-
- function hslToRgb(h, s, l) {
- if (s === 0) { const v = Math.round(l * 255); return [v, v, v]; }
- const hue2rgb = (p, q, t) => {
- if (t < 0) t += 1; if (t > 1) t -= 1;
- if (t < 1 / 6) return p + (q - p) * 6 * t;
- if (t < 1 / 2) return q;
- if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
- return p;
- };
- const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
- const p = 2 * l - q;
- return [Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
- Math.round(hue2rgb(p, q, h) * 255),
- Math.round(hue2rgb(p, q, h - 1 / 3) * 255)];
- }
-
- const light = hslToRgb(h, s, lightL);
- const neon = hslToRgb(h, neonS, neonL);
-
- const root = document.documentElement.style;
- root.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
- root.setProperty('--accent-light-rgb', `${light[0]}, ${light[1]}, ${light[2]}`);
- root.setProperty('--accent-neon-rgb', `${neon[0]}, ${neon[1]}, ${neon[2]}`);
-
- // Store for instant restore on next page load
- localStorage.setItem('soulsync-accent', hex);
-
- // Update preview swatch if it exists
- const swatch = document.getElementById('accent-preview-swatch');
- if (swatch) swatch.style.background = hex;
-}
-
-function applyParticlesSetting(enabled) {
- const canvas = document.getElementById('page-particles-canvas');
- if (canvas) canvas.style.display = enabled ? '' : 'none';
- if (window.pageParticles) {
- if (enabled) {
- const activePage = document.querySelector('.page.active');
- if (activePage) {
- window.pageParticles.setPage(activePage.id.replace('-page', ''));
- }
- } else {
- window.pageParticles.stop();
- }
- }
- window._particlesEnabled = enabled;
- localStorage.setItem('soulsync-particles', String(enabled));
-}
-
-function applyWorkerOrbsSetting(enabled) {
- window._workerOrbsEnabled = enabled;
- localStorage.setItem('soulsync-worker-orbs', String(enabled));
- if (window.workerOrbs) {
- if (enabled) {
- const activePage = document.querySelector('.page.active');
- if (activePage && activePage.id === 'dashboard-page') {
- window.workerOrbs.setPage('dashboard');
- }
- } else {
- window.workerOrbs.setPage('_disabled');
- }
- }
-}
-
-function initAccentColorListeners() {
- const presetSelect = document.getElementById('accent-preset');
- const customGroup = document.getElementById('custom-color-group');
- const customPicker = document.getElementById('accent-custom-color');
- if (!presetSelect) return;
-
- presetSelect.addEventListener('change', () => {
- const val = presetSelect.value;
- if (val === 'custom') {
- if (customGroup) customGroup.style.display = '';
- if (customPicker) applyAccentColor(customPicker.value);
- } else {
- if (customGroup) customGroup.style.display = 'none';
- applyAccentColor(val);
- }
- });
-
- if (customPicker) {
- customPicker.addEventListener('input', () => {
- applyAccentColor(customPicker.value);
- });
- }
-
- // Particles toggle — apply immediately on change
- const particlesCheckbox = document.getElementById('particles-enabled');
- if (particlesCheckbox) {
- particlesCheckbox.addEventListener('change', () => {
- applyParticlesSetting(particlesCheckbox.checked);
- });
- }
-
- // Worker orbs toggle — apply immediately on change
- const workerOrbsCheckbox = document.getElementById('worker-orbs-enabled');
- if (workerOrbsCheckbox) {
- workerOrbsCheckbox.addEventListener('change', () => {
- applyWorkerOrbsSetting(workerOrbsCheckbox.checked);
- });
- }
-
- // Reduce effects toggle — apply immediately on change
- const reduceEffectsCheckbox = document.getElementById('reduce-effects-enabled');
- if (reduceEffectsCheckbox) {
- reduceEffectsCheckbox.addEventListener('change', () => {
- applyReduceEffects(reduceEffectsCheckbox.checked);
- });
- }
-}
-
-function applyReduceEffects(enabled) {
- if (enabled) {
- document.body.classList.add('reduce-effects');
- } else {
- document.body.classList.remove('reduce-effects');
- }
- localStorage.setItem('soulsync-reduce-effects', enabled ? '1' : '0');
-}
-
-// Bootstrap accent and reduce-effects from localStorage instantly (prevents flash)
-(function () {
- if (localStorage.getItem('soulsync-reduce-effects') === '1') {
- document.body.classList.add('reduce-effects');
- }
- const saved = localStorage.getItem('soulsync-accent');
- if (saved) applyAccentColor(saved);
- // Bootstrap particles setting from localStorage
- const particlesSaved = localStorage.getItem('soulsync-particles');
- if (particlesSaved === 'false') {
- window._particlesEnabled = false;
- const canvas = document.getElementById('page-particles-canvas');
- if (canvas) canvas.style.display = 'none';
- }
- // Bootstrap worker orbs setting from localStorage
- const workerOrbsSaved = localStorage.getItem('soulsync-worker-orbs');
- if (workerOrbsSaved === 'false') {
- window._workerOrbsEnabled = false;
- }
-})();
-
-// ── Profile System ─────────────────────────────────────────────
-let currentProfile = null;
-
-function getProfileHomePage() {
- if (!currentProfile) return 'dashboard';
- if (currentProfile.home_page) return currentProfile.home_page;
- return currentProfile.is_admin ? 'dashboard' : 'discover';
-}
-
-function isPageAllowed(pageId) {
- if (!currentProfile) return true;
- if (currentProfile.id === 1) return true;
- if (pageId === 'help' || pageId === 'issues') return true;
- if (pageId === 'artist-detail') {
- // artist-detail requires library access
- const ap = currentProfile.allowed_pages;
- if (!ap) return true;
- return ap.includes('library');
- }
- if (pageId === 'settings') return currentProfile.is_admin;
- const ap = currentProfile.allowed_pages;
- if (!ap) return true; // null = all pages
- return ap.includes(pageId);
-}
-
-function canDownload() {
- if (!currentProfile) return true;
- if (currentProfile.id === 1) return true;
- return currentProfile.can_download !== false && currentProfile.can_download !== 0;
-}
-
-function renderProfileAvatar(el, profile) {
- // Renders avatar as image (if avatar_url set) or colored initial fallback
- // Preserves existing classes, ensures 'profile-avatar' is present
- if (!el.classList.contains('profile-avatar') && !el.classList.contains('profile-indicator-avatar') && !el.classList.contains('profile-pin-avatar')) {
- el.className = 'profile-avatar';
- }
- el.style.background = profile.avatar_color || '#6366f1';
- el.textContent = '';
- if (profile.avatar_url) {
- const img = document.createElement('img');
- img.src = profile.avatar_url;
- img.alt = profile.name;
- img.className = 'profile-avatar-img';
- img.onerror = () => {
- img.remove();
- el.textContent = profile.name.charAt(0).toUpperCase();
- };
- el.appendChild(img);
- } else {
- el.textContent = profile.name.charAt(0).toUpperCase();
- }
-}
-
-async function initProfileSystem() {
- try {
- // Check if a session already has a profile selected
- const currentRes = await fetch('/api/profiles/current');
- const currentData = await currentRes.json();
- if (currentData.success && currentData.profile) {
- currentProfile = currentData.profile;
- updateProfileIndicator();
-
- // Check if launch PIN is required
- if (currentData.launch_pin_required) {
- showLaunchPinScreen();
- return false; // Defer app init until PIN verified
- }
-
- return true; // Profile already selected, skip picker
- }
-
- // Fetch all profiles
- const res = await fetch('/api/profiles');
- const data = await res.json();
- const profiles = data.profiles || [];
-
- if (profiles.length === 0) {
- // No profiles yet — auto-select admin profile 1
- await selectProfile(1);
- return true;
- }
-
- if (profiles.length === 1) {
- // Only one profile — always auto-select (PIN only matters with multiple profiles)
- await selectProfile(profiles[0].id);
-
- // Re-check for launch PIN after auto-select
- const recheck = await fetch('/api/profiles/current');
- const recheckData = await recheck.json();
- if (recheckData.launch_pin_required) {
- showLaunchPinScreen();
- return false;
- }
-
- return true;
- }
-
- // Multiple profiles or PIN required — show picker
- showProfilePicker(profiles);
- return false; // App init deferred until profile selected
- } catch (e) {
- console.error('Profile init error:', e);
- return true; // Fall through to normal init
- }
-}
-
-// ── Launch PIN Lock Screen ─────────────────────────────────────────────
-
-function showLaunchPinScreen() {
- const overlay = document.getElementById('launch-pin-overlay');
- if (!overlay) return;
- overlay.style.display = 'flex';
-
- const input = document.getElementById('launch-pin-input');
- const submit = document.getElementById('launch-pin-submit');
- const error = document.getElementById('launch-pin-error');
-
- input.value = '';
- error.style.display = 'none';
- setTimeout(() => input.focus(), 100);
-
- const doSubmit = async () => {
- const pin = input.value.trim();
- if (!pin) return;
-
- submit.disabled = true;
- submit.textContent = 'Verifying...';
-
- try {
- const res = await fetch('/api/profiles/verify-launch-pin', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ pin })
- });
- const data = await res.json();
-
- if (data.success) {
- // Server session flag set by verify endpoint — consumed on next /api/profiles/current call
- overlay.style.display = 'none';
- initApp(); // Now safe to load the full app
- } else {
- error.textContent = data.error || 'Invalid PIN';
- error.style.display = 'block';
- input.value = '';
- input.focus();
- // Shake animation
- overlay.querySelector('.launch-pin-container').classList.add('shake');
- setTimeout(() => overlay.querySelector('.launch-pin-container').classList.remove('shake'), 500);
- }
- } catch (e) {
- error.textContent = 'Connection error';
- error.style.display = 'block';
- }
-
- submit.disabled = false;
- submit.textContent = 'Unlock';
- };
-
- // Remove old listeners to prevent stacking
- const newSubmit = submit.cloneNode(true);
- submit.parentNode.replaceChild(newSubmit, submit);
- newSubmit.addEventListener('click', doSubmit);
-
- input.addEventListener('keydown', (e) => {
- if (e.key === 'Enter') doSubmit();
- });
-}
-
-// ── Security Settings Helpers ──────────────────────────────────────────
-
-async function saveSecurityPin() {
- const pin = document.getElementById('security-new-pin').value;
- const confirm = document.getElementById('security-confirm-pin').value;
- const msg = document.getElementById('security-pin-msg');
-
- if (!pin || pin.length < 4) {
- msg.textContent = 'PIN must be at least 4 characters';
- msg.style.display = 'block';
- msg.style.color = '#ff5252';
- return;
- }
- if (pin !== confirm) {
- msg.textContent = 'PINs do not match';
- msg.style.display = 'block';
- msg.style.color = '#ff5252';
- return;
- }
-
- try {
- const res = await fetch('/api/profiles/1/set-pin', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ pin })
- });
- const data = await res.json();
-
- if (data.success) {
- msg.textContent = 'PIN saved! You can now enable the lock screen.';
- msg.style.color = '#4caf50';
- msg.style.display = 'block';
-
- // Update UI — hide setup, show change, enable toggle
- document.getElementById('security-pin-setup').style.display = 'none';
- document.getElementById('security-change-pin-section').style.display = 'block';
- document.getElementById('security-require-pin').disabled = false;
-
- // Clear inputs
- document.getElementById('security-new-pin').value = '';
- document.getElementById('security-confirm-pin').value = '';
- } else {
- msg.textContent = data.error || 'Failed to save PIN';
- msg.style.color = '#ff5252';
- msg.style.display = 'block';
- }
- } catch (e) {
- msg.textContent = 'Connection error';
- msg.style.color = '#ff5252';
- msg.style.display = 'block';
- }
-}
-
-function handleSecurityPinToggle(checkbox) {
- // If trying to enable but no PIN, show the setup section
- if (checkbox.checked) {
- const setupSection = document.getElementById('security-pin-setup');
- if (setupSection.style.display !== 'none' || checkbox.disabled) {
- checkbox.checked = false;
- setupSection.style.display = 'block';
- document.getElementById('security-new-pin').focus();
- return;
- }
- }
- // Auto-save this setting
- saveSettings(true);
-}
-
-function showChangeSecurityPin() {
- document.getElementById('security-pin-setup').style.display = 'block';
- document.getElementById('security-new-pin').focus();
-}
-
-// ── Forgot PIN Recovery ────────────────────────────────────────────────
-
-function showForgotPinView() {
- document.getElementById('launch-pin-entry').style.display = 'none';
- document.getElementById('launch-pin-recovery').style.display = 'block';
- document.getElementById('launch-recovery-input').value = '';
- document.getElementById('launch-recovery-error').style.display = 'none';
- setTimeout(() => document.getElementById('launch-recovery-input').focus(), 100);
-}
-
-function showPinEntryView() {
- document.getElementById('launch-pin-recovery').style.display = 'none';
- document.getElementById('launch-pin-entry').style.display = 'block';
- setTimeout(() => document.getElementById('launch-pin-input').focus(), 100);
-}
-
-async function submitRecoveryCredential() {
- const input = document.getElementById('launch-recovery-input');
- const error = document.getElementById('launch-recovery-error');
- const btn = document.getElementById('launch-recovery-submit');
- const credential = input.value.trim();
-
- if (!credential) return;
-
- btn.disabled = true;
- btn.textContent = 'Verifying...';
- error.style.display = 'none';
-
- try {
- const res = await fetch('/api/profiles/reset-pin-via-credential', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ credential })
- });
- const data = await res.json();
-
- if (data.success) {
- sessionStorage.setItem('soulsync_pin_ok', '1');
- document.getElementById('launch-pin-overlay').style.display = 'none';
- initApp();
- setTimeout(() => showToast('PIN cleared. You can set a new one in Settings → Advanced.', 'success'), 1000);
- } else {
- error.textContent = data.error || 'Credential not recognized';
- error.style.display = 'block';
- input.value = '';
- input.focus();
- document.getElementById('launch-pin-container').classList.add('shake');
- setTimeout(() => document.getElementById('launch-pin-container').classList.remove('shake'), 500);
- }
- } catch (e) {
- error.textContent = 'Connection error';
- error.style.display = 'block';
- }
-
- btn.disabled = false;
- btn.textContent = 'Verify & Reset PIN';
-}
-
-// ── Profile PIN Forgot Recovery ────────────────────────────────────────
-function showProfileForgotPin() {
- const dialog = document.getElementById('profile-pin-dialog');
- const content = dialog.querySelector('.profile-pin-content');
-
- // Store the profile ID we're recovering for
- const profileName = document.getElementById('profile-pin-name').textContent;
-
- // Replace dialog content with recovery form
- content.dataset.prevHtml = content.innerHTML;
- content.innerHTML = `
- Mass Deletion Warning
-- You are about to permanently delete ${orphanCount.toLocaleString()} files from your disk. -
-- This many orphans usually means a path mismatch between your database and filesystem - — not actual orphan files. A previous user lost their entire library this way. -
-- To confirm you understand the risk, type witness me below: -
- -
-
-
-
- Reset PIN for ${profileName}
-Enter any configured API credential
(Spotify secret, Plex token, etc.)
Loading...
';
-
- try {
- // Load all per-profile service data in parallel
- const [lbRes, spotifyRes] = await Promise.all([
- fetch('/api/profiles/me/listenbrainz'),
- fetch('/api/profiles/me/spotify'),
- ]);
- const lbData = await lbRes.json();
- const spotifyData = await spotifyRes.json();
-
- body.innerHTML = '';
- const isNonAdmin = currentProfile && !currentProfile.is_admin;
-
- if (isNonAdmin) {
- // Tabbed layout for non-admin with multiple sections
- const tabs = [
- { id: 'music', label: 'Music Services' },
- { id: 'server', label: 'Server' },
- { id: 'scrobble', label: 'Scrobbling' },
- ];
- const tabBar = document.createElement('div');
- tabBar.className = 'ps-tabbar';
- tabs.forEach((t, i) => {
- const btn = document.createElement('button');
- btn.className = 'ps-tab' + (i === 0 ? ' active' : '');
- btn.textContent = t.label;
- btn.onclick = () => {
- tabBar.querySelectorAll('.ps-tab').forEach(b => b.classList.remove('active'));
- btn.classList.add('active');
- body.querySelectorAll('.ps-tab-content').forEach(c => c.classList.remove('active'));
- const target = document.getElementById(`ps-tab-${t.id}`);
- if (target) target.classList.add('active');
- };
- tabBar.appendChild(btn);
- });
- body.appendChild(tabBar);
-
- // Music Services tab
- const musicTab = document.createElement('div');
- musicTab.id = 'ps-tab-music';
- musicTab.className = 'ps-tab-content active';
- renderPersonalSettingsSpotify(musicTab, spotifyData);
- renderPersonalSettingsTidal(musicTab);
- body.appendChild(musicTab);
-
- // Server tab
- const serverTab = document.createElement('div');
- serverTab.id = 'ps-tab-server';
- serverTab.className = 'ps-tab-content';
- serverTab.innerHTML = 'Loading libraries...
';
- body.appendChild(serverTab);
- // Load server libraries async (don't block modal)
- fetch('/api/profiles/me/server-library').then(r => r.json()).then(libData => {
- serverTab.innerHTML = '';
- renderPersonalSettingsServerLibrary(serverTab, libData);
- }).catch(() => {
- serverTab.innerHTML = '';
- renderPersonalSettingsServerLibrary(serverTab, {});
- });
-
- // Scrobbling tab
- const scrobbleTab = document.createElement('div');
- scrobbleTab.id = 'ps-tab-scrobble';
- scrobbleTab.className = 'ps-tab-content';
- body.appendChild(scrobbleTab);
- // Render LB into the scrobble tab
- const origBody = body;
- renderPersonalSettingsLB(lbData, scrobbleTab);
- } else {
- // Admin: just ListenBrainz, no tabs
- const content = document.createElement('div');
- content.style.padding = '18px 22px 22px';
- body.appendChild(content);
- renderPersonalSettingsLB(lbData, content);
- }
- } catch (e) {
- body.innerHTML = 'Failed to load settings
';
- }
-}
-
-function closePersonalSettings() {
- const overlay = document.getElementById('personal-settings-overlay');
- if (overlay) overlay.style.display = 'none';
-}
-
-function renderPersonalSettingsSpotify(body, data) {
- const hasCreds = data.has_credentials;
- const clientId = data.client_id || '';
-
- let contentHtml;
- if (hasCreds) {
- contentHtml = `
-
-
-
-
-
- Credentials configured
- Client ID: ${escapeHtml(clientId.substring(0, 8))}...
- Personal Spotify app
-
-
-
-
- `;
- } else {
- contentHtml = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Create an app at developer.spotify.com and add the redirect URI
-
-
-
-
- `;
- }
-
- const section = document.createElement('div');
- section.id = 'ps-spotify-section';
- section.innerHTML = `
-
-
- `;
-
- const existing = document.getElementById('ps-spotify-section');
- if (existing) existing.replaceWith(section);
- else body.appendChild(section);
-}
-
-async function savePersonalSpotify() {
- const clientId = document.getElementById('ps-spotify-client-id')?.value?.trim();
- const clientSecret = document.getElementById('ps-spotify-client-secret')?.value?.trim();
- const redirectUri = document.getElementById('ps-spotify-redirect-uri')?.value?.trim();
- const resultEl = document.getElementById('ps-spotify-result');
-
- if (!clientId || !clientSecret) {
- if (resultEl) resultEl.innerHTML = '
-
- Spotify
- - - ${hasCreds ? 'Configured' : 'Not configured'} - -
- Connect your own Spotify account to see your playlists instead of the admin's.
-
- ${contentHtml}
- Client ID and Secret are required
';
- return;
- }
-
- try {
- const res = await fetch('/api/profiles/me/spotify', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ client_id: clientId, client_secret: clientSecret, redirect_uri: redirectUri })
- });
- const data = await res.json();
- if (data.success) {
- showToast('Spotify credentials saved', 'success');
- openPersonalSettings(); // Reload to show connected state
- } else {
- if (resultEl) resultEl.innerHTML = `${data.error || 'Failed to save'}
`;
- }
- } catch (e) {
- if (resultEl) resultEl.innerHTML = 'Network error
';
- }
-}
-
-async function authenticatePersonalSpotify() {
- // Trigger OAuth flow with profile_id in state so callback knows which profile
- window.open('/auth/spotify?profile_id=' + (currentProfile?.id || ''), '_blank');
-}
-
-function renderPersonalSettingsTidal(body) {
- const section = document.createElement('div');
- section.id = 'ps-tidal-section';
- section.innerHTML = `
-
-
- `;
- const existing = document.getElementById('ps-tidal-section');
- if (existing) existing.replaceWith(section);
- else body.appendChild(section);
-}
-
-function authenticatePersonalTidal() {
- window.open('/auth/tidal?profile_id=' + (currentProfile?.id || ''), '_blank');
-}
-
-async function renderPersonalSettingsServerLibrary(container, profileData) {
- const section = document.createElement('div');
- section.id = 'ps-server-library-section';
-
- // Detect which server is active
- let serverType = 'none';
- let libraries = [];
- let users = [];
- const currentLib = profileData || {};
-
- try {
- // Try each server type to find the active one
- const plexRes = await fetch('/api/plex/music-libraries');
- if (plexRes.ok) {
- const plexData = await plexRes.json();
- if (plexData.libraries && plexData.libraries.length > 0) {
- serverType = 'plex';
- libraries = plexData.libraries;
- }
- }
- } catch (e) { }
-
- if (serverType === 'none') {
- try {
- const jellyRes = await fetch('/api/jellyfin/music-libraries');
- if (jellyRes.ok) {
- const jellyData = await jellyRes.json();
- if (jellyData.libraries && jellyData.libraries.length > 0) {
- serverType = 'jellyfin';
- libraries = jellyData.libraries;
- users = jellyData.users || [];
- }
- }
- } catch (e) { }
- }
-
- if (serverType === 'none') {
- section.innerHTML = `
-
-
- Tidal
-
- Connect your own Tidal account to see your playlists. Uses the admin's Tidal app credentials.
-
-
-
-
-
-
- `;
- } else if (serverType === 'plex') {
- const selectedLib = currentLib.plex_library_id || '';
- const optionsHtml = libraries.map(lib => {
- const name = lib.name || lib.title || lib;
- const val = typeof lib === 'string' ? lib : (lib.name || lib.title);
- return ``;
- }).join('');
-
- section.innerHTML = `
-
-
- Media Server
-No media server connected. Ask your admin to configure Plex, Jellyfin, or Navidrome in Settings.
-
-
- `;
- } else if (serverType === 'jellyfin') {
- const selectedUser = currentLib.jellyfin_user_id || '';
- const selectedLib = currentLib.jellyfin_library_id || '';
-
- const userOpts = users.map(u => {
- const uid = u.id || u.Id;
- const uname = u.name || u.Name;
- return ``;
- }).join('');
-
- const libOpts = libraries.map(lib => {
- const lid = lib.key || lib.id || lib.Id;
- const lname = lib.name || lib.Name || lib.title;
- return ``;
- }).join('');
-
- section.innerHTML = `
-
-
- Plex Library
- - - ${selectedLib ? 'Custom' : 'Default'} - -Choose which Plex music library your playlists sync to.
-
-
-
-
-
-
-
-
-
- `;
- }
-
- const existing = document.getElementById('ps-server-library-section');
- if (existing) existing.replaceWith(section);
- else container.appendChild(section);
-}
-
-async function savePersonalServerLibrary() {
- try {
- const plexSelect = document.getElementById('ps-plex-library-select');
- const jellyUserSelect = document.getElementById('ps-jellyfin-user-select');
- const jellyLibSelect = document.getElementById('ps-jellyfin-library-select');
-
- if (plexSelect) {
- await fetch('/api/profiles/me/server-library', {
- method: 'POST', headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ server_type: 'plex', library_id: plexSelect.value || null })
- });
- }
- if (jellyUserSelect || jellyLibSelect) {
- await fetch('/api/profiles/me/server-library', {
- method: 'POST', headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- server_type: 'jellyfin',
- user_id: jellyUserSelect?.value || null,
- library_id: jellyLibSelect?.value || null
- })
- });
- }
-
- showToast('Server library settings saved', 'success');
- } catch (e) {
- showToast('Error saving settings', 'error');
- }
-}
-
-async function disconnectPersonalSpotify() {
- try {
- const res = await fetch('/api/profiles/me/spotify', { method: 'DELETE' });
- const data = await res.json();
- if (data.success) {
- showToast('Spotify credentials removed — using shared config', 'info');
- openPersonalSettings(); // Reload
- }
- } catch (e) {
- showToast('Error removing credentials', 'error');
- }
-}
-
-function renderPersonalSettingsLB(data, container) {
- const body = container || document.getElementById('personal-settings-body');
- const connected = data.connected;
- const username = data.username || '';
- const baseUrl = data.base_url || '';
- const source = data.source || 'global';
-
- const tokenFormHtml = `
-
-
- Jellyfin
- - - ${selectedUser || selectedLib ? 'Custom' : 'Default'} - -Choose which Jellyfin user and library your playlists sync to.
- ${users.length ? `` : ''}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Get your token from listenbrainz.org/profile
-
-
-
-
-
- `;
-
- let contentHtml;
- if (connected && source === 'profile') {
- // Personal token — show connected state with Disconnect
- const serverDisplay = baseUrl ? baseUrl.replace(/\/1$/, '').replace(/^https?:\/\//, '') : 'api.listenbrainz.org';
- contentHtml = `
-
-
-
-
-
- Connected as ${escapeHtml(username)}
- ${escapeHtml(serverDisplay)}
- Personal token
-
-
-
- `;
- } else if (connected && source === 'global') {
- // Using admin's shared token — show status + option to set own token
- const serverDisplay = baseUrl ? baseUrl.replace(/\/1$/, '').replace(/^https?:\/\//, '') : 'api.listenbrainz.org';
- contentHtml = `
-
-
-
-
-
- Connected as ${escapeHtml(username)}
- ${escapeHtml(serverDisplay)}
- Using shared token from Settings
-
-
- `;
- } else {
- // Not connected at all
- contentHtml = tokenFormHtml;
- }
-
- const section = document.createElement('div');
- section.id = 'ps-listenbrainz-section';
- section.innerHTML = `
- Set your own token to use a different ListenBrainz account:
- ${tokenFormHtml}
-
-
- `;
- // Replace existing or append
- const existing = document.getElementById('ps-listenbrainz-section');
- if (existing) existing.replaceWith(section);
- else body.appendChild(section);
-}
-
-async function testPersonalListenBrainz() {
- const token = document.getElementById('ps-lb-token')?.value?.trim();
- const baseUrl = document.getElementById('ps-lb-base-url')?.value?.trim() || '';
- const resultEl = document.getElementById('ps-lb-result');
- if (!token) {
- if (resultEl) resultEl.innerHTML = '
-
- ${contentHtml}
- ListenBrainz
- - - ${connected ? 'Connected' : 'Not connected'} - -Please enter a token
';
- return;
- }
- if (resultEl) resultEl.innerHTML = 'Testing...
';
- try {
- const res = await fetch('/api/profiles/me/listenbrainz/test', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ token, base_url: baseUrl })
- });
- const data = await res.json();
- if (data.success) {
- resultEl.innerHTML = `Valid token — ${escapeHtml(data.username)}
`;
- } else {
- resultEl.innerHTML = `${escapeHtml(data.error || 'Invalid token')}
`;
- }
- } catch (e) {
- resultEl.innerHTML = 'Connection failed
';
- }
-}
-
-async function connectPersonalListenBrainz() {
- const token = document.getElementById('ps-lb-token')?.value?.trim();
- const baseUrl = document.getElementById('ps-lb-base-url')?.value?.trim() || '';
- const resultEl = document.getElementById('ps-lb-result');
- if (!token) {
- if (resultEl) resultEl.innerHTML = 'Please enter a token
';
- return;
- }
- // Disable buttons during connect
- document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = true);
- if (resultEl) resultEl.innerHTML = 'Connecting...
';
- try {
- const res = await fetch('/api/profiles/me/listenbrainz', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ token, base_url: baseUrl })
- });
- const data = await res.json();
- if (data.success) {
- showToast(`Connected to ListenBrainz as ${data.username}`, 'success');
- // Re-render as connected
- renderPersonalSettingsLB({ connected: true, username: data.username, base_url: baseUrl, source: 'profile' });
- // Refresh LB playlists on discover page
- _invalidateListenBrainzCache();
- if (typeof initializeListenBrainzTabs === 'function') {
- initializeListenBrainzTabs();
- }
- } else {
- resultEl.innerHTML = `${escapeHtml(data.error || 'Connection failed')}
`;
- document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = false);
- }
- } catch (e) {
- resultEl.innerHTML = 'Connection failed
';
- document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = false);
- }
-}
-
-async function disconnectPersonalListenBrainz() {
- try {
- await fetch('/api/profiles/me/listenbrainz', { method: 'DELETE' });
- showToast('ListenBrainz disconnected', 'info');
- // Re-render as disconnected — re-fetch to check if global fallback exists
- const res = await fetch('/api/profiles/me/listenbrainz');
- const data = await res.json();
- renderPersonalSettingsLB(data);
- // Refresh LB playlists on discover page
- _invalidateListenBrainzCache();
- if (typeof initializeListenBrainzTabs === 'function') {
- initializeListenBrainzTabs();
- }
- } catch (e) {
- showToast('Failed to disconnect', 'error');
- }
-}
-
-function _invalidateListenBrainzCache() {
- if (typeof listenbrainzPlaylistsLoaded !== 'undefined') listenbrainzPlaylistsLoaded = false;
- if (typeof listenbrainzPlaylistsCache !== 'undefined') {
- try { Object.keys(listenbrainzPlaylistsCache).forEach(k => delete listenbrainzPlaylistsCache[k]); } catch (e) { }
- }
- if (typeof listenbrainzTracksCache !== 'undefined') {
- try { Object.keys(listenbrainzTracksCache).forEach(k => delete listenbrainzTracksCache[k]); } catch (e) { }
- }
-}
-
-function initProfileManagement() {
- const manageBtn = document.getElementById('manage-profiles-btn');
- const closeBtn = document.getElementById('profile-manage-close');
- const createBtn = document.getElementById('create-profile-btn');
- const adminPinBtn = document.getElementById('set-admin-pin-btn');
-
- if (manageBtn) {
- manageBtn.onclick = () => {
- document.getElementById('profile-manage-panel').style.display = 'flex';
- loadProfileManageList();
- };
- }
-
- if (closeBtn) {
- closeBtn.onclick = () => {
- document.getElementById('profile-manage-panel').style.display = 'none';
- // Refresh picker — keep cancel button if user already has a profile selected
- const hasCancel = !!currentProfile;
- fetch('/api/profiles').then(r => r.json()).then(d => {
- showProfilePicker(d.profiles || [], hasCancel);
- });
- };
- }
-
- // Color picker
- let selectedColor = '#6366f1';
- document.querySelectorAll('.profile-color-swatch').forEach(swatch => {
- swatch.onclick = () => {
- document.querySelectorAll('.profile-color-swatch').forEach(s => s.classList.remove('selected'));
- swatch.classList.add('selected');
- selectedColor = swatch.dataset.color;
- };
- });
- // Select first by default
- const firstSwatch = document.querySelector('.profile-color-swatch');
- if (firstSwatch) firstSwatch.classList.add('selected');
-
- if (createBtn) {
- createBtn.onclick = async () => {
- const name = document.getElementById('new-profile-name').value.trim();
- const avatarUrl = document.getElementById('new-profile-avatar-url').value.trim();
- const pin = document.getElementById('new-profile-pin').value;
- if (!name) return;
-
- // Collect profile settings
- const homePage = document.getElementById('new-profile-home-page').value || null;
- const pageCheckboxes = document.querySelectorAll('#new-profile-allowed-pages input[type="checkbox"]:not(:disabled)');
- const allChecked = Array.from(pageCheckboxes).every(cb => cb.checked);
- const allowedPages = allChecked ? null : Array.from(pageCheckboxes).filter(cb => cb.checked).map(cb => cb.value);
- const canDl = document.getElementById('new-profile-can-download').checked;
-
- const res = await fetch('/api/profiles', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- name, avatar_color: selectedColor,
- avatar_url: avatarUrl || undefined,
- pin: pin || undefined,
- home_page: homePage,
- allowed_pages: allowedPages,
- can_download: canDl
- })
- });
- const data = await res.json();
- if (data.success) {
- document.getElementById('new-profile-name').value = '';
- document.getElementById('new-profile-avatar-url').value = '';
- document.getElementById('new-profile-pin').value = '';
- document.getElementById('new-profile-home-page').value = '';
- pageCheckboxes.forEach(cb => cb.checked = true);
- document.getElementById('new-profile-can-download').checked = true;
- loadProfileManageList();
- // Show admin PIN section if >1 profiles and admin has no PIN
- checkAdminPinRequired();
- } else {
- alert(data.error || 'Failed to create profile');
- }
- };
- }
-
- if (adminPinBtn) {
- adminPinBtn.onclick = async () => {
- const pin = document.getElementById('admin-pin-input').value;
- if (!pin || pin.length < 1) return;
- // Find admin profile
- const res = await fetch('/api/profiles');
- const data = await res.json();
- const admin = (data.profiles || []).find(p => p.is_admin);
- if (!admin) return;
-
- try {
- const pinRes = await fetch(`/api/profiles/${admin.id}/set-pin`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ pin })
- });
- const pinData = await pinRes.json();
- if (!pinData.success) {
- alert(pinData.error || 'Failed to set PIN');
- return;
- }
- } catch (e) {
- alert('Connection error');
- return;
- }
- document.getElementById('admin-pin-input').value = '';
- document.getElementById('admin-pin-section').style.display = 'none';
- loadProfileManageList();
- };
- }
-}
-
-async function loadProfileManageList() {
- const list = document.getElementById('profile-manage-list');
- const res = await fetch('/api/profiles');
- const data = await res.json();
- const profiles = data.profiles || [];
-
- list.innerHTML = '';
- profiles.forEach(p => {
- const item = document.createElement('div');
- item.className = 'profile-manage-item';
-
- const av = document.createElement('div');
- renderProfileAvatar(av, p);
- item.appendChild(av);
-
- const info = document.createElement('div');
- info.className = 'profile-info';
- const nameDiv = document.createElement('div');
- nameDiv.className = 'name';
- nameDiv.textContent = p.name + (p.has_pin ? ' 🔒' : '');
- info.appendChild(nameDiv);
- const roleTags = [];
- if (p.is_admin) roleTags.push('Admin');
- if (p.can_download === false) roleTags.push('No Downloads');
- if (p.allowed_pages) roleTags.push(`${p.allowed_pages.length} pages`);
- if (roleTags.length) {
- const roleDiv = document.createElement('div');
- roleDiv.className = 'role';
- roleDiv.textContent = roleTags.join(' · ');
- info.appendChild(roleDiv);
- }
- item.appendChild(info);
-
- const actions = document.createElement('div');
- actions.className = 'profile-manage-actions';
-
- const editBtn = document.createElement('button');
- editBtn.className = 'profile-edit-btn';
- editBtn.dataset.id = p.id;
- editBtn.dataset.name = p.name;
- editBtn.dataset.color = p.avatar_color || '#6366f1';
- editBtn.dataset.avatarUrl = p.avatar_url || '';
- editBtn.dataset.homePage = p.home_page || '';
- editBtn.dataset.allowedPages = p.allowed_pages ? JSON.stringify(p.allowed_pages) : '';
- editBtn.dataset.canDownload = p.can_download !== false ? '1' : '0';
- editBtn.dataset.isAdmin = p.is_admin ? '1' : '0';
- editBtn.title = 'Edit profile';
- editBtn.textContent = '✏️';
- actions.appendChild(editBtn);
-
- if (!p.is_admin) {
- const delBtn = document.createElement('button');
- delBtn.className = 'profile-delete-btn';
- delBtn.dataset.id = p.id;
- delBtn.title = 'Delete profile';
- delBtn.textContent = '🗑️';
- actions.appendChild(delBtn);
- }
-
- item.appendChild(actions);
- list.appendChild(item);
- });
-
- // Bind edit buttons
- list.querySelectorAll('.profile-edit-btn').forEach(btn => {
- btn.onclick = () => {
- showProfileEditForm(btn.dataset.id, btn.dataset.name, btn.dataset.color, btn.dataset.avatarUrl, {
- home_page: btn.dataset.homePage || '',
- allowed_pages: btn.dataset.allowedPages ? JSON.parse(btn.dataset.allowedPages) : null,
- can_download: btn.dataset.canDownload !== '0',
- is_admin: btn.dataset.isAdmin === '1'
- });
- };
- });
-
- // Bind delete buttons
- list.querySelectorAll('.profile-delete-btn').forEach(btn => {
- btn.onclick = async () => {
- if (!await showConfirmDialog({ title: 'Delete Profile', message: 'Delete this profile and all its data?', confirmText: 'Delete', destructive: true })) return;
- try {
- const res = await fetch(`/api/profiles/${btn.dataset.id}`, { method: 'DELETE' });
- const data = await res.json();
- if (!data.success) {
- alert(data.error || 'Failed to delete profile');
- }
- } catch (e) {
- alert('Connection error');
- }
- loadProfileManageList();
- };
- });
-
- checkAdminPinRequired();
-}
-
-function showProfileEditForm(profileId, currentName, currentColor, currentAvatarUrl, profileSettings = {}) {
- const list = document.getElementById('profile-manage-list');
- // Remove any existing edit form
- const existing = document.getElementById('profile-edit-form');
- if (existing) existing.remove();
-
- const isAdmin = currentProfile && currentProfile.is_admin;
- const isEditingAdmin = profileSettings.is_admin;
- const editColors = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#3b82f6', '#ef4444', '#8b5cf6', '#14b8a6'];
- const pageLabels = {
- dashboard: 'Dashboard', sync: 'Sync', downloads: 'Search', discover: 'Discover',
- artists: 'Artists', automations: 'Automations', library: 'Library', stats: 'Listening Stats',
- 'playlist-explorer': 'Playlist Explorer', import: 'Import', help: 'Help & Docs'
- };
-
- const form = document.createElement('div');
- form.id = 'profile-edit-form';
- form.className = 'profile-edit-form';
-
- const nameInput = document.createElement('input');
- nameInput.type = 'text';
- nameInput.className = 'profile-input';
- nameInput.value = currentName;
- nameInput.maxLength = 20;
- nameInput.placeholder = 'Profile name';
- form.appendChild(nameInput);
-
- const urlInput = document.createElement('input');
- urlInput.type = 'url';
- urlInput.className = 'profile-input';
- urlInput.value = currentAvatarUrl || '';
- urlInput.placeholder = 'Avatar image URL (optional)';
- form.appendChild(urlInput);
-
- const colorRow = document.createElement('div');
- colorRow.className = 'profile-color-picker';
- let editColor = currentColor;
- editColors.forEach(c => {
- const swatch = document.createElement('span');
- swatch.className = 'profile-color-swatch' + (c === currentColor ? ' selected' : '');
- swatch.style.background = c;
- swatch.dataset.color = c;
- swatch.onclick = () => {
- colorRow.querySelectorAll('.profile-color-swatch').forEach(s => s.classList.remove('selected'));
- swatch.classList.add('selected');
- editColor = c;
- };
- colorRow.appendChild(swatch);
- });
- form.appendChild(colorRow);
-
- // Home page selector — visible to everyone (self-edit or admin editing others)
- const homeLabel = document.createElement('label');
- homeLabel.className = 'profile-settings-label';
- homeLabel.textContent = 'Home Page';
- form.appendChild(homeLabel);
-
- const homeSelect = document.createElement('select');
- homeSelect.className = 'profile-input';
- const defaultOpt = document.createElement('option');
- defaultOpt.value = '';
- defaultOpt.textContent = isEditingAdmin ? 'Default (Dashboard)' : 'Default (Discover)';
- homeSelect.appendChild(defaultOpt);
- // Filter home page options to only allowed pages
- const allowedSet = profileSettings.allowed_pages;
- Object.entries(pageLabels).forEach(([id, label]) => {
- if (allowedSet && !allowedSet.includes(id)) return; // Skip non-permitted
- const opt = document.createElement('option');
- opt.value = id;
- opt.textContent = label;
- if (id === profileSettings.home_page) opt.selected = true;
- homeSelect.appendChild(opt);
- });
- form.appendChild(homeSelect);
-
- // Admin-only settings: allowed pages & can_download
- let pageCheckboxes = [];
- let canDlCheckbox = null;
- if (isAdmin && !isEditingAdmin) {
- const apLabel = document.createElement('label');
- apLabel.className = 'profile-settings-label';
- apLabel.textContent = 'Page Access';
- form.appendChild(apLabel);
-
- const apContainer = document.createElement('div');
- apContainer.className = 'profile-page-checkboxes';
- Object.entries(pageLabels).forEach(([id, label]) => {
- const lbl = document.createElement('label');
- const cb = document.createElement('input');
- cb.type = 'checkbox';
- cb.value = id;
- cb.checked = !allowedSet || allowedSet.includes(id);
- lbl.appendChild(cb);
- lbl.appendChild(document.createTextNode(' ' + label));
- apContainer.appendChild(lbl);
- pageCheckboxes.push(cb);
- });
- // Always-on help
- const helpLbl = document.createElement('label');
- const helpCb = document.createElement('input');
- helpCb.type = 'checkbox';
- helpCb.checked = true;
- helpCb.disabled = true;
- helpLbl.appendChild(helpCb);
- helpLbl.appendChild(document.createTextNode(' Help & Docs'));
- apContainer.appendChild(helpLbl);
- form.appendChild(apContainer);
-
- const dlLabel = document.createElement('label');
- dlLabel.className = 'profile-checkbox-label';
- canDlCheckbox = document.createElement('input');
- canDlCheckbox.type = 'checkbox';
- canDlCheckbox.checked = profileSettings.can_download !== false;
- dlLabel.appendChild(canDlCheckbox);
- dlLabel.appendChild(document.createTextNode(' Can download music'));
- form.appendChild(dlLabel);
- }
-
- const btnRow = document.createElement('div');
- btnRow.className = 'profile-edit-buttons';
-
- const saveBtn = document.createElement('button');
- saveBtn.className = 'profile-create-btn';
- saveBtn.textContent = 'Save';
- saveBtn.onclick = async () => {
- const newName = nameInput.value.trim();
- if (!newName) { alert('Name cannot be empty'); return; }
- const newAvatarUrl = urlInput.value.trim() || null;
- const payload = { name: newName, avatar_color: editColor, avatar_url: newAvatarUrl };
-
- // Home page
- payload.home_page = homeSelect.value || null;
-
- // Admin-only fields
- if (isAdmin && !isEditingAdmin && pageCheckboxes.length) {
- const allChecked = pageCheckboxes.every(cb => cb.checked);
- payload.allowed_pages = allChecked ? null : pageCheckboxes.filter(cb => cb.checked).map(cb => cb.value);
- payload.can_download = canDlCheckbox ? canDlCheckbox.checked : true;
- }
-
- try {
- const res = await fetch(`/api/profiles/${profileId}`, {
- method: 'PUT',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(payload)
- });
- const data = await res.json();
- if (data.success) {
- // Update sidebar indicator if editing current profile
- if (currentProfile && currentProfile.id == profileId) {
- currentProfile.name = newName;
- currentProfile.avatar_color = editColor;
- currentProfile.avatar_url = newAvatarUrl;
- if (payload.home_page !== undefined) currentProfile.home_page = payload.home_page;
- if (payload.allowed_pages !== undefined) currentProfile.allowed_pages = payload.allowed_pages;
- if (payload.can_download !== undefined) currentProfile.can_download = payload.can_download;
- updateProfileIndicator();
- }
- loadProfileManageList();
- } else {
- alert(data.error || 'Failed to update profile');
- }
- } catch (e) {
- alert('Connection error');
- }
- };
- btnRow.appendChild(saveBtn);
-
- const cancelBtn = document.createElement('button');
- cancelBtn.className = 'profile-picker-cancel';
- cancelBtn.textContent = 'Cancel';
- cancelBtn.onclick = () => form.remove();
- btnRow.appendChild(cancelBtn);
-
- form.appendChild(btnRow);
- list.appendChild(form);
- nameInput.focus();
- nameInput.select();
-}
-
-function showSelfEditForm() {
- if (!currentProfile) return;
- const overlay = document.getElementById('profile-picker-overlay');
- const container = overlay.querySelector('.profile-picker-container');
-
- // Hide the picker grid and show self-edit form
- const grid = document.getElementById('profile-picker-grid');
- const actions = document.getElementById('profile-picker-actions');
- grid.style.display = 'none';
- actions.style.display = 'none';
-
- // Remove any existing self-edit form
- const existing = document.getElementById('self-edit-form');
- if (existing) existing.remove();
-
- const pageLabels = {
- dashboard: 'Dashboard', sync: 'Sync', downloads: 'Search', discover: 'Discover',
- artists: 'Artists', automations: 'Automations', library: 'Library', stats: 'Listening Stats',
- 'playlist-explorer': 'Playlist Explorer', import: 'Import', help: 'Help & Docs'
- };
-
- const form = document.createElement('div');
- form.id = 'self-edit-form';
- form.className = 'profile-edit-form';
- form.style.marginTop = '16px';
-
- const title = document.createElement('h3');
- title.textContent = 'My Profile';
- title.style.cssText = 'color: #fff; margin: 0 0 12px; font-size: 18px;';
- form.appendChild(title);
-
- // Name
- const nameInput = document.createElement('input');
- nameInput.type = 'text';
- nameInput.className = 'profile-input';
- nameInput.value = currentProfile.name;
- nameInput.maxLength = 20;
- nameInput.placeholder = 'Profile name';
- form.appendChild(nameInput);
-
- // Home page
- const homeLabel = document.createElement('label');
- homeLabel.className = 'profile-settings-label';
- homeLabel.textContent = 'Home Page';
- form.appendChild(homeLabel);
-
- const homeSelect = document.createElement('select');
- homeSelect.className = 'profile-input';
- const defaultOpt = document.createElement('option');
- defaultOpt.value = '';
- defaultOpt.textContent = 'Default (Discover)';
- homeSelect.appendChild(defaultOpt);
- const ap = currentProfile.allowed_pages;
- Object.entries(pageLabels).forEach(([id, label]) => {
- if (ap && !ap.includes(id)) return;
- const opt = document.createElement('option');
- opt.value = id;
- opt.textContent = label;
- if (id === currentProfile.home_page) opt.selected = true;
- homeSelect.appendChild(opt);
- });
- form.appendChild(homeSelect);
-
- // Buttons
- const btnRow = document.createElement('div');
- btnRow.className = 'profile-edit-buttons';
- btnRow.style.marginTop = '12px';
-
- const saveBtn = document.createElement('button');
- saveBtn.className = 'profile-create-btn';
- saveBtn.textContent = 'Save';
- saveBtn.onclick = async () => {
- const newName = nameInput.value.trim();
- if (!newName) { alert('Name cannot be empty'); return; }
- try {
- const res = await fetch(`/api/profiles/${currentProfile.id}`, {
- method: 'PUT',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ name: newName, home_page: homeSelect.value || null })
- });
- const data = await res.json();
- if (data.success) {
- currentProfile.name = newName;
- currentProfile.home_page = homeSelect.value || null;
- updateProfileIndicator();
- closeSelfEdit();
- hideProfilePicker();
- } else {
- alert(data.error || 'Failed to update');
- }
- } catch (e) {
- alert('Connection error');
- }
- };
- btnRow.appendChild(saveBtn);
-
- const cancelBtn = document.createElement('button');
- cancelBtn.className = 'profile-picker-cancel';
- cancelBtn.textContent = 'Cancel';
- cancelBtn.onclick = () => closeSelfEdit();
- btnRow.appendChild(cancelBtn);
-
- form.appendChild(btnRow);
- container.appendChild(form);
-
- function closeSelfEdit() {
- form.remove();
- grid.style.display = '';
- actions.style.display = '';
- }
-}
-
-async function checkAdminPinRequired() {
- const res = await fetch('/api/profiles');
- const data = await res.json();
- const profiles = data.profiles || [];
- const admin = profiles.find(p => p.is_admin);
- const section = document.getElementById('admin-pin-section');
-
- if (profiles.length > 1 && admin && !admin.has_pin && section) {
- section.style.display = '';
- } else if (section) {
- section.style.display = 'none';
- }
-}
-
-document.addEventListener('DOMContentLoaded', async function () {
- console.log('SoulSync WebUI initializing...');
-
- // Check if first-run setup wizard should be shown
- const params = new URLSearchParams(window.location.search);
- const forceSetup = params.get('setup') === '1';
- let showWizard = forceSetup;
-
- if (!forceSetup) {
- try {
- const setupResp = await fetch('/api/setup/status');
- const setupData = await setupResp.json();
- if (!setupData.setup_complete) {
- showWizard = true;
- localStorage.removeItem('soulsync_setup_complete');
- }
- } catch (e) {
- console.warn('Setup status check failed, continuing normal init:', e);
- }
- }
-
- if (showWizard && typeof openSetupWizard === 'function') {
- window._onSetupWizardComplete = function () {
- _continueAppInit();
- };
- openSetupWizard();
- return; // Defer init until wizard closes
- }
-
- _continueAppInit();
-});
-
-async function _continueAppInit() {
- // Initialize profile management UI handlers
- initProfileManagement();
-
- // Check profiles first — may show picker instead of app
- const profileReady = await initProfileSystem();
- if (!profileReady) {
- console.log('Waiting for profile selection...');
- return; // App init deferred until profile is selected via picker
- }
-
- initApp();
-}
-
-function initApp() {
- // Initialize components
- initializeNavigation();
- initializeMobileNavigation();
- initializeMediaPlayer();
- initExpandedPlayer();
- initializeSyncPage();
- initializeWatchlist();
- initializeDownloadManagerToggle();
-
-
- // Initialize WebSocket connection (falls back to HTTP polling if unavailable)
- initializeWebSocket();
-
- // Start global service status polling for sidebar (works on all pages)
- // Initial fetch for immediate data, then setInterval as fallback when WebSocket is disconnected
- fetchAndUpdateServiceStatus();
- setInterval(fetchAndUpdateServiceStatus, 5000); // Every 5 seconds (no-op when WebSocket active)
-
- // Check for updates on load and every hour
- checkForUpdates();
- setInterval(checkForUpdates, 3600000);
-
- // Refresh key data immediately when user returns to this tab
- document.addEventListener('visibilitychange', () => {
- if (!document.hidden) {
- fetchAndUpdateServiceStatus();
- // Refresh dashboard-specific data if on dashboard
- const dashboardPage = document.getElementById('dashboard-page');
- if (dashboardPage && dashboardPage.classList.contains('active')) {
- fetchAndUpdateSystemStats();
- fetchAndUpdateActivityFeed();
- }
- }
- });
-
- // Start always-on download polling (batched, minimal overhead)
- startGlobalDownloadPolling();
-
- // Load issues badge count
- loadIssuesBadge();
-
- // Load initial data
- loadInitialData();
-
- // Handle window resize to re-check track title scrolling
- window.addEventListener('resize', function () {
- if (currentTrack) {
- const trackTitleElement = document.getElementById('track-title');
- const trackTitle = currentTrack.title || 'Unknown Track';
- setTimeout(() => {
- checkAndEnableScrolling(trackTitleElement, trackTitle);
- }, 100); // Small delay to allow layout to settle
- }
- });
-
- console.log('SoulSync WebUI initialized successfully!');
-}
-
-// ===============================
-// NAVIGATION SYSTEM
-// ===============================
-
-function initializeNavigation() {
- const navButtons = document.querySelectorAll('.nav-button');
-
- navButtons.forEach(button => {
- button.addEventListener('click', () => {
- const page = button.getAttribute('data-page');
- navigateToPage(page);
- });
- });
-
- window.addEventListener('popstate', (event) => {
- const page = (event.state && event.state.page) || _getPageFromPath();
- if (page && page !== currentPage) {
- navigateToPage(page, { skipPushState: true });
- }
- });
-}
-
-const _DEEPLINK_VALID_PAGES = new Set([
- 'dashboard', 'sync', 'downloads', 'discover', 'artists', 'automations',
- 'library', 'import', 'settings', 'help', 'issues', 'stats', 'watchlist',
- 'wishlist', 'active-downloads', 'artist-detail', 'playlist-explorer',
- 'hydrabase', 'tools'
-]);
-
-function _getPageFromPath() {
- const path = window.location.pathname.replace(/^\/+|\/+$/g, '');
- if (!path) return 'dashboard';
- const basePage = path.split('/')[0];
- if (!_DEEPLINK_VALID_PAGES.has(basePage)) return 'dashboard';
- // Context-dependent pages fall back to a sensible parent
- if (basePage === 'artist-detail') return 'artists';
- if (basePage === 'playlist-explorer') return 'library';
- return basePage;
-}
-
-// ===============================
-// MOBILE NAVIGATION
-// ===============================
-
-function initializeMobileNavigation() {
- const hamburgerBtn = document.getElementById('hamburger-btn');
- const sidebar = document.querySelector('.sidebar');
- const overlay = document.getElementById('mobile-overlay');
-
- if (!hamburgerBtn || !sidebar || !overlay) return;
-
- function openMobileNav() {
- sidebar.classList.add('mobile-open');
- hamburgerBtn.classList.add('active');
- overlay.classList.add('active');
- document.body.classList.add('mobile-nav-open');
- }
-
- function closeMobileNav() {
- sidebar.classList.remove('mobile-open');
- hamburgerBtn.classList.remove('active');
- overlay.classList.remove('active');
- document.body.classList.remove('mobile-nav-open');
- }
-
- hamburgerBtn.addEventListener('click', () => {
- if (sidebar.classList.contains('mobile-open')) {
- closeMobileNav();
- } else {
- openMobileNav();
- }
- });
-
- overlay.addEventListener('click', closeMobileNav);
-
- // Close sidebar on nav button click (mobile only)
- document.querySelectorAll('.nav-button').forEach(btn => {
- btn.addEventListener('click', () => {
- if (window.innerWidth <= 768) {
- closeMobileNav();
- }
- });
- });
-}
-
-function initializeWatchlist() {
- // Watchlist button navigates to watchlist page
- const watchlistButton = document.getElementById('watchlist-button');
- if (watchlistButton) {
- watchlistButton.addEventListener('click', () => navigateToPage('watchlist'));
- }
-
- // Wishlist button: quick check for active download, otherwise navigate to page
- const wishlistButton = document.getElementById('wishlist-button');
- if (wishlistButton) {
- wishlistButton.addEventListener('click', async () => {
- // Fast path: check if we already know about an active wishlist process
- const clientProcess = activeDownloadProcesses['wishlist'];
- if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
- clientProcess.modalElement.style.display = 'flex';
- WishlistModalState.setVisible();
- return;
- }
- // Slow path: ask the server (with timeout to prevent button feeling dead)
- try {
- const controller = new AbortController();
- const timeout = setTimeout(() => controller.abort(), 2000);
- const resp = await fetch('/api/active-processes', { signal: controller.signal });
- clearTimeout(timeout);
- if (resp.ok) {
- const data = await resp.json();
- const serverProcess = (data.active_processes || []).find(p => p.playlist_id === 'wishlist');
- if (serverProcess) {
- try {
- WishlistModalState.clearUserClosed();
- await rehydrateModal(serverProcess, true);
- } catch (e) {
- console.debug('Rehydration failed, navigating to page:', e);
- navigateToPage('wishlist');
- }
- return;
- }
- }
- } catch (e) {
- // Timeout or network error — just navigate
- }
- navigateToPage('wishlist');
- });
- }
-
- // Update watchlist count initially
- updateWatchlistButtonCount();
-
- // Update count every 10 seconds
- setInterval(updateWatchlistButtonCount, 10000);
-
- console.log('Watchlist system initialized');
-}
-
-function initializeDownloadManagerToggle() {
- const toggleButton = document.getElementById('toggle-download-manager-btn');
- const downloadsContent = document.querySelector('.downloads-content');
-
- if (!toggleButton || !downloadsContent) {
- console.log('Download manager toggle not found on this page');
- return;
- }
-
- // Load saved state from localStorage (hidden by default for more search space)
- const isHidden = localStorage.getItem('downloadManagerHidden') !== 'false';
- if (isHidden) {
- downloadsContent.classList.add('manager-hidden');
- }
-
- // Add click handler
- toggleButton.addEventListener('click', () => {
- const isCurrentlyHidden = downloadsContent.classList.contains('manager-hidden');
-
- if (isCurrentlyHidden) {
- downloadsContent.classList.remove('manager-hidden');
- localStorage.setItem('downloadManagerHidden', 'false');
- } else {
- downloadsContent.classList.add('manager-hidden');
- localStorage.setItem('downloadManagerHidden', 'true');
- }
- });
-
- console.log('Download manager toggle initialized');
-}
-
-function navigateToPage(pageId, options = {}) {
- if (pageId === currentPage) return;
-
- // Permission guard — redirect to home page if not allowed
- if (!isPageAllowed(pageId)) {
- const home = getProfileHomePage();
- if (home !== currentPage && isPageAllowed(home)) {
- navigateToPage(home);
- }
- return;
- }
-
- // Update navigation buttons (only if there's a nav button for this page)
- document.querySelectorAll('.nav-button').forEach(btn => {
- btn.classList.remove('active');
- });
-
- // Handle artist-detail page specially - it should highlight the 'library' nav button
- const navPageId = pageId === 'artist-detail' ? 'library' : pageId;
- const navButton = document.querySelector(`[data-page="${navPageId}"]`);
- if (navButton) {
- navButton.classList.add('active');
- }
-
- // Update pages
- document.querySelectorAll('.page').forEach(page => {
- page.classList.remove('active');
- });
- document.getElementById(`${pageId}-page`).classList.add('active');
-
- currentPage = pageId;
-
- if (!options.skipPushState) {
- const urlPath = pageId === 'dashboard' ? '/' : '/' + pageId;
- if (window.location.pathname !== urlPath) {
- history.pushState({ page: pageId }, '', urlPath);
- }
- }
-
- // Show/hide global search bar (hide on downloads page where enhanced search exists)
- if (typeof _gsUpdateVisibility === 'function') _gsUpdateVisibility();
-
- // Show/hide discover download sidebar based on page
- const downloadSidebar = document.getElementById('discover-download-sidebar');
- if (downloadSidebar) {
- if (pageId === 'discover') {
- // Show sidebar on discover page if there are active downloads
- const activeDownloads = Object.keys(discoverDownloads || {}).length;
- console.log(`📊 [NAVIGATE] Discover page - ${activeDownloads} active downloads`);
- if (activeDownloads > 0) {
- // Update the sidebar UI to render the bubbles
- console.log(`🔄 [NAVIGATE] Updating discover download bar UI`);
- updateDiscoverDownloadBar();
- }
- } else {
- // Always hide sidebar on other pages
- downloadSidebar.classList.add('hidden');
- }
- }
-
- // Load page-specific data
- loadPageData(pageId);
-
- // Update page background particles
- if (window.pageParticles && window._particlesEnabled !== false) window.pageParticles.setPage(pageId);
-
- // Update worker orbs
- if (window.workerOrbs) window.workerOrbs.setPage(pageId);
-}
-
-// REPLACE your old loadPageData function with this one:
-// REPLACE your old loadPageData function with this corrected one
-
-async function loadPageData(pageId) {
- try {
- // Stop any active polling when navigating away
- stopDbStatsPolling();
- stopDbUpdatePolling();
- stopWishlistCountPolling();
- stopLogPolling();
- // Stop watchlist/wishlist page timers when navigating away
- if (watchlistCountdownInterval) { clearInterval(watchlistCountdownInterval); watchlistCountdownInterval = null; }
- if (wishlistCountdownInterval) { clearInterval(wishlistCountdownInterval); wishlistCountdownInterval = null; }
- if (typeof _stopNebulaLivePolling === 'function') _stopNebulaLivePolling();
- if (pageId !== 'sync') {
- cleanupBeatportContent();
- }
- switch (pageId) {
- case 'dashboard':
- await loadDashboardData();
- loadDashboardSyncHistory();
- break;
- case 'sync':
- initializeSyncPage();
- await loadSyncData();
- break;
- case 'downloads':
- initializeSearch();
- initializeSearchModeToggle();
- initializeFilters();
- await loadDownloadsData();
- break;
- case 'artists':
- // Only fully initialize if not already initialized
- if (!artistsPageState.isInitialized) {
- initializeArtistsPage();
- } else {
- // Just restore state if already initialized
- restoreArtistsPageState();
- }
- break;
- case 'active-downloads':
- loadActiveDownloadsPage();
- break;
- case 'library':
- // Check if we should return to artist detail view instead of list
- if (artistDetailPageState.currentArtistId && artistDetailPageState.currentArtistName) {
- navigateToPage('artist-detail');
- if (!artistDetailPageState.isInitialized) {
- initializeArtistDetailPage();
- loadArtistDetailData(artistDetailPageState.currentArtistId, artistDetailPageState.currentArtistName);
- }
- // Already initialized — DOM content persists, no reload needed
- } else {
- if (!libraryPageState.isInitialized) {
- initializeLibraryPage();
- }
- // Already initialized — DOM content persists, no reload needed
- }
- break;
- case 'artist-detail':
- // Artist detail page is handled separately by navigateToArtistDetail()
- break;
- case 'discover':
- if (!discoverPageInitialized) {
- await loadDiscoverPage();
- discoverPageInitialized = true;
- }
- // Already initialized — DOM content persists, no reload needed
- break;
- case 'playlist-explorer':
- initExplorer();
- break;
- case 'settings':
- initializeSettings();
- switchSettingsTab('connections');
- await loadSettingsData();
- await loadQualityProfile();
- loadApiKeys();
- loadBlacklistCount();
- break;
- case 'stats':
- initializeStatsPage();
- break;
- case 'import':
- initializeImportPage();
- break;
- case 'hydrabase':
- // Check connection status and pre-fill saved credentials
- try {
- const hsResp = await fetch('/api/hydrabase/status');
- const hsData = await hsResp.json();
- _hydrabaseConnected = hsData.connected;
- document.getElementById('hydra-connection-status').textContent = hsData.connected ? 'Connected' : 'Disconnected';
- document.getElementById('hydra-connection-status').style.color = hsData.connected ? 'rgb(var(--accent-light-rgb))' : '#888';
- document.getElementById('hydra-connect-btn').textContent = hsData.connected ? 'Disconnect' : 'Connect';
- // Pre-fill saved credentials
- if (hsData.saved_url) {
- document.getElementById('hydra-ws-url').value = hsData.saved_url;
- }
- if (hsData.saved_api_key) {
- document.getElementById('hydra-api-key').value = hsData.saved_api_key;
- }
- // Update peer count
- if (hsData.peer_count !== null && hsData.peer_count !== undefined) {
- document.getElementById('hydra-peer-count').textContent = `Peers: ${hsData.peer_count}`;
- }
- } catch (e) { }
- // Load comparisons
- loadHydrabaseComparisons();
- break;
- case 'tools':
- await initializeToolsPage();
- break;
- case 'watchlist':
- await initializeWatchlistPage();
- break;
- case 'wishlist':
- await initializeWishlistPage();
- break;
- case 'automations':
- await loadAutomations();
- break;
- case 'issues':
- await loadIssuesPage();
- break;
- case 'help':
- initializeDocsPage();
- break;
- }
- } catch (error) {
- console.error(`Error loading ${pageId} data:`, error);
- showToast(`Failed to load ${pageId} data`, 'error');
- }
-}
-
-// ===============================
-// SERVICE STATUS MONITORING
-// ===============================
-
-// Legacy function - now handled by fetchAndUpdateServiceStatus
-// Keeping this for compatibility but it's no longer actively used
-
-// Old updateStatusIndicator function removed - replaced by updateSidebarServiceStatus
-
-// ===============================
-// MEDIA PLAYER FUNCTIONALITY
-// ===============================
-
-function initializeMediaPlayer() {
- const trackTitle = document.getElementById('track-title');
- const playButton = document.getElementById('play-button');
- const stopButton = document.getElementById('stop-button');
- const volumeSlider = document.getElementById('volume-slider');
-
- // Start in idle state (no track playing)
- const player = document.getElementById('media-player');
- if (player && !currentTrack) player.classList.add('idle');
-
- // Initialize HTML5 audio player
- audioPlayer = document.getElementById('audio-player');
- if (audioPlayer) {
- // Set up audio event listeners
- audioPlayer.addEventListener('timeupdate', updateAudioProgress);
- audioPlayer.addEventListener('ended', onAudioEnded);
- audioPlayer.addEventListener('error', onAudioError);
- audioPlayer.addEventListener('loadstart', onAudioLoadStart);
- audioPlayer.addEventListener('canplay', onAudioCanPlay);
-
- // Set initial volume
- audioPlayer.volume = 0.7; // 70%
- if (volumeSlider) volumeSlider.value = 70;
- }
-
- // Track title click handled by initExpandedPlayer's media-player click handler
-
- // Media controls
- playButton.addEventListener('click', handlePlayPause);
- stopButton.addEventListener('click', handleStop);
- if (volumeSlider) volumeSlider.addEventListener('input', handleVolumeChange);
-
- // Progress bar controls
- const progressBar = document.getElementById('progress-bar');
- if (progressBar) {
- // Handle seeking
- progressBar.addEventListener('input', handleProgressBarChange);
- progressBar.addEventListener('mousedown', () => {
- progressBar.dataset.seeking = 'true';
- });
- progressBar.addEventListener('mouseup', () => {
- delete progressBar.dataset.seeking;
- });
- }
-
- // Update volume slider styling
- if (volumeSlider) volumeSlider.addEventListener('input', updateVolumeSliderAppearance);
-
- // Mini player prev / next buttons
- const miniPrevBtn = document.getElementById('mini-prev-btn');
- const miniNextBtn = document.getElementById('mini-next-btn');
- if (miniPrevBtn) miniPrevBtn.addEventListener('click', (e) => { e.stopPropagation(); playPreviousInQueue(); });
- if (miniNextBtn) miniNextBtn.addEventListener('click', (e) => { e.stopPropagation(); playNextInQueue(); });
-}
-
-function toggleMediaPlayerExpansion() {
- // No-op: controls are always visible in the new layout.
- // Kept for backward compatibility with any callers.
-}
-
-function extractTrackTitle(filename) {
- if (!filename) return null;
-
- // Remove file extension
- let title = filename.replace(/\.[^/.]+$/, '');
-
- // Remove path components, keep only the filename
- title = title.split('/').pop().split('\\').pop();
-
- // Clean up common filename patterns
- title = title
- .replace(/^\d+\.?\s*/, '') // Remove track numbers at start
- .replace(/^\d+\s*-\s*/, '') // Remove "01 - " patterns
- .replace(/\s*-\s*\d{4}\s*$/, '') // Remove years at end
- .replace(/\s*\[\d+kbps\].*$/, '') // Remove bitrate info
- .replace(/\s*\(.*?\)\s*$/, '') // Remove parenthetical info at end
- .trim();
-
- return title || null;
-}
-
-function setTrackInfo(track) {
- currentTrack = track;
-
- const trackTitleElement = document.getElementById('track-title');
- const trackTitle = track.title || 'Unknown Track';
-
- // Set up the HTML structure for scrolling
- trackTitleElement.innerHTML = `${escapeHtml(trackTitle)}`;
-
- document.getElementById('artist-name').textContent = track.artist || 'Unknown Artist';
- document.getElementById('album-name').textContent = track.album || 'Unknown Album';
-
- // Check if title needs scrolling (similar to GUI app)
- setTimeout(() => {
- checkAndEnableScrolling(trackTitleElement, trackTitle);
- }, 100); // Allow DOM to settle
-
- // Enable controls
- document.getElementById('play-button').disabled = false;
- document.getElementById('stop-button').disabled = false;
-
- // Hide no track message and expand player
- document.getElementById('no-track-message').classList.add('hidden');
- document.getElementById('media-player').classList.remove('idle');
-
- // Sync expanded player and media session
- updateNpTrackInfo();
- updateMediaSessionMetadata();
- updateMediaSessionPlaybackState();
-}
-
-function checkAndEnableScrolling(element, text) {
- // Remove any existing scrolling class and reset styles
- element.classList.remove('scrolling');
- element.style.removeProperty('--scroll-distance');
-
- // Force a layout to get accurate measurements
- element.offsetWidth;
-
- // Get the inner text element
- const titleTextElement = element.querySelector('.title-text');
- if (!titleTextElement) return;
-
- // Check if text is wider than container
- const containerWidth = element.offsetWidth;
- const textWidth = titleTextElement.scrollWidth;
-
- // Enable scrolling if text is significantly wider than container
- if (textWidth > containerWidth + 15) {
- const scrollDistance = containerWidth - textWidth;
- element.style.setProperty('--scroll-distance', `${scrollDistance}px`);
- element.classList.add('scrolling');
- console.log(`📜 Enabled scrolling for title: "${text}"`);
- console.log(`📜 Container: ${containerWidth}px, Text: ${textWidth}px, Scroll: ${scrollDistance}px`);
- }
-}
-
-
-function clearTrack() {
- // Clear track state
- currentTrack = null;
- isPlaying = false;
-
- const trackTitleElement = document.getElementById('track-title');
- trackTitleElement.innerHTML = 'No track';
- trackTitleElement.classList.remove('scrolling'); // Remove scrolling animation
- trackTitleElement.style.removeProperty('--scroll-distance'); // Clear CSS variable
-
- document.getElementById('artist-name').textContent = 'Unknown Artist';
- document.getElementById('album-name').textContent = 'Unknown Album';
- // Reset play button SVGs (don't use textContent — it destroys SVG children)
- const clearPlayBtn = document.getElementById('play-button');
- const clearPlayIcon = clearPlayBtn.querySelector('.play-icon');
- const clearPauseIcon = clearPlayBtn.querySelector('.pause-icon');
- if (clearPlayIcon) clearPlayIcon.style.display = '';
- if (clearPauseIcon) clearPauseIcon.style.display = 'none';
- clearPlayBtn.disabled = true;
- document.getElementById('stop-button').disabled = true;
-
- // Reset progress bar and time displays
- const progressBar = document.getElementById('progress-bar');
- const progressFill = document.getElementById('progress-fill');
- if (progressBar) {
- progressBar.value = 0;
- delete progressBar.dataset.seeking;
- }
- if (progressFill) {
- progressFill.style.width = '0%';
- }
-
- const currentTimeElement = document.getElementById('current-time');
- const totalTimeElement = document.getElementById('total-time');
- if (currentTimeElement) currentTimeElement.textContent = '0:00';
- if (totalTimeElement) totalTimeElement.textContent = '0:00';
-
- // Hide loading animation
- hideLoadingAnimation();
-
- // Show no track message and collapse player
- document.getElementById('no-track-message').classList.remove('hidden');
- document.getElementById('media-player').classList.add('idle');
-
- // Reset queue state
- npQueue = [];
- npQueueIndex = -1;
-
- // Sync expanded player and media session
- updateNpTrackInfo();
- updateNpPlayButton();
- updateNpProgress();
- renderNpQueue();
- updateNpPrevNextButtons();
- updateMediaSessionPlaybackState();
- stopSidebarVisualizer();
- if (npModalOpen) closeNowPlayingModal();
-
- console.log('🧹 Track cleared and media player reset');
-}
-
-function setPlayingState(playing) {
- isPlaying = playing;
- const playButton = document.getElementById('play-button');
- // Toggle SVG icons (don't use textContent — it destroys SVG children)
- const playIcon = playButton.querySelector('.play-icon');
- const pauseIcon = playButton.querySelector('.pause-icon');
- if (playIcon) playIcon.style.display = playing ? 'none' : '';
- if (pauseIcon) pauseIcon.style.display = playing ? '' : 'none';
- updateNpPlayButton();
- updateMediaSessionPlaybackState();
-
- // Sidebar audio visualizer
- if (playing) {
- npInitVisualizer();
- startSidebarVisualizer();
- } else {
- stopSidebarVisualizer();
- }
-}
-
-async function handlePlayPause() {
- // Use new streaming system toggle function
- togglePlayback();
-}
-
-async function handleStop() {
- // Use new streaming system stop function
- await stopStream();
- clearTrack();
-}
-
-function handleVolumeChange(event) {
- const volume = event.target.value;
- updateVolumeSliderAppearance();
-
- // Update HTML5 audio player volume
- if (audioPlayer) {
- audioPlayer.volume = volume / 100;
- }
-
- // Sync modal volume and clear mute state
- npMuted = false;
- const npVol = document.getElementById('np-volume-slider');
- const npFill = document.getElementById('np-volume-fill');
- if (npVol) npVol.value = volume;
- if (npFill) npFill.style.width = volume + '%';
- updateNpMuteIcon();
-}
-
-function handleProgressBarChange(event) {
- // Handle seeking in the audio track
- if (!audioPlayer || !audioPlayer.duration) return;
-
- const progress = parseFloat(event.target.value);
- const newTime = (progress / 100) * audioPlayer.duration;
-
- console.log(`🎯 Seeking to ${formatTime(newTime)} (${progress.toFixed(1)}%)`);
-
- try {
- audioPlayer.currentTime = newTime;
-
- // Update visual progress immediately
- const progressFill = document.getElementById('progress-fill');
- if (progressFill) {
- progressFill.style.width = `${progress}%`;
- }
-
- // Update time displays immediately
- const currentTimeElement = document.getElementById('current-time');
- if (currentTimeElement) {
- currentTimeElement.textContent = formatTime(newTime);
- }
-
- // Sync modal progress
- const npBar = document.getElementById('np-progress-bar');
- const npFill = document.getElementById('np-progress-fill');
- const npTime = document.getElementById('np-current-time');
- if (npBar) npBar.value = progress;
- if (npFill) npFill.style.width = progress + '%';
- if (npTime) npTime.textContent = formatTime(newTime);
- } catch (error) {
- console.warn('⚠️ Seek failed:', error.message);
- // Reset progress bar to current position
- const actualProgress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
- event.target.value = actualProgress;
- const progressFill = document.getElementById('progress-fill');
- if (progressFill) {
- progressFill.style.width = `${actualProgress}%`;
- }
- }
-}
-
-function updateVolumeSliderAppearance() {
- const slider = document.getElementById('volume-slider');
- if (!slider) return;
- const value = slider.value;
- slider.style.setProperty('--volume-percent', `${value}%`);
-}
-
-function showLoadingAnimation() {
- document.getElementById('loading-animation').classList.remove('hidden');
-}
-
-function hideLoadingAnimation() {
- document.getElementById('loading-animation').classList.add('hidden');
-}
-
-function setLoadingProgress(percentage) {
- const loadingAnimation = document.getElementById('loading-animation');
- const progressBar = loadingAnimation.querySelector('.loading-progress');
- const loadingText = loadingAnimation.querySelector('.loading-text');
-
- loadingAnimation.classList.remove('hidden');
- progressBar.style.width = `${percentage}%`;
- loadingText.textContent = `${Math.round(percentage)}%`;
-}
-
-// ===============================
-// STREAMING FUNCTIONALITY
-// ===============================
-
-let _streamLock = false;
-
-async function startStream(searchResult) {
- // Start streaming a track - handles same track toggle and new track streaming
- try {
- // Prevent multiple concurrent stream starts (rapid clicking)
- if (_streamLock) {
- console.log('⏳ Stream already starting, ignoring duplicate click');
- return;
- }
-
- console.log(`🎮 startStream() called with data:`, searchResult);
-
- // Check if this is the same track that's currently playing/loading
- const currentTrackId = currentTrack ? `${currentTrack.username}:${currentTrack.filename}` : null;
- const newTrackId = `${searchResult.username}:${searchResult.filename}`;
-
- console.log(`🎮 startStream() called for: ${searchResult.filename}`);
- console.log(`🎮 Current track ID: ${currentTrackId}`);
- console.log(`🎮 New track ID: ${newTrackId}`);
-
- if (currentTrackId === newTrackId && audioPlayer && !audioPlayer.paused) {
- // Same track clicked while playing - toggle pause
- console.log("🔄 Toggling playback for same track");
- togglePlayback();
- return;
- }
-
- // Lock to prevent duplicate stream starts
- _streamLock = true;
-
- // Different track or no current track - start new stream
- console.log("🎵 Starting new stream");
-
- // Stop current streaming/playback if any
- await stopStream();
-
- // Set track info and show loading state
- setTrackInfo({
- title: extractTrackTitle(searchResult.filename) || searchResult.title || 'Unknown Track',
- artist: searchResult.artist || searchResult.username || 'Unknown Artist',
- album: searchResult.album || 'Unknown Album',
- username: searchResult.username,
- filename: searchResult.filename,
- image_url: searchResult.image_url || searchResult.album_cover_url || null
- });
-
- showLoadingAnimation();
- setLoadingProgress(0);
-
- // Start streaming request
- const response = await fetch(API.stream.start, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(searchResult)
- });
-
- if (!response.ok) {
- throw new Error(`HTTP ${response.status}: ${response.statusText}`);
- }
-
- const data = await response.json();
-
- if (!data.success) {
- throw new Error(data.error || 'Failed to start streaming');
- }
-
- console.log("✅ Stream started successfully");
-
- // Start status polling
- startStreamStatusPolling();
-
- } catch (error) {
- console.error('Error starting stream:', error);
- showToast(`Failed to start stream: ${error.message}`, 'error');
- hideLoadingAnimation();
- clearTrack();
- } finally {
- _streamLock = false;
- }
-}
-
-function startStreamStatusPolling() {
- // Start polling for stream status updates with retry logic
- if (streamStatusPoller) {
- clearInterval(streamStatusPoller);
- }
-
- // Reset polling state
- streamPollingRetries = 0;
- streamPollingInterval = 1000; // Reset to 1-second interval
-
- console.log('🔄 Starting enhanced stream status polling');
- updateStreamStatus(); // Initial check
- streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
-}
-
-function stopStreamStatusPolling() {
- // Stop polling for stream status updates
- if (streamStatusPoller) {
- clearInterval(streamStatusPoller);
- streamStatusPoller = null;
- streamPollingRetries = 0;
- streamPollingInterval = 1000; // Reset interval
- console.log('⏹️ Stopped stream status polling');
- }
-}
-
-// Phase 4: Track last known tool statuses to prevent repeated toasts on terminal states
-let _lastToolStatus = {};
-
-// Phase 5: Sync/Discovery/Scan WebSocket router functions
-function updateSyncProgressFromData(data) {
- const pid = data.playlist_id;
- const callback = _syncProgressCallbacks[pid];
- if (callback) callback(data);
-}
-
-function updateDiscoveryProgressFromData(data) {
- const id = data.id;
- const callback = _discoveryProgressCallbacks[id];
- if (callback) callback(data);
-}
-
-function updateWatchlistScanFromData(data) {
- if (!data.success) return;
- if (_lastWatchlistScanStatus === data.status && data.status !== 'scanning') return;
- _lastWatchlistScanStatus = data.status;
- handleWatchlistScanData(data);
-}
-
-function updateMediaScanFromData(data) {
- if (!data.success || !data.status) return;
- const status = data.status;
- const statusKey = status.is_scanning ? 'scanning' : (status.status || 'unknown');
- if (_lastMediaScanStatus === statusKey && statusKey !== 'scanning') return;
- _lastMediaScanStatus = statusKey;
-
- const phaseLabel = document.getElementById('media-scan-phase-label');
- const progressLabel = document.getElementById('media-scan-progress-label');
- const button = document.getElementById('media-scan-btn');
- const progressBar = document.getElementById('media-scan-progress-bar');
- const statusValue = document.getElementById('media-scan-status');
-
- if (status.is_scanning) {
- if (phaseLabel) phaseLabel.textContent = 'Media server scanning...';
- if (progressLabel) progressLabel.textContent = status.progress_message || 'Scan in progress';
- } else if (status.status === 'idle') {
- if (button) button.disabled = false;
- if (phaseLabel) phaseLabel.textContent = 'Scan completed successfully';
- if (progressBar) progressBar.style.width = '0%';
- if (progressLabel) progressLabel.textContent = 'Ready for next scan';
- if (statusValue) {
- statusValue.textContent = 'Idle';
- statusValue.style.color = '#b3b3b3';
- }
- showToast('✅ Media scan completed', 'success', 3000);
- }
-}
-
-let _wishlistAutoProcessingNotified = false;
-function updateWishlistStatsFromData(data) {
- // Auto-processing detection: close modal and notify (once only)
- if (data.is_auto_processing) {
- if (!_wishlistAutoProcessingNotified) {
- if (currentPage === 'wishlist') navigateToPage('active-downloads');
- showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
- _wishlistAutoProcessingNotified = true;
- }
- return;
- }
- // Reset flag when auto-processing ends
- _wishlistAutoProcessingNotified = false;
- // Store latest stats for countdown timer refresh
- _lastWishlistStats = data;
-}
-
-async function updateStreamStatus() {
- if (socketConnected) return; // WebSocket handles this
- // Poll server for streaming progress and handle state changes with enhanced error recovery
- try {
- const controller = new AbortController();
- const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout
-
- const response = await fetch(API.stream.status, {
- signal: controller.signal
- });
-
- clearTimeout(timeoutId);
-
- if (!response.ok) {
- throw new Error(`HTTP ${response.status}: ${response.statusText}`);
- }
-
- const data = await response.json();
-
- // Reset retry count on successful response
- streamPollingRetries = 0;
- streamPollingInterval = 1000; // Reset to normal interval
-
- // Update current stream state
- currentStream.status = data.status;
- currentStream.progress = data.progress;
-
- switch (data.status) {
- case 'loading':
- setLoadingProgress(data.progress);
- // Update loading text with progress
- const loadingText = document.querySelector('.loading-text');
- if (loadingText && data.progress > 0) {
- loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
- }
- break;
-
- case 'queued':
- // Show queue status with better messaging
- const queueText = document.querySelector('.loading-text');
- if (queueText) {
- queueText.textContent = 'Queuing with uploader...';
- }
- setLoadingProgress(0); // Reset progress for queue state
- break;
-
- case 'ready':
- // Stream is ready - start audio playback
- console.log('🎵 Stream ready, starting audio playback');
- stopStreamStatusPolling();
- // Restore player UI if JS state was wiped (e.g. page refresh)
- if (!currentTrack && data.track_info) {
- const ti = data.track_info;
- setTrackInfo({
- title: ti.name || ti.title || 'Unknown Track',
- artist: ti.artist || 'Unknown Artist',
- album: ti.album || 'Unknown Album',
- filename: ti.filename || '',
- is_library: !!ti.is_library,
- image_url: ti.image_url || null,
- id: ti.id || null,
- artist_id: ti.artist_id || null,
- album_id: ti.album_id || null,
- });
- }
- await startAudioPlayback();
- break;
-
- case 'error':
- console.error('❌ Streaming error:', data.error_message);
- stopStreamStatusPolling();
- hideLoadingAnimation();
- showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
- clearTrack();
- break;
-
- case 'stopped':
- // Handle stopped state — do NOT clear track here; explicit stop (handleStop)
- // calls clearTrack() directly. Clearing here collapses the player mid-playback
- // when the backend transitions to 'stopped' after audio naturally ends or during
- // queue track transitions.
- console.log('🛑 Stream stopped');
- stopStreamStatusPolling();
- hideLoadingAnimation();
- break;
- }
-
- } catch (error) {
- streamPollingRetries++;
- console.warn(`Stream status polling error (attempt ${streamPollingRetries}):`, error.message);
-
- if (streamPollingRetries >= maxStreamPollingRetries) {
- // Too many consecutive failures - give up
- console.error('❌ Stream status polling failed after maximum retries');
- stopStreamStatusPolling();
- hideLoadingAnimation();
- showToast('Lost connection to streaming server', 'error');
- clearTrack();
- } else {
- // Implement exponential backoff for retries
- const backoffMultiplier = Math.min(streamPollingRetries, 5); // Max 5x backoff
- streamPollingInterval = 1000 * backoffMultiplier;
-
- // Restart polling with new interval
- if (streamStatusPoller) {
- clearInterval(streamStatusPoller);
- streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
- console.log(`🔄 Retrying stream status polling with ${streamPollingInterval}ms interval`);
- }
- }
- }
-}
-
-function updateStreamStatusFromData(data) {
- const prev = _lastToolStatus['stream'];
- _lastToolStatus['stream'] = data.status;
- // Skip repeated terminal states to avoid duplicate toasts/actions
- if (prev !== undefined && data.status === prev && data.status !== 'loading' && data.status !== 'queued') return;
-
- currentStream.status = data.status;
- currentStream.progress = data.progress;
-
- switch (data.status) {
- case 'loading':
- setLoadingProgress(data.progress);
- const loadingText = document.querySelector('.loading-text');
- if (loadingText && data.progress > 0) {
- loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
- }
- break;
- case 'queued':
- const queueText = document.querySelector('.loading-text');
- if (queueText) {
- queueText.textContent = 'Queuing with uploader...';
- }
- setLoadingProgress(0);
- break;
- case 'ready':
- console.log('🎵 Stream ready, starting audio playback');
- stopStreamStatusPolling();
- // Restore player UI if JS state was wiped (e.g. page refresh)
- if (!currentTrack && data.track_info) {
- const ti = data.track_info;
- setTrackInfo({
- title: ti.name || ti.title || 'Unknown Track',
- artist: ti.artist || 'Unknown Artist',
- album: ti.album || 'Unknown Album',
- filename: ti.filename || '',
- is_library: !!ti.is_library,
- image_url: ti.image_url || null,
- id: ti.id || null,
- artist_id: ti.artist_id || null,
- album_id: ti.album_id || null,
- });
- }
- startAudioPlayback();
- break;
- case 'error':
- console.error('❌ Streaming error:', data.error_message);
- stopStreamStatusPolling();
- hideLoadingAnimation();
- showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
- clearTrack();
- break;
- case 'stopped':
- // Do NOT clear track here — explicit stop (handleStop) calls clearTrack() directly.
- // Clearing here collapses the player after audio naturally ends or during queue transitions.
- console.log('🛑 Stream stopped');
- stopStreamStatusPolling();
- hideLoadingAnimation();
- break;
- }
-}
-
-async function startAudioPlayback() {
- // Start HTML5 audio playback of the streamed file with enhanced state management
- try {
- if (!audioPlayer) {
- throw new Error('Audio player not initialized');
- }
-
- // Show loading state while preparing audio
- const loadingText = document.querySelector('.loading-text');
- if (loadingText) {
- loadingText.textContent = 'Preparing playback...';
- }
-
- // Set audio source with cache-busting timestamp
- const audioUrl = `/stream/audio?t=${new Date().getTime()}`;
- console.log(`🎵 Loading audio from: ${audioUrl}`);
-
- // Clear any existing source first
- audioPlayer.pause();
- audioPlayer.currentTime = 0;
- audioPlayer.src = '';
-
- // Set new source
- audioPlayer.src = audioUrl;
- audioPlayer.load(); // Force reload
-
- // Wait for audio to be ready with promise-based approach
- await new Promise((resolve, reject) => {
- const timeout = setTimeout(() => {
- reject(new Error('Audio loading timeout'));
- }, 15000); // 15-second timeout
-
- const onCanPlay = () => {
- clearTimeout(timeout);
- audioPlayer.removeEventListener('canplay', onCanPlay);
- audioPlayer.removeEventListener('error', onError);
- resolve();
- };
-
- const onError = (event) => {
- clearTimeout(timeout);
- audioPlayer.removeEventListener('canplay', onCanPlay);
- audioPlayer.removeEventListener('error', onError);
- const error = event.target.error || new Error('Audio loading failed');
- reject(error);
- };
-
- audioPlayer.addEventListener('canplay', onCanPlay);
- audioPlayer.addEventListener('error', onError);
-
- // If already ready, resolve immediately
- if (audioPlayer.readyState >= 3) { // HAVE_FUTURE_DATA
- onCanPlay();
- }
- });
-
- console.log('✅ Audio loaded and ready for playback');
-
- // Try to start playback with retry logic
- let retryCount = 0;
- const maxRetries = 3;
-
- while (retryCount < maxRetries) {
- try {
- await audioPlayer.play();
- console.log('✅ Audio playback started successfully');
-
- // Update UI to playing state
- hideLoadingAnimation();
- setPlayingState(true);
-
- // Show media player if hidden
- const noTrackMessage = document.getElementById('no-track-message');
- if (noTrackMessage) {
- noTrackMessage.classList.add('hidden');
- }
-
- // Update volume to current slider value
- const volumeSlider = document.getElementById('volume-slider');
- if (volumeSlider) {
- audioPlayer.volume = volumeSlider.value / 100;
- }
-
- // Enable play/stop buttons
- const playButton = document.getElementById('play-button');
- const stopButton = document.getElementById('stop-button');
- if (playButton) playButton.disabled = false;
- if (stopButton) stopButton.disabled = false;
-
- return; // Success!
-
- } catch (playError) {
- retryCount++;
- console.warn(`⚠️ Audio play attempt ${retryCount} failed:`, playError.message);
-
- if (retryCount >= maxRetries) {
- throw playError; // Re-throw after max retries
- }
-
- // Wait before retry with exponential backoff
- await new Promise(resolve => setTimeout(resolve, 1000 * retryCount));
- }
- }
-
- } catch (error) {
- console.error('❌ Error starting audio playback:', error);
- hideLoadingAnimation();
-
- // Provide user-friendly error messages
- let userMessage = 'Playback failed';
-
- if (error.message.includes('no supported source') ||
- error.message.includes('Not supported') ||
- error.message.includes('MEDIA_ELEMENT_ERROR')) {
- userMessage = 'Audio format not supported by your browser. Try downloading instead.';
- } else if (error.message.includes('network') || error.message.includes('fetch')) {
- userMessage = 'Network error - please check your connection';
- } else if (error.message.includes('decode')) {
- userMessage = 'Audio file is corrupted or incompatible';
- } else if (error.message.includes('timeout')) {
- userMessage = 'Audio loading timeout - file may be too large';
- } else if (error.message.includes('AbortError')) {
- userMessage = 'Playback was interrupted';
- }
-
- showToast(userMessage, 'error');
- // Only clear track if not in queue playback mode — queue handles its own error recovery
- if (npQueue.length === 0) {
- clearTrack();
- }
- }
-}
-
-async function stopStream() {
- // Stop streaming and clean up all state
- try {
- // Stop status polling
- stopStreamStatusPolling();
-
- // Stop audio playback
- if (audioPlayer) {
- audioPlayer.pause();
- audioPlayer.src = '';
- }
-
- // Call backend stop endpoint
- const response = await fetch(API.stream.stop, { method: 'POST' });
- if (response.ok) {
- const data = await response.json();
- console.log('🛑 Stream stopped:', data.message);
- }
-
- // Reset UI state
- hideLoadingAnimation();
- setPlayingState(false);
-
- // Reset stream state
- currentStream = {
- status: 'stopped',
- progress: 0,
- track: null
- };
-
- } catch (error) {
- console.error('Error stopping stream:', error);
- }
-}
-
-function togglePlayback() {
- // Toggle play/pause for currently loaded audio
- if (!audioPlayer || !currentTrack) {
- console.log('⚠️ No audio player or track to toggle');
- return;
- }
-
- if (audioPlayer.paused) {
- audioPlayer.play()
- .then(() => {
- setPlayingState(true);
- console.log('▶️ Resumed playback');
- })
- .catch(error => {
- console.error('Error resuming playback:', error);
- showToast('Failed to resume playback', 'error');
- });
- } else {
- audioPlayer.pause();
- setPlayingState(false);
- console.log('⏸️ Paused playback');
- }
-}
-
-// ===============================
-// AUDIO EVENT HANDLERS
-// ===============================
-
-function updateAudioProgress() {
- // Update progress bar based on audio playback time
- if (!audioPlayer || !audioPlayer.duration) return;
-
- const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
-
- // Update progress bar
- const progressBar = document.getElementById('progress-bar');
- const progressFill = document.getElementById('progress-fill');
- if (progressBar && !progressBar.dataset.seeking) {
- progressBar.value = progress;
- // Update visual progress fill
- if (progressFill) {
- progressFill.style.width = `${progress}%`;
- }
- }
-
- // Update time display
- const currentTimeElement = document.getElementById('current-time');
- const totalTimeElement = document.getElementById('total-time');
-
- if (currentTimeElement) {
- currentTimeElement.textContent = formatTime(audioPlayer.currentTime);
- }
- if (totalTimeElement) {
- totalTimeElement.textContent = formatTime(audioPlayer.duration);
- }
-
- // Sync expanded player modal
- if (npModalOpen) updateNpProgress();
-}
-
-function onAudioEnded() {
- // Handle audio playback completion
- console.log('🏁 Audio playback ended');
- setPlayingState(false);
-
- // Reset progress to beginning
- const progressBar = document.getElementById('progress-bar');
- const progressFill = document.getElementById('progress-fill');
- if (progressBar) {
- progressBar.value = 0;
- }
- if (progressFill) {
- progressFill.style.width = '0%';
- }
-
- const currentTimeElement = document.getElementById('current-time');
- if (currentTimeElement) {
- currentTimeElement.textContent = '0:00';
- }
-
- // Repeat-one is handled by audioPlayer.loop (set in handleNpRepeat)
- // Auto-advance to next track if queue has a next item (guard against race conditions)
- if (npQueue.length > 0 && !npLoadingQueueItem) {
- const hasNext = npShuffleOn
- ? npQueue.length > 1
- : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all');
- if (hasNext) { playNextInQueue(); return; }
- }
-
- // Radio mode: auto-fetch similar tracks when queue is exhausted
- if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
- npFetchRadioTracks();
- }
-}
-
-function onAudioError(event) {
- // Handle audio playback errors
- const error = event.target.error;
- console.error('❌ Audio error:', error);
-
- // Don't show error toast if it's just a format/codec issue and retrying
- if (error && error.code) {
- console.error(`Audio error code: ${error.code}, message: ${error.message || 'Unknown error'}`);
-
- // Only show user-facing errors for serious issues
- if (error.code === 4) { // MEDIA_ELEMENT_ERROR: Media not supported
- console.warn('⚠️ Media format not supported by browser, but streaming may still work');
- // Don't clear track or show error - let retry logic handle it
- return;
- }
- }
-
- hideLoadingAnimation();
-
- // Only clear track after a short delay to allow for recovery
- setTimeout(() => {
- if (audioPlayer && audioPlayer.error) {
- let userMessage = 'Audio format not supported by your browser. Try downloading instead.';
-
- if (error && error.code) {
- switch (error.code) {
- case 1: // MEDIA_ERR_ABORTED
- userMessage = 'Playback was stopped';
- break;
- case 2: // MEDIA_ERR_NETWORK
- userMessage = 'Network error - please try again';
- break;
- case 3: // MEDIA_ERR_DECODE
- userMessage = 'Audio file is corrupted or incompatible';
- break;
- case 4: // MEDIA_ERR_SRC_NOT_SUPPORTED
- userMessage = 'Audio format not supported by your browser. Try downloading instead.';
- break;
- }
- }
-
- showToast(userMessage, 'error');
- // Only clear track if not in queue playback — queue handles its own recovery
- if (npQueue.length === 0) {
- clearTrack();
- }
- }
- }, 2000);
-}
-
-function onAudioLoadStart() {
- // Handle audio load start
- console.log('🔄 Audio loading started');
-}
-
-function onAudioCanPlay() {
- // Handle when audio can start playing
- console.log('✅ Audio ready to play');
-}
-
-function formatTime(seconds) {
- // Format seconds as MM:SS
- if (!seconds || !isFinite(seconds)) return '0:00';
-
- const minutes = Math.floor(seconds / 60);
- const secs = Math.floor(seconds % 60);
- return `${minutes}:${secs.toString().padStart(2, '0')}`;
-}
-
-function formatCountdownTime(seconds) {
- // Format seconds as countdown timer (e.g., "24m 13s", "2h 15m", "23h 59m")
- if (seconds === null || seconds === undefined || seconds < 0) return '';
- if (seconds === 0) return '0s'; // Show "0s" instead of hiding timer
-
- const hours = Math.floor(seconds / 3600);
- const minutes = Math.floor((seconds % 3600) / 60);
- const secs = Math.floor(seconds % 60);
-
- if (hours > 0) {
- return `${hours}h ${minutes}m`;
- } else if (minutes > 0) {
- return `${minutes}m ${secs}s`;
- } else {
- return `${secs}s`;
- }
-}
-
-// ===============================
-// AUDIO FORMAT SUPPORT DETECTION
-// ===============================
-
-function getFileExtension(filename) {
- if (!filename) return '';
- const ext = filename.toLowerCase().match(/\.([^.]+)$/);
- return ext ? ext[1] : '';
-}
-
-function isAudioFormatSupported(filename) {
- const ext = getFileExtension(filename);
- const supportedFormats = ['mp3', 'ogg', 'wav']; // Most reliable formats
- const partialSupport = ['flac', 'aac', 'm4a', 'opus', 'webm']; // Test browser support
- const unsupported = ['wma', 'ape', 'aiff']; // Generally problematic
-
- if (supportedFormats.includes(ext)) {
- return true;
- }
-
- if (partialSupport.includes(ext)) {
- // Test if browser can actually play this format
- return canPlayAudioFormat(ext);
- }
-
- return false; // Unsupported formats
-}
-
-function canPlayAudioFormat(extension) {
- const audio = document.createElement('audio');
-
- const mimeTypes = {
- 'mp3': 'audio/mpeg',
- 'ogg': 'audio/ogg; codecs="vorbis"',
- 'wav': 'audio/wav',
- 'flac': 'audio/flac',
- 'aac': 'audio/aac',
- 'm4a': 'audio/mp4; codecs="mp4a.40.2"', // More specific M4A MIME type
- 'opus': 'audio/ogg; codecs="opus"',
- 'webm': 'audio/webm; codecs="opus"',
- 'wma': 'audio/x-ms-wma'
- };
-
- const mimeType = mimeTypes[extension];
- if (!mimeType) {
- console.warn(`🎵 [FORMAT CHECK] No MIME type found for extension: ${extension}`);
- return false;
- }
-
- const canPlay = audio.canPlayType(mimeType);
- console.log(`🎵 [FORMAT CHECK] ${extension} (${mimeType}): ${canPlay}`);
-
- let isSupported = canPlay === 'probably' || canPlay === 'maybe';
-
- // Special handling for M4A - try fallback MIME types if first one fails
- if (!isSupported && extension === 'm4a') {
- const fallbackMimeTypes = ['audio/mp4', 'audio/x-m4a', 'audio/aac'];
- console.log(`🎵 [FORMAT CHECK] M4A failed with primary MIME type, trying fallbacks...`);
-
- for (const fallbackMime of fallbackMimeTypes) {
- const fallbackResult = audio.canPlayType(fallbackMime);
- console.log(`🎵 [FORMAT CHECK] M4A fallback (${fallbackMime}): ${fallbackResult}`);
- if (fallbackResult === 'probably' || fallbackResult === 'maybe') {
- isSupported = true;
- console.log(`🎵 [FORMAT CHECK] M4A supported with fallback MIME type: ${fallbackMime}`);
- break;
- }
- }
- }
-
- console.log(`🎵 [FORMAT CHECK] ${extension} final support result: ${isSupported}`);
- return isSupported;
-}
-
-// ===============================
-// EXPANDED NOW PLAYING MODAL
-// ===============================
-
-let npModalOpen = false;
-let npRepeatMode = 'off'; // 'off' | 'all' | 'one'
-let npShuffleOn = false;
-let npQueue = [];
-let npQueueIndex = -1;
-let npMuted = false;
-let npPreMuteVolume = 70;
-let npMediaSessionThrottle = 0;
-let npLoadingQueueItem = false;
-let npRadioMode = false;
-let npRecentlyPlayedIds = [];
-let npAudioContext = null;
-let npAnalyser = null;
-let npMediaSource = null;
-let npVizAnimFrame = null;
-let npVizInitialized = false;
-
-function initExpandedPlayer() {
- const closeBtn = document.getElementById('np-close-btn');
- const overlay = document.getElementById('np-modal-overlay');
- const playBtn = document.getElementById('np-play-btn');
- const stopBtn = document.getElementById('np-stop-btn');
- const shuffleBtn = document.getElementById('np-shuffle-btn');
- const repeatBtn = document.getElementById('np-repeat-btn');
- const muteBtn = document.getElementById('np-mute-btn');
- const npProgressBar = document.getElementById('np-progress-bar');
- const npVolumeSlider = document.getElementById('np-volume-slider');
-
- if (!overlay) return;
-
- // Close handlers
- closeBtn.addEventListener('click', closeNowPlayingModal);
- overlay.addEventListener('click', (e) => { if (e.target === overlay) closeNowPlayingModal(); });
-
- // Control handlers
- playBtn.addEventListener('click', () => { togglePlayback(); });
- stopBtn.addEventListener('click', async () => { await handleStop(); closeNowPlayingModal(); });
- shuffleBtn.addEventListener('click', handleNpShuffle);
- repeatBtn.addEventListener('click', handleNpRepeat);
- muteBtn.addEventListener('click', handleNpMuteToggle);
-
- // Progress bar (mouse)
- npProgressBar.addEventListener('input', handleNpProgressBarChange);
- npProgressBar.addEventListener('mousedown', () => { npProgressBar.dataset.seeking = 'true'; });
- npProgressBar.addEventListener('mouseup', () => { delete npProgressBar.dataset.seeking; });
-
- // Progress bar (touch)
- npProgressBar.addEventListener('touchstart', () => { npProgressBar.dataset.seeking = 'true'; }, { passive: true });
- npProgressBar.addEventListener('touchmove', (e) => {
- const touch = e.touches[0];
- const rect = npProgressBar.getBoundingClientRect();
- const pct = Math.max(0, Math.min(100, ((touch.clientX - rect.left) / rect.width) * 100));
- npProgressBar.value = pct;
- npProgressBar.dispatchEvent(new Event('input'));
- }, { passive: true });
- npProgressBar.addEventListener('touchend', () => { delete npProgressBar.dataset.seeking; }, { passive: true });
-
- // Volume slider
- npVolumeSlider.addEventListener('input', handleNpVolumeChange);
-
- // Keyboard shortcuts (global)
- document.addEventListener('keydown', handlePlayerKeyboardShortcuts);
-
- // Make sidebar media player clickable to open modal
- const mediaPlayer = document.getElementById('media-player');
- if (mediaPlayer) {
- mediaPlayer.style.cursor = 'pointer';
- mediaPlayer.addEventListener('click', (e) => {
- // Don't open modal when clicking controls (let expand-hint through)
- if (e.target.closest('.play-button, .stop-button, .volume-slider, .volume-control, .progress-bar, .volume-icon, .mini-nav-btn') && !e.target.closest('.expand-hint')) return;
- if (currentTrack) openNowPlayingModal();
- });
- }
-
- // Prev / Next buttons
- const prevBtn = document.getElementById('np-prev-btn');
- const nextBtn = document.getElementById('np-next-btn');
- if (prevBtn) prevBtn.addEventListener('click', () => { playPreviousInQueue(); });
- if (nextBtn) nextBtn.addEventListener('click', () => { playNextInQueue(); });
-
- // Queue panel toggle + clear
- const queueToggle = document.getElementById('np-queue-toggle');
- if (queueToggle) {
- queueToggle.addEventListener('click', () => {
- const body = document.getElementById('np-queue-body');
- if (body) body.classList.toggle('hidden');
- queueToggle.classList.toggle('active');
- });
- }
- const queueClearBtn = document.getElementById('np-queue-clear');
- if (queueClearBtn) queueClearBtn.addEventListener('click', () => { clearQueue(); });
-
- // Radio mode button
- const radioBtn = document.getElementById('np-radio-btn');
- if (radioBtn) {
- radioBtn.addEventListener('click', () => {
- npRadioMode = !npRadioMode;
- radioBtn.classList.toggle('active', npRadioMode);
- showToast(npRadioMode ? 'Radio mode on — similar tracks will auto-queue' : 'Radio mode off', 'success');
- // Immediately fetch radio tracks if turned on while playing with empty/exhausted queue
- if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
- const hasNext = npQueue.length > 0 && (npShuffleOn
- ? npQueue.length > 1
- : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
- if (!hasNext) {
- // Add current track to queue first so it appears as "now playing" in context
- if (npQueue.length === 0 && currentTrack.is_library) {
- npQueue.push({
- title: currentTrack.title,
- artist: currentTrack.artist,
- album: currentTrack.album,
- file_path: currentTrack.filename || currentTrack.file_path,
- filename: currentTrack.filename || currentTrack.file_path,
- is_library: true,
- image_url: currentTrack.image_url,
- id: currentTrack.id,
- artist_id: currentTrack.artist_id,
- album_id: currentTrack.album_id,
- bitrate: currentTrack.bitrate
- });
- npQueueIndex = 0;
- renderNpQueue();
- updateNpPrevNextButtons();
- }
- npFetchRadioTracks();
- }
- }
- });
- }
-
- // Action button (Go to Artist)
- const gotoArtistBtn = document.getElementById('np-goto-artist');
- if (gotoArtistBtn) {
- gotoArtistBtn.addEventListener('click', () => {
- if (currentTrack && currentTrack.artist_id) {
- closeNowPlayingModal();
- navigateToArtistDetail(currentTrack.artist_id, currentTrack.artist || '');
- }
- });
- }
- // Buffering state listeners on audioPlayer
- if (audioPlayer) {
- audioPlayer.addEventListener('waiting', () => {
- const ring = document.getElementById('np-buffering-ring');
- if (ring) ring.classList.remove('hidden');
- });
- audioPlayer.addEventListener('canplay', () => {
- const ring = document.getElementById('np-buffering-ring');
- if (ring) ring.classList.add('hidden');
- });
- audioPlayer.addEventListener('playing', () => {
- const ring = document.getElementById('np-buffering-ring');
- if (ring) ring.classList.add('hidden');
- });
- }
-
- // Init Media Session API
- initMediaSession();
-}
-
-function openNowPlayingModal() {
- const overlay = document.getElementById('np-modal-overlay');
- if (!overlay) return;
- npModalOpen = true;
- overlay.classList.remove('hidden');
- document.body.style.overflow = 'hidden';
- syncExpandedPlayerUI();
- // Start visualizer if already playing
- if (isPlaying) { npInitVisualizer(); npStartVisualizerLoop(); }
-}
-
-function closeNowPlayingModal() {
- const overlay = document.getElementById('np-modal-overlay');
- if (!overlay) return;
- npModalOpen = false;
- overlay.classList.add('hidden');
- document.body.style.overflow = '';
- npStopVisualizerLoop();
-}
-
-function syncExpandedPlayerUI() {
- if (!npModalOpen) return;
-
- // Track info
- updateNpTrackInfo();
-
- // Play state
- updateNpPlayButton();
-
- // Progress
- updateNpProgress();
-
- // Volume
- const sidebarVol = document.getElementById('volume-slider');
- const npVol = document.getElementById('np-volume-slider');
- const npVolFill = document.getElementById('np-volume-fill');
- if (sidebarVol && npVol) {
- npVol.value = sidebarVol.value;
- if (npVolFill) npVolFill.style.width = sidebarVol.value + '%';
- }
-
- // Visualizer
- const viz = document.getElementById('np-visualizer');
- if (viz) viz.classList.toggle('playing', isPlaying);
-
- // Queue
- renderNpQueue();
- updateNpPrevNextButtons();
-}
-
-function updateNpTrackInfo() {
- const titleEl = document.getElementById('np-track-title');
- const artistEl = document.getElementById('np-artist-name');
- const albumEl = document.getElementById('np-album-name');
- const artImg = document.getElementById('np-album-art');
- const artPlaceholder = document.getElementById('np-album-art-placeholder');
- const badgesEl = document.getElementById('np-format-badges');
- const actionBtns = document.getElementById('np-action-buttons');
-
- if (!titleEl) return;
-
- // Sidebar album art
- const sidebarArt = document.getElementById('sidebar-album-art');
-
- if (currentTrack) {
- // Track text transition animation
- const textEls = [titleEl, artistEl, albumEl];
- const oldTitle = titleEl.textContent;
- const newTitle = currentTrack.title || 'Unknown Track';
- const trackChanged = oldTitle !== newTitle && oldTitle !== 'No track';
-
- titleEl.textContent = newTitle;
- artistEl.textContent = currentTrack.artist || 'Unknown Artist';
- albumEl.textContent = currentTrack.album || 'Unknown Album';
-
- if (trackChanged) {
- textEls.forEach(el => {
- el.classList.remove('np-text-transition');
- void el.offsetWidth; // force reflow
- el.classList.add('np-text-transition');
- });
- }
-
- // Album art (modal + sidebar) + ambient glow extraction
- const artUrl = getNpAlbumArtUrl();
- if (artUrl && artImg) {
- // Only set crossOrigin for external URLs — local paths break with CORS headers
- if (artUrl.startsWith('http')) {
- artImg.crossOrigin = 'anonymous';
- } else {
- artImg.removeAttribute('crossOrigin');
- }
- artImg.src = artUrl;
- artImg.classList.remove('hidden');
- artImg.onerror = () => { artImg.classList.add('hidden'); npResetAmbientGlow(); };
- artImg.onload = () => { npExtractAmbientColor(artImg); };
- } else if (artImg) {
- artImg.classList.add('hidden');
- npResetAmbientGlow();
- }
- if (sidebarArt) {
- if (artUrl) {
- sidebarArt.src = artUrl;
- sidebarArt.style.display = '';
- sidebarArt.onerror = () => { sidebarArt.src = '/static/trans2.png'; };
- } else {
- sidebarArt.src = '/static/trans2.png';
- }
- }
-
- // Format badges (richer: include bitrate/sample_rate)
- if (badgesEl) {
- badgesEl.innerHTML = '';
- const filename = currentTrack.filename || '';
- if (filename) {
- const ext = getFileExtension(filename);
- if (ext) {
- let label = ext.toUpperCase();
- if (currentTrack.sample_rate) {
- const khz = (currentTrack.sample_rate / 1000);
- label += ' ' + (khz % 1 === 0 ? khz.toFixed(0) : khz.toFixed(1)) + 'kHz';
- }
- const badge = document.createElement('span');
- badge.className = 'np-format-badge' + (ext === 'flac' ? ' flac' : '');
- badge.textContent = label;
- badgesEl.appendChild(badge);
- }
- if (currentTrack.bitrate) {
- const brBadge = document.createElement('span');
- brBadge.className = 'np-format-badge';
- brBadge.textContent = currentTrack.bitrate + 'k';
- badgesEl.appendChild(brBadge);
- }
- }
- }
-
- // Action buttons visibility
- if (actionBtns) {
- const hasArtist = currentTrack.artist_id;
- actionBtns.classList.toggle('hidden', !hasArtist);
- }
-
- // Track recently played for radio mode
- if (currentTrack.id && !npRecentlyPlayedIds.includes(currentTrack.id)) {
- npRecentlyPlayedIds.push(currentTrack.id);
- if (npRecentlyPlayedIds.length > 50) npRecentlyPlayedIds.shift();
- }
- } else {
- titleEl.textContent = 'No track';
- artistEl.textContent = 'Unknown Artist';
- albumEl.textContent = 'Unknown Album';
- if (artImg) artImg.classList.add('hidden');
- if (sidebarArt) sidebarArt.src = '/static/trans2.png';
- if (badgesEl) badgesEl.innerHTML = '';
- if (actionBtns) actionBtns.classList.add('hidden');
- npResetAmbientGlow();
- }
-}
-
-function npExtractAmbientColor(imgEl) {
- try {
- const canvas = document.createElement('canvas');
- const ctx = canvas.getContext('2d');
- canvas.width = 50;
- canvas.height = 50;
- ctx.drawImage(imgEl, 0, 0, 50, 50);
- const data = ctx.getImageData(0, 0, 50, 50).data;
- let rSum = 0, gSum = 0, bSum = 0, count = 0;
- for (let i = 0; i < data.length; i += 16) { // sample every 4th pixel
- const r = data[i], g = data[i + 1], b = data[i + 2];
- const brightness = (r + g + b) / 3;
- if (brightness > 20 && brightness < 230) {
- rSum += r; gSum += g; bSum += b; count++;
- }
- }
- if (count > 0) {
- const modal = document.querySelector('.np-modal');
- if (modal) {
- modal.style.setProperty('--np-ambient-r', Math.round(rSum / count));
- modal.style.setProperty('--np-ambient-g', Math.round(gSum / count));
- modal.style.setProperty('--np-ambient-b', Math.round(bSum / count));
- }
- }
- } catch (e) {
- // Cross-origin or canvas error — ignore silently
- }
-}
-
-function npResetAmbientGlow() {
- const modal = document.querySelector('.np-modal');
- if (modal) {
- modal.style.setProperty('--np-ambient-r', '29');
- modal.style.setProperty('--np-ambient-g', '185');
- modal.style.setProperty('--np-ambient-b', '84');
- }
-}
-
-function updateNpPlayButton() {
- const playIcon = document.querySelector('.np-icon-play');
- const pauseIcon = document.querySelector('.np-icon-pause');
- if (playIcon && pauseIcon) {
- playIcon.classList.toggle('hidden', isPlaying);
- pauseIcon.classList.toggle('hidden', !isPlaying);
- }
-
- const viz = document.getElementById('np-visualizer');
- if (viz) viz.classList.toggle('playing', isPlaying);
-
- // Drive Web Audio visualizer (only when modal is open to save CPU)
- if (isPlaying && npModalOpen) {
- npInitVisualizer();
- npStartVisualizerLoop();
- } else {
- npStopVisualizerLoop();
- }
-}
-
-function updateNpProgress() {
- if (!npModalOpen || !audioPlayer) return;
-
- const npProgressBar = document.getElementById('np-progress-bar');
- const npProgressFill = document.getElementById('np-progress-fill');
- const npCurrentTime = document.getElementById('np-current-time');
- const npTotalTime = document.getElementById('np-total-time');
-
- if (audioPlayer.duration) {
- const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
- if (npProgressBar && !npProgressBar.dataset.seeking) {
- npProgressBar.value = progress;
- }
- if (npProgressFill) npProgressFill.style.width = progress + '%';
- if (npCurrentTime) npCurrentTime.textContent = formatTime(audioPlayer.currentTime);
- if (npTotalTime) npTotalTime.textContent = formatTime(audioPlayer.duration);
- } else {
- if (npProgressBar) npProgressBar.value = 0;
- if (npProgressFill) npProgressFill.style.width = '0%';
- if (npCurrentTime) npCurrentTime.textContent = '0:00';
- if (npTotalTime) npTotalTime.textContent = '0:00';
- }
-}
-
-function handleNpProgressBarChange(event) {
- if (!audioPlayer || !audioPlayer.duration) return;
- const progress = parseFloat(event.target.value);
- const newTime = (progress / 100) * audioPlayer.duration;
-
- try {
- audioPlayer.currentTime = newTime;
-
- // Sync sidebar progress
- const sidebarBar = document.getElementById('progress-bar');
- const sidebarFill = document.getElementById('progress-fill');
- if (sidebarBar) sidebarBar.value = progress;
- if (sidebarFill) sidebarFill.style.width = progress + '%';
-
- // Sync modal progress fill
- const npFill = document.getElementById('np-progress-fill');
- if (npFill) npFill.style.width = progress + '%';
-
- // Update time displays
- const sidebarTime = document.getElementById('current-time');
- const npTime = document.getElementById('np-current-time');
- if (sidebarTime) sidebarTime.textContent = formatTime(newTime);
- if (npTime) npTime.textContent = formatTime(newTime);
- } catch (error) {
- console.warn('Seek failed:', error.message);
- }
-}
-
-function handleNpVolumeChange(event) {
- const volume = parseInt(event.target.value);
- if (audioPlayer) audioPlayer.volume = volume / 100;
-
- // Sync sidebar volume slider
- const sidebarVol = document.getElementById('volume-slider');
- if (sidebarVol) {
- sidebarVol.value = volume;
- sidebarVol.style.setProperty('--volume-percent', volume + '%');
- }
-
- // Update modal volume fill
- const npFill = document.getElementById('np-volume-fill');
- if (npFill) npFill.style.width = volume + '%';
-
- // Update mute state
- npMuted = volume === 0;
- updateNpMuteIcon();
-}
-
-function handleNpMuteToggle() {
- const npVol = document.getElementById('np-volume-slider');
- if (!npVol) return;
-
- if (npMuted) {
- // Unmute — restore previous volume
- npVol.value = npPreMuteVolume;
- npVol.dispatchEvent(new Event('input'));
- npMuted = false;
- } else {
- // Mute — save current volume, set to 0
- npPreMuteVolume = parseInt(npVol.value) || 70;
- npVol.value = 0;
- npVol.dispatchEvent(new Event('input'));
- npMuted = true;
- }
- updateNpMuteIcon();
-}
-
-function updateNpMuteIcon() {
- const muteBtn = document.getElementById('np-mute-btn');
- const volIcon = muteBtn ? muteBtn.querySelector('.np-icon-vol') : null;
- const mutedIcon = muteBtn ? muteBtn.querySelector('.np-icon-muted') : null;
- if (volIcon && mutedIcon) {
- volIcon.classList.toggle('hidden', npMuted);
- mutedIcon.classList.toggle('hidden', !npMuted);
- }
- if (muteBtn) muteBtn.classList.toggle('muted', npMuted);
-}
-
-function handleNpShuffle() {
- npShuffleOn = !npShuffleOn;
- const btn = document.getElementById('np-shuffle-btn');
- if (btn) btn.classList.toggle('active', npShuffleOn);
- updateNpPrevNextButtons();
-}
-
-function handleNpRepeat() {
- const badge = document.getElementById('np-repeat-one-badge');
- if (npRepeatMode === 'off') {
- npRepeatMode = 'all';
- if (audioPlayer) audioPlayer.loop = false;
- } else if (npRepeatMode === 'all') {
- npRepeatMode = 'one';
- if (audioPlayer) audioPlayer.loop = true;
- } else {
- npRepeatMode = 'off';
- if (audioPlayer) audioPlayer.loop = false;
- }
- const btn = document.getElementById('np-repeat-btn');
- if (btn) btn.classList.toggle('active', npRepeatMode !== 'off');
- if (badge) badge.classList.toggle('hidden', npRepeatMode !== 'one');
- updateNpPrevNextButtons();
-}
-
-// ===============================
-// QUEUE MANAGEMENT
-// ===============================
-
-function addToQueue(track) {
- npQueue.push(track);
- showToast('Added to queue', 'success');
- renderNpQueue();
- updateNpPrevNextButtons();
- // If nothing is currently playing, auto-play the first queued track
- if (!currentTrack) {
- playQueueItem(npQueue.length - 1);
- }
-}
-
-function removeFromQueue(index) {
- if (index < 0 || index >= npQueue.length) return;
- const wasCurrentTrack = (index === npQueueIndex);
- npQueue.splice(index, 1);
- // Adjust current index
- if (npQueue.length === 0) {
- npQueueIndex = -1;
- // Current track keeps playing but queue is now empty — that's OK
- } else if (index < npQueueIndex) {
- npQueueIndex--;
- } else if (wasCurrentTrack) {
- // Removed the currently playing item
- if (npQueueIndex >= npQueue.length) {
- npQueueIndex = npQueue.length - 1;
- }
- // Play the next track at the adjusted index
- playQueueItem(npQueueIndex);
- }
- renderNpQueue();
- updateNpPrevNextButtons();
-}
-
-function clearQueue() {
- npQueue = [];
- npQueueIndex = -1;
- renderNpQueue();
- updateNpPrevNextButtons();
-}
-
-function playNextInQueue() {
- if (npQueue.length === 0) return;
- if (npShuffleOn) {
- // Pick a random index that is not the current one
- const candidates = [];
- for (let i = 0; i < npQueue.length; i++) {
- if (i !== npQueueIndex) candidates.push(i);
- }
- if (candidates.length === 0) return;
- const next = candidates[Math.floor(Math.random() * candidates.length)];
- playQueueItem(next);
- } else {
- const next = npQueueIndex + 1;
- if (next >= npQueue.length) {
- // End of queue — repeat-all wraps to start
- if (npRepeatMode === 'all') {
- playQueueItem(0);
- }
- return;
- }
- playQueueItem(next);
- }
-}
-
-function playPreviousInQueue() {
- // If more than 3 seconds in, restart current track
- if (audioPlayer && audioPlayer.currentTime > 3) {
- audioPlayer.currentTime = 0;
- if (audioPlayer.paused) audioPlayer.play();
- return;
- }
- if (npQueue.length === 0) return;
- const prev = npQueueIndex - 1;
- if (prev < 0) {
- // At start — restart current track
- if (audioPlayer) {
- audioPlayer.currentTime = 0;
- if (audioPlayer.paused) audioPlayer.play();
- }
- return;
- }
- playQueueItem(prev);
-}
-
-async function playQueueItem(index) {
- if (index < 0 || index >= npQueue.length) return;
- if (npLoadingQueueItem) return; // Prevent race condition from double-advance
- npLoadingQueueItem = true;
- npQueueIndex = index;
- const track = npQueue[index];
-
- try {
- if (track.is_library) {
- // Library track playback flow
- await stopStream();
- setTrackInfo({
- title: track.title,
- artist: track.artist,
- album: track.album,
- filename: track.file_path,
- is_library: true,
- image_url: track.image_url,
- id: track.id,
- artist_id: track.artist_id,
- album_id: track.album_id,
- bitrate: track.bitrate,
- sample_rate: track.sample_rate
- });
- showLoadingAnimation();
-
- const response = await fetch('/api/library/play', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- file_path: track.file_path,
- title: track.title || '',
- artist: track.artist || '',
- album: track.album || ''
- })
- });
- const result = await response.json();
- if (!result.success) throw new Error(result.error || 'Failed to start playback');
- // Re-apply repeat-one loop property
- if (audioPlayer) audioPlayer.loop = (npRepeatMode === 'one');
- await startAudioPlayback();
- } else {
- // Non-library (stream) tracks cannot be queued for auto-advance
- // Just show track info — the stream flow handles its own playback
- setTrackInfo({
- title: track.title,
- artist: track.artist,
- album: track.album,
- filename: track.filename || track.file_path,
- is_library: false,
- image_url: track.image_url,
- id: track.id,
- artist_id: track.artist_id,
- album_id: track.album_id,
- bitrate: track.bitrate,
- sample_rate: track.sample_rate
- });
- }
- } catch (error) {
- console.error('Queue playback error:', error);
- showToast(`Skipping track: ${error.message}`, 'error');
- hideLoadingAnimation();
- // Auto-skip to next track on failure instead of stopping the queue
- npLoadingQueueItem = false;
- const nextIdx = npQueueIndex + 1;
- if (nextIdx < npQueue.length) {
- setTimeout(() => playQueueItem(nextIdx), 500);
- }
- return;
- } finally {
- npLoadingQueueItem = false;
- }
-
- renderNpQueue();
- updateNpPrevNextButtons();
-}
-
-function renderNpQueue() {
- const listEl = document.getElementById('np-queue-list');
- const emptyEl = document.getElementById('np-queue-empty');
- const countEl = document.getElementById('np-queue-count');
- if (!listEl) return;
-
- if (countEl) countEl.textContent = npQueue.length > 0 ? `(${npQueue.length})` : '';
-
- if (npQueue.length === 0) {
- listEl.innerHTML = '';
- if (emptyEl) emptyEl.classList.remove('hidden');
- return;
- }
-
- if (emptyEl) emptyEl.classList.add('hidden');
- listEl.innerHTML = '';
-
- npQueue.forEach((track, i) => {
- const item = document.createElement('div');
- item.className = 'np-queue-item' + (i === npQueueIndex ? ' active' : '');
- item.onclick = () => playQueueItem(i);
-
- const info = document.createElement('div');
- info.className = 'np-queue-item-info';
-
- const title = document.createElement('div');
- title.className = 'np-queue-item-title';
- title.textContent = track.title || 'Unknown Track';
-
- const artist = document.createElement('div');
- artist.className = 'np-queue-item-artist';
- artist.textContent = track.artist || 'Unknown Artist';
-
- info.appendChild(title);
- info.appendChild(artist);
- item.appendChild(info);
-
- const removeBtn = document.createElement('button');
- removeBtn.className = 'np-queue-item-remove';
- removeBtn.innerHTML = '✕';
- removeBtn.title = 'Remove from queue';
- removeBtn.onclick = (e) => {
- e.stopPropagation();
- removeFromQueue(i);
- };
- item.appendChild(removeBtn);
-
- listEl.appendChild(item);
- });
-}
-
-function updateNpPrevNextButtons() {
- const canPrev = npQueueIndex > 0 || (audioPlayer && audioPlayer.currentTime > 3);
- const canNext = npQueue.length > 0 && (npShuffleOn ? npQueue.length > 1 : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
-
- // Full Now Playing modal buttons
- const prevBtn = document.getElementById('np-prev-btn');
- const nextBtn = document.getElementById('np-next-btn');
- if (prevBtn) prevBtn.disabled = !canPrev;
- if (nextBtn) nextBtn.disabled = !canNext;
-
- // Mini player buttons
- const miniPrevBtn = document.getElementById('mini-prev-btn');
- const miniNextBtn = document.getElementById('mini-next-btn');
- if (miniPrevBtn) miniPrevBtn.disabled = !canPrev;
- if (miniNextBtn) miniNextBtn.disabled = !canNext;
-}
-
-function handlePlayerKeyboardShortcuts(event) {
- // Don't intercept when typing in inputs or when non-player modals are open
- const tag = document.activeElement.tagName.toLowerCase();
- if (tag === 'input' || tag === 'textarea' || tag === 'select' || document.activeElement.isContentEditable) return;
-
- // Only handle when player modal is open OR when no other modal is visible
- const otherModals = document.querySelectorAll('.modal-overlay:not(.hidden):not(#np-modal-overlay)');
- if (otherModals.length > 0 && !npModalOpen) return;
-
- switch (event.key) {
- case ' ':
- if (!currentTrack) return;
- event.preventDefault();
- togglePlayback();
- break;
- case 'ArrowLeft':
- if (!audioPlayer || !audioPlayer.duration) return;
- event.preventDefault();
- audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 5);
- break;
- case 'ArrowRight':
- if (!audioPlayer || !audioPlayer.duration) return;
- event.preventDefault();
- audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 5);
- break;
- case 'ArrowUp':
- event.preventDefault();
- if (audioPlayer) {
- const newVol = Math.min(1, audioPlayer.volume + 0.05);
- audioPlayer.volume = newVol;
- syncVolumeUI(Math.round(newVol * 100));
- }
- break;
- case 'ArrowDown':
- event.preventDefault();
- if (audioPlayer) {
- const newVol = Math.max(0, audioPlayer.volume - 0.05);
- audioPlayer.volume = newVol;
- syncVolumeUI(Math.round(newVol * 100));
- }
- break;
- case 'm':
- case 'M':
- if (npModalOpen) handleNpMuteToggle();
- break;
- case 'Escape':
- if (npModalOpen) closeNowPlayingModal();
- break;
- default:
- return; // Don't prevent default for unhandled keys
- }
-}
-
-function syncVolumeUI(volumePercent) {
- // Sync both sidebar and modal volume UIs
- const sidebarVol = document.getElementById('volume-slider');
- const npVol = document.getElementById('np-volume-slider');
- const npFill = document.getElementById('np-volume-fill');
-
- if (sidebarVol) {
- sidebarVol.value = volumePercent;
- sidebarVol.style.setProperty('--volume-percent', volumePercent + '%');
- }
- if (npVol) npVol.value = volumePercent;
- if (npFill) npFill.style.width = volumePercent + '%';
-}
-
-function getNpAlbumArtUrl() {
- if (!currentTrack) return null;
- return currentTrack.image_url || currentTrack.album_cover_url || currentTrack.thumb_url || null;
-}
-
-// ===============================
-// WEB AUDIO VISUALIZER
-// ===============================
-
-function npInitVisualizer() {
- if (npVizInitialized || !audioPlayer) return;
- try {
- if (!npAudioContext) {
- npAudioContext = new (window.AudioContext || window.webkitAudioContext)();
- }
- if (!npMediaSource) {
- npMediaSource = npAudioContext.createMediaElementSource(audioPlayer);
- npAnalyser = npAudioContext.createAnalyser();
- npAnalyser.fftSize = 64;
- npAnalyser.smoothingTimeConstant = 0.8;
- npMediaSource.connect(npAnalyser);
- npAnalyser.connect(npAudioContext.destination);
- }
- npVizInitialized = true;
- } catch (e) {
- console.warn('Web Audio visualizer init failed, using CSS fallback:', e.message);
- // Mark as CSS fallback
- const viz = document.getElementById('np-visualizer');
- if (viz) viz.classList.add('np-viz-css-fallback');
- npVizInitialized = true; // don't retry
- }
-}
-
-function npStartVisualizerLoop() {
- if (npVizAnimFrame) return; // Already running
- if (!npAnalyser) return; // No analyser — CSS fallback handles it
-
- if (npAudioContext && npAudioContext.state === 'suspended') {
- npAudioContext.resume();
- }
-
- const bars = document.querySelectorAll('.np-viz-bar');
- if (bars.length === 0) return;
- const bufferLength = npAnalyser.frequencyBinCount;
- const dataArray = new Uint8Array(bufferLength);
-
- function draw() {
- npVizAnimFrame = requestAnimationFrame(draw);
- npAnalyser.getByteFrequencyData(dataArray);
-
- // Map 7 bars to frequency bins (skip bin 0 which is DC offset)
- const binCount = Math.min(bufferLength - 1, 7);
- for (let i = 0; i < bars.length; i++) {
- const binIndex = Math.min(i + 1, bufferLength - 1);
- const value = dataArray[binIndex] / 255; // 0..1
- const scale = Math.max(0.08, value); // minimum visible height
- bars[i].style.transform = `scaleY(${scale})`;
- }
- }
- draw();
-}
-
-function npStopVisualizerLoop() {
- if (npVizAnimFrame) {
- cancelAnimationFrame(npVizAnimFrame);
- npVizAnimFrame = null;
- }
- // Reset bars to min
- const bars = document.querySelectorAll('.np-viz-bar');
- bars.forEach(bar => { bar.style.transform = 'scaleY(0.125)'; });
-}
-
-// ===============================
-// SIDEBAR AUDIO VISUALIZER
-// ===============================
-
-let sidebarVizAnimFrame = null;
-let sidebarVisualizerType = 'bars'; // bars | wave | spectrum | mirror | equalizer | none
-const SIDEBAR_VIZ_BAR_COUNT = 32;
-
-let _sidebarVizBuiltType = null;
-
-function buildSidebarVizElements(type) {
- const container = document.getElementById('sidebar-visualizer');
- if (!container) return;
- if (_sidebarVizBuiltType === type && container.children.length > 0) return;
- _sidebarVizBuiltType = type;
- container.innerHTML = '';
- container.className = 'sidebar-visualizer';
-
- if (type === 'bars') {
- container.classList.add('viz-bars');
- for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
- const bar = document.createElement('div');
- bar.className = 'sidebar-viz-bar';
- container.appendChild(bar);
- }
- } else if (type === 'wave' || type === 'spectrum') {
- container.classList.add('viz-canvas');
- const canvas = document.createElement('canvas');
- canvas.className = 'sidebar-viz-canvas';
- canvas.width = 10;
- canvas.height = 600;
- container.appendChild(canvas);
- } else if (type === 'mirror') {
- container.classList.add('viz-mirror');
- for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
- const bar = document.createElement('div');
- bar.className = 'sidebar-viz-mirror-bar';
- container.appendChild(bar);
- }
- } else if (type === 'equalizer') {
- container.classList.add('viz-equalizer');
- for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
- const wrap = document.createElement('div');
- wrap.className = 'sidebar-viz-eq-wrap';
- const bar = document.createElement('div');
- bar.className = 'sidebar-viz-eq-bar';
- const peak = document.createElement('div');
- peak.className = 'sidebar-viz-eq-peak';
- wrap.appendChild(bar);
- wrap.appendChild(peak);
- container.appendChild(wrap);
- }
- }
-}
-
-function startSidebarVisualizer() {
- const type = sidebarVisualizerType;
- if (type === 'none') return;
-
- const container = document.getElementById('sidebar-visualizer');
- if (!container) return;
-
- buildSidebarVizElements(type);
- container.classList.add('active');
-
- if (sidebarVizAnimFrame) return;
- if (!npAnalyser) return;
-
- const bufferLength = npAnalyser.frequencyBinCount;
- const dataArray = new Uint8Array(bufferLength);
- const hueStart = 200, hueRange = 160;
-
- // Helper: average frequency bins for a given segment index
- function getBinValue(i, count) {
- const binsPerSeg = Math.max(1, Math.floor((bufferLength - 1) / count));
- let sum = 0;
- const start = i * binsPerSeg + 1;
- for (let b = 0; b < binsPerSeg; b++) sum += dataArray[Math.min(start + b, bufferLength - 1)];
- return (sum / binsPerSeg) / 255;
- }
-
- // ── Bars ──
- if (type === 'bars') {
- const bars = container.querySelectorAll('.sidebar-viz-bar');
- if (bars.length === 0) return;
- function drawBars() {
- sidebarVizAnimFrame = requestAnimationFrame(drawBars);
- npAnalyser.getByteFrequencyData(dataArray);
- for (let i = 0; i < bars.length; i++) {
- const value = getBinValue(i, bars.length);
- const scale = Math.max(0.08, value);
- const hue = (hueStart + (i / bars.length) * hueRange + value * 30) % 360;
- bars[i].style.transform = `scaleX(${scale})`;
- bars[i].style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
- }
- }
- drawBars();
-
- // ── Wave ──
- } else if (type === 'wave') {
- const canvas = container.querySelector('.sidebar-viz-canvas');
- if (!canvas) return;
- const ctx = canvas.getContext('2d');
- let hueOffset = 0;
- function drawWave() {
- sidebarVizAnimFrame = requestAnimationFrame(drawWave);
- const ch = container.clientHeight;
- if (ch > 0 && canvas.height !== ch) canvas.height = ch;
- npAnalyser.getByteFrequencyData(dataArray);
- const w = canvas.width, h = canvas.height;
- if (h === 0) return;
- ctx.clearRect(0, 0, w, h);
-
- let totalEnergy = 0;
- for (let i = 1; i < bufferLength; i++) totalEnergy += dataArray[i];
- const avgEnergy = totalEnergy / (bufferLength - 1) / 255;
- hueOffset = (hueOffset + 0.5) % 360;
-
- const segments = 64;
- ctx.lineWidth = 3;
- ctx.lineCap = 'round';
- ctx.beginPath();
- for (let i = 0; i <= segments; i++) {
- const y = (i / segments) * h;
- const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
- const value = dataArray[binIdx] / 255;
- const x = (w / 2) + Math.sin((i / segments) * Math.PI * 4 + Date.now() * 0.003) * value * (w - 2) * 0.4;
- if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
- }
- const grad = ctx.createLinearGradient(0, 0, 0, h);
- grad.addColorStop(0, `hsla(${hueOffset + 200}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
- grad.addColorStop(0.5, `hsla(${hueOffset + 280}, 80%, 55%, ${0.3 + avgEnergy * 0.7})`);
- grad.addColorStop(1, `hsla(${hueOffset + 360}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
- ctx.strokeStyle = grad;
- ctx.stroke();
- ctx.lineWidth = 6;
- ctx.globalAlpha = 0.15 + avgEnergy * 0.2;
- ctx.stroke();
- ctx.globalAlpha = 1;
- }
- drawWave();
-
- // ── Spectrum (mountain/terrain fill) ──
- } else if (type === 'spectrum') {
- const canvas = container.querySelector('.sidebar-viz-canvas');
- if (!canvas) return;
- const ctx = canvas.getContext('2d');
- let hueOffset = 0;
- // Smoothed values for fluid motion
- const smoothed = new Float32Array(64);
-
- function drawSpectrum() {
- sidebarVizAnimFrame = requestAnimationFrame(drawSpectrum);
- const ch = container.clientHeight;
- if (ch > 0 && canvas.height !== ch) canvas.height = ch;
- npAnalyser.getByteFrequencyData(dataArray);
- const w = canvas.width, h = canvas.height;
- if (h === 0) return;
- ctx.clearRect(0, 0, w, h);
-
- hueOffset = (hueOffset + 0.3) % 360;
- const segments = smoothed.length;
-
- // Smooth the frequency data
- for (let i = 0; i < segments; i++) {
- const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
- const target = dataArray[binIdx] / 255;
- smoothed[i] += (target - smoothed[i]) * 0.25;
- }
-
- // Draw filled mountain shape from left edge
- ctx.beginPath();
- ctx.moveTo(0, 0);
- for (let i = 0; i <= segments; i++) {
- const y = (i / segments) * h;
- const value = i < segments ? smoothed[i] : smoothed[segments - 1];
- const x = value * w * 0.95;
- ctx.lineTo(x, y);
- }
- ctx.lineTo(0, h);
- ctx.closePath();
-
- // Gradient fill
- const fillGrad = ctx.createLinearGradient(0, 0, 0, h);
- fillGrad.addColorStop(0, `hsla(${hueOffset + 200}, 85%, 55%, 0.7)`);
- fillGrad.addColorStop(0.25, `hsla(${hueOffset + 240}, 80%, 50%, 0.6)`);
- fillGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 85%, 50%, 0.65)`);
- fillGrad.addColorStop(0.75, `hsla(${hueOffset + 330}, 80%, 50%, 0.6)`);
- fillGrad.addColorStop(1, `hsla(${hueOffset + 360}, 85%, 55%, 0.7)`);
- ctx.fillStyle = fillGrad;
- ctx.fill();
-
- // Bright edge line
- ctx.beginPath();
- ctx.moveTo(0, 0);
- for (let i = 0; i <= segments; i++) {
- const y = (i / segments) * h;
- const value = i < segments ? smoothed[i] : smoothed[segments - 1];
- ctx.lineTo(value * w * 0.95, y);
- }
- const lineGrad = ctx.createLinearGradient(0, 0, 0, h);
- lineGrad.addColorStop(0, `hsla(${hueOffset + 200}, 90%, 70%, 0.9)`);
- lineGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 90%, 65%, 0.9)`);
- lineGrad.addColorStop(1, `hsla(${hueOffset + 360}, 90%, 70%, 0.9)`);
- ctx.strokeStyle = lineGrad;
- ctx.lineWidth = 1.5;
- ctx.stroke();
-
- // Outer glow
- ctx.lineWidth = 4;
- ctx.globalAlpha = 0.2;
- ctx.stroke();
- ctx.globalAlpha = 1;
- }
- drawSpectrum();
-
- // ── Mirror (bars from center outward) ──
- } else if (type === 'mirror') {
- const bars = container.querySelectorAll('.sidebar-viz-mirror-bar');
- if (bars.length === 0) return;
- function drawMirror() {
- sidebarVizAnimFrame = requestAnimationFrame(drawMirror);
- npAnalyser.getByteFrequencyData(dataArray);
- const half = Math.floor(bars.length / 2);
- for (let i = 0; i < half; i++) {
- const value = getBinValue(i, half);
- const scale = Math.max(0.06, value);
- const hue = (hueStart + (i / half) * hueRange + value * 30) % 360;
- const color = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
- // Top half — mirror index from center
- const topIdx = half - 1 - i;
- const bottomIdx = half + i;
- bars[topIdx].style.transform = `scaleX(${scale})`;
- bars[topIdx].style.backgroundColor = color;
- if (bottomIdx < bars.length) {
- bars[bottomIdx].style.transform = `scaleX(${scale})`;
- bars[bottomIdx].style.backgroundColor = color;
- }
- }
- }
- drawMirror();
-
- // ── Equalizer (bars with falling peak indicators) ──
- } else if (type === 'equalizer') {
- const wraps = container.querySelectorAll('.sidebar-viz-eq-wrap');
- if (wraps.length === 0) return;
- const peaks = new Float32Array(wraps.length);
- const peakVelocity = new Float32Array(wraps.length);
-
- function drawEqualizer() {
- sidebarVizAnimFrame = requestAnimationFrame(drawEqualizer);
- npAnalyser.getByteFrequencyData(dataArray);
- for (let i = 0; i < wraps.length; i++) {
- const value = getBinValue(i, wraps.length);
- const scale = Math.max(0.06, value);
- const hue = (hueStart + (i / wraps.length) * hueRange + value * 30) % 360;
- const barEl = wraps[i].querySelector('.sidebar-viz-eq-bar');
- const peakEl = wraps[i].querySelector('.sidebar-viz-eq-peak');
-
- barEl.style.transform = `scaleX(${scale})`;
- barEl.style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
-
- // Peak hold with gravity
- if (value > peaks[i]) {
- peaks[i] = value;
- peakVelocity[i] = 0;
- } else {
- peakVelocity[i] += 0.002; // gravity
- peaks[i] = Math.max(0, peaks[i] - peakVelocity[i]);
- }
- const peakPos = Math.max(0.06, peaks[i]);
- peakEl.style.left = `${peakPos * 100}%`;
- peakEl.style.backgroundColor = `hsla(${hue}, 90%, 75%, ${0.6 + peaks[i] * 0.4})`;
- peakEl.style.boxShadow = `0 0 4px hsla(${hue}, 90%, 70%, ${peaks[i] * 0.5})`;
- }
- }
- drawEqualizer();
- }
-}
-
-function stopSidebarVisualizer() {
- if (sidebarVizAnimFrame) {
- cancelAnimationFrame(sidebarVizAnimFrame);
- sidebarVizAnimFrame = null;
- }
- const container = document.getElementById('sidebar-visualizer');
- if (container) {
- container.classList.remove('active');
- }
-}
-
-// Listen for visualizer type changes in settings — use isPlaying (not wasRunning)
-// so switching from 'none' to a real type while music plays starts the visualizer
-document.addEventListener('change', (e) => {
- if (e.target.id === 'sidebar-visualizer-type') {
- const newType = e.target.value;
- stopSidebarVisualizer();
- _sidebarVizBuiltType = null; // force rebuild for new type
- sidebarVisualizerType = newType;
- if (isPlaying && newType !== 'none') {
- npInitVisualizer();
- startSidebarVisualizer();
- }
- }
-});
-
-// ===============================
-// RADIO MODE
-// ===============================
-
-async function npFetchRadioTracks() {
- if (!currentTrack || !currentTrack.id) return;
- try {
- npLoadingQueueItem = true;
- const excludeIds = npRecentlyPlayedIds.join(',');
- const resp = await fetch(`/api/library/radio?track_id=${currentTrack.id}&limit=50&exclude=${encodeURIComponent(excludeIds)}`);
- if (!resp.ok) {
- console.warn('Radio endpoint returned', resp.status);
- npLoadingQueueItem = false;
- return;
- }
- const data = await resp.json();
- // Bail if radio was toggled off during the fetch
- if (!npRadioMode) { npLoadingQueueItem = false; return; }
- if (data.tracks && data.tracks.length > 0) {
- data.tracks.forEach(t => {
- npQueue.push({
- title: t.title || 'Unknown Track',
- artist: t.artist || 'Unknown Artist',
- album: t.album || 'Unknown Album',
- file_path: t.file_path,
- filename: t.file_path,
- is_library: true,
- image_url: t.image_url || null,
- id: t.id,
- artist_id: t.artist_id,
- album_id: t.album_id,
- bitrate: t.bitrate,
- sample_rate: t.sample_rate
- });
- });
- showToast(`Radio: Added ${data.tracks.length} similar tracks`, 'success');
- renderNpQueue();
- updateNpPrevNextButtons();
- npLoadingQueueItem = false;
- // Only auto-advance if nothing is currently playing (triggered by onAudioEnded)
- if (!isPlaying) {
- playNextInQueue();
- }
- } else {
- showToast('Radio: No similar tracks found', 'info');
- npLoadingQueueItem = false;
- }
- } catch (e) {
- console.warn('Radio fetch error:', e);
- npLoadingQueueItem = false;
- }
-}
-
-// Media Session API
-function initMediaSession() {
- if (!('mediaSession' in navigator)) return;
-
- navigator.mediaSession.setActionHandler('play', () => {
- if (audioPlayer && currentTrack) {
- audioPlayer.play().then(() => setPlayingState(true));
- }
- });
- navigator.mediaSession.setActionHandler('pause', () => {
- if (audioPlayer) {
- audioPlayer.pause();
- setPlayingState(false);
- }
- });
- navigator.mediaSession.setActionHandler('stop', () => {
- handleStop();
- });
- navigator.mediaSession.setActionHandler('seekbackward', () => {
- if (audioPlayer && audioPlayer.duration) {
- audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10);
- }
- });
- navigator.mediaSession.setActionHandler('seekforward', () => {
- if (audioPlayer && audioPlayer.duration) {
- audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 10);
- }
- });
- navigator.mediaSession.setActionHandler('previoustrack', () => {
- if (npQueue.length > 0) playPreviousInQueue();
- });
- navigator.mediaSession.setActionHandler('nexttrack', () => {
- if (npQueue.length > 0) playNextInQueue();
- });
-}
-
-function updateMediaSessionMetadata() {
- if (!('mediaSession' in navigator) || !currentTrack) return;
- const artwork = [];
- const artUrl = getNpAlbumArtUrl();
- if (artUrl) artwork.push({ src: artUrl, sizes: '512x512', type: 'image/jpeg' });
-
- navigator.mediaSession.metadata = new MediaMetadata({
- title: currentTrack.title || 'Unknown Track',
- artist: currentTrack.artist || 'Unknown Artist',
- album: currentTrack.album || 'Unknown Album',
- artwork: artwork
- });
-}
-
-function updateMediaSessionPlaybackState() {
- if (!('mediaSession' in navigator)) return;
- if (!currentTrack) {
- navigator.mediaSession.playbackState = 'none';
- } else {
- navigator.mediaSession.playbackState = isPlaying ? 'playing' : 'paused';
- }
-}
-
-// ===============================
-// SUPPORT MODAL
-// ===============================
-
-function showSupportModal() {
- const overlay = document.getElementById('support-modal-overlay');
- if (overlay) overlay.classList.remove('hidden');
-}
-
-function closeSupportModal() {
- const overlay = document.getElementById('support-modal-overlay');
- if (overlay) overlay.classList.add('hidden');
-}
-
-async function copyAddress(address, cryptoName) {
- try {
- // navigator.clipboard requires HTTPS — use fallback for HTTP (Docker)
- if (navigator.clipboard && window.isSecureContext) {
- await navigator.clipboard.writeText(address);
- } else {
- const textarea = document.createElement('textarea');
- textarea.value = address;
- textarea.style.position = 'fixed';
- textarea.style.opacity = '0';
- document.body.appendChild(textarea);
- textarea.select();
- document.execCommand('copy');
- document.body.removeChild(textarea);
- }
- showToast(`${cryptoName} address copied to clipboard`, 'success');
- } catch (error) {
- console.error('Failed to copy address:', error);
- // Show the address so user can copy manually
- showToast(`${cryptoName}: ${address}`, 'info');
- }
-}
-
-// ===============================
-// SETTINGS FUNCTIONALITY
-// ===============================
-
-let settingsAutoSaveTimer = null;
-
-function debouncedAutoSaveSettings() {
- if (settingsAutoSaveTimer) clearTimeout(settingsAutoSaveTimer);
- settingsAutoSaveTimer = setTimeout(() => saveSettings(true), 2000);
-}
-
-function handleManualSaveClick() {
- if (settingsAutoSaveTimer) clearTimeout(settingsAutoSaveTimer);
- saveSettings(false);
-}
-
-function initializeSettings() {
- // This function is called when the settings page is loaded.
- // It attaches event listeners to all interactive elements on the page.
-
- // Accent color listeners (live preview + custom picker toggle)
- initAccentColorListeners();
-
- // Main save button (manual save, non-quiet)
- // Uses named function reference so addEventListener deduplicates across repeated calls
- const saveButton = document.getElementById('save-settings');
- if (saveButton) {
- saveButton.addEventListener('click', handleManualSaveClick);
- }
-
- // Debounced auto-save on all settings inputs
- // Uses named function reference (debouncedAutoSaveSettings) so addEventListener deduplicates
- const settingsPage = document.getElementById('settings-page');
- if (settingsPage) {
- settingsPage.querySelectorAll('input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="range"]').forEach(input => {
- input.addEventListener('input', debouncedAutoSaveSettings);
- });
- settingsPage.querySelectorAll('input[type="checkbox"], select').forEach(input => {
- input.addEventListener('change', debouncedAutoSaveSettings);
- });
- }
-
- // Server toggle buttons
- const plexToggle = document.getElementById('plex-toggle');
- if (plexToggle) {
- plexToggle.addEventListener('click', () => toggleServer('plex'));
- }
- const jellyfinToggle = document.getElementById('jellyfin-toggle');
- if (jellyfinToggle) {
- jellyfinToggle.addEventListener('click', () => toggleServer('jellyfin'));
- }
-
- // Auto-detect buttons
- const detectSlskdBtn = document.querySelector('#soulseek-url + .detect-button');
- if (detectSlskdBtn) {
- detectSlskdBtn.addEventListener('click', autoDetectSlskd);
- }
- const detectPlexBtn = document.querySelector('#plex-container .detect-button');
- if (detectPlexBtn) {
- detectPlexBtn.addEventListener('click', autoDetectPlex);
- }
- const detectJellyfinBtn = document.querySelector('#jellyfin-container .detect-button');
- if (detectJellyfinBtn) {
- detectJellyfinBtn.addEventListener('click', autoDetectJellyfin);
- }
-
- // Test connection buttons
- // Test button event listeners removed - they use onclick attributes in HTML to avoid double firing
-}
-
-function resetFileOrganizationTemplates() {
- // Reset templates to defaults
- const defaults = {
- album: '$albumartist/$albumartist - $album/$track - $title',
- single: '$artist/$artist - $title/$title',
- playlist: '$playlist/$artist - $title',
- video: '$artist/$title-video'
- };
-
- document.getElementById('template-album-path').value = defaults.album;
- document.getElementById('template-single-path').value = defaults.single;
- document.getElementById('template-playlist-path').value = defaults.playlist;
- document.getElementById('template-video-path').value = defaults.video;
-
- debouncedAutoSaveSettings();
-}
-
-function validateFileOrganizationTemplates() {
- const errors = [];
-
- // Valid variables for each template type
- const validVars = {
- album: ['$artist', '$albumartist', '$artistletter', '$album', '$albumtype', '$title', '$track', '$disc', '$discnum', '$cdnum', '$year', '$quality'],
- single: ['$artist', '$albumartist', '$artistletter', '$album', '$albumtype', '$title', '$track', '$year', '$quality'],
- playlist: ['$artist', '$artistletter', '$playlist', '$title', '$year', '$quality'],
- video: ['$artist', '$artistletter', '$title', '$year']
- };
-
- // Get template values
- const albumPath = document.getElementById('template-album-path').value.trim();
- const singlePath = document.getElementById('template-single-path').value.trim();
- const playlistPath = document.getElementById('template-playlist-path').value.trim();
-
- // Validate album template
- if (albumPath) {
- if (albumPath.endsWith('/')) {
- errors.push('Album template cannot end with /');
- }
- if (albumPath.startsWith('/')) {
- errors.push('Album template cannot start with /');
- }
- if (!albumPath.includes('/')) {
- errors.push('Album template must include at least one folder (use / separator)');
- }
- if (albumPath.includes('//')) {
- errors.push('Album template cannot have consecutive slashes //');
- }
- // Check for likely typos of valid variables (case-insensitive to catch $Album, $ARTIST, etc.)
- const albumVarPattern = /\$\{([a-zA-Z]+)\}|\$([a-zA-Z]+)/g;
- const foundVars = albumPath.match(albumVarPattern) || [];
- foundVars.forEach(v => {
- // Normalize ${var} to $var for validation
- const normalized = v.startsWith('${') ? '$' + v.slice(2, -1) : v;
- const lowerVar = normalized.toLowerCase();
- // Check if lowercase version exists in valid vars
- const isValid = validVars.album.some(validVar => validVar.toLowerCase() === lowerVar);
- if (!isValid) {
- errors.push(`Invalid variable "${normalized}" in album template. Valid: ${validVars.album.join(', ')}`);
- } else if (normalized !== lowerVar && validVars.album.includes(lowerVar)) {
- // Variable is valid but has wrong case
- errors.push(`Variable "${normalized}" should be lowercase: "${lowerVar}"`);
- }
- });
- }
-
- // Validate single template
- if (singlePath) {
- if (singlePath.endsWith('/')) {
- errors.push('Single template cannot end with /');
- }
- if (singlePath.startsWith('/')) {
- errors.push('Single template cannot start with /');
- }
- // Note: single template is allowed to have no slash (flat file: "$artist - $title")
- if (singlePath.includes('//')) {
- errors.push('Single template cannot have consecutive slashes //');
- }
- const singleVarPattern = /\$\{([a-zA-Z]+)\}|\$([a-zA-Z]+)/g;
- const foundVars = singlePath.match(singleVarPattern) || [];
- foundVars.forEach(v => {
- const normalized = v.startsWith('${') ? '$' + v.slice(2, -1) : v;
- const lowerVar = normalized.toLowerCase();
- const isValid = validVars.single.some(validVar => validVar.toLowerCase() === lowerVar);
- if (!isValid) {
- errors.push(`Invalid variable "${normalized}" in single template. Valid: ${validVars.single.join(', ')}`);
- } else if (normalized !== lowerVar && validVars.single.includes(lowerVar)) {
- errors.push(`Variable "${normalized}" should be lowercase: "${lowerVar}"`);
- }
- });
- }
-
- // Validate playlist template
- if (playlistPath) {
- if (playlistPath.endsWith('/')) {
- errors.push('Playlist template cannot end with /');
- }
- if (playlistPath.startsWith('/')) {
- errors.push('Playlist template cannot start with /');
- }
- if (!playlistPath.includes('/')) {
- errors.push('Playlist template must include at least one folder (use / separator)');
- }
- if (playlistPath.includes('//')) {
- errors.push('Playlist template cannot have consecutive slashes //');
- }
- const playlistVarPattern = /\$\{([a-zA-Z]+)\}|\$([a-zA-Z]+)/g;
- const foundVars = playlistPath.match(playlistVarPattern) || [];
- foundVars.forEach(v => {
- const normalized = v.startsWith('${') ? '$' + v.slice(2, -1) : v;
- const lowerVar = normalized.toLowerCase();
- const isValid = validVars.playlist.some(validVar => validVar.toLowerCase() === lowerVar);
- if (!isValid) {
- errors.push(`Invalid variable "${normalized}" in playlist template. Valid: ${validVars.playlist.join(', ')}`);
- } else if (normalized !== lowerVar && validVars.playlist.includes(lowerVar)) {
- errors.push(`Variable "${normalized}" should be lowercase: "${lowerVar}"`);
- }
- });
- }
-
- return errors;
-}
-
-// Settings redesign — tab switching + service accordions
-function switchSettingsTab(tab) {
- // Update tab bar
- document.querySelectorAll('.stg-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
- // Show/hide settings groups and section headers by data-stg attribute
- document.querySelectorAll('#settings-page [data-stg]').forEach(g => {
- g.style.display = g.dataset.stg === tab ? '' : 'none';
- });
- // Re-apply collapsed state on section bodies (tab switch resets inline display)
- document.querySelectorAll('#settings-page .settings-section-body.collapsed').forEach(b => {
- b.style.display = 'none';
- });
- // Also hide/show the column wrappers if they're empty in this tab
- document.querySelectorAll('#settings-page .settings-left-column, #settings-page .settings-right-column, #settings-page .settings-third-column').forEach(col => {
- const hasVisible = Array.from(col.querySelectorAll('.settings-group[data-stg]')).some(g => g.style.display !== 'none');
- col.style.display = hasVisible ? '' : 'none';
- });
- // Re-apply conditional visibility (quality profile, source containers, etc.)
- if (typeof updateDownloadSourceUI === 'function') {
- try { updateDownloadSourceUI(); } catch (e) { }
- }
- // Load DB maintenance info when switching to Advanced tab
- if (tab === 'advanced' && typeof loadDbMaintenanceInfo === 'function') {
- try { loadDbMaintenanceInfo(); } catch (e) { }
- }
- // Initialize live log viewer when switching to Logs tab
- if (tab === 'logs') {
- _logViewerInit();
- } else {
- _logViewerStop();
- }
- // Refresh the green/yellow header gradient when arriving on Connections
- if (tab === 'connections') {
- try { applyServiceStatusGradients(); } catch (e) { }
- }
-}
-
-// ── Settings → Connections: per-service status gradient + verify wiring ──
-// Gradient shows green when the user has filled in credentials, yellow when empty.
-// It's based purely on config presence (cheap, no API calls). The verify layer —
-// which runs on expand / Expand All — surfaces whether those credentials actually
-// work, via an inline warning bar inside the expanded panel.
-
-let _stgServiceStatusState = {}; // service -> {configured: bool}
-let _stgServiceVerifyInFlight = {}; // service -> true while a verify call is running
-
-async function applyServiceStatusGradients() {
- try {
- const resp = await fetch('/api/settings/config-status');
- if (!resp.ok) return;
- const data = await resp.json();
- _stgServiceStatusState = data || {};
- document.querySelectorAll('#settings-page .stg-service[data-service]').forEach(card => {
- const service = card.getAttribute('data-service');
- const header = card.querySelector('.stg-service-header');
- if (!service || !header) return;
- const configured = !!(data[service] && data[service].configured);
- header.classList.toggle('status-configured', configured);
- header.classList.toggle('status-missing', !configured);
- // Ensure the header has a spinner placeholder for the verify-checking state
- if (!header.querySelector('.stg-service-verify-spinner')) {
- const spinner = document.createElement('span');
- spinner.className = 'stg-service-verify-spinner';
- // Insert before the chevron on the right
- const chevron = header.querySelector('.stg-service-chevron');
- if (chevron) header.insertBefore(spinner, chevron);
- else header.appendChild(spinner);
- }
- });
- } catch (e) {
- console.warn('[Settings Status] Failed to apply gradients:', e);
- }
-}
-
-function _stgSetCheckingState(service, isChecking) {
- const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
- if (!card) return;
- const header = card.querySelector('.stg-service-header');
- const body = card.querySelector('.stg-service-body');
- if (header) {
- header.classList.toggle('status-checking', !!isChecking);
- // Lazy-create the spinner element so it's there even if
- // applyServiceStatusGradients() hasn't run yet.
- if (!header.querySelector('.stg-service-verify-spinner')) {
- const spinner = document.createElement('span');
- spinner.className = 'stg-service-verify-spinner';
- const chevron = header.querySelector('.stg-service-chevron');
- if (chevron) header.insertBefore(spinner, chevron);
- else header.appendChild(spinner);
- }
- }
- if (!body) return;
- const existing = body.querySelector('.stg-service-verify-status');
- if (isChecking) {
- if (!existing) {
- const status = document.createElement('div');
- status.className = 'stg-service-verify-status';
- status.textContent = 'Testing connection…';
- body.insertBefore(status, body.firstChild);
- }
- } else if (existing) {
- existing.remove();
- }
-}
-
-function _stgShowVerifyWarning(service, message) {
- const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
- if (!card) return;
- const body = card.querySelector('.stg-service-body');
- if (!body) return;
- const existing = body.querySelector('.stg-service-warning');
- if (existing) existing.remove();
- const warning = document.createElement('div');
- warning.className = 'stg-service-warning';
- warning.innerHTML = `
-
-
- `;
- warning.querySelector('.stg-service-warning-text').textContent =
- message || 'Connection test failed.';
- body.insertBefore(warning, body.firstChild);
-}
-
-function _stgClearVerifyWarning(service) {
- const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
- if (!card) return;
- const existing = card.querySelector('.stg-service-warning');
- if (existing) existing.remove();
-}
-
-async function _stgRefreshAfterSave() {
- // Called after a successful settings save. Cheap gradient refresh always,
- // plus re-verify any cards the user currently has expanded (so they see
- // immediate feedback on credentials they just edited). Collapsed cards
- // keep their cached verify result until the user expands them.
- try {
- await applyServiceStatusGradients();
- const expandedServices = Array.from(
- document.querySelectorAll('#settings-page .stg-service.expanded[data-service]')
- )
- .map(card => card.getAttribute('data-service'))
- .filter(Boolean);
- if (expandedServices.length > 0) {
- _stgVerifyServices(expandedServices, { force: true });
- }
- } catch (e) {
- console.warn('[Settings Status] Post-save refresh failed:', e);
- }
-}
-
-async function _stgVerifyServices(services, { force = false } = {}) {
- if (!services || !services.length) return {};
- // Mark all as checking immediately so the user sees spinners/status lines
- services.forEach(svc => {
- _stgServiceVerifyInFlight[svc] = true;
- _stgSetCheckingState(svc, true);
- _stgClearVerifyWarning(svc);
- });
- try {
- const url = '/api/settings/verify' + (force ? '?force=true' : '');
- const resp = await fetch(url, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ services })
- });
- const data = await resp.json();
- services.forEach(svc => {
- _stgServiceVerifyInFlight[svc] = false;
- _stgSetCheckingState(svc, false);
- const result = data[svc];
- if (result && result.success === false) {
- _stgShowVerifyWarning(svc, result.error || result.message || '');
- }
- });
- return data;
- } catch (e) {
- console.warn('[Settings Verify] Network error:', e);
- services.forEach(svc => {
- _stgServiceVerifyInFlight[svc] = false;
- _stgSetCheckingState(svc, false);
- _stgShowVerifyWarning(svc, 'Unable to reach the verification endpoint.');
- });
- return {};
- }
-}
-
-function toggleStgService(el) {
- const service = el.closest('.stg-service');
- if (service) {
- const wasExpanded = service.classList.contains('expanded');
- service.classList.toggle('expanded');
- // Fire verify when expanding a single card (not on collapse). The backend
- // caches per service for 5 min, so rapid expand/collapse won't re-ping.
- if (!wasExpanded) {
- const serviceName = service.getAttribute('data-service');
- if (serviceName && !_stgServiceVerifyInFlight[serviceName]) {
- _stgVerifyServices([serviceName]);
- }
- }
- }
-}
-function toggleAllServiceAccordions(btn) {
- const services = document.querySelectorAll('#settings-page .stg-service');
- const allExpanded = Array.from(services).every(s => s.classList.contains('expanded'));
- const willExpand = !allExpanded;
- services.forEach(s => s.classList.toggle('expanded', willExpand));
- btn.textContent = allExpanded ? 'Expand All' : 'Collapse All';
-
- // On Expand All, fire a single batched verify for every service that has a
- // data-service attribute. Backend caps concurrency at 3 to avoid rate limits.
- // Skipped on Collapse All.
- if (willExpand) {
- const serviceNames = Array.from(services)
- .map(s => s.getAttribute('data-service'))
- .filter(Boolean)
- .filter(name => !_stgServiceVerifyInFlight[name]);
- if (serviceNames.length > 0) {
- _stgVerifyServices(serviceNames);
- }
- }
-}
-
-// ── Hybrid source priority list (drag-and-drop) ──
-const HYBRID_SOURCES = [
- { id: 'soulseek', name: 'Soulseek', icon: 'https://raw.githubusercontent.com/slskd/slskd/master/docs/icon.png', emoji: '🎵' },
- { id: 'youtube', name: 'YouTube', icon: 'https://www.svgrepo.com/show/13671/youtube.svg', emoji: '▶️' },
- { id: 'tidal', name: 'Tidal', icon: 'https://www.svgrepo.com/show/519734/tidal.svg', emoji: '🌊' },
- { id: 'qobuz', name: 'Qobuz', icon: 'https://www.svgrepo.com/show/504778/qobuz.svg', emoji: '🎧' },
- { id: 'hifi', name: 'HiFi', icon: null, emoji: '🎶' },
- { id: 'deezer_dl', name: 'Deezer', icon: 'https://www.svgrepo.com/show/519734/deezer.svg', emoji: '🎧' },
- { id: 'lidarr', name: 'Lidarr', icon: null, emoji: '📦' },
-];
-
-let _hybridSourceOrder = ['soulseek', 'youtube'];
-let _hybridSourceEnabled = { soulseek: true, youtube: true, tidal: false, qobuz: false, hifi: false, deezer_dl: false, lidarr: false };
-let _hybridVisualOrder = null; // Full visual order including disabled sources
-
-function buildHybridSourceList() {
- const container = document.getElementById('hybrid-source-list');
- if (!container) return;
-
- container.innerHTML = '';
- // Build visual order: use persisted visual order, or enabled first + disabled at bottom
- if (!_hybridVisualOrder) {
- _hybridVisualOrder = [..._hybridSourceOrder];
- for (const src of HYBRID_SOURCES) {
- if (!_hybridVisualOrder.includes(src.id)) _hybridVisualOrder.push(src.id);
- }
- }
- const allIds = _hybridVisualOrder;
-
- allIds.forEach((srcId, idx) => {
- const src = HYBRID_SOURCES.find(s => s.id === srcId);
- if (!src) return;
- const enabled = _hybridSourceEnabled[srcId] !== false;
- const isInOrder = _hybridSourceOrder.includes(srcId);
- const priorityNum = isInOrder && enabled ? _hybridSourceOrder.indexOf(srcId) + 1 : '';
-
- const item = document.createElement('div');
- item.className = `hybrid-source-item${enabled ? '' : ' disabled'}`;
- item.draggable = true;
- item.dataset.sourceId = srcId;
-
- item.innerHTML = `
-
-
-
-
- ${src.icon
- ? `No paths configured. Click "Add Path" to add your music folder(s).
';
- return;
- }
- container.innerHTML = paths.map((p, i) => `
-
-
-
-
- `).join('');
- // Attach auto-save to dynamically rendered inputs
- container.querySelectorAll('.music-path-input').forEach(input => {
- input.addEventListener('change', () => { if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings(); });
- });
-}
-
-function addMusicPathRow() {
- const container = document.getElementById('music-paths-list');
- if (!container) return;
- // Clear the "no paths" message if present
- const placeholder = container.querySelector('div[style*="color: rgba"]');
- if (placeholder && !container.querySelector('.music-path-row')) placeholder.remove();
- const row = document.createElement('div');
- row.className = 'form-group music-path-row';
- row.style.marginBottom = '4px';
- row.innerHTML = `
-
-
- `;
- container.appendChild(row);
- const input = row.querySelector('input');
- input.focus();
- // Auto-save when the user finishes typing a path
- input.addEventListener('change', () => { if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings(); });
-}
-
-function _removeMusicPathRow(btn) {
- btn.closest('.music-path-row').remove();
- // Auto-save after removing a path
- if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
-}
-
-function collectMusicPaths() {
- const inputs = document.querySelectorAll('.music-path-input');
- const paths = [];
- inputs.forEach(input => {
- const val = input.value.trim();
- if (val) paths.push(val);
- });
- return paths;
-}
-
-// ── Genre Whitelist ──
-let _genreWhitelistCache = [];
-
-function _genreWhitelistRender(genres) {
- _genreWhitelistCache = genres && genres.length ? genres : [];
- const container = document.getElementById('genre-whitelist-chips');
- const countEl = document.getElementById('genre-whitelist-count');
- if (!container) return;
- if (!_genreWhitelistCache.length) {
- container.innerHTML = 'No genres configured. Click "Reset to Defaults" to load the default whitelist.
';
- if (countEl) countEl.textContent = '';
- return;
- }
- const searchVal = (document.getElementById('genre-whitelist-search')?.value || '').toLowerCase();
- const filtered = searchVal ? _genreWhitelistCache.filter(g => g.toLowerCase().includes(searchVal)) : _genreWhitelistCache;
- container.innerHTML = filtered.map(g =>
- `${escapeHtml(g)}`
- ).join('');
- if (countEl) countEl.textContent = `${_genreWhitelistCache.length} genres`;
-}
-
-function _genreWhitelistRemove(genre) {
- _genreWhitelistCache = _genreWhitelistCache.filter(g => g !== genre);
- _genreWhitelistRender(_genreWhitelistCache);
- if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
-}
-
-function _genreWhitelistAdd(genre) {
- genre = genre.trim();
- if (!genre) return;
- if (_genreWhitelistCache.some(g => g.toLowerCase() === genre.toLowerCase())) return;
- _genreWhitelistCache.push(genre);
- _genreWhitelistCache.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
- _genreWhitelistRender(_genreWhitelistCache);
- if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
-}
-
-async function _genreWhitelistReset() {
- try {
- const resp = await fetch('/api/genre-whitelist/defaults');
- const data = await resp.json();
- if (data.genres) {
- _genreWhitelistCache = data.genres;
- _genreWhitelistRender(_genreWhitelistCache);
- if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
- showToast(`Loaded ${data.genres.length} default genres`, 'success');
- }
- } catch (e) {
- showToast('Failed to load defaults', 'error');
- }
-}
-
-// Toggle whitelist container visibility + init
-document.addEventListener('change', (e) => {
- if (e.target.id === 'genre-whitelist-enabled') {
- const container = document.getElementById('genre-whitelist-container');
- if (container) container.style.display = e.target.checked ? '' : 'none';
- // Auto-populate with defaults on first enable if empty
- if (e.target.checked && _genreWhitelistCache.length === 0) {
- _genreWhitelistReset();
- }
- }
-});
-
-// Search/add handler
-document.addEventListener('keydown', (e) => {
- if (e.target.id === 'genre-whitelist-search' && e.key === 'Enter') {
- e.preventDefault();
- _genreWhitelistAdd(e.target.value);
- e.target.value = '';
- }
-});
-document.addEventListener('input', (e) => {
- if (e.target.id === 'genre-whitelist-search') {
- _genreWhitelistRender(_genreWhitelistCache);
- }
-});
-
-function _collectGenreWhitelist() {
- return _genreWhitelistCache;
-}
-
-// ── Live Log Viewer ──
-let _logViewerActive = false;
-let _logViewerFilter = '';
-let _logViewerSource = 'app';
-let _logViewerSearch = '';
-const _LOG_MAX_LINES = 2000;
-
-function _logClassify(line) {
- // Exact logger format first
- if (line.includes(' - DEBUG - ')) return 'DEBUG';
- if (line.includes(' - INFO - ')) return 'INFO';
- if (line.includes(' - WARNING - ')) return 'WARNING';
- if (line.includes(' - ERROR - ') || line.includes(' - CRITICAL - ')) return 'ERROR';
- // Heuristic for print() output
- const ll = line.toLowerCase();
- if (ll.includes('error') || ll.includes('traceback') || ll.includes('exception') || ll.includes('failed')) return 'ERROR';
- if (ll.includes('warning') || ll.includes('warn')) return 'WARNING';
- if (ll.includes('debug')) return 'DEBUG';
- return 'INFO';
-}
-
-function _logClassToCSS(level) {
- return { DEBUG: 'log-debug', INFO: 'log-info', WARNING: 'log-warning', ERROR: 'log-error' }[level] || 'log-plain';
-}
-
-async function _logViewerInit() {
- if (_logViewerActive) return;
- _logViewerActive = true;
- _logViewerSource = document.getElementById('log-viewer-source')?.value || 'app';
-
- // Fetch initial tail
- try {
- const params = new URLSearchParams({ source: _logViewerSource, lines: 300 });
- if (_logViewerFilter) params.set('level', _logViewerFilter);
- if (_logViewerSearch) params.set('search', _logViewerSearch);
- const resp = await fetch(`/api/logs/tail?${params}`);
- const data = await resp.json();
- if (data.lines) {
- const container = document.getElementById('log-viewer-lines');
- if (container) {
- container.innerHTML = '';
- _logViewerAppendLines(data.lines);
- }
- }
- } catch (e) {
- console.warn('Failed to load initial logs:', e);
- }
-
- // Subscribe to live updates
- if (typeof socket !== 'undefined' && socket && socket.connected) {
- socket.emit('logs:subscribe', { source: _logViewerSource });
- socket.on('logs:live', _logViewerOnLive);
- }
-}
-
-function _logViewerStop() {
- if (!_logViewerActive) return;
- _logViewerActive = false;
- if (typeof socket !== 'undefined' && socket) {
- socket.off('logs:live', _logViewerOnLive);
- socket.emit('logs:unsubscribe', {});
- }
-}
-
-function _logViewerOnLive(data) {
- if (!_logViewerActive || !data.lines) return;
- if (data.source !== _logViewerSource) return;
- let lines = data.lines;
- // Apply level filter client-side for live lines
- if (_logViewerFilter) {
- lines = lines.filter(l => _logClassify(l) === _logViewerFilter);
- }
- // Apply search filter
- if (_logViewerSearch) {
- const s = _logViewerSearch.toLowerCase();
- lines = lines.filter(l => l.toLowerCase().includes(s));
- }
- if (lines.length > 0) _logViewerAppendLines(lines);
-}
-
-function _logViewerAppendLines(lines) {
- const container = document.getElementById('log-viewer-lines');
- if (!container) return;
- const autoScroll = document.getElementById('log-viewer-autoscroll')?.checked;
- const terminal = document.getElementById('log-viewer-terminal');
-
- const frag = document.createDocumentFragment();
- for (const line of lines) {
- const div = document.createElement('div');
- div.className = 'log-line ' + _logClassToCSS(_logClassify(line));
- div.textContent = line;
- frag.appendChild(div);
- }
- container.appendChild(frag);
-
- // Trim old lines
- while (container.children.length > _LOG_MAX_LINES) {
- container.removeChild(container.firstChild);
- }
-
- // Update count
- const countEl = document.getElementById('log-viewer-line-count');
- if (countEl) countEl.textContent = `${container.children.length} lines`;
-
- // Auto-scroll
- if (autoScroll && terminal) {
- terminal.scrollTop = terminal.scrollHeight;
- }
-}
-
-async function _logViewerChangeSource() {
- _logViewerStop();
- _logViewerSource = document.getElementById('log-viewer-source')?.value || 'app';
- const container = document.getElementById('log-viewer-lines');
- if (container) container.innerHTML = 'Loading...
';
- await _logViewerInit();
-}
-
-function _logViewerFilterLevel(btn) {
- document.querySelectorAll('.log-filter-btn').forEach(b => b.classList.remove('active'));
- btn.classList.add('active');
- _logViewerFilter = btn.dataset.level || '';
- _logViewerReload();
-}
-
-let _logSearchDebounce = null;
-function _logViewerOnSearch(input) {
- clearTimeout(_logSearchDebounce);
- _logSearchDebounce = setTimeout(() => {
- _logViewerSearch = (input.value || '').trim();
- _logViewerReload();
- }, 300);
-}
-
-function _logViewerReload() {
- _logViewerStop();
- const container = document.getElementById('log-viewer-lines');
- if (container) container.innerHTML = 'Loading...
';
- _logViewerInit();
-}
-
-function _logViewerCopy() {
- const container = document.getElementById('log-viewer-lines');
- if (!container) return;
- const text = Array.from(container.children).map(el => el.textContent).join('\n');
- if (navigator.clipboard && window.isSecureContext) {
- navigator.clipboard.writeText(text).then(() => showToast('Logs copied', 'success'));
- } else {
- const ta = document.createElement('textarea');
- ta.value = text;
- ta.style.cssText = 'position:fixed;left:-9999px';
- document.body.appendChild(ta);
- ta.select();
- document.execCommand('copy');
- document.body.removeChild(ta);
- showToast('Logs copied', 'success');
- }
-}
-
-function _logViewerClear() {
- const container = document.getElementById('log-viewer-lines');
- if (container) container.innerHTML = '';
- const countEl = document.getElementById('log-viewer-line-count');
- if (countEl) countEl.textContent = '0 lines';
-}
-
-// ── Database Maintenance ──
-async function loadDbMaintenanceInfo() {
- try {
- const resp = await fetch('/api/database/maintenance/info');
- const data = await resp.json();
- if (!data.success) return;
- const sizeEl = document.getElementById('db-size-display');
- const freeEl = document.getElementById('db-freepages-display');
- const vacEl = document.getElementById('db-autovacuum-display');
- if (sizeEl) sizeEl.textContent = data.total_size_display;
- if (freeEl) freeEl.textContent = data.free_pages > 0
- ? `${data.free_pages.toLocaleString()} (${data.free_size_display} reclaimable)`
- : 'None — database is fully compacted';
- if (vacEl) vacEl.textContent = data.auto_vacuum_label;
- // Hide enable button if already incremental
- const incBtn = document.getElementById('db-incvacuum-btn');
- if (incBtn && data.auto_vacuum === 2) {
- incBtn.textContent = 'Incremental Vacuum Enabled';
- incBtn.disabled = true;
- incBtn.style.opacity = '0.5';
- }
- } catch (e) { console.error('Error loading DB maintenance info:', e); }
-}
-
-async function runDatabaseVacuum() {
- const btn = document.getElementById('db-vacuum-btn');
- const status = document.getElementById('db-vacuum-status');
- if (!confirm('This will compact the database by rewriting it. The database will be locked during this operation. For large databases this may take over a minute. Continue?')) return;
- btn.disabled = true;
- btn.textContent = 'Compacting...';
- if (status) { status.style.display = 'block'; status.style.background = 'rgba(255,255,255,0.04)'; status.style.color = 'rgba(255,255,255,0.6)'; status.textContent = 'Running VACUUM — this may take a while...'; }
- try {
- const resp = await fetch('/api/database/maintenance/vacuum', { method: 'POST' });
- const data = await resp.json();
- if (data.success) {
- showToast(`Database compacted in ${data.elapsed_seconds}s — saved ${data.saved_display}`, 'success');
- if (status) { status.style.color = '#4caf50'; status.textContent = `Done in ${data.elapsed_seconds}s. Saved ${data.saved_display}.`; }
- loadDbMaintenanceInfo();
- } else {
- showToast('Vacuum failed: ' + (data.error || 'Unknown error'), 'error');
- if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + (data.error || 'Unknown error'); }
- }
- } catch (e) {
- showToast('Vacuum failed: ' + e.message, 'error');
- if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + e.message; }
- } finally {
- btn.disabled = false;
- btn.textContent = 'Compact Database (VACUUM)';
- }
-}
-
-async function enableIncrementalVacuum() {
- const btn = document.getElementById('db-incvacuum-btn');
- const status = document.getElementById('db-vacuum-status');
- if (!confirm('This will enable incremental vacuum mode. It requires a one-time full VACUUM to activate, which locks the database and may take over a minute on large databases. Continue?')) return;
- btn.disabled = true;
- btn.textContent = 'Enabling...';
- if (status) { status.style.display = 'block'; status.style.background = 'rgba(255,255,255,0.04)'; status.style.color = 'rgba(255,255,255,0.6)'; status.textContent = 'Enabling incremental vacuum — this may take a while...'; }
- try {
- const resp = await fetch('/api/database/maintenance/enable-incremental-vacuum', { method: 'POST' });
- const data = await resp.json();
- if (data.success) {
- const msg = data.already_enabled ? 'Already enabled' : `Enabled in ${data.elapsed_seconds}s — saved ${data.saved_display}`;
- showToast(msg, 'success');
- if (status) { status.style.color = '#4caf50'; status.textContent = msg; }
- loadDbMaintenanceInfo();
- } else {
- showToast('Failed: ' + (data.error || 'Unknown error'), 'error');
- if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + (data.error || 'Unknown error'); }
- }
- } catch (e) {
- showToast('Failed: ' + e.message, 'error');
- if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + e.message; }
- } finally {
- btn.disabled = false;
- btn.textContent = 'Enable Incremental Vacuum';
- }
-}
-
-async function activateDevMode() {
- const password = document.getElementById('dev-mode-password').value;
- try {
- const response = await fetch('/api/dev-mode', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ password })
- });
- const data = await response.json();
- if (data.success) {
- document.getElementById('dev-mode-status').textContent = 'Active';
- document.getElementById('dev-mode-status').style.color = 'rgb(var(--accent-light-rgb))';
- document.getElementById('hydrabase-nav').style.display = '';
- document.getElementById('hydrabase-button-container').style.display = '';
- document.getElementById('dev-mode-password').value = '';
- showToast('Dev mode activated', 'success');
- } else {
- showToast('Invalid password', 'error');
- }
- } catch (e) {
- showToast('Failed to activate dev mode', 'error');
- }
-}
-
-// ── Hydrabase Functions ──
-
-let _hydrabaseConnected = false;
-
-async function hydrabaseToggleConnection() {
- if (_hydrabaseConnected) {
- await hydrabaseDisconnect();
- } else {
- await hydrabaseConnect();
- }
-}
-
-async function hydrabaseConnect() {
- const url = document.getElementById('hydra-ws-url').value.trim();
- const apiKey = document.getElementById('hydra-api-key').value.trim();
- if (!url || !apiKey) {
- showToast('URL and API key required', 'error');
- return;
- }
- const statusEl = document.getElementById('hydra-connection-status');
- const btn = document.getElementById('hydra-connect-btn');
- statusEl.textContent = 'Connecting...';
- statusEl.style.color = '#f0ad4e';
- try {
- const response = await fetch('/api/hydrabase/connect', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ url, api_key: apiKey })
- });
- const data = await response.json();
- if (data.success) {
- _hydrabaseConnected = true;
- statusEl.textContent = 'Connected';
- statusEl.style.color = 'rgb(var(--accent-light-rgb))';
- btn.textContent = 'Disconnect';
- showToast('Connected to Hydrabase', 'success');
- } else {
- statusEl.textContent = 'Failed';
- statusEl.style.color = '#f44336';
- showToast(data.error || 'Connection failed', 'error');
- }
- } catch (e) {
- statusEl.textContent = 'Error';
- statusEl.style.color = '#f44336';
- showToast('Connection error', 'error');
- }
-}
-
-async function hydrabaseDisconnect() {
- try {
- await fetch('/api/hydrabase/disconnect', { method: 'POST' });
- } catch (e) { }
- _hydrabaseConnected = false;
- document.getElementById('hydra-connection-status').textContent = 'Disconnected';
- document.getElementById('hydra-connection-status').style.color = '#888';
- document.getElementById('hydra-connect-btn').textContent = 'Connect';
- // Dev mode is disabled on disconnect — hide Hydrabase nav and update settings status
- document.getElementById('hydrabase-nav').style.display = 'none';
- document.getElementById('hydrabase-button-container').style.display = 'none';
- const devStatus = document.getElementById('dev-mode-status');
- if (devStatus) {
- devStatus.textContent = 'Inactive';
- devStatus.style.color = '#888';
- }
- showToast('Disconnected — dev mode disabled', 'success');
- navigateToPage('settings');
-}
-
-async function loadHydrabaseComparisons() {
- const container = document.getElementById('hydra-comparisons-container');
- if (!container) return;
- try {
- const response = await fetch('/api/hydrabase/comparisons');
- const data = await response.json();
- if (!data.success || !data.comparisons?.length) {
- container.innerHTML = 'No comparisons yet. Search with Hydrabase active to generate comparisons.
'; - return; - } - let html = ''; - for (const comp of data.comparisons) { - const time = new Date(comp.timestamp * 1000).toLocaleTimeString(); - html += `
-
`;
- }
- container.innerHTML = html;
- } catch (e) {
- container.innerHTML = '
- "${comp.query}"
- ${time}
-
-
-
-
-
- Hydrabase
- ${comp.hydrabase?.tracks || 0}T / ${comp.hydrabase?.artists || 0}A / ${comp.hydrabase?.albums || 0}Al
-
-
- Spotify
- ${comp.spotify?.tracks || 0}T / ${comp.spotify?.artists || 0}A / ${comp.spotify?.albums || 0}Al
-
-
- ${comp.fallback_source === 'deezer' ? 'Deezer' : 'iTunes'}
- ${(comp.fallback || comp.itunes)?.tracks || 0}T / ${(comp.fallback || comp.itunes)?.artists || 0}A / ${(comp.fallback || comp.itunes)?.albums || 0}Al
- Failed to load comparisons.
'; - } -} - -async function hydrabaseSendRaw(textareaId) { - const textarea = document.getElementById(textareaId); - const raw = textarea.value.trim(); - if (!raw) { - showToast('Payload is empty', 'error'); - return; - } - if (!_hydrabaseConnected) { - showToast('Not connected to Hydrabase', 'error'); - return; - } - let payload; - try { - payload = JSON.parse(raw); - } catch (e) { - showToast('Invalid JSON payload', 'error'); - return; - } - // Auto-inject a fresh nonce if not set or zero - if (!payload.nonce) { - payload.nonce = Date.now(); - } - const responseArea = document.getElementById('hydra-response'); - responseArea.textContent = 'Sending...'; - try { - const response = await fetch('/api/hydrabase/send', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ payload }) - }); - const data = await response.json(); - if (data.success) { - responseArea.textContent = JSON.stringify(data.data, null, 2); - } else { - responseArea.textContent = 'Error: ' + (data.error || 'Unknown error'); - if (data.error && data.error.includes('Not connected')) { - _hydrabaseConnected = false; - document.getElementById('hydra-connection-status').textContent = 'Disconnected'; - document.getElementById('hydra-connection-status').style.color = '#888'; - document.getElementById('hydra-connect-btn').textContent = 'Connect'; - } - } - } catch (e) { - responseArea.textContent = 'Error: ' + e.message; - } -} - -// ── Tag embedding accordion helpers ── -function toggleTagGroup(header) { - const body = header.nextElementSibling; - const arrow = header.querySelector('.tag-group-arrow'); - if (body.style.display === 'none') { - body.style.display = 'block'; - arrow.classList.add('open'); - } else { - body.style.display = 'none'; - arrow.classList.remove('open'); - } -} - -function toggleServiceTags(masterCheckbox, serviceName) { - const group = masterCheckbox.closest('.tag-service-group'); - if (!group) return; - const body = group.querySelector('.tag-service-body'); - if (!body) return; - const childCheckboxes = body.querySelectorAll('input[type="checkbox"]'); - childCheckboxes.forEach(cb => { - const label = cb.closest('.checkbox-label'); - if (masterCheckbox.checked) { - if (label) label.classList.remove('disabled-tag'); - cb.disabled = false; - } else { - if (label) label.classList.add('disabled-tag'); - cb.disabled = true; - } - }); -} - -function _collectServiceTags(serviceName) { - const tags = {}; - document.querySelectorAll(`[data-config^="${serviceName}.tags."]`).forEach(cb => { - const key = cb.dataset.config.split('.').pop(); - tags[key] = cb.checked; - }); - return tags; -} - -function _getTagConfig(path) { - const el = document.querySelector(`[data-config="${path}"]`); - return el ? el.checked : true; -} - -async function saveSettings(quiet = false) { - // Validate file organization templates before saving - const validationErrors = validateFileOrganizationTemplates(); - if (validationErrors.length > 0) { - if (!quiet) showToast('Template validation failed: ' + validationErrors.join(', '), 'error'); - return; - } - - // Determine active server from toggle buttons - let activeServer = 'plex'; - if (document.getElementById('jellyfin-toggle').classList.contains('active')) { - activeServer = 'jellyfin'; - } else if (document.getElementById('navidrome-toggle').classList.contains('active')) { - activeServer = 'navidrome'; - } else if (document.getElementById('soulsync-toggle')?.classList.contains('active')) { - activeServer = 'soulsync'; - } - - const settings = { - active_media_server: activeServer, - spotify: { - client_id: document.getElementById('spotify-client-id').value, - client_secret: document.getElementById('spotify-client-secret').value, - redirect_uri: document.getElementById('spotify-redirect-uri').value, - embed_tags: document.getElementById('embed-spotify').checked, - tags: _collectServiceTags('spotify') - }, - tidal: { - client_id: document.getElementById('tidal-client-id').value, - client_secret: document.getElementById('tidal-client-secret').value, - redirect_uri: document.getElementById('tidal-redirect-uri').value, - embed_tags: document.getElementById('embed-tidal').checked, - tags: _collectServiceTags('tidal') - }, - plex: { - base_url: document.getElementById('plex-url').value, - token: document.getElementById('plex-token').value - }, - jellyfin: { - base_url: document.getElementById('jellyfin-url').value, - api_key: document.getElementById('jellyfin-api-key').value, - api_timeout: parseInt(document.getElementById('jellyfin-timeout').value) || 30 - }, - navidrome: { - base_url: document.getElementById('navidrome-url').value, - username: document.getElementById('navidrome-username').value, - password: document.getElementById('navidrome-password').value - }, - soulseek: { - slskd_url: document.getElementById('soulseek-url').value, - api_key: document.getElementById('soulseek-api-key').value, - download_path: document.getElementById('download-path').value, - transfer_path: document.getElementById('transfer-path').value, - search_timeout: parseInt(document.getElementById('soulseek-search-timeout').value) || 60, - search_timeout_buffer: parseInt(document.getElementById('soulseek-search-timeout-buffer').value) || 15, - min_peer_upload_speed: parseInt(document.getElementById('soulseek-min-peer-speed').value) || 0, - max_peer_queue: parseInt(document.getElementById('soulseek-max-peer-queue').value) || 0, - download_timeout: (parseInt(document.getElementById('soulseek-download-timeout').value) || 10) * 60, - auto_clear_searches: document.getElementById('soulseek-auto-clear-searches').checked - }, - listenbrainz: { - base_url: document.getElementById('listenbrainz-base-url').value, - token: document.getElementById('listenbrainz-token').value, - scrobble_enabled: document.getElementById('listenbrainz-scrobble-enabled').checked, - }, - acoustid: { - api_key: document.getElementById('acoustid-api-key').value, - enabled: document.getElementById('acoustid-enabled').checked - }, - lastfm: { - api_key: document.getElementById('lastfm-api-key').value, - api_secret: document.getElementById('lastfm-api-secret').value, - scrobble_enabled: document.getElementById('lastfm-scrobble-enabled').checked, - embed_tags: document.getElementById('embed-lastfm').checked, - tags: _collectServiceTags('lastfm') - }, - genius: { - access_token: document.getElementById('genius-access-token').value, - embed_tags: document.getElementById('embed-genius').checked, - tags: _collectServiceTags('genius') - }, - itunes: { - country: document.getElementById('itunes-country').value || 'US', - embed_tags: document.getElementById('embed-itunes').checked, - tags: _collectServiceTags('itunes') - }, - discogs: { - token: document.getElementById('discogs-token').value, - }, - metadata: { - fallback_source: document.getElementById('metadata-fallback-source').value || 'itunes' - }, - hydrabase: { - url: document.getElementById('hydrabase-url').value, - api_key: document.getElementById('hydrabase-api-key').value, - auto_connect: document.getElementById('hydrabase-auto-connect').checked - }, - download_source: { - mode: document.getElementById('download-source-mode').value, - hybrid_primary: document.getElementById('hybrid-primary-source').value, - hybrid_secondary: document.getElementById('hybrid-secondary-source').value, - hybrid_order: getHybridOrder(), - stream_source: document.getElementById('stream-source').value, - max_concurrent: parseInt(document.getElementById('max-concurrent-downloads').value) || 3, - }, - tidal_download: { - quality: document.getElementById('tidal-download-quality').value || 'lossless', - allow_fallback: document.getElementById('tidal-allow-fallback').checked, - }, - hifi_download: { - quality: document.getElementById('hifi-download-quality').value || 'lossless', - allow_fallback: document.getElementById('hifi-allow-fallback').checked, - }, - deezer_download: { - quality: document.getElementById('deezer-download-quality').value || 'flac', - arl: document.getElementById('deezer-download-arl').value || '', - allow_fallback: document.getElementById('deezer-allow-fallback').checked, - }, - lidarr_download: { - url: document.getElementById('lidarr-url').value || '', - api_key: document.getElementById('lidarr-api-key').value || '', - }, - qobuz: { - quality: document.getElementById('qobuz-quality').value || 'lossless', - embed_tags: document.getElementById('embed-qobuz').checked, - tags: _collectServiceTags('qobuz'), - allow_fallback: document.getElementById('qobuz-allow-fallback').checked, - }, - database: { - max_workers: parseInt(document.getElementById('max-workers').value) - }, - metadata_enhancement: { - enabled: document.getElementById('metadata-enabled').checked, - embed_album_art: document.getElementById('embed-album-art').checked, - cover_art_download: document.getElementById('cover-art-download').checked, - prefer_caa_art: document.getElementById('prefer-caa-art').checked, - lrclib_enabled: document.getElementById('lrclib-enabled').checked, - tags: { - quality_tag: _getTagConfig('metadata_enhancement.tags.quality_tag'), - genre_merge: _getTagConfig('metadata_enhancement.tags.genre_merge'), - artist_separator: document.getElementById('artist-separator').value, - write_multi_artist: document.getElementById('write-multi-artist').checked, - feat_in_title: document.getElementById('feat-in-title').checked - } - }, - musicbrainz: { - embed_tags: document.getElementById('embed-musicbrainz').checked, - tags: _collectServiceTags('musicbrainz') - }, - deezer: { - app_id: document.getElementById('deezer-app-id').value, - app_secret: document.getElementById('deezer-app-secret').value, - redirect_uri: document.getElementById('deezer-redirect-uri').value, - embed_tags: document.getElementById('embed-deezer').checked, - tags: _collectServiceTags('deezer') - }, - audiodb: { - embed_tags: document.getElementById('embed-audiodb').checked, - tags: _collectServiceTags('audiodb') - }, - file_organization: { - enabled: document.getElementById('file-organization-enabled').checked, - disc_label: document.getElementById('disc-label').value, - collab_artist_mode: document.getElementById('collab-artist-mode').value, - templates: { - album_path: document.getElementById('template-album-path').value, - single_path: document.getElementById('template-single-path').value, - playlist_path: document.getElementById('template-playlist-path').value, - video_path: document.getElementById('template-video-path').value - } - }, - wishlist: { - allow_duplicate_tracks: document.getElementById('allow-duplicate-tracks').checked - }, - playlist_sync: { - create_backup: document.getElementById('create-backup').checked - }, - content_filter: { - allow_explicit: document.getElementById('allow-explicit').checked - }, - genre_whitelist: { - enabled: document.getElementById('genre-whitelist-enabled').checked, - genres: _collectGenreWhitelist(), - }, - post_processing: { - replaygain_enabled: document.getElementById('replaygain-enabled').checked, - }, - library: { - music_paths: collectMusicPaths(), - music_videos_path: document.getElementById('music-videos-path').value || './MusicVideos' - }, - import: { - replace_lower_quality: document.getElementById('import-replace-lower-quality').checked, - staging_path: document.getElementById('staging-path').value || './Staging' - }, - lossy_copy: { - enabled: document.getElementById('lossy-copy-enabled').checked, - codec: document.getElementById('lossy-copy-codec').value, - bitrate: document.getElementById('lossy-copy-bitrate').value, - delete_original: document.getElementById('lossy-copy-delete-original').checked, - downsample_hires: document.getElementById('downsample-hires').checked - }, - listening_stats: { - enabled: document.getElementById('listening-stats-enabled').checked, - poll_interval: parseInt(document.getElementById('listening-stats-interval').value) || 30, - }, - m3u_export: { - enabled: document.getElementById('m3u-export-enabled').checked, - entry_base_path: document.getElementById('m3u-entry-base-path').value || '' - }, - ui_appearance: { - accent_preset: document.getElementById('accent-preset')?.value || '#1db954', - accent_color: document.getElementById('accent-custom-color')?.value || '#1db954', - sidebar_visualizer: document.getElementById('sidebar-visualizer-type')?.value || 'bars', - particles_enabled: document.getElementById('particles-enabled')?.checked !== false, - worker_orbs_enabled: document.getElementById('worker-orbs-enabled')?.checked !== false, - reduce_effects: document.getElementById('reduce-effects-enabled')?.checked === true - }, - youtube: { - cookies_browser: document.getElementById('youtube-cookies-browser').value, - download_delay: parseInt(document.getElementById('youtube-download-delay').value) || 3, - }, - security: { - require_pin_on_launch: document.getElementById('security-require-pin')?.checked || false, - } - }; - - try { - if (!quiet) showLoadingOverlay('Saving settings...'); - - // Save main settings - const response = await fetch(API.settings, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(settings) - }); - - const result = await response.json(); - - // Save quality profile - const qualityProfileSaved = await saveQualityProfile(); - - // Save discovery lookback period - let lookbackSaved = true; - try { - const lookbackPeriod = document.getElementById('discovery-lookback-period').value; - const lookbackResponse = await fetch('/api/discovery/lookback-period', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ period: lookbackPeriod }) - }); - const lookbackResult = await lookbackResponse.json(); - lookbackSaved = lookbackResult.success === true; - } catch (error) { - console.error('Error saving discovery lookback period:', error); - lookbackSaved = false; - } - - // Save hemisphere setting - try { - const hemisphere = document.getElementById('discovery-hemisphere').value; - await fetch('/api/discovery/hemisphere', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ hemisphere }) - }); - } catch (error) { - console.error('Error saving hemisphere setting:', error); - } - - if (result.success && qualityProfileSaved && lookbackSaved) { - showToast(quiet ? 'Settings auto-saved' : 'Settings saved successfully', 'success'); - _forceServiceStatusRefresh(); - _stgRefreshAfterSave(); - } else if (result.success && qualityProfileSaved && !lookbackSaved) { - showToast('Settings saved, but discovery lookback period failed to save', 'warning'); - _forceServiceStatusRefresh(); - _stgRefreshAfterSave(); - } else if (result.success && !qualityProfileSaved) { - showToast('Settings saved, but quality profile failed to save', 'warning'); - _forceServiceStatusRefresh(); - _stgRefreshAfterSave(); - } else { - showToast(`Failed to save settings: ${result.error}`, 'error', 'set-services'); - } - } catch (error) { - console.error('Error saving settings:', error); - showToast('Failed to save settings', 'error', 'set-services'); - } finally { - if (!quiet) hideLoadingOverlay(); - } -} - -async function authorizeLastfmScrobbling() { - try { - // Save settings first so API secret is stored - await saveSettings(); - const resp = await fetch('/api/lastfm/auth-url'); - const data = await resp.json(); - if (data.success && data.url) { - window.open(data.url, '_blank', 'width=600,height=500'); - showToast('Authorize SoulSync in the Last.fm window that opened', 'info'); - } else { - showToast(data.error || 'Could not generate auth URL', 'error'); - } - } catch (e) { - showToast('Failed to start Last.fm authorization', 'error'); - } -} - -async function testConnection(service) { - try { - showLoadingOverlay(`Testing ${service} connection...`); - - const response = await fetch(API.testConnection, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ service }) - }); - - const result = await response.json(); - - if (result.success) { - // Use backend's message which contains dynamic source name - showToast(result.message || `${service} connection successful`, 'success'); - - // Load music libraries after successful connection - if (service === 'plex') { - loadPlexMusicLibraries(); - } else if (service === 'jellyfin') { - loadJellyfinUsers().then(() => loadJellyfinMusicLibraries()); - } else if (service === 'navidrome') { - loadNavidromeMusicFolders(); - } - } else { - showToast(`${service} connection failed: ${result.error}`, 'error', 'gs-connecting'); - } - } catch (error) { - console.error(`Error testing ${service} connection:`, error); - showToast(`Failed to test ${service} connection`, 'error', 'gs-connecting'); - } finally { - hideLoadingOverlay(); - } -} - -async function clearQuarantine() { - if (!await showConfirmDialog({ title: 'Clear Quarantine', message: 'Delete all files in the quarantine folder? This cannot be undone.', confirmText: 'Delete', destructive: true })) return; - try { - showLoadingOverlay('Clearing quarantine folder...'); - const response = await fetch('/api/quarantine/clear', { method: 'POST' }); - const result = await response.json(); - if (result.success) { - showToast(result.message || 'Quarantine cleared', 'success'); - } else { - showToast(`Failed to clear quarantine: ${result.error}`, 'error'); - } - } catch (error) { - console.error('Error clearing quarantine:', error); - showToast('Failed to clear quarantine', 'error'); - } finally { - hideLoadingOverlay(); - } -} - -// ======================== API Key Management ======================== - -async function loadApiKeys() { - const container = document.getElementById('api-keys-list'); - if (!container) return; - - try { - const response = await fetch('/api/v1/api-keys-internal'); - if (response.ok) { - const data = await response.json(); - renderApiKeys(data.data?.keys || []); - } else { - container.innerHTML = 'No API keys configured.
';
- }
- } catch (e) {
- container.innerHTML = 'No API keys configured.
';
- }
-}
-
-function renderApiKeys(keys) {
- const container = document.getElementById('api-keys-list');
- if (!container) return;
-
- if (!keys || keys.length === 0) {
- container.innerHTML = 'No API keys yet. Generate one below.
';
- return;
- }
-
- container.innerHTML = keys.map(k => `
-
-
- `).join('');
-}
-
-async function generateApiKey() {
- const labelInput = document.getElementById('api-key-label');
- const label = labelInput ? labelInput.value.trim() : '';
-
- try {
- const response = await fetch('/api/v1/api-keys-internal/generate', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ label: label || 'Default' })
- });
- const data = await response.json();
-
- if (data.success && data.data?.key) {
- const keyDisplay = document.getElementById('api-key-generated');
- const keyValue = document.getElementById('api-key-value');
- if (keyDisplay && keyValue) {
- keyValue.textContent = data.data.key;
- keyDisplay.style.display = 'block';
- }
- if (labelInput) labelInput.value = '';
- showToast('API key generated! Copy it now.', 'success');
- loadApiKeys();
- } else {
- showToast(data.error?.message || 'Failed to generate API key', 'error');
- }
- } catch (error) {
- console.error('Error generating API key:', error);
- showToast('Failed to generate API key', 'error');
- }
-}
-
-function copyApiKey() {
- const keyValue = document.getElementById('api-key-value');
- if (keyValue) {
- navigator.clipboard.writeText(keyValue.textContent).then(() => {
- showToast('API key copied to clipboard', 'success');
- }).catch(() => {
- // Fallback for older browsers
- const range = document.createRange();
- range.selectNode(keyValue);
- window.getSelection().removeAllRanges();
- window.getSelection().addRange(range);
- document.execCommand('copy');
- showToast('API key copied', 'success');
- });
- }
-}
-
-async function revokeApiKey(keyId, label) {
- if (!await showConfirmDialog({ title: 'Revoke API Key', message: `Revoke API key "${label}"? Any apps using this key will stop working.`, confirmText: 'Revoke', destructive: true })) return;
-
- try {
- const response = await fetch(`/api/v1/api-keys-internal/revoke/${keyId}`, { method: 'DELETE' });
- const data = await response.json();
- if (data.success) {
- showToast('API key revoked', 'success');
- loadApiKeys();
- } else {
- showToast(data.error?.message || 'Failed to revoke key', 'error');
- }
- } catch (error) {
- console.error('Error revoking API key:', error);
- showToast('Failed to revoke key', 'error');
- }
-}
-
-// Dashboard-specific test functions that create activity items
-async function testDashboardConnection(service) {
- try {
- showLoadingOverlay(`Testing ${service} service...`);
-
- const response = await fetch(API.testDashboardConnection, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ service })
- });
-
- const result = await response.json();
-
- if (result.success) {
- // Use backend's message which contains dynamic source name
- showToast(result.message || `${service} service verified`, 'success');
- // Refresh status indicators immediately so UI reflects the new state
- fetchAndUpdateServiceStatus();
- } else {
- showToast(`${service} service check failed: ${result.error}`, 'error');
- }
- } catch (error) {
- console.error(`Error testing ${service} service:`, error);
- showToast(`Failed to test ${service} service`, 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-// Individual Auto-detect functions - same as GUI
-async function autoDetectPlex() {
- try {
- showLoadingOverlay('Auto-detecting Plex server...');
-
- const response = await fetch('/api/detect-media-server', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ server_type: 'plex' })
- });
-
- const result = await response.json();
-
- if (result.success) {
- document.getElementById('plex-url').value = result.found_url;
- showToast(`Plex server detected: ${result.found_url}`, 'success');
- } else {
- showToast(result.error, 'error');
- }
-
- } catch (error) {
- console.error('Error auto-detecting Plex:', error);
- showToast('Failed to auto-detect Plex server', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-async function autoDetectJellyfin() {
- try {
- showLoadingOverlay('Auto-detecting Jellyfin server...');
-
- const response = await fetch('/api/detect-media-server', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ server_type: 'jellyfin' })
- });
-
- const result = await response.json();
-
- if (result.success) {
- document.getElementById('jellyfin-url').value = result.found_url;
- showToast(`Jellyfin server detected: ${result.found_url}`, 'success');
- } else {
- showToast(result.error, 'error');
- }
-
- } catch (error) {
- console.error('Error auto-detecting Jellyfin:', error);
- showToast('Failed to auto-detect Jellyfin server', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-async function autoDetectNavidrome() {
- try {
- showLoadingOverlay('Auto-detecting Navidrome server...');
-
- const response = await fetch('/api/detect-media-server', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ server_type: 'navidrome' })
- });
-
- const result = await response.json();
-
- if (result.success) {
- document.getElementById('navidrome-url').value = result.found_url;
- showToast(`Navidrome server detected: ${result.found_url}`, 'success');
- } else {
- showToast(result.error, 'error');
- }
-
- } catch (error) {
- console.error('Error auto-detecting Navidrome:', error);
- showToast('Failed to auto-detect Navidrome server', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-async function autoDetectSlskd() {
- try {
- showLoadingOverlay('Auto-detecting Soulseek (slskd) server...');
-
- const response = await fetch('/api/detect-soulseek', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' }
- });
-
- const result = await response.json();
-
- if (result.success) {
- document.getElementById('soulseek-url').value = result.found_url;
- showToast(`Soulseek server detected: ${result.found_url}`, 'success');
- } else {
- showToast(result.error, 'error');
- }
-
- } catch (error) {
- console.error('Error auto-detecting Soulseek:', error);
- showToast('Failed to auto-detect Soulseek server', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-
-function cancelDetection(service) {
- const progressDiv = document.getElementById(`${service}-detection-progress`);
- progressDiv.classList.add('hidden');
- showToast(`${service} detection cancelled`, 'error');
-}
-
-function updateStatusDisplays() {
- // Update status displays based on current service status
- // This would be called after status updates
- const services = ['spotify', 'media-server', 'soulseek'];
- services.forEach(service => {
- const display = document.getElementById(`${service}-status-display`);
- if (display) {
- // Status will be updated by the regular status monitoring
- }
- });
-}
-
-async function authenticateSpotify() {
- try {
- showLoadingOverlay('Saving credentials and starting Spotify authentication...');
- // Save settings first to ensure client_id/client_secret are persisted
- await saveSettings();
- showToast('Spotify authentication started', 'success');
- window.open('/auth/spotify', '_blank');
- } catch (error) {
- console.error('Error authenticating Spotify:', error);
- showToast('Failed to start Spotify authentication', 'error', 'gs-connecting');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-async function disconnectSpotify() {
- const fallbackName = currentMusicSourceName !== 'Spotify' ? currentMusicSourceName : 'the configured fallback source';
- if (!await showConfirmDialog({ title: 'Disconnect Spotify', message: `Disconnect Spotify? The app will switch to ${fallbackName} for metadata.` })) {
- return;
- }
- try {
- showLoadingOverlay('Disconnecting Spotify...');
- const response = await fetch('/api/spotify/disconnect', { method: 'POST' });
- const data = await response.json();
- if (data.success) {
- showToast(`Spotify disconnected. Now using ${fallbackName}.`, 'success');
- // Immediately refresh status to update UI
- await fetchAndUpdateServiceStatus();
- } else {
- showToast(`Failed to disconnect: ${data.error}`, 'error');
- }
- } catch (error) {
- console.error('Error disconnecting Spotify:', error);
- showToast('Failed to disconnect Spotify', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-async function clearSpotifyCacheAndFallback() {
- const fallbackName = currentMusicSourceName !== 'Spotify' ? currentMusicSourceName : 'the configured fallback source';
- if (!await showConfirmDialog({
- title: 'Clear Spotify Cache',
- message: `This will clear the Spotify token cache and switch metadata to ${fallbackName}. You can re-authenticate later.`
- })) return;
- try {
- showLoadingOverlay('Clearing Spotify cache...');
- const response = await fetch('/api/spotify/disconnect', { method: 'POST' });
- const data = await response.json();
- if (data.success) {
- showToast(data.message || `Switched to ${fallbackName}`, 'success');
- await fetchAndUpdateServiceStatus();
- } else {
- showToast(`Failed: ${data.error}`, 'error');
- }
- } catch (error) {
- showToast('Failed to clear Spotify cache', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-// ── Spotify Rate Limit Handling ───────────────────────────────────────────
-let _spotifyRateLimitShown = false;
-let _spotifyInCooldown = false;
-let _rateLimitModalOpen = false;
-let _rateLimitCountdownInterval = null;
-let _rateLimitExpiresAt = 0;
-
-function handleSpotifyRateLimit(rateLimitInfo) {
- if (!rateLimitInfo || !rateLimitInfo.active) {
- if (_spotifyRateLimitShown) {
- _spotifyRateLimitShown = false;
- closeRateLimitModal();
- showToast('Spotify access restored', 'success');
- // Refresh discover page if user is on it — data source switched back to Spotify
- if (currentPage === 'discover') {
- console.log('Spotify restored — refreshing discover page data');
- loadDiscoverPage();
- }
- }
- return;
- }
- // Update countdown if modal is open (status pushes every 10s keep it accurate)
- if (_rateLimitModalOpen && rateLimitInfo.remaining_seconds) {
- _rateLimitExpiresAt = Date.now() + (rateLimitInfo.remaining_seconds * 1000);
- }
- if (!_spotifyRateLimitShown) {
- _spotifyRateLimitShown = true;
- _spotifyInCooldown = false;
- showRateLimitModal(rateLimitInfo);
- // Refresh discover page if user is on it — data source switched to iTunes
- if (currentPage === 'discover') {
- console.log('Spotify rate limited — refreshing discover page with iTunes data');
- loadDiscoverPage();
- }
- }
-}
-
-function showRateLimitModal(rateLimitInfo) {
- const overlay = document.getElementById('rate-limit-modal-overlay');
- if (!overlay) return;
-
- // Populate details
- const banDuration = document.getElementById('rate-limit-ban-duration');
- const endpoint = document.getElementById('rate-limit-endpoint');
- const countdown = document.getElementById('rate-limit-countdown');
-
- banDuration.textContent = formatRateLimitDuration(rateLimitInfo.retry_after || rateLimitInfo.remaining_seconds);
- endpoint.textContent = rateLimitInfo.endpoint || 'unknown';
- countdown.textContent = formatRateLimitDuration(rateLimitInfo.remaining_seconds);
-
- // Set expiry for live countdown
- _rateLimitExpiresAt = Date.now() + (rateLimitInfo.remaining_seconds * 1000);
-
- // Start live countdown timer
- if (_rateLimitCountdownInterval) clearInterval(_rateLimitCountdownInterval);
- _rateLimitCountdownInterval = setInterval(() => {
- const remaining = Math.max(0, Math.round((_rateLimitExpiresAt - Date.now()) / 1000));
- countdown.textContent = formatRateLimitDuration(remaining);
- if (remaining <= 0) {
- clearInterval(_rateLimitCountdownInterval);
- _rateLimitCountdownInterval = null;
- }
- }, 1000);
-
- overlay.classList.remove('hidden');
- _rateLimitModalOpen = true;
-}
-
-function closeRateLimitModal() {
- const overlay = document.getElementById('rate-limit-modal-overlay');
- if (overlay) overlay.classList.add('hidden');
- if (_rateLimitCountdownInterval) {
- clearInterval(_rateLimitCountdownInterval);
- _rateLimitCountdownInterval = null;
- }
- _rateLimitModalOpen = false;
-}
-
-async function disconnectSpotifyFromRateLimit() {
- closeRateLimitModal();
- try {
- showLoadingOverlay('Disconnecting Spotify...');
- const response = await fetch('/api/spotify/disconnect', { method: 'POST' });
- const data = await response.json();
- if (data.success) {
- _spotifyRateLimitShown = false;
- showToast(`Spotify disconnected. Now using ${currentMusicSourceName}.`, 'success');
- await fetchAndUpdateServiceStatus();
- if (currentPage === 'discover') {
- loadDiscoverPage();
- }
- } else {
- showToast(`Failed to disconnect: ${data.error}`, 'error');
- }
- } catch (error) {
- console.error('Error disconnecting Spotify:', error);
- showToast('Failed to disconnect Spotify', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-function formatRateLimitDuration(seconds) {
- if (!seconds || seconds <= 0) return '0s';
- const h = Math.floor(seconds / 3600);
- const m = Math.floor((seconds % 3600) / 60);
- const s = seconds % 60;
- if (h > 0) return `${h}h ${m}m`;
- if (m > 0) return `${m}m ${s}s`;
- return `${s}s`;
-}
-
-async function authenticateTidal() {
- try {
- showLoadingOverlay('Saving credentials and starting Tidal authentication...');
- // Save settings first to ensure credentials are persisted
- await saveSettings();
- showToast('Tidal authentication started', 'success');
- window.open('/auth/tidal', '_blank');
- } catch (error) {
- console.error('Error authenticating Tidal:', error);
- showToast('Failed to start Tidal authentication', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-async function authenticateDeezer() {
- try {
- showLoadingOverlay('Saving credentials and starting Deezer authentication...');
- await saveSettings();
- showToast('Deezer authentication started', 'success');
- window.open('/auth/deezer', '_blank');
- } catch (error) {
- console.error('Error authenticating Deezer:', error);
- showToast('Failed to start Deezer authentication', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-// ===== Tidal Download Auth (Device Flow) =====
-
-async function testHiFiConnection() {
- const statusEl = document.getElementById('hifi-connection-status');
- const btn = document.getElementById('hifi-test-btn');
- if (!statusEl) return;
- statusEl.textContent = 'Checking...';
- statusEl.style.color = '#aaa';
- try {
- const resp = await fetch('/api/hifi/status');
- const data = await resp.json();
- if (data.available) {
- statusEl.textContent = `Connected (v${data.version || '?'})`;
- statusEl.style.color = '#4caf50';
- } else {
- statusEl.textContent = 'No instances reachable';
- statusEl.style.color = '#ff9800';
- }
- } catch (e) {
- statusEl.textContent = 'Connection error';
- statusEl.style.color = '#f44336';
- }
-}
-
-async function testLidarrConnection() {
- const statusEl = document.getElementById('lidarr-connection-status');
- if (!statusEl) return;
- statusEl.textContent = 'Checking...';
- statusEl.style.color = '#aaa';
- try {
- // Save settings first so the backend has the URL/key
- await saveSettings();
- const resp = await fetch('/api/test-connection', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ service: 'lidarr' })
- });
- const data = await resp.json();
- if (data.success) {
- statusEl.textContent = 'Connected';
- statusEl.style.color = '#4caf50';
- } else {
- statusEl.textContent = data.error || 'Connection failed';
- statusEl.style.color = '#f44336';
- }
- } catch (e) {
- statusEl.textContent = 'Connection error';
- statusEl.style.color = '#f44336';
- }
-}
-
-async function checkHiFiInstances() {
- const panel = document.getElementById('hifi-instances-panel');
- const btn = document.getElementById('hifi-instances-check-btn');
- if (!panel) return;
- panel.style.display = 'block';
- panel.innerHTML = '
-
-
- ${k.label || 'Unnamed'}
-
-
- ${k.key_prefix || 'sk_...'}...
- · Created ${k.created_at ? new Date(k.created_at).toLocaleDateString() : 'unknown'}
- ${k.last_used_at ? '· Last used ' + new Date(k.last_used_at).toLocaleDateString() : ''}
- Checking instances...
';
- if (btn) { btn.disabled = true; btn.textContent = 'Checking...'; }
- try {
- const resp = await fetch('/api/hifi/instances');
- const data = await resp.json();
- if (!data.instances || data.instances.length === 0) {
- panel.innerHTML = 'No instances configured.
';
- return;
- }
- const _statusIcon = (inst) => {
- if (inst.can_download) return '● Download';
- if (inst.can_search) return '● Search only';
- if (inst.status === 'online') return '● Online (limited)';
- if (inst.status === 'ssl_error') return '● SSL error';
- if (inst.status === 'timeout') return '● Timeout';
- if (inst.status === 'offline') return '● Offline';
- return `● ${escapeHtml(inst.status)}`;
- };
- panel.innerHTML = data.instances.map(inst => {
- const isActive = inst.url === data.active;
- const ver = inst.version ? ` v${inst.version}` : '';
- const activeTag = isActive ? ' (ACTIVE)' : '';
- return `
-
- ${_statusIcon(inst)}
-
`;
- }).join('');
- } catch (e) {
- panel.innerHTML = `Error checking instances: ${escapeHtml(e.message)}
`;
- } finally {
- if (btn) { btn.disabled = false; btn.textContent = 'Check All Instances'; }
- }
-}
-
-async function testDeezerDownloadConnection() {
- const statusEl = document.getElementById('deezer-download-status');
- if (!statusEl) return;
- statusEl.textContent = 'Checking...';
- statusEl.style.color = '#aaa';
- try {
- // Save the ARL first so the backend can use it
- const arl = document.getElementById('deezer-download-arl')?.value || '';
- if (!arl) {
- statusEl.textContent = 'No ARL token provided';
- statusEl.style.color = '#ff9800';
- return;
- }
- const resp = await fetch('/api/deezer-download/test', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ arl }),
- });
- const data = await resp.json();
- if (data.success) {
- statusEl.textContent = `Connected as ${data.user || 'Unknown'} (${data.tier || 'Free'})`;
- statusEl.style.color = '#4caf50';
- } else {
- statusEl.textContent = data.error || 'Authentication failed';
- statusEl.style.color = '#f44336';
- }
- } catch (e) {
- statusEl.textContent = 'Connection error';
- statusEl.style.color = '#f44336';
- }
-}
-
-async function checkTidalDownloadAuthStatus() {
- const statusEl = document.getElementById('tidal-download-auth-status');
- const btn = document.getElementById('tidal-download-auth-btn');
- try {
- const resp = await fetch('/api/tidal/download/auth/status');
- const data = await resp.json();
- if (data.authenticated) {
- statusEl.textContent = 'Authenticated';
- statusEl.style.color = '#4caf50';
- btn.textContent = 'Re-link Tidal Account';
- } else {
- statusEl.textContent = 'Not authenticated';
- statusEl.style.color = '#ff9800';
- btn.textContent = 'Link Tidal Account';
- }
- } catch (e) {
- statusEl.textContent = '';
- }
-}
-
-let _tidalAuthPollTimer = null;
-
-async function startTidalDownloadAuth() {
- const btn = document.getElementById('tidal-download-auth-btn');
- const statusEl = document.getElementById('tidal-download-auth-status');
- const codeEl = document.getElementById('tidal-download-auth-code');
-
- btn.disabled = true;
- btn.textContent = 'Starting...';
- statusEl.textContent = '';
-
- try {
- const resp = await fetch('/api/tidal/download/auth/start', { method: 'POST' });
- const data = await resp.json();
-
- if (!resp.ok || !data.success) {
- throw new Error(data.error || 'Failed to start auth');
- }
-
- // Show the link/code to the user
- const uri = data.verification_uri || '';
- const code = data.user_code || '';
- codeEl.style.display = 'block';
- codeEl.innerHTML = `Go to ${uri} and enter code: ${code}`;
- btn.textContent = 'Waiting for approval...';
- statusEl.textContent = 'Waiting...';
- statusEl.style.color = '#ff9800';
-
- // Poll for completion
- if (_tidalAuthPollTimer) clearInterval(_tidalAuthPollTimer);
- _tidalAuthPollTimer = setInterval(async () => {
- try {
- const checkResp = await fetch('/api/tidal/download/auth/check');
- const checkData = await checkResp.json();
-
- if (checkData.status === 'completed') {
- clearInterval(_tidalAuthPollTimer);
- _tidalAuthPollTimer = null;
- codeEl.style.display = 'none';
- statusEl.textContent = 'Authenticated';
- statusEl.style.color = '#4caf50';
- btn.disabled = false;
- btn.textContent = 'Re-link Tidal Account';
- showToast('Tidal download account linked successfully', 'success');
- } else if (checkData.status === 'error') {
- clearInterval(_tidalAuthPollTimer);
- _tidalAuthPollTimer = null;
- codeEl.style.display = 'none';
- statusEl.textContent = 'Auth failed';
- statusEl.style.color = '#f44336';
- btn.disabled = false;
- btn.textContent = 'Link Tidal Account';
- showToast('Tidal auth failed: ' + (checkData.message || 'Unknown error'), 'error');
- }
- // status === 'pending' — keep polling
- } catch (pollErr) {
- console.error('Tidal auth poll error:', pollErr);
- }
- }, 3000);
-
- } catch (error) {
- console.error('Tidal download auth error:', error);
- showToast('Failed to start Tidal auth: ' + error.message, 'error');
- btn.disabled = false;
- btn.textContent = 'Link Tidal Account';
- codeEl.style.display = 'none';
- }
-}
-
-// ===============================
-// QOBUZ AUTH FUNCTIONS
-// ===============================
-
-async function checkQobuzAuthStatus() {
- try {
- const resp = await fetch('/api/qobuz/auth/status');
- const data = await resp.json();
-
- // Update downloads tab section
- const formEl = document.getElementById('qobuz-auth-form');
- const loggedInEl = document.getElementById('qobuz-auth-logged-in');
- const userInfoEl = document.getElementById('qobuz-auth-user-info');
-
- // Update connections tab section
- const connFormEl = document.getElementById('qobuz-connection-form');
- const connLoggedInEl = document.getElementById('qobuz-connection-logged-in');
- const connUserInfoEl = document.getElementById('qobuz-connection-user-info');
-
- if (data.authenticated) {
- const user = data.user || {};
- const label = `Connected: ${user.display_name || 'Qobuz User'} (${user.subscription || 'Active'})`;
-
- if (userInfoEl) { userInfoEl.textContent = label; }
- if (loggedInEl) loggedInEl.style.display = 'flex';
- if (formEl) formEl.style.display = 'none';
-
- if (connUserInfoEl) { connUserInfoEl.textContent = label; }
- if (connLoggedInEl) connLoggedInEl.style.display = 'flex';
- if (connFormEl) connFormEl.style.display = 'none';
- } else {
- if (loggedInEl) loggedInEl.style.display = 'none';
- if (formEl) formEl.style.display = 'block';
-
- if (connLoggedInEl) connLoggedInEl.style.display = 'none';
- if (connFormEl) connFormEl.style.display = 'block';
- }
- } catch (e) {
- console.error('Qobuz auth status check failed:', e);
- }
-}
-
-async function loginQobuzFromConnections() {
- const btn = document.getElementById('qobuz-connection-login-btn');
- const statusEl = document.getElementById('qobuz-connection-status');
- const email = document.getElementById('qobuz-connection-email').value.trim();
- const password = document.getElementById('qobuz-connection-password').value;
-
- if (!email || !password) {
- showToast('Please enter your Qobuz email and password', 'warning');
- return;
- }
-
- btn.disabled = true;
- btn.textContent = 'Connecting...';
- statusEl.textContent = '';
-
- try {
- const resp = await fetch('/api/qobuz/auth/login', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ email, password }),
- });
- const data = await resp.json();
-
- if (data.success) {
- showToast('Qobuz connected successfully!', 'success');
- document.getElementById('qobuz-connection-password').value = '';
- checkQobuzAuthStatus();
- } else {
- statusEl.textContent = data.error || 'Login failed';
- statusEl.style.color = '#ff5555';
- showToast(data.error || 'Qobuz login failed', 'error');
- }
- } catch (error) {
- console.error('Qobuz login error:', error);
- statusEl.textContent = 'Connection error';
- statusEl.style.color = '#ff5555';
- showToast('Failed to connect to Qobuz', 'error');
- } finally {
- btn.disabled = false;
- btn.textContent = 'Connect Qobuz';
- }
-}
-
-async function loginQobuzWithToken() {
- const btn = document.getElementById('qobuz-token-login-btn');
- const statusEl = document.getElementById('qobuz-token-status');
- const token = document.getElementById('qobuz-connection-token').value.trim();
-
- if (!token) {
- showToast('Please paste your Qobuz auth token', 'warning');
- return;
- }
-
- btn.disabled = true;
- btn.textContent = 'Connecting...';
- if (statusEl) statusEl.textContent = '';
-
- try {
- const resp = await fetch('/api/qobuz/auth/token', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ token }),
- });
- const data = await resp.json();
-
- if (data.success) {
- showToast('Qobuz connected via token!', 'success');
- document.getElementById('qobuz-connection-token').value = '';
- checkQobuzAuthStatus();
- } else {
- if (statusEl) { statusEl.textContent = data.error || 'Token login failed'; statusEl.style.color = '#ff5555'; }
- showToast(data.error || 'Qobuz token login failed', 'error');
- }
- } catch (error) {
- console.error('Qobuz token login error:', error);
- if (statusEl) { statusEl.textContent = 'Connection error'; statusEl.style.color = '#ff5555'; }
- showToast('Failed to connect to Qobuz', 'error');
- } finally {
- btn.disabled = false;
- btn.textContent = 'Connect with Token';
- }
-}
-
-async function loginQobuzWithTokenFromDownloads() {
- const btn = document.getElementById('qobuz-download-token-btn');
- const statusEl = document.getElementById('qobuz-download-token-status');
- const token = document.getElementById('qobuz-download-token').value.trim();
-
- if (!token) {
- showToast('Please paste your Qobuz auth token', 'warning');
- return;
- }
-
- btn.disabled = true;
- btn.textContent = 'Connecting...';
- if (statusEl) statusEl.textContent = '';
-
- try {
- const resp = await fetch('/api/qobuz/auth/token', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ token }),
- });
- const data = await resp.json();
-
- if (data.success) {
- showToast('Qobuz connected via token!', 'success');
- document.getElementById('qobuz-download-token').value = '';
- checkQobuzAuthStatus();
- } else {
- if (statusEl) { statusEl.textContent = data.error || 'Token login failed'; statusEl.style.color = '#ff5555'; }
- showToast(data.error || 'Qobuz token login failed', 'error');
- }
- } catch (error) {
- console.error('Qobuz token login error:', error);
- if (statusEl) { statusEl.textContent = 'Connection error'; statusEl.style.color = '#ff5555'; }
- showToast('Failed to connect to Qobuz', 'error');
- } finally {
- btn.disabled = false;
- btn.textContent = 'Connect with Token';
- }
-}
-
-async function loginQobuz() {
- const btn = document.getElementById('qobuz-login-btn');
- const statusEl = document.getElementById('qobuz-auth-status');
- const email = document.getElementById('qobuz-email').value.trim();
- const password = document.getElementById('qobuz-password').value;
-
- if (!email || !password) {
- showToast('Please enter your Qobuz email and password', 'warning');
- return;
- }
-
- btn.disabled = true;
- btn.textContent = 'Connecting...';
- statusEl.textContent = '';
-
- try {
- const resp = await fetch('/api/qobuz/auth/login', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ email, password }),
- });
-
- const data = await resp.json();
-
- if (data.success) {
- showToast('Qobuz connected successfully!', 'success');
- // Clear password field
- document.getElementById('qobuz-password').value = '';
- checkQobuzAuthStatus();
- } else {
- statusEl.textContent = data.error || 'Login failed';
- statusEl.style.color = '#ff5555';
- showToast(data.error || 'Qobuz login failed', 'error');
- }
- } catch (error) {
- console.error('Qobuz login error:', error);
- statusEl.textContent = 'Connection error';
- statusEl.style.color = '#ff5555';
- showToast('Failed to connect to Qobuz', 'error');
- } finally {
- btn.disabled = false;
- btn.textContent = 'Connect Qobuz';
- }
-}
-
-async function logoutQobuz() {
- try {
- await fetch('/api/qobuz/auth/logout', { method: 'POST' });
- showToast('Qobuz disconnected', 'success');
- checkQobuzAuthStatus();
- } catch (e) {
- console.error('Qobuz logout error:', e);
- }
-}
-
-const PATH_INPUT_IDS = {
- download: 'download-path',
- transfer: 'transfer-path',
- staging: 'staging-path',
- 'music-videos': 'music-videos-path',
- 'm3u-entry-base': 'm3u-entry-base-path'
-};
-
-function togglePathLock(pathType, btn) {
- const input = document.getElementById(PATH_INPUT_IDS[pathType]);
- if (!input) return;
- const isLocked = input.hasAttribute('readonly');
- if (isLocked) {
- input.removeAttribute('readonly');
- input.focus();
- btn.textContent = 'Lock';
- btn.classList.remove('locked');
- } else {
- input.setAttribute('readonly', '');
- btn.textContent = 'Unlock';
- btn.classList.add('locked');
- }
-}
-
-
-// ===============================
-// SEARCH FUNCTIONALITY
-// ===============================
-
-function initializeSearch() {
- // --- FIX: Corrected the element IDs to match the HTML ---
- const searchInput = document.getElementById('downloads-search-input');
- const searchButton = document.getElementById('downloads-search-btn');
-
- // Add this line to get the cancel button
- const cancelButton = document.getElementById('downloads-cancel-btn');
-
- if (searchButton && searchInput) {
- searchButton.addEventListener('click', performDownloadsSearch);
- searchInput.addEventListener('keypress', (e) => {
- if (e.key === 'Enter') performDownloadsSearch();
- });
- }
-
- // Add this event listener for the cancel button
- if (cancelButton) {
- cancelButton.addEventListener('click', () => {
- if (searchAbortController) {
- searchAbortController.abort(); // This cancels the fetch request
- console.log("Search cancelled by user.");
- }
- });
- }
-}
-
-// ===============================
-// SEARCH MODE TOGGLE
-// ===============================
-
-let searchModeToggleInitialized = false;
-
-function initializeSearchModeToggle() {
- // Only initialize once to prevent duplicate event listeners
- if (searchModeToggleInitialized) {
- console.log('Search mode toggle already initialized, skipping...');
- return;
- }
-
- const toggleContainer = document.querySelector('.search-mode-toggle');
- const modeBtns = document.querySelectorAll('.search-mode-btn');
- const basicSection = document.getElementById('basic-search-section');
- const enhancedSection = document.getElementById('enhanced-search-section');
-
- if (!toggleContainer || !modeBtns.length || !basicSection || !enhancedSection) {
- console.warn('Search mode toggle elements not found');
- return;
- }
-
- searchModeToggleInitialized = true;
- console.log('✅ Initializing search mode toggle (first time only)');
-
- modeBtns.forEach(btn => {
- btn.addEventListener('click', () => {
- const mode = btn.dataset.mode;
-
- // Update button active states
- modeBtns.forEach(b => b.classList.remove('active'));
- btn.classList.add('active');
-
- // Update toggle slider position
- toggleContainer.setAttribute('data-active', mode);
-
- // Toggle sections
- if (mode === 'basic') {
- basicSection.classList.add('active');
- enhancedSection.classList.remove('active');
- console.log('Switched to basic search mode');
- } else {
- basicSection.classList.remove('active');
- enhancedSection.classList.add('active');
- console.log('Switched to enhanced search mode');
- }
- });
- });
-
- // Initialize enhanced search
- const enhancedInput = document.getElementById('enhanced-search-input');
- const enhancedSearchBtn = document.getElementById('enhanced-search-btn');
- const enhancedCancelBtn = document.getElementById('enhanced-cancel-btn');
- const enhancedDropdown = document.getElementById('enhanced-dropdown');
- const loadingState = document.getElementById('enhanced-loading');
- const emptyState = document.getElementById('enhanced-empty');
- const resultsContainer = document.getElementById('enhanced-results-container');
-
- let debounceTimer = null;
- let abortController = null;
-
- // Multi-source search state
- let _enhancedSearchData = null; // Full response with all sources
- let _activeSearchSource = null; // Currently displayed source tab
- let _altSourceController = null; // AbortController for alternate source fetches
-
- const SOURCE_LABELS = {
- spotify: { text: 'Spotify', tabClass: 'enh-tab-spotify', badgeClass: 'enh-badge-spotify' },
- itunes: { text: 'Apple Music', tabClass: 'enh-tab-itunes', badgeClass: 'enh-badge-itunes' },
- deezer: { text: 'Deezer', tabClass: 'enh-tab-deezer', badgeClass: 'enh-badge-deezer' },
- discogs: { text: 'Discogs', tabClass: 'enh-tab-discogs', badgeClass: 'enh-badge-discogs' },
- hydrabase: { text: 'Hydrabase', tabClass: 'enh-tab-hydrabase', badgeClass: 'enh-badge-hydrabase' },
- youtube_videos: { text: 'Music Videos', tabClass: 'enh-tab-youtube', badgeClass: 'enh-badge-youtube' },
- musicbrainz: { text: 'MusicBrainz', tabClass: 'enh-tab-musicbrainz', badgeClass: 'enh-badge-musicbrainz' },
- };
-
- // Live search with debouncing
- if (enhancedInput) {
- enhancedInput.addEventListener('input', (e) => {
- const query = e.target.value.trim();
-
- // Show/hide cancel button
- if (enhancedCancelBtn) {
- enhancedCancelBtn.classList.toggle('hidden', query.length === 0);
- }
-
- // Clear debounce timer
- clearTimeout(debounceTimer);
-
- // Hide dropdown if query too short
- if (query.length < 2) {
- hideDropdown();
- return;
- }
-
- // Debounce search
- debounceTimer = setTimeout(() => {
- performEnhancedSearch(query);
- }, 300);
- });
-
- enhancedInput.addEventListener('keypress', (e) => {
- if (e.key === 'Enter') {
- const query = e.target.value.trim();
- if (query.length >= 2) {
- clearTimeout(debounceTimer);
- performEnhancedSearch(query);
- }
- }
- });
- }
-
- if (enhancedSearchBtn) {
- enhancedSearchBtn.addEventListener('click', (e) => {
- // Prevent click from bubbling to document (which would close the dropdown)
- e.stopPropagation();
-
- // Get fresh references (in case we navigated away and back)
- const dropdown = document.getElementById('enhanced-dropdown');
- const results = document.getElementById('enhanced-results-container');
-
- if (!dropdown) return;
-
- // Toggle the dropdown visibility to show/hide previous search results
- if (dropdown.classList.contains('hidden')) {
- // Check if there are results to show by looking for actual content
- const hasResults = results &&
- !results.classList.contains('hidden') &&
- results.children.length > 0;
-
- if (hasResults) {
- showDropdown();
- } else {
- showToast('No previous results to show. Type to search!', 'info');
- }
- } else {
- hideDropdown();
- }
- });
- }
-
- if (enhancedCancelBtn) {
- enhancedCancelBtn.addEventListener('click', () => {
- enhancedInput.value = '';
- enhancedCancelBtn.classList.add('hidden');
- hideDropdown();
- });
- }
-
- // Close button inside dropdown (mobile)
- const dropdownCloseBtn = document.getElementById('enhanced-dropdown-close');
- if (dropdownCloseBtn) {
- dropdownCloseBtn.addEventListener('click', (e) => {
- e.stopPropagation();
- hideDropdown();
- });
- }
-
- // Close dropdown when clicking outside
- document.addEventListener('click', (e) => {
- const dropdown = document.getElementById('enhanced-dropdown');
- if (dropdown && !dropdown.classList.contains('hidden')) {
- const isClickInside = e.target.closest('.enhanced-search-input-wrapper');
- if (!isClickInside) {
- hideDropdown();
- }
- }
- });
-
- async function performEnhancedSearch(query) {
- console.log('Enhanced search:', query);
- const searchId = Date.now() + Math.random();
-
- // Show loading state with correct source name
- showDropdown();
- const loadingText = document.getElementById('enhanced-loading-text');
- if (loadingText) {
- loadingText.textContent = `Searching across ${currentMusicSourceName} and your library...`;
- }
- loadingState.classList.remove('hidden');
- emptyState.classList.add('hidden');
- resultsContainer.classList.add('hidden');
-
- // Abort previous requests (primary + alternates)
- if (abortController) {
- abortController.abort();
- }
- if (_altSourceController) {
- _altSourceController.abort();
- }
- abortController = new AbortController();
- _altSourceController = new AbortController();
-
- // Initialize multi-source state early so alternate fetches can write to it
- _enhancedSearchData = { db_artists: [], primary_source: null, sources: {}, searchId, query };
-
- try {
- const response = await fetch('/api/enhanced-search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ query }),
- signal: abortController.signal
- });
-
- if (!response.ok) throw new Error('Search failed');
-
- const data = await response.json();
- console.log('Enhanced results:', data);
-
- // Store multi-source state
- const primarySource = data.primary_source || data.metadata_source || 'deezer';
- _activeSearchSource = primarySource;
- _enhancedSearchData = _enhancedSearchData || {};
- _enhancedSearchData.db_artists = data.db_artists;
- _enhancedSearchData.primary_source = primarySource;
- if (!_enhancedSearchData.sources) _enhancedSearchData.sources = {};
- _enhancedSearchData.sources[primarySource] = {
- artists: data.spotify_artists || [],
- albums: data.spotify_albums || [],
- tracks: data.spotify_tracks || [],
- available: true,
- };
-
- // Calculate total from primary source
- const total = (data.db_artists?.length || 0) +
- (data.spotify_artists?.length || 0) +
- (data.spotify_albums?.length || 0) +
- (data.spotify_tracks?.length || 0);
-
- // Hide loading
- loadingState.classList.add('hidden');
-
- if (total === 0) {
- emptyState.classList.remove('hidden');
- } else {
- renderSourceTabs(_enhancedSearchData);
- renderDropdownResults(data);
- resultsContainer.classList.remove('hidden');
- }
-
- // Alternate sources now start after the primary response has landed.
- // This avoids speculative fan-out for short or aborted searches.
- _queueAlternateSourceFetches(data.alternate_sources || [], query, searchId);
-
- } catch (error) {
- if (error.name !== 'AbortError') {
- console.error('Enhanced search error:', error);
- loadingState.classList.add('hidden');
- emptyState.classList.remove('hidden');
- }
- }
- }
-
- function renderDropdownResults(data) {
- // Music Videos tab — don't render regular sections
- if (_activeSearchSource === 'youtube_videos') return;
-
- // Determine source badge from active tab (not just primary)
- const displaySource = _activeSearchSource || data.metadata_source || 'spotify';
- const sourceInfo = SOURCE_LABELS[displaySource] || SOURCE_LABELS.spotify;
- const sourceBadge = { text: sourceInfo.text, class: sourceInfo.badgeClass };
-
- // Render DB Artists
- renderCompactSection(
- 'enh-db-artists-section',
- 'enh-db-artists-list',
- 'enh-db-artists-count',
- data.db_artists || [],
- (artist) => ({
- image: artist.image_url,
- placeholder: '📚',
- name: artist.name,
- meta: 'In Your Library',
- badge: { text: 'Library', class: 'enh-badge-library' },
- onClick: () => {
- console.log(`🎵 Opening library artist detail: ${artist.name} (ID: ${artist.id})`);
- hideDropdown();
- navigateToArtistDetail(artist.id, artist.name);
- }
- })
- );
-
- // Render Artists (source-aware badge)
- renderCompactSection(
- 'enh-spotify-artists-section',
- 'enh-spotify-artists-list',
- 'enh-spotify-artists-count',
- data.spotify_artists || [],
- (artist) => ({
- image: artist.image_url,
- placeholder: '🎤',
- name: artist.name,
- meta: 'Artist',
- badge: sourceBadge,
- onClick: async () => {
- const sourceOverride = _activeSearchSource;
- console.log(`🎵 Opening artist detail: ${artist.name} (ID: ${artist.id}, source: ${sourceOverride})`);
- hideDropdown();
-
- // Navigate to Artists page
- navigateToPage('artists');
-
- // Small delay to let the page load
- await new Promise(resolve => setTimeout(resolve, 100));
-
- // Load the artist details with source context
- await selectArtistForDetail(artist, {
- source: sourceOverride,
- plugin: artist.external_urls?.hydrabase_plugin,
- });
- }
- })
- );
-
- // Split albums from singles/EPs (albums is the catch-all for unknown types)
- const allAlbums = data.spotify_albums || [];
- const singlesAndEPs = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
- const albums = allAlbums.filter(a => a.album_type !== 'single' && a.album_type !== 'ep');
-
- // Render Albums
- renderCompactSection(
- 'enh-albums-section',
- 'enh-albums-list',
- 'enh-albums-count',
- albums,
- (album) => ({
- image: album.image_url,
- placeholder: '💿',
- name: album.name,
- meta: `${album.artist} • ${album.release_date ? album.release_date.substring(0, 4) : 'N/A'}`,
- onClick: () => handleEnhancedSearchAlbumClick(album)
- })
- );
-
- // Render Singles & EPs
- renderCompactSection(
- 'enh-singles-section',
- 'enh-singles-list',
- 'enh-singles-count',
- singlesAndEPs,
- (album) => ({
- image: album.image_url,
- placeholder: '🎶',
- name: album.name,
- meta: `${album.artist} • ${album.release_date ? album.release_date.substring(0, 4) : 'N/A'}`,
- onClick: () => handleEnhancedSearchAlbumClick(album)
- })
- );
-
- // Render Tracks
- renderCompactSection(
- 'enh-tracks-section',
- 'enh-tracks-list',
- 'enh-tracks-count',
- data.spotify_tracks || [],
- (track) => {
- const duration = formatDuration(track.duration_ms);
- return {
- image: track.image_url,
- placeholder: '🎵',
- name: track.name,
- meta: `${track.artist} • ${track.album}`,
- duration: duration,
- onClick: () => handleEnhancedSearchTrackClick(track),
- onPlay: () => streamEnhancedSearchTrack(track)
- };
- }
- );
-
- // Lazy load artist images that are missing
- lazyLoadEnhancedSearchArtistImages();
-
- // Async library ownership check — doesn't block rendering
- _checkSearchResultsLibraryOwnership(data);
- }
-
- async function _checkSearchResultsLibraryOwnership(data) {
- try {
- const allAlbums = data.spotify_albums || [];
- const allTracks = data.spotify_tracks || [];
- if (!allAlbums.length && !allTracks.length) return;
-
- const resp = await fetch('/api/enhanced-search/library-check', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- albums: allAlbums.map(a => ({ name: a.name, artist: a.artist })),
- tracks: allTracks.map(t => ({ name: t.name, artist: t.artist })),
- }),
- });
- const result = await resp.json();
-
- // Tag album cards with staggered animation
- const albumCards = document.querySelectorAll('#enh-albums-list .enh-compact-item, #enh-singles-list .enh-compact-item');
- const albumResults = result.albums || [];
- let delay = 0;
- albumCards.forEach((card, i) => {
- if (albumResults[i]) {
- setTimeout(() => {
- const badge = document.createElement('div');
- badge.className = 'enh-item-lib-badge';
- badge.textContent = 'In Library';
- card.appendChild(badge);
- }, delay);
- delay += 30;
- }
- });
-
- // Tag track rows + wire up library playback
- const trackCards = document.querySelectorAll('#enh-tracks-list .enh-compact-item');
- const trackResults = result.tracks || [];
- trackCards.forEach((card, i) => {
- const tr = trackResults[i];
- if (tr && tr.in_library) {
- setTimeout(() => {
- const badge = document.createElement('div');
- badge.className = 'enh-item-lib-badge';
- badge.textContent = 'In Library';
- card.appendChild(badge);
-
- // Replace stream button to play from library instead of searching
- if (tr.file_path) {
- const playBtn = card.querySelector('.enh-item-play-btn');
- if (playBtn) {
- const newBtn = playBtn.cloneNode(true);
- newBtn.title = 'Play from library';
- newBtn.textContent = '▶';
- const trackInfo = tr;
- newBtn.addEventListener('click', (e) => {
- e.stopPropagation();
- playLibraryTrack(
- { id: trackInfo.track_id, title: trackInfo.title, file_path: trackInfo.file_path, _stats_image: trackInfo.album_thumb_url || null },
- trackInfo.album_title || '',
- trackInfo.artist_name || ''
- );
- });
- playBtn.replaceWith(newBtn);
- }
- }
- }, delay);
- delay += 30;
- } else if (tr && tr.in_wishlist) {
- setTimeout(() => {
- if (!card.querySelector('.enh-item-wishlist-badge')) {
- const badge = document.createElement('div');
- badge.className = 'enh-item-wishlist-badge';
- badge.textContent = 'In Wishlist';
- card.appendChild(badge);
- }
- }, delay);
- delay += 30;
- }
- });
- } catch (e) {
- console.debug('Library check failed:', e);
- }
- }
-
- function _queueAlternateSourceFetches(alternateSources, query, searchId) {
- if (!Array.isArray(alternateSources) || alternateSources.length === 0) return;
-
- // Fetch metadata sources first, then YouTube last so it does not compete
- // with the primary artist/album/track results for early attention.
- const orderedSources = ['spotify', 'itunes', 'deezer', 'discogs', 'musicbrainz', 'hydrabase', 'youtube_videos']
- .filter(src => alternateSources.includes(src) && src !== _activeSearchSource);
-
- orderedSources.forEach((src, index) => {
- setTimeout(() => {
- if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
- _fetchAlternateSource(src, query, searchId);
- }, index * 150);
- });
- }
-
- async function _fetchAlternateSource(sourceName, query, searchId) {
- try {
- if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
-
- const response = await fetch(`/api/enhanced-search/source/${sourceName}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ query }),
- signal: _altSourceController?.signal,
- });
- if (!response.ok) return;
- if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
-
- // Stream NDJSON — render each search type (artists, albums, tracks) as it arrives
- if (!_enhancedSearchData.sources[sourceName]) {
- const loadingSet = sourceName === 'youtube_videos' ? new Set(['videos']) : new Set(['artists', 'albums', 'tracks']);
- _enhancedSearchData.sources[sourceName] = { artists: [], albums: [], tracks: [], videos: [], available: true, _loading: loadingSet };
- }
- const sourceData = _enhancedSearchData.sources[sourceName];
-
- const reader = response.body.getReader();
- const decoder = new TextDecoder();
- let buffer = '';
-
- while (true) {
- const { done, value } = await reader.read();
- if (done) break;
- buffer += decoder.decode(value, { stream: true });
-
- let newlineIdx;
- while ((newlineIdx = buffer.indexOf('\n')) !== -1) {
- const line = buffer.slice(0, newlineIdx).trim();
- buffer = buffer.slice(newlineIdx + 1);
- if (!line) continue;
- if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
-
- try {
- const chunk = JSON.parse(line);
- if (chunk.type === 'artists') { sourceData.artists = chunk.data; if (sourceData._loading) sourceData._loading.delete('artists'); }
- else if (chunk.type === 'albums') { sourceData.albums = chunk.data; if (sourceData._loading) sourceData._loading.delete('albums'); }
- else if (chunk.type === 'tracks') { sourceData.tracks = chunk.data; if (sourceData._loading) sourceData._loading.delete('tracks'); }
- else if (chunk.type === 'videos') { sourceData.videos = chunk.data; if (sourceData._loading) sourceData._loading.delete('videos'); }
- else if (chunk.type === 'done') { delete sourceData._loading; break; }
-
- // Re-render tabs + content if this is the active source
- if (_enhancedSearchData.primary_source) {
- renderSourceTabs(_enhancedSearchData);
- if (_activeSearchSource === sourceName) {
- window._switchEnhSourceTab(sourceName);
- }
- }
- } catch (parseErr) {
- console.debug(`NDJSON parse error for ${sourceName}:`, parseErr);
- }
- }
- }
-
- // Final render
- if (_enhancedSearchData && _enhancedSearchData.searchId === searchId && _enhancedSearchData.primary_source) {
- renderSourceTabs(_enhancedSearchData);
- }
- } catch (e) {
- if (e.name !== 'AbortError') {
- console.debug(`Alternate source ${sourceName} failed:`, e);
- }
- }
- }
-
- function renderSourceTabs(data) {
- const tabBar = document.getElementById('enh-source-tabs');
- if (!tabBar) return;
-
- const sources = data.sources || {};
- const primary = data.primary_source || 'spotify';
-
- // Build tab list: primary first, then alternates sorted alphabetically.
- // Hide completed zero-result sources so the bar stays focused.
- const sourceNames = Object.keys(sources).filter(s => sources[s].available);
- const visibleSources = sourceNames.filter(name => {
- const src = sources[name] || {};
- const count = name === 'youtube_videos'
- ? (src.videos?.length || 0)
- : (src.artists?.length || 0) + (src.albums?.length || 0) + (src.tracks?.length || 0);
- const isLoading = !!(src._loading && src._loading.size > 0);
- return isLoading || count > 0 || name === _activeSearchSource;
- });
- if (visibleSources.length <= 1) {
- tabBar.classList.add('hidden');
- tabBar.innerHTML = '';
- return;
- }
-
- // Primary tab first, then others
- const ordered = [primary, ...visibleSources.filter(s => s !== primary).sort()];
-
- tabBar.innerHTML = ordered.map(name => {
- const info = SOURCE_LABELS[name] || { text: name, tabClass: '' };
- const src = sources[name] || {};
- const count = name === 'youtube_videos'
- ? (src.videos?.length || 0)
- : (src.artists?.length || 0) + (src.albums?.length || 0) + (src.tracks?.length || 0);
- const isActive = name === _activeSearchSource;
- return ``;
- }).join('');
-
- tabBar.classList.remove('hidden');
- }
-
- // Expose tab switch globally (onclick from HTML)
- window._switchEnhSourceTab = function (sourceName) {
- if (!_enhancedSearchData || !_enhancedSearchData.sources) return;
- const src = _enhancedSearchData.sources[sourceName];
- if (!src) return;
-
- _activeSearchSource = sourceName;
-
- // Update tab active states
- document.querySelectorAll('.enh-source-tab').forEach(tab => {
- tab.classList.toggle('active', tab.dataset.source === sourceName);
- });
-
- // Music Videos tab — render video cards instead of regular sections
- if (sourceName === 'youtube_videos') {
- // Hide ALL regular sections including wrappers
- ['enh-db-artists-section', 'enh-spotify-artists-section', 'enh-albums-section', 'enh-singles-section', 'enh-tracks-section'].forEach(id => {
- const el = document.getElementById(id);
- if (el) el.classList.add('hidden');
- });
- // Hide the artists wrapper div too
- const artistsWrapper = document.querySelector('.enh-artists-wrapper');
- if (artistsWrapper) artistsWrapper.style.display = 'none';
- _renderVideoResults(src.videos || []);
- resultsContainer.classList.remove('hidden');
- return;
- }
-
- // Hide videos section and restore regular layout when switching to a metadata tab
- const videosSec = document.getElementById('enh-videos-section');
- if (videosSec) videosSec.classList.add('hidden');
- const artistsWrapper = document.querySelector('.enh-artists-wrapper');
- if (artistsWrapper) artistsWrapper.style.display = '';
-
- // Build data in the shape renderDropdownResults expects
- const viewData = {
- db_artists: _enhancedSearchData.db_artists,
- spotify_artists: src.artists || [],
- spotify_albums: src.albums || [],
- spotify_tracks: src.tracks || [],
- metadata_source: sourceName,
- };
-
- renderDropdownResults(viewData);
- resultsContainer.classList.remove('hidden');
-
- // Show loading spinners for categories still streaming
- if (src._loading && src._loading.size > 0) {
- const loadingHtml = 'Loading...
';
- if (src._loading.has('artists')) {
- const sec = document.getElementById('enh-spotify-artists-section');
- if (sec) { sec.classList.remove('hidden'); document.getElementById('enh-spotify-artists-list').innerHTML = loadingHtml; }
- }
- if (src._loading.has('albums')) {
- const sec = document.getElementById('enh-albums-section');
- if (sec) { sec.classList.remove('hidden'); document.getElementById('enh-albums-list').innerHTML = loadingHtml; }
- const sec2 = document.getElementById('enh-singles-section');
- if (sec2) { sec2.classList.remove('hidden'); document.getElementById('enh-singles-list').innerHTML = loadingHtml; }
- }
- if (src._loading.has('tracks')) {
- const sec = document.getElementById('enh-tracks-section');
- if (sec) { sec.classList.remove('hidden'); document.getElementById('enh-tracks-list').innerHTML = loadingHtml; }
- }
- }
- };
-
- function _renderVideoResults(videos) {
- let section = document.getElementById('enh-videos-section');
- if (!section) {
- // Create the section dynamically if it doesn't exist
- const container = document.getElementById('enhanced-results-container');
- if (!container) return;
- section = document.createElement('div');
- section.id = 'enh-videos-section';
- section.className = 'enh-dropdown-section';
- section.innerHTML = `
-
-
-
-
- `;
- container.appendChild(section);
- }
-
- section.classList.remove('hidden');
- const countEl = document.getElementById('enh-videos-count');
- const listEl = document.getElementById('enh-videos-list');
- if (countEl) countEl.textContent = videos.length;
-
- if (!videos.length) {
- listEl.innerHTML = 'Music Videos
- 0 -No music videos found
';
- return;
- }
-
- listEl.innerHTML = videos.map(v => {
- const duration = v.duration ? `${Math.floor(v.duration / 60)}:${String(v.duration % 60).padStart(2, '0')}` : '';
- const views = v.view_count ? _formatViewCount(v.view_count) : '';
- return `
-
-
- `;
- }).join('');
- }
-
- function _formatViewCount(count) {
- if (count >= 1000000000) return `${(count / 1000000000).toFixed(1)}B`;
- if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
- if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
- return String(count);
- }
-
- // Lazy load artist images for enhanced search results
- async function lazyLoadEnhancedSearchArtistImages() {
- const artistLists = [
- document.getElementById('enh-db-artists-list'),
- document.getElementById('enh-spotify-artists-list')
- ];
-
- for (const list of artistLists) {
- if (!list) continue;
-
- const cardsNeedingImages = list.querySelectorAll('[data-needs-image="true"]');
- if (cardsNeedingImages.length === 0) continue;
-
- console.log(`🖼️ Lazy loading ${cardsNeedingImages.length} artist images in enhanced search`);
-
- for (const card of cardsNeedingImages) {
- const artistId = card.dataset.artistId;
- if (!artistId) continue;
-
- try {
- const imgUrl = _activeSearchSource && _activeSearchSource !== 'spotify'
- ? `/api/artist/${artistId}/image?source=${_activeSearchSource}`
- : `/api/artist/${artistId}/image`;
- const response = await fetch(imgUrl);
- const data = await response.json();
-
- if (data.success && data.image_url) {
- // Find the placeholder and replace with image
- const placeholder = card.querySelector('.enh-item-image-placeholder');
- if (placeholder) {
- const img = document.createElement('img');
- img.src = data.image_url;
- img.className = 'enh-item-image artist-image';
- img.alt = card.querySelector('.enh-item-name')?.textContent || 'Artist';
- placeholder.replaceWith(img);
-
- // Apply dynamic glow
- extractImageColors(data.image_url, (colors) => {
- applyDynamicGlow(card, colors);
- });
- }
- card.dataset.needsImage = 'false';
- console.log(`✅ Loaded image for artist ${artistId}`);
- }
- } catch (error) {
- console.warn(`⚠️ Failed to load image for artist ${artistId}:`, error);
- }
- }
- }
- }
-
- function formatDuration(durationMs) {
- if (!durationMs) return '';
- const totalSeconds = Math.floor(durationMs / 1000);
- const minutes = Math.floor(totalSeconds / 60);
- const seconds = totalSeconds % 60;
- return `${minutes}:${seconds.toString().padStart(2, '0')}`;
- }
-
- function renderCompactSection(sectionId, listId, countId, items, mapItem) {
- const section = document.getElementById(sectionId);
- const list = document.getElementById(listId);
- const count = document.getElementById(countId);
-
- if (!list) return;
-
- list.innerHTML = '';
-
- if (!items || items.length === 0) {
- section.classList.add('hidden');
- return;
- }
-
- section.classList.remove('hidden');
- count.textContent = items.length;
-
- // Determine type based on section ID
- const isArtist = sectionId.includes('artists');
- const isAlbum = sectionId.includes('albums') || sectionId.includes('singles');
- const isTrack = sectionId.includes('tracks');
-
- // Add appropriate grid class to list
- if (isArtist) {
- list.classList.add('enh-artists-grid');
- } else if (isAlbum) {
- list.classList.add('enh-albums-grid');
- } else if (isTrack) {
- list.classList.add('enh-tracks-list');
- }
-
- items.forEach(item => {
- const config = mapItem(item);
- const elem = document.createElement('div');
-
- // Add appropriate card class
- if (isArtist) {
- elem.className = 'enh-compact-item artist-card';
- // Add data attributes for lazy loading
- if (item.id) {
- elem.dataset.artistId = item.id;
- elem.dataset.needsImage = config.image ? 'false' : 'true';
- }
- } else if (isAlbum) {
- elem.className = 'enh-compact-item album-card';
- } else if (isTrack) {
- elem.className = 'enh-compact-item track-item';
- }
-
- // Build image HTML with type-specific classes
- let imageClass = 'enh-item-image';
- let placeholderClass = 'enh-item-image-placeholder';
-
- if (isArtist) {
- imageClass += ' artist-image';
- placeholderClass += ' artist-placeholder';
- } else if (isAlbum) {
- imageClass += ' album-cover';
- placeholderClass += ' album-placeholder';
- } else if (isTrack) {
- imageClass += ' track-cover';
- placeholderClass += ' track-placeholder';
- }
-
- const imageHtml = config.image
- ? `
-
-
- ▶
-
-
-
- ${duration ? `${duration}` : ''}
-
-
- ${v.title}
- ${v.channel}${views ? ` · ${views} views` : ''}
- ${config.placeholder}
`;
-
- const badgeHtml = config.badge
- ? `${config.badge.text}
`
- : '';
-
- const durationHtml = config.duration && isTrack
- ? `
- ${escapeHtml(config.duration)}
-
-
`
- : '';
-
- elem.innerHTML = `
- ${imageHtml}
-
-
- ${durationHtml}
- ${badgeHtml}
- `;
-
- elem.addEventListener('click', config.onClick);
-
- // Add play button handler for tracks
- if (isTrack && config.onPlay) {
- const playBtn = elem.querySelector('.enh-item-play-btn');
- if (playBtn) {
- playBtn.addEventListener('click', (e) => {
- e.stopPropagation(); // Don't trigger main onClick
- config.onPlay();
- });
- }
- }
-
- list.appendChild(elem);
-
- // Extract colors from image for dynamic glow effect
- if (config.image) {
- extractImageColors(config.image, (colors) => {
- applyDynamicGlow(elem, colors);
- });
- }
- });
- }
-
- async function handleEnhancedSearchAlbumClick(album) {
- console.log(`💿 Enhanced search album clicked: ${album.name} by ${album.artist}`);
-
- hideDropdown();
- showLoadingOverlay('Loading album...');
-
- try {
- // Fetch full album data with tracks — pass source for correct routing
- const albumParams = new URLSearchParams({ name: album.name || '', artist: album.artist || '' });
- if (_activeSearchSource && _activeSearchSource !== 'spotify') {
- albumParams.set('source', _activeSearchSource);
- }
- // Pass Hydrabase plugin origin so server routes to correct client
- if (album.external_urls?.hydrabase_plugin) {
- albumParams.set('plugin', album.external_urls.hydrabase_plugin);
- }
- const response = await fetch(`/api/spotify/album/${album.id}?${albumParams}`);
-
- if (!response.ok) {
- if (response.status === 401) {
- throw new Error('Spotify not authenticated. Please check your API settings.');
- }
- throw new Error(`Failed to load album: ${response.status}`);
- }
-
- const albumData = await response.json();
-
- if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
- hideLoadingOverlay();
- showToast(`No tracks available for "${album.name}". This release may have been delisted or is not available in your region.`, 'warning');
- return;
- }
-
- console.log(`✅ Loaded ${albumData.tracks.length} tracks for ${albumData.name}`);
-
- // Create virtual playlist ID for enhanced search albums
- const virtualPlaylistId = `enhanced_search_album_${album.id}`;
-
- // Check if modal already exists and show it
- if (activeDownloadProcesses[virtualPlaylistId]) {
- console.log(`📱 Reopening existing modal for ${album.name}`);
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process.modalElement) {
- if (process.status === 'complete') {
- showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
- }
- process.modalElement.style.display = 'flex';
- hideLoadingOverlay();
- return;
- }
- }
-
- // Enrich each track with full album object (needed for wishlist functionality)
- const enrichedTracks = albumData.tracks.map(track => ({
- ...track,
- album: {
- name: albumData.name,
- id: albumData.id,
- album_type: albumData.album_type || 'album',
- images: albumData.images || [],
- release_date: albumData.release_date,
- total_tracks: albumData.total_tracks
- }
- }));
-
- console.log(`📦 Enriched ${enrichedTracks.length} tracks with album metadata`);
-
- // Format playlist name
- const playlistName = `[${album.artist}] ${albumData.name}`;
-
- // Create artist object for the modal — extract ID from album data
- const firstArtist = (albumData.artists || [])[0] || {};
- const artistObject = {
- id: firstArtist.id || album.id?.split?.('_')?.[0] || '',
- name: firstArtist.name || album.artist,
- image_url: firstArtist.image_url || firstArtist.images?.[0]?.url || '',
- source: _activeSearchSource || '',
- };
-
- // Prepare full album object for modal
- const fullAlbumObject = {
- name: albumData.name,
- id: albumData.id,
- album_type: albumData.album_type || 'album',
- images: albumData.images || [],
- release_date: albumData.release_date,
- total_tracks: albumData.total_tracks,
- artists: albumData.artists || [{ name: album.artist }]
- };
-
- // Open download missing tracks modal
- await openDownloadMissingModalForArtistAlbum(
- virtualPlaylistId,
- playlistName,
- enrichedTracks,
- fullAlbumObject,
- artistObject,
- false // Don't show loading overlay, we already have one
- );
-
- // Register this download in search bubbles
- registerSearchDownload(
- {
- id: album.id,
- name: albumData.name,
- artist: album.artist,
- image_url: albumData.images?.[0]?.url || null,
- images: albumData.images || []
- },
- 'album',
- virtualPlaylistId,
- album.artist // artistName for grouping
- );
-
- hideLoadingOverlay();
-
- } catch (error) {
- hideLoadingOverlay();
- console.error('❌ Error handling enhanced search album click:', error);
- showToast(`Error opening album: ${error.message}`, 'error');
- }
- }
-
- async function streamEnhancedSearchTrack(track) {
- console.log(`▶️ Stream enhanced search track: ${track.name} by ${track.artist}`);
-
- hideDropdown();
- showLoadingOverlay(`Searching for ${track.name}...`);
-
- try {
- // Send track metadata to backend for quick slskd search
- const response = await fetch('/api/enhanced-search/stream-track', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- track_name: track.name,
- artist_name: track.artist,
- album_name: track.album,
- duration_ms: track.duration_ms
- })
- });
-
- if (!response.ok) {
- const errorData = await response.json();
- throw new Error(errorData.error || 'Failed to search for track');
- }
-
- const data = await response.json();
-
- if (!data.success || !data.result) {
- throw new Error('No suitable track found');
- }
-
- const slskdResult = data.result;
-
- // Check if audio format is supported (YouTube/Tidal use encoded filenames, skip check)
- const isStreamingSource = slskdResult.username === 'youtube' || slskdResult.username === 'tidal' || slskdResult.username === 'qobuz' || slskdResult.username === 'hifi';
- if (!isStreamingSource && slskdResult.filename && !isAudioFormatSupported(slskdResult.filename)) {
- const format = getFileExtension(slskdResult.filename);
- hideLoadingOverlay();
- showToast(`Sorry, ${format.toUpperCase()} format is not supported in your browser. Try downloading instead.`, 'error');
- return;
- }
-
- console.log(`✅ Found track to stream:`, slskdResult);
- console.log(`🎵 Track details - Username: ${slskdResult.username}, Filename: ${slskdResult.filename}`);
-
- hideLoadingOverlay();
-
- // Use existing startStream function to play the track
- console.log(`📡 Calling startStream() with result...`);
- await startStream(slskdResult);
- console.log(`✅ startStream() completed`);
-
- } catch (error) {
- hideLoadingOverlay();
- console.error('❌ Error streaming enhanced search track:', error);
- showToast(`Failed to stream track: ${error.message}`, 'error');
- }
- }
-
- async function handleEnhancedSearchTrackClick(track) {
- console.log(`🎵 Enhanced search track clicked: ${track.name} by ${track.artist}`);
-
- hideDropdown();
- showLoadingOverlay('Loading track...');
-
- try {
- // Create virtual playlist ID for enhanced search tracks
- const virtualPlaylistId = `enhanced_search_track_${track.id}`;
-
- // Check if modal already exists and show it
- if (activeDownloadProcesses[virtualPlaylistId]) {
- console.log(`📱 Reopening existing modal for ${track.name}`);
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process.modalElement) {
- if (process.status === 'complete') {
- showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
- }
- process.modalElement.style.display = 'flex';
- hideLoadingOverlay();
- return;
- }
- }
-
- // Enrich track with album object (needed for wishlist functionality)
- const enrichedTrack = {
- id: track.id,
- name: track.name,
- artists: [track.artist], // Convert string to array for modal compatibility
- album: {
- name: track.album,
- id: null,
- album_type: 'single',
- images: track.image_url ? [{ url: track.image_url }] : [],
- release_date: track.release_date || null,
- total_tracks: 1
- },
- duration_ms: track.duration_ms,
- popularity: track.popularity || 0,
- preview_url: track.preview_url || null,
- external_urls: track.external_urls || null,
- image_url: track.image_url
- };
-
- console.log(`📦 Enriched track with album metadata`);
-
- // Format playlist name
- const playlistName = `${track.artist} - ${track.name}`;
-
- // Create minimal artist object for the modal
- const artistObject = {
- id: null,
- name: track.artist
- };
-
- // Prepare album object for modal (single track)
- const albumObject = {
- name: track.album,
- id: null,
- album_type: 'single',
- images: track.image_url ? [{ url: track.image_url }] : [],
- release_date: track.release_date || null,
- total_tracks: 1,
- artists: [{ name: track.artist }]
- };
-
- // Open download missing tracks modal with single track
- await openDownloadMissingModalForArtistAlbum(
- virtualPlaylistId,
- playlistName,
- [enrichedTrack], // Array with single track
- albumObject,
- artistObject,
- false
- );
-
- // Register this download in search bubbles
- registerSearchDownload(
- {
- id: track.id,
- name: track.name,
- artist: track.artist,
- image_url: track.image_url,
- images: track.image_url ? [{ url: track.image_url }] : []
- },
- 'track',
- virtualPlaylistId,
- track.artist // artistName for grouping
- );
-
- hideLoadingOverlay();
-
- } catch (error) {
- hideLoadingOverlay();
- console.error('❌ Error handling enhanced search track click:', error);
- showToast(`Error opening track: ${error.message}`, 'error');
- }
- }
-
- async function searchSlskdFor(type, item) {
- const mainResultsArea = document.getElementById('enhanced-main-results-area');
- if (!mainResultsArea) return;
-
- // Show loading in main results area
- mainResultsArea.innerHTML = `
- ${escapeHtml(config.name)}
-
-
-
-
- `;
-
- const query = `${item.artist} ${item.name}`;
-
- try {
- const response = await fetch('/api/search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ query })
- });
-
- const data = await response.json();
-
- if (data.error) {
- showToast(`Search error: ${data.error}`, 'error');
- return;
- }
-
- // Filter results
- const filtered = data.results.filter(r => r.result_type === type);
-
- // Render slskd results in main area
- renderSlskdInMainArea(filtered, type, item);
-
- } catch (error) {
- console.error('Slskd search error:', error);
- showToast('Search failed', 'error');
- mainResultsArea.innerHTML = 'Searching for ${type === 'album' ? 'album' : 'track'}...
-Search failed. Please try again.
No matches found for this ' + type + '.
-
- `;
- }).join('');
-
- // Attach download handlers
- mainResultsArea.querySelectorAll('.download-result-btn').forEach(btn => {
- btn.addEventListener('click', async function () {
- const result = JSON.parse(this.dataset.result);
- const type = this.dataset.type;
-
- this.disabled = true;
- this.textContent = 'Downloading...';
-
- try {
- const downloadData = type === 'album'
- ? { result_type: 'album', tracks: result.tracks || [] }
- : { result_type: 'track', username: result.username, filename: result.filename, size: result.size };
-
- const response = await fetch('/api/download', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(downloadData)
- });
-
- const data = await response.json();
-
- if (data.error) {
- showToast(`Download error: ${data.error}`, 'error');
- this.disabled = false;
- this.innerHTML = '💾 Download';
- } else {
- showToast('Download started!', 'success');
- this.innerHTML = '✅ Added';
- }
- } catch (error) {
- console.error('Download error:', error);
- showToast('Download failed', 'error');
- this.disabled = false;
- this.innerHTML = '💾 Download';
- }
- });
- });
- }
-
- function showDropdown() {
- const dropdown = document.getElementById('enhanced-dropdown');
- if (dropdown) {
- dropdown.classList.remove('hidden');
- updateToggleButtonState();
- }
- // Hide the page header + search mode toggle to reclaim space
- const header = document.querySelector('#downloads-page .downloads-header');
- const modeToggle = document.querySelector('.search-mode-toggle-container');
- const slskdPlaceholder = document.querySelector('#enhanced-search-section .search-results-container');
- if (header) header.classList.add('enh-results-active-hide');
- if (modeToggle) modeToggle.classList.add('enh-results-active-hide');
- if (slskdPlaceholder) slskdPlaceholder.classList.add('enh-results-active-hide');
- }
-
- function hideDropdown() {
- const dropdown = document.getElementById('enhanced-dropdown');
- if (dropdown) {
- dropdown.classList.add('hidden');
- updateToggleButtonState();
- }
- // Restore hidden elements
- const header = document.querySelector('#downloads-page .downloads-header');
- const modeToggle = document.querySelector('.search-mode-toggle-container');
- const slskdPlaceholder = document.querySelector('#enhanced-search-section .search-results-container');
- if (header) header.classList.remove('enh-results-active-hide');
- if (modeToggle) modeToggle.classList.remove('enh-results-active-hide');
- if (slskdPlaceholder) slskdPlaceholder.classList.remove('enh-results-active-hide');
- }
-
- function updateToggleButtonState() {
- // Get fresh references
- const btn = document.getElementById('enhanced-search-btn');
- const dropdown = document.getElementById('enhanced-dropdown');
-
- if (!btn || !dropdown) return;
-
- const btnIcon = btn.querySelector('.btn-icon');
- const btnText = btn.querySelector('.btn-text');
-
- if (dropdown.classList.contains('hidden')) {
- // Dropdown is hidden - button should say "Show Results"
- if (btnIcon) btnIcon.textContent = '👁️';
- if (btnText) btnText.textContent = 'Show Results';
- } else {
- // Dropdown is visible - button should say "Hide Results"
- if (btnIcon) btnIcon.textContent = '🙈';
- if (btnText) btnText.textContent = 'Hide Results';
- }
- }
-}
-
-async function performSearch() {
- const query = document.getElementById('search-input').value.trim();
- if (!query) {
- showToast('Please enter a search term', 'error');
- return;
- }
-
- try {
- showLoadingOverlay('Searching...');
- displaySearchResults([]); // Clear previous results
-
- const response = await fetch(API.search, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ query })
- });
-
- const data = await response.json();
-
- if (data.error) {
- showToast(`Search error: ${data.error}`, 'error');
- return;
- }
-
- searchResults = data.results || [];
- displaySearchResults(searchResults);
-
- if (searchResults.length === 0) {
- showToast('No results found', 'error');
- } else {
- showToast(`Found ${searchResults.length} results`, 'success');
- }
-
- } catch (error) {
- console.error('Error performing search:', error);
- showToast('Search failed', 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-function displaySearchResults(results) {
- const resultsContainer = document.getElementById('search-results');
-
- if (!results.length) {
- resultsContainer.innerHTML = '
-
-
- ${escapeHtml(title)}
- -No search results
';
- return;
- }
-
- resultsContainer.innerHTML = results.map((result, index) => {
- const isAlbum = result.type === 'album';
- const sizeText = isAlbum ?
- `${result.track_count || 0} tracks, ${(result.size_mb || 0).toFixed(1)} MB` :
- `${(result.file_size / 1024 / 1024).toFixed(1)} MB, ${result.bitrate || 0}kbps`;
-
- return `
-
-
- `;
- }).join('');
-}
-
-function selectResult(index) {
- const result = searchResults[index];
- if (!result) return;
-
- console.log('Selected result:', result);
- // Could show detailed view or additional actions here
-}
-
-
-async function startDownload(index) {
- const result = searchResults[index];
- if (!result) return;
-
- try {
- const response = await fetch('/api/downloads/start', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(result)
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast('Download started', 'success');
- } else {
- showToast(`Download failed: ${data.error}`, 'error');
- }
- } catch (error) {
- console.error('Error starting download:', error);
- showToast('Failed to start download', 'error');
- }
-}
-
-// ===============================
-// PAGE DATA LOADING
-// ===============================
-
-async function loadInitialData() {
- try {
- // Load artist bubble state first
- await hydrateArtistBubblesFromSnapshot();
-
- // Load search bubble state
- await hydrateSearchBubblesFromSnapshot();
-
- // Load discover download state
- await hydrateDiscoverDownloadsFromSnapshot();
-
- // Navigate to user's home page (or dashboard for admin)
- const homePage = getProfileHomePage();
- const urlPage = _getPageFromPath();
- const targetPage = (urlPage && urlPage !== 'dashboard' && isPageAllowed(urlPage))
- ? urlPage
- : homePage;
-
- history.replaceState({ page: targetPage }, '', (targetPage === 'dashboard' ? '/' : '/' + targetPage) + window.location.search + window.location.hash);
-
- if (targetPage !== 'dashboard') {
- navigateToPage(targetPage, { skipPushState: true });
- } else {
- await loadDashboardData();
- loadDashboardSyncHistory();
- }
- } catch (error) {
- console.error('Error loading initial data:', error);
- }
-}
-
-async function loadDashboardData() {
- try {
- const response = await fetch(API.activity);
- const data = await response.json();
-
- const activityFeed = document.getElementById('activity-feed');
- if (data.activities && data.activities.length) {
- activityFeed.innerHTML = data.activities.map(activity => `
-
-
-
-
- ${escapeHtml(result.title)}
- ${escapeHtml(result.artist)}
- ${result.album ? `${escapeHtml(result.album)}
` : ''}
-
-
-
-
-
- ${sizeText}
- by ${escapeHtml(result.username)}
- ${result.quality ? `${escapeHtml(result.quality)}` : ''}
-
-
- ${activity.time}
- ${escapeHtml(activity.text)}
-
- `).join('');
- }
-
- // Initialize wishlist count when dashboard loads
- await updateWishlistCount();
-
- // Start periodic refresh of wishlist count (every 30 seconds, matching GUI behavior)
- stopWishlistCountPolling(); // Ensure no duplicates
- wishlistCountInterval = setInterval(updateWishlistCount, 30000);
-
- } catch (error) {
- console.error('Error loading dashboard data:', error);
- }
-}
-
-// ===========================================
-// == SYNC PAGE SPOTIFY FUNCTIONALITY ==
-// ===========================================
-
-async function loadSyncData() {
- // This is called when the sync page is navigated to.
- // Load server playlists first (default active tab)
- if (!window._serverPlaylistsLoaded) {
- window._serverPlaylistsLoaded = true;
- loadServerPlaylists(); // Don't await — load in background
- }
-
- if (!spotifyPlaylistsLoaded) {
- await loadSpotifyPlaylists();
- }
-
- // Load YouTube playlists from backend (always refresh to get latest state)
- await loadYouTubePlaylistsFromBackend();
-
- // Render saved URL histories for YouTube, Deezer, Spotify Link tabs
- initUrlHistories();
-}
-
-async function ensureBeatportContentLoaded() {
- if (beatportContentState.loaded) {
- showBeatportDownloadsSection();
- return true;
- }
-
- if (beatportContentState.loadingPromise) {
- return beatportContentState.loadingPromise;
- }
-
- beatportContentState.abortController = new AbortController();
- beatportContentState.loadingPromise = (async () => {
- try {
- console.log('🎧 Lazy-loading Beatport content...');
-
- await hydrateBeatportBubblesFromSnapshot();
- throwIfBeatportLoadAborted();
- await loadBeatportChartsFromBackend();
- throwIfBeatportLoadAborted();
-
- initializeBeatportRebuildSlider();
- initializeBeatportReleasesSlider();
- initializeBeatportHypePicksSlider();
- initializeBeatportChartsSlider();
- initializeBeatportDJSlider();
- throwIfBeatportLoadAborted();
- await Promise.all([
- loadBeatportTop10Lists(),
- loadBeatportTop10Releases()
- ]);
- throwIfBeatportLoadAborted();
- showBeatportDownloadsSection();
-
- beatportContentState.loaded = true;
- console.log('✅ Beatport content loaded');
- return true;
- } catch (error) {
- if (error && error.name === 'AbortError') {
- console.log('⏹ Beatport content load aborted');
- return false;
- }
- console.error('❌ Error loading Beatport content:', error);
- return false;
- } finally {
- beatportContentState.loadingPromise = null;
- if (beatportContentState.abortController && beatportContentState.abortController.signal.aborted) {
- beatportContentState.abortController = null;
- }
- }
- })();
-
- return beatportContentState.loadingPromise;
-}
-
-async function checkForActiveProcesses() {
- try {
- const response = await fetch('/api/active-processes');
- if (!response.ok) return;
-
- const data = await response.json();
- const processes = data.active_processes || [];
-
- if (processes.length > 0) {
- console.log(`🔄 Found ${processes.length} active process(es) from backend. Rehydrating UI...`);
-
- // Separate download batch processes from YouTube playlist processes
- const downloadProcesses = processes.filter(p => p.type === 'batch');
- const youtubeProcesses = processes.filter(p => p.type === 'youtube_playlist');
-
- console.log(`📊 Process breakdown: ${downloadProcesses.length} download batches, ${youtubeProcesses.length} YouTube playlists`);
-
- // Rehydrate download modal processes (existing Spotify system)
- for (const processInfo of downloadProcesses) {
- if (!activeDownloadProcesses[processInfo.playlist_id]) {
- rehydrateModal(processInfo);
- }
- }
-
- // Note: YouTube playlists are handled by loadYouTubePlaylistsFromBackend() and rehydrateYouTubePlaylist()
- // in loadSyncData(), which provides more complete data than active processes and handles download modal rehydration.
- console.log(`ℹ️ Skipping ${youtubeProcesses.length} YouTube playlists - handled by full backend loading`);
- }
- } catch (error) {
- console.error('Failed to check for active processes:', error);
- }
-}
-
-async function rehydrateArtistAlbumModal(virtualPlaylistId, playlistName, batchId) {
- /**
- * Rehydrates an artist album download modal from backend process data.
- * Extracts artist/album info from virtual playlist ID and recreates the modal.
- */
- try {
- console.log(`💧 Rehydrating artist album modal: ${virtualPlaylistId} (${playlistName})`);
-
- // Extract artist_id and album_id from virtualPlaylistId format: artist_album_[artist_id]_[album_id]
- const parts = virtualPlaylistId.split('_');
- if (parts.length < 4 || parts[0] !== 'artist' || parts[1] !== 'album') {
- console.error(`❌ Invalid virtual playlist ID format: ${virtualPlaylistId}`);
- return;
- }
-
- const artistId = parts[2];
- const albumId = parts.slice(3).join('_'); // Handle album IDs that might contain underscores
-
- console.log(`🔍 Extracted from virtual playlist: artistId=${artistId}, albumId=${albumId}`);
-
- // Fetch the album tracks to get proper artist and album data
- try {
- const response = await fetch(`/api/album/${albumId}/tracks`);
- const data = await response.json();
-
- if (!data.success || !data.album || !data.tracks) {
- console.error('❌ Failed to fetch album data for rehydration:', data.error);
- return;
- }
-
- const album = data.album;
- const tracks = data.tracks;
-
- // Extract artist info from the first track (all tracks should have same artist)
- const artist = {
- id: artistId,
- name: tracks[0].artists[0] // Use first artist name from first track
- };
-
- console.log(`✅ Retrieved album data: "${album.name}" by ${artist.name} (${tracks.length} tracks)`);
-
- // Create the modal using the same function as normal artist album downloads
- await openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlistName, tracks, album, artist);
-
- // Update the rehydrated process with batch info and hide modal for background rehydration
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = batchId;
- subscribeToDownloadBatch(batchId);
-
- // Update button states to reflect running status
- const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
- const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${virtualPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
- if (wishlistBtn) wishlistBtn.style.display = 'none';
-
- // Hide the modal - this is background rehydration, not user-requested
- if (process.modalElement) {
- process.modalElement.style.display = 'none';
- console.log(`🔍 Hiding rehydrated modal for background processing: ${album.name}`);
- }
-
- console.log(`✅ Rehydrated artist album modal: ${artist.name} - ${album.name}`);
- } else {
- console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
- }
-
- } catch (error) {
- console.error(`❌ Error fetching album data for rehydration:`, error);
- }
-
- } catch (error) {
- console.error(`❌ Error rehydrating artist album modal:`, error);
- }
-}
-
-async function rehydrateDiscoverPlaylistModal(virtualPlaylistId, playlistName, batchId) {
- /**
- * Rehydrates a discover playlist download modal from backend process data.
- * Fetches tracks from the appropriate discover API endpoint and recreates the modal.
- */
- try {
- console.log(`💧 Rehydrating discover playlist modal: ${virtualPlaylistId} (${playlistName})`);
-
- // Handle album downloads from Recent Releases
- if (virtualPlaylistId.startsWith('discover_album_')) {
- const albumId = virtualPlaylistId.replace('discover_album_', '');
- console.log(`💧 Album download - fetching album ${albumId}...`);
-
- try {
- const albumResponse = await fetch(`/api/spotify/album/${albumId}`);
- if (!albumResponse.ok) {
- console.error(`❌ Failed to fetch album: ${albumResponse.status}`);
- return;
- }
-
- const albumData = await albumResponse.json();
- if (!albumData.tracks || albumData.tracks.length === 0) {
- console.error(`❌ No tracks in album`);
- return;
- }
-
- // Convert tracks to expected format
- const spotifyTracks = albumData.tracks.map(track => {
- let artists = track.artists || [];
- if (Array.isArray(artists)) {
- artists = artists.map(a => a.name || a);
- }
-
- return {
- id: track.id,
- name: track.name,
- artists: artists,
- album: {
- name: albumData.name || playlistName.split(' - ')[0],
- images: albumData.images || []
- },
- duration_ms: track.duration_ms || 0
- };
- });
-
- console.log(`✅ Retrieved ${spotifyTracks.length} tracks for album`);
-
- // Create modal
- await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
- // Update process
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = batchId;
- subscribeToDownloadBatch(batchId);
- const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Hide modal for background rehydration
- if (process.modalElement) {
- process.modalElement.style.display = 'none';
- console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
- }
-
- console.log(`✅ Rehydrated album modal: ${playlistName}`);
- }
- return;
-
- } catch (error) {
- console.error(`❌ Error fetching album:`, error);
- return;
- }
- }
-
- // Determine API endpoint based on playlist ID
- let apiEndpoint;
- if (virtualPlaylistId === 'discover_release_radar') {
- apiEndpoint = '/api/discover/release-radar';
- } else if (virtualPlaylistId === 'discover_discovery_weekly') {
- apiEndpoint = '/api/discover/discovery-weekly';
- } else if (virtualPlaylistId === 'discover_seasonal_playlist') {
- apiEndpoint = '/api/discover/seasonal-playlist';
- } else if (virtualPlaylistId === 'discover_popular_picks') {
- apiEndpoint = '/api/discover/popular-picks';
- } else if (virtualPlaylistId === 'discover_hidden_gems') {
- apiEndpoint = '/api/discover/hidden-gems';
- } else if (virtualPlaylistId === 'discover_discovery_shuffle') {
- apiEndpoint = '/api/discover/discovery-shuffle';
- } else if (virtualPlaylistId === 'discover_familiar_favorites') {
- apiEndpoint = '/api/discover/familiar-favorites';
- } else if (virtualPlaylistId === 'build_playlist_custom') {
- apiEndpoint = '/api/discover/build-playlist';
- } else if (virtualPlaylistId.startsWith('discover_lb_')) {
- console.log(`💧 ListenBrainz playlist - skipping (no automatic rehydration for ListenBrainz)`);
- return;
- } else {
- console.error(`❌ Unknown discover playlist type: ${virtualPlaylistId}`);
- return;
- }
-
- // Fetch tracks from API
- console.log(`📡 Fetching tracks from ${apiEndpoint}...`);
- const response = await fetch(apiEndpoint);
- if (!response.ok) {
- console.error(`❌ Failed to fetch discover playlist data: ${response.status}`);
- return;
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks) {
- console.error(`❌ Invalid discover playlist data:`, data);
- return;
- }
-
- const tracks = data.tracks;
- console.log(`✅ Retrieved ${tracks.length} tracks for ${playlistName}`);
-
- // Transform tracks to format expected by download modal (same as openDownloadModalForDiscoverPlaylist)
- const spotifyTracks = tracks.map(track => {
- let spotifyTrack;
-
- // Use track_data_json if available, otherwise construct from track data
- if (track.track_data_json) {
- spotifyTrack = track.track_data_json;
- } else {
- // Fallback: construct track object from available data
- spotifyTrack = {
- id: track.spotify_track_id,
- name: track.track_name,
- artists: [{ name: track.artist_name }],
- album: {
- name: track.album_name,
- images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
- },
- duration_ms: track.duration_ms || 0
- };
- }
-
- // Normalize artists to array of strings for modal compatibility
- if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
- spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
- }
-
- return spotifyTrack;
- });
-
- // Create the modal using the same function as normal discover downloads
- await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
- // Update the rehydrated process with batch info and hide modal for background rehydration
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = batchId;
- subscribeToDownloadBatch(batchId);
-
- // Update button states to reflect running status
- const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Hide the modal - this is background rehydration, not user-requested
- if (process.modalElement) {
- process.modalElement.style.display = 'none';
- console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
- }
-
- console.log(`✅ Rehydrated discover playlist modal: ${playlistName}`);
- } else {
- console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
- }
-
- } catch (error) {
- console.error(`❌ Error rehydrating discover playlist modal:`, error);
- }
-}
-
-async function rehydrateEnhancedSearchModal(virtualPlaylistId, playlistName, batchId) {
- /**
- * Rehydrates an enhanced search download modal from backend process data.
- * Fetches item data from searchDownloadBubbles and recreates the modal.
- */
- try {
- console.log(`💧 Rehydrating enhanced search modal: ${virtualPlaylistId} (${playlistName})`);
-
- // Find the download in searchDownloadBubbles
- let downloadData = null;
- for (const artistName in searchDownloadBubbles) {
- const bubble = searchDownloadBubbles[artistName];
- const download = bubble.downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
- if (download) {
- downloadData = download;
- break;
- }
- }
-
- if (!downloadData) {
- console.warn(`⚠️ No download data found in searchDownloadBubbles for ${virtualPlaylistId}`);
- return;
- }
-
- const { item, type } = downloadData;
-
- if (type === 'album') {
- // For albums, fetch tracks (pass name/artist for Hydrabase support)
- console.log(`💧 Album download - fetching album ${item.id}...`);
-
- try {
- const _sap1 = new URLSearchParams({ name: item.name || '', artist: item.artist || '' });
- const response = await fetch(`/api/spotify/album/${item.id}?${_sap1}`);
- if (!response.ok) {
- console.error(`❌ Failed to fetch album: ${response.status}`);
- return;
- }
-
- const albumData = await response.json();
- if (!albumData.tracks || albumData.tracks.length === 0) {
- console.error(`❌ No tracks in album`);
- return;
- }
-
- const spotifyTracks = albumData.tracks.map(track => ({
- id: track.id,
- name: track.name,
- artists: track.artists || [{ name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' }],
- album: {
- name: item.name,
- images: item.image_url ? [{ url: item.image_url }] : []
- },
- duration_ms: track.duration_ms || 0
- }));
-
- console.log(`✅ Retrieved ${spotifyTracks.length} tracks for album`);
-
- // Create modal
- await openDownloadMissingModalForArtistAlbum(
- virtualPlaylistId,
- item.name,
- spotifyTracks,
- item,
- { name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' },
- false // Don't show loading overlay
- );
-
- // Update process
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = batchId;
- subscribeToDownloadBatch(batchId);
-
- const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Hide modal for background rehydration
- if (process.modalElement) {
- process.modalElement.style.display = 'none';
- console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
- }
-
- // Start polling for live updates
- startModalDownloadPolling(virtualPlaylistId);
-
- console.log(`✅ Rehydrated enhanced search album modal: ${playlistName}`);
- } else {
- console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
- }
-
- } catch (error) {
- console.error(`❌ Error fetching album:`, error);
- }
-
- } else {
- // For tracks, create enriched track and open modal
- console.log(`💧 Track download - creating modal for ${item.name}...`);
-
- const enrichedTrack = {
- id: item.id,
- name: item.name,
- artists: item.artists || [{ name: item.artist || 'Unknown Artist' }],
- album: item.album || {
- name: item.album?.name || 'Unknown Album',
- images: item.image_url ? [{ url: item.image_url }] : []
- },
- duration_ms: item.duration_ms || 0
- };
-
- // Create modal
- await openDownloadMissingModalForYouTube(
- virtualPlaylistId,
- `${enrichedTrack.name} - ${enrichedTrack.artists[0].name || enrichedTrack.artists[0]}`,
- [enrichedTrack]
- );
-
- // Update process
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = batchId;
- subscribeToDownloadBatch(batchId);
-
- const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Hide modal for background rehydration
- if (process.modalElement) {
- process.modalElement.style.display = 'none';
- console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
- }
-
- // Start polling for live updates
- startModalDownloadPolling(virtualPlaylistId);
-
- console.log(`✅ Rehydrated enhanced search track modal: ${playlistName}`);
- } else {
- console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
- }
- }
-
- } catch (error) {
- console.error(`❌ Error rehydrating enhanced search modal:`, error);
- }
-}
-
-async function rehydrateModal(processInfo, userRequested = false) {
- const { playlist_id, playlist_name, batch_id, current_cycle } = processInfo;
- console.log(`💧 Rehydrating modal for "${playlist_name}" (batch: ${batch_id}) - User requested: ${userRequested}`);
-
- // Handle YouTube virtual playlists - skip rehydration here, handled by YouTube system
- if (playlist_id.startsWith('youtube_')) {
- console.log(`⏭️ Skipping YouTube virtual playlist rehydration - handled by YouTube system`);
- return;
- }
-
- // Handle Beatport virtual playlists - skip rehydration here, handled by Beatport system
- if (playlist_id.startsWith('beatport_')) {
- console.log(`⏭️ Skipping Beatport virtual playlist rehydration - handled by Beatport system`);
- return;
- }
-
- // Handle artist album virtual playlists
- if (playlist_id.startsWith('artist_album_')) {
- console.log(`💧 Rehydrating artist album virtual playlist: ${playlist_id}`);
- await rehydrateArtistAlbumModal(playlist_id, playlist_name, batch_id);
- return;
- }
-
- // Handle discover virtual playlists (Fresh Tape, The Archives)
- if (playlist_id.startsWith('discover_')) {
- console.log(`💧 Rehydrating discover playlist: ${playlist_id}`);
- await rehydrateDiscoverPlaylistModal(playlist_id, playlist_name, batch_id);
- return;
- }
-
- // Handle enhanced search virtual playlists (albums and tracks)
- if (playlist_id.startsWith('enhanced_search_album_') || playlist_id.startsWith('enhanced_search_track_')) {
- console.log(`💧 Rehydrating enhanced search virtual playlist: ${playlist_id}`);
- await rehydrateEnhancedSearchModal(playlist_id, playlist_name, batch_id);
- return;
- }
-
- // Handle wishlist processes specially
- if (playlist_id === "wishlist") {
- console.log(`💧 [Rehydrate] Handling wishlist modal for active process: ${batch_id}`);
-
- // Check if modal already exists and is visible
- const existingProcess = activeDownloadProcesses[playlist_id];
- const modalAlreadyOpen = existingProcess && existingProcess.modalElement &&
- existingProcess.modalElement.style.display === 'flex';
-
- if (modalAlreadyOpen) {
- console.log(`💧 [Rehydrate] Wishlist modal already open - updating existing modal with auto-process state`);
-
- // Update existing process with new batch info
- existingProcess.status = 'running';
- existingProcess.batchId = batch_id;
-
- // Update UI to reflect running state
- const beginBtn = document.getElementById(`begin-analysis-btn-${playlist_id}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${playlist_id}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Ensure polling is active for live updates
- if (!existingProcess.intervalId) {
- console.log(`💧 [Rehydrate] Starting polling for existing modal`);
- startModalDownloadPolling(playlist_id);
- }
-
- console.log(`✅ [Rehydrate] Successfully updated existing wishlist modal for auto-process`);
- } else {
- // Only create modal if user requested it - don't create for background auto-processing
- if (userRequested) {
- console.log(`💧 [Rehydrate] User requested - creating wishlist modal for active process: ${batch_id}`);
-
- // Create the modal with current server state (pass category filter for auto-processing)
- await openDownloadMissingWishlistModal(current_cycle);
- const process = activeDownloadProcesses[playlist_id];
- if (!process) {
- console.error('❌ [Rehydrate] Failed to create wishlist process in activeDownloadProcesses');
- return;
- }
-
- // Sync process state with server
- console.log(`✅ [Rehydrate] Syncing wishlist process state - batchId: ${batch_id}, status: running`);
- process.status = 'running';
- process.batchId = batch_id;
-
- // Update UI to reflect running state
- const beginBtn = document.getElementById(`begin-analysis-btn-${playlist_id}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${playlist_id}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Start polling for live updates
- startModalDownloadPolling(playlist_id);
-
- // Show modal
- console.log('👤 [Rehydrate] User requested - showing wishlist modal');
- process.modalElement.style.display = 'flex';
- WishlistModalState.setVisible();
- WishlistModalState.clearUserClosed();
- } else {
- console.log('🔄 [Rehydrate] Background auto-processing detected - NOT creating modal (user must click wishlist button to see progress)');
- // Don't create modal for background auto-processing
- // User must click the wishlist button to see the modal
- }
- }
- return;
- }
-
- // Handle Deezer ARL playlist processes — ensure playlist data is in spotifyPlaylists for modal reuse
- if (playlist_id.startsWith('deezer_arl_') && !spotifyPlaylists.find(p => p.id === playlist_id)) {
- const rawId = playlist_id.replace('deezer_arl_', '');
- const deezerPlaylist = deezerArlPlaylists.find(p => String(p.id) === rawId);
- if (deezerPlaylist) {
- spotifyPlaylists.push({
- id: playlist_id,
- name: deezerPlaylist.name,
- track_count: deezerPlaylist.track_count || 0,
- image_url: deezerPlaylist.image_url || '',
- owner: deezerPlaylist.owner || '',
- });
- } else {
- // Playlists not loaded yet — use process info as fallback
- spotifyPlaylists.push({
- id: playlist_id,
- name: playlist_name || 'Deezer Playlist',
- track_count: 0,
- });
- }
- }
-
- // Handle regular Spotify / Deezer ARL playlist processes
- let playlistData = spotifyPlaylists.find(p => p.id === playlist_id);
- if (!playlistData) {
- console.warn(`Cannot rehydrate modal: Playlist data for ${playlist_id} not loaded.`);
- return;
- }
- await openDownloadMissingModal(playlist_id);
- const process = activeDownloadProcesses[playlist_id];
- if (!process) return;
-
- process.status = 'running';
- process.batchId = batch_id;
- updatePlaylistCardUI(playlist_id);
- updateRefreshButtonState();
-
- document.getElementById(`begin-analysis-btn-${playlist_id}`).style.display = 'none';
- document.getElementById(`cancel-all-btn-${playlist_id}`).style.display = 'inline-block';
-
- // Hide wishlist button if it exists
- const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlist_id}`);
- if (wishlistBtn) wishlistBtn.style.display = 'none';
-
- startModalDownloadPolling(playlist_id);
-
- process.modalElement.style.display = 'none';
-}
-
-// ===================================================================
-// YOUTUBE PLAYLIST BACKEND HYDRATION FUNCTIONS
-// ===================================================================
-
-async function loadYouTubePlaylistsFromBackend() {
- // Load all stored YouTube playlists from backend and recreate cards (similar to Spotify hydration)
- try {
- console.log('📋 Loading YouTube playlists from backend...');
-
- const response = await fetch('/api/youtube/playlists');
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch YouTube playlists');
- }
-
- const data = await response.json();
- const playlists = data.playlists || [];
-
- console.log(`🎬 Found ${playlists.length} stored YouTube playlists in backend`);
-
- if (playlists.length === 0) {
- console.log('📋 No YouTube playlists to hydrate');
- return;
- }
-
- const container = document.getElementById('youtube-playlist-container');
-
- // Create cards for playlists that don't already exist (avoid duplicates)
- for (const playlistInfo of playlists) {
- const urlHash = playlistInfo.url_hash;
-
- // Check if card already exists (from rehydration or previous loading)
- if (youtubePlaylistStates[urlHash] && youtubePlaylistStates[urlHash].cardElement &&
- document.body.contains(youtubePlaylistStates[urlHash].cardElement)) {
- console.log(`⏭️ Skipping existing YouTube playlist card: ${playlistInfo.playlist.name}`);
-
- // Update existing state with backend data
- const state = youtubePlaylistStates[urlHash];
- state.phase = playlistInfo.phase;
- state.discoveryProgress = playlistInfo.discovery_progress;
- state.spotifyMatches = playlistInfo.spotify_matches;
- state.convertedSpotifyPlaylistId = playlistInfo.converted_spotify_playlist_id;
-
- // Fetch discovery results for existing cards too if they don't have them
- if (playlistInfo.phase !== 'fresh' && playlistInfo.phase !== 'discovering' &&
- (!state.discoveryResults || state.discoveryResults.length === 0)) {
- try {
- console.log(`🔍 Fetching missing discovery results for existing card: ${playlistInfo.playlist.name}`);
- const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- if (fullState.discovery_results) {
- state.discoveryResults = fullState.discovery_results;
- state.syncPlaylistId = fullState.sync_playlist_id;
- state.syncProgress = fullState.sync_progress || {};
- console.log(`✅ Restored ${state.discoveryResults.length} discovery results for existing card`);
- }
- }
- } catch (error) {
- console.warn(`⚠️ Error fetching discovery results for existing card:`, error.message);
- }
- }
-
- continue;
- }
-
- console.log(`🎬 Creating YouTube playlist card: ${playlistInfo.playlist.name} (Phase: ${playlistInfo.phase})`);
- createYouTubeCardFromBackendState(playlistInfo);
-
- // Fetch discovery results for non-fresh playlists (same logic as rehydrateYouTubePlaylist)
- if (playlistInfo.phase !== 'fresh' && playlistInfo.phase !== 'discovering') {
- try {
- console.log(`🔍 Fetching discovery results for: ${playlistInfo.playlist.name}`);
- const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
-
- // Store discovery results in local state
- const state = youtubePlaylistStates[urlHash];
- if (fullState.discovery_results && state) {
- state.discoveryResults = fullState.discovery_results;
- state.syncPlaylistId = fullState.sync_playlist_id;
- state.syncProgress = fullState.sync_progress || {};
- console.log(`✅ Restored ${state.discoveryResults.length} discovery results for: ${playlistInfo.playlist.name}`);
- }
- } else {
- console.warn(`⚠️ Could not fetch discovery results for: ${playlistInfo.playlist.name}`);
- }
- } catch (error) {
- console.warn(`⚠️ Error fetching discovery results for ${playlistInfo.playlist.name}:`, error.message);
- }
- }
- }
-
- // Rehydrate download modals for YouTube playlists in downloading/download_complete phases
- for (const playlistInfo of playlists) {
- if ((playlistInfo.phase === 'downloading' || playlistInfo.phase === 'download_complete') &&
- playlistInfo.converted_spotify_playlist_id && playlistInfo.download_process_id) {
-
- const convertedPlaylistId = playlistInfo.converted_spotify_playlist_id;
-
- if (!activeDownloadProcesses[convertedPlaylistId]) {
- console.log(`💧 Rehydrating download modal for YouTube playlist: ${playlistInfo.playlist.name}`);
- try {
- // Create the download modal using the YouTube-specific function
- const spotifyTracks = youtubePlaylistStates[playlistInfo.url_hash]?.discoveryResults
- ?.filter(result => result.spotify_data)
- ?.map(result => result.spotify_data) || [];
-
- if (spotifyTracks.length > 0) {
- await openDownloadMissingModalForYouTube(
- convertedPlaylistId,
- playlistInfo.playlist.name,
- spotifyTracks
- );
-
- // Set the modal to running state with the correct batch ID
- const process = activeDownloadProcesses[convertedPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = playlistInfo.download_process_id;
-
- // Update UI to running state
- const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Start polling for this process
- startModalDownloadPolling(convertedPlaylistId);
-
- // Hide modal since this is background rehydration
- process.modalElement.style.display = 'none';
- console.log(`✅ Rehydrated download modal for YouTube playlist: ${playlistInfo.playlist.name}`);
- }
- } else {
- console.warn(`⚠️ No Spotify tracks found for YouTube download modal: ${playlistInfo.playlist.name}`);
- }
- } catch (error) {
- console.error(`❌ Error rehydrating download modal for ${playlistInfo.playlist.name}:`, error);
- }
- }
- }
- }
-
- console.log(`✅ Successfully hydrated ${playlists.length} YouTube playlists from backend`);
-
- } catch (error) {
- console.error('❌ Error loading YouTube playlists from backend:', error);
- showToast(`Error loading YouTube playlists: ${error.message}`, 'error');
- }
-}
-
-async function loadBeatportChartsFromBackend() {
- // Load all stored Beatport charts from backend and recreate cards (similar to YouTube hydration)
- try {
- console.log('📋 Loading Beatport charts from backend...');
-
- const signal = getBeatportContentSignal();
- const response = await fetch('/api/beatport/charts', signal ? { signal } : undefined);
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch Beatport charts');
- }
-
- const charts = await response.json();
-
- console.log(`🎧 Found ${charts.length} stored Beatport charts in backend`);
-
- if (charts.length === 0) {
- console.log('📋 No Beatport charts to hydrate');
- return;
- }
-
- const container = document.getElementById('beatport-playlist-container');
-
- // Create cards for charts that don't already exist (avoid duplicates)
- for (const chartInfo of charts) {
- const chartHash = chartInfo.hash;
-
- // Check if card already exists (from previous loading)
- if (beatportChartStates[chartHash] && beatportChartStates[chartHash].cardElement &&
- document.body.contains(beatportChartStates[chartHash].cardElement)) {
- console.log(`⏭️ Skipping existing Beatport chart card: ${chartInfo.name}`);
-
- // Update existing state with backend data
- const state = beatportChartStates[chartHash];
- state.phase = chartInfo.phase;
-
- continue;
- }
-
- console.log(`🎧 Creating Beatport chart card: ${chartInfo.name} (Phase: ${chartInfo.phase})`);
- createBeatportCardFromBackendState(chartInfo);
-
- // Fetch full state for non-fresh charts to restore discovery results
- if (chartInfo.phase !== 'fresh') {
- try {
- console.log(`🔍 Fetching full state for: ${chartInfo.name}`);
- const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`, signal ? { signal } : undefined);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
-
- // Store in YouTube state system (since Beatport reuses it)
- if (fullState.discovery_results && fullState.discovery_results.length > 0) {
- // Transform backend results to frontend format (like Tidal does)
- const transformedResults = fullState.discovery_results.map((result, index) => ({
- index: result.index !== undefined ? result.index : index,
- yt_track: result.beatport_track ? result.beatport_track.title : 'Unknown',
- yt_artist: result.beatport_track ? result.beatport_track.artist : 'Unknown',
- status: result.status === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
- status_class: result.status_class || (result.status === 'found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
- spotify_track: result.spotify_data ? result.spotify_data.name : '-',
- spotify_artist: result.spotify_data && result.spotify_data.artists ?
- result.spotify_data.artists.map(a => a.name || a).join(', ') : '-',
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : '-'
- }));
-
- // Create Beatport state in YouTube system for modal functionality
- youtubePlaylistStates[chartHash] = {
- phase: fullState.phase,
- playlist: {
- name: chartInfo.name,
- tracks: chartInfo.chart_data.tracks,
- description: `${chartInfo.track_count} tracks from ${chartInfo.name}`,
- source: 'beatport'
- },
- is_beatport_playlist: true,
- beatport_chart_type: chartInfo.chart_data.chart_type,
- beatport_chart_hash: chartHash,
- discovery_progress: fullState.discovery_progress,
- discoveryProgress: fullState.discovery_progress,
- spotify_matches: fullState.spotify_matches,
- spotifyMatches: fullState.spotify_matches,
- discovery_results: fullState.discovery_results,
- discoveryResults: transformedResults,
- convertedSpotifyPlaylistId: fullState.converted_spotify_playlist_id,
- download_process_id: fullState.download_process_id,
- syncPlaylistId: fullState.sync_playlist_id,
- syncProgress: fullState.sync_progress || {}
- };
-
- console.log(`✅ Restored ${transformedResults.length} discovery results for: ${chartInfo.name}`);
- }
- } else {
- console.warn(`⚠️ Could not fetch full state for: ${chartInfo.name}`);
- }
- } catch (error) {
- if (error && error.name === 'AbortError') throw error;
- console.warn(`⚠️ Error fetching full state for ${chartInfo.name}:`, error.message);
- }
- }
- }
-
- // Rehydrate download modals for Beatport charts in downloading/download_complete phases
- for (const chartInfo of charts) {
- if ((chartInfo.phase === 'downloading' || chartInfo.phase === 'download_complete') &&
- chartInfo.converted_spotify_playlist_id && chartInfo.download_process_id) {
-
- const convertedPlaylistId = chartInfo.converted_spotify_playlist_id;
- console.log(`📥 Rehydrating download modal for Beatport chart: ${chartInfo.name} (Playlist: ${convertedPlaylistId})`);
-
- // Set up active download process for Beatport chart (like YouTube/Tidal)
- try {
- // Rehydrate the chart state first to get discovery results
- await rehydrateBeatportChart(chartInfo, false);
-
- // Create the download modal using the Beatport-specific function (like YouTube)
- if (!activeDownloadProcesses[convertedPlaylistId]) {
- // Get tracks from the rehydrated state
- const ytState = youtubePlaylistStates[chartInfo.hash];
- let spotifyTracks = [];
-
- if (ytState && ytState.discovery_results) {
- spotifyTracks = ytState.discovery_results
- .filter(result => result.spotify_data)
- .map(result => {
- const track = result.spotify_data;
- // Ensure artists is an array of strings
- if (track.artists && Array.isArray(track.artists)) {
- track.artists = track.artists.map(artist =>
- typeof artist === 'string' ? artist : (artist.name || artist)
- );
- } else if (track.artists && typeof track.artists === 'string') {
- track.artists = [track.artists];
- } else {
- track.artists = ['Unknown Artist'];
- }
- return {
- id: track.id,
- name: track.name,
- artists: track.artists,
- album: track.album || 'Unknown Album',
- duration_ms: track.duration_ms || 0,
- external_urls: track.external_urls || {}
- };
- });
- }
-
- if (spotifyTracks.length > 0) {
- await openDownloadMissingModalForYouTube(
- convertedPlaylistId,
- chartInfo.name,
- spotifyTracks
- );
-
- // Set the modal to running state with the correct batch ID
- const process = activeDownloadProcesses[convertedPlaylistId];
- if (process) {
- process.status = chartInfo.phase === 'download_complete' ? 'complete' : 'running';
- process.batchId = chartInfo.download_process_id;
-
- // Update UI to running state
- const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Start polling for this process
- startModalDownloadPolling(convertedPlaylistId);
-
- // Hide modal since this is background rehydration
- process.modalElement.style.display = 'none';
- console.log(`✅ Rehydrated download modal for Beatport chart: ${chartInfo.name}`);
- }
- } else {
- console.warn(`⚠️ No Spotify tracks found for Beatport download modal: ${chartInfo.name}`);
- }
- }
- } catch (error) {
- if (error && error.name === 'AbortError') throw error;
- console.warn(`⚠️ Error setting up download process for Beatport chart "${chartInfo.name}":`, error.message);
- }
- }
- }
-
- throwIfBeatportLoadAborted();
- console.log(`✅ Successfully loaded and rehydrated ${charts.length} Beatport charts`);
-
- // Start polling for any charts that are still in discovering phase
- for (const chartInfo of charts) {
- if (chartInfo.phase === 'discovering') {
- console.log(`🔄 [Backend Loading] Auto-starting polling for discovering chart: ${chartInfo.name}`);
- throwIfBeatportLoadAborted();
- startBeatportDiscoveryPolling(chartInfo.hash);
- }
- }
-
- // Update clear button state after loading charts
- updateBeatportClearButtonState();
-
- } catch (error) {
- if (error && error.name === 'AbortError') {
- console.log('⏹ Beatport chart hydration aborted');
- return;
- }
- console.error('❌ Error loading Beatport charts from backend:', error);
- showToast(`Error loading Beatport charts: ${error.message}`, 'error');
- }
-}
-
-async function loadListenBrainzPlaylistsFromBackend() {
- // Load all stored ListenBrainz playlist states from backend for persistence (similar to Beatport hydration)
- try {
- console.log('📋 Loading ListenBrainz playlists from backend...');
-
- const response = await fetch('/api/listenbrainz/playlists');
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch ListenBrainz playlists');
- }
-
- const data = await response.json();
- const playlists = data.playlists || [];
-
- console.log(`🎵 Found ${playlists.length} stored ListenBrainz playlists in backend`);
-
- if (playlists.length === 0) {
- console.log('📋 No ListenBrainz playlists to hydrate');
- listenbrainzPlaylistsLoaded = true;
- return;
- }
-
- // Restore state for each playlist
- for (const playlistInfo of playlists) {
- const playlistMbid = playlistInfo.playlist_mbid;
-
- console.log(`🎵 Hydrating ListenBrainz playlist: ${playlistInfo.playlist.name} (Phase: ${playlistInfo.phase}, MBID: ${playlistMbid})`);
-
- // Fetch full state for non-fresh playlists to restore discovery results
- if (playlistInfo.phase !== 'fresh') {
- try {
- console.log(`🔍 Fetching full state for: ${playlistInfo.playlist.name}`);
- const stateResponse = await fetch(`/api/listenbrainz/state/${playlistMbid}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
-
- // Transform backend results to frontend format (like Beatport does)
- const transformedResults = (fullState.discovery_results || []).map((result, index) => ({
- index: result.index !== undefined ? result.index : index,
- yt_track: result.lb_track || result.track_name || 'Unknown',
- yt_artist: result.lb_artist || result.artist_name || 'Unknown',
- status: result.status === 'found' || result.status === '✅ Found' || result.status_class === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
- status_class: result.status_class || (result.status === 'found' || result.status === '✅ Found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
- spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
- spotify_artist: result.spotify_data && result.spotify_data.artists ?
- (Array.isArray(result.spotify_data.artists) ? (typeof result.spotify_data.artists[0] === 'object' ? result.spotify_data.artists[0].name : result.spotify_data.artists[0]) : result.spotify_data.artists) : (result.spotify_artist || '-'),
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
- spotify_data: result.spotify_data,
- duration: result.duration || '0:00'
- }));
-
- // Create ListenBrainz state with both naming conventions
- listenbrainzPlaylistStates[playlistMbid] = {
- phase: fullState.phase,
- playlist: fullState.playlist,
- is_listenbrainz_playlist: true,
- playlist_mbid: playlistMbid,
- // Store with both naming conventions
- discovery_results: fullState.discovery_results || [],
- discoveryResults: transformedResults,
- discovery_progress: fullState.discovery_progress || 0,
- discoveryProgress: fullState.discovery_progress || 0,
- spotify_matches: fullState.spotify_matches || 0,
- spotifyMatches: fullState.spotify_matches || 0,
- spotify_total: fullState.spotify_total || 0,
- spotifyTotal: fullState.spotify_total || 0,
- convertedSpotifyPlaylistId: fullState.converted_spotify_playlist_id,
- download_process_id: fullState.download_process_id
- };
-
- console.log(`✅ Restored ${transformedResults.length} discovery results for: ${playlistInfo.playlist.name}`);
- } else {
- console.warn(`⚠️ Could not fetch full state for: ${playlistInfo.playlist.name}`);
- }
- } catch (error) {
- console.warn(`⚠️ Error fetching full state for ${playlistInfo.playlist.name}:`, error.message);
- }
- }
- }
-
- // Start polling for any playlists that are still in discovering phase
- for (const playlistInfo of playlists) {
- if (playlistInfo.phase === 'discovering') {
- console.log(`🔄 [Backend Loading] Auto-starting polling for discovering playlist: ${playlistInfo.playlist.name}`);
- startListenBrainzDiscoveryPolling(playlistInfo.playlist_mbid);
- }
- // Show sync button for discovered playlists (hidden by default)
- else if (playlistInfo.phase === 'discovered' || playlistInfo.phase === 'syncing' || playlistInfo.phase === 'sync_complete') {
- const playlistId = `discover-lb-playlist-${playlistInfo.playlist_mbid}`;
- const syncBtn = document.getElementById(`${playlistId}-sync-btn`);
- if (syncBtn) {
- syncBtn.style.display = 'inline-block';
- console.log(`✅ Showing sync button for discovered playlist: ${playlistInfo.playlist.name}`);
- }
- }
- }
-
- listenbrainzPlaylistsLoaded = true;
- console.log(`✅ Successfully loaded and rehydrated ${playlists.length} ListenBrainz playlists`);
-
- } catch (error) {
- console.error('❌ Error loading ListenBrainz playlists from backend:', error);
- listenbrainzPlaylistsLoaded = true; // Mark as loaded even on error to prevent retries
- }
-}
-
-function createBeatportCardFromBackendState(chartInfo) {
- // Create Beatport chart card from backend state data
- const chartHash = chartInfo.hash;
- const chartData = chartInfo.chart_data;
- const phase = chartInfo.phase;
-
- const container = document.getElementById('beatport-playlist-container');
-
- // Remove placeholder if it exists
- const placeholder = container.querySelector('.playlist-placeholder');
- if (placeholder) {
- placeholder.remove();
- }
-
- // Create card HTML using same structure as createBeatportCard
- const cardHtml = `
-
-
-
- `;
-
- container.insertAdjacentHTML('beforeend', cardHtml);
-
- // Initialize state
- beatportChartStates[chartHash] = {
- phase: phase,
- chart: chartData,
- cardElement: document.getElementById(`beatport-card-${chartHash}`)
- };
-
- // Add click handler
- const card = document.getElementById(`beatport-card-${chartHash}`);
- if (card) {
- card.addEventListener('click', async () => await handleBeatportCardClick(chartHash));
- }
-
- console.log(`🃏 Created Beatport card from backend state: ${chartInfo.name} (${phase})`);
-}
-
-async function rehydrateBeatportChart(chartInfo, userRequested = false) {
- // Rehydrate Beatport chart state and optionally open modal (similar to rehydrateYouTubePlaylist)
- const chartHash = chartInfo.hash;
- const chartName = chartInfo.name;
-
- try {
- console.log(`🔄 [Rehydration] Starting rehydration for Beatport chart: ${chartName}`);
-
- // Get full state from backend including discovery results
- let fullState;
- try {
- const signal = getBeatportContentSignal();
- const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`, signal ? { signal } : undefined);
- if (stateResponse.ok) {
- fullState = await stateResponse.json();
- console.log(`📋 [Rehydration] Retrieved full backend state with ${fullState.discovery_results?.length || 0} discovery results`);
- } else {
- console.warn(`⚠️ [Rehydration] Could not fetch full state, using basic info`);
- }
- } catch (error) {
- if (error && error.name === 'AbortError') return;
- console.warn(`⚠️ [Rehydration] Error fetching full state:`, error.message);
- }
-
- const phase = chartInfo.phase;
-
- // Create or update Beatport chart state
- if (!beatportChartStates[chartHash]) {
- beatportChartStates[chartHash] = {
- phase: 'fresh',
- chart: chartInfo.chart_data,
- cardElement: null
- };
- }
-
- const state = beatportChartStates[chartHash];
- state.phase = phase;
-
- // Transform discovery results if available (like Tidal does)
- let transformedResults = [];
- if (fullState && fullState.discovery_results) {
- transformedResults = fullState.discovery_results.map((result, index) => ({
- index: result.index !== undefined ? result.index : index,
- yt_track: result.beatport_track ? result.beatport_track.title : 'Unknown',
- yt_artist: result.beatport_track ? result.beatport_track.artist : 'Unknown',
- status: result.status === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
- status_class: result.status_class || (result.status === 'found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
- spotify_track: result.spotify_data ? result.spotify_data.name : '-',
- spotify_artist: result.spotify_data && result.spotify_data.artists ?
- result.spotify_data.artists.map(a => a.name || a).join(', ') : '-',
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : '-'
- }));
- }
-
- // Store in YouTube state system (since Beatport reuses it)
- youtubePlaylistStates[chartHash] = {
- phase: phase,
- playlist: {
- name: chartName,
- tracks: chartInfo.chart_data.tracks,
- description: `${chartInfo.track_count} tracks from ${chartName}`,
- source: 'beatport'
- },
- is_beatport_playlist: true,
- beatport_chart_type: chartInfo.chart_data.chart_type,
- beatport_chart_hash: chartHash,
- discovery_progress: fullState?.discovery_progress || chartInfo.discovery_progress,
- discoveryProgress: fullState?.discovery_progress || chartInfo.discovery_progress,
- spotify_matches: fullState?.spotify_matches || chartInfo.spotify_matches,
- spotifyMatches: fullState?.spotify_matches || chartInfo.spotify_matches,
- discovery_results: fullState?.discovery_results || [],
- discoveryResults: transformedResults,
- convertedSpotifyPlaylistId: fullState?.converted_spotify_playlist_id || chartInfo.converted_spotify_playlist_id,
- download_process_id: fullState?.download_process_id || chartInfo.download_process_id,
- syncPlaylistId: fullState?.sync_playlist_id,
- syncProgress: fullState?.sync_progress || {}
- };
-
- // Restore discovery results if we have them
- if (fullState && fullState.discovery_results) {
- console.log(`✅ Restored ${fullState.discovery_results.length} discovery results from backend`);
-
- // Update modal if it already exists
- const existingModal = document.getElementById(`youtube-discovery-modal-${chartHash}`);
- if (existingModal && !existingModal.classList.contains('hidden')) {
- console.log(`🔄 Refreshing existing modal with restored discovery results`);
- refreshYouTubeDiscoveryModalTable(chartHash);
- }
- }
-
- // Update card display
- updateBeatportCardPhase(chartHash, phase);
- updateBeatportCardProgress(chartHash, {
- spotify_total: chartInfo.spotify_total,
- spotify_matches: chartInfo.spotify_matches,
- failed: chartInfo.spotify_total - chartInfo.spotify_matches
- });
-
- // Handle active polling resumption
- if (phase === 'discovering') {
- console.log(`🔍 Resuming discovery polling for: ${chartName}`);
- startBeatportDiscoveryPolling(chartHash);
- } else if (phase === 'syncing') {
- console.log(`🔄 Resuming sync polling for: ${chartName}`);
- startBeatportSyncPolling(chartHash);
- }
-
- // Open modal if user requested
- if (userRequested) {
- switch (phase) {
- case 'discovering':
- case 'discovered':
- case 'syncing':
- case 'sync_complete':
- openYouTubeDiscoveryModal(chartHash);
- break;
- case 'downloading':
- case 'download_complete':
- // Open download modal if we have the converted playlist ID
- if (chartInfo.converted_spotify_playlist_id) {
- await openDownloadMissingModal(chartInfo.converted_spotify_playlist_id);
- }
- break;
- }
- }
-
- console.log(`✅ Successfully rehydrated Beatport chart: ${chartName}`);
-
- } catch (error) {
- console.error(`❌ Error rehydrating Beatport chart "${chartName}":`, error);
- }
-}
-
-function createYouTubeCardFromBackendState(playlistInfo) {
- // Create YouTube playlist card from backend state data
- const urlHash = playlistInfo.url_hash;
- const playlist = playlistInfo.playlist;
- const phase = playlistInfo.phase;
-
- const container = document.getElementById('youtube-playlist-container');
-
- // Remove placeholder if it exists
- const placeholder = container.querySelector('.youtube-playlist-placeholder');
- if (placeholder) {
- placeholder.remove();
- }
-
- // Create card HTML (using EXACT same structure as createYouTubeCard)
- const cardHtml = `
-
-
- ${escapeHtml(chartInfo.name)}
-
- ${chartInfo.track_count} tracks
- ${getPhaseText(phase)}
-
-
- ♪ ${chartInfo.spotify_total} / ✓ ${chartInfo.spotify_matches} / ✗ ${chartInfo.spotify_total - chartInfo.spotify_matches} (${Math.round((chartInfo.spotify_matches / chartInfo.spotify_total) * 100) || 0}%)
-
-
-
-
-
- `;
-
- container.insertAdjacentHTML('beforeend', cardHtml);
-
- // Store state for UI management (but backend remains source of truth)
- youtubePlaylistStates[urlHash] = {
- phase: phase,
- url: playlistInfo.url,
- playlist: playlist,
- cardElement: document.getElementById(`youtube-card-${urlHash}`),
- discoveryResults: [],
- discoveryProgress: playlistInfo.discovery_progress,
- spotifyMatches: playlistInfo.spotify_matches,
- convertedSpotifyPlaylistId: playlistInfo.converted_spotify_playlist_id,
- backendSynced: true // Flag to indicate this came from backend
- };
-
- console.log(`🃏 Created YouTube card from backend state: ${playlist.name} (${phase})`);
-}
-
-function getActionButtonText(phase) {
- switch (phase) {
- case 'fresh': return 'Discover';
- case 'discovering': return 'View Progress';
- case 'discovered': return 'View Results';
- case 'syncing': return 'View Sync';
- case 'sync_complete': return 'Download';
- case 'downloading': return 'View Downloads';
- case 'download_complete': return 'Complete';
- default: return 'Open';
- }
-}
-
-function getPhaseText(phase) {
- switch (phase) {
- case 'fresh': return 'Ready to discover';
- case 'discovering': return 'Discovering...';
- case 'discovered': return 'Discovery Complete';
- case 'syncing': return 'Syncing...';
- case 'sync_complete': return 'Sync Complete';
- case 'downloading': return 'Downloading...';
- case 'download_complete': return 'Download Complete';
- default: return phase;
- }
-}
-
-function getPhaseColor(phase) {
- switch (phase) {
- case 'fresh': return '#999';
- case 'discovering': case 'syncing': case 'downloading': return '#ffa500';
- case 'discovered': case 'sync_complete': case 'download_complete': return 'rgb(var(--accent-rgb))';
- default: return '#999';
- }
-}
-
-function getProgressWidth(playlistInfo) {
- if (playlistInfo.phase === 'fresh') return 0;
- if (playlistInfo.spotify_total === 0) return 0;
- return Math.round((playlistInfo.spotify_matches / playlistInfo.spotify_total) * 100);
-}
-
-async function rehydrateYouTubePlaylist(playlistInfo, userRequested = false) {
- // Rehydrate a YouTube playlist's discovery modal state (similar to rehydrateModal)
- const urlHash = playlistInfo.url_hash;
- const playlistName = playlistInfo.playlist_name;
- const phase = playlistInfo.phase;
-
- console.log(`💧 Rehydrating YouTube playlist "${playlistName}" (Phase: ${phase}) - User requested: ${userRequested}`);
-
- try {
- // First, ensure the card exists (create from backend if needed)
- if (!youtubePlaylistStates[urlHash] || !youtubePlaylistStates[urlHash].cardElement) {
- console.log(`🃏 Creating missing YouTube card for rehydration: ${playlistName}`);
-
- // Since playlistInfo from active processes doesn't have full playlist data,
- // we need to fetch it from the backend first
- try {
- const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
- if (stateResponse.ok) {
- const fullPlaylistState = await stateResponse.json();
- createYouTubeCardFromBackendState(fullPlaylistState);
- } else {
- console.error(`❌ Could not fetch full playlist state for card creation: ${playlistName}`);
- return; // Can't create card without playlist data
- }
- } catch (error) {
- console.error(`❌ Error fetching playlist state for card creation: ${error.message}`);
- return;
- }
- }
-
- // Fetch full state from backend to get discovery results
- let fullState = null;
- if (phase !== 'fresh' && phase !== 'discovering') {
- try {
- console.log(`🔍 Fetching full backend state for: ${playlistName}`);
- const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
- if (stateResponse.ok) {
- fullState = await stateResponse.json();
- console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
- }
- } catch (error) {
- console.warn(`⚠️ Could not fetch full state for ${playlistName}:`, error.message);
- }
- }
-
- // Update local state to match backend
- const state = youtubePlaylistStates[urlHash];
- state.phase = phase;
- state.discoveryProgress = playlistInfo.discovery_progress;
- state.spotifyMatches = playlistInfo.spotify_matches;
- state.convertedSpotifyPlaylistId = playlistInfo.converted_spotify_playlist_id;
-
- // Restore discovery results if we have them
- if (fullState && fullState.discovery_results) {
- state.discoveryResults = fullState.discovery_results;
- state.syncPlaylistId = fullState.sync_playlist_id;
- state.syncProgress = fullState.sync_progress || {};
- console.log(`✅ Restored ${state.discoveryResults.length} discovery results from backend`);
-
- // Update modal if it already exists
- const existingModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (existingModal && !existingModal.classList.contains('hidden')) {
- console.log(`🔄 Refreshing existing modal with restored discovery results`);
- refreshYouTubeDiscoveryModalTable(urlHash);
- }
- }
-
- // Update card display
- updateYouTubeCardPhase(urlHash, phase);
- updateYouTubeCardProgress(urlHash, playlistInfo);
-
- // Handle active polling resumption
- if (phase === 'discovering') {
- console.log(`🔍 Resuming discovery polling for: ${playlistName}`);
- startYouTubeDiscoveryPolling(urlHash);
- } else if (phase === 'syncing') {
- console.log(`🔄 Resuming sync polling for: ${playlistName}`);
- startYouTubeSyncPolling(urlHash);
- }
-
- // Open modal if user requested
- if (userRequested) {
- switch (phase) {
- case 'discovering':
- case 'discovered':
- case 'syncing':
- case 'sync_complete':
- openYouTubeDiscoveryModal(urlHash);
- break;
- case 'downloading':
- case 'download_complete':
- // Open download modal if we have the converted playlist ID
- if (playlistInfo.converted_spotify_playlist_id) {
- await openDownloadMissingModal(playlistInfo.converted_spotify_playlist_id);
- }
- break;
- }
- }
-
- console.log(`✅ Successfully rehydrated YouTube playlist: ${playlistName}`);
-
- } catch (error) {
- console.error(`❌ Error rehydrating YouTube playlist "${playlistName}":`, error);
- }
-}
-
-async function removeYouTubePlaylistFromBackend(event, urlHash) {
- // Remove YouTube playlist from backend storage and update UI
- event.stopPropagation(); // Prevent card click
-
- const state = youtubePlaylistStates[urlHash];
- if (!state) return;
-
- const playlistName = state.playlist.name;
-
- try {
- console.log(`🗑️ Removing YouTube playlist from backend: ${playlistName}`);
-
- const response = await fetch(`/api/youtube/delete/${urlHash}`, {
- method: 'DELETE'
- });
-
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to delete playlist');
- }
-
- // Remove card from UI
- if (state.cardElement) {
- state.cardElement.remove();
- }
-
- // Remove from client state
- delete youtubePlaylistStates[urlHash];
-
- // Stop any active polling
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- }
-
- // Close discovery modal if open
- const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (modal) {
- modal.remove();
- }
-
- // Show placeholder if no cards left
- const container = document.getElementById('youtube-playlist-container');
- const cards = container.querySelectorAll('.youtube-playlist-card');
- if (cards.length === 0) {
- container.innerHTML = '
-
- ${escapeHtml(playlist.name)}
-
- ${playlist.tracks.length} tracks
- ${getPhaseText(phase)}
-
-
- ♪ ${playlistInfo.spotify_total} / ✓ ${playlistInfo.spotify_matches} / ✗ ${playlistInfo.spotify_total - playlistInfo.spotify_matches} / ${Math.round(getProgressWidth(playlistInfo))}%
-
-
- No YouTube playlists added yet. Parse a YouTube playlist URL above to get started!
';
- }
-
- showToast(`Removed "${playlistName}" from backend storage`, 'success');
- console.log(`✅ Successfully removed YouTube playlist: ${playlistName}`);
-
- } catch (error) {
- console.error(`❌ Error removing YouTube playlist "${playlistName}":`, error);
- showToast(`Error removing playlist: ${error.message}`, 'error');
- }
-}
-
-async function loadSpotifyPlaylists() {
- const container = document.getElementById('spotify-playlist-container');
- const refreshBtn = document.getElementById('spotify-refresh-btn');
-
- container.innerHTML = `🔄 Loading playlists...
`;
- refreshBtn.disabled = true;
- refreshBtn.textContent = '🔄 Loading...';
-
- try {
- const response = await fetch('/api/spotify/playlists');
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch playlists');
- }
- spotifyPlaylists = await response.json();
- renderSpotifyPlaylists();
- spotifyPlaylistsLoaded = true;
-
- await checkForActiveProcesses();
-
- } catch (error) {
- container.innerHTML = `❌ Error: ${error.message}
`;
- showToast(`Error loading playlists: ${error.message}`, 'error');
- } finally {
- refreshBtn.disabled = false;
- refreshBtn.textContent = '🔄 Refresh';
- }
-}
-
-function renderSpotifyPlaylists() {
- const container = document.getElementById('spotify-playlist-container');
- if (spotifyPlaylists.length === 0) {
- container.innerHTML = `No Spotify playlists found.
`;
- return;
- }
-
- container.innerHTML = spotifyPlaylists.map(p => {
- let statusClass = 'status-never-synced';
- if (p.sync_status.startsWith('Synced')) statusClass = 'status-synced';
- if (p.sync_status === 'Needs Sync') statusClass = 'status-needs-sync';
-
- // This HTML structure creates the interactive playlist cards
- return `
-
-
- `;
- }).join('');
-}
-
-function handleViewProgressClick(event, playlistId) {
- event.stopPropagation(); // Prevent the card selection from toggling
- const process = activeDownloadProcesses[playlistId];
-
- if (process && process.modalElement) {
- // If a process is active, just show its modal
- console.log(`Re-opening active download modal for playlist ${playlistId}`);
- process.modalElement.style.display = 'flex';
- }
-}
-
-function updatePlaylistCardUI(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- const progressBtn = document.getElementById(`progress-btn-${playlistId}`);
- const actionBtn = document.getElementById(`action-btn-${playlistId}`);
- const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
-
- if (!progressBtn || !actionBtn) return;
-
- if (process && process.status === 'running') {
- // A process is running: show the progress button
- progressBtn.classList.remove('hidden');
- progressBtn.textContent = 'View Progress';
- progressBtn.style.backgroundColor = ''; // Reset any custom styling
- actionBtn.textContent = '📥 Downloading...';
- actionBtn.disabled = true;
-
- // Remove completion styling from card
- if (card) card.classList.remove('download-complete');
-
- } else if (process && process.status === 'complete') {
- // Process completed: show "ready for review" indicator
- progressBtn.classList.remove('hidden');
- progressBtn.textContent = '📋 View Results';
- progressBtn.style.backgroundColor = '#28a745'; // Green success color
- progressBtn.style.color = 'white';
- actionBtn.textContent = '✅ Ready for Review';
- actionBtn.disabled = false; // Allow clicking to see results
-
- // Add completion styling to card
- if (card) card.classList.add('download-complete');
-
- } else {
- // No process or it's been cleaned up: normal state
- progressBtn.classList.add('hidden');
- progressBtn.style.backgroundColor = ''; // Reset styling
- progressBtn.style.color = ''; // Reset styling
- actionBtn.textContent = 'Sync / Download';
- actionBtn.disabled = false;
-
- // Remove completion styling from card
- if (card) card.classList.remove('download-complete');
- }
-}
-
-async function cleanupDownloadProcess(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (!process) return;
-
- console.log(`🧹 Cleaning up download process for playlist ${playlistId}`);
-
- // Stop any active polling first
- if (process.poller) {
- console.log(`🛑 Stopping individual polling for ${playlistId}`);
- clearInterval(process.poller);
- process.poller = null;
- }
-
- // Mark process as no longer running
- if (process.status === 'running') {
- process.status = 'complete';
- }
-
- // If the process has a batchId, tell the server to clean it up.
- if (process.batchId) {
- try {
- console.log(`🚀 Sending cleanup request to server for batch: ${process.batchId}`);
- const response = await fetch('/api/playlists/cleanup_batch', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ batch_id: process.batchId })
- });
-
- // Handle deferred cleanup (202 = wishlist processing in progress)
- if (response.status === 202) {
- console.log(`⏳ Wishlist processing in progress for batch ${process.batchId}, will retry cleanup in 2s...`);
- // Retry cleanup after delay to allow wishlist processing to complete
- setTimeout(async () => {
- try {
- await fetch('/api/playlists/cleanup_batch', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ batch_id: process.batchId })
- });
- console.log(`✅ Delayed cleanup completed for batch: ${process.batchId}`);
- } catch (error) {
- console.warn(`⚠️ Delayed cleanup failed:`, error);
- }
- }, 2000); // 2 second delay
- } else {
- console.log(`✅ Server cleanup completed for batch: ${process.batchId}`);
- }
- } catch (error) {
- console.warn(`⚠️ Failed to send cleanup request to server:`, error);
- // Don't show toast for cleanup failures - they're not user-facing
- }
- }
-
- // Remove modal from DOM
- if (process.modalElement && process.modalElement.parentElement) {
- process.modalElement.parentElement.removeChild(process.modalElement);
- }
-
- // Remove from client-side global state
- delete activeDownloadProcesses[playlistId];
-
- // Check if global polling should be stopped
- checkAndCleanupGlobalPolling();
-
- // Restore card UI (only for non-wishlist playlists)
- if (playlistId !== 'wishlist') {
- updatePlaylistCardUI(playlistId);
- }
- updateRefreshButtonState(); // Now safe since hasActiveOperations() excludes wishlist
-}
-
-function togglePlaylistSelection(event) {
- const card = event.currentTarget;
- const playlistId = card.dataset.playlistId;
-
- // Don't toggle if clicking the button
- if (event.target.tagName === 'BUTTON') return;
-
- const isSelected = !card.classList.contains('selected');
- card.classList.toggle('selected', isSelected);
-
- if (isSelected) {
- selectedPlaylists.add(playlistId);
- } else {
- selectedPlaylists.delete(playlistId);
- }
- updateSyncActionsUI();
-}
-
-function updateSyncActionsUI() {
- // If sequential sync is running, let the manager handle UI updates
- if (sequentialSyncManager && sequentialSyncManager.isRunning) {
- sequentialSyncManager.updateUI();
- return;
- }
-
- const selectionInfo = document.getElementById('selection-info');
- const startSyncBtn = document.getElementById('start-sync-btn');
- const count = selectedPlaylists.size;
-
- if (count === 0) {
- if (selectionInfo) selectionInfo.textContent = 'Select playlists to sync';
- if (startSyncBtn) startSyncBtn.disabled = true;
- } else {
- if (selectionInfo) selectionInfo.textContent = `${count} playlist${count > 1 ? 's' : ''} selected`;
- if (startSyncBtn) startSyncBtn.disabled = false;
- }
-}
-
-async function openPlaylistDetailsModal(event, playlistId) {
- event.stopPropagation();
-
- const playlist = spotifyPlaylists.find(p => p.id === playlistId);
- if (!playlist) return;
-
- showLoadingOverlay(`Loading playlist: ${playlist.name}...`);
-
- try {
- // --- CACHING LOGIC START ---
- if (playlistTrackCache[playlistId]) {
- console.log(`Cache HIT for playlist ${playlistId}. Using cached tracks.`);
- // Use the cached tracks instead of fetching
- const fullPlaylist = { ...playlist, tracks: playlistTrackCache[playlistId] };
- showPlaylistDetailsModal(fullPlaylist);
- } else {
- console.log(`Cache MISS for playlist ${playlistId}. Fetching from server...`);
- // Fetch from the server if not in cache
- const response = await fetch(`/api/spotify/playlist/${playlistId}`);
- const fullPlaylist = await response.json();
- if (fullPlaylist.error) throw new Error(fullPlaylist.error);
-
- // Store the fetched tracks in the cache
- playlistTrackCache[playlistId] = fullPlaylist.tracks;
- console.log(`Cached ${fullPlaylist.tracks.length} tracks for playlist ${playlistId}.`);
-
- // Auto-mirror this Spotify playlist
- mirrorPlaylist('spotify', playlistId, fullPlaylist.name, fullPlaylist.tracks.map(t => ({
- track_name: t.name, artist_name: (t.artists && t.artists[0]) ? (typeof t.artists[0] === 'object' ? t.artists[0].name : t.artists[0]) : '',
- album_name: t.album ? (typeof t.album === 'object' ? t.album.name : t.album) : '',
- duration_ms: t.duration_ms || 0,
- image_url: t.album && typeof t.album === 'object' && t.album.images && t.album.images[0] ? t.album.images[0].url : null,
- source_track_id: t.id || t.spotify_track_id || ''
- })), { description: fullPlaylist.description, owner: fullPlaylist.owner, image_url: fullPlaylist.image_url });
-
- showPlaylistDetailsModal(fullPlaylist);
- }
- // --- CACHING LOGIC END ---
-
- } catch (error) {
- showToast(`Error: ${error.message}`, 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-function showPlaylistDetailsModal(playlist) {
- // Create modal if it doesn't exist
- let modal = document.getElementById('playlist-details-modal');
- if (!modal) {
- modal = document.createElement('div');
- modal.id = 'playlist-details-modal';
- modal.className = 'modal-overlay';
- document.body.appendChild(modal);
- }
-
- // Check if there's a completed download missing tracks process for this playlist
- const activeProcess = activeDownloadProcesses[playlist.id];
- const hasCompletedProcess = activeProcess && activeProcess.status === 'complete';
-
- // Check if sync is currently running for this playlist
- const isSyncing = !!activeSyncPollers[playlist.id];
-
- modal.innerHTML = `
-
-
-
-
- ${escapeHtml(p.name)}
-
- ${p.track_count} tracks •
- ${p.sync_status}
-
-
-
-
-
-
-
-
- `;
-
- modal.style.display = 'flex';
-}
-
-function closePlaylistDetailsModal() {
- const modal = document.getElementById('playlist-details-modal');
- if (modal) {
- modal.style.display = 'none';
- }
-}
-
-function formatDuration(ms) {
- const minutes = Math.floor(ms / 60000);
- const seconds = Math.floor((ms % 60000) / 1000);
- return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-}
-
-// ===============================
-// DOWNLOAD MISSING TRACKS MODAL
-// ===============================
-
-let activeAnalysisTaskId = null;
-let currentPlaylistTracks = [];
-let analysisResults = [];
-let missingTracks = [];
-
-// New variables for enhanced modal functionality
-let currentDownloadBatchId = null;
-
-// ===============================
-// HERO SECTION HELPER FUNCTIONS
-// ===============================
-
-/**
- * Generate hero section HTML for download missing tracks modal
- * Context-aware display based on available data
- */
-function generateDownloadModalHeroSection(context) {
- const { type, playlist, artist, album, trackCount } = context;
-
- let heroContent = '';
- let heroBackgroundImage = '';
-
- switch (type) {
- case 'album':
- case 'artist_album':
- // Artist/album context - show artist + album images
- const artistImage = artist?.image_url || artist?.images?.[0]?.url;
- const albumImage = album?.image_url || album?.images?.[0]?.url;
-
- // Use album image as background if available
- if (albumImage) {
- heroBackgroundImage = ``;
- }
-
- heroContent = `
-
-
-
-
-
- ×
- ${escapeHtml(playlist.name)}
-
- ${playlist.track_count} tracks
- by ${escapeHtml(playlist.owner)}
-
-
-
-
- ${playlist.description ? `
-
-
- ${escapeHtml(playlist.description)}
` : ''}
-
-
-
-
- ${playlist.tracks.map((track, index) => `
-
-
- ${index + 1}
-
- `).join('')}
-
-
- ${escapeHtml(track.name)}
- ${formatArtists(track.artists)}
- ${formatDuration(track.duration_ms)}
-
-
- `;
- break;
-
- case 'playlist':
- // Playlist context - show playlist info
- heroContent = `
-
- ${artistImage ? `
` : ''}
- ${albumImage ? `
` : ''}
-
-
-
-
-
-
- `;
- break;
-
- case 'wishlist':
- // Wishlist context - show wishlist icon
- heroContent = `
-
-
-
-
- `;
- break;
-
- default:
- // Fallback - basic display
- heroContent = `
-
-
-
-
- `;
- break;
- }
-
- return `
-
- ${heroBackgroundImage}
- ${heroContent}
-
-
-
-
-
- ${context.trackCount}
- Total
-
-
- -
- Found
-
-
- -
- Missing
-
-
- 0
- Downloaded
-
- ×
-
- `;
-}
-let modalDownloadPoller = null;
-let currentModalPlaylistId = null;
-
-// PHASE 2: Local cancelled track management (GUI PARITY)
-let cancelledTracks = new Set(); // Track cancelled track indices like GUI's cancelled_tracks
-
-const TRACK_RENDER_BATCH_SIZE = 100;
-
-function applyProgressiveTrackRendering(playlistId, totalTrackCount) {
- if (totalTrackCount <= TRACK_RENDER_BATCH_SIZE) return;
-
- const modal = document.getElementById(`download-missing-modal-${playlistId}`);
- if (!modal) return;
-
- const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
- if (!tbody) return;
-
- const rows = tbody.querySelectorAll('tr[data-track-index]');
- if (rows.length <= TRACK_RENDER_BATCH_SIZE) return;
-
- // Hide rows beyond first batch
- for (let i = TRACK_RENDER_BATCH_SIZE; i < rows.length; i++) {
- rows[i].classList.add('hidden');
- }
-
- let revealedCount = TRACK_RENDER_BATCH_SIZE;
-
- // Append indicator into .download-tracks-title
- const titleEl = modal.querySelector('.download-tracks-title');
- if (titleEl) {
- const indicator = document.createElement('span');
- indicator.className = 'track-render-indicator';
- indicator.id = `track-render-indicator-${playlistId}`;
- indicator.textContent = `Showing ${revealedCount} of ${totalTrackCount} tracks`;
- titleEl.appendChild(indicator);
- }
-
- // Scroll listener on table container
- const container = modal.querySelector('.download-tracks-table-container');
- if (!container) return;
-
- container.addEventListener('scroll', function onScroll() {
- const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
- if (scrollBottom > 200) return;
- if (revealedCount >= rows.length) return;
-
- const nextEnd = Math.min(revealedCount + TRACK_RENDER_BATCH_SIZE, rows.length);
- for (let i = revealedCount; i < nextEnd; i++) {
- rows[i].classList.remove('hidden');
- }
- revealedCount = nextEnd;
-
- const indicator = document.getElementById(`track-render-indicator-${playlistId}`);
- if (indicator) {
- indicator.textContent = revealedCount >= rows.length
- ? `Showing all ${totalTrackCount} tracks`
- : `Showing ${revealedCount} of ${totalTrackCount} tracks`;
- }
-
- if (revealedCount >= rows.length) {
- container.removeEventListener('scroll', onScroll);
- }
- });
-}
-
-async function openDownloadMissingModal(playlistId) {
- showLoadingOverlay('Loading playlist...');
-
- // **NEW**: Check if a process is already active for this playlist
- if (activeDownloadProcesses[playlistId]) {
- console.log(`Modal for ${playlistId} already exists. Showing it.`);
- closePlaylistDetailsModal(); // Close playlist details modal even when reusing existing modal
- const process = activeDownloadProcesses[playlistId];
- if (process.modalElement) {
- // Show helpful message if it's a completed process
- if (process.status === 'complete') {
- showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
- }
- process.modalElement.style.display = 'flex';
- }
- hideLoadingOverlay();
- return; // Don't create a new one
- }
-
- console.log(`📥 Opening Download Missing Tracks modal for playlist: ${playlistId}`);
-
- closePlaylistDetailsModal();
- const playlist = spotifyPlaylists.find(p => p.id === playlistId);
- if (!playlist) {
- showToast('Could not find playlist data.', 'error');
- hideLoadingOverlay();
- return;
- }
-
- let tracks = playlistTrackCache[playlistId];
- if (!tracks) {
- try {
- const fetchUrl = playlistId.startsWith('deezer_arl_')
- ? `/api/deezer/arl-playlist/${playlistId.replace('deezer_arl_', '')}`
- : `/api/spotify/playlist/${playlistId}`;
- const response = await fetch(fetchUrl);
- const fullPlaylist = await response.json();
- if (fullPlaylist.error) throw new Error(fullPlaylist.error);
- tracks = fullPlaylist.tracks;
- playlistTrackCache[playlistId] = tracks;
- } catch (error) {
- showToast(`Failed to fetch tracks: ${error.message}`, 'error');
- hideLoadingOverlay();
- return;
- }
- }
-
- currentPlaylistTracks = tracks;
- currentModalPlaylistId = playlistId;
-
- let modal = document.createElement('div');
- modal.id = `download-missing-modal-${playlistId}`; // **NEW**: Unique ID
- modal.className = 'download-missing-modal'; // **NEW**: Use class for styling
- modal.style.display = 'none'; // Start hidden
- document.body.appendChild(modal);
-
- // **NEW**: Register the new process in our global state tracker
- activeDownloadProcesses[playlistId] = {
- status: 'idle', // idle, running, complete, cancelled
- modalElement: modal,
- poller: null,
- batchId: null,
- playlist: playlist,
- tracks: tracks
- };
-
- // Generate hero section for playlist context
- const heroContext = {
- type: 'playlist',
- playlist: playlist,
- trackCount: tracks.length,
- playlistId: playlistId
- };
-
- modal.innerHTML = `
-
- `;
-
- applyProgressiveTrackRendering(playlistId, tracks.length);
- modal.style.display = 'flex';
- hideLoadingOverlay();
-}
-
-async function autoSavePlaylistM3U(playlistId) {
- /**
- * Automatically save M3U file server-side for playlist modals only.
- * Albums are skipped — they're already grouped by media servers.
- * The server checks the m3u_export.enabled setting before writing.
- * Uses real DB file paths via /api/generate-playlist-m3u.
- */
- const process = activeDownloadProcesses[playlistId];
- if (!process || !process.tracks || process.tracks.length === 0) {
- return;
- }
-
- const modal = document.getElementById(`download-missing-modal-${playlistId}`);
- if (!modal) return;
-
- // Skip M3U for non-playlist downloads — albums, singles, redownloads, etc.
- const nonPlaylistPrefixes = [
- 'artist_album_', 'discover_album_', 'enhanced_search_album_', 'enhanced_search_track_',
- 'seasonal_album_', 'spotify_library_', 'beatport_release_', 'discover_cache_',
- 'issue_download_', 'library_redownload_', 'redownload_',
- ];
- if (nonPlaylistPrefixes.some(p => playlistId.startsWith(p))) return;
-
- const playlistName = process.playlist?.name || process.playlistName || 'Playlist';
- const artistName = process.artist?.name || '';
- const albumName = process.album?.name || '';
- const releaseDate = process.album?.release_date || '';
- const year = releaseDate ? releaseDate.substring(0, 4) : '';
-
- try {
- const response = await fetch('/api/generate-playlist-m3u', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- playlist_name: playlistName,
- tracks: _extractM3UTracks(process.tracks),
- context_type: 'playlist',
- artist_name: artistName,
- album_name: albumName,
- year: year,
- save_to_disk: true
- })
- });
-
- if (response.ok) {
- console.log(`✅ Auto-saved M3U for playlist: ${playlistName}`);
- } else {
- console.warn(`⚠️ Failed to auto-save M3U for ${playlistName}`);
- }
- } catch (error) {
- console.debug('Auto-save M3U error (non-critical):', error);
- }
-}
-
-function generateM3UContent(playlistId) {
- /**
- * Generate M3U file content from modal data
- * Shared between manual export and auto-save
- */
- const process = activeDownloadProcesses[playlistId];
- if (!process || !process.tracks || process.tracks.length === 0) {
- return null;
- }
-
- const tracks = process.tracks;
- const playlistName = process.playlist?.name || process.playlistName || 'Playlist';
-
- // Generate M3U8 content with status information
- let m3uContent = '#EXTM3U\n';
- m3uContent += `#PLAYLIST:${playlistName}\n`;
- m3uContent += `#GENERATED:${new Date().toISOString()}\n\n`;
-
- let foundCount = 0;
- let downloadedCount = 0;
- let missingCount = 0;
-
- tracks.forEach((track, index) => {
- const durationSeconds = track.duration_ms ? Math.floor(track.duration_ms / 1000) : -1;
- let artists = 'Unknown Artist';
- if (Array.isArray(track.artists)) {
- artists = track.artists.map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : String(a)).filter(Boolean).join(', ') || 'Unknown Artist';
- } else if (typeof track.artists === 'string') {
- artists = track.artists;
- } else if (track.artist) {
- artists = typeof track.artist === 'object' ? (track.artist.name || 'Unknown Artist') : String(track.artist);
- }
-
- // Check library match status from the modal UI
- const matchEl = document.getElementById(`match-${playlistId}-${index}`);
- const downloadEl = document.getElementById(`download-${playlistId}-${index}`);
-
- const isFoundInLibrary = matchEl && matchEl.textContent.includes('Found');
- const isDownloaded = downloadEl && downloadEl.textContent.includes('Completed');
- const isMissing = matchEl && matchEl.textContent.includes('Missing');
-
- // Track status
- let status = 'UNKNOWN';
- if (isDownloaded) {
- status = 'DOWNLOADED';
- downloadedCount++;
- } else if (isFoundInLibrary) {
- status = 'FOUND_IN_LIBRARY';
- foundCount++;
- } else if (isMissing) {
- status = 'MISSING';
- missingCount++;
- }
-
- // Add track info
- m3uContent += `#EXTINF:${durationSeconds},${artists} - ${track.name}\n`;
- m3uContent += `#STATUS:${status}\n`;
-
- // Generate file path
- const sanitizedArtist = artists.replace(/[/\\?%*:|"<>]/g, '-');
- const sanitizedTrack = track.name.replace(/[/\\?%*:|"<>]/g, '-');
-
- if (isDownloaded || isFoundInLibrary) {
- m3uContent += `${sanitizedArtist} - ${sanitizedTrack}.mp3\n\n`;
- } else {
- m3uContent += `# NOT AVAILABLE: ${sanitizedArtist} - ${sanitizedTrack}.mp3\n\n`;
- }
- });
-
- // Add summary
- m3uContent += `#SUMMARY\n`;
- m3uContent += `#TOTAL_TRACKS:${tracks.length}\n`;
- m3uContent += `#FOUND_IN_LIBRARY:${foundCount}\n`;
- m3uContent += `#DOWNLOADED:${downloadedCount}\n`;
- m3uContent += `#MISSING:${missingCount}\n`;
-
- return m3uContent;
-}
-
-async function exportPlaylistAsM3U(playlistId) {
- /**
- * Export the tracks from the download missing tracks modal as an M3U playlist file.
- * Downloads via browser AND saves server-side to the relevant folder (force=true).
- * Uses real DB file paths via /api/generate-playlist-m3u.
- */
- console.log(`📋 Exporting playlist ${playlistId} as M3U`);
-
- const process = activeDownloadProcesses[playlistId];
- if (!process || !process.tracks || process.tracks.length === 0) {
- showToast('No tracks available to export', 'warning');
- return;
- }
-
- const playlistName = process.playlist?.name || process.playlistName || 'Playlist';
- const albumPrefixes = ['artist_album_', 'discover_album_', 'enhanced_search_album_', 'seasonal_album_', 'spotify_library_', 'beatport_release_', 'discover_cache_'];
- const isAlbumExport = albumPrefixes.some(p => playlistId.startsWith(p));
- const releaseDate = process.album?.release_date || '';
- const year = releaseDate ? releaseDate.substring(0, 4) : '';
-
- let m3uContent, foundCount, missingCount;
- try {
- const response = await fetch('/api/generate-playlist-m3u', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- playlist_name: playlistName,
- tracks: _extractM3UTracks(process.tracks),
- context_type: isAlbumExport ? 'album' : 'playlist',
- artist_name: process.artist?.name || '',
- album_name: process.album?.name || '',
- year: year,
- save_to_disk: true,
- force: true
- })
- });
- const data = await response.json();
- if (!data.success) throw new Error(data.error || 'Unknown error');
- m3uContent = data.m3u_content;
- foundCount = (data.stats?.found || 0) + (data.stats?.downloaded || 0);
- missingCount = data.stats?.missing || 0;
- } catch (error) {
- showToast('Failed to generate M3U content', 'error');
- console.error('M3U export error:', error);
- return;
- }
-
- // Browser download
- const blob = new Blob([m3uContent], { type: 'audio/x-mpegurl;charset=utf-8' });
- const url = URL.createObjectURL(blob);
- const link = document.createElement('a');
- link.href = url;
- link.download = `${playlistName.replace(/[/\\?%*:|"<>]/g, '-')}.m3u`;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- URL.revokeObjectURL(url);
-
- showToast(`Exported M3U: ${foundCount} available, ${missingCount} missing`, 'success');
- console.log(`✅ Exported M3U - Total: ${process.tracks.length}, Available: ${foundCount}, Missing: ${missingCount}`);
-}
-
-function _extractM3UTracks(tracks) {
- /** Extract simplified track data for the /api/generate-playlist-m3u endpoint. */
- return tracks.map(t => {
- let artist = '';
- if (Array.isArray(t.artists)) {
- const first = t.artists[0];
- artist = typeof first === 'object' ? (first.name || '') : String(first || '');
- } else if (typeof t.artists === 'string') {
- artist = t.artists;
- } else if (t.artist) {
- artist = typeof t.artist === 'object' ? (t.artist.name || '') : String(t.artist);
- }
- return { name: t.name || '', artist, duration_ms: t.duration_ms || 0 };
- });
-}
-
-// ==================================================================================
-// WING IT — Download without metadata discovery
-// ==================================================================================
-
-function _toggleWingItDropdown(btn, urlHash) {
- // Remove any existing dropdown
- const existing = document.querySelector('.wing-it-dropdown.visible');
- if (existing) { existing.classList.remove('visible'); setTimeout(() => existing.remove(), 150); return; }
-
- const wrap = btn.closest('.wing-it-wrap');
- if (!wrap) return;
-
- const dropdown = document.createElement('div');
- dropdown.className = 'wing-it-dropdown';
- dropdown.innerHTML = `
-
-
- `;
-
- dropdown.querySelectorAll('.wing-it-dropdown-item').forEach(item => {
- item.addEventListener('click', () => {
- dropdown.classList.remove('visible');
- setTimeout(() => dropdown.remove(), 150);
- const action = item.dataset.action;
- if (action === 'download') {
- _wingItAction(urlHash, 'download');
- } else {
- _wingItAction(urlHash, 'sync');
- }
- });
- });
-
- // Flip dropdown direction if button is in the top portion of viewport
- const btnRect = btn.getBoundingClientRect();
- if (btnRect.top < 200) dropdown.classList.add('flip-down');
-
- wrap.appendChild(dropdown);
- requestAnimationFrame(() => dropdown.classList.add('visible'));
-
- // Close on outside click
- setTimeout(() => {
- const closeHandler = e => {
- if (!dropdown.contains(e.target) && e.target !== btn) {
- dropdown.classList.remove('visible');
- setTimeout(() => dropdown.remove(), 150);
- document.removeEventListener('click', closeHandler);
- }
- };
- document.addEventListener('click', closeHandler);
- }, 50);
-}
-
-function _wingItAction(urlHash, action) {
- if (urlHash) {
- // Called from a modal — use _wingItFromModal logic
- const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash] || {};
- const tracks = state.tracks || state.rawTracks || state.playlist?.tracks || [];
- const name = state.playlistName || state.name || state.playlist?.name || 'Playlist';
- const isTidal = state.is_tidal_playlist;
- const isLB = state.is_listenbrainz_playlist;
- const isBeatport = state.is_beatport_playlist;
- const isDeezer = state.is_deezer_playlist;
- const source = isLB ? 'ListenBrainz' : isTidal ? 'Tidal' : isDeezer ? 'Deezer' : isBeatport ? 'Beatport' : 'YouTube';
-
- if (!tracks.length) {
- showToast('No tracks available for Wing It', 'error');
- return;
- }
-
- if (action === 'sync') {
- // Sync inline — keep modal open
- _wingItSyncFromModal(urlHash, tracks, name, isLB);
- } else {
- // Download — close modal, open download modal
- const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (modal) modal.remove();
- const overlay = document.getElementById(`youtube-discovery-overlay-${urlHash}`);
- if (overlay) overlay.remove();
- wingItDownload(tracks, name, source, null, true);
- }
- }
-}
-
-async function _wingItSyncFromModal(urlHash, tracks, name, isLB) {
- showToast('Starting Wing It sync...', 'info');
- updateYouTubeModalButtons(urlHash, 'syncing');
-
- try {
- const syncTracks = tracks.map((t, i) => {
- let artists = t.artists || [];
- if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
- return {
- id: t.id || t.source_track_id || `wing_it_${i}`,
- name: t.name || t.track_name || 'Unknown',
- artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
- album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
- duration_ms: t.duration_ms || 0,
- };
- });
-
- const res = await fetch('/api/wing-it/sync', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ tracks: syncTracks, playlist_name: name })
- });
- const data = await res.json();
-
- if (data.error) {
- showToast(`Sync failed: ${data.error}`, 'error');
- updateYouTubeModalButtons(urlHash, 'discovered');
- return;
- }
-
- if (isLB) {
- const state = listenbrainzPlaylistStates[urlHash];
- if (state) state.syncPlaylistId = data.sync_playlist_id;
- startListenBrainzSyncPolling(urlHash, data.sync_playlist_id);
- } else {
- startYouTubeSyncPolling(urlHash, data.sync_playlist_id);
- }
- } catch (e) {
- showToast('Sync failed: ' + e.message, 'error');
- updateYouTubeModalButtons(urlHash, 'discovered');
- }
-}
-
-async function wingItDownload(tracks, playlistName, source = 'playlist', cardIdentifier = null, skipConfirm = false) {
- if (!tracks || tracks.length === 0) {
- showToast('No tracks to download', 'error');
- return;
- }
-
- if (!skipConfirm) {
- // Show choice: Download or Sync (for LB card button which doesn't have dropdown)
- const choice = await _showWingItChoiceDialog(tracks.length, source);
- if (!choice) return;
-
- if (choice === 'sync') {
- await _wingItSync(tracks, playlistName, source, cardIdentifier);
- return;
- }
- }
-
- // Normalize tracks to Spotify-compatible format
- const formattedTracks = tracks.map(t => {
- // Handle various artist formats
- let artists = [];
- if (t.artists) {
- if (Array.isArray(t.artists)) {
- artists = t.artists.map(a => typeof a === 'string' ? { name: a } : a);
- } else if (typeof t.artists === 'string') {
- artists = [{ name: t.artists }];
- }
- } else if (t.artist_name) {
- artists = [{ name: t.artist_name }];
- } else if (t.artist) {
- artists = [{ name: t.artist }];
- }
- if (artists.length === 0) artists = [{ name: 'Unknown' }];
-
- // Handle album
- let album = { name: '' };
- if (t.album) {
- album = typeof t.album === 'string' ? { name: t.album } : t.album;
- } else if (t.album_name) {
- album = { name: t.album_name };
- }
-
- return {
- id: t.id || t.source_track_id || `wing_it_${Date.now()}_${Math.random()}`,
- name: t.name || t.track_name || 'Unknown Track',
- artists: artists,
- duration_ms: t.duration_ms || 0,
- album: album,
- };
- });
-
- const virtualPlaylistId = `wing_it_${Date.now()}`;
-
- // Store wing_it flag BEFORE opening the modal
- youtubePlaylistStates[virtualPlaylistId] = {
- wing_it: true,
- tracks: formattedTracks,
- };
-
- await openDownloadMissingModalForYouTube(virtualPlaylistId, `⚡ ${playlistName}`, formattedTracks);
-
- // Pre-check the Force Download toggle
- setTimeout(() => {
- const forceToggle = document.getElementById(`force-download-all-${virtualPlaylistId}`);
- if (forceToggle && !forceToggle.checked) forceToggle.checked = true;
- }, 800);
-}
-
-function _showWingItChoiceDialog(trackCount, source) {
- return new Promise(resolve => {
- const overlay = document.createElement('div');
- overlay.className = 'modal-overlay';
- overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
- const close = val => { overlay.remove(); resolve(val); };
- overlay.onclick = e => { if (e.target === overlay) close(null); };
-
- overlay.innerHTML = `
-
-
- `;
-
- overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
- btn.addEventListener('click', () => close(btn.dataset.choice));
- });
- overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
- const escH = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escH); close(null); } };
- document.addEventListener('keydown', escH);
- document.body.appendChild(overlay);
- });
-}
-
-async function _wingItSync(tracks, playlistName, source, cardIdentifier = null) {
- try {
- showToast('Syncing playlist to server...', 'info');
-
- // Format tracks for the sync endpoint
- const syncTracks = tracks.map((t, i) => {
- let artists = t.artists || [];
- if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
- return {
- id: t.id || t.source_track_id || `wing_it_${i}`,
- name: t.name || t.track_name || 'Unknown',
- artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
- album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
- duration_ms: t.duration_ms || 0,
- artist_name: t.artist_name,
- };
- });
-
- const res = await fetch('/api/wing-it/sync', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ tracks: syncTracks, playlist_name: playlistName })
- });
- const data = await res.json();
-
- if (data.error) {
- showToast(`Sync failed: ${data.error}`, 'error');
- return;
- }
-
- // Show inline sync status on the card (same display as normal sync)
- const playlistId = cardIdentifier ? `discover-lb-playlist-${cardIdentifier}` : null;
- if (playlistId) {
- const statusDisplay = document.getElementById(`${playlistId}-sync-status`);
- if (statusDisplay) statusDisplay.style.display = 'block';
- // Disable sync/wing-it buttons during sync
- const syncBtn = document.getElementById(`${playlistId}-sync-btn`);
- if (syncBtn) { syncBtn.disabled = true; syncBtn.style.opacity = '0.5'; }
- }
-
- // Poll for sync progress — update inline display
- if (data.sync_playlist_id) {
- _pollWingItSyncProgress(data.sync_playlist_id, playlistName, playlistId);
- }
-
- } catch (e) {
- showToast('Sync failed: ' + e.message, 'error');
- }
-}
-
-function _pollWingItSyncProgress(syncPlaylistId, playlistName, cardPlaylistId) {
- const poll = setInterval(async () => {
- try {
- const res = await fetch(`/api/sync/status/${syncPlaylistId}`);
- const data = await res.json();
-
- // Update inline status display if we have a card
- if (cardPlaylistId && data.progress) {
- const p = data.progress;
- const total = p.total_tracks || p.total || 0;
- const matched = p.matched_tracks || p.matched || 0;
- const failed = p.failed_tracks || p.failed || 0;
- const totalEl = document.getElementById(`${cardPlaylistId}-sync-total`);
- const matchedEl = document.getElementById(`${cardPlaylistId}-sync-matched`);
- const failedEl = document.getElementById(`${cardPlaylistId}-sync-failed`);
- const pctEl = document.getElementById(`${cardPlaylistId}-sync-percentage`);
- if (totalEl) totalEl.textContent = total;
- if (matchedEl) matchedEl.textContent = matched;
- if (failedEl) failedEl.textContent = failed;
- if (pctEl) pctEl.textContent = total > 0 ? Math.round((matched / total) * 100) : 0;
- }
-
- if (data.status === 'finished' || data.status === 'complete' || data.status === 'error') {
- clearInterval(poll);
- const matched = data.progress?.matched_tracks || data.progress?.matched || 0;
- const total = data.progress?.total_tracks || data.progress?.total || 0;
-
- if (data.status === 'error') {
- showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
- } else {
- showToast(`⚡ Wing It sync complete — "${playlistName}" created on server (${matched}/${total} tracks matched)`, 'success');
- }
-
- // Update card status display to show completion
- if (cardPlaylistId) {
- const statusLabel = document.querySelector(`#${cardPlaylistId}-sync-status .sync-status-label span:last-child`);
- if (statusLabel) statusLabel.textContent = `Sync complete — ${matched}/${total} matched`;
- const syncIcon = document.querySelector(`#${cardPlaylistId}-sync-status .sync-icon`);
- if (syncIcon) syncIcon.textContent = '✓';
- }
- }
- } catch (e) { /* ignore poll errors */ }
- }, 2000);
-
- // Safety timeout
- setTimeout(() => clearInterval(poll), 180000);
-}
-
-async function _wingItFromModal(urlHash) {
- // Extract tracks from the discovery modal state — tracks can be in various locations
- const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash] || {};
- const tracks = state.tracks || state.rawTracks || state.playlist?.tracks || [];
- const name = state.playlistName || state.name || state.playlist?.name || 'Playlist';
- const isTidal = state.is_tidal_playlist;
- const isLB = state.is_listenbrainz_playlist;
- const isBeatport = state.is_beatport_playlist;
- const isDeezer = state.is_deezer_playlist;
- const source = isLB ? 'ListenBrainz' : isTidal ? 'Tidal' : isDeezer ? 'Deezer' : isBeatport ? 'Beatport' : 'YouTube';
-
- if (!tracks.length) {
- showToast('No tracks available for Wing It', 'error');
- return;
- }
-
- const choice = await _showWingItChoiceDialog(tracks.length, source);
- if (!choice) return;
-
- if (choice === 'sync') {
- // Sync inline — keep modal open, show progress in modal
- showToast('Starting Wing It sync...', 'info');
- updateYouTubeModalButtons(urlHash, 'syncing');
-
- try {
- // Format and send sync request
- const syncTracks = tracks.map((t, i) => {
- let artists = t.artists || [];
- if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
- return {
- id: t.id || t.source_track_id || `wing_it_${i}`,
- name: t.name || t.track_name || 'Unknown',
- artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
- album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
- duration_ms: t.duration_ms || 0,
- };
- });
-
- const res = await fetch('/api/wing-it/sync', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ tracks: syncTracks, playlist_name: name })
- });
- const data = await res.json();
-
- if (data.error) {
- showToast(`Sync failed: ${data.error}`, 'error');
- updateYouTubeModalButtons(urlHash, 'discovered');
- return;
- }
-
- // Use the same sync polling as normal sync — works for any source
- if (isLB) {
- if (state) state.syncPlaylistId = data.sync_playlist_id;
- startListenBrainzSyncPolling(urlHash, data.sync_playlist_id);
- } else {
- startYouTubeSyncPolling(urlHash, data.sync_playlist_id);
- }
- } catch (e) {
- showToast('Sync failed: ' + e.message, 'error');
- updateYouTubeModalButtons(urlHash, 'discovered');
- }
- return;
- }
-
- // choice === 'download' — close modal and open download modal
- const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (modal) modal.remove();
- const overlay = document.getElementById(`youtube-discovery-overlay-${urlHash}`);
- if (overlay) overlay.remove();
-
- wingItDownload(tracks, name, source);
-}
-
-async function openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks, artist = null, album = null) {
- showLoadingOverlay('Loading YouTube playlist...');
- // Check if a process is already active for this virtual playlist
- if (activeDownloadProcesses[virtualPlaylistId]) {
- console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process.modalElement) {
- if (process.status === 'complete') {
- showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
- }
- process.modalElement.style.display = 'flex';
- }
- hideLoadingOverlay(); // Hide overlay when reopening existing modal
- return;
- }
-
- console.log(`📥 Opening Download Missing Tracks modal for YouTube playlist: ${virtualPlaylistId}`);
-
- // Create virtual playlist object for compatibility with existing modal logic
- const virtualPlaylist = {
- id: virtualPlaylistId,
- name: playlistName,
- track_count: spotifyTracks.length
- };
-
- // Store the tracks in the cache for the modal to use
- playlistTrackCache[virtualPlaylistId] = spotifyTracks;
- currentPlaylistTracks = spotifyTracks;
- currentModalPlaylistId = virtualPlaylistId;
-
- let modal = document.createElement('div');
- modal.id = `download-missing-modal-${virtualPlaylistId}`;
- modal.className = 'download-missing-modal';
- modal.style.display = 'none';
- document.body.appendChild(modal);
-
- // Register the new process in our global state tracker using the same structure as Spotify
- activeDownloadProcesses[virtualPlaylistId] = {
- status: 'idle',
- modalElement: modal,
- poller: null,
- batchId: null,
- playlist: virtualPlaylist,
- tracks: spotifyTracks,
- artist: artist, // ✅ Store artist context
- album: album // ✅ Store album context
- };
-
- // Generate hero section with dynamic source detection
- const source = virtualPlaylistId.startsWith('beatport_') ? 'Beatport' :
- virtualPlaylistId.startsWith('tidal_') ? 'Tidal' :
- virtualPlaylistId.startsWith('listenbrainz_') ? 'ListenBrainz' :
- virtualPlaylistId.startsWith('spotify_public_') ? 'Spotify' :
- virtualPlaylistId.startsWith('spotify:') ? 'Spotify' :
- virtualPlaylistId.startsWith('discover_') ? 'SoulSync' :
- virtualPlaylistId.startsWith('seasonal_') ? 'SoulSync' :
- virtualPlaylistId.startsWith('spotify_library_') ? 'SoulSync' :
- virtualPlaylistId.startsWith('build_playlist_') ? 'SoulSync' :
- virtualPlaylistId.startsWith('decade_') ? 'SoulSync' :
- virtualPlaylistId === 'build_playlist_custom' ? 'SoulSync' :
- 'YouTube';
-
- // Store metadata for discover download sidebar (will be added when Begin Analysis is clicked)
- if (source === 'SoulSync' || virtualPlaylistId.startsWith('discover_lb_') || virtualPlaylistId.startsWith('listenbrainz_') || virtualPlaylistId.startsWith('wing_it_')) {
- // Extract image URL from album context or first track's album cover
- let imageUrl = null;
- if (album && album.images && album.images.length > 0) {
- imageUrl = album.images[0].url;
- } else if (spotifyTracks && spotifyTracks.length > 0) {
- const firstTrack = spotifyTracks[0];
- if (firstTrack.album && firstTrack.album.images && firstTrack.album.images.length > 0) {
- imageUrl = firstTrack.album.images[0].url;
- }
- }
- // Store in process for later use when Begin Analysis is clicked
- activeDownloadProcesses[virtualPlaylistId].discoverMetadata = {
- imageUrl: imageUrl,
- type: album ? 'album' : 'playlist' // ✅ Use 'album' if album context provided
- };
- }
-
- // CRITICAL FIX: Use album context for discover_album playlists
- const isDiscoverAlbum = virtualPlaylistId.startsWith('discover_album_') || virtualPlaylistId.startsWith('discover_cache_') || virtualPlaylistId.startsWith('seasonal_album_') || virtualPlaylistId.startsWith('spotify_library_');
- const heroContext = isDiscoverAlbum && album && artist ? {
- type: 'album',
- artist: {
- name: artist.name,
- image_url: artist.image_url || null
- },
- album: {
- name: album.name,
- album_type: album.album_type || 'album',
- images: album.images || []
- },
- trackCount: spotifyTracks.length,
- playlistId: virtualPlaylistId
- } : {
- type: 'playlist',
- playlist: { name: playlistName, owner: source },
- trackCount: spotifyTracks.length,
- playlistId: virtualPlaylistId
- };
-
- // Use the exact same modal HTML structure as the existing Spotify modal
- modal.innerHTML = `
-
- `;
-
- applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
- modal.style.display = 'flex';
- hideLoadingOverlay();
-}
-
-function _navigateToArtistFromModal(artistId, artistName, imageUrl, source, playlistId) {
- if (!artistName) return;
- // Close the download modal
- if (playlistId) closeDownloadMissingModal(playlistId);
- // Navigate to Artists page and load discography
- navigateToPage('artists');
- setTimeout(() => {
- // If we have an artist ID, use it directly
- // If not, search by name — selectArtistForDetail handles both
- selectArtistForDetail(
- { id: artistId || artistName, name: artistName, image_url: imageUrl || '' },
- source ? { source: source } : undefined
- );
- }, 200);
-}
-
-async function closeDownloadMissingModal(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (!process) {
- // If somehow called without a process, try to find and remove the element
- const modal = document.getElementById(`download-missing-modal-${playlistId}`);
- if (modal && modal.parentElement) {
- modal.parentElement.removeChild(modal);
- }
- return;
- }
-
- // If the process is running, just hide the modal.
- // If it's idle, complete, or cancelled, perform a full cleanup.
- if (process.status === 'running') {
- console.log(`Hiding active download modal for playlist ${playlistId}.`);
- process.modalElement.style.display = 'none';
-
- // Track wishlist modal state changes
- if (playlistId === 'wishlist') {
- WishlistModalState.setUserClosed(); // User manually closed during processing
- console.log('📱 [Modal State] User manually closed wishlist modal during processing');
- }
- } else {
- console.log(`Closing and cleaning up download modal for playlist ${playlistId}.`);
-
- // Reset YouTube playlist phase to 'discovered' when modal is closed after completion
- if (playlistId.startsWith('youtube_')) {
- const urlHash = playlistId.replace('youtube_', '');
- updateYouTubeCardPhase(urlHash, 'discovered');
- // Also update mirrored playlist card if applicable
- if (urlHash.startsWith('mirrored_')) {
- updateMirroredCardPhase(urlHash, 'discovered');
- }
-
- // Update backend state to prevent rehydration issues on page refresh (similar to Tidal fix)
- try {
- const response = await fetch(`/api/youtube/update_phase/${urlHash}`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- phase: 'discovered'
- })
- });
-
- if (response.ok) {
- console.log(`✅ [Modal Close] Updated backend phase for YouTube playlist ${urlHash} to 'discovered'`);
- } else {
- console.warn(`⚠️ [Modal Close] Failed to update backend phase for YouTube playlist ${urlHash}`);
- }
- } catch (error) {
- console.error(`❌ [Modal Close] Error updating backend phase for YouTube playlist ${urlHash}:`, error);
- }
- }
-
- // Reset Beatport chart phase to 'discovered' when modal is closed
- if (playlistId.startsWith('beatport_')) {
- const urlHash = playlistId.replace('beatport_', '');
- const state = youtubePlaylistStates[urlHash];
-
- if (state && state.is_beatport_playlist) {
- console.log(`🧹 [Modal Close] Processing Beatport chart close: playlistId="${playlistId}", urlHash="${urlHash}"`);
-
- const chartHash = state.beatport_chart_hash || urlHash;
-
- // Reset to discovered phase (unless download actually started and completed)
- if (state.phase !== 'download_complete') {
- updateBeatportCardPhase(chartHash, 'discovered');
- state.phase = 'discovered';
-
- // Update Beatport chart state
- if (beatportChartStates[chartHash]) {
- beatportChartStates[chartHash].phase = 'discovered';
- }
-
- // Update backend state
- try {
- await fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ phase: 'discovered' })
- });
- console.log(`✅ [Modal Close] Updated backend phase for Beatport chart ${chartHash} to 'discovered'`);
- } catch (error) {
- console.error(`❌ [Modal Close] Error updating backend phase for Beatport chart ${chartHash}:`, error);
- }
- }
- }
- }
-
- // Enhanced Tidal playlist state management (based on GUI sync.py patterns)
- if (playlistId.startsWith('tidal_')) {
- const tidalPlaylistId = playlistId.replace('tidal_', '');
-
- console.log(`🧹 [Modal Close] Processing Tidal playlist close: playlistId="${playlistId}", tidalPlaylistId="${tidalPlaylistId}"`);
- console.log(`🧹 [Modal Close] Current Tidal state:`, tidalPlaylistStates[tidalPlaylistId]);
-
- // Clear download-specific state but preserve discovery results (like GUI closeEvent)
- if (tidalPlaylistStates[tidalPlaylistId]) {
- const currentPhase = tidalPlaylistStates[tidalPlaylistId].phase;
- console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
-
- // Preserve discovery data for future use (like GUI modal behavior)
- const preservedData = {
- playlist: tidalPlaylistStates[tidalPlaylistId].playlist,
- discovery_results: tidalPlaylistStates[tidalPlaylistId].discovery_results,
- spotify_matches: tidalPlaylistStates[tidalPlaylistId].spotify_matches,
- discovery_progress: tidalPlaylistStates[tidalPlaylistId].discovery_progress,
- convertedSpotifyPlaylistId: tidalPlaylistStates[tidalPlaylistId].convertedSpotifyPlaylistId
- };
-
- // Clear download-specific state
- delete tidalPlaylistStates[tidalPlaylistId].download_process_id;
- delete tidalPlaylistStates[tidalPlaylistId].phase;
-
- // Restore preserved data and set to discovered phase
- Object.assign(tidalPlaylistStates[tidalPlaylistId], preservedData);
- tidalPlaylistStates[tidalPlaylistId].phase = 'discovered';
-
- console.log(`🧹 [Modal Close] Reset Tidal playlist ${tidalPlaylistId} - cleared download state, preserved discovery data`);
- console.log(`🧹 [Modal Close] New phase after reset: ${tidalPlaylistStates[tidalPlaylistId].phase}`);
- } else {
- console.error(`❌ [Modal Close] No Tidal state found for playlistId: ${tidalPlaylistId}`);
- }
-
- updateTidalCardPhase(tidalPlaylistId, 'discovered');
- console.log(`🔄 [Modal Close] Reset Tidal playlist ${tidalPlaylistId} to discovered phase`);
- console.log(`📝 [Modal Close] Expected button text for discovered phase: "${getActionButtonText('discovered')}"`);
-
- // Update backend state to prevent rehydration issues on page refresh
- try {
- const response = await fetch(`/api/tidal/update_phase/${tidalPlaylistId}`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- phase: 'discovered'
- })
- });
-
- if (response.ok) {
- console.log(`✅ [Modal Close] Updated backend phase for Tidal playlist ${tidalPlaylistId} to 'discovered'`);
- } else {
- console.warn(`⚠️ [Modal Close] Failed to update backend phase for Tidal playlist ${tidalPlaylistId}`);
- }
- } catch (error) {
- console.error(`❌ [Modal Close] Error updating backend phase for Tidal playlist ${tidalPlaylistId}:`, error);
- }
- }
-
- // Reset ListenBrainz playlist phase to 'discovered' when modal is closed
- if (playlistId.startsWith('listenbrainz_')) {
- const playlistMbid = playlistId.replace('listenbrainz_', '');
-
- console.log(`🧹 [Modal Close] Processing ListenBrainz playlist close: playlistId="${playlistId}", mbid="${playlistMbid}"`);
-
- // Clear download-specific state but preserve discovery results
- if (listenbrainzPlaylistStates[playlistMbid]) {
- const currentPhase = listenbrainzPlaylistStates[playlistMbid].phase;
- console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
-
- // Reset to discovered phase (unless download actually completed successfully)
- if (currentPhase !== 'download_complete') {
- // Clear download-specific fields
- delete listenbrainzPlaylistStates[playlistMbid].download_process_id;
- delete listenbrainzPlaylistStates[playlistMbid].convertedSpotifyPlaylistId;
-
- // Set back to discovered
- listenbrainzPlaylistStates[playlistMbid].phase = 'discovered';
-
- // Update backend state
- try {
- await fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ phase: 'discovered' })
- });
- console.log(`✅ [Modal Close] Updated backend phase for ListenBrainz playlist ${playlistMbid} to 'discovered'`);
- } catch (error) {
- console.error(`❌ [Modal Close] Error updating backend phase for ListenBrainz playlist ${playlistMbid}:`, error);
- }
-
- console.log(`🔄 [Modal Close] Reset ListenBrainz playlist ${playlistMbid} to discovered phase`);
- }
- } else {
- console.error(`❌ [Modal Close] No ListenBrainz state found for mbid: ${playlistMbid}`);
- }
- }
-
- // Reset Spotify Public playlist phase to 'discovered' when modal is closed
- if (playlistId.startsWith('spotify_public_')) {
- const spUrlHash = playlistId.replace('spotify_public_', '');
-
- console.log(`🧹 [Modal Close] Processing Spotify Public playlist close: playlistId="${playlistId}", urlHash="${spUrlHash}"`);
-
- if (spotifyPublicPlaylistStates[spUrlHash]) {
- const currentPhase = spotifyPublicPlaylistStates[spUrlHash].phase;
- console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
-
- const preservedData = {
- playlist: spotifyPublicPlaylistStates[spUrlHash].playlist,
- discovery_results: spotifyPublicPlaylistStates[spUrlHash].discovery_results,
- spotify_matches: spotifyPublicPlaylistStates[spUrlHash].spotify_matches,
- discovery_progress: spotifyPublicPlaylistStates[spUrlHash].discovery_progress,
- convertedSpotifyPlaylistId: spotifyPublicPlaylistStates[spUrlHash].convertedSpotifyPlaylistId
- };
-
- delete spotifyPublicPlaylistStates[spUrlHash].download_process_id;
- delete spotifyPublicPlaylistStates[spUrlHash].phase;
-
- Object.assign(spotifyPublicPlaylistStates[spUrlHash], preservedData);
- spotifyPublicPlaylistStates[spUrlHash].phase = 'discovered';
-
- console.log(`🧹 [Modal Close] Reset Spotify Public playlist ${spUrlHash} - cleared download state, preserved discovery data`);
- }
-
- updateSpotifyPublicCardPhase(spUrlHash, 'discovered');
-
- try {
- await fetch(`/api/spotify-public/update_phase/${spUrlHash}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ phase: 'discovered' })
- });
- console.log(`✅ [Modal Close] Updated backend phase for Spotify Public playlist ${spUrlHash} to 'discovered'`);
- } catch (error) {
- console.error(`❌ [Modal Close] Error updating backend phase for Spotify Public playlist ${spUrlHash}:`, error);
- }
- }
-
- // Reset Deezer playlist phase to 'discovered' when modal is closed
- if (playlistId.startsWith('deezer_')) {
- const deezerPlaylistId = playlistId.replace('deezer_', '');
-
- console.log(`🧹 [Modal Close] Processing Deezer playlist close: playlistId="${playlistId}", deezerPlaylistId="${deezerPlaylistId}"`);
-
- if (deezerPlaylistStates[deezerPlaylistId]) {
- const currentPhase = deezerPlaylistStates[deezerPlaylistId].phase;
- console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
-
- const preservedData = {
- playlist: deezerPlaylistStates[deezerPlaylistId].playlist,
- discovery_results: deezerPlaylistStates[deezerPlaylistId].discovery_results,
- spotify_matches: deezerPlaylistStates[deezerPlaylistId].spotify_matches,
- discovery_progress: deezerPlaylistStates[deezerPlaylistId].discovery_progress,
- convertedSpotifyPlaylistId: deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId
- };
-
- delete deezerPlaylistStates[deezerPlaylistId].download_process_id;
- delete deezerPlaylistStates[deezerPlaylistId].phase;
-
- Object.assign(deezerPlaylistStates[deezerPlaylistId], preservedData);
- deezerPlaylistStates[deezerPlaylistId].phase = 'discovered';
-
- console.log(`🧹 [Modal Close] Reset Deezer playlist ${deezerPlaylistId} - cleared download state, preserved discovery data`);
- }
-
- updateDeezerCardPhase(deezerPlaylistId, 'discovered');
-
- try {
- await fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ phase: 'discovered' })
- });
- console.log(`✅ [Modal Close] Updated backend phase for Deezer playlist ${deezerPlaylistId} to 'discovered'`);
- } catch (error) {
- console.error(`❌ [Modal Close] Error updating backend phase for Deezer playlist ${deezerPlaylistId}:`, error);
- }
- }
-
- // Clear wishlist modal state when modal is fully closed
- if (playlistId === 'wishlist') {
- WishlistModalState.clear(); // Clear all tracking since modal is fully closed
- console.log('📱 [Modal State] Cleared wishlist modal state on full close');
- }
-
- // Clean up artist download if this is an artist album playlist
- if (playlistId.startsWith('artist_album_')) {
- console.log(`🧹 [MODAL CLOSE] Cleaning up artist download for completed modal: ${playlistId}`);
- cleanupArtistDownload(playlistId);
- console.log(`✅ [MODAL CLOSE] Artist download cleanup completed for: ${playlistId}`);
- }
-
- // Clean up search download if this is an enhanced search playlist
- if (playlistId.startsWith('enhanced_search_')) {
- console.log(`🧹 [MODAL CLOSE] Cleaning up search download for completed modal: ${playlistId}`);
- cleanupSearchDownload(playlistId);
- console.log(`✅ [MODAL CLOSE] Search download cleanup completed for: ${playlistId}`);
- }
-
- // Clean up Beatport download if this is a beatport chart or release playlist
- if (playlistId.startsWith('beatport_chart_') || playlistId.startsWith('beatport_release_')) {
- console.log(`🧹 [MODAL CLOSE] Cleaning up Beatport download for completed modal: ${playlistId}`);
- cleanupBeatportDownload(playlistId);
- console.log(`✅ [MODAL CLOSE] Beatport download cleanup completed for: ${playlistId}`);
- }
-
- // Remove from discover download sidebar if this is a discover page download
- if (discoverDownloads && discoverDownloads[playlistId]) {
- console.log(`🧹 [MODAL CLOSE] Removing discover download bubble: ${playlistId}`);
- removeDiscoverDownload(playlistId);
- console.log(`✅ [MODAL CLOSE] Discover download bubble removed for: ${playlistId}`);
- }
-
- // Automatic cleanup and server operations after successful downloads
- await handlePostDownloadAutomation(playlistId, process);
-
- cleanupDownloadProcess(playlistId);
- }
-}
-
-/**
- * Extract unique album cover images from tracks
- */
-function extractUniqueCoverImages(tracks, maxCovers = 20) {
- const uniqueCovers = new Set();
- const covers = [];
-
- for (const track of tracks) {
- if (covers.length >= maxCovers) break;
-
- let coverUrl = null;
- let spotifyData = track.spotify_data;
-
- // Parse spotify_data if it's a string
- if (typeof spotifyData === 'string') {
- try {
- spotifyData = JSON.parse(spotifyData);
- } catch (e) {
- continue;
- }
- }
-
- // Extract cover URL
- coverUrl = spotifyData?.album?.images?.[0]?.url;
-
- // Add to list if unique and valid
- if (coverUrl && !uniqueCovers.has(coverUrl)) {
- uniqueCovers.add(coverUrl);
- covers.push(coverUrl);
- }
- }
-
- return covers;
-}
-
-/**
- * Shuffle array using Fisher-Yates algorithm
- */
-function shuffleArray(array) {
- const shuffled = [...array];
- for (let i = shuffled.length - 1; i > 0; i--) {
- const j = Math.floor(Math.random() * (i + 1));
- [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
- }
- return shuffled;
-}
-
-/**
- * Generate mosaic grid background HTML with continuous scrolling rows
- */
-function generateMosaicBackground(coverUrls) {
- // If less than 3 covers, use gradient fallback
- if (!coverUrls || coverUrls.length < 3) {
- return `
-
-
- `;
- }
-
- // Cap covers per row to 15 for GPU performance (avoids hundreds of tiles)
- if (coverUrls.length > 15) {
- coverUrls = coverUrls.slice(0, 15);
- }
-
- const rows = 4;
- let mosaicHTML = '
-
- ⚡ Wing It
- -${trackCount} track${trackCount !== 1 ? 's' : ''} from ${source}. No metadata discovery — uses raw names. Failed tracks won't be added to wishlist.
- -';
-
- // Calculate scroll speed based on number of images
- // More images = longer duration to maintain consistent visual speed
- // Minimum 40s to prevent scrolling too fast
- const scrollSpeed = Math.max(40, coverUrls.length * 2);
-
- for (let row = 0; row < rows; row++) {
- const isEvenRow = row % 2 === 0;
- const direction = isEvenRow ? 'left' : 'right';
-
- // Randomize order for each row
- const shuffledCovers = shuffleArray(coverUrls);
-
- // Create row wrapper
- mosaicHTML += `
';
- mosaicHTML += ''; // Dark overlay for readability
-
- return mosaicHTML;
-}
-
-/**
- * Open wishlist overview modal showing category breakdown
- * This is the NEW entry point for wishlist from dashboard
- */
-async function openWishlistOverviewModal() {
- try {
- showLoadingOverlay('Loading wishlist...');
-
- // Fetch wishlist stats
- const statsResponse = await fetch('/api/wishlist/stats');
- const statsData = await statsResponse.json();
-
- if (!statsResponse.ok) {
- throw new Error(statsData.error || 'Failed to fetch wishlist stats');
- }
-
- const { singles, albums, total } = statsData;
-
- if (total === 0) {
- hideLoadingOverlay();
- showToast('Wishlist is empty. No tracks to process.', 'info');
- return;
- }
-
- // Fetch album covers for mosaic backgrounds
- // Limit to 50 tracks per category (enough to get 20 unique covers while being efficient)
- const albumCoversPromise = fetch('/api/wishlist/tracks?category=albums&limit=50').then(r => r.json());
- const singleCoversPromise = fetch('/api/wishlist/tracks?category=singles&limit=50').then(r => r.json());
-
- const [albumTracksData, singleTracksData] = await Promise.all([albumCoversPromise, singleCoversPromise]);
-
- // Extract unique album covers (max 20 per category)
- const albumCovers = extractUniqueCoverImages(albumTracksData.tracks || [], 20);
- const singleCovers = extractUniqueCoverImages(singleTracksData.tracks || [], 20);
-
- // Create modal if it doesn't exist
- let modal = document.getElementById('wishlist-overview-modal');
- if (!modal) {
- modal = document.createElement('div');
- modal.id = 'wishlist-overview-modal';
- modal.className = 'modal-overlay';
- document.body.appendChild(modal);
- }
-
- // Fetch current cycle
- const cycleResponse = await fetch('/api/wishlist/cycle');
- const cycleData = await cycleResponse.json();
- const currentCycle = cycleData.cycle || 'albums';
-
- // Format countdown timer
- const nextRunSeconds = statsData.next_run_in_seconds || 0;
- const countdownText = formatCountdownTime(nextRunSeconds);
- const nextCycleText = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
-
- modal.innerHTML = `
- `;
- mosaicHTML += `
'; // Close wrapper
- }
-
- mosaicHTML += '`;
-
- // Generate tiles - duplicate 2 times for smooth infinite scroll
- for (let duplicate = 0; duplicate < 2; duplicate++) {
- for (let i = 0; i < shuffledCovers.length; i++) {
- const coverUrl = shuffledCovers[i];
- mosaicHTML += `
-
'; // Close row
- mosaicHTML += '
-
-
- `;
- }
- }
-
- mosaicHTML += '
-
- `;
-
- modal.style.display = 'flex';
- hideLoadingOverlay();
-
- // Start countdown timer update interval
- startWishlistCountdownTimer(currentCycle, nextRunSeconds);
-
- } catch (error) {
- console.error('Error opening wishlist overview:', error);
- showToast(`Failed to load wishlist: ${error.message}`, 'error');
- hideLoadingOverlay();
- }
-}
-
-function startWishlistCountdownTimer(currentCycle, initialSeconds) {
- // Clear any existing interval
- if (wishlistCountdownInterval) {
- clearInterval(wishlistCountdownInterval);
- }
-
- let remainingSeconds = initialSeconds;
- const nextCycleText = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
-
- wishlistCountdownInterval = setInterval(async () => {
- remainingSeconds--;
-
- // Check if auto-processing has started (every 2 seconds to avoid overwhelming backend)
- if (remainingSeconds % 2 === 0 || remainingSeconds <= 0) {
- // Use WebSocket data if available, otherwise fall back to HTTP
- if (socketConnected && _lastWishlistStats) {
- const data = _lastWishlistStats;
- if (data.is_auto_processing) {
- if (!_wishlistAutoProcessingNotified) {
- navigateToPage('active-downloads');
- showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
- _wishlistAutoProcessingNotified = true;
- }
- return;
- }
- if (remainingSeconds <= 0) {
- remainingSeconds = data.next_run_in_seconds || 0;
- const timerElement = document.getElementById('wishlist-next-auto-timer');
- if (timerElement) {
- const countdownText = formatCountdownTime(remainingSeconds);
- timerElement.textContent = `Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}`;
- }
- }
- } else {
- try {
- const response = await fetch('/api/wishlist/stats');
- const data = await response.json();
-
- // AUTO-CLOSE DETECTION: If auto-processing started, close modal and notify user (once)
- if (data.is_auto_processing) {
- if (!_wishlistAutoProcessingNotified) {
- console.log('🤖 [Wishlist] Auto-processing detected, closing overview modal');
- closeWishlistOverviewModal();
- showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
- _wishlistAutoProcessingNotified = true;
- }
- return; // Exit interval
- }
-
- // Update remaining seconds if timer expired
- if (remainingSeconds <= 0) {
- remainingSeconds = data.next_run_in_seconds || 0;
-
- // Also update cycle in case it changed
- const newCycle = data.current_cycle || 'albums';
- const newCycleText = newCycle === 'albums' ? 'Albums/EPs' : 'Singles';
-
- const timerElement = document.getElementById('wishlist-next-auto-timer');
- if (timerElement) {
- const countdownText = formatCountdownTime(remainingSeconds);
- timerElement.textContent = `Next Auto: ${newCycleText}${countdownText ? ' in ' + countdownText : ''}`;
- }
- }
- } catch (error) {
- console.debug('Error updating wishlist countdown:', error);
- }
- } // end else (HTTP fallback)
- }
-
- // Always update the display countdown
- const timerElement = document.getElementById('wishlist-next-auto-timer');
- if (timerElement) {
- const countdownText = formatCountdownTime(remainingSeconds);
- timerElement.textContent = `Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}`;
- }
- }, 1000); // Update every second
-}
-
-function closeWishlistOverviewModal() {
- console.log('🚪 closeWishlistOverviewModal() called');
-
- // Stop countdown timer
- if (wishlistCountdownInterval) {
- clearInterval(wishlistCountdownInterval);
- wishlistCountdownInterval = null;
- }
-
- const modal = document.getElementById('wishlist-overview-modal');
- console.log('Modal element:', modal);
- if (modal) {
- modal.style.display = 'none';
- console.log('Modal display set to none');
- // Also remove from DOM to ensure clean state
- modal.remove();
- console.log('Modal removed from DOM');
- } else {
- console.warn('Modal element not found');
- }
- window.selectedWishlistCategory = null;
- console.log('✅ Modal closed');
-}
-
-async function cleanupWishlistOverview() {
- console.log('🧹 cleanupWishlistOverview() called');
-
- if (!await showConfirmDialog({ title: 'Cleanup Wishlist', message: 'This will remove all tracks from the wishlist that already exist in your library. Continue?' })) {
- return;
- }
-
- try {
- showLoadingOverlay('Cleaning up wishlist...');
-
- const response = await fetch('/api/wishlist/cleanup', {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.success) {
- const removedCount = result.removed_count || 0;
-
- if (removedCount > 0) {
- showToast(`Cleanup complete! Removed ${removedCount} tracks that already exist in your library`, 'success');
- } else {
- showToast('No tracks needed to be removed', 'info');
- }
-
- // Check if wishlist is now empty
- const statsResponse = await fetch('/api/wishlist/stats');
- const statsData = await statsResponse.json();
-
- if (statsData.total === 0) {
- // Wishlist is empty, refresh the page to show empty state
- wishlistPageState.isInitialized = false;
- await initializeWishlistPage();
- await updateWishlistCount();
- } else {
- // Wishlist still has items, refresh the page to show updated counts
- wishlistPageState.isInitialized = false;
- await initializeWishlistPage();
- }
- } else {
- showToast(`Failed to cleanup wishlist: ${result.error || 'Unknown error'}`, 'error');
- }
-
- hideLoadingOverlay();
-
- } catch (error) {
- console.error('Error cleaning up wishlist:', error);
- showToast(`Failed to cleanup wishlist: ${error.message}`, 'error');
- hideLoadingOverlay();
- }
-}
-
-async function clearEntireWishlist() {
- console.log('🗑️ clearEntireWishlist() called');
-
- if (!await showConfirmDialog({ title: 'Clear Wishlist', message: 'WARNING: This will permanently delete ALL tracks from your wishlist.\n\nThis action cannot be undone.\n\nAre you sure you want to continue?', confirmText: 'Clear All', destructive: true })) {
- console.log('User cancelled confirmation');
- return;
- }
-
- console.log('User confirmed, proceeding with clear...');
-
- try {
- showLoadingOverlay('Clearing wishlist...');
- console.log('Loading overlay shown');
-
- const response = await fetch('/api/wishlist/clear', {
- method: 'POST'
- });
- console.log('API response received:', response.status);
-
- const result = await response.json();
- console.log('Clear wishlist response:', result);
-
- hideLoadingOverlay();
- console.log('Loading overlay hidden');
-
- if (result.success) {
- console.log('Clear was successful, showing toast...');
- showToast('Wishlist cleared successfully', 'success');
-
- console.log('Updating wishlist button count...');
- await updateWishlistCount();
-
- console.log('Refreshing wishlist page...');
- wishlistPageState.isInitialized = false;
- await initializeWishlistPage();
- } else {
- console.error('Clear failed:', result.error);
- showToast(`Failed to clear wishlist: ${result.error || 'Unknown error'}`, 'error');
- }
-
- } catch (error) {
- console.error('Error clearing wishlist:', error);
- hideLoadingOverlay();
- showToast(`Failed to clear wishlist: ${error.message}`, 'error');
- }
-}
-
-async function selectWishlistCategory(category) {
- try {
- window.selectedWishlistCategory = category;
-
- const tracksList = document.getElementById('wishlist-tracks-list');
- const categoryTracksSection = document.getElementById('wishlist-category-tracks');
- const nebulaEl = document.getElementById('wishlist-nebula');
- const downloadBtn = document.getElementById('wishlist-download-btn');
- const categoryName = document.getElementById('wishlist-category-name');
-
- if (nebulaEl) nebulaEl.style.display = 'none';
- categoryTracksSection.style.display = 'block';
- downloadBtn.style.display = 'inline-block';
- categoryName.textContent = category === 'albums' ? 'Albums / EPs' : 'Singles';
-
- tracksList.innerHTML = '
-
-
-
-
- ×
- 🎵 Wishlist Overview
-
- ${total} Total Tracks
- Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading tracks...
';
-
- const _wlPageSize = window._wlNextLimit || 200;
- window._wlNextLimit = null;
- const response = await fetch(`/api/wishlist/tracks?category=${category}&limit=${_wlPageSize}`);
- const data = await response.json();
-
- if (!response.ok) throw new Error(data.error || 'Failed to fetch tracks');
-
- const tracks = data.tracks || [];
- const totalAvailable = data.total || tracks.length;
- window._wlCategory = category;
- window._wlOffset = tracks.length;
- window._wlTotal = totalAvailable;
-
- if (tracks.length === 0) {
- tracksList.innerHTML = 'No tracks in this category
';
- return;
- }
-
- // For Albums/EPs, group by album
- if (category === 'albums') {
- const albumGroups = {};
-
- tracks.forEach(track => {
- let spotifyData = track.spotify_data;
- if (typeof spotifyData === 'string') {
- try {
- spotifyData = JSON.parse(spotifyData);
- } catch (e) {
- spotifyData = null;
- }
- }
-
- const rawAlbum = spotifyData?.album;
- const albumName = (typeof rawAlbum === 'string' ? rawAlbum : rawAlbum?.name) || 'Unknown Album';
-
- // Handle both object format {name: '...'} and sanitized string format
- let artistName = 'Unknown Artist';
- let artistId = null;
- if (spotifyData?.artists?.[0]?.name) {
- // Object format from Spotify API
- artistName = spotifyData.artists[0].name;
- artistId = spotifyData.artists[0].id;
- } else if (spotifyData?.artists?.[0] && typeof spotifyData.artists[0] === 'string') {
- // Sanitized string format
- artistName = spotifyData.artists[0];
- } else if (Array.isArray(track.artists) && track.artists.length > 0) {
- // Fallback to track.artists
- if (typeof track.artists[0] === 'string') {
- artistName = track.artists[0];
- } else if (track.artists[0]?.name) {
- artistName = track.artists[0].name;
- artistId = track.artists[0].id;
- }
- }
-
- const albumImage = spotifyData?.album?.images?.[0]?.url || '';
-
- // Use album ID if available, otherwise create unique key from album + artist
- // Sanitize the ID to remove all special characters that could break DOM IDs or CSS selectors
- const albumId = spotifyData?.album?.id || `${albumName}_${artistName}`
- .replace(/[^a-zA-Z0-9\s_-]/g, '') // Remove all special chars except spaces, underscores, hyphens
- .replace(/\s+/g, '_') // Replace spaces with underscores
- .toLowerCase();
-
- if (!albumGroups[albumId]) {
- albumGroups[albumId] = {
- albumName,
- artistName,
- artistId,
- albumImage,
- tracks: []
- };
- }
-
- const spotifyTrackId = track.spotify_track_id || track.id || '';
-
- albumGroups[albumId].tracks.push({
- name: track.name || 'Unknown Track',
- artistName,
- trackNumber: spotifyData?.track_number || 0,
- spotifyTrackId
- });
- });
-
- // Render album cards
- let albumsHTML = '';
- Object.entries(albumGroups).forEach(([albumId, albumData]) => {
- // Sort tracks by track number
- albumData.tracks.sort((a, b) => a.trackNumber - b.trackNumber);
-
- const tracksListHTML = albumData.tracks.map(track => `
-
';
-
- tracksList.innerHTML = albumsHTML;
- if (totalAvailable > tracks.length) {
- tracksList.insertAdjacentHTML('beforeend',
- ``);
- }
- _attachWishlistDelegation(tracksList);
-
- } else {
- // For Singles, show list with album images
- let tracksHTML = '';
- tracks.forEach((track, index) => {
- const trackName = track.name || 'Unknown Track';
-
- let spotifyData = track.spotify_data;
- if (typeof spotifyData === 'string') {
- try {
- spotifyData = JSON.parse(spotifyData);
- } catch (e) {
- spotifyData = null;
- }
- }
-
- let artistName = 'Unknown Artist';
- if (spotifyData?.artists?.[0]?.name) {
- artistName = spotifyData.artists[0].name;
- } else if (Array.isArray(track.artists) && track.artists.length > 0) {
- if (typeof track.artists[0] === 'string') {
- artistName = track.artists[0];
- } else if (track.artists[0]?.name) {
- artistName = track.artists[0].name;
- }
- }
-
- let albumName = 'Unknown Album';
- if (spotifyData?.album?.name) {
- albumName = spotifyData.album.name;
- } else if (typeof track.album === 'string') {
- albumName = track.album;
- } else if (track.album?.name) {
- albumName = track.album.name;
- }
-
- const albumImage = spotifyData?.album?.images?.[0]?.url || '';
- const spotifyTrackId = track.spotify_track_id || track.id || '';
-
- tracksHTML += `
-
-
- ${track.name}
-
-
- `).join('');
-
- // Handle missing album images with a placeholder
- const albumImageStyle = albumData.albumImage
- ? `background-image: url('${albumData.albumImage}')`
- : `background: linear-gradient(135deg, rgba(30, 30, 30, 0.9) 0%, rgba(50, 50, 50, 0.9) 100%); display: flex; align-items: center; justify-content: center; font-size: 40px;`;
- const albumImageContent = albumData.albumImage ? '' : '💿';
-
- albumsHTML += `
-
-
- `;
- });
- albumsHTML += '
-
-
-
- ${albumImageContent}
-
-
-
-
- ${albumData.albumName}
- ${albumData.artistName}
- ${albumData.tracks.length} track${albumData.tracks.length !== 1 ? 's' : ''}
-
-
-
-
- `;
- });
-
- tracksList.innerHTML = tracksHTML;
- if (totalAvailable > tracks.length) {
- tracksList.insertAdjacentHTML('beforeend',
- ``);
- }
- _attachWishlistDelegation(tracksList);
- }
-
- } catch (error) {
- console.error('Error loading category tracks:', error);
- showToast(`Failed to load tracks: ${error.message}`, 'error');
- }
-}
-
-async function loadMoreWishlistTracks() {
- const btn = document.querySelector('.wishlist-load-more-btn');
- if (btn) { btn.textContent = 'Loading...'; btn.disabled = true; }
- // Increase page size and reload
- window._wlOffset = (window._wlOffset || 200) + 200;
- // Override the page size for this reload
- window._wlNextLimit = window._wlOffset;
- selectWishlistCategory(window._wlCategory);
-}
-
-function _attachWishlistDelegation(container) {
- // Single click handler for all wishlist album/track interactions
- container.addEventListener('click', (e) => {
- const target = e.target;
-
- // Skip checkbox wrapper clicks — handled by change listener
- if (target.closest('.wishlist-checkbox-wrapper')) return;
-
- // Album header click (expand/collapse)
- const header = target.closest('.wishlist-album-header');
- if (header && !target.closest('.wishlist-delete-album-btn')) {
- toggleAlbumTracks(header.dataset.albumId);
- return;
- }
-
- // Album delete button
- const albumDelBtn = target.closest('.wishlist-delete-album-btn');
- if (albumDelBtn) {
- e.stopPropagation();
- removeAlbumFromWishlist(albumDelBtn.dataset.albumId, e);
- return;
- }
-
- // Track delete button
- const trackDelBtn = target.closest('.wishlist-delete-btn');
- if (trackDelBtn && trackDelBtn.dataset.trackId) {
- e.stopPropagation();
- removeTrackFromWishlist(trackDelBtn.dataset.trackId, e);
- return;
- }
- });
-
- // Separate change handler for checkboxes (more reliable than click for inputs)
- container.addEventListener('change', (e) => {
- const target = e.target;
- if (target.classList.contains('wishlist-album-select-all-cb')) {
- toggleWishlistAlbumSelection(target.dataset.albumId, target.checked);
- } else if (target.classList.contains('wishlist-select-cb')) {
- updateWishlistBatchBar();
- }
- });
-}
-
-function backToCategories() {
- _nebulaBack();
-}
-
-function toggleAlbumTracks(albumId) {
- const tracksElement = document.getElementById(`tracks-${albumId}`);
- const expandIcon = document.getElementById(`expand-icon-${albumId}`);
-
- if (tracksElement.style.display === 'none') {
- tracksElement.style.display = 'block';
- expandIcon.textContent = '▲';
- } else {
- tracksElement.style.display = 'none';
- expandIcon.textContent = '▼';
- }
-}
-
-/**
- * Get all checked wishlist track checkboxes
- */
-function getCheckedWishlistTracks() {
- return Array.from(document.querySelectorAll('.wishlist-select-cb:checked'));
-}
-
-/**
- * Toggle select all / deselect all tracks in the current wishlist category
- */
-function toggleWishlistSelectAll() {
- const allCheckboxes = document.querySelectorAll('.wishlist-select-cb');
- const albumCheckboxes = document.querySelectorAll('.wishlist-album-select-all-cb');
- const btn = document.getElementById('wishlist-select-all-btn');
- const allChecked = allCheckboxes.length > 0 && Array.from(allCheckboxes).every(cb => cb.checked);
-
- const newState = !allChecked;
-
- allCheckboxes.forEach(cb => { cb.checked = newState; });
- albumCheckboxes.forEach(cb => { cb.checked = newState; });
-
- // Expand all albums when selecting all
- if (newState) {
- document.querySelectorAll('.wishlist-album-tracks').forEach(el => {
- el.style.display = 'block';
- });
- document.querySelectorAll('[id^="expand-icon-"]').forEach(icon => {
- icon.textContent = '▲';
- });
- }
-
- if (btn) btn.textContent = newState ? 'Deselect All' : 'Select All';
- updateWishlistBatchBar();
-}
-
-/**
- * Update the wishlist batch action bar based on checkbox selection
- */
-function updateWishlistBatchBar() {
- const checked = getCheckedWishlistTracks();
- const bar = document.getElementById('wishlist-batch-bar');
- const countEl = document.getElementById('wishlist-batch-count');
-
- if (!bar || !countEl) return;
-
- if (checked.length > 0) {
- bar.style.display = 'flex';
- countEl.textContent = `${checked.length} selected`;
- } else {
- bar.style.display = 'none';
- }
-
- // Sync the Select All button text
- const btn = document.getElementById('wishlist-select-all-btn');
- if (btn) {
- const allCheckboxes = document.querySelectorAll('.wishlist-select-cb');
- const allChecked = allCheckboxes.length > 0 && Array.from(allCheckboxes).every(cb => cb.checked);
- btn.textContent = allChecked ? 'Deselect All' : 'Select All';
- }
-}
-
-/**
- * Toggle all track checkboxes within an album when album header checkbox is clicked
- */
-function toggleWishlistAlbumSelection(albumId, checked) {
- const tracksContainer = document.getElementById(`tracks-${albumId}`);
- if (tracksContainer) {
- // Expand the album tracks if selecting
- if (checked) {
- tracksContainer.style.display = 'block';
- const expandIcon = document.getElementById(`expand-icon-${albumId}`);
- if (expandIcon) expandIcon.textContent = '▲';
- }
- tracksContainer.querySelectorAll('.wishlist-select-cb').forEach(cb => {
- cb.checked = checked;
- });
- }
- updateWishlistBatchBar();
-}
-
-/**
- * Batch remove selected tracks from wishlist
- */
-async function batchRemoveFromWishlist() {
- const checked = getCheckedWishlistTracks();
- if (checked.length === 0) return;
-
- const count = checked.length;
- const confirmed = await showConfirmationModal(
- 'Remove Tracks',
- `Remove ${count} track${count !== 1 ? 's' : ''} from your wishlist?`,
- '🗑️'
- );
-
- if (!confirmed) return;
-
- const trackIds = checked.map(cb => cb.getAttribute('data-track-id'));
-
- try {
- const response = await fetch('/api/wishlist/remove-batch', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ spotify_track_ids: trackIds })
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast(`Removed ${data.removed} track(s) from wishlist`, 'success');
-
- // Reload the current category to refresh the list
- if (window.selectedWishlistCategory) {
- await selectWishlistCategory(window.selectedWishlistCategory);
- }
-
- // Update wishlist count in sidebar
- await updateWishlistCount();
- } else {
- showToast(`Failed to remove tracks: ${data.error}`, 'error');
- }
- } catch (error) {
- console.error('Error batch removing from wishlist:', error);
- showToast('Failed to remove tracks from wishlist', 'error');
- }
-}
-
-function showConfirmationModal(title, message, icon = '⚠️') {
- return new Promise((resolve) => {
- // Create modal if it doesn't exist
- let modal = document.getElementById('confirmation-modal-overlay');
- if (!modal) {
- modal = document.createElement('div');
- modal.id = 'confirmation-modal-overlay';
- modal.className = 'confirmation-modal-overlay';
- document.body.appendChild(modal);
- }
-
- // Set modal content
- modal.innerHTML = `
-
-
-
- ${trackName}
- ${artistName} • ${albumName}
-
-
-
- `;
-
- // Show modal with animation
- setTimeout(() => {
- modal.classList.add('show');
- }, 10);
-
- // Escape key handler - defined outside so we can remove it
- const handleEscape = (e) => {
- if (e.key === 'Escape') {
- handleCancel();
- }
- };
-
- // Handle button clicks
- const handleCancel = () => {
- document.removeEventListener('keydown', handleEscape);
- modal.classList.remove('show');
- setTimeout(() => {
- modal.remove();
- }, 200);
- resolve(false);
- };
-
- const handleConfirm = () => {
- document.removeEventListener('keydown', handleEscape);
- modal.classList.remove('show');
- setTimeout(() => {
- modal.remove();
- }, 200);
- resolve(true);
- };
-
- document.getElementById('confirm-cancel').addEventListener('click', handleCancel);
- document.getElementById('confirm-yes').addEventListener('click', handleConfirm);
-
- // Close on overlay click
- modal.addEventListener('click', (e) => {
- if (e.target === modal) {
- handleCancel();
- }
- });
-
- // Add Escape key listener
- document.addEventListener('keydown', handleEscape);
- });
-}
-
-async function removeTrackFromWishlist(spotifyTrackId, event) {
- // Stop event propagation to prevent triggering parent click handlers
- if (event) {
- event.stopPropagation();
- }
-
- const confirmed = await showConfirmationModal(
- 'Remove Track',
- 'Are you sure you want to remove this track from your wishlist?',
- '🗑️'
- );
-
- if (!confirmed) {
- return;
- }
-
- try {
- const response = await fetch('/api/wishlist/remove-track', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ spotify_track_id: spotifyTrackId })
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast('Track removed from wishlist', 'success');
-
- // Reload the current category to refresh the list
- if (window.selectedWishlistCategory) {
- await selectWishlistCategory(window.selectedWishlistCategory);
- }
-
- // Update wishlist count in sidebar
- await updateWishlistCount();
- } else {
- showToast(`Failed to remove track: ${data.error}`, 'error');
- }
- } catch (error) {
- console.error('Error removing track from wishlist:', error);
- showToast('Failed to remove track from wishlist', 'error');
- }
-}
-
-async function removeAlbumFromWishlist(albumId, event) {
- // Stop event propagation to prevent triggering parent click handlers
- if (event) {
- event.stopPropagation();
- }
-
- const confirmed = await showConfirmationModal(
- 'Remove Album',
- 'Are you sure you want to remove all tracks from this album from your wishlist?',
- '💿'
- );
-
- if (!confirmed) {
- return;
- }
-
- try {
- const response = await fetch('/api/wishlist/remove-album', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ album_id: albumId })
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast(`Removed ${data.removed_count} track(s) from wishlist`, 'success');
-
- // Reload the current category to refresh the list
- if (window.selectedWishlistCategory) {
- await selectWishlistCategory(window.selectedWishlistCategory);
- }
-
- // Update wishlist count in sidebar
- await updateWishlistCount();
- } else {
- showToast(`Failed to remove album: ${data.error}`, 'error');
- }
- } catch (error) {
- console.error('Error removing album from wishlist:', error);
- showToast('Failed to remove album from wishlist', 'error');
- }
-}
-
-async function downloadSelectedCategory() {
- const category = window.selectedWishlistCategory;
- if (!category) {
- showToast('No category selected', 'error');
- return;
- }
-
- // Collect checked track IDs
- const checkedBoxes = document.querySelectorAll('.wishlist-select-cb:checked');
- const selectedTrackIds = new Set(Array.from(checkedBoxes).map(cb => cb.dataset.trackId).filter(Boolean));
-
- await openDownloadMissingWishlistModal(category, selectedTrackIds.size > 0 ? selectedTrackIds : null);
-}
-
-async function openDownloadMissingWishlistModal(category = null, selectedTrackIds = null) {
- showLoadingOverlay('Loading wishlist...');
- const playlistId = "wishlist"; // Use a consistent ID for wishlist
-
- // Check if a process is already active for the wishlist
- if (activeDownloadProcesses[playlistId]) {
- console.log(`Modal for wishlist already exists. Showing it.`);
- const process = activeDownloadProcesses[playlistId];
- if (process.modalElement) {
- // Show helpful message if it's a completed process
- if (process.status === 'complete') {
- showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
- }
- process.modalElement.style.display = 'flex';
- WishlistModalState.setVisible(); // Track that modal is now visible
- }
- hideLoadingOverlay(); // Always hide overlay before returning
- return; // Don't create a new one
- }
-
- console.log(`📥 Opening Download Missing Tracks modal for wishlist${category ? ' (' + category + ')' : ''}`);
-
- // Store category in global state for when process starts
- window.currentWishlistCategory = category;
-
- // Fetch actual wishlist tracks from the server
- let tracks;
- try {
- // Build API URL with optional category filter
- const apiUrl = category ? `/api/wishlist/tracks?category=${category}` : '/api/wishlist/tracks';
-
- const response = await fetch('/api/wishlist/count');
- const countData = await response.json();
- if (countData.count === 0) {
- showToast('Wishlist is empty. No tracks to download.', 'info');
- hideLoadingOverlay();
- return;
- }
-
- // Fetch the actual wishlist tracks for display (filtered by category if specified)
- const tracksResponse = await fetch(apiUrl);
- if (!tracksResponse.ok) {
- throw new Error('Failed to fetch wishlist tracks');
- }
- const tracksData = await tracksResponse.json();
- tracks = tracksData.tracks || [];
-
- // Filter to only selected tracks if user made a selection
- if (selectedTrackIds && selectedTrackIds.size > 0) {
- tracks = tracks.filter(t => selectedTrackIds.has(t.id) || selectedTrackIds.has(t.spotify_track_id));
- console.log(`📥 Filtered to ${tracks.length} selected tracks (from ${tracksData.tracks?.length || 0} total)`);
- }
-
- } catch (error) {
- showToast(`Failed to fetch wishlist data: ${error.message}`, 'error');
- hideLoadingOverlay();
- return;
- }
-
- currentPlaylistTracks = tracks;
- currentModalPlaylistId = playlistId;
-
- let modal = document.createElement('div');
- modal.id = `download-missing-modal-${playlistId}`; // Unique ID
- modal.className = 'download-missing-modal'; // Use class for styling
- modal.style.display = 'none'; // Start hidden
- document.body.appendChild(modal);
-
- // Register the new process in our global state tracker
- activeDownloadProcesses[playlistId] = {
- status: 'idle', // idle, running, complete, cancelled
- modalElement: modal,
- poller: null,
- batchId: null,
- playlist: { id: playlistId, name: "Wishlist" }, // Create a pseudo-playlist object
- tracks: tracks
- };
-
- // Generate hero section for wishlist context
- const heroContext = {
- type: 'wishlist',
- trackCount: tracks.length,
- playlistId: playlistId
- };
-
- modal.innerHTML = `
-
- `;
-
- applyProgressiveTrackRendering(playlistId, tracks.length);
- modal.style.display = 'flex';
- hideLoadingOverlay();
- WishlistModalState.setVisible(); // Track that new wishlist modal is now visible
-}
-
-async function startWishlistMissingTracksProcess(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (!process) return;
-
- console.log(`🚀 Kicking off wishlist missing tracks process`);
- try {
- process.status = 'running';
- // Note: Wishlist processes don't affect sync page refresh button state
- document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'none';
- document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'inline-block';
-
- // Check if force download toggle is enabled
- const forceDownloadCheckbox = document.getElementById(`force-download-all-${playlistId}`);
- const forceDownloadAll = forceDownloadCheckbox ? forceDownloadCheckbox.checked : false;
-
- // Hide the force download toggle during processing
- const forceToggleContainer = forceDownloadCheckbox ? forceDownloadCheckbox.closest('.force-download-toggle-container') : null;
- if (forceToggleContainer) {
- forceToggleContainer.style.display = 'none';
- }
-
- // Extract track IDs from what the user is currently seeing in the modal
- // This prevents race conditions where wishlist changes between modal open and analysis start
- const trackIds = process.tracks ? process.tracks.map(t => t.spotify_track_id || t.id).filter(id => id) : null;
- console.log(`🎯 [Wishlist] Sending ${trackIds ? trackIds.length : 'all'} specific track IDs to prevent race condition`);
-
- const response = await fetch('/api/wishlist/download_missing', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- force_download_all: forceDownloadAll,
- category: window.currentWishlistCategory, // Keep for backward compat
- track_ids: trackIds // NEW: Send exact tracks to process
- })
- });
-
- const data = await response.json();
- if (!data.success) {
- // Special handling for auto-processing conflict
- if (response.status === 409) {
- console.log('🤖 [Wishlist] Auto-processing is running, redirecting to download manager');
- showToast('Wishlist auto-processing is already running. Opening Download Manager...', 'info');
-
- // Close wishlist modal and show download manager
- const wishlistModal = document.getElementById('download-modal-wishlist');
- if (wishlistModal) {
- wishlistModal.remove();
- }
- delete activeDownloadProcesses[playlistId];
-
- // Open download manager to show active batch
- setTimeout(() => {
- const downloadManager = document.getElementById('download-manager-modal');
- if (downloadManager) {
- downloadManager.style.display = 'flex';
- } else {
- openDownloadManagerModal();
- }
- }, 300);
- return;
- }
- // Special handling for rate limit
- if (response.status === 429) {
- throw new Error(`${data.error} Try closing some other download processes first.`);
- }
- throw new Error(data.error);
- }
-
- process.batchId = data.batch_id;
- console.log(`✅ Wishlist process started successfully. Batch ID: ${data.batch_id}`);
-
- // Start polling for updates
- startModalDownloadPolling(playlistId);
-
- } catch (error) {
- console.error('Error starting wishlist missing tracks process:', error);
- showToast(`Error: ${error.message}`, 'error');
-
- // Reset UI state on error
- process.status = 'idle';
- // Note: Wishlist processes don't affect sync page refresh button state
- document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'inline-block';
- document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
-
- // Show the force download toggle again
- const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
- if (forceToggleContainer) {
- forceToggleContainer.style.display = 'flex';
- }
- }
-}
-
-async function startMissingTracksProcess(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (!process) return;
-
- console.log(`🚀 Kicking off unified missing tracks process for playlist: ${playlistId}`);
- try {
- process.status = 'running';
- updatePlaylistCardUI(playlistId);
- updateRefreshButtonState();
-
- // Set album to downloading status if this is an artist album
- if (playlistId.startsWith('artist_album_')) {
- // Format: artist_album_{artist.id}_{album.id}
- const parts = playlistId.split('_');
- if (parts.length >= 4) {
- const albumId = parts.slice(3).join('_'); // In case album ID has underscores
- const totalTracks = process.tracks ? process.tracks.length : 0;
- setAlbumDownloadingStatus(albumId, 0, totalTracks);
- console.log(`🔄 Set album ${albumId} to downloading status (0/${totalTracks} tracks)`);
- console.log(`🔍 Virtual playlist ID: ${playlistId} → Album ID: ${albumId}`);
- }
- }
-
- // Update YouTube playlist phase to 'downloading' if this is a YouTube playlist
- if (playlistId.startsWith('youtube_')) {
- const urlHash = playlistId.replace('youtube_', '');
- updateYouTubeCardPhase(urlHash, 'downloading');
- // Also update mirrored playlist card if applicable
- if (urlHash.startsWith('mirrored_')) {
- updateMirroredCardPhase(urlHash, 'downloading');
- }
- }
-
- // Update Tidal playlist phase to 'downloading' if this is a Tidal playlist
- if (playlistId.startsWith('tidal_')) {
- const tidalPlaylistId = playlistId.replace('tidal_', '');
- if (tidalPlaylistStates[tidalPlaylistId]) {
- tidalPlaylistStates[tidalPlaylistId].phase = 'downloading';
- updateTidalCardPhase(tidalPlaylistId, 'downloading');
- console.log(`🔄 Updated Tidal playlist ${tidalPlaylistId} to downloading phase`);
- }
- }
-
- // Update Beatport chart phase to 'downloading' if this is a Beatport chart
- if (playlistId.startsWith('beatport_')) {
- const urlHash = playlistId.replace('beatport_', '');
- const state = youtubePlaylistStates[urlHash];
-
- if (state && state.is_beatport_playlist) {
- const chartHash = state.beatport_chart_hash || urlHash;
-
- // Update frontend states
- state.phase = 'downloading';
- if (beatportChartStates[chartHash]) {
- beatportChartStates[chartHash].phase = 'downloading';
- }
-
- // Update card UI
- updateBeatportCardPhase(chartHash, 'downloading');
-
- // Update backend state
- try {
- fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ phase: 'downloading' })
- });
- } catch (error) {
- console.warn('⚠️ Error updating backend Beatport phase to downloading:', error);
- }
-
- console.log(`🔄 Updated Beatport chart ${chartHash} to downloading phase`);
- }
- }
-
- // Update Spotify Public playlist phase to 'downloading' if this is a Spotify Public playlist
- if (playlistId.startsWith('spotify_public_')) {
- const urlHash = playlistId.replace('spotify_public_', '');
- if (spotifyPublicPlaylistStates[urlHash]) {
- spotifyPublicPlaylistStates[urlHash].phase = 'downloading';
- spotifyPublicPlaylistStates[urlHash].convertedSpotifyPlaylistId = playlistId;
- updateSpotifyPublicCardPhase(urlHash, 'downloading');
-
- try {
- fetch(`/api/spotify-public/update_phase/${urlHash}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ phase: 'downloading', converted_spotify_playlist_id: playlistId })
- });
- } catch (error) {
- console.warn('Error updating backend Spotify Public phase to downloading:', error);
- }
-
- console.log(`🔄 Updated Spotify Public playlist ${urlHash} to downloading phase`);
- }
- }
-
- // Update Deezer playlist phase to 'downloading' if this is a Deezer playlist
- if (playlistId.startsWith('deezer_')) {
- const deezerPlaylistId = playlistId.replace('deezer_', '');
- if (deezerPlaylistStates[deezerPlaylistId]) {
- deezerPlaylistStates[deezerPlaylistId].phase = 'downloading';
- deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId = playlistId;
- updateDeezerCardPhase(deezerPlaylistId, 'downloading');
-
- try {
- fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ phase: 'downloading', converted_spotify_playlist_id: playlistId })
- });
- } catch (error) {
- console.warn('Error updating backend Deezer phase to downloading:', error);
- }
-
- console.log(`🔄 Updated Deezer playlist ${deezerPlaylistId} to downloading phase`);
- }
- }
-
- // Update ListenBrainz playlist phase to 'downloading' if this is a ListenBrainz playlist
- if (playlistId.startsWith('listenbrainz_')) {
- const playlistMbid = playlistId.replace('listenbrainz_', '');
- const state = listenbrainzPlaylistStates[playlistMbid];
-
- if (state) {
- // Update frontend state
- state.phase = 'downloading';
-
- // Update backend state
- try {
- fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ phase: 'downloading' })
- });
- } catch (error) {
- console.warn('⚠️ Error updating backend ListenBrainz phase to downloading:', error);
- }
-
- console.log(`🔄 Updated ListenBrainz playlist ${playlistMbid} to downloading phase`);
- }
- }
- document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'none';
- document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'inline-block';
-
- // Hide wishlist button if it exists (only for non-wishlist modals)
- const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
- if (wishlistBtn) {
- wishlistBtn.style.display = 'none';
- }
-
- // Add to discover download sidebar if this is a discover page download
- if (process.discoverMetadata) {
- const playlistName = process.playlist.name;
- const imageUrl = process.discoverMetadata.imageUrl;
- const type = process.discoverMetadata.type;
- addDiscoverDownload(playlistId, playlistName, type, imageUrl);
- console.log(`📥 [BEGIN ANALYSIS] Added discover download: ${playlistName}`);
- }
-
- // Check if force download toggle is enabled
- const forceDownloadCheckbox = document.getElementById(`force-download-all-${playlistId}`);
- const forceDownloadAll = forceDownloadCheckbox ? forceDownloadCheckbox.checked : false;
-
- // Check if playlist folder mode toggle is enabled (only for sync page playlists)
- const playlistFolderModeCheckbox = document.getElementById(`playlist-folder-mode-${playlistId}`);
- const playlistFolderMode = playlistFolderModeCheckbox ? playlistFolderModeCheckbox.checked : false;
-
- // Hide the force download toggle during processing
- const forceToggleContainer = forceDownloadCheckbox ? forceDownloadCheckbox.closest('.force-download-toggle-container') : null;
- if (forceToggleContainer) {
- forceToggleContainer.style.display = 'none';
- }
-
- // Filter tracks based on checkbox selection (if checkboxes exist in this modal)
- const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
- let selectedTracks = process.tracks;
- if (tbody) {
- const allCbs = tbody.querySelectorAll('.track-select-cb');
- if (allCbs.length > 0) {
- // Checkboxes exist — filter to only checked tracks
- const checkedCbs = tbody.querySelectorAll('.track-select-cb:checked');
- const selectedIndices = new Set([...checkedCbs].map(cb => parseInt(cb.dataset.trackIndex)));
- console.log(`🔲 [Track Selection] Total checkboxes: ${allCbs.length}, Checked: ${checkedCbs.length}`);
- console.log(`🔲 [Track Selection] Checked indices:`, [...selectedIndices]);
- console.log(`🔲 [Track Selection] process.tracks has ${process.tracks.length} items, first: "${process.tracks[0]?.name}", last: "${process.tracks[process.tracks.length - 1]?.name}"`);
- // Stamp each selected track with its original table index so the backend
- // maps status updates back to the correct modal row
- selectedTracks = process.tracks
- .map((track, i) => ({ ...track, _original_index: i }))
- .filter(track => selectedIndices.has(track._original_index));
- console.log(`🔲 [Track Selection] Filtered to ${selectedTracks.length} tracks:`, selectedTracks.map(t => `[${t._original_index}] ${t.name}`));
- // Disable checkboxes once analysis starts
- allCbs.forEach(cb => { cb.disabled = true; });
- }
- }
- const selectAllCb = document.getElementById(`select-all-${playlistId}`);
- if (selectAllCb) selectAllCb.disabled = true;
-
- // Prepare request body - add album/artist context for artist album downloads
- const wingItState = youtubePlaylistStates[playlistId] || {};
- const isWingIt = wingItState.wing_it || false;
- const requestBody = {
- tracks: selectedTracks,
- force_download_all: forceDownloadAll || isWingIt,
- wing_it: isWingIt,
- };
-
- // If this is an artist album download, use album name and include full context
- // Match 'artist_album_', 'enhanced_search_album_', 'discover_album_', and 'seasonal_album_' prefixes
- // Note: 'enhanced_search_track_' is excluded — single track search results use singles context
- const _isAlbumContext = playlistId.startsWith('artist_album_') || playlistId.startsWith('enhanced_search_album_') || playlistId.startsWith('discover_album_') || playlistId.startsWith('seasonal_album_') || playlistId.startsWith('spotify_library_') || playlistId.startsWith('issue_download_') || playlistId.startsWith('library_redownload_') || playlistId.startsWith('beatport_release_');
- const _isSearchTrack = playlistId.startsWith('enhanced_search_track_') || playlistId.startsWith('gsearch_track_');
- if (_isAlbumContext || _isSearchTrack) {
- requestBody.playlist_name = process.album?.name || process.playlist.name;
- requestBody.is_album_download = _isAlbumContext; // false for single track search results
- requestBody.album_context = process.album; // Full Spotify album object
- requestBody.artist_context = process.artist; // Full Spotify artist object
- console.log(`🎵 [${_isAlbumContext ? 'Album' : 'Single Track'}] Sending context: ${process.album?.name} by ${process.artist?.name}`);
- } else {
- // For playlists/wishlists, use the virtual playlist name
- requestBody.playlist_name = process.playlist.name;
- // Add playlist folder mode flag for sync page playlists
- requestBody.playlist_folder_mode = playlistFolderMode;
- if (playlistFolderMode) {
- console.log(`📁 [Playlist Folder] Enabled for playlist: ${process.playlist.name}`);
- }
- }
-
- const response = await fetch(`/api/playlists/${playlistId}/start-missing-process`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(requestBody)
- });
-
- const data = await response.json();
- if (!data.success) {
- // Special handling for rate limit
- if (response.status === 429) {
- throw new Error(`${data.error} Try closing some other download processes first.`);
- }
- throw new Error(data.error);
- }
-
- process.batchId = data.batch_id;
-
- // Update Beatport backend state with download_process_id now that we have the batchId
- if (playlistId.startsWith('beatport_')) {
- const urlHash = playlistId.replace('beatport_', '');
- const state = youtubePlaylistStates[urlHash];
- if (state && state.is_beatport_playlist) {
- const chartHash = state.beatport_chart_hash || urlHash;
- try {
- fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- phase: 'downloading',
- download_process_id: data.batch_id
- })
- });
- console.log(`🔄 Updated Beatport backend with download_process_id: ${data.batch_id}`);
- } catch (error) {
- console.warn('⚠️ Error updating Beatport backend with download_process_id:', error);
- }
- }
- }
-
- // Update ListenBrainz backend state with download_process_id and convertedSpotifyPlaylistId
- if (playlistId.startsWith('listenbrainz_')) {
- const playlistMbid = playlistId.replace('listenbrainz_', '');
- const state = listenbrainzPlaylistStates[playlistMbid];
- if (state) {
- // Store in frontend state
- state.download_process_id = data.batch_id;
- state.convertedSpotifyPlaylistId = playlistId;
-
- // Update backend state
- try {
- fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- phase: 'downloading',
- download_process_id: data.batch_id,
- converted_spotify_playlist_id: playlistId
- })
- });
- console.log(`🔄 Updated ListenBrainz backend with download_process_id: ${data.batch_id}`);
- } catch (error) {
- console.warn('⚠️ Error updating ListenBrainz backend with download_process_id:', error);
- }
- }
- }
-
- startModalDownloadPolling(playlistId);
- } catch (error) {
- showToast(`Failed to start process: ${error.message}`, 'error');
- process.status = 'cancelled';
-
- // Reset button states on error
- const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
- const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
- if (beginBtn) beginBtn.style.display = 'inline-block';
- if (cancelBtn) cancelBtn.style.display = 'none';
- if (wishlistBtn) wishlistBtn.style.display = 'inline-block';
-
- // Show the force download toggle again
- const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
- if (forceToggleContainer) {
- forceToggleContainer.style.display = 'flex';
- }
-
- cleanupDownloadProcess(playlistId);
- }
-}
-
-
-function updateTrackAnalysisResults(playlistId, results) {
- // Update match results for all rows (tracks are now pre-populated)
- for (const result of results) {
- const matchElement = document.getElementById(`match-${playlistId}-${result.track_index}`);
- if (matchElement) {
- matchElement.textContent = result.found ? '✅ Found' : '❌ Missing';
- matchElement.className = `track-match-status ${result.found ? 'match-found' : 'match-missing'}`;
- }
- }
-}
-
-
-
-// ============================================================================
-// GLOBAL BATCHED POLLING SYSTEM - Optimized for multiple concurrent modals
-// ============================================================================
-
-let globalDownloadStatusPoller = null;
-let globalPollingFailureCount = 0; // Track consecutive failures for exponential backoff
-let globalPollingBaseInterval = 2000; // Base polling interval in ms - MATCHES sync.py exactly
-
-function startGlobalDownloadPolling() {
- // Always run HTTP polling as a fallback — WebSocket connections can silently
- // stop delivering messages (room subscription lost, server emit error, proxy
- // timeout) without triggering a disconnect event. The 2-second poll is cheap
- // (single batched request) and ensures modals never go stale.
- if (globalDownloadStatusPoller) {
- console.debug('🔄 [Global Polling] Already running, skipping start');
- return; // Prevent duplicate pollers
- }
-
- console.log('🔄 [Global Polling] Starting batched download status polling');
-
- globalDownloadStatusPoller = setInterval(async () => {
- if (document.hidden) return; // Skip polling when tab is not visible
- // Get all active processes that need polling
- const activeBatchIds = [];
- const batchToPlaylistMap = {};
- let hasOpenWishlistModal = false;
-
- Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
- // Include running AND recently-completed batches — ensures late task
- // status updates still reach the modal so rows don't freeze mid-download
- if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
- activeBatchIds.push(process.batchId);
- batchToPlaylistMap[process.batchId] = playlistId;
- }
-
- // Check if there's an open wishlist modal (visible and idle/waiting)
- if (playlistId === 'wishlist' && process.modalElement &&
- process.modalElement.style.display === 'flex' &&
- (!process.batchId || process.status !== 'running')) {
- hasOpenWishlistModal = true;
- }
- });
-
- // Special handling for open wishlist modal - check for new auto-processing
- if (hasOpenWishlistModal) {
- try {
- const response = await fetch('/api/active-processes');
- if (response.ok) {
- const data = await response.json();
- const processes = data.active_processes || [];
- const serverWishlistProcess = processes.find(p => p.playlist_id === 'wishlist');
-
- if (serverWishlistProcess) {
- console.log('🔄 [Global Polling] Detected auto-processing for open wishlist modal - rehydrating');
- await rehydrateModal(serverWishlistProcess, false); // false = not user-requested
- }
- }
- } catch (error) {
- console.debug('⚠️ [Global Polling] Failed to check for wishlist auto-processing:', error);
- }
- }
-
- if (activeBatchIds.length === 0) {
- console.debug('📊 [Global Polling] No active processes, continuing polling');
- return;
- }
-
- try {
- // Single batched API call for all active processes
- const queryParams = activeBatchIds.map(id => `batch_ids=${id}`).join('&');
- const response = await fetch(`/api/download_status/batch?${queryParams}`);
-
- if (!response.ok) {
- throw new Error(`HTTP ${response.status}: ${response.statusText}`);
- }
-
- const data = await response.json();
- console.debug(`📊 [Global Polling] Received batched update for ${Object.keys(data.batches).length} processes`);
-
- // Process each batch's status data using existing logic
- Object.entries(data.batches).forEach(([batchId, statusData]) => {
- const playlistId = batchToPlaylistMap[batchId];
- if (!playlistId || statusData.error) {
- if (statusData.error) {
- console.error(`❌ [Global Polling] Error for batch ${batchId}:`, statusData.error);
- }
- return;
- }
-
- // Use existing modal update logic - zero changes needed!
- processModalStatusUpdate(playlistId, statusData);
- });
-
- // ENHANCED: Reset failure count on successful polling
- globalPollingFailureCount = 0;
-
- } catch (error) {
- console.error('❌ [Global Polling] Batched request failed:', error);
-
- // ENHANCED: Implement exponential backoff on failure
- globalPollingFailureCount++;
-
- if (globalPollingFailureCount >= 5) {
- console.error(`🚨 [Global Polling] ${globalPollingFailureCount} consecutive failures, continuing with backoff`);
- // Don't stop polling - just continue with exponential backoff
- }
-
- // Exponential backoff: increase interval temporarily
- const backoffInterval = Math.min(globalPollingBaseInterval * Math.pow(2, globalPollingFailureCount - 1), 8000);
- console.warn(`⚠️ [Global Polling] Failure ${globalPollingFailureCount}/5, backing off to ${backoffInterval}ms`);
-
- // Temporarily adjust the polling interval
- if (globalDownloadStatusPoller) {
- clearInterval(globalDownloadStatusPoller);
- globalDownloadStatusPoller = null;
-
- // Restart with backoff interval
- setTimeout(() => {
- if (Object.keys(activeDownloadProcesses).length > 0) {
- startGlobalDownloadPollingWithInterval(backoffInterval);
- }
- }, backoffInterval);
- }
- }
- }, globalPollingBaseInterval); // Use base interval initially
-}
-
-function startGlobalDownloadPollingWithInterval(interval) {
- if (globalDownloadStatusPoller) {
- console.debug('🔄 [Global Polling] Already running, skipping start with interval');
- return;
- }
-
- console.log(`🔄 [Global Polling] Starting with interval ${interval}ms`);
-
- // Use the exact same logic as startGlobalDownloadPolling but with custom interval
- globalDownloadStatusPoller = setInterval(async () => {
- const activeBatchIds = [];
- const batchToPlaylistMap = {};
- let hasOpenWishlistModal = false;
-
- Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
- if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
- activeBatchIds.push(process.batchId);
- batchToPlaylistMap[process.batchId] = playlistId;
- }
-
- // Check if there's an open wishlist modal (visible and idle/waiting)
- if (playlistId === 'wishlist' && process.modalElement &&
- process.modalElement.style.display === 'flex' &&
- (!process.batchId || process.status !== 'running')) {
- hasOpenWishlistModal = true;
- }
- });
-
- // Special handling for open wishlist modal - check for new auto-processing
- if (hasOpenWishlistModal) {
- try {
- const response = await fetch('/api/active-processes');
- if (response.ok) {
- const data = await response.json();
- const processes = data.active_processes || [];
- const serverWishlistProcess = processes.find(p => p.playlist_id === 'wishlist');
-
- if (serverWishlistProcess) {
- console.log('🔄 [Global Polling] Detected auto-processing for open wishlist modal - rehydrating');
- await rehydrateModal(serverWishlistProcess, false); // false = not user-requested
- }
- }
- } catch (error) {
- console.debug('⚠️ [Global Polling] Failed to check for wishlist auto-processing:', error);
- }
- }
-
- if (activeBatchIds.length === 0) {
- console.debug('📊 [Global Polling] No active processes, continuing polling');
- return;
- }
-
- try {
- const queryParams = activeBatchIds.map(id => `batch_ids=${id}`).join('&');
- const response = await fetch(`/api/download_status/batch?${queryParams}`);
-
- if (!response.ok) {
- throw new Error(`HTTP ${response.status}: ${response.statusText}`);
- }
-
- const data = await response.json();
- console.debug(`📊 [Global Polling] Received batched update for ${Object.keys(data.batches).length} processes`);
-
- Object.entries(data.batches).forEach(([batchId, statusData]) => {
- const playlistId = batchToPlaylistMap[batchId];
- if (!playlistId || statusData.error) {
- if (statusData.error) {
- console.error(`❌ [Global Polling] Error for batch ${batchId}:`, statusData.error);
- }
- return;
- }
- processModalStatusUpdate(playlistId, statusData);
- });
-
- // Success - reset to normal interval if we were backing off
- globalPollingFailureCount = 0;
- if (interval !== globalPollingBaseInterval) {
- console.log('✅ [Global Polling] Recovered from backoff, returning to normal interval');
- clearInterval(globalDownloadStatusPoller);
- globalDownloadStatusPoller = null;
- startGlobalDownloadPolling(); // Restart with normal interval
- }
-
- } catch (error) {
- console.error('❌ [Global Polling] Request failed:', error);
- globalPollingFailureCount++;
-
- if (globalPollingFailureCount >= 5) {
- console.error(`🚨 [Global Polling] Too many failures, continuing with backoff`);
- // Don't stop polling - just continue with exponential backoff
- }
- }
- }, interval);
-}
-
-function stopGlobalDownloadPolling() {
- if (globalDownloadStatusPoller) {
- console.log('🛑 [Global Polling] Stopping batched download status polling');
- clearInterval(globalDownloadStatusPoller);
- globalDownloadStatusPoller = null;
- }
-}
-
-// --- Error tooltip for failed/cancelled downloads (fixed-position, escapes overflow) ---
-function _getErrorTooltipPopup() {
- let el = document.getElementById('error-tooltip-popup');
- if (!el) {
- el = document.createElement('div');
- el.id = 'error-tooltip-popup';
- document.body.appendChild(el);
- }
- return el;
-}
-
-function _hideErrorTooltip() {
- const popup = document.getElementById('error-tooltip-popup');
- if (popup) popup.classList.remove('visible');
-}
-
-function _ensureErrorTooltipListeners(statusEl) {
- if (statusEl._errorTooltipBound) return;
- statusEl._errorTooltipBound = true;
- statusEl.addEventListener('mouseenter', function () {
- const msg = this.dataset.errorMsg;
- if (!msg || !this.offsetParent) return; // skip if element is hidden
- const popup = _getErrorTooltipPopup();
- popup.textContent = msg;
- popup.classList.add('visible');
- const rect = this.getBoundingClientRect();
- const popupRect = popup.getBoundingClientRect();
- let left = rect.left + rect.width / 2 - popupRect.width / 2;
- let top = rect.top - popupRect.height - 10;
- // Keep within viewport
- if (left < 8) left = 8;
- if (left + popupRect.width > window.innerWidth - 8) left = window.innerWidth - 8 - popupRect.width;
- if (top < 8) { top = rect.bottom + 10; } // flip below if no room above
- popup.style.left = left + 'px';
- popup.style.top = top + 'px';
- });
- statusEl.addEventListener('mouseleave', _hideErrorTooltip);
-
- // Dismiss tooltip when the scrollable modal body scrolls
- const scrollParent = statusEl.closest('.download-missing-modal-body');
- if (scrollParent && !scrollParent._errorTooltipScrollBound) {
- scrollParent._errorTooltipScrollBound = true;
- scrollParent.addEventListener('scroll', _hideErrorTooltip, { passive: true });
- }
-}
-
-function _ensureCandidatesClickListener(statusEl) {
- if (statusEl._candidatesClickBound) return;
- statusEl._candidatesClickBound = true;
- statusEl.addEventListener('click', function (e) {
- e.stopPropagation();
- _hideErrorTooltip();
- const taskId = this.dataset.taskId;
- if (taskId) showCandidatesModal(taskId);
- });
-}
-
-async function showCandidatesModal(taskId) {
- try {
- const resp = await fetch(`/api/downloads/task/${encodeURIComponent(taskId)}/candidates`);
- if (!resp.ok) { console.error('Failed to fetch candidates:', resp.status); return; }
- const data = await resp.json();
- _renderCandidatesModal(data);
- } catch (err) {
- console.error('Error fetching candidates:', err);
- }
-}
-
-function _renderCandidatesModal(data) {
- let overlay = document.getElementById('candidates-modal-overlay');
- if (overlay) overlay.remove();
-
- const trackName = data.track_info?.name || 'Unknown Track';
- const trackArtist = data.track_info?.artist || 'Unknown Artist';
- const candidates = data.candidates || [];
- const errorMsg = data.error_message || '';
-
- const fmtSize = (bytes) => {
- if (!bytes) return '-';
- const units = ['B', 'KB', 'MB', 'GB'];
- let s = bytes, u = 0;
- while (s >= 1024 && u < units.length - 1) { s /= 1024; u++; }
- return `${s.toFixed(1)} ${units[u]}`;
- };
- const fmtDur = (ms) => {
- if (!ms) return '-';
- const sec = Math.floor(ms / 1000);
- return `${Math.floor(sec / 60)}:${(sec % 60).toString().padStart(2, '0')}`;
- };
-
- let tableRows = '';
- if (candidates.length === 0) {
- tableRows = `${title}
-
-
-
-
`;
-
- document.body.appendChild(overlay);
- requestAnimationFrame(() => overlay.classList.add('visible'));
-
- // Bind download buttons
- overlay.querySelectorAll('.candidates-download-btn').forEach(btn => {
- btn.addEventListener('click', () => {
- const idx = parseInt(btn.dataset.index);
- const c = candidates[idx];
- if (c) downloadCandidate(data.task_id, c, trackName);
- });
- });
-}
-
-async function downloadCandidate(taskId, candidate, trackName) {
- if (!await showConfirmDialog({ title: 'Download File', message: `Download this file as "${trackName}"?\n\n${candidate.filename?.split(/[/\\]/).pop() || 'Unknown file'}\nfrom ${candidate.username || 'Unknown user'}`, confirmText: 'Download' })) return;
- try {
- const resp = await fetch(`/api/downloads/task/${encodeURIComponent(taskId)}/download-candidate`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(candidate)
- });
- const result = await resp.json();
- if (result.success) {
- closeCandidatesModal();
- showToast(result.message || 'Download initiated', 'success');
- } else {
- showToast(`Failed: ${result.error}`, 'error');
- }
- } catch (err) {
- console.error('Error initiating manual download:', err);
- showToast('Failed to initiate download', 'error');
- }
-}
-
-function closeCandidatesModal() {
- const overlay = document.getElementById('candidates-modal-overlay');
- if (overlay) {
- overlay.classList.remove('visible');
- setTimeout(() => overlay.remove(), 300);
- }
-}
-
-function processModalStatusUpdate(playlistId, data) {
- // This function contains ALL the existing polling logic from startModalDownloadPolling
- // Extracted so it can be called from both individual and batched polling
- const process = activeDownloadProcesses[playlistId];
- if (!process) {
- console.debug(`⚠️ [Status Update] No process found for ${playlistId}, skipping update`);
- return;
- }
-
- if (data.error) {
- console.error(`❌ [Status Update] Error for ${playlistId}: ${data.error}`);
- return;
- }
-
- // ENHANCED: Validate response data to prevent UI corruption
- if (!data || typeof data !== 'object') {
- console.error(`❌ [Status Update] Invalid data for ${playlistId}:`, data);
- return;
- }
-
- // ENHANCED: Validate task data structure
- if (data.tasks && !Array.isArray(data.tasks)) {
- console.error(`❌ [Status Update] Invalid tasks data for ${playlistId} - not an array:`, data.tasks);
- return;
- }
-
- console.debug(`📊 [Status Update] Processing update for ${playlistId}: phase=${data.phase}, tasks=${(data.tasks || []).length}`);
-
- // Note: Wishlist modal visibility is now managed by handleWishlistButtonClick() only
- // Auto-show logic has been simplified to prevent conflicts
-
- if (data.phase === 'analysis') {
- const progress = data.analysis_progress;
- const percent = progress.total > 0 ? (progress.processed / progress.total) * 100 : 0;
- document.getElementById(`analysis-progress-fill-${playlistId}`).style.width = `${percent}%`;
- document.getElementById(`analysis-progress-text-${playlistId}`).textContent =
- `${progress.processed}/${progress.total} tracks analyzed`;
- if (data.analysis_results) {
- updateTrackAnalysisResults(playlistId, data.analysis_results);
- // Update stats when we first get analysis results
- const foundCount = data.analysis_results.filter(r => r.found).length;
- const missingCount = data.analysis_results.filter(r => !r.found).length;
- document.getElementById(`stat-found-${playlistId}`).textContent = foundCount;
- document.getElementById(`stat-missing-${playlistId}`).textContent = missingCount;
-
- // Auto-save M3U file for playlists after analysis
- autoSavePlaylistM3U(playlistId);
- }
- } else if (data.phase === 'downloading' || data.phase === 'complete' || data.phase === 'error') {
- console.debug(`📊 [Status Update] Processing ${data.phase} phase for playlistId: ${playlistId}, tasks: ${(data.tasks || []).length}`);
-
- if (document.getElementById(`analysis-progress-fill-${playlistId}`).style.width !== '100%') {
- document.getElementById(`analysis-progress-fill-${playlistId}`).style.width = '100%';
- document.getElementById(`analysis-progress-text-${playlistId}`).textContent = 'Analysis complete!';
- if (data.analysis_results) {
- updateTrackAnalysisResults(playlistId, data.analysis_results);
- const foundCount = data.analysis_results.filter(r => r.found).length;
- const missingCount = data.analysis_results.filter(r => !r.found).length;
- document.getElementById(`stat-found-${playlistId}`).textContent = foundCount;
- document.getElementById(`stat-missing-${playlistId}`).textContent = missingCount;
- }
- }
- const missingTracks = (data.analysis_results || []).filter(r => !r.found);
- const missingCount = missingTracks.length;
- let completedCount = 0;
- let failedOrCancelledCount = 0;
- let notFoundCount = 0;
-
- // Verify modal exists before processing tasks
- const modal = document.getElementById(`download-missing-modal-${playlistId}`);
- if (!modal) {
- console.error(`❌ [Status Update] Modal not found: download-missing-modal-${playlistId}`);
- return;
- }
-
- // Update download progress text immediately when entering downloading phase
- // This handles the case where tasks array is empty or still being populated
- const downloadProgressText = document.getElementById(`download-progress-text-${playlistId}`);
- if (data.phase === 'downloading' && missingCount > 0 && (!data.tasks || data.tasks.length === 0)) {
- // No tasks yet, but we're in downloading phase with missing tracks
- if (downloadProgressText) {
- downloadProgressText.textContent = 'Preparing downloads...';
- console.log(`📥 [Download Phase] Preparing ${missingCount} downloads...`);
- }
- }
-
- (data.tasks || []).forEach(task => {
- const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${task.track_index}"]`);
- if (!row) {
- console.debug(`❌ [Status Update] Row not found for playlistId: ${playlistId}, track_index: ${task.track_index}`);
- return;
- }
-
- // V2 SYSTEM: Check for persistent cancel state from backend
- const isV2Task = task.playlist_id !== undefined; // V2 tasks have playlist_id
- const cancelRequested = task.cancel_requested || false;
- const uiState = task.ui_state || 'normal';
-
- // Legacy protection for old system compatibility
- if (row.dataset.locallyCancelled === 'true' && !isV2Task) {
- failedOrCancelledCount++;
- return; // Only skip for legacy system tasks
- }
-
- // Mark row with V2 system info
- if (isV2Task) {
- row.dataset.useV2System = 'true';
- row.dataset.cancelRequested = cancelRequested.toString();
- row.dataset.uiState = uiState;
- }
-
- row.dataset.taskId = task.task_id;
- const statusEl = document.getElementById(`download-${playlistId}-${task.track_index}`);
- const actionsEl = document.getElementById(`actions-${playlistId}-${task.track_index}`);
-
- let statusText = '';
- // V2 SYSTEM: Handle UI state override for cancelling tasks
- if (isV2Task && uiState === 'cancelling' && task.status !== 'cancelled') {
- statusText = '🔄 Cancelling...';
- } else {
- switch (task.status) {
- case 'pending': statusText = '⏸️ Pending'; break;
- case 'searching': statusText = '🔍 Searching...'; break;
- case 'downloading': statusText = `⏬ Downloading... ${Math.round(task.progress || 0)}%`; break;
- case 'post_processing': statusText = '⌛ Processing...'; break;
- case 'completed': statusText = '✅ Completed'; completedCount++; break;
- case 'not_found': statusText = '🔇 Not Found'; notFoundCount++; break;
- case 'failed': statusText = '❌ Failed'; failedOrCancelledCount++; break;
- case 'cancelled': statusText = '🚫 Cancelled'; failedOrCancelledCount++; break;
- default: statusText = `⚪ ${task.status}`; break;
- }
- }
-
- if (statusEl) {
- statusEl.classList.remove('has-error-tooltip');
- statusEl.removeAttribute('title');
- statusEl.removeAttribute('data-error-msg');
- statusEl.textContent = statusText;
-
- if ((task.status === 'failed' || task.status === 'cancelled' || task.status === 'not_found') && task.error_message) {
- statusEl.classList.add('has-error-tooltip');
- statusEl.dataset.errorMsg = task.error_message;
- _ensureErrorTooltipListeners(statusEl);
- }
- // Make not_found and failed cells clickable to review search candidates
- if ((task.status === 'not_found' || task.status === 'failed') && task.has_candidates) {
- statusEl.classList.add('has-candidates');
- statusEl.dataset.taskId = task.task_id;
- _ensureCandidatesClickListener(statusEl);
- }
- console.debug(`✅ [Status Update] Updated track ${task.track_index} to: ${statusText}${isV2Task ? ' (V2)' : ''}`);
- } else {
- console.warn(`❌ [Status Update] Status element not found: download-${playlistId}-${task.track_index}`);
- }
-
- // V2 SYSTEM: Smart button management with persistent state awareness
- if (actionsEl && !['completed', 'failed', 'cancelled', 'not_found', 'post_processing'].includes(task.status)) {
- // Check if we're in a cancelling state
- if (isV2Task && uiState === 'cancelling') {
- actionsEl.innerHTML = 'Cancelling...';
- } else {
- // Create V2 cancel button for all active tasks
- const onclickHandler = isV2Task ? 'cancelTrackDownloadV2' : 'cancelTrackDownload';
- actionsEl.innerHTML = ``;
- }
- } else if (actionsEl && ['completed', 'failed', 'cancelled', 'not_found', 'post_processing'].includes(task.status)) {
- actionsEl.innerHTML = '-'; // No actions available for terminal or processing states
- }
- });
-
- // ENHANCED: Validate worker counts from server data
- const serverActiveWorkers = data.active_count || 0;
- const maxWorkers = data.max_concurrent || 3;
-
- // V2 SYSTEM: Simplified worker counting - backend is authoritative
- // Count active tasks, excluding locally cancelled legacy tasks only
- const clientActiveWorkers = (data.tasks || []).filter(task => {
- const row = document.querySelector(`tr[data-track-index="${task.track_index}"]`);
- const isLegacyCancelled = row && row.dataset.locallyCancelled === 'true' && !row.dataset.useV2System;
- return ['searching', 'downloading', 'queued'].includes(task.status) && !isLegacyCancelled;
- }).length;
-
- // Log discrepancies for debugging
- if (serverActiveWorkers !== clientActiveWorkers) {
- console.warn(`🔍 [Worker Validation] ${playlistId}: server reports ${serverActiveWorkers} active, client sees ${clientActiveWorkers} active tasks`);
-
- // If server reports 0 but client sees active tasks, this might indicate ghost workers were fixed
- if (serverActiveWorkers === 0 && clientActiveWorkers > 0) {
- console.warn(`🚨 [Worker Validation] Server reports 0 workers but client sees ${clientActiveWorkers} active tasks - potential UI desync`);
- }
- }
-
- console.debug(`📊 [Worker Status] ${playlistId}: ${serverActiveWorkers}/${maxWorkers} active workers, ${clientActiveWorkers} client-side active tasks`);
-
- const totalFinished = completedCount + failedOrCancelledCount + notFoundCount;
- const progressPercent = missingCount > 0 ? (totalFinished / missingCount) * 100 : 0;
- document.getElementById(`download-progress-fill-${playlistId}`).style.width = `${progressPercent}%`;
- document.getElementById(`download-progress-text-${playlistId}`).textContent = `${completedCount}/${missingCount} completed (${progressPercent.toFixed(0)}%)`;
- document.getElementById(`stat-downloaded-${playlistId}`).textContent = completedCount;
-
- // Auto-save M3U file once when all downloads finish (not on every poll cycle).
- // Previously this fired on EVERY 2-second poll when completedCount > 0, flooding
- // the server with heavyweight M3U generation requests that exhausted Flask threads
- // and caused the batch status endpoint to hang — killing the poller.
-
- // CLIENT-SIDE COMPLETION: Only complete when ALL task rows in the UI reflect a terminal state.
- // Using totalFinished (derived from DOM updates in THIS render pass) prevents premature
- // completion when the server sends phase='complete' before all rows have been updated.
- const allTracksFinished = totalFinished >= missingCount && missingCount > 0 && totalFinished > 0;
- // Extra guard: require the server to also report no active tasks
- const serverHasActiveWork = (data.tasks || []).some(t =>
- ['downloading', 'searching', 'queued', 'pending', 'post_processing'].includes(t.status));
- if (allTracksFinished && !serverHasActiveWork && process.status !== 'complete') {
- console.log(`🎯 [Client Completion] All ${totalFinished}/${missingCount} tracks finished - completing modal locally`);
-
- // Hide cancel button and mark as complete
- document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
- process.status = 'complete';
- updatePlaylistCardUI(playlistId);
-
- // Save M3U once on completion (not during progress polling)
- if (completedCount > 0) {
- autoSavePlaylistM3U(playlistId);
- }
-
- // Show the force download toggle again
- const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
- if (forceToggleContainer) {
- forceToggleContainer.style.display = 'flex';
- }
-
- // Set album to downloaded status if this is an artist album
- if (playlistId.startsWith('artist_album_')) {
- const parts = playlistId.split('_');
- if (parts.length >= 4) {
- const albumId = parts.slice(3).join('_');
- setTimeout(() => setAlbumDownloadedStatus(albumId), 500); // Small delay to ensure UI updates
- }
- }
-
- // Update mirrored playlist card phase on client-side completion
- if (playlistId.startsWith('youtube_')) {
- const urlHash = playlistId.replace('youtube_', '');
- if (urlHash.startsWith('mirrored_')) {
- updateMirroredCardPhase(urlHash, 'download_complete');
- }
- }
-
- // Auto-save final M3U file for playlists
- autoSavePlaylistM3U(playlistId);
-
- // Show completion message
- let completionParts = [`${completedCount} downloaded`];
- if (notFoundCount > 0) completionParts.push(`${notFoundCount} not found`);
- if (failedOrCancelledCount > 0) completionParts.push(`${failedOrCancelledCount} failed`);
- const completionMessage = `Download complete! ${completionParts.join(', ')}.`;
- showToast(completionMessage, 'success');
-
- // Refresh server playlists tab so it reflects newly synced tracks
- if (typeof loadServerPlaylists === 'function') {
- setTimeout(() => loadServerPlaylists(), 2000);
- }
-
- // Auto-close wishlist modal when completed (for auto-processing)
- if (playlistId === 'wishlist') {
- console.log('🔄 [Auto-Wishlist] Auto-closing completed wishlist modal to enable next cycle');
- setTimeout(() => {
- closeDownloadMissingModal(playlistId);
- }, 3000); // 3-second delay to show completion message
- }
-
- // Check if any other processes still need polling
- checkAndCleanupGlobalPolling();
-
- return; // Skip waiting for backend signal
- }
-
- // FIXED: Only trigger completion logic when backend actually reports batch as complete
- // Don't assume completion based on task counts - let backend determine when truly complete
- if (data.phase === 'complete' || data.phase === 'error') {
- // Enhanced check for background auto-processing for wishlist
- const isWishlist = (playlistId === 'wishlist');
- const isModalHidden = (process.modalElement && process.modalElement.style.display === 'none');
- const isAutoInitiated = data.auto_initiated || false; // Server indicates if batch was auto-started
- const isBackgroundWishlist = isWishlist && (isModalHidden || isAutoInitiated);
-
- // Note: Auto-show logic removed - wishlist modal visibility managed by user interaction only
-
- if (data.phase === 'cancelled') {
- process.status = 'cancelled';
-
- // Reset YouTube playlist phase to 'discovered' if this is a YouTube playlist on cancel
- if (playlistId.startsWith('youtube_')) {
- const urlHash = playlistId.replace('youtube_', '');
- updateYouTubeCardPhase(urlHash, 'discovered');
- if (urlHash.startsWith('mirrored_')) {
- updateMirroredCardPhase(urlHash, 'discovered');
- }
- }
-
- showToast(`Process cancelled for ${process.playlist.name}.`, 'info');
- } else if (data.phase === 'error') {
- process.status = 'complete'; // Treat as complete to allow cleanup
- updatePlaylistCardUI(playlistId); // Update card to show ready for review
-
- // Reset YouTube playlist phase to 'discovered' if this is a YouTube playlist on error
- if (playlistId.startsWith('youtube_')) {
- const urlHash = playlistId.replace('youtube_', '');
- updateYouTubeCardPhase(urlHash, 'discovered');
- if (urlHash.startsWith('mirrored_')) {
- updateMirroredCardPhase(urlHash, 'discovered');
- }
- }
-
- showToast(`Process for ${process.playlist.name} failed!`, 'error');
- } else {
- process.status = 'complete';
- updatePlaylistCardUI(playlistId); // Update card to show ready for review
-
- // Update YouTube playlist phase to 'download_complete' if this is a YouTube playlist
- if (playlistId.startsWith('youtube_')) {
- const urlHash = playlistId.replace('youtube_', '');
- updateYouTubeCardPhase(urlHash, 'download_complete');
- if (urlHash.startsWith('mirrored_')) {
- updateMirroredCardPhase(urlHash, 'download_complete');
- }
- }
-
- // Update Tidal playlist phase to 'download_complete' if this is a Tidal playlist
- if (playlistId.startsWith('tidal_')) {
- const tidalPlaylistId = playlistId.replace('tidal_', '');
- if (tidalPlaylistStates[tidalPlaylistId]) {
- tidalPlaylistStates[tidalPlaylistId].phase = 'download_complete';
- // Store the download process ID for potential modal rehydration
- tidalPlaylistStates[tidalPlaylistId].download_process_id = process.batchId;
- updateTidalCardPhase(tidalPlaylistId, 'download_complete');
- console.log(`✅ [Status Complete] Updated Tidal playlist ${tidalPlaylistId} to download_complete phase`);
- }
- }
-
- // Update Beatport chart phase to 'download_complete' if this is a Beatport chart
- if (playlistId.startsWith('beatport_')) {
- const urlHash = playlistId.replace('beatport_', '');
- const state = youtubePlaylistStates[urlHash];
-
- if (state && state.is_beatport_playlist) {
- const chartHash = state.beatport_chart_hash || urlHash;
-
- // Update frontend states
- state.phase = 'download_complete';
- state.download_process_id = process.batchId;
- if (beatportChartStates[chartHash]) {
- beatportChartStates[chartHash].phase = 'download_complete';
- }
-
- // Update card UI
- updateBeatportCardPhase(chartHash, 'download_complete');
-
- // Update backend state
- try {
- fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- phase: 'download_complete',
- download_process_id: process.batchId
- })
- });
- } catch (error) {
- console.warn('⚠️ Error updating backend Beatport phase to download_complete:', error);
- }
-
- console.log(`✅ [Status Complete] Updated Beatport chart ${chartHash} to download_complete phase`);
- }
- }
-
- // Handle background wishlist processing completion specially
- if (isBackgroundWishlist) {
- console.log(`🎉 Background wishlist processing complete: ${completedCount} downloaded, ${notFoundCount} not found, ${failedOrCancelledCount} failed`);
-
- // Reset modal to idle state to prevent "complete" phase disruption
- setTimeout(() => {
- resetWishlistModalToIdleState();
- // Server-side auto-processing will handle next cycle automatically
- }, 500);
-
- return; // Skip normal completion handling
- }
-
- // Show completion summary with wishlist stats (matching sync.py behavior)
- let completionMessage = `Process complete for ${process.playlist.name}!`;
- let messageType = 'success';
-
- // Check for wishlist summary from backend (added when failed/cancelled tracks are processed)
- if (data.wishlist_summary) {
- const summary = data.wishlist_summary;
- let summaryParts = [`Downloaded: ${completedCount}`];
- if (notFoundCount > 0) summaryParts.push(`Not Found: ${notFoundCount}`);
- if (failedOrCancelledCount > 0) summaryParts.push(`Failed: ${failedOrCancelledCount}`);
- completionMessage = `Download process complete! ${summaryParts.join(', ')}.`;
-
- if (summary.tracks_added > 0) {
- completionMessage += ` Added ${summary.tracks_added} failed track${summary.tracks_added !== 1 ? 's' : ''} to wishlist for automatic retry.`;
- } else if (summary.total_failed > 0) {
- completionMessage += ` ${summary.total_failed} track${summary.total_failed !== 1 ? 's' : ''} could not be added to wishlist.`;
- messageType = 'warning';
- }
- }
-
- showToast(completionMessage, messageType);
- }
-
- document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
-
- // Mark process as complete and trigger cleanup check
- process.status = 'complete';
- updatePlaylistCardUI(playlistId);
-
- // Check if any other processes still need polling
- checkAndCleanupGlobalPolling();
- }
- }
-}
-
-function checkAndCleanupGlobalPolling() {
- // Check if any processes still need polling
- const hasActivePolling = Object.values(activeDownloadProcesses)
- .some(p => p.batchId && p.status === 'running');
-
- if (!hasActivePolling) {
- console.debug('🧹 [Cleanup] No more active processes, continuing polling');
- // Keep polling active - no need to stop
- }
-}
-
-// LEGACY FUNCTION: Keep for backward compatibility, but now uses global polling
-function startModalDownloadPolling(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (!process || !process.batchId) return;
-
- console.log(`🔄 [Legacy Polling] Starting polling for ${playlistId}, delegating to global poller`);
-
- // Clear any existing individual poller (cleanup)
- if (process.poller) {
- clearInterval(process.poller);
- process.poller = null;
- }
-
- // Mark process as running to be picked up by global poller
- process.status = 'running';
-
- // Start global polling if not already running
- startGlobalDownloadPolling();
-
- // Create dummy poller for backward compatibility with cleanup functions
- ensureLegacyCompatibility(playlistId);
-}
-
-// For backward compatibility with cleanup functions that expect process.poller
-// Creates a dummy poller that will be cleaned up by the existing cleanup logic
-function createLegacyPoller(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (!process) return;
-
- // Create a dummy interval that just checks if the process is still active
- // This ensures existing cleanup logic that calls clearInterval(process.poller) works
- process.poller = setInterval(() => {
- // This dummy poller doesn't do anything - global poller handles updates
- if (!activeDownloadProcesses[playlistId] || process.status === 'complete') {
- clearInterval(process.poller);
- process.poller = null;
- return;
- }
- }, 5000); // Very infrequent check, just for cleanup compatibility
-}
-
-// Call this to create the legacy poller after starting global polling
-function ensureLegacyCompatibility(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (process && !process.poller) {
- createLegacyPoller(playlistId);
- }
-}
-async function updateModalWithLiveDownloadProgress() {
- try {
- if (!currentDownloadBatchId) return;
-
- // Fetch live download data from the downloads API
- const response = await fetch('/api/downloads/status');
- const downloadData = await response.json();
-
- if (downloadData.error) return;
-
- // Get all active and finished downloads
- const allDownloads = { ...(downloadData.active || {}), ...(downloadData.finished || {}) };
-
- // Update modal tracks that have active downloads
- const modalRows = document.querySelectorAll('.download-missing-modal tr[data-track-index]');
-
- for (const row of modalRows) {
- const taskId = row.dataset.taskId;
- if (!taskId) continue;
-
- // Find corresponding download by checking if filename/title matches
- const trackName = row.querySelector('.track-name')?.textContent?.trim();
- if (!trackName) continue;
-
- // Search for matching download
- for (const [downloadId, downloadInfo] of Object.entries(allDownloads)) {
- // Extract display title from filename (handle YouTube encoding)
- let downloadTitle = '';
- if (downloadInfo.filename) {
- if ((downloadInfo.username === 'youtube' || downloadInfo.username === 'tidal' || downloadInfo.username === 'qobuz' || downloadInfo.username === 'hifi') && downloadInfo.filename.includes('||')) {
- const parts = downloadInfo.filename.split('||');
- downloadTitle = parts[1] || parts[0];
- } else {
- downloadTitle = downloadInfo.filename.split(/[\\/]/).pop();
- }
- }
-
- // Simple matching - could be improved with better logic
- if (downloadTitle && trackName && (
- downloadTitle.toLowerCase().includes(trackName.toLowerCase()) ||
- trackName.toLowerCase().includes(downloadTitle.toLowerCase())
- )) {
- // Update the track with live download progress
- const statusElement = row.querySelector('.track-download-status');
- const progress = downloadInfo.percentComplete || 0;
- const state = downloadInfo.state || '';
-
- if (statusElement && state.includes('InProgress') && progress > 0) {
- statusElement.textContent = `⏬ Downloading... ${Math.round(progress)}%`;
- statusElement.className = 'track-download-status download-downloading';
- } else if (statusElement && (state.includes('Completed') || state.includes('Succeeded'))) {
- statusElement.textContent = '✅ Completed';
- statusElement.className = 'track-download-status download-complete';
- }
-
- break; // Found a match, stop searching
- }
- }
- }
-
- } catch (error) {
- // Silent fail - don't spam console during normal operation
- }
-}
-
-function toggleAllTrackSelections(playlistId, checked) {
- const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
- if (!tbody) return;
- const checkboxes = tbody.querySelectorAll('.track-select-cb');
- checkboxes.forEach(cb => { cb.checked = checked; });
- updateTrackSelectionCount(playlistId);
-}
-
-function updateTrackSelectionCount(playlistId) {
- const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
- if (!tbody) return;
- const allCbs = tbody.querySelectorAll('.track-select-cb');
- const checkedCbs = tbody.querySelectorAll('.track-select-cb:checked');
- const total = allCbs.length;
- const selected = checkedCbs.length;
-
- // Update selection count label
- const countLabel = document.getElementById(`track-selection-count-${playlistId}`);
- if (countLabel) {
- countLabel.textContent = `${selected} / ${total} tracks selected`;
- }
-
- // Update select-all checkbox state
- const selectAll = document.getElementById(`select-all-${playlistId}`);
- if (selectAll) {
- selectAll.checked = selected === total;
- selectAll.indeterminate = selected > 0 && selected < total;
- }
-
- // Update row dimming
- allCbs.forEach(cb => {
- const row = cb.closest('tr');
- if (row) row.classList.toggle('track-deselected', !cb.checked);
- });
-
- // Disable Begin Analysis and Add to Wishlist buttons when 0 selected
- const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
- if (beginBtn) {
- beginBtn.disabled = selected === 0;
- }
- const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
- if (wishlistBtn) {
- wishlistBtn.disabled = selected === 0;
- }
-}
-
-async function cancelAllOperations(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (!process) return;
-
- // Prevent multiple cancel all operations
- if (process.cancellingAll) {
- console.log(`⚠️ Cancel All already in progress for ${playlistId}`);
- return;
- }
- process.cancellingAll = true;
-
- console.log(`🚫 Cancel All clicked for playlist ${playlistId} - closing modal and cleaning up server`);
-
- showToast('Cancelling all operations and closing modal...', 'info');
-
- // Mark process as complete immediately so polling stops
- process.status = 'complete';
-
- // Stop any active polling
- if (process.poller) {
- clearInterval(process.poller);
- process.poller = null;
- }
-
- // Tell server to stop starting new downloads and clean up the batch
- if (process.batchId) {
- try {
- // Cancel the batch (stops new downloads from starting)
- const cancelResponse = await fetch(`/api/playlists/${process.batchId}/cancel_batch`, {
- method: 'POST'
- });
- if (cancelResponse.ok) {
- const cancelData = await cancelResponse.json();
- console.log(`✅ Server stopped new downloads for batch ${process.batchId}`);
- }
- } catch (error) {
- console.warn('Error during server batch cancel:', error);
- }
- }
-
- // Close the modal immediately - this will handle cleanup
- closeDownloadMissingModal(playlistId);
-
- showToast('Modal closed. Active downloads will finish in background.', 'success');
-}
-
-function resetToInitialState() {
- // Reset UI
- document.getElementById('begin-analysis-btn').style.display = 'inline-block';
- document.getElementById('start-downloads-btn').style.display = 'none';
- document.getElementById('cancel-all-btn').style.display = 'none';
-
- // Reset progress bars
- document.getElementById('analysis-progress-fill').style.width = '0%';
- document.getElementById('download-progress-fill').style.width = '0%';
- document.getElementById('analysis-progress-text').textContent = 'Ready to start';
- document.getElementById('download-progress-text').textContent = 'Waiting for analysis';
-
- // Reset stats
- document.getElementById('stat-found').textContent = '-';
- document.getElementById('stat-missing').textContent = '-';
- document.getElementById('stat-downloaded').textContent = '0';
-
- // Reset track table
- const tbody = document.getElementById('download-tracks-tbody');
- if (tbody) {
- const rows = tbody.querySelectorAll('tr');
- rows.forEach((row, index) => {
- const matchElement = row.querySelector('.track-match-status');
- const downloadElement = row.querySelector('.track-download-status');
- const actionsElement = row.querySelector('.track-actions');
-
- if (matchElement) {
- matchElement.textContent = '🔍 Pending';
- matchElement.className = 'track-match-status match-checking';
- }
- if (downloadElement) {
- downloadElement.textContent = '-';
- downloadElement.className = 'track-download-status';
- }
- if (actionsElement) {
- actionsElement.textContent = '-';
- }
- });
- }
-
- // Reset state
- activeAnalysisTaskId = null;
- analysisResults = [];
- missingTracks = [];
-}
-
-// ===============================
-// NEW ATOMIC CANCEL SYSTEM V2
-// ===============================
-
-async function cancelTrackDownloadV2(playlistId, trackIndex) {
- /**
- * NEW ATOMIC CANCEL SYSTEM V2
- *
- * - No optimistic UI updates
- * - Single API call handles everything atomically
- * - Backend is single source of truth for all state
- * - No race conditions or dual state management
- */
- const process = activeDownloadProcesses[playlistId];
- if (!process) {
- console.warn(`❌ [Cancel V2] No process found for playlist: ${playlistId}`);
- return;
- }
-
- const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${trackIndex}"]`);
- if (!row) {
- console.warn(`❌ [Cancel V2] No row found for track index: ${trackIndex}`);
- return;
- }
-
- // Check if already in cancelling state
- const statusEl = document.getElementById(`download-${playlistId}-${trackIndex}`);
- const currentStatus = statusEl ? statusEl.textContent : '';
-
- if (currentStatus.includes('Cancelling') || currentStatus.includes('Cancelled')) {
- console.log(`⚠️ [Cancel V2] Task already being cancelled or cancelled: ${currentStatus}`);
- return;
- }
-
- console.log(`🎯 [Cancel V2] Starting atomic cancel: playlist=${playlistId}, track=${trackIndex}`);
-
- // V2 SYSTEM: Set temporary UI state - will be confirmed by server
- row.dataset.uiState = 'cancelling';
-
- // Show loading state only - no optimistic "cancelled" state
- if (statusEl) {
- statusEl.textContent = '🔄 Cancelling...';
- }
-
- // Disable the cancel button to prevent double-clicks
- const actionsEl = document.getElementById(`actions-${playlistId}-${trackIndex}`);
- if (actionsEl) {
- actionsEl.innerHTML = 'Cancelling...';
- }
-
- try {
- const response = await fetch('/api/downloads/cancel_task_v2', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- playlist_id: playlistId,
- track_index: trackIndex
- })
- });
-
- const data = await response.json();
-
- if (data.success) {
- console.log(`✅ [Cancel V2] Successfully cancelled: ${data.task_info.track_name}`);
- showToast(`Cancelled "${data.task_info.track_name}" and added to wishlist.`, 'success');
-
- // Let the status polling system update the UI with server truth
- // No manual UI updates - backend is authoritative
-
- } else {
- console.error(`❌ [Cancel V2] Cancel failed: ${data.error}`);
- showToast(`Cancel failed: ${data.error}`, 'error');
-
- // Reset UI to previous state on failure
- row.dataset.uiState = 'normal'; // Reset UI state
- if (statusEl) {
- statusEl.textContent = '❌ Cancel Failed';
- }
- if (actionsEl) {
- actionsEl.innerHTML = ``;
- }
- }
-
- } catch (error) {
- console.error(`❌ [Cancel V2] Network/API error:`, error);
- showToast(`Cancel request failed: ${error.message}`, 'error');
-
- // Reset UI on network error
- row.dataset.uiState = 'normal'; // Reset UI state
- if (statusEl) {
- statusEl.textContent = '❌ Cancel Failed';
- }
- if (actionsEl) {
- actionsEl.innerHTML = ``;
- }
- }
-}
-
-// ===============================
-// LEGACY CANCEL SYSTEM (OLD)
-// ===============================
-
-async function cancelTrackDownload(playlistId, trackIndex) {
- const process = activeDownloadProcesses[playlistId];
- if (!process) return;
-
- const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${trackIndex}"]`);
- if (!row) return;
-
- // Prevent double cancellation
- if (row.dataset.locallyCancelled === 'true') {
- return; // Already cancelled locally
- }
-
- const taskId = row.dataset.taskId;
- if (!taskId) {
- showToast('Task not started yet, cannot cancel.', 'warning');
- return;
- }
-
- // UI update for immediate feedback - mark as cancelled FIRST to prevent race conditions
- row.dataset.locallyCancelled = 'true';
- document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '🚫 Cancelling...';
- document.getElementById(`actions-${playlistId}-${trackIndex}`).innerHTML = '-';
-
- try {
- const response = await fetch('/api/downloads/cancel_task', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ task_id: taskId })
- });
- const data = await response.json();
- if (data.success) {
- // Update final UI state after successful cancellation
- document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '🚫 Cancelled';
- showToast('Download cancelled and added to wishlist.', 'info');
- } else {
- throw new Error(data.error);
- }
- } catch (error) {
- // Reset UI state if cancellation failed
- row.dataset.locallyCancelled = 'false';
- document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '❌ Cancel Failed';
- showToast(`Could not cancel task: ${error.message}`, 'error');
- }
-}
-
-// Find and REPLACE the old startPlaylistSyncFromModal function
-async function startPlaylistSync(playlistId) {
- const startTime = Date.now();
- console.log(`🚀 [${new Date().toTimeString().split(' ')[0]}] Starting sync for playlist: ${playlistId}`);
- const playlist = spotifyPlaylists.find(p => p.id === playlistId);
- if (!playlist) {
- console.error(`❌ Could not find playlist data for ID: ${playlistId}`);
- showToast('Could not find playlist data.', 'error');
- return;
- }
- console.log(`✅ Found playlist: ${playlist.name} with ${playlist.track_count || 'unknown'} tracks`);
-
- // Check if already syncing to prevent duplicate syncs
- if (activeSyncPollers[playlistId]) {
- showToast('Sync already in progress for this playlist', 'warning');
- return;
- }
-
- // Update button state immediately for user feedback
- const syncBtn = document.getElementById(`sync-btn-${playlistId}`);
- if (syncBtn) {
- syncBtn.disabled = true;
- syncBtn.textContent = '⏳ Syncing...';
- }
-
- // Ensure we have the full track list before starting
- let tracks = playlistTrackCache[playlistId];
- if (!tracks) {
- const trackFetchStart = Date.now();
- console.log(`🔄 [${new Date().toTimeString().split(' ')[0]}] Cache miss - fetching tracks for playlist ${playlistId}`);
- try {
- // Use the right endpoint based on playlist source
- const fetchUrl = playlistId.startsWith('deezer_arl_')
- ? `/api/deezer/arl-playlist/${playlistId.replace('deezer_arl_', '')}`
- : `/api/spotify/playlist/${playlistId}`;
- const response = await fetch(fetchUrl);
- const fullPlaylist = await response.json();
- if (fullPlaylist.error) throw new Error(fullPlaylist.error);
- tracks = fullPlaylist.tracks;
- playlistTrackCache[playlistId] = tracks; // Cache it
- const trackFetchTime = Date.now() - trackFetchStart;
- console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Fetched and cached ${tracks.length} tracks (took ${trackFetchTime}ms)`);
- } catch (error) {
- console.error(`❌ Failed to fetch tracks:`, error);
- showToast(`Failed to fetch tracks for sync: ${error.message}`, 'error');
- return;
- }
- } else {
- console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Using cached tracks: ${tracks.length} tracks`);
- }
-
- // DON'T close the modal - let it show live progress like the GUI
-
- try {
- const syncStartTime = Date.now();
- console.log(`🔄 [${new Date().toTimeString().split(' ')[0]}] Making API call to /api/sync/start with ${tracks.length} tracks`);
- const response = await fetch('/api/sync/start', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- playlist_id: playlist.id,
- playlist_name: playlist.name,
- tracks: tracks, // Send the full track list
- image_url: playlist.image_url || ''
- })
- });
-
- const syncRequestTime = Date.now() - syncStartTime;
- console.log(`📡 [${new Date().toTimeString().split(' ')[0]}] API response status: ${response.status} (took ${syncRequestTime}ms)`);
- const data = await response.json();
- console.log(`📡 [${new Date().toTimeString().split(' ')[0]}] API response data:`, data);
-
- if (!data.success) throw new Error(data.error);
-
- const totalTime = Date.now() - startTime;
- console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Sync started successfully for "${playlist.name}" (total time: ${totalTime}ms)`);
- showToast(`Sync started for "${playlist.name}"`, 'success');
-
- // Show initial sync state in modal if open
- const modal = document.getElementById('playlist-details-modal') || document.getElementById('deezer-arl-playlist-details-modal');
- if (modal && modal.style.display !== 'none') {
- const statusDisplay = document.getElementById(`modal-sync-status-${playlist.id}`);
- if (statusDisplay) {
- statusDisplay.style.display = 'flex';
- console.log(`📊 [${new Date().toTimeString().split(' ')[0]}] Showing modal sync status for ${playlist.id}`);
- }
- }
-
- updateCardToSyncing(playlist.id, 0); // Initial state
- startSyncPolling(playlist.id);
-
- } catch (error) {
- console.error(`❌ Failed to start sync:`, error);
- showToast(`Failed to start sync: ${error.message}`, 'error');
- updateCardToDefault(playlist.id);
- }
-}
-
-// Add these new helper functions to script.js
-
-function startSyncPolling(playlistId) {
- // Clear any existing poller for this playlist
- if (activeSyncPollers[playlistId]) {
- clearInterval(activeSyncPollers[playlistId]);
- }
-
- // Phase 5: Subscribe via WebSocket
- if (socketConnected) {
- socket.emit('sync:subscribe', { playlist_ids: [playlistId] });
- _syncProgressCallbacks[playlistId] = (data) => {
- if (data.status === 'syncing') {
- const progress = data.progress;
- updateCardToSyncing(playlistId, progress.progress, progress);
- updateModalSyncProgress(playlistId, progress);
- } else if (data.status === 'finished' || data.status === 'error' || data.status === 'cancelled') {
- stopSyncPolling(playlistId);
- updateCardToDefault(playlistId, data);
- closePlaylistDetailsModal();
- }
- };
- }
-
- // Start a new poller that checks every 2 seconds
- console.log(`🔄 Starting sync polling for playlist: ${playlistId}`);
- activeSyncPollers[playlistId] = setInterval(async () => {
- // Always poll — no dedicated WebSocket events for discovery progress
- try {
- console.log(`📊 Polling sync status for: ${playlistId}`);
- const response = await fetch(`/api/sync/status/${playlistId}`);
- const state = await response.json();
- console.log(`📊 Poll response:`, state);
-
- if (state.status === 'syncing') {
- const progress = state.progress;
- console.log(`📊 Sync progress:`, progress);
- console.log(` 📊 Progress values: ${progress.progress}% | Total: ${progress.total_tracks} | Matched: ${progress.matched_tracks} | Failed: ${progress.failed_tracks}`);
- console.log(` 📊 Current step: "${progress.current_step}" | Current track: "${progress.current_track}"`);
-
- // Use the actual progress percentage from the sync service
- updateCardToSyncing(playlistId, progress.progress, progress);
- // Also update the modal if it's open
- updateModalSyncProgress(playlistId, progress);
- } else if (state.status === 'finished' || state.status === 'error' || state.status === 'cancelled') {
- console.log(`🏁 Sync completed with status: ${state.status}`);
- stopSyncPolling(playlistId);
- updateCardToDefault(playlistId, state);
- // Also update the modal if it's open
- closePlaylistDetailsModal(); closeDeezerArlPlaylistDetailsModal(); // Close modal on completion/error
- }
- } catch (error) {
- console.error(`❌ Error polling sync status for ${playlistId}:`, error);
- stopSyncPolling(playlistId);
- updateCardToDefault(playlistId, { status: 'error', error: 'Polling failed' });
- }
- }, 2000); // Poll every 2 seconds
- updateRefreshButtonState();
-}
-
-function stopSyncPolling(playlistId) {
- if (activeSyncPollers[playlistId]) {
- clearInterval(activeSyncPollers[playlistId]);
- delete activeSyncPollers[playlistId];
- }
- // Phase 5: Unsubscribe and clean up callback
- if (_syncProgressCallbacks[playlistId]) {
- if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
- delete _syncProgressCallbacks[playlistId];
- }
- updateRefreshButtonState();
-}
-
-// Sync sidebar visibility helpers
-function showSyncSidebar() {
- const sidebar = document.querySelector('.sync-sidebar');
- const contentArea = document.querySelector('.sync-content-area');
- if (sidebar && contentArea && window.innerWidth > 1300) {
- sidebar.style.display = '';
- contentArea.style.gridTemplateColumns = '2.5fr 0.75fr';
- }
-}
-
-function hideSyncSidebar() {
- const sidebar = document.querySelector('.sync-sidebar');
- const contentArea = document.querySelector('.sync-content-area');
- if (sidebar && contentArea) {
- sidebar.style.display = 'none';
- contentArea.style.gridTemplateColumns = '1fr';
- }
-}
-
-// Sequential Sync Functions
-function startSequentialSync() {
- // Initialize manager if needed
- if (!sequentialSyncManager) {
- sequentialSyncManager = new SequentialSyncManager();
- }
-
- // Check if already running - if so, cancel
- if (sequentialSyncManager.isRunning) {
- sequentialSyncManager.cancel();
- return;
- }
-
- // Validate selection
- if (selectedPlaylists.size === 0) {
- showToast('No playlists selected for sync', 'error');
- return;
- }
-
- // Get playlist order from DOM to maintain display order
- const playlistCards = document.querySelectorAll('.playlist-card');
- const orderedPlaylistIds = [];
-
- playlistCards.forEach(card => {
- const playlistId = card.dataset.playlistId;
- if (selectedPlaylists.has(playlistId)) {
- orderedPlaylistIds.push(playlistId);
- }
- });
-
- console.log(`🚀 Starting sequential sync for ${orderedPlaylistIds.length} playlists`);
-
- // Show sidebar for sync progress
- showSyncSidebar();
-
- // Start sequential sync
- sequentialSyncManager.start(orderedPlaylistIds);
-
- // Disable playlist selection during sync
- disablePlaylistSelection(true);
-}
-
-function disablePlaylistSelection(disabled) {
- const checkboxes = document.querySelectorAll('.playlist-checkbox');
- checkboxes.forEach(checkbox => {
- checkbox.disabled = disabled;
- });
-}
-
-function hasActiveOperations() {
- const hasActiveSyncs = Object.keys(activeSyncPollers).length > 0;
- // Only check non-wishlist download processes for sync page refresh button
- const hasActiveDownloads = Object.entries(activeDownloadProcesses)
- .filter(([playlistId, process]) => playlistId !== 'wishlist') // Exclude wishlist
- .some(([_, process]) => process.status === 'running');
- const hasSequentialSync = sequentialSyncManager && sequentialSyncManager.isRunning;
- return hasActiveSyncs || hasActiveDownloads || hasSequentialSync;
-}
-
-
-function updateRefreshButtonState() {
- const refreshBtn = document.getElementById('spotify-refresh-btn');
- if (!refreshBtn) return;
-
- if (hasActiveOperations()) {
- refreshBtn.disabled = true;
- // Provide context-specific text
- const hasActiveSyncs = Object.keys(activeSyncPollers).length > 0;
- const hasSequentialSync = sequentialSyncManager && sequentialSyncManager.isRunning;
- if (hasActiveSyncs || hasSequentialSync) {
- refreshBtn.textContent = '🔄 Syncing...';
- } else {
- refreshBtn.textContent = '📥 Downloading...';
- }
- } else {
- refreshBtn.disabled = false;
- refreshBtn.textContent = '🔄 Refresh';
- }
-}
-
-function updateCardToSyncing(playlistId, percent, progress = null) {
- const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
- if (!card) return;
-
- const progressBar = card.querySelector('.sync-progress-indicator');
- progressBar.style.display = 'block';
-
- let progressText = 'Starting...';
- let actualPercent = percent || 0;
-
- if (progress) {
- // Create detailed progress text like the GUI
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
- const total = progress.total_tracks || 0;
- const currentStep = progress.current_step || 'Processing';
-
- // Calculate actual progress as processed/total, not just successful/total
- if (total > 0) {
- const processed = matched + failed;
- actualPercent = Math.round((processed / total) * 100);
- progressText = `${currentStep}: ${processed}/${total} (${matched} matched, ${failed} failed)`;
- } else {
- progressText = currentStep;
- }
-
- // If there's a current track being processed, show it
- if (progress.current_track) {
- progressText += ` - ${progress.current_track}`;
- }
- }
-
- // Build live status counter HTML (same as modal)
- let statusCounterHTML = '';
- if (progress && progress.total_tracks > 0) {
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
- const total = progress.total_tracks || 0;
- const processed = matched + failed;
- const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
- statusCounterHTML = `
-
-
-
-
-
- Search Results
-${escapeHtml(trackName)} — ${escapeHtml(trackArtist)}
-
- ${errorMsg ? `
- ${escapeHtml(errorMsg)}
` : ''}
- ${candidates.length} candidate${candidates.length !== 1 ? 's' : ''} found${candidates.length > 0 ? ' but none passed filters' : ''}
-
-
-
-
- | # | File | Quality | Size | Duration | User | - |
|---|
- ♪ ${total}
- /
- ✓ ${matched}
- /
- ✗ ${failed}
- (${percentage}%)
-
- `;
- }
-
- progressBar.innerHTML = `
- ${statusCounterHTML}
-
- ${progressText}
- `;
-}
-
-function updateCardToDefault(playlistId, finalState = null) {
- const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
- if (!card) return;
-
- const progressBar = card.querySelector('.sync-progress-indicator');
- progressBar.style.display = 'none';
- progressBar.innerHTML = '';
-
- const statusEl = card.querySelector('.playlist-card-status');
- if (finalState) {
- if (finalState.status === 'finished') {
- statusEl.textContent = `Synced: Just now`;
- statusEl.className = 'playlist-card-status status-synced';
-
- // Check if any tracks were added to wishlist
- const wishlistCount = finalState.progress?.wishlist_added_count || finalState.result?.wishlist_added_count || 0;
- const unmatchedTracks = finalState.progress?.unmatched_tracks || finalState.result?.unmatched_tracks || [];
- const playlistName = card.querySelector('.playlist-card-name').textContent;
-
- if (wishlistCount > 0 && unmatchedTracks.length > 0) {
- const trackList = unmatchedTracks.map(t => `${t.artist} - ${t.name}`).join(', ');
- showToast(`Sync complete for "${playlistName}". ${wishlistCount} not found in library: ${trackList}`, 'warning');
- } else if (wishlistCount > 0) {
- showToast(`Sync complete for "${playlistName}". Added ${wishlistCount} missing track${wishlistCount > 1 ? 's' : ''} to wishlist.`, 'success');
- } else {
- showToast(`Sync complete for "${playlistName}"`, 'success');
- }
- } else {
- statusEl.textContent = `Sync Failed`;
- statusEl.className = 'playlist-card-status status-needs-sync'; // Or a new error class
- showToast(`Sync failed: ${finalState.error || 'Unknown error'}`, 'error');
- }
- }
-}
-
-// Update the modal's sync progress display (matches GUI functionality)
-function updateModalSyncProgress(playlistId, progress) {
- const modal = document.getElementById('playlist-details-modal') || document.getElementById('deezer-arl-playlist-details-modal');
- if (modal && modal.style.display !== 'none') {
- console.log(`📊 Updating modal sync progress for ${playlistId}:`, progress);
-
- // Show sync status display
- const statusDisplay = document.getElementById(`modal-sync-status-${playlistId}`);
- if (statusDisplay) {
- statusDisplay.style.display = 'flex';
-
- // Update counters (matching GUI exactly)
- const totalEl = document.getElementById(`modal-total-${playlistId}`);
- const matchedEl = document.getElementById(`modal-matched-${playlistId}`);
- const failedEl = document.getElementById(`modal-failed-${playlistId}`);
- const percentageEl = document.getElementById(`modal-percentage-${playlistId}`);
-
- const total = progress.total_tracks || 0;
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
-
- if (totalEl) totalEl.textContent = total;
- if (matchedEl) matchedEl.textContent = matched;
- if (failedEl) failedEl.textContent = failed;
-
- // Calculate percentage like GUI
- if (total > 0) {
- const processed = matched + failed;
- const percentage = Math.round((processed / total) * 100);
- if (percentageEl) percentageEl.textContent = percentage;
- }
-
- console.log(`📊 Modal updated: ♪ ${total} / ✓ ${matched} / ✗ ${failed} (${Math.round((matched + failed) / total * 100)}%)`);
- } else {
- console.warn(`❌ Modal sync status display not found for ${playlistId}`);
- }
- } else {
- console.log(`📊 Modal not open for ${playlistId}, skipping update`);
- }
-}
-
-
-// Download tracking state management - matching GUI functionality
-let activeDownloads = {};
-let finishedDownloads = {};
-let downloadStatusInterval = null;
-let isDownloadPollingActive = false;
-
-async function loadDownloadsData() {
- // Downloads page loads search results dynamically
- console.log('Downloads page loaded');
-
- // Event listeners are already set up in initializeSearch() - don't duplicate them
- const clearButton = document.querySelector('.controls-panel__clear-btn');
- const cancelAllButton = document.querySelector('.controls-panel__cancel-all-btn');
-
- if (clearButton) {
- clearButton.addEventListener('click', clearFinishedDownloads);
- }
- if (cancelAllButton) {
- cancelAllButton.addEventListener('click', cancelAllDownloads);
- }
-
- // Start sophisticated polling system (1-second interval like GUI)
- startDownloadPolling();
-
- // Initialize tab management
- initializeDownloadTabs();
-}
-
-function startDownloadPolling() {
- if (isDownloadPollingActive) return;
-
- console.log('Starting download status polling (1-second interval)');
- isDownloadPollingActive = true;
-
- // Initial call
- updateDownloadQueues();
-
- // Start 1-second polling (matching GUI's 1000ms timer)
- downloadStatusInterval = setInterval(updateDownloadQueues, 1000);
-}
-
-function stopDownloadPolling() {
- if (downloadStatusInterval) {
- clearInterval(downloadStatusInterval);
- downloadStatusInterval = null;
- }
- isDownloadPollingActive = false;
- console.log('Stopped download status polling');
-}
-
-async function updateDownloadQueues() {
- if (document.hidden) return; // Skip polling when tab is not visible
- try {
- const response = await fetch('/api/downloads/status');
- const data = await response.json();
-
- if (data.error) {
- console.error("Error fetching download status:", data.error);
- return;
- }
-
- const newActive = {};
- const newFinished = {};
-
- // Terminal states matching GUI logic
- const terminalStates = ['Completed', 'Succeeded', 'Cancelled', 'Canceled', 'Failed', 'Errored'];
-
- // Process transfers exactly like GUI
- data.transfers.forEach(item => {
- const isTerminal = terminalStates.some(state =>
- item.state && item.state.includes(state)
- );
-
- if (isTerminal) {
- newFinished[item.id] = item;
- } else {
- newActive[item.id] = item;
- }
- });
-
- // Update global state
- activeDownloads = newActive;
- finishedDownloads = newFinished;
-
- // Render both queues
- renderQueue('active-queue', activeDownloads, true);
- renderQueue('finished-queue', finishedDownloads, false);
-
- // Update tab counts
- updateTabCounts();
-
- // Update stats in the side panel
- updateDownloadStats();
-
- } catch (error) {
- // Only log errors occasionally to avoid console spam
- if (Math.random() < 0.1) {
- console.error("Failed to update download queues:", error);
- }
- }
-}
-
-function renderQueue(containerId, downloads, isActiveQueue) {
- const container = document.getElementById(containerId);
- if (!container) return;
-
- const downloadIds = Object.keys(downloads);
-
- if (downloadIds.length === 0) {
- container.innerHTML = ``;
- return;
- }
-
- let html = '';
- for (const id of downloadIds) {
- const item = downloads[id];
-
- // Extract display title from filename
- let title = 'Unknown File';
- if (item.filename) {
- // YouTube/Tidal filenames are encoded as "id||title"
- if ((item.username === 'youtube' || item.username === 'tidal' || item.username === 'qobuz' || item.username === 'hifi') && item.filename.includes('||')) {
- const parts = item.filename.split('||');
- title = parts[1] || parts[0]; // Use title part, fallback to id
- } else {
- // Regular Soulseek filename - extract last part of path
- title = item.filename.split(/[\\/]/).pop();
- }
- }
-
- const progress = item.percentComplete || 0;
- const bytesTransferred = item.bytesTransferred || 0;
- const totalBytes = item.size || 0;
- const speed = item.averageSpeed || 0;
-
- // Format file size
- const formatSize = (bytes) => {
- if (!bytes) return 'Unknown size';
- const units = ['B', 'KB', 'MB', 'GB'];
- let size = bytes;
- let unitIndex = 0;
- while (size >= 1024 && unitIndex < units.length - 1) {
- size /= 1024;
- unitIndex++;
- }
- return `${size.toFixed(1)} ${units[unitIndex]}`;
- };
-
- // Format speed
- const formatSpeed = (bytesPerSecond) => {
- if (!bytesPerSecond || bytesPerSecond <= 0) return '';
- return `${formatSize(bytesPerSecond)}/s`;
- };
-
- let actionButtonHTML = '';
- if (isActiveQueue) {
- // Active items get progress bar and cancel button
- actionButtonHTML = `
-
-
-
-
- `;
- } else {
- // Finished items get status and open button
- let statusClass = '';
- if (item.state.includes('Cancelled')) statusClass = 'status--cancelled';
- else if (item.state.includes('Failed') || item.state.includes('Errored')) statusClass = 'status--failed';
- else if (item.state.includes('Completed') || item.state.includes('Succeeded')) statusClass = 'status--completed';
-
- actionButtonHTML = `
-
- ${item.state} - ${progress.toFixed(1)}%
- ${speed > 0 ? `• ${formatSpeed(speed)}` : ''}
- ${totalBytes > 0 ? `• ${formatSize(bytesTransferred)} / ${formatSize(totalBytes)}` : ''}
-
-
- ${item.state}
-
-
- `;
- }
-
- // Enrich with metadata from backend context (artist, album, artwork)
- const meta = item._meta || {};
- const sourceLabels = { youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', lidarr: 'Lidarr' };
- const sourceBadge = sourceLabels[item.username] || item.username;
-
- html += `
-
-
- `;
- }
- container.innerHTML = html;
-}
-
-function updateTabCounts() {
- const activeCount = Object.keys(activeDownloads).length;
- const finishedCount = Object.keys(finishedDownloads).length;
-
- const activeTabBtn = document.querySelector('.tab-btn[data-tab="active-queue"]');
- const finishedTabBtn = document.querySelector('.tab-btn[data-tab="finished-queue"]');
-
- if (activeTabBtn) activeTabBtn.textContent = `Download Queue (${activeCount})`;
- if (finishedTabBtn) finishedTabBtn.textContent = `Finished (${finishedCount})`;
-}
-
-function updateDownloadStats() {
- const activeCount = Object.keys(activeDownloads).length;
- const finishedCount = Object.keys(finishedDownloads).length;
-
- const activeLabel = document.getElementById('active-downloads-label');
- const finishedLabel = document.getElementById('finished-downloads-label');
-
- if (activeLabel) activeLabel.textContent = `• Active Downloads: ${activeCount}`;
- if (finishedLabel) finishedLabel.textContent = `• Finished Downloads: ${finishedCount}`;
-}
-
-function initializeDownloadTabs() {
- const tabButtons = document.querySelectorAll('.tab-btn');
- tabButtons.forEach(btn => {
- btn.addEventListener('click', () => switchDownloadTab(btn));
- });
-}
-
-function switchDownloadTab(button) {
- const targetTabId = button.getAttribute('data-tab');
-
- // Update buttons
- document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
- button.classList.add('active');
-
- // Update content panes
- document.querySelectorAll('.download-queue').forEach(queue => queue.classList.remove('active'));
- const targetQueue = document.getElementById(targetTabId);
- if (targetQueue) targetQueue.classList.add('active');
-}
-
-async function cancelDownloadItem(downloadId, username) {
- try {
- const response = await fetch('/api/downloads/cancel', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ download_id: downloadId, username: username })
- });
- const result = await response.json();
-
- if (result.success) {
- showToast('Download cancelled', 'success');
- } else {
- showToast(`Failed to cancel: ${result.error}`, 'error');
- }
- } catch (error) {
- console.error('Error cancelling download:', error);
- showToast('Error sending cancel request', 'error');
- }
-}
-
-async function clearFinishedDownloads() {
- const finishedCount = Object.keys(finishedDownloads).length;
- if (finishedCount === 0) {
- showToast('No finished downloads to clear', 'error');
- return;
- }
-
- try {
- const response = await fetch('/api/downloads/clear-finished', {
- method: 'POST'
- });
- const result = await response.json();
-
- if (result.success) {
- showToast('Finished downloads cleared', 'success');
- } else {
- showToast(`Failed to clear: ${result.error}`, 'error');
- }
- } catch (error) {
- console.error('Error clearing finished downloads:', error);
- showToast('Error sending clear request', 'error');
- }
-}
-
-async function cancelAllDownloads() {
- if (!await showConfirmDialog({ title: 'Cancel All Downloads', message: 'Cancel ALL active downloads and clear the transfer list? This cannot be undone.', confirmText: 'Cancel All', destructive: true })) {
- return;
- }
-
- try {
- const response = await fetch('/api/downloads/cancel-all', {
- method: 'POST'
- });
- const result = await response.json();
-
- if (result.success) {
- showToast('All downloads cancelled and cleared', 'success');
- } else {
- showToast(`Failed to cancel: ${result.error}`, 'error');
- }
- } catch (error) {
- console.error('Error cancelling all downloads:', error);
- showToast('Error cancelling downloads', 'error');
- }
-}
-
-// REPLACE the old performDownloadsSearch function with this new one.
-async function performDownloadsSearch() {
- const query = document.getElementById('downloads-search-input').value.trim();
- if (!query) {
- showToast('Please enter a search term', 'error');
- return;
- }
-
- // --- UI Element References ---
- const searchInput = document.getElementById('downloads-search-input');
- const searchButton = document.getElementById('downloads-search-btn');
- const cancelButton = document.getElementById('downloads-cancel-btn');
- const statusText = document.getElementById('search-status-text');
- const spinner = document.querySelector('.spinner-animation');
- const dots = document.querySelector('.dots-animation');
-
- // --- Start a new AbortController for this search ---
- searchAbortController = new AbortController();
-
- try {
- // --- 1. Update UI to "Searching" State ---
- searchInput.disabled = true;
- searchButton.disabled = true;
- cancelButton.classList.remove('hidden');
- spinner.classList.remove('hidden');
- dots.classList.remove('hidden');
- statusText.textContent = `Searching for '${query}'...`;
- displayDownloadsResults([]); // Clear previous results
-
- // --- 2. Perform the Fetch Request ---
- const response = await fetch('/api/search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ query }),
- signal: searchAbortController.signal // Link fetch to the AbortController
- });
-
- const data = await response.json();
-
- if (data.error) {
- throw new Error(data.error);
- }
-
- const results = data.results || [];
- allSearchResults = results;
- resetFilters();
- applyFiltersAndSort();
-
- // --- 3. Update UI with Success State ---
- if (results.length === 0) {
- statusText.textContent = `No results found for '${query}'`;
- showToast('No results found', 'error');
- } else {
- document.getElementById('filters-container').classList.remove('hidden');
-
- // Count albums and singles like the GUI app
- let totalAlbums = 0;
- let totalTracks = 0;
-
- results.forEach(result => {
- if (result.result_type === 'album') {
- totalAlbums++;
- } else {
- totalTracks++;
- }
- });
-
- statusText.textContent = `✨ Found ${results.length} results • ${totalAlbums} albums, ${totalTracks} singles`;
- showToast(`Found ${results.length} results`, 'success');
- }
-
- } catch (error) {
- // --- 4. Handle Errors, Including Cancellation ---
- if (error.name === 'AbortError') {
- // This specific error is thrown when the user clicks "Cancel"
- statusText.textContent = 'Search was cancelled.';
- showToast('Search cancelled', 'info');
- displayDownloadsResults([]); // Clear any partial results
- } else {
- console.error('Search failed:', error);
- statusText.textContent = `Search failed: ${error.message}`;
- showToast('Search failed', 'error');
- }
- } finally {
- // --- 5. Clean Up UI Regardless of Outcome ---
- searchInput.disabled = false;
- searchButton.disabled = false;
- cancelButton.classList.add('hidden');
- spinner.classList.add('hidden');
- dots.classList.add('hidden');
- searchAbortController = null; // Clear the controller
- }
-}
-
-function displayDownloadsResults(results) {
- const resultsArea = document.getElementById('search-results-area');
- if (!resultsArea) return;
-
- if (!results.length) {
- resultsArea.innerHTML = '
- ${meta.artwork_url
- ? ``
- : '
- ♫
'}
-
-
- ${title}
- ${meta.artist || meta.album ? `
-
- ` : ''}
-
- ${sourceBadge}
- ${meta.quality ? `${escapeHtml(meta.quality)}` : ''}
-
-
- ${actionButtonHTML}
-
- No search results found.
Disc 1
`;
- }
- let discNum = 1;
- result.tracks.forEach((track, trackIndex) => {
- if (discBreaks.has(trackIndex)) {
- discNum++;
- trackListHtml += `Disc ${discNum}
`;
- }
- const trackSize = track.size ? `${(track.size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
- const trackBitrate = track.bitrate ? `${track.bitrate}kbps` : '';
- trackListHtml += `
-
-
- `;
- });
- }
-
- html += `
-
-
- ${escapeHtml(track.title || `Track ${trackIndex + 1}`)}
-
- ${track.track_number ? `${track.track_number}. ` : ''}${escapeHtml(track.artist || result.artist || 'Unknown Artist')} • ${trackSize} • ${escapeHtml(track.quality || 'Unknown')} ${trackBitrate}
-
-
-
-
-
-
-
-
- `;
- } else {
- const sizeText = result.size ? `${(result.size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
- const bitrateText = result.bitrate ? `${result.bitrate}kbps` : '';
- html += `
-
-
-
-
-
-
-
- ${escapeHtml(result.album_title || result.title || 'Unknown Album')}
- by ${escapeHtml(result.artist || 'Unknown Artist')}
-
- ${trackCount} tracks • ${totalSize} • ${escapeHtml(result.quality || 'Mixed')}
-
- Shared by ${escapeHtml(result.username || 'Unknown')}
-
-
-
-
-
-
-
- `;
- }
- });
-
- resultsArea.innerHTML = html;
- // Store results globally for download functions
- window.currentSearchResults = results;
-}
-
-async function downloadTrack(index) {
- const results = window.currentSearchResults;
- if (!results || !results[index]) return;
-
- const track = results[index];
-
- try {
- const response = await fetch('/api/download', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(track)
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast(`Download started: ${track.title}`, 'success');
- } else {
- showToast(`Download failed: ${data.error}`, 'error');
- }
- } catch (error) {
- console.error('Download error:', error);
- showToast('Failed to start download', 'error');
- }
-}
-
-async function downloadAlbum(index) {
- const results = window.currentSearchResults;
- if (!results || !results[index]) return;
-
- const album = results[index];
-
- try {
- const response = await fetch('/api/download', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(album)
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast(data.message, 'success');
- } else {
- showToast(`Album download failed: ${data.error}`, 'error');
- }
- } catch (error) {
- console.error('Album download error:', error);
- showToast('Failed to start album download', 'error');
- }
-}
-
-// Matched download functions
-function matchedDownloadTrack(index) {
- const results = window.currentSearchResults;
- if (!results || !results[index]) return;
-
- const track = results[index];
- console.log('🎯 Starting matched download for single track:', track);
-
- // Open matching modal for single track
- openMatchingModal(track, false, null);
-}
-
-function matchedDownloadAlbum(index) {
- const results = window.currentSearchResults;
- if (!results || !results[index]) return;
-
- const album = results[index];
- console.log('🎯 Starting matched download for album:', album);
-
- // Open matching modal for album download
- openMatchingModal(album, true, album);
-}
-
-function matchedDownloadAlbumTrack(albumIndex, trackIndex) {
- const results = window.currentSearchResults;
- if (!results || !results[albumIndex]) return;
-
- const album = results[albumIndex];
- if (!album.tracks || !album.tracks[trackIndex]) return;
-
- const track = album.tracks[trackIndex];
-
- // Ensure track has necessary properties from parent album
- track.username = album.username;
- track.artist = track.artist || album.artist;
- track.album = album.album_title || album.title;
-
- console.log('🎯 Starting matched download for album track:', track);
-
- // Open matching modal for single track (from album context)
- openMatchingModal(track, false, null);
-}
-
-function toggleAlbumExpansion(albumIndex) {
- const albumCard = document.querySelector(`[data-album-index="${albumIndex}"]`);
- if (!albumCard) return;
-
- const trackList = albumCard.querySelector('.album-track-list');
- const indicator = albumCard.querySelector('.album-expand-indicator');
-
- if (trackList.style.display === 'none' || !trackList.style.display) {
- // Expand
- trackList.style.display = 'block';
- indicator.textContent = '▼';
- albumCard.classList.add('expanded');
- } else {
- // Collapse
- trackList.style.display = 'none';
- indicator.textContent = '▶';
- albumCard.classList.remove('expanded');
- }
-}
-
-async function downloadAlbumTrack(albumIndex, trackIndex) {
- const results = window.currentSearchResults;
- if (!results || !results[albumIndex] || !results[albumIndex].tracks || !results[albumIndex].tracks[trackIndex]) return;
-
- const track = results[albumIndex].tracks[trackIndex];
-
- try {
- const response = await fetch('/api/download', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- ...track,
- result_type: 'track'
- })
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast(`Download started: ${track.title}`, 'success');
- } else {
- showToast(`Track download failed: ${data.error}`, 'error');
- }
- } catch (error) {
- console.error('Track download error:', error);
- showToast('Failed to start track download', 'error');
- }
-}
-
-// ===============================
-// STREAMING WRAPPER FUNCTIONS
-// ===============================
-
-async function streamTrack(index) {
- // Stream a single track from search results
- try {
- console.log(`🎵 streamTrack called with index: ${index}`);
- console.log(`🎵 window.currentSearchResults:`, window.currentSearchResults);
-
- if (!window.currentSearchResults || !window.currentSearchResults[index]) {
- console.error(`❌ No search results or invalid index. Results length: ${window.currentSearchResults ? window.currentSearchResults.length : 'undefined'}`);
- showToast('Track not found', 'error');
- return;
- }
-
- const result = window.currentSearchResults[index];
- console.log(`🎵 Streaming track:`, result);
-
- // Check for unsupported formats before streaming (streaming sources use encoded filenames, skip check)
- const isStreamingSource = result.username === 'youtube' || result.username === 'tidal' || result.username === 'qobuz' || result.username === 'hifi';
- if (!isStreamingSource && result.filename) {
- const format = getFileExtension(result.filename);
- console.log(`🎵 [STREAM CHECK] File: ${result.filename}, Extension: ${format}`);
-
- const isSupported = isAudioFormatSupported(result.filename);
- console.log(`🎵 [STREAM CHECK] Format ${format} supported: ${isSupported}`);
-
- if (!isSupported) {
- showToast(`Sorry, ${format.toUpperCase()} format is not supported in your browser. Try downloading instead.`, 'error');
- return;
- }
- }
-
- await startStream(result);
-
- } catch (error) {
- console.error('Track streaming error:', error);
- showToast('Failed to start track stream', 'error');
- }
-}
-
-
-async function streamAlbumTrack(albumIndex, trackIndex) {
- // Stream a specific track from an album
- try {
- console.log(`🎵 streamAlbumTrack called with albumIndex: ${albumIndex}, trackIndex: ${trackIndex}`);
- console.log(`🎵 window.currentSearchResults:`, window.currentSearchResults);
-
- if (!window.currentSearchResults || !window.currentSearchResults[albumIndex]) {
- console.error(`❌ No search results or invalid album index. Results length: ${window.currentSearchResults ? window.currentSearchResults.length : 'undefined'}`);
- showToast('Album not found', 'error');
- return;
- }
-
- const album = window.currentSearchResults[albumIndex];
- console.log(`🎵 Album data:`, album);
-
- // Surgical Fix: Handle YouTube/Tidal results which are "flat" (no tracks array)
- if (album.username === 'youtube' || album.username === 'tidal' || album.username === 'qobuz' || album.username === 'hifi') {
- // For YouTube/Tidal results, the "album" is actually the track itself
- const track = album;
- const trackData = {
- ...track,
- username: track.username,
- filename: track.filename,
- artist: track.artist,
- album: track.title, // Use title as album name for player
- title: track.title
- };
- console.log(`🎵 Streaming YouTube track directly:`, trackData);
- await startStream(trackData);
- return;
- }
-
- if (!album.tracks || !album.tracks[trackIndex]) {
- console.error(`❌ No tracks in album or invalid track index. Tracks length: ${album.tracks ? album.tracks.length : 'undefined'}`);
- showToast('Track not found in album', 'error');
- return;
- }
-
- const track = album.tracks[trackIndex];
- console.log(`🎵 Streaming album track:`, track);
-
- // Ensure album tracks have required fields
- const trackData = {
- ...track,
- username: track.username || album.username,
- filename: track.filename || track.path,
- artist: track.artist || album.artist,
- album: track.album || album.title || album.album
- };
-
- console.log(`🎵 Enhanced track data:`, trackData);
-
- // Check for unsupported formats before streaming (streaming sources use encoded filenames, skip check)
- const isStreamingSource2 = trackData.username === 'youtube' || trackData.username === 'tidal' || trackData.username === 'qobuz' || trackData.username === 'hifi';
- if (!isStreamingSource2 && trackData.filename && !isAudioFormatSupported(trackData.filename)) {
- const format = getFileExtension(trackData.filename);
- showToast(`Sorry, ${format.toUpperCase()} format is not supported in web browsers. Try downloading instead.`, 'error');
- return;
- }
-
- await startStream(trackData);
-
- } catch (error) {
- console.error('Album track streaming error:', error);
- showToast('Failed to start track stream', 'error');
- }
-}
-
-async function loadArtistsData() {
- try {
- const response = await fetch(API.artists);
- const data = await response.json();
-
- const artistsGrid = document.getElementById('artists-grid');
- if (data.artists && data.artists.length) {
- artistsGrid.innerHTML = data.artists.map(artist => `
-
-
- ${escapeHtml(result.title || 'Unknown Title')}
- by ${escapeHtml(result.artist || 'Unknown Artist')}
-
- ${sizeText} • ${escapeHtml(result.quality || 'Unknown')} ${bitrateText}
-
- Shared by ${escapeHtml(result.username || 'Unknown')}
-
-
-
-
-
-
-
- `).join('');
- } else {
- artistsGrid.innerHTML = '
- ${artist.image ?
- `` :
- '
- 🎵
'
- }
-
-
- ${escapeHtml(artist.name)}
- ${artist.album_count || 0} albums
- No artists found
';
- }
- } catch (error) {
- console.error('Error loading artists data:', error);
- document.getElementById('artists-grid').innerHTML = 'Error loading artists
';
- }
-}
-
-// ===============================
-// UTILITY FUNCTIONS
-// ===============================
-
-function showLoadingOverlay(message = 'Loading...') {
- const overlay = document.getElementById('loading-overlay');
- const messageElement = overlay.querySelector('.loading-message');
- messageElement.textContent = message;
- overlay.classList.remove('hidden');
-}
-
-function hideLoadingOverlay() {
- document.getElementById('loading-overlay').classList.add('hidden');
-}
-
-// ==================================================================================
-// NOTIFICATION SYSTEM — Compact toasts + bell button + notification history panel
-// ==================================================================================
-
-const _notifState = {
- history: [],
- unreadCount: 0,
- panelOpen: false,
- currentToast: null,
- toastTimer: null,
- maxHistory: 50,
-};
-const _recentToastKeys = new Map();
-
-const _notifIcons = { success: '✓', error: '✕', warning: '⚠', info: 'ℹ' };
-
-function showToast(message, type = 'success', helpSection = null) {
- const toastKey = `${type}:${message}`;
- const now = Date.now();
-
- // Deduplication — suppress identical toasts within 5 seconds
- if (_recentToastKeys.has(toastKey) && now - _recentToastKeys.get(toastKey) < 5000) return;
- _recentToastKeys.set(toastKey, now);
- for (const [k, t] of _recentToastKeys) { if (now - t > 10000) _recentToastKeys.delete(k); }
-
- // Add to notification history
- const entry = { id: now + Math.random(), message, type, helpSection, timestamp: now, read: false };
- _notifState.history.unshift(entry);
- if (_notifState.history.length > _notifState.maxHistory) _notifState.history.pop();
- _notifState.unreadCount++;
- _updateNotifBadge();
-
- // Show compact toast — dismiss current if showing
- const container = document.getElementById('toast-container');
- if (!container) return;
-
- if (_notifState.currentToast && container.contains(_notifState.currentToast)) {
- _notifState.currentToast.classList.add('toast-exit');
- const old = _notifState.currentToast;
- setTimeout(() => { if (container.contains(old)) container.removeChild(old); }, 200);
- }
- if (_notifState.toastTimer) clearTimeout(_notifState.toastTimer);
-
- const icon = _notifIcons[type] || 'ℹ';
- const toast = document.createElement('div');
- toast.className = `toast-compact toast-${type}`;
- toast.innerHTML = `${_escToast(message)}`;
- if (helpSection) {
- const link = document.createElement('span');
- link.className = 'toast-compact-link';
- link.textContent = 'Learn more →';
- link.onclick = e => { e.stopPropagation(); if (typeof navigateToDocsSection === 'function') navigateToDocsSection(helpSection); };
- toast.appendChild(link);
- }
- toast.onclick = () => { toast.classList.add('toast-exit'); setTimeout(() => { if (container.contains(toast)) container.removeChild(toast); }, 200); };
-
- container.appendChild(toast);
- requestAnimationFrame(() => toast.classList.add('toast-enter'));
- _notifState.currentToast = toast;
-
- _notifState.toastTimer = setTimeout(() => {
- if (container.contains(toast)) {
- toast.classList.add('toast-exit');
- setTimeout(() => { if (container.contains(toast)) container.removeChild(toast); }, 300);
- }
- _notifState.currentToast = null;
- }, helpSection ? 5000 : 3500);
-}
-
-function _escToast(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
-function _escAttr(s) { return _escToast(s).replace(/'/g, "\\'").replace(/\n/g, ' ').replace(/\r/g, ''); }
-
-function _updateNotifBadge() {
- const badge = document.getElementById('notif-bell-badge');
- if (badge) {
- badge.textContent = _notifState.unreadCount > 99 ? '99+' : _notifState.unreadCount;
- badge.style.display = _notifState.unreadCount > 0 ? '' : 'none';
- }
-}
-
-function toggleNotifPanel() {
- if (_notifState.panelOpen) {
- _closeNotifPanel();
- } else {
- _openNotifPanel();
- }
-}
-
-function _openNotifPanel() {
- _closeNotifPanel(); // Remove existing
-
- _notifState.panelOpen = true;
- _notifState.unreadCount = 0;
- _notifState.history.forEach(e => e.read = true);
- _updateNotifBadge();
-
- const btn = document.getElementById('notif-bell-btn');
- const panel = document.createElement('div');
- panel.id = 'notif-panel';
- panel.className = 'notif-panel';
-
- const entries = _notifState.history;
-
- panel.innerHTML = `
-
- Notifications
- ${entries.length > 0 ? '' : ''}
-
-
- ${entries.length === 0 ? '
- `;
-
- document.body.appendChild(panel);
-
- // Position above the bell button
- if (btn) {
- const rect = btn.getBoundingClientRect();
- panel.style.right = (window.innerWidth - rect.right) + 'px';
- panel.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
- }
-
- requestAnimationFrame(() => panel.classList.add('visible'));
-
- // Close on outside click
- setTimeout(() => {
- const closeHandler = e => {
- if (!panel.contains(e.target) && e.target.id !== 'notif-bell-btn') {
- _closeNotifPanel();
- document.removeEventListener('click', closeHandler);
- }
- };
- document.addEventListener('click', closeHandler);
- }, 100);
-}
-
-function _closeNotifPanel() {
- _notifState.panelOpen = false;
- const panel = document.getElementById('notif-panel');
- if (panel) {
- panel.classList.remove('visible');
- setTimeout(() => panel.remove(), 200);
- }
-}
-
-function _clearNotifHistory() {
- _notifState.history = [];
- _notifState.unreadCount = 0;
- _updateNotifBadge();
- _closeNotifPanel();
-}
-
-function _notifTimeAgo(ts) {
- const s = Math.floor((Date.now() - ts) / 1000);
- if (s < 5) return 'just now';
- if (s < 60) return `${s}s ago`;
- const m = Math.floor(s / 60);
- if (m < 60) return `${m}m ago`;
- const h = Math.floor(m / 60);
- if (h < 24) return `${h}h ago`;
- return `${Math.floor(h / 24)}d ago`;
-}
-
-// ==================================================================================
-// Music video download handler — defined at top level so both enhanced and global search can use it
-function _downloadMusicVideo(cardEl, video) {
- if (cardEl.classList.contains('downloading') || cardEl.classList.contains('completed')) return;
- cardEl.classList.add('downloading');
- cardEl.onclick = null;
-
- const playBtn = cardEl.querySelector('.enh-video-play');
- const progressRing = cardEl.querySelector('.enh-video-progress-ring');
- const progressBar = cardEl.querySelector('.enh-video-progress-bar');
- const doneIcon = cardEl.querySelector('.enh-video-done');
- const errorIcon = cardEl.querySelector('.enh-video-error');
-
- if (playBtn) playBtn.classList.add('hidden');
- if (progressRing) progressRing.classList.remove('hidden');
-
- fetch('/api/music-video/download', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ video_id: video.video_id, url: video.url, title: video.title, channel: video.channel }),
- }).then(res => {
- if (!res.ok) throw new Error('Download request failed');
- const circumference = 97.4;
- const pollInterval = setInterval(async () => {
- try {
- const statusRes = await fetch(`/api/music-video/status/${video.video_id}`);
- const status = await statusRes.json();
- if (progressBar && status.progress > 0) {
- progressBar.style.strokeDashoffset = circumference - (status.progress / 100) * circumference;
- }
- if (status.status === 'completed') {
- clearInterval(pollInterval);
- cardEl.classList.remove('downloading');
- cardEl.classList.add('completed');
- if (progressRing) progressRing.classList.add('hidden');
- if (doneIcon) doneIcon.classList.remove('hidden');
- } else if (status.status === 'error') {
- clearInterval(pollInterval);
- cardEl.classList.remove('downloading');
- cardEl.classList.add('errored');
- if (progressRing) progressRing.classList.add('hidden');
- if (errorIcon) errorIcon.classList.remove('hidden');
- cardEl.onclick = () => _downloadMusicVideo(cardEl, video);
- }
- } catch (e) { }
- }, 500);
- }).catch(e => {
- cardEl.classList.remove('downloading');
- if (progressRing) progressRing.classList.add('hidden');
- if (playBtn) playBtn.classList.remove('hidden');
- if (errorIcon) errorIcon.classList.remove('hidden');
- cardEl.onclick = () => _downloadMusicVideo(cardEl, video);
- });
-}
-
-// Global search video click — decodes base64 video data and delegates to _downloadMusicVideo
-function _gsClickVideo(cardEl) {
- try {
- const encoded = cardEl.dataset.video;
- const video = JSON.parse(decodeURIComponent(escape(atob(encoded))));
- _downloadMusicVideo(cardEl, video);
- } catch (e) {
- console.error('Failed to parse video data:', e);
- }
-}
-
-// GLOBAL SEARCH BAR — Spotlight-style search from anywhere
-// ==================================================================================
-
-const _gsState = {
- active: false,
- query: '',
- data: null,
- sources: {},
- activeSource: null,
- abortCtrl: null,
- altAbortCtrl: null,
- debounceTimer: null,
-};
-
-(function initGlobalSearch() {
- // Defer init until DOM is ready
- const _doInit = () => {
- const bar = document.getElementById('gsearch-bar');
- const input = document.getElementById('gsearch-input');
- const results = document.getElementById('gsearch-results');
- if (!input || !bar) return;
-
- bar.addEventListener('click', () => input.focus());
-
- input.addEventListener('focus', () => {
- bar.classList.add('active');
- _gsState.active = true;
- const shortcut = document.getElementById('gsearch-shortcut');
- if (shortcut) shortcut.style.display = 'none';
- if (_gsState.data && _gsState.query) _gsShowResults();
- });
-
- // No blur handler — closing is handled by click-outside and Escape only
- // This prevents tab switching and result clicks from closing the panel
-
- const clearBtn = document.getElementById('gsearch-clear');
-
- input.addEventListener('input', () => {
- const q = input.value.trim();
- _gsState.query = q;
- if (clearBtn) clearBtn.style.display = q.length > 0 ? '' : 'none';
- if (_gsState.debounceTimer) clearTimeout(_gsState.debounceTimer);
- if (q.length < 2) { _gsHideResults(); return; }
- _gsState.debounceTimer = setTimeout(() => _gsPerformSearch(q), 300);
- });
-
- if (clearBtn) {
- clearBtn.addEventListener('click', e => {
- e.stopPropagation();
- input.value = '';
- _gsState.query = '';
- _gsState.data = null;
- clearBtn.style.display = 'none';
- _gsHideResults();
- input.focus();
- });
- }
-
- input.addEventListener('keydown', e => {
- if (e.key === 'Enter') {
- e.preventDefault();
- if (_gsState.debounceTimer) clearTimeout(_gsState.debounceTimer);
- const q = input.value.trim();
- if (q.length >= 2) _gsPerformSearch(q);
- } else if (e.key === 'Escape') {
- _gsDeactivate();
- input.blur();
- }
- });
-
- // Keyboard shortcuts
- document.addEventListener('keydown', e => {
- if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); input.focus(); return; }
- if (e.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)) { e.preventDefault(); input.focus(); }
- });
-
- // Click outside to close — uses delayed check because tab clicks replace DOM
- document.addEventListener('click', e => {
- if (!_gsState.active) return;
- // Skip if click was recent interaction with search system (within 100ms of a switch)
- if (_gsState._lastInteraction && Date.now() - _gsState._lastInteraction < 200) return;
- setTimeout(() => {
- if (!_gsState.active) return;
- const freshBar = document.getElementById('gsearch-bar');
- const freshResults = document.getElementById('gsearch-results');
- const target = e.target;
- if (freshBar?.contains(target) || freshResults?.contains(target)) return;
- _gsDeactivate();
- }, 100);
- });
-
- // Collapse on sidebar navigation + hide on downloads page
- document.addEventListener('click', e => {
- if (e.target.closest('.sidebar-link, .nav-item, .back-btn')) {
- if (_gsState.active) _gsDeactivate();
- // Check after navigation which page we're on
- setTimeout(_gsUpdateVisibility, 200);
- }
- });
- };
- if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => { _doInit(); _gsUpdateVisibility(); });
- else { _doInit(); setTimeout(_gsUpdateVisibility, 500); }
-})();
-
-function _gsUpdateVisibility() {
- const bar = document.getElementById('gsearch-bar');
- if (!bar) return;
- // Hide on downloads page where enhanced search already exists
- const onDownloads = typeof currentPage !== 'undefined' && currentPage === 'downloads';
- bar.style.display = onDownloads ? 'none' : '';
- if (onDownloads && _gsState.active) _gsDeactivate();
-}
-
-function _gsDeactivate() {
- const bar = document.getElementById('gsearch-bar');
- const shortcut = document.getElementById('gsearch-shortcut');
- if (bar) bar.classList.remove('active');
- if (shortcut) shortcut.style.display = '';
- _gsState.active = false;
- _gsHideResults();
-}
-
-function _gsHideResults() {
- const r = document.getElementById('gsearch-results');
- if (r) r.classList.remove('visible');
-}
-
-function _gsShowResults() {
- const r = document.getElementById('gsearch-results');
- if (r && r.innerHTML.trim()) r.classList.add('visible');
-}
-
-async function _gsPerformSearch(query) {
- if (_gsState.abortCtrl) _gsState.abortCtrl.abort();
- if (_gsState.altAbortCtrl) _gsState.altAbortCtrl.abort();
- _gsState.abortCtrl = new AbortController();
- _gsState.altAbortCtrl = new AbortController();
-
- const results = document.getElementById('gsearch-results');
- if (!results) return;
-
- results.innerHTML = 'No notifications yet
' :
- entries.map(e => {
- const icon = _notifIcons[e.type] || 'ℹ';
- const ago = _notifTimeAgo(e.timestamp);
- const unreadDot = e.read ? '' : '';
- const learnMore = e.helpSection ? `Learn more →` : '';
- return `
-
- ${unreadDot}
-
-
`;
- }).join('')}
-
-
- ${_escToast(e.message)}
-
- Searching...
';
- results.classList.add('visible');
-
- try {
- const res = await fetch('/api/enhanced-search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ query }),
- signal: _gsState.abortCtrl.signal,
- });
- const data = await res.json();
- _gsState.data = data;
- _gsState.activeSource = data.primary_source || 'spotify';
- _gsState.sources = {};
- _gsState.sources[_gsState.activeSource] = {
- artists: data.spotify_artists || [],
- albums: data.spotify_albums || [],
- tracks: data.spotify_tracks || [],
- };
-
- _gsRender(data);
-
- // Async library ownership check — adds badges + swaps play buttons for library tracks
- setTimeout(() => _gsLibraryCheck(), 200);
-
- // Fetch alternate sources — stream NDJSON so slow sources render incrementally
- const alts = data.alternate_sources || [];
- for (const src of alts) {
- if (src === _gsState.activeSource) continue;
- _gsFetchSourceStream(src, query);
- }
- } catch (e) {
- if (e.name !== 'AbortError') results.innerHTML = 'Search failed
';
- }
-}
-
-async function _gsFetchSourceStream(src, query) {
- try {
- const res = await fetch(`/api/enhanced-search/source/${src}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ query }),
- signal: _gsState.altAbortCtrl.signal,
- });
- if (!res.ok) return;
-
- if (!_gsState.sources[src]) {
- const loadingSet = src === 'youtube_videos' ? new Set(['videos']) : new Set(['artists', 'albums', 'tracks']);
- _gsState.sources[src] = { artists: [], albums: [], tracks: [], videos: [], available: true, _loading: loadingSet };
- }
- const sourceData = _gsState.sources[src];
-
- const reader = res.body.getReader();
- const decoder = new TextDecoder();
- let buffer = '';
-
- while (true) {
- const { done, value } = await reader.read();
- if (done) break;
- buffer += decoder.decode(value, { stream: true });
-
- let idx;
- while ((idx = buffer.indexOf('\n')) !== -1) {
- const line = buffer.slice(0, idx).trim();
- buffer = buffer.slice(idx + 1);
- if (!line) continue;
- try {
- const chunk = JSON.parse(line);
- if (chunk.type === 'artists') { sourceData.artists = chunk.data; if (sourceData._loading) sourceData._loading.delete('artists'); }
- else if (chunk.type === 'albums') { sourceData.albums = chunk.data; if (sourceData._loading) sourceData._loading.delete('albums'); }
- else if (chunk.type === 'tracks') { sourceData.tracks = chunk.data; if (sourceData._loading) sourceData._loading.delete('tracks'); }
- else if (chunk.type === 'videos') { sourceData.videos = chunk.data; if (sourceData._loading) sourceData._loading.delete('videos'); }
- if (chunk.type === 'done') delete sourceData._loading;
- _gsRenderTabs();
- // Re-render content if this is the active source tab
- if (_gsState.activeSource === src && _gsState.data) {
- _gsRender(_gsState.data);
- }
- } catch (e) { }
- }
- }
- _gsRenderTabs();
- } catch (e) {
- if (e.name !== 'AbortError') console.debug(`GS alt source ${src} failed:`, e);
- }
-}
-
-function _gsRender(data) {
- const results = document.getElementById('gsearch-results');
- if (!results) return;
-
- // Music Videos tab — render video grid instead of regular results
- if (_gsState.activeSource === 'youtube_videos') {
- const src = _gsState.sources['youtube_videos'] || {};
- const videos = src.videos || [];
- const isLoading = src._loading && src._loading.size > 0;
- let h = '';
- h += `Results${videos.length} videos
`;
- h += '';
- h += '';
- if (isLoading) {
- h += '
';
- results.innerHTML = h;
- results.classList.add('visible');
- _gsRenderTabs();
- return;
- }
-
- const src = _gsState.sources[_gsState.activeSource] || {};
- const loading = src._loading || new Set();
- const dbArtists = data?.db_artists || [];
- const artists = src.artists || [];
- const allAlbums = src.albums || [];
- const albums = allAlbums.filter(a => !a.album_type || a.album_type === 'album' || a.album_type === 'compilation');
- const singles = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
- const tracks = src.tracks || [];
- const total = dbArtists.length + artists.length + albums.length + singles.length + tracks.length;
- const isLoading = loading.size > 0;
-
- if (total === 0 && !isLoading) {
- results.innerHTML = ` Searching YouTube...
';
- } else if (videos.length === 0) {
- h += `No music videos found for "${_escToast(_gsState.query)}"
`;
- } else {
- h += '🎬 Music Videos
';
- h += '';
- h += videos.map(v => {
- const dur = v.duration ? `${Math.floor(v.duration / 60)}:${String(v.duration % 60).padStart(2, '0')}` : '';
- const views = v.view_count >= 1000000 ? `${(v.view_count / 1000000).toFixed(1)}M` : v.view_count >= 1000 ? `${(v.view_count / 1000).toFixed(1)}K` : (v.view_count || '');
- const vJson = btoa(unescape(encodeURIComponent(JSON.stringify(v))));
- return `
';
- }
- h += '
-
-
-
`;
- }).join('');
- h += '▶
-
-
- ${dur ? `${dur}` : ''}${_escToast(v.title)}
${_escToast(v.channel)}${views ? ` · ${views} views` : ''}
No results for "${_escToast(_gsState.query)}"
Try different keywords or check spelling
`;
- results.classList.add('visible');
- return;
- }
-
- const sourceLabels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs', hydrabase: 'Hydrabase', youtube_videos: 'Music Videos', musicbrainz: 'MusicBrainz' };
- const srcLabel = sourceLabels[_gsState.activeSource] || _gsState.activeSource || '';
-
- let h = '';
- h += `Try different keywords or check spelling
Results${total} items
`;
- h += '';
- h += '';
-
- if (dbArtists.length) {
- h += '
';
- results.innerHTML = h;
- results.classList.add('visible');
- _gsRenderTabs();
-
- // Lazy load artist images for sources that don't provide them (iTunes/Deezer)
- _gsLazyLoadArtistImages();
-}
-
-async function _gsLazyLoadArtistImages() {
- const grid = document.getElementById('gsearch-artists-grid');
- if (!grid) return;
- const cards = grid.querySelectorAll('[data-needs-image="true"]');
- if (cards.length === 0) return;
- const activeSrc = _gsState.activeSource || 'spotify';
-
- for (const card of cards) {
- const artistId = card.dataset.artistId;
- if (!artistId) continue;
- try {
- const res = await fetch(`/api/artist/${artistId}/image?source=${activeSrc}`);
- const data = await res.json();
- if (data.success && data.image_url) {
- const artDiv = card.querySelector('.gsearch-item-art');
- if (artDiv) artDiv.innerHTML = `📚 In Your Library
';
- h += dbArtists.map(a => ``).join('');
- h += '
';
- }
-
- if (artists.length) {
- h += `${a.image_url ? `` : '🎤'}
${_escToast(a.name)}
Library
🎤 Artists ${srcLabel}
`;
- h += artists.map(a => ``).join('');
- h += '
';
- } else if (loading.has('artists')) {
- h += `${a.image_url ? `` : '🎤'}
${_escToast(a.name)}
🎤 Artists ${srcLabel}
Loading artists...
`;
- }
-
- const activeSrc = _gsState.activeSource || 'spotify';
-
- if (albums.length) {
- h += `💿 Albums ${srcLabel}
`;
- h += albums.map(a => {
- const ar = a.artist || (a.artists ? a.artists.join(', ') : '');
- const yr = a.release_date ? a.release_date.substring(0, 4) : '';
- const img = (a.image_url || '').replace(/'/g, "\\'");
- return ``;
- }).join('');
- h += '
';
- }
-
- if (!albums.length && !singles.length && loading.has('albums')) {
- h += `${a.image_url ? `` : '💿'}
${_escToast(a.name)}
${_escToast(ar)}${yr ? ` · ${yr}` : ''}
💿 Albums ${srcLabel}
Loading albums...
`;
- }
-
- if (singles.length) {
- h += `🎶 Singles & EPs ${srcLabel}
`;
- h += singles.map(a => {
- const ar = a.artist || (a.artists ? a.artists.join(', ') : '');
- const img = (a.image_url || '').replace(/'/g, "\\'");
- return ``;
- }).join('');
- h += '
';
- }
-
- if (tracks.length) {
- h += `${a.image_url ? `` : '🎶'}
${_escToast(a.name)}
${_escToast(ar)}
🎵 Tracks ${srcLabel}
`;
- h += tracks.map(t => {
- const ar = t.artist || (t.artists ? t.artists.join(', ') : '');
- const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
- return ``;
- }).join('');
- h += '
';
- } else if (loading.has('tracks')) {
- h += `${t.image_url ? `` : '🎵'}
${_escToast(t.name)}
${_escToast(ar)}${t.album ? ` · ${_escToast(t.album)}` : ''}
${dur}
🎵 Tracks ${srcLabel}
Loading tracks...
`;
- }
-
- h += 'Enter a track name or artist.
';
- return;
- }
- params.set('limit', '50');
-
- // Use the user's active metadata source first, then fall back to others
- const activeSource = (currentMusicSourceName || 'Spotify').toLowerCase();
- const allSources = [
- { key: 'spotify', endpoint: '/api/spotify/search_tracks', label: 'Spotify' },
- { key: 'deezer', endpoint: '/api/deezer/search_tracks', label: 'Deezer' },
- { key: 'itunes', endpoint: '/api/itunes/search_tracks', label: 'iTunes' },
- ];
- // Put the active source first, keep others as fallbacks
- const activeIdx = allSources.findIndex(s => activeSource.includes(s.key));
- const searchSources = activeIdx > 0
- ? [allSources[activeIdx], ...allSources.filter((_, i) => i !== activeIdx)]
- : allSources;
-
- resultsContainer.innerHTML = `🔍 Searching ${searchSources[0].label}...
`;
-
- try {
- for (let i = 0; i < searchSources.length; i++) {
- const source = searchSources[i];
- try {
- const response = await fetch(`${source.endpoint}?${params.toString()}`);
- const data = await response.json();
-
- if (data.tracks && data.tracks.length > 0) {
- renderDiscoveryFixResults(data.tracks, fixModalOverlay);
- return;
- }
- // No results from this source — show next source status if there is one
- if (i < searchSources.length - 1) {
- resultsContainer.innerHTML = `🔍 Trying ${searchSources[i + 1].label}...
`;
- }
- } catch (e) {
- console.warn(`Discovery fix search failed on ${source.label}: ${e.message}`);
- }
- }
- // All sources exhausted
- resultsContainer.innerHTML = 'No matches found on any source. Try different search terms.
';
-
- } catch (error) {
- console.error('Search error:', error);
- resultsContainer.innerHTML = '';
- }
-}
-
-/**
- * Render search results as clickable cards
- */
-function renderDiscoveryFixResults(tracks, fixModalOverlay) {
- const resultsContainer = fixModalOverlay.querySelector('#fix-modal-results');
- resultsContainer.innerHTML = '';
-
- // Sort: standard album versions first, live/remix/cover/soundtrack last
- const _variantPattern = /\b(live|remix|remaster|refix|cover|acoustic|demo|instrumental|radio edit|single version|deluxe|edition|soundtrack|from .* film|from .* movie|bonus track)\b|\b\w+ mix\b/i;
- const _albumVariantPattern = /\b(live|greatest hits|best of|collection|compilation|soundtrack|from .* film|from .* movie|remaster|deluxe|redux|expanded|anniversary)\b/i;
- tracks.sort((a, b) => {
- const aVariant = _variantPattern.test(a.name || '') || _albumVariantPattern.test(a.album || '');
- const bVariant = _variantPattern.test(b.name || '') || _albumVariantPattern.test(b.album || '');
- if (aVariant !== bVariant) return aVariant ? 1 : -1;
- return 0; // preserve original order within same category
- });
-
- tracks.forEach(track => {
- const card = document.createElement('div');
- card.className = 'fix-result-card';
- card.onclick = () => selectDiscoveryFixTrack(track);
-
- card.innerHTML = `
-
-
- `;
-
- resultsContainer.appendChild(card);
- });
-}
-
-/**
- * User selected a track - update discovery state
- */
-async function selectDiscoveryFixTrack(track) {
- console.log('✅ User selected track:', track);
-
- // Confirm selection to prevent accidental clicks from layout shift
- const artists = (track.artists || ['Unknown Artist']).join(', ');
- if (!await showConfirmDialog({ title: 'Confirm Match', message: `Match to "${track.name}" by ${artists}?`, confirmText: 'Confirm' })) return;
-
- const { platform, identifier, trackIndex } = currentDiscoveryFix;
-
- console.log('📡 Updating backend match:', { platform, identifier, trackIndex, track });
-
- // Update backend
- try {
- // Get the correct backend identifier based on platform
- let backendIdentifier = identifier;
-
- if (platform === 'tidal') {
- // For Tidal, backend expects the actual playlist_id, not url_hash
- const state = youtubePlaylistStates[identifier];
- backendIdentifier = state?.tidal_playlist_id || identifier;
- } else if (platform === 'deezer') {
- // For Deezer, backend expects the actual playlist_id, not url_hash
- const state = youtubePlaylistStates[identifier];
- backendIdentifier = state?.deezer_playlist_id || identifier;
- } else if (platform === 'spotify_public') {
- // For Spotify Public, backend expects the url_hash
- const state = youtubePlaylistStates[identifier];
- backendIdentifier = state?.spotify_public_playlist_id || identifier;
- } else if (platform === 'beatport') {
- // For Beatport, backend expects url_hash (same as identifier)
- backendIdentifier = identifier;
- }
-
- // Mirrored playlists route through the YouTube endpoint (which already handles mirrored_ prefixes)
- const apiPlatform = platform === 'mirrored' ? 'youtube' : (platform === 'spotify_public' ? 'spotify-public' : platform);
-
- const requestBody = {
- identifier: backendIdentifier,
- track_index: trackIndex,
- spotify_track: {
- id: track.id,
- name: track.name,
- artists: track.artists,
- album: track.album,
- duration_ms: track.duration_ms,
- image_url: track.image_url || null
- }
- };
-
- console.log('📡 Request body:', requestBody);
- console.log('📡 Backend identifier:', backendIdentifier);
-
- const response = await fetch(`/api/${apiPlatform}/discovery/update_match`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(requestBody)
- });
-
- console.log('📡 Response status:', response.status);
-
- const data = await response.json();
-
- console.log('📡 Response data:', data);
-
- if (data.error) {
- showToast(`Failed to update: ${data.error}`, 'error');
- console.error('❌ Backend update failed:', data.error);
- return;
- }
-
- showToast('Match updated successfully!', 'success');
- console.log('✅ Backend update successful');
-
- // Update frontend state
- // Note: Beatport and Tidal reuse youtubePlaylistStates for discovery results
- // ListenBrainz uses its own state but may also be accessed via YouTube
- let state;
- if (platform === 'youtube') {
- state = listenbrainzPlaylistStates[identifier] || youtubePlaylistStates[identifier];
- } else if (platform === 'tidal') {
- state = youtubePlaylistStates[identifier];
- } else if (platform === 'deezer') {
- state = youtubePlaylistStates[identifier];
- } else if (platform === 'beatport') {
- state = youtubePlaylistStates[identifier];
- } else if (platform === 'listenbrainz') {
- state = listenbrainzPlaylistStates[identifier];
- } else if (platform === 'mirrored') {
- state = youtubePlaylistStates[identifier];
- } else if (platform === 'spotify_public') {
- state = youtubePlaylistStates[identifier];
- }
-
- // Support both camelCase and snake_case
- const results = state?.discoveryResults || state?.discovery_results;
- if (state && results && results[trackIndex]) {
- const result = results[trackIndex];
- const wasNotFound = result.status !== 'found' && result.status_class !== 'found';
-
- // Update result
- result.status = '✅ Found';
- result.status_class = 'found';
- result.spotify_track = track.name;
- result.spotify_artist = Array.isArray(track.artists)
- ? track.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-'
- : (track.artists || '-');
- result.spotify_album = track.album;
- result.spotify_id = track.id;
- result.duration = formatDuration(track.duration_ms);
- result.manual_match = true;
- // User picked a real metadata match — no longer a wing-it track
- result.wing_it_fallback = false;
-
- // IMPORTANT: Also set spotify_data for download/sync compatibility.
- // Build album as a dict (not a bare string) so the download
- // pipeline can find cover art via album.image_url / album.images.
- // This matches the shape that normal discovery produces.
- const _fixImageUrl = track.image_url || '';
- let _fixAlbumObj;
- if (track.album && typeof track.album === 'object') {
- _fixAlbumObj = { ...track.album };
- if (_fixImageUrl && !_fixAlbumObj.image_url) _fixAlbumObj.image_url = _fixImageUrl;
- if (_fixImageUrl && !_fixAlbumObj.images) _fixAlbumObj.images = [{ url: _fixImageUrl }];
- } else {
- _fixAlbumObj = { name: track.album || '' };
- if (_fixImageUrl) {
- _fixAlbumObj.image_url = _fixImageUrl;
- _fixAlbumObj.images = [{ url: _fixImageUrl }];
- }
- }
- result.spotify_data = {
- id: track.id,
- name: track.name,
- artists: track.artists,
- album: _fixAlbumObj,
- duration_ms: track.duration_ms,
- image_url: _fixImageUrl
- };
-
- // Increment match count if this was previously not_found or error
- if (wasNotFound) {
- state.spotifyMatches = (state.spotifyMatches || 0) + 1;
-
- // Update progress bar and text
- const spotify_total = state.spotify_total || state.playlist?.tracks?.length || 0;
- const progress = spotify_total > 0 ? Math.round((state.spotifyMatches / spotify_total) * 100) : 0;
-
- const progressBar = document.getElementById(`youtube-discovery-progress-${identifier}`);
- const progressText = document.getElementById(`youtube-discovery-progress-text-${identifier}`);
-
- if (progressBar) {
- progressBar.style.width = `${progress}%`;
- }
- if (progressText) {
- progressText.textContent = `${state.spotifyMatches} / ${spotify_total} tracks matched (${progress}%)`;
- }
-
- console.log(`✅ Updated progress: ${state.spotifyMatches}/${spotify_total} (${progress}%)`);
-
- // Also update the Deezer playlist card if this is a Deezer fix
- if (platform === 'deezer' && state.deezer_playlist_id) {
- const deezerState = deezerPlaylistStates[state.deezer_playlist_id];
- if (deezerState) {
- deezerState.spotifyMatches = state.spotifyMatches;
- updateDeezerCardProgress(state.deezer_playlist_id, {
- spotify_matches: state.spotifyMatches,
- spotify_total: spotify_total
- });
- }
- }
-
- // Also update the Tidal playlist card if this is a Tidal fix
- if (platform === 'tidal' && state.tidal_playlist_id) {
- const tidalState = tidalPlaylistStates?.[state.tidal_playlist_id];
- if (tidalState) {
- tidalState.spotifyMatches = state.spotifyMatches;
- }
- }
-
- // Also update the Spotify Public playlist card if this is a Spotify Public fix
- if (platform === 'spotify_public' && state.spotify_public_playlist_id) {
- const spState = spotifyPublicPlaylistStates?.[state.spotify_public_playlist_id];
- if (spState) {
- spState.spotifyMatches = state.spotifyMatches;
- updateSpotifyPublicCardProgress(state.spotify_public_playlist_id, {
- spotify_matches: state.spotifyMatches,
- spotify_total: spotify_total
- });
- }
- }
- }
-
- // Update UI - refresh the table row
- updateDiscoveryModalSingleRow(platform, identifier, trackIndex);
- }
-
- // Close modal
- closeDiscoveryFixModal();
-
- } catch (error) {
- console.error('Error updating match:', error);
- showToast('Failed to update match', 'error');
- }
-}
-
-/**
- * Update a single row in the discovery modal table
- */
-function updateDiscoveryModalSingleRow(platform, identifier, trackIndex) {
- // Check both state maps - ListenBrainz uses its own, others reuse youtubePlaylistStates
- const state = listenbrainzPlaylistStates[identifier] || youtubePlaylistStates[identifier];
-
- // Support both camelCase and snake_case
- const results = state?.discoveryResults || state?.discovery_results;
- if (!state || !results || !results[trackIndex]) {
- console.warn(`Cannot update row: state or result not found`);
- return;
- }
-
- const result = results[trackIndex];
- const row = document.getElementById(`discovery-row-${identifier}-${trackIndex}`);
-
- if (!row) {
- console.warn(`Cannot update row: row element not found for ${identifier}-${trackIndex}`);
- return;
- }
-
- // Update cells
- const statusCell = row.querySelector('.discovery-status');
- const spotifyTrackCell = row.querySelector('.spotify-track');
- const spotifyArtistCell = row.querySelector('.spotify-artist');
- const spotifyAlbumCell = row.querySelector('.spotify-album');
- const actionsCell = row.querySelector('.discovery-actions');
-
- if (statusCell) {
- statusCell.textContent = result.status;
- statusCell.className = `discovery-status ${result.status_class}`;
- }
-
- if (spotifyTrackCell) spotifyTrackCell.textContent = result.spotify_track || '-';
- if (spotifyArtistCell) spotifyArtistCell.textContent = result.spotify_artist || '-';
- if (spotifyAlbumCell) spotifyAlbumCell.textContent = result.spotify_album || '-';
-
- // Update action button
- if (actionsCell) {
- actionsCell.innerHTML = generateDiscoveryActionButton(result, identifier, platform);
- }
-
- console.log(`✅ Updated row ${trackIndex} in discovery modal`);
-}
-
-async function unmatchDiscoveryTrack(platform, identifier, trackIndex) {
- // Determine the correct API base for this platform
- const apiBase = platform === 'tidal' ? '/api/tidal'
- : platform === 'deezer' ? '/api/deezer'
- : platform === 'spotify-public' ? '/api/spotify-public'
- : platform === 'beatport' ? '/api/beatport'
- : platform === 'listenbrainz' ? '/api/listenbrainz'
- : '/api/youtube';
-
- try {
- const response = await fetch(`${apiBase}/discovery/unmatch`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ identifier, track_index: trackIndex })
- });
- const data = await response.json();
- if (data.success) {
- // Update the row in the discovery modal table
- const state = youtubePlaylistStates[identifier]
- || (window.tidalDiscoveryStates && window.tidalDiscoveryStates[identifier])
- || {};
- if (state.discovery_results && state.discovery_results[trackIndex]) {
- const r = state.discovery_results[trackIndex];
- r.status = '❌ Not Found';
- r.status_class = 'not-found';
- r.spotify_track = '-';
- r.spotify_artist = '-';
- r.spotify_album = '-';
- r.spotify_data = null;
- r.matched_data = null;
- r.confidence = 0;
- r.wing_it_fallback = false;
- r.manual_match = false;
- }
- // Re-render the row — discovery rows use id="discovery-row-{urlHash}-{index}"
- const row = document.getElementById(`discovery-row-${identifier}-${trackIndex}`);
- if (row) {
- const statusCell = row.querySelector('.discovery-status');
- if (statusCell) { statusCell.textContent = '❌ Not Found'; statusCell.className = 'discovery-status not-found'; }
- const matchedCells = row.querySelectorAll('.spotify-track, .spotify-artist, .spotify-album');
- matchedCells.forEach(c => c.textContent = '-');
- const actionsCell = row.querySelector('.discovery-actions');
- if (actionsCell) {
- actionsCell.innerHTML = ``;
- }
- }
- showToast('Match removed', 'success');
- } else {
- showToast(data.error || 'Failed to remove match', 'error');
- }
- } catch (e) {
- console.error('Unmatch error:', e);
- showToast('Failed to remove match', 'error');
- }
-}
-
-// Make functions available globally for onclick handlers
-window.openDiscoveryFixModal = openDiscoveryFixModal;
-window.closeDiscoveryFixModal = closeDiscoveryFixModal;
-window.searchDiscoveryFix = searchDiscoveryFix;
-window.unmatchDiscoveryTrack = unmatchDiscoveryTrack;
-window.openMatchingModal = openMatchingModal;
-window.closeMatchingModal = closeMatchingModal;
-window.selectArtist = selectArtist;
-window.selectAlbum = selectAlbum;
-window.navigateToPage = navigateToPage;
-window.showSupportModal = showSupportModal;
-window.closeSupportModal = closeSupportModal;
-window.copyAddress = copyAddress;
-window.retryLastSearch = retryLastSearch;
-window.showVersionInfo = showVersionInfo;
-window.closeVersionModal = closeVersionModal;
-window.testConnection = testConnection;
-window.autoDetectPlex = autoDetectPlex;
-window.autoDetectJellyfin = autoDetectJellyfin;
-window.autoDetectSlskd = autoDetectSlskd;
-window.startPlexPinAuth = startPlexPinAuth;
-window.cancelPlexPinAuth = cancelPlexPinAuth;
-window.restartPlexPinAuth = restartPlexPinAuth;
-window.showPlexConfiguration = showPlexConfiguration;
-window.toggleServer = toggleServer;
-window.authenticateSpotify = authenticateSpotify;
-window.authenticateTidal = authenticateTidal;
-window.togglePathLock = togglePathLock;
-window.selectResult = selectResult;
-window.startStream = startStream;
-window.streamTrack = streamTrack;
-window.streamAlbumTrack = streamAlbumTrack;
-window.startDownload = startDownload;
-window.downloadTrack = downloadTrack;
-window.downloadAlbum = downloadAlbum;
-window.toggleAlbumExpansion = toggleAlbumExpansion;
-window.downloadAlbumTrack = downloadAlbumTrack;
-window.switchDownloadTab = switchDownloadTab;
-window.cancelDownloadItem = cancelDownloadItem;
-window.clearFinishedDownloads = clearFinishedDownloads;
-
-window.matchedDownloadTrack = matchedDownloadTrack;
-window.matchedDownloadAlbum = matchedDownloadAlbum;
-window.matchedDownloadAlbumTrack = matchedDownloadAlbumTrack;
-
-/**
- * Handle post-download cleanup: clear finished downloads from slskd.
- * Scan and database update are now handled by system automations
- * (batch_complete → scan_library → library_scan_completed → start_database_update).
- */
-async function handlePostDownloadAutomation(playlistId, process) {
- try {
- const successfulDownloads = getSuccessfulDownloadCount(process);
- if (successfulDownloads === 0) {
- console.log(`🔄 [AUTO] No successful downloads for ${playlistId} - skipping cleanup`);
- return;
- }
- console.log(`🔄 [AUTO] Post-download cleanup for ${playlistId} (${successfulDownloads} successful downloads)`);
-
- // Clear completed downloads from slskd
- try {
- const clearResponse = await fetch('/api/downloads/clear-finished', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' }
- });
- if (clearResponse.ok) {
- console.log(`✅ [AUTO] Completed downloads cleared`);
- } else {
- console.warn(`⚠️ [AUTO] Clear downloads failed, continuing anyway`);
- }
- } catch (error) {
- console.warn(`⚠️ [AUTO] Clear error: ${error.message}`);
- }
- } catch (error) {
- console.error(`❌ [AUTO] Error in post-download cleanup: ${error.message}`);
- }
-}
-
-/**
- * Extract successful download count from a download process
- */
-function getSuccessfulDownloadCount(process) {
- try {
- // For processes that have completed, check the modal for completed count
- if (process && process.modalElement) {
- const statElement = process.modalElement.querySelector('[id*="stat-downloaded-"]');
- if (statElement && statElement.textContent) {
- const count = parseInt(statElement.textContent, 10);
- return isNaN(count) ? 0 : count;
- }
- }
-
- // Fallback: assume successful if process completed without obvious failure
- if (process && process.status === 'complete') {
- return 1; // Conservative assumption for single download
- }
-
- return 0;
- } catch (error) {
- console.warn(`⚠️ [AUTO] Error getting successful download count: ${error.message}`);
- return 0;
- }
-}
-
-// ===============================
-// ADD TO WISHLIST MODAL FUNCTIONS
-// ===============================
-
-let currentWishlistModalData = null;
-let wishlistModalVersion = 0;
-
-/**
- * Open the Add to Wishlist modal for an album/EP/single
- * @param {Object} album - Album object with id, name, image_url, etc.
- * @param {Object} artist - Artist object with id, name, image_url
- * @param {Array} tracks - Array of track objects
- * @param {string} albumType - Type of release (album, EP, single)
- */
-async function openAddToWishlistModal(album, artist, tracks, albumType, trackOwnership) {
- wishlistModalVersion++;
- showLoadingOverlay('Preparing wishlist...');
- console.log(`🎵 Opening Add to Wishlist modal for: ${artist.name} - ${album.name}`);
-
- try {
- // Store current modal data for use by other functions
- currentWishlistModalData = {
- album,
- artist,
- tracks,
- albumType
- };
-
- const modal = document.getElementById('add-to-wishlist-modal');
- const overlay = document.getElementById('add-to-wishlist-modal-overlay');
-
- if (!modal || !overlay) {
- console.error('Add to wishlist modal elements not found');
- return;
- }
-
- // Generate and populate hero section
- const heroContent = generateWishlistModalHeroSection(album, artist, tracks, albumType, trackOwnership);
- const heroContainer = document.getElementById('add-to-wishlist-modal-hero');
- if (heroContainer) {
- heroContainer.innerHTML = heroContent;
- }
-
- // Generate and populate track list
- const trackListHTML = generateWishlistTrackList(tracks, trackOwnership);
- const trackListContainer = document.getElementById('wishlist-track-list');
- if (trackListContainer) {
- trackListContainer.innerHTML = trackListHTML;
- }
-
- // Set up the "Add to Wishlist" button click handler
- const addToWishlistBtn = document.getElementById('confirm-add-to-wishlist-btn');
- if (addToWishlistBtn) {
- addToWishlistBtn.onclick = () => handleAddToWishlist();
- }
-
- // Show the modal
- overlay.classList.remove('hidden');
- hideLoadingOverlay();
-
- console.log(`✅ Successfully opened Add to Wishlist modal for: ${album.name}`);
-
- } catch (error) {
- console.error('❌ Error opening Add to Wishlist modal:', error);
- hideLoadingOverlay();
- showToast(`Error opening wishlist modal: ${error.message}`, 'error');
- }
-}
-
-/**
- * Generate the hero section HTML for the wishlist modal
- */
-function generateWishlistModalHeroSection(album, artist, tracks, albumType, trackOwnership) {
- const artistImage = artist.image_url || '';
- const albumImage = album.image_url || '';
- const trackCount = tracks.length;
-
- // Calculate missing tracks if ownership info is available
- let trackDetailText = `${trackCount} track${trackCount !== 1 ? 's' : ''}`;
- if (trackOwnership) {
- const ownedCount = Object.values(trackOwnership).filter(v => v === true).length;
- const missingCount = trackCount - ownedCount;
- if (missingCount > 0 && ownedCount > 0) {
- trackDetailText = `${missingCount} of ${trackCount} tracks missing`;
- }
- }
-
- let heroBackgroundImage = '';
- if (albumImage) {
- heroBackgroundImage = ``;
- }
-
- const heroContent = `
- ${escapeHtml(track.name || 'Unknown Track')}
- ${escapeHtml((track.artists || ['Unknown Artist']).join(', '))}
- ${escapeHtml(track.album || 'Unknown Album')}
- ${formatDuration(track.duration_ms || 0)}
-
-
- `;
-
- return `
- ${heroBackgroundImage}
- ${heroContent}
- `;
-}
-
-/**
- * Generate the track list HTML for the wishlist modal
- */
-function generateWishlistTrackList(tracks, trackOwnership) {
- if (!tracks || tracks.length === 0) {
- return '
- ${artistImage ? `` : ''}
- ${albumImage ? `` : ''}
-
-
- No tracks found
';
- }
-
- return tracks.map((track, index) => {
- const trackNumber = track.track_number || (index + 1);
- const trackName = escapeHtml(track.name || 'Unknown Track');
- const artistsString = formatArtists(track.artists) || 'Unknown Artist';
- const duration = formatDuration(track.duration_ms);
-
- const trackData = trackOwnership ? trackOwnership[track.name] : null;
- const isOwned = trackData && (trackData.owned === true || trackData === true);
- const isKnown = trackData !== null && trackData !== undefined;
- const ownershipClass = isOwned ? 'owned' : (isKnown && !isOwned ? 'missing' : '');
- const badge = isOwned
- ? ''
- : '';
-
- return `
-
-
- `;
- }).join('');
-}
-
-/**
- * Handle the "Add to Wishlist" button click
- */
-async function handleAddToWishlist() {
- if (!currentWishlistModalData) {
- console.error('❌ No wishlist modal data available');
- return;
- }
-
- const { album, artist, tracks, albumType } = currentWishlistModalData;
- const addToWishlistBtn = document.getElementById('confirm-add-to-wishlist-btn');
-
- try {
- // Show loading state
- if (addToWishlistBtn) {
- addToWishlistBtn.classList.add('loading');
- addToWishlistBtn.textContent = 'Adding...';
- addToWishlistBtn.disabled = true;
- }
-
- console.log(`🔄 Adding ${tracks.length} tracks to wishlist for: ${artist.name} - ${album.name}`);
-
- let successCount = 0;
- let errorCount = 0;
-
- // Add each track to wishlist individually
- for (const track of tracks) {
- try {
- // Ensure artists field is in the correct format (array of objects)
- let formattedArtists = track.artists;
- if (typeof track.artists === 'string') {
- // If artists is a string, convert to array of objects
- formattedArtists = [{ name: track.artists }];
- } else if (Array.isArray(track.artists)) {
- // If artists is already an array, ensure each item is an object
- formattedArtists = track.artists.map(artistItem => {
- if (typeof artistItem === 'string') {
- return { name: artistItem };
- } else if (typeof artistItem === 'object' && artistItem !== null) {
- return artistItem;
- } else {
- return { name: 'Unknown Artist' };
- }
- });
- } else {
- // Fallback to array with single artist object
- formattedArtists = [{ name: artist.name }];
- }
-
- const formattedTrack = {
- ...track,
- artists: formattedArtists
- };
-
- // Use track's album data if available (from API), falling back to modal's album data
- // This ensures consistency with how the Artists page handles wishlisting
- let trackAlbum = track.album;
- let trackAlbumType = albumType || 'album';
-
- if (trackAlbum && typeof trackAlbum === 'object') {
- // Track has album data from API - use its album_type
- trackAlbumType = trackAlbum.album_type || albumType || 'album';
- // Ensure album has required fields
- if (!trackAlbum.name) {
- trackAlbum.name = album.name;
- }
- if (!trackAlbum.id) {
- trackAlbum.id = album.id;
- }
- } else {
- // Fall back to the album passed to the modal
- trackAlbum = album;
- }
-
- console.log(`🔄 Adding track with formatted artists:`, formattedTrack.name, formattedTrack.artists);
- console.log(`🔄 Using album_type: ${trackAlbumType} (from ${track.album ? 'track.album' : 'modal album'})`);
-
- const response = await fetch('/api/add-album-to-wishlist', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- track: formattedTrack,
- artist: artist,
- album: trackAlbum,
- source_type: 'album',
- source_context: {
- album_name: trackAlbum.name,
- artist_name: artist.name,
- album_type: trackAlbumType
- }
- })
- });
-
- const result = await response.json();
-
- if (result.success) {
- successCount++;
- console.log(`✅ Added "${track.name}" to wishlist`);
- } else {
- errorCount++;
- console.error(`❌ Failed to add "${track.name}" to wishlist: ${result.error}`);
- }
-
- } catch (error) {
- errorCount++;
- console.error(`❌ Error adding "${track.name}" to wishlist:`, error);
- }
- }
-
- // Show completion message
- if (successCount > 0) {
- const message = errorCount > 0
- ? `Added ${successCount}/${tracks.length} tracks to wishlist (${errorCount} failed)`
- : `Added ${successCount} tracks to wishlist`;
- showToast(message, successCount === tracks.length ? 'success' : 'warning');
- } else {
- showToast('Failed to add any tracks to wishlist', 'error');
- }
-
- // Close the modal
- closeAddToWishlistModal();
-
- console.log(`✅ Wishlist addition complete: ${successCount} successful, ${errorCount} failed`);
-
- } catch (error) {
- console.error('❌ Error in handleAddToWishlist:', error);
- showToast(`Error adding to wishlist: ${error.message}`, 'error');
- } finally {
- // Reset button state
- if (addToWishlistBtn) {
- addToWishlistBtn.classList.remove('loading');
- addToWishlistBtn.textContent = 'Add to Wishlist';
- addToWishlistBtn.disabled = false;
- }
- }
-}
-
-/**
- * Lazy-load per-track ownership indicators into an already-open wishlist modal.
- * Fetches ownership from the backend, then updates the modal DOM in-place.
- * If all tracks are owned (Spotify metadata discrepancy), also fixes the source card.
- */
-async function lazyLoadTrackOwnership(artistName, tracks, sourceCard, albumName = null) {
- const myVersion = wishlistModalVersion;
- try {
- const checkBody = {
- artist_name: artistName,
- tracks: tracks.map(t => ({ name: t.name, track_number: t.track_number }))
- };
- if (albumName) checkBody.album_name = albumName;
- const resp = await fetch('/api/library/check-tracks', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(checkBody)
- });
- const data = await resp.json();
- if (!data.success) return;
-
- // Guard against stale updates if user reopened modal for a different album
- if (myVersion !== wishlistModalVersion) return;
-
- const ownership = data.owned_tracks;
- const trackItems = document.querySelectorAll('#wishlist-track-list .wishlist-track-item');
-
- let ownedCount = 0;
- trackItems.forEach((item, index) => {
- const track = tracks[index];
- if (!track) return;
- const trackData = ownership[track.name];
- const isOwned = trackData && trackData.owned === true;
- if (isOwned) {
- ownedCount++;
- item.classList.add('owned');
- // Add metadata line below track name
- const trackInfo = item.querySelector('.wishlist-track-info');
- if (trackInfo && (trackData.format || trackData.bitrate)) {
- const metaDiv = document.createElement('div');
- metaDiv.className = 'wishlist-track-meta';
- let metaHtml = '';
- if (trackData.format === 'MP3' && trackData.bitrate) {
- metaHtml += `MP3 ${trackData.bitrate}`;
- } else {
- if (trackData.format) {
- metaHtml += `${trackData.format}`;
- }
- if (trackData.bitrate) {
- metaHtml += `${trackData.bitrate} kbps`;
- }
- }
- metaDiv.innerHTML = metaHtml;
- trackInfo.appendChild(metaDiv);
- }
- const badge = document.createElement('div');
- badge.className = 'wishlist-track-badge owned';
- badge.innerHTML = '';
- item.appendChild(badge);
- } else {
- item.classList.add('missing');
- }
- });
-
- // Aggregate format summary from owned tracks
- const formatSet = new Set();
- for (const trackName of Object.keys(ownership)) {
- const td = ownership[trackName];
- if (td && td.owned && td.format) {
- if (td.format === 'MP3' && td.bitrate) {
- formatSet.add(`MP3-${td.bitrate}`);
- } else {
- formatSet.add(td.format);
- }
- }
- }
- if (formatSet.size > 0) {
- const heroDetailsContainer = document.querySelector('.add-to-wishlist-modal-hero-details');
- if (heroDetailsContainer) {
- // Remove any existing format tag
- const existing = heroDetailsContainer.querySelector('.modal-format-tag');
- if (existing) existing.remove();
- const formatTag = document.createElement('span');
- formatTag.className = 'modal-format-tag';
- formatTag.textContent = [...formatSet].sort().join(' / ');
- heroDetailsContainer.appendChild(formatTag);
- }
- }
-
- // Update hero subtitle with missing count
- const missingCount = tracks.length - ownedCount;
- const heroDetails = document.querySelectorAll('.add-to-wishlist-modal-hero-detail');
- const trackDetailEl = heroDetails.length > 1 ? heroDetails[heroDetails.length - 1] : null;
- if (trackDetailEl && missingCount > 0 && ownedCount > 0) {
- trackDetailEl.textContent = `${missingCount} of ${tracks.length} tracks missing`;
- }
-
- // If ALL returned tracks are owned, this is a Spotify metadata discrepancy
- // (e.g. total_tracks says 15 but API only returns 14, and all 14 are owned)
- // Fix the source card to show complete
- if (missingCount === 0 && sourceCard && sourceCard._releaseData) {
- sourceCard._releaseData.track_completion = {
- owned_tracks: ownedCount,
- total_tracks: tracks.length,
- percentage: 100,
- missing_tracks: 0
- };
- const completionText = sourceCard.querySelector('.completion-text');
- if (completionText) {
- completionText.textContent = `Complete (${ownedCount})`;
- completionText.className = 'completion-text complete';
- completionText.title = '';
- }
- const completionFill = sourceCard.querySelector('.completion-fill');
- if (completionFill) {
- completionFill.style.width = '100%';
- completionFill.classList.remove('partial');
- completionFill.classList.add('complete');
- }
- }
- } catch (e) {
- console.warn('Could not load track ownership:', e);
- }
-}
-
-/**
- * Close the Add to Wishlist modal
- */
-function closeAddToWishlistModal() {
- console.log('🔄 Closing Add to Wishlist modal');
-
- try {
- const overlay = document.getElementById('add-to-wishlist-modal-overlay');
- if (overlay) {
- overlay.classList.add('hidden');
- }
-
- // Clear current modal data
- currentWishlistModalData = null;
-
- // Clear hero content
- const heroContainer = document.getElementById('add-to-wishlist-modal-hero');
- if (heroContainer) {
- heroContainer.innerHTML = '';
- }
-
- // Clear track list
- const trackListContainer = document.getElementById('wishlist-track-list');
- if (trackListContainer) {
- trackListContainer.innerHTML = '';
- }
-
- console.log('✅ Add to Wishlist modal closed successfully');
-
- } catch (error) {
- console.error('❌ Error closing Add to Wishlist modal:', error);
- }
-}
-
-/**
- * Handle "Download Now" button click from the Add to Wishlist modal.
- * Captures modal data, closes the wishlist modal, then opens the download missing tracks modal.
- */
-async function handleWishlistDownloadNow() {
- if (!currentWishlistModalData) {
- showToast('No album data available', 'error');
- return;
- }
-
- // Capture data before closeAddToWishlistModal clears it
- const { album, artist, tracks, albumType } = currentWishlistModalData;
-
- // Close the wishlist modal
- closeAddToWishlistModal();
-
- // Build virtual playlist ID and name (same pattern as createArtistAlbumVirtualPlaylist)
- const virtualPlaylistId = `artist_album_${artist.id}_${album.id}`;
- const playlistName = `[${artist.name}] ${album.name}`;
-
- // If a download process already exists for this album, just show the existing modal
- if (activeDownloadProcesses[virtualPlaylistId]) {
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process.modalElement) {
- process.modalElement.style.display = 'flex';
- }
- return;
- }
-
- // Open download missing modal (reuses existing function)
- showLoadingOverlay('Loading album...');
- await openDownloadMissingModalForArtistAlbum(
- virtualPlaylistId, playlistName, tracks, album, artist, false
- );
- hideLoadingOverlay();
-
- // Register download bubble (reuses existing artist bubble system)
- registerArtistDownload(artist, album, virtualPlaylistId, albumType);
-}
-
-/**
- * Add all tracks from any download modal to the wishlist
- * Universal handler for all modal types (artist albums, playlists, YouTube, Tidal, etc.)
- */
-async function addModalTracksToWishlist(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (!process) {
- console.error('❌ No active process found for:', playlistId);
- showToast('Error: Could not find playlist data', 'error');
- return;
- }
-
- // Verify we have tracks
- if (!process.tracks || process.tracks.length === 0) {
- console.error('❌ No tracks found in process:', process);
- showToast('Error: No tracks to add', 'error');
- return;
- }
-
- // Filter tracks based on checkbox selection (if checkboxes exist in this modal)
- const wishlistTbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
- let tracks = process.tracks;
- if (wishlistTbody) {
- const allCbs = wishlistTbody.querySelectorAll('.track-select-cb');
- if (allCbs.length > 0) {
- const checkedCbs = wishlistTbody.querySelectorAll('.track-select-cb:checked');
- const selectedIndices = new Set([...checkedCbs].map(cb => parseInt(cb.dataset.trackIndex)));
- tracks = process.tracks.filter((_, i) => selectedIndices.has(i));
- }
- }
-
- // Get album context if available (for artist album downloads)
- // Artist is resolved per-track below — process.artist is only set for album downloads,
- // not for playlists, so we must NOT use it as a blanket default.
- const processArtist = process.artist || null;
- const album = process.album || process.playlist || { name: 'Playlist', id: playlistId };
-
- console.log(`🔄 Adding ${tracks.length} tracks from "${album.name}" to wishlist (process artist: ${processArtist?.name || 'per-track'})`);
-
- // Disable the button to prevent double-clicks
- const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
- if (wishlistBtn) {
- wishlistBtn.disabled = true;
- wishlistBtn.classList.add('loading');
- wishlistBtn.textContent = 'Adding...';
- }
-
- try {
- let successCount = 0;
- let errorCount = 0;
-
- // Add each track to wishlist individually
- let wingItSkipped = 0;
- for (const track of tracks) {
- try {
- // Skip wing-it fallback tracks — they have no real metadata,
- // adding them to wishlist would just retry with raw data
- const trackId = track.id || '';
- if (String(trackId).startsWith('wing_it_')) {
- wingItSkipped++;
- console.log(`⏭️ Skipping wing-it track from wishlist: ${track.name}`);
- continue;
- }
-
- // Format artists field to match backend expectations
- let formattedArtists = track.artists;
- if (typeof track.artists === 'string') {
- formattedArtists = [{ name: track.artists }];
- } else if (Array.isArray(track.artists)) {
- formattedArtists = track.artists.map(artistItem => {
- if (typeof artistItem === 'string') {
- return { name: artistItem };
- } else if (typeof artistItem === 'object' && artistItem !== null) {
- return artistItem;
- } else {
- return { name: 'Unknown Artist' };
- }
- });
- } else {
- formattedArtists = [{ name: artist.name }];
- }
-
- const formattedTrack = {
- ...track,
- artists: formattedArtists
- };
-
- // Use track's own album data if available
- // Convert string album names to objects if needed (no Spotify fetch!)
- let trackAlbum = track.album;
- let trackAlbumType = 'album';
-
- // Handle both object and string album formats
- if (typeof trackAlbum === 'string') {
- // Album is just a string - convert to minimal object
- trackAlbum = {
- name: trackAlbum,
- album_type: 'album',
- images: []
- };
- trackAlbumType = 'album';
- } else if (trackAlbum && typeof trackAlbum === 'object') {
- // Album is already an object - extract album_type
- trackAlbumType = trackAlbum.album_type || 'album';
- // Ensure it has a name
- if (!trackAlbum.name) {
- trackAlbum.name = 'Unknown Album';
- }
- } else {
- // No album data at all - create minimal object
- trackAlbum = {
- name: 'Unknown Album',
- album_type: 'album',
- images: []
- };
- trackAlbumType = 'album';
- }
-
- // Resolve artist: for album downloads, use the album-level artist to keep
- // all tracks grouped under one artist in the wishlist. Per-track artists
- // (like individual vocalists on a soundtrack) should NOT split the album.
- let trackArtist;
- if (processArtist && processArtist.name) {
- // Album context exists — use album artist to keep tracks grouped
- trackArtist = processArtist;
- } else if (formattedArtists.length > 0 && formattedArtists[0].name && formattedArtists[0].name !== 'Unknown Artist') {
- // No album context (playlist/single) — use track's own artist
- trackArtist = formattedArtists[0];
- } else {
- trackArtist = { name: 'Unknown Artist', id: null };
- }
-
- const response = await fetch('/api/add-album-to-wishlist', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- track: formattedTrack,
- artist: trackArtist,
- album: trackAlbum,
- source_type: 'album',
- source_context: {
- album_name: trackAlbum.name,
- artist_name: trackArtist.name,
- album_type: trackAlbumType
- }
- })
- });
-
- const result = await response.json();
-
- if (result.success) {
- successCount++;
- } else {
- errorCount++;
- console.error(`❌ Failed to add "${track.name}" to wishlist: ${result.error}`);
- }
- } catch (error) {
- errorCount++;
- console.error(`❌ Error adding "${track.name}" to wishlist:`, error);
- }
- }
-
- // Show result toast
- if (successCount > 0) {
- let message = errorCount > 0
- ? `Added ${successCount}/${tracks.length} tracks to wishlist (${errorCount} failed)`
- : `Added ${successCount} tracks to wishlist`;
- if (wingItSkipped > 0) message += ` (${wingItSkipped} wing-it skipped)`;
- showToast(message, 'success');
-
- // Close the modal on success
- await closeDownloadMissingModal(playlistId);
- } else {
- showToast('Failed to add any tracks to wishlist', 'error');
- }
-
- } catch (error) {
- console.error('❌ Error in addModalTracksToWishlist:', error);
- showToast(`Error adding to wishlist: ${error.message}`, 'error');
- } finally {
- // Re-enable button if still on screen (in case of error)
- if (wishlistBtn) {
- wishlistBtn.disabled = false;
- wishlistBtn.classList.remove('loading');
- wishlistBtn.textContent = 'Add to Wishlist';
- }
- }
-}
-
-/**
- * Format duration from milliseconds to MM:SS format
- */
-function formatDuration(durationMs) {
- if (!durationMs || durationMs <= 0) {
- return '--:--';
- }
-
- const totalSeconds = Math.floor(durationMs / 1000);
- const minutes = Math.floor(totalSeconds / 60);
- const seconds = totalSeconds % 60;
-
- return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-}
-
-// Download Missing Tracks Modal functions
-window.openDownloadMissingModal = openDownloadMissingModal;
-window.closeDownloadMissingModal = closeDownloadMissingModal;
-window.startMissingTracksProcess = startMissingTracksProcess;
-window.cancelAllOperations = cancelAllOperations;
-window.cancelTrackDownload = cancelTrackDownload; // Legacy system
-window.cancelTrackDownloadV2 = cancelTrackDownloadV2; // NEW V2 system
-window.handleViewProgressClick = handleViewProgressClick;
-
-// Wishlist Modal functions (existing)
-window.openDownloadMissingWishlistModal = openDownloadMissingWishlistModal;
-window.startWishlistMissingTracksProcess = startWishlistMissingTracksProcess;
-window.handleWishlistButtonClick = handleWishlistButtonClick;
-
-// Wishlist Overview Modal functions (new)
-window.openWishlistOverviewModal = openWishlistOverviewModal;
-window.closeWishlistOverviewModal = closeWishlistOverviewModal;
-window.selectWishlistCategory = selectWishlistCategory;
-window.backToCategories = backToCategories;
-window.downloadSelectedCategory = downloadSelectedCategory;
-
-// Add to Wishlist Modal functions (new)
-window.openAddToWishlistModal = openAddToWishlistModal;
-window.closeAddToWishlistModal = closeAddToWishlistModal;
-window.handleAddToWishlist = handleAddToWishlist;
-window.handleWishlistDownloadNow = handleWishlistDownloadNow;
-window.addModalTracksToWishlist = addModalTracksToWishlist;
-
-// Helper functions
-window.escapeHtml = escapeHtml;
-window.formatArtists = formatArtists;
-
-// Artist Download Management functions
-window.closeArtistDownloadModal = closeArtistDownloadModal;
-window.openArtistDownloadProcess = openArtistDownloadProcess;
-window.bulkCompleteArtistDownloads = bulkCompleteArtistDownloads;
-window.refreshAllArtistDownloadStatuses = refreshAllArtistDownloadStatuses;
-
-
-// APPEND THIS JAVASCRIPT SNIPPET (B)
-
-function initializeFilters() {
- const toggleBtn = document.getElementById('filter-toggle-btn');
- const container = document.getElementById('filters-container');
- const content = document.getElementById('filter-content');
-
- if (toggleBtn && container && content) {
- // Using .onclick ensures we only ever have one click handler
- toggleBtn.onclick = () => {
- const isExpanded = container.classList.contains('expanded');
-
- if (isExpanded) {
- // Collapse the container
- container.classList.remove('expanded');
- toggleBtn.textContent = '⏷ Filters';
- } else {
- // Expand the container
- content.classList.remove('hidden'); // Make sure content is visible for animation
- container.classList.add('expanded');
- toggleBtn.textContent = '⏶ Filters';
- }
- };
- }
-
- // This part is correct and doesn't need to change
- document.querySelectorAll('.filter-btn').forEach(button => {
- button.addEventListener('click', handleFilterClick);
- });
-}
-
-function handleFilterClick(event) {
- const button = event.target;
- const filterType = button.dataset.filterType;
- const value = button.dataset.value;
-
- if (filterType === 'type') currentFilterType = value;
- if (filterType === 'format') currentFilterFormat = value;
- if (filterType === 'sort') currentSortBy = value;
-
- if (button.id === 'sort-order-btn') {
- isSortReversed = !isSortReversed;
- button.textContent = isSortReversed ? '↑' : '↓';
- }
-
- document.querySelectorAll(`.filter-btn[data-filter-type="${filterType}"]`).forEach(btn => {
- btn.classList.remove('active');
- });
- if (filterType) { // Don't try to activate the sort order button
- button.classList.add('active');
- }
-
- applyFiltersAndSort();
-}
-
-function resetFilters() {
- currentFilterType = 'all';
- currentFilterFormat = 'all';
- currentSortBy = 'quality_score';
- isSortReversed = false;
-
- document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
- document.querySelector('.filter-btn[data-filter-type="type"][data-value="all"]').classList.add('active');
- document.querySelector('.filter-btn[data-filter-type="format"][data-value="all"]').classList.add('active');
- document.querySelector('.filter-btn[data-filter-type="sort"][data-value="quality_score"]').classList.add('active');
- document.getElementById('sort-order-btn').textContent = '↓';
-}
-
-function applyFiltersAndSort() {
- let processedResults = [...allSearchResults];
- const query = document.getElementById('downloads-search-input').value.trim().toLowerCase();
-
- // 1. Filter by Type
- if (currentFilterType !== 'all') {
- processedResults = processedResults.filter(r => r.result_type === currentFilterType);
- }
-
- // 2. Filter by Format
- if (currentFilterFormat !== 'all') {
- processedResults = processedResults.filter(r => {
- const quality = (r.dominant_quality || r.quality || '').toLowerCase();
- return quality === currentFilterFormat;
- });
- }
-
- // 3. Sort Results
- processedResults.sort((a, b) => {
- let valA, valB;
-
- // Special handling for relevance sort
- if (currentSortBy === 'relevance') {
- valA = calculateRelevanceScore(a, query);
- valB = calculateRelevanceScore(b, query);
- return valB - valA; // Higher score is better
- }
-
- // Special handling for availability
- if (currentSortBy === 'availability') {
- valA = (a.free_upload_slots || 0) - (a.queue_length || 0) * 0.1;
- valB = (b.free_upload_slots || 0) - (b.queue_length || 0) * 0.1;
- return valB - valA;
- }
-
- valA = a[currentSortBy] || 0;
- valB = b[currentSortBy] || 0;
-
- if (typeof valA === 'string') {
- // For name/title sort, use the correct property
- const titleA = (a.album_title || a.title || '').toLowerCase();
- const titleB = (b.album_title || b.title || '').toLowerCase();
- return titleA.localeCompare(titleB);
- }
-
- // Default numeric sort (descending)
- return valB - valA;
- });
-
- // Handle sort direction toggle
- const sortDefaults = {
- relevance: 'desc', quality_score: 'desc', size: 'desc', bitrate: 'desc',
- upload_speed: 'desc', duration: 'desc', availability: 'desc',
- title: 'asc', username: 'asc'
- };
-
- const defaultOrder = sortDefaults[currentSortBy] || 'desc';
- if ((defaultOrder === 'asc' && isSortReversed) || (defaultOrder === 'desc' && !isSortReversed)) {
- processedResults.reverse();
- }
-
- displayDownloadsResults(processedResults);
-}
-
-function calculateRelevanceScore(result, query) {
- let score = 0.0;
- const queryTerms = query.split(' ').filter(t => t.length > 1);
-
- // 1. Search Term Matching (40%)
- let searchableText = `${result.title || ''} ${result.artist || ''} ${result.album || ''} ${result.album_title || ''}`.toLowerCase();
- let termMatches = 0;
- for (const term of queryTerms) {
- if (searchableText.includes(term)) {
- termMatches++;
- }
- }
- score += (termMatches / queryTerms.length) * 0.40;
-
- // 2. Quality Score (25%)
- score += (result.quality_score || 0) * 0.25;
-
- // 3. User Reliability (Availability & Speed) (20%)
- const reliability = ((result.free_upload_slots || 0) > 0 ? 0.5 : 0) + Math.min(1, (result.upload_speed || 0) / 500) * 0.5;
- score += reliability * 0.20;
-
- // 4. File Completeness (Bitrate & Duration) (15%)
- const completeness = (Math.min(1, (result.bitrate || 0) / 320) * 0.5) + (result.duration > 0 ? 0.5 : 0);
- score += completeness * 0.15;
-
- return score;
-}
-// APPEND THIS JAVASCRIPT SNIPPET (B)
-
-function initializeFilters() {
- const toggleBtn = document.getElementById('filter-toggle-btn');
- const container = document.getElementById('filters-container');
- const content = document.getElementById('filter-content');
-
- if (toggleBtn && container && content) {
- // Using .onclick ensures we only ever have one click handler
- toggleBtn.onclick = () => {
- const isExpanded = container.classList.contains('expanded');
-
- if (isExpanded) {
- // Collapse the container
- container.classList.remove('expanded');
- toggleBtn.textContent = '⏷ Filters';
- } else {
- // Expand the container
- content.classList.remove('hidden'); // Make sure content is visible for animation
- container.classList.add('expanded');
- toggleBtn.textContent = '⏶ Filters';
- }
- };
- }
-
- // This part is correct and doesn't need to change
- document.querySelectorAll('.filter-btn').forEach(button => {
- button.addEventListener('click', handleFilterClick);
- });
-}
-
-function handleFilterClick(event) {
- const button = event.target;
- const filterType = button.dataset.filterType;
- const value = button.dataset.value;
-
- if (filterType === 'type') currentFilterType = value;
- if (filterType === 'format') currentFilterFormat = value;
- if (filterType === 'sort') currentSortBy = value;
-
- if (button.id === 'sort-order-btn') {
- isSortReversed = !isSortReversed;
- button.textContent = isSortReversed ? '↑' : '↓';
- }
-
- document.querySelectorAll(`.filter-btn[data-filter-type="${filterType}"]`).forEach(btn => {
- btn.classList.remove('active');
- });
- if (filterType) { // Don't try to activate the sort order button
- button.classList.add('active');
- }
-
- applyFiltersAndSort();
-}
-
-function resetFilters() {
- currentFilterType = 'all';
- currentFilterFormat = 'all';
- currentSortBy = 'quality_score';
- isSortReversed = false;
-
- document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
- document.querySelector('.filter-btn[data-filter-type="type"][data-value="all"]').classList.add('active');
- document.querySelector('.filter-btn[data-filter-type="format"][data-value="all"]').classList.add('active');
- document.querySelector('.filter-btn[data-filter-type="sort"][data-value="quality_score"]').classList.add('active');
- document.getElementById('sort-order-btn').textContent = '↓';
-}
-
-function applyFiltersAndSort() {
- let processedResults = [...allSearchResults];
- const query = document.getElementById('downloads-search-input').value.trim().toLowerCase();
-
- // 1. Filter by Type
- if (currentFilterType !== 'all') {
- processedResults = processedResults.filter(r => r.result_type === currentFilterType);
- }
-
- // 2. Filter by Format
- if (currentFilterFormat !== 'all') {
- processedResults = processedResults.filter(r => {
- const quality = (r.dominant_quality || r.quality || '').toLowerCase();
- return quality === currentFilterFormat;
- });
- }
-
- // 3. Sort Results
- processedResults.sort((a, b) => {
- let valA, valB;
-
- // Special handling for relevance sort
- if (currentSortBy === 'relevance') {
- valA = calculateRelevanceScore(a, query);
- valB = calculateRelevanceScore(b, query);
- return valB - valA; // Higher score is better
- }
-
- // Special handling for availability
- if (currentSortBy === 'availability') {
- valA = (a.free_upload_slots || 0) - (a.queue_length || 0) * 0.1;
- valB = (b.free_upload_slots || 0) - (b.queue_length || 0) * 0.1;
- return valB - valA;
- }
-
- valA = a[currentSortBy] || 0;
- valB = b[currentSortBy] || 0;
-
- if (typeof valA === 'string') {
- // For name/title sort, use the correct property
- const titleA = (a.album_title || a.title || '').toLowerCase();
- const titleB = (b.album_title || b.title || '').toLowerCase();
- return titleA.localeCompare(titleB);
- }
-
- // Default numeric sort (descending)
- return valB - valA;
- });
-
- // Handle sort direction toggle
- const sortDefaults = {
- relevance: 'desc', quality_score: 'desc', size: 'desc', bitrate: 'desc',
- upload_speed: 'desc', duration: 'desc', availability: 'desc',
- title: 'asc', username: 'asc'
- };
-
- const defaultOrder = sortDefaults[currentSortBy] || 'desc';
- if ((defaultOrder === 'asc' && isSortReversed) || (defaultOrder === 'desc' && !isSortReversed)) {
- processedResults.reverse();
- }
-
- displayDownloadsResults(processedResults);
-}
-
-function calculateRelevanceScore(result, query) {
- let score = 0.0;
- const queryTerms = query.split(' ').filter(t => t.length > 1);
-
- // 1. Search Term Matching (40%)
- let searchableText = `${result.title || ''} ${result.artist || ''} ${result.album || ''} ${result.album_title || ''}`.toLowerCase();
- let termMatches = 0;
- for (const term of queryTerms) {
- if (searchableText.includes(term)) {
- termMatches++;
- }
- }
- score += (termMatches / queryTerms.length) * 0.40;
-
- // 2. Quality Score (25%)
- score += (result.quality_score || 0) * 0.25;
-
- // 3. User Reliability (Availability & Speed) (20%)
- const reliability = ((result.free_upload_slots || 0) > 0 ? 0.5 : 0) + Math.min(1, (result.upload_speed || 0) / 500) * 0.5;
- score += reliability * 0.20;
-
- // 4. File Completeness (Bitrate & Duration) (15%)
- const completeness = (Math.min(1, (result.bitrate || 0) / 320) * 0.5) + (result.duration > 0 ? 0.5 : 0);
- score += completeness * 0.15;
-
- return score;
-}
-
-// Add to global scope for onclick
-window.handleFilterClick = handleFilterClick;
-
-// ===============================
-// MATCHED DOWNLOADS MODAL
-// ===============================
-
-// Global state for matching modal
-let currentMatchingData = {
- searchResult: null,
- isAlbumDownload: false,
- albumResult: null,
- selectedArtist: null,
- selectedAlbum: null,
- currentStage: 'artist' // 'artist' or 'album'
-};
-
-let searchTimers = {
- artist: null,
- album: null
-};
-
-function openMatchingModal(searchResult, isAlbumDownload = false, albumResult = null) {
- console.log('🎯 Opening matching modal for:', searchResult);
-
- // Store the current matching data
- currentMatchingData = {
- searchResult: searchResult,
- isAlbumDownload: isAlbumDownload,
- albumResult: albumResult,
- selectedArtist: null,
- selectedAlbum: null,
- currentStage: 'artist'
- };
-
- // Show modal
- const overlay = document.getElementById('matching-modal-overlay');
- overlay.classList.remove('hidden');
-
- // Reset modal state
- resetModalState();
-
- // Set appropriate title and stage
- const modalTitle = document.getElementById('matching-modal-title');
- const artistStageTitle = document.getElementById('artist-stage-title');
-
- if (isAlbumDownload) {
- modalTitle.textContent = 'Match Album Download to Spotify';
- artistStageTitle.textContent = 'Step 1: Select the correct Artist';
- document.getElementById('album-selection-stage').style.display = 'block';
- } else {
- modalTitle.textContent = 'Match Download to Spotify';
- artistStageTitle.textContent = 'Select the correct Artist for this Single';
- document.getElementById('album-selection-stage').style.display = 'none';
- }
-
- // Generate initial artist suggestions
- fetchArtistSuggestions();
-
- // Setup event listeners
- setupModalEventListeners();
-}
-
-function closeMatchingModal() {
- const overlay = document.getElementById('matching-modal-overlay');
- overlay.classList.add('hidden');
-
- // Clear timers
- Object.values(searchTimers).forEach(timer => {
- if (timer) clearTimeout(timer);
- });
-
- // Reset state
- currentMatchingData = {
- searchResult: null,
- isAlbumDownload: false,
- albumResult: null,
- selectedArtist: null,
- selectedAlbum: null,
- currentStage: 'artist'
- };
-}
-
-function resetModalState() {
- // Show artist stage, hide album stage
- document.getElementById('artist-selection-stage').classList.remove('hidden');
- document.getElementById('album-selection-stage').classList.add('hidden');
-
- // Clear all suggestion containers
- document.getElementById('artist-suggestions').innerHTML = '';
- document.getElementById('artist-manual-results').innerHTML = '';
- document.getElementById('album-suggestions').innerHTML = '';
- document.getElementById('album-manual-results').innerHTML = '';
-
- // Clear search inputs
- document.getElementById('artist-search-input').value = '';
- document.getElementById('album-search-input').value = '';
-
- // Reset button states
- document.getElementById('confirm-match-btn').disabled = true;
-
- // Reset selections
- currentMatchingData.selectedArtist = null;
- currentMatchingData.selectedAlbum = null;
- currentMatchingData.currentStage = 'artist';
-}
-
-function setupModalEventListeners() {
- // Search input listeners
- const artistInput = document.getElementById('artist-search-input');
- const albumInput = document.getElementById('album-search-input');
-
- artistInput.removeEventListener('input', handleArtistSearch);
- artistInput.addEventListener('input', handleArtistSearch);
-
- albumInput.removeEventListener('input', handleAlbumSearch);
- albumInput.addEventListener('input', handleAlbumSearch);
-
- // Button listeners
- const skipBtn = document.getElementById('skip-matching-btn');
- const cancelBtn = document.getElementById('cancel-match-btn');
- const confirmBtn = document.getElementById('confirm-match-btn');
-
- skipBtn.onclick = skipMatching;
- cancelBtn.onclick = closeMatchingModal;
- confirmBtn.onclick = confirmMatch;
-}
-
-async function fetchArtistSuggestions() {
- try {
- showLoadingCards('artist-suggestions', 'Finding artist...');
-
- const response = await fetch('/api/match/suggestions', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- search_result: currentMatchingData.searchResult,
- context: 'artist',
- is_album: currentMatchingData.isAlbumDownload,
- album_result: currentMatchingData.albumResult
- })
- });
-
- const data = await response.json();
- if (data.suggestions) {
- renderArtistSuggestions(data.suggestions);
- } else {
- showNoResultsMessage('artist-suggestions', 'No artist suggestions found');
- }
- } catch (error) {
- console.error('Error fetching artist suggestions:', error);
- showNoResultsMessage('artist-suggestions', 'Error loading suggestions');
- }
-}
-
-async function fetchAlbumSuggestions() {
- if (!currentMatchingData.selectedArtist) return;
-
- try {
- showLoadingCards('album-suggestions', 'Finding album...');
-
- const response = await fetch('/api/match/suggestions', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- search_result: currentMatchingData.searchResult,
- context: 'album',
- selected_artist: currentMatchingData.selectedArtist
- })
- });
-
- const data = await response.json();
- if (data.suggestions) {
- renderAlbumSuggestions(data.suggestions);
- } else {
- showNoResultsMessage('album-suggestions', 'No album suggestions found');
- }
- } catch (error) {
- console.error('Error fetching album suggestions:', error);
- showNoResultsMessage('album-suggestions', 'Error loading suggestions');
- }
-}
-
-function renderArtistSuggestions(suggestions) {
- const container = document.getElementById('artist-suggestions');
- container.innerHTML = '';
-
- if (!suggestions.length) {
- showNoResultsMessage('artist-suggestions', 'No artist matches found');
- return;
- }
-
- suggestions.forEach(suggestion => {
- const card = createArtistCard(suggestion.artist, suggestion.confidence);
- container.appendChild(card);
- });
-}
-
-function renderAlbumSuggestions(suggestions) {
- const container = document.getElementById('album-suggestions');
- container.innerHTML = '';
-
- if (!suggestions.length) {
- showNoResultsMessage('album-suggestions', 'No album matches found');
- return;
- }
-
- suggestions.forEach(suggestion => {
- const card = createAlbumCard(suggestion.album, suggestion.confidence);
- container.appendChild(card);
- });
-}
-
-function createArtistCard(artist, confidence) {
- const card = document.createElement('div');
- card.className = 'suggestion-card';
- card.onclick = () => selectArtist(artist);
-
- const imageUrl = artist.image_url || '';
- const confidencePercent = Math.round(confidence * 100);
-
- // Add data attribute for lazy loading
- card.dataset.artistId = artist.id;
- card.dataset.needsImage = imageUrl ? 'false' : 'true';
-
- card.innerHTML = `
-
- ${trackNumber}
-
-
- ${trackName}
- ${artistsString}
- ${duration}
- ${badge}
-
-
- `;
-
- // Set background image if available
- if (imageUrl) {
- card.style.backgroundImage = `url(${imageUrl})`;
- card.style.backgroundSize = 'cover';
- card.style.backgroundPosition = 'center';
- }
-
- return card;
-}
-
-function createAlbumCard(album, confidence) {
- const card = document.createElement('div');
- card.className = 'suggestion-card';
- card.onclick = () => selectAlbum(album);
-
- const imageUrl = album.image_url || '';
- const confidencePercent = Math.round(confidence * 100);
- const year = album.release_date ? album.release_date.split('-')[0] : '';
-
- card.innerHTML = `
-
- ${escapeHtml(artist.name)}
-
- ${artist.genres && artist.genres.length ? escapeHtml(artist.genres.slice(0, 2).join(', ')) : 'Artist'}
-
- ${confidencePercent}% match
-
-
- `;
-
- // Set background image if available
- if (imageUrl) {
- card.style.backgroundImage = `url(${imageUrl})`;
- card.style.backgroundSize = 'cover';
- card.style.backgroundPosition = 'center';
- }
-
- return card;
-}
-
-function selectArtist(artist) {
- // Clear previous selections
- document.querySelectorAll('#artist-suggestions .suggestion-card').forEach(card => {
- card.classList.remove('selected');
- });
- document.querySelectorAll('#artist-manual-results .suggestion-card').forEach(card => {
- card.classList.remove('selected');
- });
-
- // Mark new selection
- event.currentTarget.classList.add('selected');
-
- // Store selection
- currentMatchingData.selectedArtist = artist;
-
- console.log('🎯 Selected artist:', artist.name);
-
- if (currentMatchingData.isAlbumDownload) {
- // Transition to album selection stage
- transitionToAlbumStage();
- } else {
- // Enable confirm button for single downloads
- document.getElementById('confirm-match-btn').disabled = false;
- }
-}
-
-function selectAlbum(album) {
- // Clear previous selections
- document.querySelectorAll('#album-suggestions .suggestion-card').forEach(card => {
- card.classList.remove('selected');
- });
- document.querySelectorAll('#album-manual-results .suggestion-card').forEach(card => {
- card.classList.remove('selected');
- });
-
- // Mark new selection
- event.currentTarget.classList.add('selected');
-
- // Store selection
- currentMatchingData.selectedAlbum = album;
-
- console.log('🎯 Selected album:', album.name);
-
- // Enable confirm button
- document.getElementById('confirm-match-btn').disabled = false;
-}
-
-function transitionToAlbumStage() {
- // Hide artist stage
- document.getElementById('artist-selection-stage').classList.add('hidden');
-
- // Show album stage
- const albumStage = document.getElementById('album-selection-stage');
- albumStage.classList.remove('hidden');
-
- // Update selected artist name
- document.getElementById('selected-artist-name').textContent = currentMatchingData.selectedArtist.name;
-
- // Update current stage
- currentMatchingData.currentStage = 'album';
-
- // Fetch album suggestions
- fetchAlbumSuggestions();
-}
-
-function handleArtistSearch(event) {
- const query = event.target.value.trim();
-
- // Clear previous timer
- if (searchTimers.artist) {
- clearTimeout(searchTimers.artist);
- }
-
- if (query.length < 2) {
- document.getElementById('artist-manual-results').innerHTML = '';
- return;
- }
-
- // Debounce search
- searchTimers.artist = setTimeout(() => {
- performArtistSearch(query);
- }, 400);
-}
-
-function handleAlbumSearch(event) {
- const query = event.target.value.trim();
-
- // Clear previous timer
- if (searchTimers.album) {
- clearTimeout(searchTimers.album);
- }
-
- if (query.length < 2) {
- document.getElementById('album-manual-results').innerHTML = '';
- return;
- }
-
- // Debounce search
- searchTimers.album = setTimeout(() => {
- performAlbumSearch(query);
- }, 400);
-}
-
-async function performArtistSearch(query) {
- try {
- showLoadingCards('artist-manual-results', 'Searching artists...');
-
- const requestBody = {
- query: query,
- context: 'artist'
- };
- console.log('Manual search request:', requestBody);
-
- const response = await fetch('/api/match/search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(requestBody)
- });
-
- const data = await response.json();
- console.log('Manual search response:', data);
- if (data.provider) currentMatchingData.provider = data.provider;
- if (data.results) {
- console.log('Results array:', data.results);
- renderArtistSearchResults(data.results);
- } else {
- showNoResultsMessage('artist-manual-results', 'No artists found');
- }
- } catch (error) {
- console.error('Error searching artists:', error);
- showNoResultsMessage('artist-manual-results', 'Error searching artists');
- }
-}
-
-async function performAlbumSearch(query) {
- if (!currentMatchingData.selectedArtist) return;
-
- try {
- showLoadingCards('album-manual-results', 'Searching albums...');
-
- const response = await fetch('/api/match/search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- query: query,
- context: 'album',
- artist_id: currentMatchingData.selectedArtist.id
- })
- });
-
- const data = await response.json();
- if (data.results) {
- renderAlbumSearchResults(data.results);
- } else {
- showNoResultsMessage('album-manual-results', 'No albums found');
- }
- } catch (error) {
- console.error('Error searching albums:', error);
- showNoResultsMessage('album-manual-results', 'Error searching albums');
- }
-}
-
-function renderArtistSearchResults(results) {
- const container = document.getElementById('artist-manual-results');
- container.innerHTML = '';
-
- results.forEach((result, index) => {
- console.log(`Manual search result ${index}:`, result);
- console.log(` result.artist:`, result.artist);
- console.log(` result.confidence:`, result.confidence);
- try {
- const card = createArtistCard(result.artist, result.confidence);
- console.log(`createArtistCard returned:`, card, typeof card, card instanceof Element);
- if (card && card instanceof Element) {
- container.appendChild(card);
- } else {
- console.error(`Invalid card returned for result ${index}:`, card);
- }
- } catch (error) {
- console.error(`Error calling createArtistCard for result ${index}:`, error);
- }
- });
-
- // Lazy load missing artist images
- console.log('🖼️ Starting lazy load for artist images in matching modal...');
- if (typeof lazyLoadArtistImages === 'function') {
- lazyLoadArtistImages(container);
- } else if (typeof window.lazyLoadArtistImages === 'function') {
- window.lazyLoadArtistImages(container);
- } else {
- console.error('❌ lazyLoadArtistImages function not found!');
- }
-}
-
-function renderAlbumSearchResults(results) {
- const container = document.getElementById('album-manual-results');
- container.innerHTML = '';
-
- results.forEach(result => {
- const card = createAlbumCard(result.album, result.confidence);
- container.appendChild(card);
- });
-}
-
-function showLoadingCards(containerId, message) {
- const container = document.getElementById(containerId);
- container.innerHTML = `${escapeHtml(album.name)}
-
- ${album.album_type ? escapeHtml(album.album_type.charAt(0).toUpperCase() + album.album_type.slice(1)) : 'Album'}${year ? ` • ${year}` : ''}
-
- ${confidencePercent}% match
- ${message}
`;
-}
-
-function showNoResultsMessage(containerId, message) {
- const container = document.getElementById(containerId);
- container.innerHTML = `${message}
`;
-}
-
-function skipMatching() {
- console.log('🎯 Skipping matching, proceeding with normal download');
-
- // Close modal
- closeMatchingModal();
-
- // Start normal download
- if (currentMatchingData.isAlbumDownload) {
- // For albums, we need to download each track
- showToast('⬇️ Starting album download (unmatched)', 'info');
- // This would need to be implemented to download all album tracks
- } else {
- // Single track download
- startDownload(window.currentSearchResults.indexOf(currentMatchingData.searchResult));
- }
-}
-
-function matchSlskdTracksToSpotify(slskdTracks, spotifyTracks) {
- /**
- * Matches Soulseek tracks to Spotify tracks based on filename analysis.
- * Returns enhanced tracks with full Spotify metadata.
- */
- console.log(`🎯 Starting track matching: ${slskdTracks.length} Soulseek tracks vs ${spotifyTracks.length} Spotify tracks`);
-
- const matched = [];
- const unmatched = [];
-
- for (const slskdTrack of slskdTracks) {
- const filename = slskdTrack.filename || slskdTrack.title || '';
- const parsedMeta = parseTrackFilename(filename);
-
- console.log(`🔍 Matching: "${filename}" -> parsed as: "${parsedMeta.title}" (track #${parsedMeta.trackNumber})`);
-
- // Find best matching Spotify track
- let bestMatch = null;
- let bestScore = 0;
-
- for (const spotifyTrack of spotifyTracks) {
- let score = 0;
-
- // Match by track number (highest priority if available)
- if (parsedMeta.trackNumber && spotifyTrack.track_number === parsedMeta.trackNumber) {
- score += 50;
- console.log(` ✓ Track number match: ${parsedMeta.trackNumber} == ${spotifyTrack.track_number} (+50)`);
- }
-
- // Match by title similarity
- const titleScore = calculateStringSimilarity(
- parsedMeta.title.toLowerCase(),
- spotifyTrack.name.toLowerCase()
- );
- score += titleScore * 50; // Max 50 points for perfect title match
-
- console.log(` Spotify track "${spotifyTrack.name}" (${spotifyTrack.track_number}): score ${score.toFixed(2)}`);
-
- if (score > bestScore) {
- bestScore = score;
- bestMatch = spotifyTrack;
- }
- }
-
- // Accept match if score is above threshold (70/100)
- if (bestMatch && bestScore >= 70) {
- console.log(`✅ MATCHED: "${filename}" -> "${bestMatch.name}" (score: ${bestScore.toFixed(2)})`);
- matched.push({
- slskd_track: slskdTrack,
- spotify_track: bestMatch,
- confidence: bestScore / 100
- });
- } else {
- console.log(`❌ NO MATCH: "${filename}" (best score: ${bestScore.toFixed(2)})`);
- unmatched.push(slskdTrack);
- }
- }
-
- console.log(`🎯 Matching complete: ${matched.length} matched, ${unmatched.length} unmatched`);
-
- return {
- matched: matched,
- unmatched: unmatched,
- total: slskdTracks.length
- };
-}
-
-function parseTrackFilename(filename) {
- /**
- * Parse track metadata from filename.
- * Handles common patterns like:
- * - "01 - Title.flac"
- * - "01. Title.flac"
- * - "Artist - Title.flac"
- * - "Title.flac"
- * - YouTube: "video_id||title" (extract title part)
- */
- // YouTube special handling: Extract title from encoded format
- if (filename && filename.includes('||')) {
- const parts = filename.split('||');
- const youtubeTitle = parts[1] || parts[0]; // Use title part, fallback to video_id
- // Remove common YouTube suffixes
- const cleanTitle = youtubeTitle
- .replace(/\s*\[.*?\]\s*/g, '') // Remove [Official Video], [Lyrics], etc.
- .replace(/\s*\(.*?\)\s*/g, '') // Remove (Official), (Audio), etc.
- .trim();
- return { title: cleanTitle, trackNumber: null };
- }
-
- // Remove file extension and path
- let basename = filename.split('/').pop().split('\\').pop();
- basename = basename.replace(/\.(flac|mp3|m4a|ogg|wav)$/i, '');
-
- let trackNumber = null;
- let title = basename;
-
- // Pattern 1: "01 - Title" or "01. Title"
- const pattern1 = /^(\d{1,2})\s*[-\.]\s*(.+)$/;
- const match1 = basename.match(pattern1);
- if (match1) {
- trackNumber = parseInt(match1[1]);
- title = match1[2].trim();
- return { title, trackNumber };
- }
-
- // Pattern 2: "Artist - Title" (extract title only)
- const pattern2 = /^.+?\s*[-–]\s*(.+)$/;
- const match2 = basename.match(pattern2);
- if (match2) {
- title = match2[1].trim();
- return { title, trackNumber };
- }
-
- // Fallback: use whole basename as title
- return { title: basename.trim(), trackNumber };
-}
-
-function calculateStringSimilarity(str1, str2) {
- /**
- * Calculate similarity between two strings (0-1 range).
- * Uses Levenshtein distance for fuzzy matching.
- */
- // Normalize strings
- str1 = str1.trim().toLowerCase();
- str2 = str2.trim().toLowerCase();
-
- if (str1 === str2) return 1.0;
-
- // Simple contains check
- if (str1.includes(str2) || str2.includes(str1)) {
- return 0.9;
- }
-
- // Levenshtein distance calculation
- const matrix = [];
- const len1 = str1.length;
- const len2 = str2.length;
-
- for (let i = 0; i <= len1; i++) {
- matrix[i] = [i];
- }
-
- for (let j = 0; j <= len2; j++) {
- matrix[0][j] = j;
- }
-
- for (let i = 1; i <= len1; i++) {
- for (let j = 1; j <= len2; j++) {
- const cost = str1[i - 1] === str2[j - 1] ? 0 : 1;
- matrix[i][j] = Math.min(
- matrix[i - 1][j] + 1, // deletion
- matrix[i][j - 1] + 1, // insertion
- matrix[i - 1][j - 1] + cost // substitution
- );
- }
- }
-
- const maxLen = Math.max(len1, len2);
- const distance = matrix[len1][len2];
- const similarity = 1 - (distance / maxLen);
-
- return Math.max(0, similarity);
-}
-
-async function confirmMatch() {
- if (!currentMatchingData.selectedArtist) {
- showToast('⚠️ Please select an artist first', 'error');
- return;
- }
-
- if (currentMatchingData.isAlbumDownload && !currentMatchingData.selectedAlbum) {
- showToast('⚠️ Please select an album first', 'error');
- return;
- }
-
- const confirmBtn = document.getElementById('confirm-match-btn');
- const originalText = confirmBtn.textContent;
-
- try {
- console.log('🎯 Confirming match with:', {
- artist: currentMatchingData.selectedArtist.name,
- album: currentMatchingData.selectedAlbum?.name
- });
-
- confirmBtn.disabled = true;
- confirmBtn.textContent = 'Starting...';
-
- // Determine the correct data to send
- const downloadPayload = currentMatchingData.isAlbumDownload
- ? currentMatchingData.albumResult
- : currentMatchingData.searchResult;
-
- // --- NEW: For album downloads, fetch Spotify tracklist and match tracks ---
- if (currentMatchingData.isAlbumDownload && currentMatchingData.selectedAlbum) {
- confirmBtn.textContent = 'Matching tracks...';
- console.log('🎵 Fetching Spotify tracklist for album:', currentMatchingData.selectedAlbum.name);
-
- try {
- // Fetch album tracks (pass name/artist for Hydrabase support)
- const artistId = currentMatchingData.selectedArtist.id;
- const albumId = currentMatchingData.selectedAlbum.id;
- const _aat3 = new URLSearchParams({ name: currentMatchingData.selectedAlbum.name || '', artist: currentMatchingData.selectedArtist.name || '' });
- const tracksResponse = await fetch(`/api/album/${albumId}/tracks?${_aat3}`);
-
- if (!tracksResponse.ok) {
- throw new Error(`Failed to fetch Spotify tracks: ${tracksResponse.status}`);
- }
-
- const tracksData = await tracksResponse.json();
- const spotifyTracks = tracksData.tracks || [];
-
- console.log(`✅ Fetched ${spotifyTracks.length} Spotify tracks for matching`);
-
- // Match each Soulseek track to a Spotify track
- const enhancedTracks = matchSlskdTracksToSpotify(
- downloadPayload.tracks || [],
- spotifyTracks
- );
-
- console.log(`🎯 Matched ${enhancedTracks.matched.length}/${enhancedTracks.total} tracks to Spotify`);
-
- // Send enhanced data with full Spotify track objects
- confirmBtn.textContent = 'Downloading...';
- const response = await fetch('/api/download/matched', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- search_result: downloadPayload,
- spotify_artist: currentMatchingData.selectedArtist,
- spotify_album: currentMatchingData.selectedAlbum,
- enhanced_tracks: enhancedTracks.matched, // Send matched tracks with full Spotify data
- unmatched_tracks: enhancedTracks.unmatched // Send unmatched tracks for basic processing
- })
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast(`🎯 Matched ${enhancedTracks.matched.length} tracks to Spotify`, 'success');
- closeMatchingModal();
- } else {
- throw new Error(data.error || 'Failed to start matched download');
- }
-
- } catch (trackMatchError) {
- console.error('❌ Track matching failed, falling back to simple matching:', trackMatchError);
- showToast('⚠️ Track matching failed, using basic matching', 'warning');
-
- // Fallback to simple matching (current behavior)
- const response = await fetch('/api/download/matched', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- search_result: downloadPayload,
- spotify_artist: currentMatchingData.selectedArtist,
- spotify_album: currentMatchingData.selectedAlbum || null
- })
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast(`🎯 Matched download started for "${currentMatchingData.selectedArtist.name}"`, 'success');
- closeMatchingModal();
- } else {
- throw new Error(data.error || 'Failed to start matched download');
- }
- }
- } else {
- // Single track download - fetch Spotify track for full metadata
- confirmBtn.textContent = 'Searching Spotify...';
-
- try {
- // Parse track name from Soulseek filename
- const filename = downloadPayload.filename || downloadPayload.title || '';
- const parsedMeta = parseTrackFilename(filename);
-
- console.log(`🔍 Searching Spotify for: "${parsedMeta.title}" by ${currentMatchingData.selectedArtist.name}`);
-
- // Search Spotify for this track
- const searchQuery = `track:${parsedMeta.title} artist:${currentMatchingData.selectedArtist.name}`;
- const searchResponse = await fetch(`/api/spotify/search?q=${encodeURIComponent(searchQuery)}&type=track&limit=5`);
-
- if (!searchResponse.ok) {
- throw new Error('Failed to search Spotify for track');
- }
-
- const searchData = await searchResponse.json();
- const spotifyTracks = searchData.tracks?.items || [];
-
- if (spotifyTracks.length === 0) {
- throw new Error('No Spotify tracks found for this search');
- }
-
- // Find best match (prefer exact artist match)
- let bestMatch = spotifyTracks.find(track =>
- track.artists.some(artist => artist.id === currentMatchingData.selectedArtist.id)
- ) || spotifyTracks[0];
-
- console.log(`✅ Found Spotify track: "${bestMatch.name}" (${bestMatch.id})`);
-
- // Get full track details with album info
- const trackResponse = await fetch(`/api/spotify/track/${bestMatch.id}`);
- if (!trackResponse.ok) {
- throw new Error('Failed to fetch Spotify track details');
- }
-
- const fullTrack = await trackResponse.json();
-
- // Send with full Spotify metadata (single track enhanced)
- confirmBtn.textContent = 'Downloading...';
- const response = await fetch('/api/download/matched', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- search_result: downloadPayload,
- spotify_artist: currentMatchingData.selectedArtist,
- spotify_album: null, // Singles don't have album context
- spotify_track: fullTrack, // Full Spotify track object
- is_single_track: true // Flag for single track processing
- })
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast(`🎯 Matched single: "${fullTrack.name}"`, 'success');
- closeMatchingModal();
- } else {
- throw new Error(data.error || 'Failed to start matched download');
- }
-
- } catch (singleMatchError) {
- console.error('❌ Spotify track matching failed, falling back to basic:', singleMatchError);
- showToast('⚠️ Spotify matching failed, using basic metadata', 'warning');
-
- // Fallback to basic matching (current behavior)
- const response = await fetch('/api/download/matched', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- search_result: downloadPayload,
- spotify_artist: currentMatchingData.selectedArtist,
- spotify_album: currentMatchingData.selectedAlbum || null
- })
- });
-
- const data = await response.json();
-
- if (data.success) {
- showToast(`🎯 Matched download started for "${currentMatchingData.selectedArtist.name}"`, 'success');
- closeMatchingModal();
- } else {
- throw new Error(data.error || 'Failed to start matched download');
- }
- }
- }
-
- } catch (error) {
- console.error('Error starting matched download:', error);
- showToast(`❌ Error starting matched download: ${error.message}`, 'error');
-
- // Re-enable confirm button on failure
- confirmBtn.disabled = false;
- confirmBtn.textContent = originalText;
- }
-}
-
-
-
-
-function matchedDownloadTrack(trackIndex) {
- const results = window.currentSearchResults;
- if (!results || !results[trackIndex]) {
- console.error('Could not find track for matched download:', trackIndex);
- showToast('Error preparing matched download.', 'error');
- return;
- }
- const trackData = results[trackIndex];
- // It's a single track, so isAlbumDownload is false and there's no album context.
- openMatchingModal(trackData, false, null);
-}
-
-function matchedDownloadAlbum(albumIndex) {
- const results = window.currentSearchResults;
- if (!results || !results[albumIndex]) {
- console.error('Could not find album for matched download:', albumIndex);
- showToast('Error preparing matched download.', 'error');
- return;
- }
- const albumData = results[albumIndex];
- // The first track is used as a reference for the initial artist search.
- const firstTrack = albumData.tracks ? albumData.tracks[0] : albumData;
- openMatchingModal(firstTrack, true, albumData);
-}
-
-function matchedDownloadAlbumTrack(albumIndex, trackIndex) {
- const results = window.currentSearchResults;
- if (!results || !results[albumIndex] || !results[albumIndex].tracks || !results[albumIndex].tracks[trackIndex]) {
- console.error('Could not find album track for matched download:', albumIndex, trackIndex);
- showToast('Error preparing matched download.', 'error');
- return;
- }
- const albumData = results[albumIndex];
- const trackData = albumData.tracks[trackIndex];
-
- // This is the definitive fix.
- // The second argument MUST be 'false' to treat this as a single track download,
- // which prevents the modal from asking for an album selection.
- openMatchingModal(trackData, false, albumData);
-}
-
-// ===========================================
-// == DASHBOARD DATABASE UPDATER FUNCTIONALITY ==
-// ===========================================
-
-// --- State and Polling Management ---
-
-function stopDbStatsPolling() {
- if (dbStatsInterval) {
- clearInterval(dbStatsInterval);
- dbStatsInterval = null;
- }
-}
-
-function stopDbUpdatePolling() {
- if (dbUpdateStatusInterval) {
- console.log('⏹️ Stopping database update polling');
- clearInterval(dbUpdateStatusInterval);
- dbUpdateStatusInterval = null;
- }
-}
-
-// ===================================================================
-// QUALITY SCANNER TOOL
-// ===================================================================
-
-async function handleQualityScanButtonClick() {
- const button = document.getElementById('quality-scan-button');
- const currentAction = button.textContent;
-
- if (currentAction === 'Scan Library') {
- const scopeSelect = document.getElementById('quality-scan-scope');
- const scope = scopeSelect.value;
-
- try {
- button.disabled = true;
- button.textContent = 'Starting...';
- const response = await fetch('/api/quality-scanner/start', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ scope: scope })
- });
-
- if (response.ok) {
- showToast('Quality scan started!', 'success');
- // Start polling immediately to get live status
- checkAndUpdateQualityScanProgress();
- } else {
- const errorData = await response.json();
- showToast(`Error: ${errorData.error}`, 'error');
- button.disabled = false;
- button.textContent = 'Scan Library';
- }
- } catch (error) {
- showToast('Failed to start quality scan.', 'error');
- button.disabled = false;
- button.textContent = 'Scan Library';
- }
-
- } else { // "Stop Scan"
- try {
- const response = await fetch('/api/quality-scanner/stop', { method: 'POST' });
- if (response.ok) {
- showToast('Stop request sent.', 'info');
- } else {
- showToast('Failed to send stop request.', 'error');
- }
- } catch (error) {
- showToast('Error sending stop request.', 'error');
- }
- }
-}
-
-async function checkAndUpdateQualityScanProgress() {
- if (socketConnected) return; // WebSocket handles this
- try {
- const response = await fetch('/api/quality-scanner/status', {
- signal: AbortSignal.timeout(10000) // 10 second timeout
- });
- if (!response.ok) return;
-
- const state = await response.json();
- console.debug('🔍 Quality Scanner Status:', state.status, `${state.processed}/${state.total}`, `${state.progress.toFixed(1)}%`);
- updateQualityScanProgressUI(state);
-
- // Start polling only if not already polling and status is running
- if (state.status === 'running' && !qualityScannerStatusInterval) {
- console.log('🔄 Starting quality scanner polling (1 second interval)');
- qualityScannerStatusInterval = setInterval(checkAndUpdateQualityScanProgress, 1000);
- }
-
- } catch (error) {
- console.warn('Could not fetch quality scanner status:', error);
- // Don't stop polling on network errors - keep trying
- }
-}
-
-function updateQualityScanProgressFromData(data) {
- const prev = _lastToolStatus['quality-scanner'];
- _lastToolStatus['quality-scanner'] = data.status;
- if (prev !== undefined && data.status === prev && data.status !== 'running') return;
- updateQualityScanProgressUI(data);
-}
-
-function updateQualityScanProgressUI(state) {
- const button = document.getElementById('quality-scan-button');
- const phaseLabel = document.getElementById('quality-phase-label');
- const progressLabel = document.getElementById('quality-progress-label');
- const progressBar = document.getElementById('quality-progress-bar');
- const scopeSelect = document.getElementById('quality-scan-scope');
-
- // Stats
- const processedStat = document.getElementById('quality-stat-processed');
- const metStat = document.getElementById('quality-stat-met');
- const lowStat = document.getElementById('quality-stat-low');
- const matchedStat = document.getElementById('quality-stat-matched');
-
- if (!button || !phaseLabel || !progressLabel || !progressBar || !scopeSelect) return;
-
- // Update stats
- if (processedStat) processedStat.textContent = state.processed || 0;
- if (metStat) metStat.textContent = state.quality_met || 0;
- if (lowStat) lowStat.textContent = state.low_quality || 0;
- if (matchedStat) matchedStat.textContent = state.matched || 0;
-
- if (state.status === 'running') {
- button.textContent = 'Stop Scan';
- button.disabled = false;
- scopeSelect.disabled = true;
-
- phaseLabel.textContent = state.phase || 'Scanning...';
- progressLabel.textContent = `${state.processed} / ${state.total} tracks scanned (${state.progress.toFixed(1)}%)`;
- progressBar.style.width = `${state.progress}%`;
- } else { // idle, finished, or error
- stopQualityScannerPolling();
- button.textContent = 'Scan Library';
- button.disabled = false;
- scopeSelect.disabled = false;
-
- if (state.status === 'error') {
- phaseLabel.textContent = `Error: ${state.error_message}`;
- progressBar.style.backgroundColor = '#ff4444'; // Red for error
- } else {
- phaseLabel.textContent = state.phase || 'Ready to scan';
- progressBar.style.backgroundColor = 'rgb(var(--accent-rgb))'; // Green for normal
- }
-
- if (state.status === 'finished') {
- // Show completion toast with results
- showToast(`Scan complete! ${state.matched} tracks added to wishlist`, 'success');
- }
- }
-}
-
-function stopQualityScannerPolling() {
- if (qualityScannerStatusInterval) {
- console.log('⏹️ Stopping quality scanner polling');
- clearInterval(qualityScannerStatusInterval);
- qualityScannerStatusInterval = null;
- }
-}
-
-// ============================================
-// == DUPLICATE CLEANER FUNCTIONS ==
-// ============================================
-
-async function handleDuplicateCleanButtonClick() {
- const button = document.getElementById('duplicate-clean-button');
- const currentAction = button.textContent;
-
- if (currentAction === 'Clean Duplicates') {
- try {
- button.disabled = true;
- button.textContent = 'Starting...';
- const response = await fetch('/api/duplicate-cleaner/start', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' }
- });
-
- if (response.ok) {
- showToast('Duplicate cleaner started!', 'success');
- // Start polling immediately to get live status
- checkAndUpdateDuplicateCleanProgress();
- } else {
- const errorData = await response.json();
- showToast(`Error: ${errorData.error}`, 'error');
- button.disabled = false;
- button.textContent = 'Clean Duplicates';
- }
- } catch (error) {
- showToast('Failed to start duplicate cleaner.', 'error');
- button.disabled = false;
- button.textContent = 'Clean Duplicates';
- }
-
- } else { // "Stop Cleaning"
- try {
- const response = await fetch('/api/duplicate-cleaner/stop', { method: 'POST' });
- if (response.ok) {
- showToast('Stop request sent.', 'info');
- } else {
- showToast('Failed to send stop request.', 'error');
- }
- } catch (error) {
- showToast('Error sending stop request.', 'error');
- }
- }
-}
-
-async function checkAndUpdateDuplicateCleanProgress() {
- if (socketConnected) return; // WebSocket handles this
- try {
- const response = await fetch('/api/duplicate-cleaner/status', {
- signal: AbortSignal.timeout(10000) // 10 second timeout
- });
- if (!response.ok) return;
-
- const state = await response.json();
- console.debug('🧹 Duplicate Cleaner Status:', state.status, `${state.files_scanned}/${state.total_files}`, `${state.progress.toFixed(1)}%`);
- updateDuplicateCleanProgressUI(state);
-
- // Start polling only if not already polling and status is running
- if (state.status === 'running' && !duplicateCleanerStatusInterval) {
- console.log('🔄 Starting duplicate cleaner polling (1 second interval)');
- duplicateCleanerStatusInterval = setInterval(checkAndUpdateDuplicateCleanProgress, 1000);
- }
-
- } catch (error) {
- console.warn('Could not fetch duplicate cleaner status:', error);
- // Don't stop polling on network errors - keep trying
- }
-}
-
-function updateDuplicateCleanProgressFromData(data) {
- const prev = _lastToolStatus['duplicate-cleaner'];
- _lastToolStatus['duplicate-cleaner'] = data.status;
- if (prev !== undefined && data.status === prev && data.status !== 'running') return;
- updateDuplicateCleanProgressUI(data);
-}
-
-function updateDuplicateCleanProgressUI(state) {
- const button = document.getElementById('duplicate-clean-button');
- const phaseLabel = document.getElementById('duplicate-phase-label');
- const progressLabel = document.getElementById('duplicate-progress-label');
- const progressBar = document.getElementById('duplicate-progress-bar');
-
- // Stats
- const scannedStat = document.getElementById('duplicate-stat-scanned');
- const foundStat = document.getElementById('duplicate-stat-found');
- const deletedStat = document.getElementById('duplicate-stat-deleted');
- const spaceStat = document.getElementById('duplicate-stat-space');
-
- if (!button || !phaseLabel || !progressLabel || !progressBar) return;
-
- // Update stats
- if (scannedStat) scannedStat.textContent = state.files_scanned || 0;
- if (foundStat) foundStat.textContent = state.duplicates_found || 0;
- if (deletedStat) deletedStat.textContent = state.deleted || 0;
- if (spaceStat) {
- const spaceMB = state.space_freed_mb || 0;
- if (spaceMB >= 1024) {
- spaceStat.textContent = `${(spaceMB / 1024).toFixed(2)} GB`;
- } else {
- spaceStat.textContent = `${spaceMB.toFixed(2)} MB`;
- }
- }
-
- if (state.status === 'running') {
- button.textContent = 'Stop Cleaning';
- button.disabled = false;
-
- phaseLabel.textContent = state.phase || 'Scanning...';
- progressLabel.textContent = `${state.files_scanned} / ${state.total_files} files scanned (${state.progress.toFixed(1)}%)`;
- progressBar.style.width = `${state.progress}%`;
- } else { // idle, finished, or error
- stopDuplicateCleanerPolling();
- button.textContent = 'Clean Duplicates';
- button.disabled = false;
-
- if (state.status === 'error') {
- phaseLabel.textContent = `Error: ${state.error_message}`;
- progressBar.style.backgroundColor = '#ff4444'; // Red for error
- } else {
- phaseLabel.textContent = state.phase || 'Ready to scan';
- progressBar.style.backgroundColor = 'rgb(var(--accent-rgb))'; // Green for normal
- }
-
- if (state.status === 'finished') {
- // Show completion toast with results
- const spaceMB = state.space_freed_mb || 0;
- const spaceDisplay = spaceMB >= 1024 ? `${(spaceMB / 1024).toFixed(2)} GB` : `${spaceMB.toFixed(1)} MB`;
- showToast(`Cleaning complete! ${state.deleted} files removed, ${spaceDisplay} freed`, 'success');
- }
- }
-}
-
-function stopDuplicateCleanerPolling() {
- if (duplicateCleanerStatusInterval) {
- console.log('⏹️ Stopping duplicate cleaner polling');
- clearInterval(duplicateCleanerStatusInterval);
- duplicateCleanerStatusInterval = null;
- }
-}
-
-// ============================================
-// == BACKUP MANAGER ==
-// ============================================
-
-async function loadBackupList() {
- try {
- const res = await fetch('/api/database/backups');
- const data = await res.json();
- if (data.success) {
- updateBackupManagerUI(data);
- renderBackupList(data.backups);
- }
- } catch (e) {
- console.error('Failed to load backup list:', e);
- }
-}
-
-function updateBackupManagerUI(data) {
- const lastEl = document.getElementById('backup-stat-last');
- const countEl = document.getElementById('backup-stat-count');
- const latestSizeEl = document.getElementById('backup-stat-latest-size');
- const dbSizeEl = document.getElementById('backup-stat-db-size');
-
- if (countEl) countEl.textContent = data.count;
- if (dbSizeEl) dbSizeEl.textContent = data.db_size_mb + ' MB';
-
- if (data.backups && data.backups.length > 0) {
- const newest = data.backups[0];
- if (lastEl) lastEl.textContent = timeAgo(newest.created);
- if (latestSizeEl) latestSizeEl.textContent = newest.size_mb + ' MB';
- } else {
- if (lastEl) lastEl.textContent = 'Never';
- if (latestSizeEl) latestSizeEl.textContent = '—';
- }
-}
-
-function renderBackupList(backups) {
- const container = document.getElementById('backup-list-container');
- if (!container) return;
- if (!backups || backups.length === 0) {
- container.innerHTML = '';
- return;
- }
-
- container.innerHTML = backups.map(b => {
- const date = new Date(b.created + (b.created.includes('Z') ? '' : 'Z'));
- const dateStr = date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
- + ' ' + date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
- const safeName = escapeForInlineJs(b.filename);
- const versionBadge = b.version ? `v${escapeHtml(b.version)}` : '';
- return `
-
`;
- }).join('');
-}
-
-async function handleBackupNowClick() {
- const button = document.getElementById('backup-now-button');
- if (!button) return;
- const origText = button.textContent;
- button.disabled = true;
- button.textContent = 'Backing up...';
- try {
- const res = await fetch('/api/database/backup', { method: 'POST' });
- const data = await res.json();
- if (data.success) {
- showToast(`Database backed up (${data.size_mb} MB)`, 'success');
- await loadBackupList();
- } else {
- showToast(`Backup failed: ${data.error}`, 'error');
- }
- } catch (e) {
- showToast('Backup request failed', 'error');
- }
- button.disabled = false;
- button.textContent = origText;
-}
-
-function downloadBackup(filename) {
- const a = document.createElement('a');
- a.href = `/api/database/backups/${encodeURIComponent(filename)}/download`;
- a.download = filename;
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
-}
-
-async function restoreBackup(filename, force = false) {
- if (!force) {
- if (!await showConfirmDialog({ title: 'Restore Backup', message: `Restore database from "${filename}"?\n\nA safety backup of the current database will be created first.`, confirmText: 'Restore' })) return;
- }
- try {
- const fetchOpts = { method: 'POST' };
- if (force) {
- fetchOpts.headers = { 'Content-Type': 'application/json' };
- fetchOpts.body = JSON.stringify({ force: true });
- }
- const res = await fetch(`/api/database/backups/${encodeURIComponent(filename)}/restore`, fetchOpts);
- const data = await res.json();
- if (data.success) {
- let msg = `Database restored from ${data.restored_from} (${data.artist_count} artists). Safety backup: ${data.safety_backup}`;
- if (data.version_warning) msg += `\n⚠️ ${data.version_warning}`;
- showToast(msg, 'success');
- await loadBackupList();
- } else if (data.version_mismatch) {
- // Version mismatch — ask user to confirm
- const confirmed = await showConfirmDialog({
- title: 'Version Mismatch',
- message: `This backup was created on SoulSync v${data.backup_version}, but you're running v${data.current_version}.\n\nRestoring an older backup may cause issues if the database schema has changed. A safety backup will be created first.\n\nProceed anyway?`,
- confirmText: 'Restore Anyway',
- destructive: true
- });
- if (confirmed) {
- await restoreBackup(filename, true);
- }
- } else {
- showToast(`Restore failed: ${data.error}`, 'error');
- }
- } catch (e) {
- showToast('Restore request failed', 'error');
- }
-}
-
-async function deleteBackup(filename) {
- if (!await showConfirmDialog({ title: 'Delete Backup', message: `Delete backup "${filename}"? This cannot be undone.`, confirmText: 'Delete', destructive: true })) return;
- try {
- const res = await fetch(`/api/database/backups/${encodeURIComponent(filename)}`, { method: 'DELETE' });
- const data = await res.json();
- if (data.success) {
- showToast(`Backup deleted: ${data.deleted}`, 'success');
- await loadBackupList();
- } else {
- showToast(`Delete failed: ${data.error}`, 'error');
- }
- } catch (e) {
- showToast('Delete request failed', 'error');
- }
-}
-
-// ============================================
-// == METADATA CACHE ==
-// ============================================
-
-async function loadMetadataCacheStats() {
- try {
- const response = await fetch('/api/metadata-cache/stats');
- if (!response.ok) return;
- const stats = await response.json();
-
- const artistsEl = document.getElementById('mcache-stat-artists');
- const albumsEl = document.getElementById('mcache-stat-albums');
- const tracksEl = document.getElementById('mcache-stat-tracks');
- const hitsEl = document.getElementById('mcache-stat-hits');
-
- if (artistsEl) artistsEl.textContent = (stats.artists?.spotify || 0) + (stats.artists?.itunes || 0) + (stats.artists?.deezer || 0) + (stats.artists?.beatport || 0);
- if (albumsEl) albumsEl.textContent = (stats.albums?.spotify || 0) + (stats.albums?.itunes || 0) + (stats.albums?.deezer || 0) + (stats.albums?.beatport || 0);
- if (tracksEl) tracksEl.textContent = (stats.tracks?.spotify || 0) + (stats.tracks?.itunes || 0) + (stats.tracks?.deezer || 0) + (stats.tracks?.beatport || 0);
- if (hitsEl) hitsEl.textContent = stats.total_hits || 0;
- } catch (e) {
- // Silently fail — cache may not be initialized yet
- }
-}
-
-// ── Library History Modal ────────────────────────────────────────────
-let _libraryHistoryState = { tab: 'download', page: 1, limit: 50 };
-
-function openLibraryHistoryModal() {
- const overlay = document.getElementById('library-history-overlay');
- if (overlay) {
- overlay.classList.remove('hidden');
- _libraryHistoryState.page = 1;
- loadLibraryHistory();
- }
-}
-
-function closeLibraryHistoryModal() {
- const overlay = document.getElementById('library-history-overlay');
- if (overlay) overlay.classList.add('hidden');
-}
-
-function switchHistoryTab(tab) {
- _libraryHistoryState.tab = tab;
- _libraryHistoryState.page = 1;
- document.querySelectorAll('.library-history-tab').forEach(t => {
- t.classList.toggle('active', t.dataset.tab === tab);
- });
- loadLibraryHistory();
-}
-
-async function loadLibraryHistory() {
- const { tab, page, limit } = _libraryHistoryState;
- const list = document.getElementById('library-history-list');
- const pagination = document.getElementById('library-history-pagination');
- if (!list) return;
- list.innerHTML = '
- ${escapeHtml(dateStr)}
- ${b.size_mb} MB
- ${versionBadge}
-
-
-
-
-
-
- Loading...
';
- if (pagination) pagination.innerHTML = '';
-
- try {
- const resp = await fetch(`/api/library/history?type=${tab}&page=${page}&limit=${limit}`);
- const data = await resp.json();
-
- // Update tab counts
- const dlCount = document.getElementById('history-download-count');
- const imCount = document.getElementById('history-import-count');
- if (dlCount) dlCount.textContent = data.stats?.downloads || 0;
- if (imCount) imCount.textContent = data.stats?.imports || 0;
-
- // Source breakdown bar (downloads tab only)
- const sourceBar = document.getElementById('history-source-bar');
- if (sourceBar) {
- const sc = data.stats?.source_counts || {};
- const srcEntries = Object.entries(sc).sort((a, b) => b[1] - a[1]);
- if (srcEntries.length > 0 && tab === 'download') {
- const _srcColors = { Soulseek: '#4caf50', Tidal: '#000', YouTube: '#ff0000', Qobuz: '#4285f4', HiFi: '#00bcd4', Deezer: '#a238ff' };
- sourceBar.innerHTML = srcEntries.map(([src, cnt]) =>
- `${src}: ${cnt}`
- ).join('');
- sourceBar.style.display = '';
- } else {
- sourceBar.style.display = 'none';
- }
- }
-
- if (!data.entries || data.entries.length === 0) {
- const emptyIcon = tab === 'download' ? '📥' : '📚';
- const emptyText = tab === 'download'
- ? 'No downloads recorded yet. Completed downloads will appear here.'
- : 'No server imports recorded yet. New tracks from library scans will appear here.';
- list.innerHTML = `${emptyIcon}
${emptyText}
`;
- return;
- }
-
- list.innerHTML = data.entries.map(renderHistoryEntry).join('');
- renderHistoryPagination(data.total, page, limit);
- } catch (err) {
- console.error('Error loading library history:', err);
- list.innerHTML = '${emptyText}
Error loading history
';
- }
-}
-
-function renderHistoryEntry(entry) {
- // Server import thumb_urls are relative paths (e.g. /library/metadata/...) — use placeholder
- const hasValidThumb = entry.thumb_url && (entry.thumb_url.startsWith('http://') || entry.thumb_url.startsWith('https://'));
- const thumb = hasValidThumb
- ? `${entry.event_type === 'download' ? '📥' : '📚'}
`;
-
- let badge = '';
- if (entry.event_type === 'download') {
- const parts = [];
- if (entry.download_source) parts.push(entry.download_source);
- if (entry.quality) parts.push(entry.quality);
- badge = parts.map(p => `${escapeHtml(p)}`).join('');
- } else if (entry.event_type === 'import' && entry.server_source) {
- const sourceName = { plex: 'Plex', jellyfin: 'Jellyfin', navidrome: 'Navidrome' }[entry.server_source] || entry.server_source;
- badge = `${escapeHtml(sourceName)}`;
- }
-
- // AcoustID badge
- let acoustidBadge = '';
- if (entry.acoustid_result) {
- const _aidColors = { pass: '#4caf50', fail: '#ef5350', skip: '#ff9800', disabled: '#666', error: '#ef5350' };
- const _aidLabels = { pass: 'Verified', fail: 'Failed', skip: 'Skipped', disabled: 'Off', error: 'Error' };
- const color = _aidColors[entry.acoustid_result] || '#666';
- const label = _aidLabels[entry.acoustid_result] || entry.acoustid_result;
- acoustidBadge = `AcoustID: ${label}`;
- }
-
- const meta = [entry.artist_name, entry.album_name].filter(Boolean).join(' — ');
-
- // Source provenance — expected vs downloaded
- let sourceDetail = '';
- if (entry.event_type === 'download') {
- const lines = [];
- // Expected line (what we asked for)
- if (entry.title || entry.artist_name) {
- lines.push(`Expected: ${escapeHtml(entry.title || '?')} by ${escapeHtml(entry.artist_name || '?')}`);
- }
- // Downloaded line (what the source provided)
- const srcTitle = entry.source_track_title || '';
- const srcArtist = entry.source_artist || '';
- if (srcTitle || srcArtist) {
- const isMismatch = (srcTitle && entry.title && srcTitle.toLowerCase() !== entry.title.toLowerCase())
- || (srcArtist && entry.artist_name && srcArtist.toLowerCase() !== entry.artist_name.toLowerCase());
- const mismatchClass = isMismatch ? ' lh-prov-mismatch' : '';
- lines.push(`Downloaded: ${escapeHtml(srcTitle || '?')} by ${escapeHtml(srcArtist || '?')}`);
- }
- // Source file + ID line
- if (entry.source_filename || entry.source_track_id) {
- const fileParts = [];
- if (entry.source_filename) fileParts.push(`File: ${escapeHtml(entry.source_filename)}`);
- if (entry.source_track_id) fileParts.push(`${entry.source_filename ? '' : 'Source '}ID: ${escapeHtml(entry.source_track_id)}`);
- lines.push(fileParts.join(` · `));
- }
- if (lines.length > 0) {
- sourceDetail = `${lines.join('
')}
`;
- }
- }
-
- const hasDetails = sourceDetail || acoustidBadge;
- const expandIndicator = hasDetails ? `` : '';
-
- return ``;
-}
-
-function formatHistoryTime(isoStr) {
- if (!isoStr) return '';
- try {
- // SQLite CURRENT_TIMESTAMP is UTC but lacks timezone marker — append Z
- let normalized = isoStr;
- if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}/.test(normalized) && !normalized.includes('Z') && !normalized.includes('+')) {
- normalized = normalized.replace(' ', 'T') + 'Z';
- }
- const date = new Date(normalized);
- const now = new Date();
- const diffMs = now - date;
- const diffMins = Math.floor(diffMs / 60000);
- if (diffMins < 1) return 'Just now';
- if (diffMins < 60) return `${diffMins}m ago`;
- const diffHours = Math.floor(diffMins / 60);
- if (diffHours < 24) return `${diffHours}h ago`;
- const diffDays = Math.floor(diffHours / 24);
- if (diffDays < 7) return `${diffDays}d ago`;
- return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
- } catch { return ''; }
-}
-
-function renderHistoryPagination(total, page, limit) {
- const pagination = document.getElementById('library-history-pagination');
- if (!pagination) return;
-
- const totalPages = Math.ceil(total / limit);
- if (totalPages <= 1) { pagination.innerHTML = ''; return; }
-
- pagination.innerHTML = `
-
- Page ${page} of ${totalPages}
-
- `;
-}
-
-function changeHistoryPage(newPage) {
- if (newPage < 1) return;
- _libraryHistoryState.page = newPage;
- loadLibraryHistory();
-}
-
-// ── Sync History Modal ──────────────────────────────────────────────
-const _syncHistoryState = { source: null, page: 1, limit: 20 };
-
-function openSyncHistoryModal() {
- const overlay = document.getElementById('sync-history-overlay');
- if (overlay) {
- overlay.classList.remove('hidden');
- _syncHistoryState.page = 1;
- _syncHistoryState.source = null;
- loadSyncHistory();
- }
-}
-
-function closeSyncHistoryModal() {
- const overlay = document.getElementById('sync-history-overlay');
- if (overlay) overlay.classList.add('hidden');
-}
-
-function switchSyncHistoryTab(source) {
- _syncHistoryState.source = source;
- _syncHistoryState.page = 1;
- document.querySelectorAll('.sync-history-tab').forEach(t => {
- t.classList.toggle('active', t.dataset.source === (source || 'all'));
- });
- loadSyncHistory();
-}
-
-async function loadSyncHistory() {
- const { source, page, limit } = _syncHistoryState;
- const list = document.getElementById('sync-history-list');
- const tabsContainer = document.getElementById('sync-history-tabs');
- if (!list) return;
- list.innerHTML = '')}
Loading...
';
-
- try {
- const params = new URLSearchParams({ page, limit });
- if (source) params.set('source', source);
- const resp = await fetch(`/api/sync/history?${params}`);
- const data = await resp.json();
-
- // Build tabs from stats
- if (tabsContainer && data.stats) {
- const totalCount = Object.values(data.stats).reduce((a, b) => a + b, 0);
- const sourceLabels = {
- spotify: 'Spotify', beatport: 'Beatport', youtube: 'YouTube',
- tidal: 'Tidal', deezer: 'Deezer', wishlist: 'Wishlist',
- library: 'Library', discover: 'Discover', listenbrainz: 'ListenBrainz',
- spotify_public: 'Spotify Public', mirrored: 'Mirrored'
- };
- let tabsHtml = ``;
- for (const [src, count] of Object.entries(data.stats).sort((a, b) => b[1] - a[1])) {
- const label = sourceLabels[src] || src;
- const isActive = source === src ? ' active' : '';
- tabsHtml += ``;
- }
- tabsContainer.innerHTML = tabsHtml;
- }
-
- // Filter to only show playlist syncs — not album downloads, wishlist, or redownloads
- const syncEntries = (data.entries || []).filter(e => e.sync_type === 'playlist' || !e.sync_type);
-
- if (syncEntries.length === 0) {
- list.innerHTML = 'No sync history yet. Completed syncs will appear here.
';
- return;
- }
-
- list.innerHTML = syncEntries.map(renderSyncHistoryEntry).join('');
- renderSyncHistoryPagination(data.total, page, limit);
- } catch (err) {
- console.error('Error loading sync history:', err);
- list.innerHTML = 'Error loading sync history
';
- }
-}
-
-function renderSyncHistoryEntry(entry) {
- const thumb = entry.thumb_url
- ? `${_syncSourceIcon(entry.source)}
`;
-
- const sourceBadge = `${escapeHtml(entry.source)}`;
-
- const title = entry.playlist_name || 'Unknown';
- const meta = [entry.artist_name, entry.album_name].filter(Boolean).join(' — ') || entry.sync_type;
-
- // Stats
- let statsHtml = '';
- if (entry.completed_at) {
- const parts = [];
- if (entry.tracks_found > 0) parts.push(`${entry.tracks_found} found`);
- if (entry.tracks_downloaded > 0) parts.push(`${entry.tracks_downloaded} downloaded`);
- if (entry.tracks_failed > 0) parts.push(`${entry.tracks_failed} failed`);
- if (parts.length === 0) parts.push(`${entry.total_tracks} in library`);
- statsHtml = `${parts.join('')}
`;
- } else {
- statsHtml = `In progress
`;
- }
-
- const timeStr = formatHistoryTime(entry.started_at);
-
- return `
-
`;
-}
-
-function _syncSourceIcon(source) {
- const icons = {
- spotify: '🎵', beatport: '🎶', youtube: '▶',
- tidal: '🌊', deezer: '🎧', wishlist: '⭐',
- library: '📚', discover: '🔍', mirrored: '🔗',
- listenbrainz: '🎧', spotify_public: '🎵'
- };
- return icons[source] || '📥';
-}
-
-function renderSyncHistoryPagination(total, page, limit) {
- const pagination = document.getElementById('sync-history-pagination');
- if (!pagination) return;
- const totalPages = Math.ceil(total / limit);
- if (totalPages <= 1) { pagination.innerHTML = ''; return; }
- pagination.innerHTML = `
-
- Page ${page} of ${totalPages}
-
- `;
-}
-
-function changeSyncHistoryPage(newPage) {
- if (newPage < 1) return;
- _syncHistoryState.page = newPage;
- loadSyncHistory();
-}
-
-// Track active re-syncs from history
-let _activeSyncHistoryResyncs = {};
-
-// Sources that do server playlist sync (match to media server) vs download (Soulseek download)
-const _serverSyncSources = new Set(['spotify', 'tidal', 'deezer', 'youtube', 'mirrored', 'listenbrainz', 'spotify_public', 'beatport']);
-const _downloadSyncSources = new Set(['discover', 'library', 'wishlist']);
-
-async function retriggerSync(entryId) {
- try {
- const resp = await fetch(`/api/sync/history/${entryId}`);
- const data = await resp.json();
-
- if (!data.success || !data.entry) {
- showToast('Failed to load sync data', 'error');
- return;
- }
-
- const entry = data.entry;
-
- // Determine if this is a download-type sync or a server-sync-type
- const isDownloadSync = entry.is_album_download || _downloadSyncSources.has(entry.source);
- const isServerSync = _serverSyncSources.has(entry.source) && !entry.is_album_download;
-
- if (isDownloadSync) {
- // Download syncs open the download modal (existing behavior)
- closeSyncHistoryModal();
-
- const virtualPlaylistId = entry.playlist_id || `resync_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
- const albumObj = entry.album_context || {
- id: `resync_album_${entryId}`,
- name: entry.playlist_name,
- album_type: entry.sync_type === 'album' ? 'album' : 'compilation',
- images: entry.thumb_url ? [{ url: entry.thumb_url }] : [],
- total_tracks: entry.total_tracks
- };
- const artistObj = entry.artist_context || { id: 'resync_artist', name: 'Various Artists' };
- const contextType = entry.sync_type === 'album' ? 'artist_album' : 'playlist';
-
- await openDownloadMissingModalForArtistAlbum(
- virtualPlaylistId, entry.playlist_name, entry.tracks,
- albumObj, artistObj, false, contextType
- );
- } else {
- // Server sync — start sync and show live progress in the card
- await _startSyncHistoryResync(entryId, entry);
- }
- } catch (err) {
- console.error('Error re-triggering sync:', err);
- showToast('Error loading sync data', 'error');
- }
-}
-
-async function _startSyncHistoryResync(entryId, entry) {
- // Disable the re-sync button
- const btn = document.getElementById(`resync-btn-${entryId}`);
- if (btn) { btn.disabled = true; btn.textContent = 'Syncing...'; }
-
- // Show the progress area
- const wrapper = document.getElementById(`sync-history-wrapper-${entryId}`);
- const progressArea = document.getElementById(`sync-history-progress-${entryId}`);
- if (wrapper) wrapper.classList.add('syncing');
- if (progressArea) progressArea.style.display = '';
-
- // Build a unique sync playlist ID for this re-sync
- const syncPlaylistId = `resync_${entryId}_${Date.now()}`;
-
- // Prepare tracks for the sync API
- const tracks = (entry.tracks || []).map(t => {
- const artists = Array.isArray(t.artists)
- ? (typeof t.artists[0] === 'object' ? t.artists.map(a => a.name || a) : t.artists)
- : [t.artists || 'Unknown Artist'];
- const albumName = typeof t.album === 'object' ? (t.album?.name || '') : (t.album || '');
- return {
- id: t.id || '',
- name: t.name || '',
- artists: artists,
- album: albumName,
- duration_ms: t.duration_ms || 0,
- popularity: t.popularity || 0
- };
- });
-
- try {
- const response = await fetch('/api/sync/start', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- playlist_id: syncPlaylistId,
- playlist_name: entry.playlist_name,
- tracks: tracks
- })
- });
-
- const result = await response.json();
- if (!result.success) {
- showToast(`Sync failed: ${result.error || 'Unknown error'}`, 'error');
- _cleanupSyncHistoryResync(entryId);
- return;
- }
-
- // Store active re-sync state
- _activeSyncHistoryResyncs[entryId] = { syncPlaylistId, entryId };
-
- // Start polling for progress
- _pollSyncHistoryProgress(entryId, syncPlaylistId);
-
- } catch (err) {
- console.error('Error starting re-sync:', err);
- showToast('Failed to start sync', 'error');
- _cleanupSyncHistoryResync(entryId);
- }
-}
-
-function _pollSyncHistoryProgress(entryId, syncPlaylistId) {
- const pollInterval = setInterval(async () => {
- try {
- const resp = await fetch(`/api/sync/status/${syncPlaylistId}`);
- if (!resp.ok) {
- clearInterval(pollInterval);
- _cleanupSyncHistoryResync(entryId, 'error');
- return;
- }
- const state = await resp.json();
-
- if (state.status === 'syncing' || state.status === 'starting') {
- const progress = state.progress || {};
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
- const total = progress.total_tracks || 0;
- const step = progress.current_step || 'Processing';
- const currentTrack = progress.current_track || '';
- const processed = matched + failed;
- const percent = total > 0 ? Math.round((processed / total) * 100) : 0;
-
- const bar = document.getElementById(`sync-history-bar-${entryId}`);
- const stepEl = document.getElementById(`sync-history-step-${entryId}`);
- const matchedEl = document.getElementById(`sync-history-matched-${entryId}`);
- const failedEl = document.getElementById(`sync-history-failed-${entryId}`);
-
- if (bar) bar.style.width = `${percent}%`;
- if (stepEl) stepEl.textContent = currentTrack ? `${step} — ${currentTrack}` : step;
- if (matchedEl) matchedEl.textContent = `${matched} matched`;
- if (failedEl) failedEl.textContent = `${failed} failed`;
-
- } else if (state.status === 'finished') {
- clearInterval(pollInterval);
- const progress = state.progress || state.result || {};
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
- const total = progress.total_tracks || 0;
- const synced = progress.synced_tracks || 0;
-
- const bar = document.getElementById(`sync-history-bar-${entryId}`);
- const stepEl = document.getElementById(`sync-history-step-${entryId}`);
- const matchedEl = document.getElementById(`sync-history-matched-${entryId}`);
- const failedEl = document.getElementById(`sync-history-failed-${entryId}`);
-
- if (bar) bar.style.width = '100%';
- if (stepEl) stepEl.textContent = `Sync complete — ${matched}/${total} matched, ${synced} synced`;
- if (matchedEl) matchedEl.textContent = `${matched} matched`;
- if (failedEl) failedEl.textContent = `${failed} failed`;
-
- // Hide cancel button
- const cancelBtn = document.getElementById(`sync-history-cancel-${entryId}`);
- if (cancelBtn) cancelBtn.style.display = 'none';
-
- showToast(`Re-sync complete: ${matched}/${total} matched`, 'success');
-
- // Auto-collapse after 5 seconds
- setTimeout(() => _cleanupSyncHistoryResync(entryId, 'finished'), 5000);
-
- } else if (state.status === 'cancelled' || state.status === 'error') {
- clearInterval(pollInterval);
- const stepEl = document.getElementById(`sync-history-step-${entryId}`);
- if (stepEl) stepEl.textContent = state.status === 'cancelled' ? 'Sync cancelled' : `Sync error: ${state.error || 'Unknown'}`;
-
- const cancelBtn = document.getElementById(`sync-history-cancel-${entryId}`);
- if (cancelBtn) cancelBtn.style.display = 'none';
-
- setTimeout(() => _cleanupSyncHistoryResync(entryId, state.status), 3000);
- }
- } catch (err) {
- console.error('Error polling sync status:', err);
- clearInterval(pollInterval);
- _cleanupSyncHistoryResync(entryId, 'error');
- }
- }, 2000);
-
- // Store interval so cancel can clear it
- if (_activeSyncHistoryResyncs[entryId]) {
- _activeSyncHistoryResyncs[entryId].pollInterval = pollInterval;
- }
-}
-
-async function cancelSyncHistoryResync(entryId) {
- const active = _activeSyncHistoryResyncs[entryId];
- if (!active) return;
-
- try {
- await fetch('/api/sync/cancel', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ playlist_id: active.syncPlaylistId })
- });
-
- const stepEl = document.getElementById(`sync-history-step-${entryId}`);
- if (stepEl) stepEl.textContent = 'Cancelling...';
-
- } catch (err) {
- console.error('Error cancelling sync:', err);
- showToast('Failed to cancel sync', 'error');
- }
-}
-
-function _cleanupSyncHistoryResync(entryId, finalStatus) {
- const active = _activeSyncHistoryResyncs[entryId];
- if (active && active.pollInterval) {
- clearInterval(active.pollInterval);
- }
- delete _activeSyncHistoryResyncs[entryId];
-
- const wrapper = document.getElementById(`sync-history-wrapper-${entryId}`);
- const progressArea = document.getElementById(`sync-history-progress-${entryId}`);
- const btn = document.getElementById(`resync-btn-${entryId}`);
-
- if (wrapper) wrapper.classList.remove('syncing');
- if (progressArea) progressArea.style.display = 'none';
- if (btn) { btn.disabled = false; btn.textContent = 'Re-sync'; }
-}
-
-async function deleteSyncHistoryEntry(entryId) {
- try {
- const resp = await fetch(`/api/sync/history/${entryId}`, { method: 'DELETE' });
- const data = await resp.json();
- if (data.success) {
- const wrapper = document.getElementById(`sync-history-wrapper-${entryId}`);
- if (wrapper) {
- wrapper.style.transition = 'opacity 0.2s ease, max-height 0.3s ease';
- wrapper.style.opacity = '0';
- wrapper.style.maxHeight = wrapper.offsetHeight + 'px';
- requestAnimationFrame(() => { wrapper.style.maxHeight = '0'; wrapper.style.overflow = 'hidden'; });
- setTimeout(() => wrapper.remove(), 300);
- }
- } else {
- showToast('Failed to delete entry', 'error');
- }
- } catch (err) {
- console.error('Error deleting sync history entry:', err);
- showToast('Failed to delete entry', 'error');
- }
-}
-
-// ── Sync Playlist to Server (from Download Modal) ──────────────────
-
-// Track active modal syncs
-let _activeModalSyncs = {};
-
-function _isBeatportPlaylistId(id) {
- return id.startsWith('beatport_chart_') || id.startsWith('beatport_top100_') || id.startsWith('beatport_hype100_');
-}
-
-async function syncPlaylistToServer(playlistId) {
- const process = activeDownloadProcesses[playlistId];
- if (!process) { showToast('No playlist data found', 'error'); return; }
-
- // Disable the sync button
- const btn = document.getElementById(`sync-server-btn-${playlistId}`);
- if (btn) { btn.disabled = true; btn.textContent = 'Syncing...'; }
-
- // Show progress area
- const progressArea = document.getElementById(`modal-sync-progress-${playlistId}`);
- if (progressArea) progressArea.style.display = '';
-
- const syncPlaylistId = `beatport_sync_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
- const playlistName = process.playlist?.name || 'Beatport Playlist';
-
- // Format tracks for the sync API
- const tracks = (process.tracks || []).map(t => {
- const artists = Array.isArray(t.artists)
- ? (typeof t.artists[0] === 'object' ? t.artists.map(a => a.name || a) : t.artists)
- : [t.artists || 'Unknown Artist'];
- const albumName = typeof t.album === 'object' ? (t.album?.name || '') : (t.album || '');
- return {
- id: t.id || '',
- name: t.name || '',
- artists: artists,
- album: albumName,
- duration_ms: t.duration_ms || 0,
- popularity: t.popularity || 0
- };
- });
-
- try {
- const response = await fetch('/api/sync/start', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- playlist_id: syncPlaylistId,
- playlist_name: playlistName,
- tracks: tracks
- })
- });
-
- const result = await response.json();
- if (!result.success) {
- showToast(`Sync failed: ${result.error || 'Unknown error'}`, 'error');
- _cleanupModalSync(playlistId);
- return;
- }
-
- _activeModalSyncs[playlistId] = { syncPlaylistId };
- _pollModalSyncProgress(playlistId, syncPlaylistId);
-
- } catch (err) {
- console.error('Error starting playlist sync:', err);
- showToast('Failed to start sync', 'error');
- _cleanupModalSync(playlistId);
- }
-}
-
-function _pollModalSyncProgress(playlistId, syncPlaylistId) {
- const pollInterval = setInterval(async () => {
- try {
- const resp = await fetch(`/api/sync/status/${syncPlaylistId}`);
- if (!resp.ok) { clearInterval(pollInterval); _cleanupModalSync(playlistId, 'error'); return; }
- const state = await resp.json();
-
- const bar = document.getElementById(`modal-sync-bar-${playlistId}`);
- const stepEl = document.getElementById(`modal-sync-step-${playlistId}`);
- const matchedEl = document.getElementById(`modal-sync-matched-${playlistId}`);
- const failedEl = document.getElementById(`modal-sync-failed-${playlistId}`);
-
- if (state.status === 'syncing' || state.status === 'starting') {
- const p = state.progress || {};
- const matched = p.matched_tracks || 0;
- const failed = p.failed_tracks || 0;
- const total = p.total_tracks || 0;
- const step = p.current_step || 'Processing';
- const currentTrack = p.current_track || '';
- const processed = matched + failed;
- const percent = total > 0 ? Math.round((processed / total) * 100) : 0;
-
- if (bar) bar.style.width = `${percent}%`;
- if (stepEl) stepEl.textContent = currentTrack ? `${step} — ${currentTrack}` : step;
- if (matchedEl) matchedEl.textContent = `${matched} matched`;
- if (failedEl) failedEl.textContent = `${failed} failed`;
-
- } else if (state.status === 'finished') {
- clearInterval(pollInterval);
- const p = state.progress || state.result || {};
- const matched = p.matched_tracks || 0;
- const failed = p.failed_tracks || 0;
- const total = p.total_tracks || 0;
- const synced = p.synced_tracks || 0;
-
- if (bar) bar.style.width = '100%';
- if (stepEl) stepEl.textContent = `Sync complete — ${matched}/${total} matched, ${synced} synced`;
- if (matchedEl) matchedEl.textContent = `${matched} matched`;
- if (failedEl) failedEl.textContent = `${failed} failed`;
-
- const cancelBtn = document.getElementById(`modal-sync-cancel-${playlistId}`);
- if (cancelBtn) cancelBtn.style.display = 'none';
-
- showToast(`Server sync complete: ${matched}/${total} matched`, 'success');
-
- // Re-enable sync button after a delay
- setTimeout(() => _cleanupModalSync(playlistId, 'finished'), 5000);
-
- } else if (state.status === 'cancelled' || state.status === 'error') {
- clearInterval(pollInterval);
- if (stepEl) stepEl.textContent = state.status === 'cancelled' ? 'Sync cancelled' : `Sync error`;
- const cancelBtn = document.getElementById(`modal-sync-cancel-${playlistId}`);
- if (cancelBtn) cancelBtn.style.display = 'none';
- setTimeout(() => _cleanupModalSync(playlistId, state.status), 3000);
- }
- } catch (err) {
- console.error('Error polling modal sync status:', err);
- clearInterval(pollInterval);
- _cleanupModalSync(playlistId, 'error');
- }
- }, 2000);
-
- if (_activeModalSyncs[playlistId]) {
- _activeModalSyncs[playlistId].pollInterval = pollInterval;
- }
-}
-
-async function cancelModalSync(playlistId) {
- const active = _activeModalSyncs[playlistId];
- if (!active) return;
-
- try {
- await fetch('/api/sync/cancel', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ playlist_id: active.syncPlaylistId })
- });
- const stepEl = document.getElementById(`modal-sync-step-${playlistId}`);
- if (stepEl) stepEl.textContent = 'Cancelling...';
- } catch (err) {
- console.error('Error cancelling modal sync:', err);
- }
-}
-
-function _cleanupModalSync(playlistId, finalStatus) {
- const active = _activeModalSyncs[playlistId];
- if (active && active.pollInterval) clearInterval(active.pollInterval);
- delete _activeModalSyncs[playlistId];
-
- const progressArea = document.getElementById(`modal-sync-progress-${playlistId}`);
- const btn = document.getElementById(`sync-server-btn-${playlistId}`);
-
- if (finalStatus === 'finished') {
- // Keep progress visible but hide after fade
- if (progressArea) setTimeout(() => { progressArea.style.display = 'none'; }, 300);
- } else {
- if (progressArea) progressArea.style.display = 'none';
- }
- if (btn) { btn.disabled = false; btn.textContent = 'Sync to Server'; }
-}
-
-// ── Metadata Cache Modal ────────────────────────────────────────────
-let _mcacheCurrentTab = 'artist';
-let _mcachePage = 0;
-let _mcacheSearchTimeout = null;
-// ==================================================================================
-// DOWNLOAD BLACKLIST VIEWER
-// ==================================================================================
-
-async function loadBlacklistCount() {
- try {
- const res = await fetch('/api/library/blacklist');
- const data = await res.json();
- const el = document.getElementById('blacklist-count');
- if (el) el.textContent = data.entries?.length || 0;
- } catch (e) { /* ignore */ }
-}
-
-async function openBlacklistModal() {
- const existing = document.getElementById('blacklist-modal-overlay');
- if (existing) existing.remove();
-
- const overlay = document.createElement('div');
- overlay.id = 'blacklist-modal-overlay';
- overlay.className = 'redownload-overlay';
- overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-
- overlay.innerHTML = `
-
- ${thumb}
-
-
-
-
- ${sourceBadge}
- ${statsHtml}
- ${escapeHtml(title)}
-
- ${timeStr}
-
-
-
-
- `;
-
- document.body.appendChild(overlay);
-
- const escH = e => { if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', escH); } };
- document.addEventListener('keydown', escH);
-
- try {
- const res = await fetch('/api/library/blacklist');
- const data = await res.json();
- const body = document.getElementById('blacklist-modal-body');
-
- if (!data.success || !data.entries || data.entries.length === 0) {
- body.innerHTML = '
-
- Download Blacklist
- -
-
- Loading...
- No blocked sources. Sources can be blacklisted from the Source Info (ℹ) button on tracks in the enhanced library view.
';
- return;
- }
-
- const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer_dl: '💜' };
-
- body.innerHTML = data.entries.map(e => {
- const displayFile = (e.blocked_filename || '').replace(/\\/g, '/').split('/').pop() || 'Unknown';
- const svc = e.blocked_username && ['youtube', 'tidal', 'qobuz', 'hifi', 'deezer_dl'].includes(e.blocked_username) ? e.blocked_username : 'soulseek';
- const icon = serviceIcons[svc] || '🔍';
- const ago = e.created_at ? timeAgo(e.created_at) : '';
- return `
-
-
-
`;
- }).join('');
-
- } catch (e) {
- document.getElementById('blacklist-modal-body').innerHTML = `
-
-
-
- ${_esc(e.track_artist || '')}${e.track_artist && e.track_title ? ' — ' : ''}${_esc(e.track_title || '')}
- ${_esc(displayFile)}
- ${e.blocked_username && svc === 'soulseek' ? `from ${_esc(e.blocked_username)}
` : ''}
- Error: ${e.message}
`;
- }
-}
-
-async function _removeBlacklistEntry(id, btn) {
- if (!await showConfirmDialog({ title: 'Remove from Blacklist', message: 'Allow this source to be used for downloads again?', confirmText: 'Remove' })) return;
- try {
- const res = await fetch(`/api/library/blacklist/${id}`, { method: 'DELETE' });
- const data = await res.json();
- if (data.success) {
- btn.closest('.blacklist-entry').remove();
- showToast('Removed from blacklist', 'success');
- loadBlacklistCount();
- }
- } catch (e) {
- showToast('Error: ' + e.message, 'error');
- }
-}
-
-const MCACHE_PAGE_SIZE = 48;
-
-function openMetadataCacheModal() {
- const modal = document.getElementById('mcache-browse-modal');
- if (modal) {
- modal.style.display = 'flex';
- _mcacheCurrentTab = 'artist';
- _mcachePage = 0;
- // Reset UI
- document.querySelectorAll('.mcache-tab').forEach(t => t.classList.remove('active'));
- document.querySelector('.mcache-tab[data-tab="artist"]')?.classList.add('active');
- const searchInput = document.getElementById('mcache-search');
- if (searchInput) searchInput.value = '';
- const sourceFilter = document.getElementById('mcache-source-filter');
- if (sourceFilter) sourceFilter.value = '';
- const sortFilter = document.getElementById('mcache-sort-filter');
- if (sortFilter) sortFilter.value = 'last_accessed_at';
- loadMetadataCacheBrowseStats();
- loadMetadataCacheBrowse();
- }
-}
-
-function closeMetadataCacheModal() {
- const modal = document.getElementById('mcache-browse-modal');
- if (modal) modal.style.display = 'none';
-}
-
-async function loadMetadataCacheBrowseStats() {
- try {
- const response = await fetch('/api/metadata-cache/stats');
- if (!response.ok) return;
- const stats = await response.json();
-
- const el = (id, val) => {
- const e = document.getElementById(id);
- if (e) e.textContent = val;
- };
-
- const spotifyTotal = (stats.artists?.spotify || 0) + (stats.albums?.spotify || 0) + (stats.tracks?.spotify || 0);
- const itunesTotal = (stats.artists?.itunes || 0) + (stats.albums?.itunes || 0) + (stats.tracks?.itunes || 0);
- const deezerTotal = (stats.artists?.deezer || 0) + (stats.albums?.deezer || 0) + (stats.tracks?.deezer || 0);
- const beatportTotal = (stats.artists?.beatport || 0) + (stats.albums?.beatport || 0) + (stats.tracks?.beatport || 0);
- el('mcache-browse-spotify-count', spotifyTotal);
- el('mcache-browse-itunes-count', itunesTotal);
- el('mcache-browse-deezer-count', deezerTotal);
- el('mcache-browse-beatport-count', beatportTotal);
- const discogsTotal = (stats.artists?.discogs || 0) + (stats.albums?.discogs || 0) + (stats.tracks?.discogs || 0);
- el('mcache-browse-discogs-count', discogsTotal);
- el('mcache-browse-musicbrainz-count', stats.musicbrainz_total || 0);
- el('mcache-browse-hits', stats.total_hits || 0);
- el('mcache-browse-searches', stats.searches || 0);
- } catch (e) { /* ignore */ }
-}
-
-function switchMetadataCacheTab(tab) {
- _mcacheCurrentTab = tab;
- _mcachePage = 0;
- document.querySelectorAll('.mcache-tab').forEach(t => {
- t.classList.toggle('active', t.dataset.tab === tab);
- });
- loadMetadataCacheBrowse();
-}
-
-async function loadMetadataCacheBrowse() {
- const grid = document.getElementById('mcache-grid');
- if (!grid) return;
-
- const source = document.getElementById('mcache-source-filter')?.value || '';
- const search = document.getElementById('mcache-search')?.value || '';
- const sort = document.getElementById('mcache-sort-filter')?.value || 'last_accessed_at';
-
- grid.innerHTML = 'Loading...
-
-
`;
- renderMetadataCachePagination(0, 0);
- return;
- }
-
- renderMetadataCacheGrid(data.items, _mcacheCurrentTab);
- renderMetadataCachePagination(data.total, data.offset);
- } catch (e) {
- grid.innerHTML = 'No cached ${_mcacheCurrentTab}s yet
- As you search and browse music in SoulSync, API responses will be cached here automatically.
- Failed to load cache data.
${(item.name || '?')[0].toUpperCase()}
`;
- }
-
- let subText = '';
- let metaText = '';
-
- if (source === 'musicbrainz') {
- subText = item.artist_name || '';
- metaText = item._mb_matched ? `MBID: ${(item._mb_id || '').substring(0, 8)}…` : 'No match found';
- } else if (entityType === 'artist') {
- const genres = item.genres ? (typeof item.genres === 'string' ? JSON.parse(item.genres || '[]') : item.genres) : [];
- subText = genres.length > 0 ? genres.slice(0, 2).join(', ') : '';
- if (item.popularity) metaText = `Pop: ${item.popularity}`;
- } else if (entityType === 'album') {
- subText = item.artist_name || '';
- const parts = [];
- if (item.release_date) parts.push(item.release_date.substring(0, 4));
- if (item.total_tracks) parts.push(`${item.total_tracks} tracks`);
- if (item.album_type) parts.push(item.album_type);
- metaText = parts.join(' · ');
- } else if (entityType === 'track') {
- subText = item.artist_name || '';
- const parts = [];
- if (item.album_name) parts.push(item.album_name);
- if (item.duration_ms) parts.push(formatDuration(item.duration_ms));
- metaText = parts.join(' · ');
- }
-
- const clickAttr = source === 'musicbrainz' ? '' : `onclick="openMetadataCacheDetail('${source}', '${entityType}', '${encodeURIComponent(item.entity_id)}')"`;
- const mbStatusClass = source === 'musicbrainz' ? (item._mb_matched ? ' mb-matched' : ' mb-failed') : '';
-
- return `
-
-
`;
- }).join('');
-}
-
-function renderMetadataCachePagination(total, offset) {
- const container = document.getElementById('mcache-pagination');
- if (!container) return;
-
- const totalPages = Math.ceil(total / MCACHE_PAGE_SIZE);
- const currentPage = Math.floor(offset / MCACHE_PAGE_SIZE);
-
- if (totalPages <= 1) {
- container.innerHTML = total > 0 ? `${total} result${total !== 1 ? 's' : ''}` : '';
- return;
- }
-
- let html = '';
- html += ``;
-
- const maxVisible = 7;
- let start = Math.max(0, currentPage - Math.floor(maxVisible / 2));
- let end = Math.min(totalPages, start + maxVisible);
- if (end - start < maxVisible) start = Math.max(0, end - maxVisible);
-
- if (start > 0) {
- html += ``;
- if (start > 1) html += `...`;
- }
-
- for (let i = start; i < end; i++) {
- html += ``;
- }
-
- if (end < totalPages) {
- if (end < totalPages - 1) html += `...`;
- html += ``;
- }
-
- html += ``;
- html += `${total} total`;
-
- container.innerHTML = html;
-}
-
-async function openMetadataCacheDetail(source, entityType, entityId) {
- const modal = document.getElementById('mcache-detail-modal');
- const body = document.getElementById('mcache-detail-body');
- const title = document.getElementById('mcache-detail-title');
- if (!modal || !body) return;
-
- modal.style.display = 'flex';
- body.innerHTML = '
- ${imageHtml}
-
-
-
- ${item.name || 'Unknown'}
- ${subText ? `${subText}
` : ''}
- ${metaText ? `` : ''}
-
- ${sourceBadge}
- ${cacheAge} · ${hits}x
-
- Loading...
';
- if (title) title.textContent = 'Loading...';
-
- try {
- const response = await fetch(`/api/metadata-cache/entity/${source}/${entityType}/${entityId}`);
- if (!response.ok) throw new Error('Not found');
- const data = await response.json();
-
- if (title) title.textContent = data.name || 'Unknown';
-
- const isArtist = entityType === 'artist';
- const shapeClass = isArtist ? ' artist' : '';
- let imageHtml = '';
- if (data.image_url) {
- imageHtml = `${(data.name || '?')[0].toUpperCase()}
`;
- }
-
- const sourceBadge = `${source}`;
- const typeBadge = `${entityType}`;
-
- // Build structured fields table
- let fieldsHtml = '| ${label} | ${value} |
Cache Metadata
';
- cacheHtml += '| Cached At | ${new Date(data.created_at).toLocaleString()} |
| Last Accessed | ${new Date(data.last_accessed_at).toLocaleString()} |
| Access Count | ${data.access_count} |
| TTL | ${data.ttl_days} days |
Raw API Response
-
- `;
- }
-
- body.innerHTML = `
-
- ${imageHtml}
-
-
-
- ${data.name || 'Unknown'}
- ${entityType !== 'artist' && data.artist_name ? `${data.artist_name}
` : ''}
-
- ${sourceBadge}
- ${typeBadge}
-
- Details
- ${fieldsHtml}
- ${cacheHtml}
- ${rawJsonHtml}`;
- } catch (e) {
- body.innerHTML = 'Failed to load entity details.
';
- }
-}
-
-function closeMetadataCacheDetail() {
- const modal = document.getElementById('mcache-detail-modal');
- if (modal) modal.style.display = 'none';
-}
-
-function toggleMcacheClearDropdown(event) {
- event.stopPropagation();
- const menu = document.getElementById('mcache-clear-dropdown-menu');
- if (!menu) return;
- const isOpen = menu.style.display === 'block';
- menu.style.display = isOpen ? 'none' : 'block';
- if (!isOpen) {
- const closeHandler = (e) => {
- if (!e.target.closest('#mcache-clear-dropdown')) {
- menu.style.display = 'none';
- document.removeEventListener('click', closeHandler);
- }
- };
- setTimeout(() => document.addEventListener('click', closeHandler), 0);
- }
-}
-
-async function clearMetadataCache() {
- if (!confirm('Clear ALL cached metadata? This removes all cached API responses.')) return;
- document.getElementById('mcache-clear-dropdown-menu').style.display = 'none';
-
- try {
- const response = await fetch('/api/metadata-cache/clear', { method: 'DELETE' });
- const data = await response.json();
- if (data.success) {
- showToast(`Cleared ${data.cleared} cached entries`, 'success');
- loadMetadataCacheBrowseStats();
- loadMetadataCacheBrowse();
- loadMetadataCacheStats();
- } else {
- showToast('Failed to clear cache', 'error');
- }
- } catch (e) {
- showToast('Error clearing cache', 'error');
- }
-}
-
-async function clearMetadataCacheBySource(source) {
- if (!confirm(`Clear all ${source} cached metadata?`)) return;
- document.getElementById('mcache-clear-dropdown-menu').style.display = 'none';
-
- try {
- const response = await fetch(`/api/metadata-cache/clear?source=${source}`, { method: 'DELETE' });
- const data = await response.json();
- if (data.success) {
- showToast(`Cleared ${data.cleared} ${source} cache entries`, 'success');
- loadMetadataCacheBrowseStats();
- loadMetadataCacheBrowse();
- loadMetadataCacheStats();
- } else {
- showToast(`Failed to clear ${source} cache`, 'error');
- }
- } catch (e) {
- showToast(`Error clearing ${source} cache`, 'error');
- }
-}
-
-async function clearMusicBrainzCache(failedOnly = false) {
- const label = failedOnly ? 'failed MusicBrainz lookups' : 'ALL MusicBrainz cache entries';
- if (!confirm(`Clear ${label}?`)) return;
- document.getElementById('mcache-clear-dropdown-menu').style.display = 'none';
-
- try {
- const url = failedOnly ? '/api/metadata-cache/clear-musicbrainz?failed_only=true' : '/api/metadata-cache/clear-musicbrainz';
- const response = await fetch(url, { method: 'DELETE' });
- const data = await response.json();
- if (data.success) {
- showToast(`Cleared ${data.cleared} MusicBrainz cache entries`, 'success');
- loadMetadataCacheBrowseStats();
- loadMetadataCacheBrowse();
- loadMetadataCacheStats();
- } else {
- showToast('Failed to clear MusicBrainz cache', 'error');
- }
- } catch (e) {
- showToast('Error clearing MusicBrainz cache', 'error');
- }
-}
-
-function debouncedMetadataCacheSearch() {
- if (_mcacheSearchTimeout) clearTimeout(_mcacheSearchTimeout);
- _mcacheSearchTimeout = setTimeout(() => {
- _mcachePage = 0;
- loadMetadataCacheBrowse();
- }, 400);
-}
-
-function formatCacheAge(timestamp) {
- if (!timestamp) return '—';
- const now = new Date();
- const then = new Date(timestamp);
- const diffMs = now - then;
- const diffMin = Math.floor(diffMs / 60000);
- if (diffMin < 1) return 'now';
- if (diffMin < 60) return `${diffMin}m`;
- const diffHr = Math.floor(diffMin / 60);
- if (diffHr < 24) return `${diffHr}h`;
- const diffDays = Math.floor(diffHr / 24);
- if (diffDays < 30) return `${diffDays}d`;
- return `${Math.floor(diffDays / 30)}mo`;
-}
-
-// ============================================
-// == TOOL HELP MODAL ==
-// ============================================
-
-const TOOL_HELP_CONTENT = {
- 'db-updater': {
- title: 'Database Updater',
- content: `
- What does this tool do?
-The Database Updater syncs your media server library (Plex, Jellyfin, or Navidrome) with SoulSync's internal database.
- -Update Modes
--
-
- Incremental Update: Only scans for new artists, albums, and tracks that have been added since the last update. Fast and efficient for regular updates. -
- Full Refresh: Completely rebuilds the database from scratch. Use this if you've made significant changes to your library or if data seems out of sync. -
When to use it?
--
-
- After adding new music to your media server -
- When library statistics seem incorrect -
- After changing media server settings -
Progress Persistence
-The update runs in the background. You can close this page and return later - progress will be preserved and continue where it left off.
- ` - }, - 'metadata-updater': { - title: 'Metadata Updater', - content: ` -What does this tool do?
-The Metadata Updater triggers all enrichment workers simultaneously, re-checking every item in your library against all connected services (Spotify, MusicBrainz, iTunes, Deezer, AudioDB, Last.fm, Genius, Tidal, Qobuz).
- -Refresh Interval Options
--
-
- 6 months: Only updates metadata for artists not updated in the last 180 days -
- 3 months: Updates metadata for artists not updated in the last 90 days -
- 1 month: Updates metadata for artists not updated in the last 30 days -
- Force All: Updates all artists regardless of when they were last updated -
What gets updated?
--
-
- Artist profile photos, genres, and descriptions -
- Album cover artwork, labels, and release info -
- Track ISRCs, explicit flags, and external IDs -
- Service match status for all 9 enrichment workers -
Note
-Available for Plex and Jellyfin media servers. Each enrichment worker only runs if its service is authenticated.
- ` - }, - 'quality-scanner': { - title: 'Quality Scanner', - content: ` -What does this tool do?
-The Quality Scanner identifies tracks in your library that don't meet your preferred quality settings and automatically matches them to Spotify to add to your wishlist for re-downloading.
- -Scan Scope
--
-
- Watchlist Artists Only: Only scans tracks from artists you're watching. Faster and more focused. -
- All Library Tracks: Scans your entire music library. Comprehensive but takes longer. -
How it works
--
-
- Scans tracks and checks file format against your quality preferences -
- Identifies tracks below your quality threshold (e.g., MP3 when you prefer FLAC) -
- Uses fuzzy matching to find the track on Spotify (70% confidence minimum) -
- Automatically adds matched tracks to your wishlist for re-download -
Quality Tiers
--
-
- Tier 1 (Best): FLAC, WAV, ALAC, AIFF - Lossless formats -
- Tier 2: OPUS, OGG - High quality lossy -
- Tier 3: M4A, AAC - Standard lossy -
- Tier 4: MP3, WMA - Lower quality lossy -
Stats Explained
--
-
- Processed: Total tracks scanned so far -
- Quality Met: Tracks that meet your quality standards -
- Low Quality: Tracks below your quality threshold -
- Matched: Low quality tracks successfully matched to Spotify and added to wishlist -
What does this tool do?
-The Duplicate Cleaner scans your output folder for duplicate audio files and automatically removes lower-quality versions, keeping only the best copy.
- -How it detects duplicates
-Files are considered duplicates when:
--
-
- They are in the same folder -
- They have the exact same filename (ignoring file extension) -
Example: Song.flac and Song.mp3 in the same folder = duplicates ✓
Example: Song.flac and Song (Remaster).flac = NOT duplicates ✗
Which file is kept?
-Priority order (best to worst):
--
-
- Format priority: FLAC/Lossless > OPUS/OGG > M4A/AAC > MP3/WMA -
- If same format: Larger file size is kept (usually indicates better bitrate) -
Where do deleted files go?
-Removed files are moved to Transfer/deleted/ folder (not permanently deleted). You can review and recover them if needed.
Safety Features
--
-
- Only processes audio files (FLAC, MP3, M4A, etc.) -
- Only removes files with identical names in the same folder -
- Files are moved, not deleted - fully recoverable -
- Preserves original folder structure in the deleted folder -
Stats Explained
--
-
- Files Scanned: Total audio files checked -
- Duplicates Found: Number of duplicate files detected -
- Deleted: Files moved to deleted folder -
- Space Freed: Total disk space reclaimed -
What does this tool do?
-The Media Server Scan tool manually triggers a Plex media library scan to detect newly downloaded music files.
- -When to use it?
--
-
- After downloading new tracks to refresh your Plex library -
- When new music isn't showing up in Plex -
- To force an immediate library update instead of waiting for auto-scan -
What happens when you scan?
--
-
- Plex library scan: Plex scans your music folder for new/changed files -
- Automatic database update: After the scan completes, SoulSync automatically updates its internal database with new tracks -
- Library refreshed: New music appears in Plex and SoulSync within moments -
Plex only?
-Yes! This tool only appears when Plex is your active media server because:
--
-
- Jellyfin automatically detects new files instantly (real-time monitoring) -
- Navidrome automatically detects new files instantly (real-time monitoring) -
- Plex requires manual scans or has delayed auto-scanning -
Stats Explained
--
-
- Last Scan: Time of the most recent scan request -
- Status: Current scan state (Idle, Scanning, Error) -
Scan workflow
-This tool replicates the same scan process that runs automatically after completing a download modal - ensuring your new tracks are immediately available in your library!
- ` - }, - 'retag-tool': { - title: 'Retag Tool', - content: ` -What does this tool do?
-The Retag Tool lets you fix metadata on files that have already been downloaded and processed. If an album was tagged with wrong metadata, you can search for the correct match and re-apply tags.
- -How it works
--
-
- Browse your past downloads organized by artist -
- Expand an album or single to see individual tracks -
- Click Retag to search for the correct album match -
- Select the right album and confirm — metadata and file paths are updated automatically -
What gets updated?
--
-
- File tags: Title, artist, album, track number, genre, cover art -
- File paths: Files are moved/renamed to match new metadata (based on your path template) -
- Cover art: cover.jpg is updated in the album folder -
Stats Explained
--
-
- Groups: Number of album/single download groups tracked -
- Tracks: Total individual track files tracked -
- Artists: Number of unique artists across all groups -
Notes
--
-
- Only album and single downloads are tracked (not playlists) -
- Deleting a group from the list does not delete the files -
- Only one retag operation can run at a time -
What is the Discover page?
-The Discover page is your personalized music discovery hub. It uses your watchlist, library listening history, and MusicMap to surface new music, create curated playlists, and organize your collection in dynamic ways.
- -🎯 Hero Section (Featured Artists)
-The rotating hero showcases similar artists discovered via MusicMap. These are artists you don't already have in your library but might enjoy based on your watchlist.
--
-
- Auto-rotates every 8 seconds through 10 featured artists -
- Similar artists sourced from MusicMap and matched to Spotify -
- Click arrows to navigate manually -
- Add artists to watchlist or view their full discography -
- Data refreshed when watchlist scanner runs -
📀 Recent Releases
-New albums from artists you're watching and their MusicMap similar artists. Cached from Spotify and updated during watchlist scans.
--
-
- Shows up to 20 recent albums -
- Click any album to view tracks and add to wishlist -
- Automatically filtered to show albums released in the last 90 days -
- Includes both watchlist artists and similar artists from MusicMap -
🍂 Seasonal Content (Auto-detected)
-Seasonal albums and playlists that appear automatically based on the current season (Winter, Spring, Summer, Fall).
--
-
- Seasonal Albums: Albums matching the current season's vibe -
- Seasonal Playlist: Curated playlist that refreshes with each season -
- Only visible during the matching season -
- Can download and sync to your media server -
🎵 Fresh Tape (Release Radar)
-Curated playlist of brand new releases from your discovery pool. Focuses on tracks released in the past 30 days.
--
-
- 50 tracks, refreshed weekly by watchlist scanner -
- Stays consistent until next update (not random) -
- Download missing tracks or sync to media server -
- Tracks from watchlist artists and MusicMap similar artists -
📚 The Archives (Discovery Weekly)
-Curated playlist from your entire discovery pool - a mix of new and catalog tracks from MusicMap discoveries.
--
-
- 50 tracks, refreshed weekly by watchlist scanner -
- Stays consistent until next update (not random) -
- Broader selection than Fresh Tape (includes older releases) -
- Download missing tracks or sync to media server -
📊 Personalized Library Playlists
-Playlists generated from your existing library using listening statistics:
--
-
- Recently Added: Latest 50 tracks added to your library -
- Your Top 50: All-time most played tracks (requires play count data) -
- Forgotten Favorites: Tracks you loved but haven't played recently -
🎲 Discovery Pool Playlists
-Playlists generated from your discovery pool (tracks from watchlist/similar artists you don't own yet):
--
-
- Popular Picks: High-popularity tracks (Spotify popularity 70+) -
- Hidden Gems: Underground discoveries (Spotify popularity <40) -
- Discovery Shuffle: 50 random tracks - different every time you load -
- Familiar Favorites: Reliable, mid-popularity tracks (40-70) -
🎨 Build a Playlist
-Create custom playlists using MusicMap similar artists from seed artists you select.
--
-
- Search for any artist on Spotify (even if not in your library) -
- Select 1-5 seed artists -
- Choose playlist size: 25, 50, 75, or 100 tracks -
- Uses cached MusicMap similar artists from your database -
- Pulls albums from those similar artists to build the playlist -
- Download and sync like any other discover playlist -
🧠 ListenBrainz Playlists
-Access playlists from your ListenBrainz account (requires ListenBrainz authentication).
--
-
- Created For You: Playlists generated by ListenBrainz for you -
- Your Playlists: Playlists you've created on ListenBrainz -
- Collaborative: Collaborative playlists you're part of -
- Cached locally for performance - click Refresh to update from ListenBrainz -
- Click any playlist to view tracks and download/sync -
⏰ Time Machine (Browse by Decade)
-Explore your discovery pool organized by release decade.
--
-
- Dynamically generated tabs for decades with available content (1950s-2020s) -
- Each decade shows up to 100 tracks from that era -
- Great for discovering older catalog releases from your favorite artists -
🎵 Browse by Genre
-Explore your discovery pool filtered by music genre.
--
-
- Shows top genres from your discovery pool -
- Click any genre tab to see up to 100 tracks in that genre -
- Genres sourced from Spotify metadata -
💾 What is the Discovery Pool?
-The discovery pool is a database of tracks from:
--
-
- Artists in your watchlist -
- Similar artists found via MusicMap -
- Populated during watchlist scanner runs (scrapes music-map.com, matches to Spotify) -
- Filtered to exclude tracks already in your library -
- Used to generate Fresh Tape, The Archives, and discovery pool playlists -
- Caches up to 50 top similar artists across your watchlist -
🗺️ How MusicMap Integration Works
-SoulSync uses MusicMap (music-map.com) instead of Spotify's recommendation API to find similar artists:
--
-
- During watchlist scans, each watchlist artist is looked up on MusicMap -
- MusicMap's artist similarity graph is scraped to find related artists -
- Similar artist names are matched to Spotify IDs -
- Up to 10 similar artists per watchlist artist are cached (refreshed every 30 days) -
- These cached similar artists power all discovery features -
- This approach gives you more diverse, community-driven recommendations -
⬇️ Download & Sync Features
-Most discover playlists support two actions:
--
-
- Download: Opens modal to match tracks to Soulseek and add to download queue -
- Sync: Downloads tracks and automatically transfers them to your media server -
- Sync progress persists - you can close the page and it continues in the background -
- Sync status shows: ✓ completed, ⏳ pending, ✗ failed -
🔄 When is data refreshed?
--
-
- MusicMap Similar Artists: Fetched during watchlist scans, cached for 30 days -
- Hero, Recent Releases, Fresh Tape, The Archives: Updated during watchlist scanner runs (Dashboard page) -
- Discovery Pool: Fully refreshed every 24 hours during watchlist scans (50 top similar artists, 10 albums each) -
- Seasonal Content: Auto-detected based on current date -
- Personalized Library Playlists: Generated on-demand from current library data -
- Discovery Pool Playlists: Generated on-demand from current discovery pool -
- Build a Playlist: Generated on-demand from cached MusicMap similar artists -
- ListenBrainz: Cached locally, manually refreshed via Refresh button -
- Time Machine & Genre: Generated on-demand from current discovery pool -
💡 Pro Tips
--
-
- Curated playlists (Fresh Tape, The Archives) stay consistent until next watchlist scan - great for weekly listening routines -
- Discovery Shuffle changes every page load - perfect when you want spontaneous recommendations -
- Use Build a Playlist to explore artists not in your watchlist (if seed artist isn't in watchlist, MusicMap data must be cached first) -
- The discovery pool only includes tracks you don't own yet - download them to build your collection! -
- Sync feature is ideal for batch downloading entire playlists to your media server -
- MusicMap provides more diverse recommendations than Spotify's algorithm - expect deeper cuts and underground artists! -
- Add more artists to your watchlist to expand your discovery pool with their MusicMap similar artists -
What is this trigger?
-Runs your automation on a repeating interval — every X minutes, hours, or days.
- -Configuration
--
-
- Interval: How often to repeat (e.g. every 6 hours) -
- Unit: Minutes, Hours, or Days -
When does it first run?
-The timer starts when SoulSync boots. If the automation was previously scheduled, it resumes from where it left off.
- -Good for
--
-
- Regular wishlist processing (every 30 minutes) -
- Periodic database backups (every 12 hours) -
- Any recurring maintenance task -
What is this trigger?
-Runs your automation once per day at a specific time.
- -Configuration
--
-
- Time: The wall-clock time to run (e.g. 03:00 for 3 AM) -
Good for
--
-
- Nightly watchlist scans -
- Off-peak database updates -
- Daily backups at a consistent time -
What is this trigger?
-Runs your automation on specific days of the week at a set time.
- -Configuration
--
-
- Days: Select one or more days (Mon–Sun) -
- Time: The time to run on those days -
Good for
--
-
- Weekend-only quality scans -
- Weekly playlist refreshes -
- Scheduled maintenance on quiet days -
What is this trigger?
-Fires once when SoulSync starts up. Useful for tasks you want to run on every boot.
- -Good for
--
-
- Refreshing mirrored playlists on startup -
- Running a quick database sync -
- Sending a "SoulSync is online" notification -
Note
-This trigger fires only once per startup — it will not fire again until SoulSync is restarted.
- ` - }, - 'auto-track_downloaded': { - title: 'Track Downloaded', - content: ` -What is this trigger?
-Fires every time a single track finishes downloading and post-processing (tagging, moving to library).
- -Conditions
-You can filter which downloads trigger this automation:
--
-
- Artist: Only fire for specific artists -
- Title: Match on track title -
- Album: Match on album name -
- Quality: Match on file format (FLAC, MP3, etc.) -
Available variables for notifications
-{artist}, {title}, {album}, {quality}
Note
-This fires per-track, not per-album. For an album with 12 tracks, it fires 12 times. Use Batch Complete if you want one event per album.
- ` - }, - 'auto-batch_complete': { - title: 'Batch Complete', - content: ` -What is this trigger?
-Fires when an entire album or playlist download batch finishes — all tracks in the batch are done (whether successful or failed).
- -Conditions
--
-
- Playlist name: Filter by the name of the album or playlist -
Available variables for notifications
-{playlist_name}, {total_tracks}, {completed_tracks}, {failed_tracks}
Good for
--
-
- Triggering a media server scan after downloads finish -
- Sending a notification when an album is fully downloaded -
- Running a database update after new content arrives -
What is this trigger?
-Fires when the watchlist scanner detects new music from an artist you're watching. This means a new album, EP, or single has been released that you don't already have.
- -Conditions
--
-
- Artist: Only fire for specific watched artists -
Available variables for notifications
-{artist}, {new_tracks}, {added_to_wishlist}
Good for
--
-
- Getting notified when your favorite artists drop new music -
- Auto-processing the wishlist immediately after new releases are found -
What is this trigger?
-Fires after a mirrored playlist is synced to your media server (Plex, Jellyfin, or Navidrome). This means the playlist has been matched and created/updated on your server.
- -Conditions
--
-
- Playlist name: Only fire for specific playlists -
Available variables for notifications
-{playlist_name}, {total_tracks}, {matched_tracks}, {synced_tracks}, {failed_tracks}
What is this trigger?
-Fires when a mirrored playlist detects that the source playlist (on Spotify, Tidal, YouTube, etc.) has changed — tracks were added or removed.
- -Conditions
--
-
- Playlist name: Only fire for specific playlists -
Available variables for notifications
-{playlist_name}, {old_count}, {new_count}, {added}, {removed}
Good for
--
-
- Auto-discovering new tracks after a playlist updates -
- Auto-syncing the playlist to your media server -
- Getting notified when your followed playlists change -
What is this trigger?
-Fires when Spotify/iTunes metadata discovery finishes for a mirrored playlist. Discovery is the process of matching playlist tracks to official Spotify or iTunes metadata.
- -Conditions
--
-
- Playlist name: Only fire for specific playlists -
Available variables for notifications
-{playlist_name}, {total_tracks}, {discovered_count}, {failed_count}, {skipped_count}
Good for
--
-
- Auto-syncing a playlist after discovery completes -
- Getting notified about discovery results (how many matched vs failed) -
What is this trigger?
-Fires when the auto-wishlist processing batch finishes. This is the automated download cycle that searches Soulseek for wishlist tracks.
- -Available variables for notifications
-{tracks_processed}, {tracks_found}, {tracks_failed}
What is this trigger?
-Fires when the watchlist artist scan completes. The scan checks all watched artists for new releases and adds new tracks to your wishlist.
- -Available variables for notifications
-{artists_scanned}, {new_tracks_found}, {tracks_added}
What is this trigger?
-Fires when the library database refresh finishes — either incremental or full. This means SoulSync's internal database has been synced with your media server.
- -Available variables for notifications
-{total_artists}, {total_albums}, {total_tracks}
Good for
--
-
- Running a quality scan after the database is refreshed -
- Sending a summary notification with library stats -
What is this trigger?
-Fires when a track permanently fails to download. This means all retry attempts and sources have been exhausted.
- -Conditions
--
-
- Artist: Only fire for specific artists -
- Title: Match on track title -
- Reason: Match on failure reason -
Available variables for notifications
-{artist}, {title}, {reason}
What is this trigger?
-Fires when a downloaded file fails AcoustID verification and is moved to the quarantine folder. This means the audio fingerprint didn't match what was expected — the file might be the wrong song.
- -Conditions
--
-
- Artist: Only fire for specific artists -
- Title: Match on track title -
Available variables for notifications
-{artist}, {title}, {reason}
What is quarantine?
-Files that fail audio fingerprint verification are moved to a quarantine folder instead of your library. This prevents wrong songs from polluting your collection. You can review quarantined files manually.
- ` - }, - 'auto-wishlist_item_added': { - title: 'Wishlist Item Added', - content: ` -What is this trigger?
-Fires when a track is added to your wishlist — whether manually, by the quality scanner, or by the watchlist scan.
- -Conditions
--
-
- Artist: Only fire for specific artists -
- Title: Match on track title -
Available variables for notifications
-{artist}, {title}, {reason}
What is this trigger?
-Fires when an artist is added to your watchlist. Watched artists are periodically scanned for new releases.
- -Conditions
--
-
- Artist: Only fire for specific artists -
Available variables for notifications
-{artist}, {artist_id}
What is this trigger?
-Fires when an artist is removed from your watchlist.
- -Conditions
--
-
- Artist: Only fire for specific artists -
Available variables for notifications
-{artist}, {artist_id}
What is this trigger?
-Fires when an album or track import operation finishes. Imports bring music from external sources into your library.
- -Conditions
--
-
- Artist: Only fire for specific artists -
- Album name: Match on album name -
Available variables for notifications
-{track_count}, {album_name}, {artist}
What is this trigger?
-Fires when a new playlist mirror is created — a playlist from Spotify, Tidal, YouTube, ListenBrainz, or Beatport is set up for mirroring.
- -Conditions
--
-
- Playlist name: Match on playlist name -
- Source: Match on platform (spotify, tidal, youtube, etc.) -
Available variables for notifications
-{playlist_name}, {source}, {track_count}
Good for
--
-
- Auto-discovering tracks immediately after a new mirror is created -
- Getting notified when new playlists are mirrored -
What is this trigger?
-Fires when the quality scanner finishes. The scanner identifies tracks below your quality preferences and adds them to your wishlist for re-downloading.
- -Available variables for notifications
-{quality_met}, {low_quality}, {total_scanned}
What is this trigger?
-Fires when the duplicate cleaner finishes scanning your output folder for duplicate audio files.
- -Available variables for notifications
-{files_scanned}, {duplicates_found}, {space_freed}
What is this trigger?
-Fires when a media server library scan is considered complete. This only happens after a Scan Library action was triggered — it cannot fire on its own.
- -How does it know the scan is done?
-Your media server (Plex, Jellyfin, Navidrome) doesn't send a "scan finished" signal back to SoulSync. So after telling the server to scan, SoulSync waits approximately 5 minutes and then assumes the scan has finished. This is a generous estimate that works for most libraries.
- -Timing
-From the moment a download finishes to when this trigger fires, expect roughly 6-7 minutes:
--
-
- 60 second debounce wait (groups multiple downloads together) -
- Media server scan triggered -
- ~5 minute wait (assumed scan completion) -
- This event fires -
Default use
-The system automation Auto-Update Database After Scan listens for this trigger to start an incremental database update, keeping your SoulSync library in sync with your media server.
- -Available variables
-{server_type} — which media server was scanned (plex, jellyfin, navidrome)
What does this action do?
-Searches Soulseek for tracks in your wishlist and downloads them. This is the same process that runs automatically on a timer — this action lets you trigger it manually or chain it to events.
- -Configuration
--
-
- Category: Process all wishlist tracks, or only Albums/EPs, or only Singles -
How it works
--
-
- Picks tracks from the wishlist (alternating Albums and Singles cycles) -
- Searches Soulseek for each track -
- Downloads the best quality match found -
- Tags and moves files to your library -
What does this action do?
-Checks all watched artists for new releases you don't already have. New tracks are automatically added to your wishlist for downloading.
- -How it works
--
-
- Goes through each artist in your watchlist -
- Fetches their discography from Spotify -
- Compares against your library to find missing releases -
- Adds new tracks to your wishlist -
What does this action do?
-Tells your media server (Plex, Jellyfin, or Navidrome) to scan its music library folder for new or changed files. This makes newly downloaded music appear in your media server.
- -How it works
--
-
- A 60 second debounce groups rapid requests — if multiple downloads finish close together, only one scan is triggered -
- After the debounce, your media server is told to scan -
- SoulSync waits ~5 minutes (your media server doesn't report when it's finished, so this is an assumed completion time) -
- The Library Scan Done event fires, which can trigger follow-up actions like a database update -
Default use
-The system automation Auto-Scan After Downloads uses this action to automatically scan your library when a batch download completes. You can disable that automation if you prefer to scan manually.
- -Note
-Jellyfin and Navidrome often detect new files automatically, but the scan ensures nothing is missed.
- ` - }, - 'auto-refresh_mirrored': { - title: 'Refresh Mirrored Playlist', - content: ` -What does this action do?
-Re-fetches a mirrored playlist from its source platform (Spotify, Tidal, YouTube, etc.) and updates the local mirror with any track changes.
- -Configuration
--
-
- Playlist: Select a specific mirrored playlist, or check "Refresh all" to update all mirrors -
Good for
--
-
- Keeping mirrors in sync with playlists that change frequently -
- Detecting added/removed tracks on the source platform -
What does this action do?
-Syncs a mirrored playlist to your media server. It matches discovered tracks against your library and creates or updates the playlist on Plex, Jellyfin, or Navidrome.
- -Configuration
--
-
- Playlist: Select which mirrored playlist to sync -
Prerequisites
-Tracks should be discovered first (matched to Spotify/iTunes metadata) before syncing. Undiscovered tracks will be skipped.
- ` - }, - 'auto-discover_playlist': { - title: 'Discover Playlist', - content: ` -What does this action do?
-Finds official Spotify or iTunes metadata for tracks in a mirrored playlist. This is required before syncing — it matches each track to a known release so it can be found in your library.
- -Configuration
--
-
- Playlist: Select a specific playlist, or check "Discover all" to process all mirrored playlists -
How it works
--
-
- Takes each track name and artist from the mirror -
- Searches Spotify (or iTunes as fallback) for a match -
- Stores the best match with confidence score in the discovery cache -
- Already-discovered tracks are skipped for efficiency -
What does this action do?
-Runs the full playlist lifecycle in one automation — no signal wiring needed. Executes four phases sequentially:
--
-
- Refresh — Re-fetches playlist tracks from the source platform (Spotify, Tidal, YouTube, Deezer) -
- Discover — Matches each track to official metadata (Spotify/iTunes/Deezer IDs) -
- Sync — Pushes the playlist to your media server (Plex, Jellyfin, Navidrome) -
- Download Missing — Queues unmatched tracks to the wishlist for automatic download -
Configuration
--
-
- Playlist: Select a specific mirrored playlist, or check "Process all" to run the pipeline for every mirrored playlist -
- Skip wishlist: Check this to skip the download phase (useful if you only want to sync, not download) -
How the re-sync loop works
-Set this on a schedule (e.g., every 6 hours). Between runs, the wishlist processor downloads missing tracks in the background. On the next pipeline run, those newly downloaded tracks will match during the sync phase — so your server playlist gets more complete with each cycle until fully synced.
- -Replaces
-This single automation replaces the 4-automation signal chain pattern (Refresh → signal → Discover → signal → Sync → signal → Download). No signals, no chaining, no room for misconfiguration.
- ` - }, - 'auto-notify_only': { - title: 'Notify Only', - content: ` -What does this action do?
-Nothing — it performs no action. It just passes the event data through to the notification step.
- -Good for
--
-
- Getting notified about events without taking any automated action -
- Monitoring what's happening in SoulSync (downloads, failures, changes) -
- Pair with any event trigger + Discord/Telegram/Pushbullet notification -
What does this action do?
-Refreshes SoulSync's internal library database by syncing with your media server (Plex, Jellyfin, or Navidrome).
- -Configuration
--
-
- Full refresh: When checked, completely rebuilds the database from scratch. When unchecked, only scans for new content (faster). -
What does this action do?
-Scans your output folder for duplicate audio files (same filename, different format) and removes the lower-quality version. For example, if you have both Song.flac and Song.mp3, the MP3 is removed.
Safety
-Removed files are moved to a deleted/ subfolder, not permanently deleted. You can recover them if needed.
What does this action do?
-Permanently deletes all files in the quarantine folder. Quarantined files are downloads that failed AcoustID audio fingerprint verification — they might be the wrong song.
- -Warning
-This permanently deletes files. Make sure you've reviewed quarantined files before setting up an automation for this.
- ` - }, - 'auto-cleanup_wishlist': { - title: 'Clean Up Wishlist', - content: ` -What does this action do?
-Removes duplicate entries and tracks you already own from your wishlist. Keeps the wishlist lean by removing items that no longer need downloading.
- ` - }, - 'auto-update_discovery_pool': { - title: 'Update Discovery Pool', - content: ` -What does this action do?
-Refreshes the discovery pool with new tracks from your mirrored playlists. The discovery pool tracks which playlist tracks have been successfully matched and which ones failed.
- ` - }, - 'auto-start_quality_scan': { - title: 'Run Quality Scan', - content: ` -What does this action do?
-Scans your library for tracks that don't meet your quality preferences (e.g., MP3 when you prefer FLAC). Low-quality tracks are matched to Spotify and added to your wishlist for re-downloading in better quality.
- -Configuration
--
-
- Scope: Scan only watchlist artists (faster) or your entire library (thorough) -
What does this action do?
-Creates a timestamped backup of SoulSync's SQLite database. Uses the SQLite backup API for a safe hot-copy while the app is running.
- -Retention
-Keeps the last 5 backups automatically. Older backups are cleaned up to save disk space.
- -Good for
--
-
- Nightly automated backups -
- Pre-update safety backups -
- Peace of mind for your library data -
What does this action do?
-Scrapes the Beatport homepage for top charts and caches the results locally. Keeps the Beatport charts page loading instantly without needing to scrape on every visit.
- -Cache duration
-Cache lasts 24 hours. This action refreshes it early so it's always warm when you visit the charts page.
- -Good for
--
-
- Keeping Beatport charts available instantly -
- Scheduling daily cache refreshes (e.g. every morning) -
What does this action do?
-Removes old search queries from Soulseek. This keeps your search history clean and prevents buildup over time.
- -Good for
--
-
- Periodic housekeeping -
- Keeping Soulseek search history tidy -
What does this action do?
-Clears completed downloads from the transfer list and removes any empty directories left behind in the import folder.
- -Good for
--
-
- Automatic cleanup after batch downloads -
- Preventing import folder clutter -
- Chaining after a batch complete trigger -
What does this action do?
-Runs all housekeeping tasks in a single sweep:
--
-
- Clear Quarantine — permanently deletes all quarantined files -
- Clear Download Queue — removes completed, errored, and cancelled downloads from Soulseek -
- Sweep Empty Directories — removes empty folders left behind in the input directory -
- Sweep Import Folder — removes empty directories from the import folder -
- Clean Search History — trims old Soulseek search queries -
Safety
-Skips download queue cleanup if batches are actively downloading or post-processing. Each step runs independently — a failure in one step won't stop the others.
- -Good for
--
-
- Scheduled housekeeping every 12 hours -
- Keeping disk usage and queue clutter under control -
- Running after large batch downloads complete -
What does this action do?
-Walks your entire media server library and compares it against SoulSync's database. Adds any new tracks found and removes stale entries that no longer exist on the server.
- -How is this different from Database Update?
--
-
- Database Update: Incremental — only looks for new artists/albums added since last update -
- Deep Scan: Full comparison — checks every track on the server against the database, catches anything missed -
Safety
--
-
- Never overwrites existing enrichment data (genres, Spotify IDs, artwork) -
- Only inserts tracks that don't already exist in the database -
- Stale track removal has a 50% safety threshold — if more than half the library appears missing, removal is skipped -
What does this then-action do?
-Sends a notification to a Discord channel via webhook when the automation's action completes.
- -Configuration
--
-
- Webhook URL: The Discord webhook URL for your channel (found in Channel Settings → Integrations → Webhooks) -
- Message Template: Custom message with variable placeholders -
Available variables
-Use these in your message template:
--
-
{time}— When the automation ran
- {name}— Automation name
- {run_count}— How many times this automation has run
- {status}— Result status of the action
-
What does this then-action do?
-Sends a push notification to your phone or desktop via Pushbullet when the automation's action completes.
- -Configuration
--
-
- API Key: Your Pushbullet access token (found in Pushbullet Settings → Access Tokens) -
- Message Template: Custom message with variable placeholders -
Available variables
-Use these in your message template:
--
-
{time}— When the automation ran
- {name}— Automation name
- {run_count}— How many times this automation has run
- {status}— Result status of the action
-
What does this then-action do?
-Sends a message to a Telegram chat via bot when the automation's action completes.
- -Configuration
--
-
- Bot Token: Your Telegram bot token (from @BotFather) -
- Chat ID: The chat/group ID to send messages to -
- Message Template: Custom message with variable placeholders -
Available variables
-Use these in your message template:
--
-
{time}— When the automation ran
- {name}— Automation name
- {run_count}— How many times this automation has run
- {status}— Result status of the action
-
What does this then-action do?
-Sends an HTTP POST request with a JSON payload to any URL when the automation's action completes. Use it to integrate with Gotify, Home Assistant, Slack, n8n, or any service that accepts webhooks.
- -Configuration
--
-
- URL: The endpoint to POST to (e.g.
https://gotify.example.com/message?token=xxx)
- - Headers: Optional custom headers, one per line in
Key: Valueformat. Useful for auth tokens.
- - Custom Message: Optional message with variable placeholders. Added as a "message" field in the JSON payload. -
JSON payload
-The POST body always includes all event variables as JSON fields:
-{"time": "2026-04-02 ...", "name": "My Automation", "status": "success", ...}
-
- Available variables
-Use these in your message or header values:
--
-
{time}— When the automation ran
- {name}— Automation name
- {run_count}— How many times this automation has run
- {status}— Result status of the action
-
What is this trigger?
-Fires when another automation sends a named signal using the Fire Signal then-action. This lets you chain automations together — one automation finishes and wakes up another.
- -Configuration
--
-
- Signal Name: The name to listen for (e.g.
library_ready,scan_done). Must match the name used in the Fire Signal action.
-
How chaining works
--
-
- Automation A: Trigger = Batch Complete, Action = Scan Library, Then = Fire Signal "scan_done" -
- Automation B: Trigger = Signal Received "scan_done", Action = Update Database -
- When a download finishes → A scans library → fires signal → B wakes up → updates database -
Safety
--
-
- Circular signal chains are detected and blocked when you save -
- Maximum chain depth of 5 levels to prevent runaway cascades -
- Same signal can only fire once every 10 seconds (cooldown) -
Signal names
-Use descriptive lowercase names with underscores: library_ready, scan_complete, downloads_done. Existing signal names from other automations appear as suggestions.
What does this then-action do?
-Fires a named signal after the automation's action completes. Any other automation with a Signal Received trigger listening for this signal name will wake up and run.
- -Configuration
--
-
- Signal Name: The signal to fire (e.g.
library_ready). Use the same name in a Signal Received trigger on another automation to connect them.
-
Use cases
--
-
- Multi-step workflows: Scan library → fire signal → update database → fire signal → send notification -
- Fan-out: One signal can trigger multiple automations simultaneously -
- Decoupled logic: Keep each automation simple with one job, chain them via signals -
Combining with notifications
-You can add up to 3 then-actions per automation. For example: Fire Signal + Discord notification + Telegram notification — all run after the action completes.
- ` - }, - 'backup-manager': { - title: 'Backup Manager', - content: ` -What does this tool do?
-The Backup Manager lets you create, view, download, restore, and delete database backups directly from the dashboard.
- -Features
--
-
- Backup Now: Create an instant backup of the current database using SQLite's hot-copy API -
- Download: Download any backup file to your local machine -
- Restore: Roll back the database to a previous backup state -
- Delete: Remove old backups you no longer need -
Auto-Backups
-SoulSync automatically creates a backup every 3 days via the automation engine. Up to 5 rolling backups are kept (oldest are removed when the limit is exceeded).
- -Restore Safety
-When you restore from a backup, a safety backup of your current database is created first. This means you can always undo a restore if something goes wrong.
- -Stats Explained
--
-
- Last Backup: When the most recent backup was created -
- Backups: Total number of backup files available -
- Latest Size: Size of the most recent backup -
- DB Size: Current size of the live database -
What is this?
-The Metadata Cache stores every API response from Spotify and iTunes so SoulSync can reuse them instead of making duplicate API calls. This reduces rate limit pressure and speeds up lookups.
- -How it works
-When SoulSync fetches artist, album, or track data from Spotify or iTunes, the response is cached locally. The next time the same data is needed, it's served from cache instantly — no API call required. Cached data is even served during Spotify rate limit bans.
- -Browsing the Cache
-Click Browse Cache to explore all cached metadata. You can filter by entity type (artists, albums, tracks), search by name, filter by source (Spotify/iTunes), and sort by different fields. Click any card to see full details including the raw API response.
- -Cache Management
--
-
- TTL: Entities expire after 30 days, search mappings after 7 days -
- Eviction: Expired entries are automatically cleaned up -
- Clear: You can clear the entire cache or filter by source/type -
Stats Explained
--
-
- Artists: Total cached artist profiles -
- Albums: Total cached album records -
- Tracks: Total cached track records -
- Hits: Total number of times cached data was served instead of making an API call -
Loading downloads...
';
-
- try {
- const response = await fetch('/api/retag/groups');
- const data = await response.json();
- if (!data.success || !data.groups || data.groups.length === 0) {
- body.innerHTML = 'No downloads recorded yet. Downloads will appear here after completing album or single downloads.
'; - if (clearBtn) clearBtn.style.display = 'none'; - return; - } - if (clearBtn) clearBtn.style.display = ''; - renderRetagGroups(data.groups, body); - } catch (e) { - body.innerHTML = 'Failed to load downloads.
'; - } -} - -function closeRetagModal() { - const modal = document.getElementById('retag-modal'); - if (modal) modal.style.display = 'none'; - document.body.style.overflow = ''; -} - -function renderRetagGroups(groups, container) { - // Group by artist_name - const byArtist = {}; - groups.forEach(g => { - const artist = g.artist_name || 'Unknown Artist'; - if (!byArtist[artist]) byArtist[artist] = []; - byArtist[artist].push(g); - }); - - let html = ''; - Object.keys(byArtist).sort((a, b) => a.localeCompare(b)).forEach(artist => { - html += `
-
`;
- });
-
- container.innerHTML = html;
- _attachRetagDelegation(container);
-}
-
-function _attachRetagDelegation(container) {
- // Single click handler for all retag group interactions
- container.addEventListener('click', (e) => {
- const target = e.target;
-
- // Skip checkbox wrapper clicks — handled by change listener
- if (target.closest('.retag-group-checkbox')) return;
-
- // Retag button
- const retagBtn = target.closest('.retag-group-btn');
- if (retagBtn) {
- e.stopPropagation();
- const groupId = parseInt(retagBtn.dataset.groupId);
- const header = retagBtn.closest('.retag-group-header');
- const defaultQuery = header ? header.dataset.defaultQuery || '' : '';
- openRetagSearch(groupId, defaultQuery);
- return;
- }
-
- // Delete confirm buttons (dynamically injected)
- const confirmYes = target.closest('.retag-confirm-yes');
- if (confirmYes) {
- e.stopPropagation();
- const card = confirmYes.closest('.retag-group-card');
- if (card) executeRetagGroupDelete(parseInt(card.dataset.groupId));
- return;
- }
- const confirmNo = target.closest('.retag-confirm-no');
- if (confirmNo) {
- e.stopPropagation();
- const card = confirmNo.closest('.retag-group-card');
- if (card) cancelRetagDeleteConfirm(parseInt(card.dataset.groupId));
- return;
- }
-
- // Delete button
- const delBtn = target.closest('.retag-group-delete-btn');
- if (delBtn) {
- e.stopPropagation();
- showRetagDeleteConfirm(parseInt(delBtn.dataset.groupId));
- return;
- }
-
- // Group header click (expand/collapse)
- const header = target.closest('.retag-group-header');
- if (header) {
- toggleRetagGroup(parseInt(header.dataset.groupId));
- return;
- }
- });
-
- // Separate change handler for checkboxes
- container.addEventListener('change', (e) => {
- if (e.target.classList.contains('retag-select-cb')) {
- updateRetagBatchBar();
- }
- });
-}
-
-async function toggleRetagGroup(groupId) {
- const tracksDiv = document.getElementById(`retag-tracks-${groupId}`);
- if (!tracksDiv) return;
-
- if (tracksDiv.style.display === 'none') {
- tracksDiv.style.display = 'block';
- if (tracksDiv.querySelector('.retag-tracks-loading')) {
- try {
- const response = await fetch(`/api/retag/groups/${groupId}/tracks`);
- const data = await response.json();
- if (data.success && data.tracks && data.tracks.length > 0) {
- tracksDiv.innerHTML = data.tracks.map(t => {
- const discPrefix = t.disc_number > 1 ? `${t.disc_number}-` : '';
- const trackNum = t.track_number != null ? `${discPrefix}${String(t.track_number).padStart(2, '0')}` : '--';
- return `${escapeHtml(artist)}
-`;
-
- byArtist[artist].forEach(group => {
- const imgHtml = group.image_url
- ? `
`
- : '';
- const trackCount = group.track_count || group.total_tracks || 0;
- const typeLabel = (group.group_type || 'album').charAt(0).toUpperCase() + (group.group_type || 'album').slice(1);
- const releaseDate = group.release_date ? group.release_date.substring(0, 4) : '';
- const defaultQuery = (artist + ' ' + (group.album_name || '')).trim();
-
- html += `
-
`;
- });
-
- html += `
-
- ${imgHtml}
-
-
-
- ${escapeHtml(group.album_name || 'Unknown')}
-
-
-
-
-
-
-
- ${trackNum}
- ${escapeHtml(t.title || 'Unknown')}
- ${(t.file_format || '').toUpperCase()}
-
`;
- }).join('');
- } else {
- tracksDiv.innerHTML = 'No tracks found
'; - } - } catch (e) { - tracksDiv.innerHTML = 'Failed to load tracks
'; - } - } - } else { - tracksDiv.style.display = 'none'; - } -} - -function openRetagSearch(groupId, defaultQuery) { - retagCurrentGroupId = groupId; - const modal = document.getElementById('retag-search-modal'); - if (!modal) return; - modal.style.display = 'flex'; - - const input = document.getElementById('retag-search-input'); - if (input) { - input.value = defaultQuery || ''; - input.focus(); - if (defaultQuery) { - searchRetagAlbums(defaultQuery); - } - } -} - -function closeRetagSearch() { - const modal = document.getElementById('retag-search-modal'); - if (modal) modal.style.display = 'none'; - retagCurrentGroupId = null; -} - -let retagSearchTimeout = null; -document.addEventListener('DOMContentLoaded', () => { - const retagSearchInput = document.getElementById('retag-search-input'); - if (retagSearchInput) { - retagSearchInput.addEventListener('input', (e) => { - clearTimeout(retagSearchTimeout); - retagSearchTimeout = setTimeout(() => searchRetagAlbums(e.target.value), 400); - }); - retagSearchInput.addEventListener('keydown', (e) => { - if (e.key === 'Enter') { - clearTimeout(retagSearchTimeout); - searchRetagAlbums(e.target.value); - } - }); - } - - // Close retag modals on escape - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { - const searchModal = document.getElementById('retag-search-modal'); - if (searchModal && searchModal.style.display === 'flex') { - closeRetagSearch(); - return; - } - const mainModal = document.getElementById('retag-modal'); - if (mainModal && mainModal.style.display === 'flex') { - closeRetagModal(); - } - } - }); - - // Close retag modal on overlay click - const retagModal = document.getElementById('retag-modal'); - if (retagModal) { - retagModal.addEventListener('click', (e) => { - if (e.target === retagModal) closeRetagModal(); - }); - } - const retagSearchModal = document.getElementById('retag-search-modal'); - if (retagSearchModal) { - retagSearchModal.addEventListener('click', (e) => { - if (e.target === retagSearchModal) closeRetagSearch(); - }); - } -}); - -async function searchRetagAlbums(query) { - if (!query || !query.trim()) return; - const resultsDiv = document.getElementById('retag-search-results'); - if (!resultsDiv) return; - resultsDiv.innerHTML = 'Searching...
';
-
- try {
- const response = await fetch(`/api/retag/search?q=${encodeURIComponent(query.trim())}`);
- const data = await response.json();
- if (data.success && data.albums && data.albums.length > 0) {
- resultsDiv.innerHTML = data.albums.map(a => {
- const imgHtml = a.image_url
- ? `
- ${imgHtml}
-
`;
- }).join('');
- } else {
- resultsDiv.innerHTML = '
- ${escapeHtml(a.name || 'Unknown')}
- ${escapeHtml(a.artist || 'Unknown')}
-
-
- No albums found.
'; - } - } catch (e) { - resultsDiv.innerHTML = 'Search failed.
'; - } -} - -/** - * Show inline confirmation on a search result before retagging - */ -function showRetagConfirm(el, groupId, albumId, albumName) { - // Clear any other confirming states - document.querySelectorAll('.retag-search-result.retag-confirming').forEach(r => { - r.classList.remove('retag-confirming'); - const bar = r.querySelector('.retag-result-confirm-bar'); - if (bar) bar.remove(); - r.onclick = r._originalOnclick || null; - }); - - el.classList.add('retag-confirming'); - el._originalOnclick = el.onclick; - el.onclick = null; // Disable clicking the row again - - const confirmBar = document.createElement('div'); - confirmBar.className = 'retag-result-confirm-bar'; - confirmBar.innerHTML = ` - Re-tag with "${escapeHtml(albumName)}"? -
-
-
-
- `;
- el.appendChild(confirmBar);
-}
-
-function cancelRetagConfirm(cancelBtn) {
- const result = cancelBtn.closest('.retag-search-result');
- if (!result) return;
- result.classList.remove('retag-confirming');
- const bar = result.querySelector('.retag-result-confirm-bar');
- if (bar) bar.remove();
- if (result._originalOnclick) {
- result.onclick = result._originalOnclick;
- }
-}
-
-async function executeRetag(groupId, albumId, albumName) {
-
- closeRetagSearch();
- closeRetagModal();
-
- try {
- const response = await fetch('/api/retag/execute', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ group_id: groupId, album_id: albumId })
- });
- const data = await response.json();
- if (data.success) {
- showToast('Retag operation started', 'success');
- startRetagPolling();
- } else {
- showToast(`Error: ${data.error || 'Unknown error'}`, 'error');
- }
- } catch (e) {
- showToast('Failed to start retag operation', 'error');
- }
-}
-
-function startRetagPolling() {
- if (retagStatusInterval) return;
- retagStatusInterval = setInterval(checkRetagStatus, 1000);
- checkRetagStatus();
-}
-
-async function checkRetagStatus() {
- if (socketConnected) return; // WebSocket handles this
- try {
- const response = await fetch('/api/retag/status');
- const state = await response.json();
- updateRetagProgressUI(state);
-
- if (state.status === 'running' && !retagStatusInterval) {
- startRetagPolling();
- }
-
- if (state.status !== 'running' && retagStatusInterval) {
- clearInterval(retagStatusInterval);
- retagStatusInterval = null;
- if (state.status === 'finished') {
- showToast('Retag completed successfully', 'success');
- loadRetagStats();
- } else if (state.status === 'error') {
- showToast(`Retag error: ${state.error_message || 'Unknown error'}`, 'error');
- }
- }
- } catch (e) {
- // Ignore fetch errors during polling
- }
-}
-
-function updateRetagStatusFromData(data) {
- const prev = _lastToolStatus['retag'];
- _lastToolStatus['retag'] = data.status;
- if (prev !== undefined && data.status === prev && data.status !== 'running') return;
- updateRetagProgressUI(data);
- // Handle terminal state toasts (only on transition)
- if (prev === 'running' || prev === undefined) {
- if (data.status === 'finished') {
- showToast('Retag completed successfully', 'success');
- loadRetagStats();
- } else if (data.status === 'error') {
- showToast(`Retag error: ${data.error_message || 'Unknown error'}`, 'error');
- }
- }
-}
-
-function updateRetagProgressUI(state) {
- const phaseLabel = document.getElementById('retag-phase-label');
- const progressBar = document.getElementById('retag-progress-bar');
- const progressLabel = document.getElementById('retag-progress-label');
- const statusEl = document.getElementById('retag-stat-status');
-
- if (phaseLabel) phaseLabel.textContent = state.phase || 'Ready';
- if (progressBar) progressBar.style.width = `${state.progress || 0}%`;
- if (progressLabel) {
- progressLabel.textContent = `${state.processed || 0} / ${state.total_tracks || 0} tracks (${(state.progress || 0).toFixed(1)}%)`;
- }
- if (statusEl) {
- statusEl.textContent = state.status === 'running' ? 'Running' : 'Idle';
- }
-
- // Color the progress bar red on error
- if (progressBar) {
- progressBar.style.backgroundColor = state.status === 'error' ? '#ff4444' : '';
- }
-}
-
-/**
- * Show inline delete confirmation for a retag group
- */
-function showRetagDeleteConfirm(groupId) {
- const area = document.getElementById(`retag-delete-area-${groupId}`);
- if (!area) return;
- area.innerHTML = `
- Remove?
-
-
-
`;
-}
-
-function cancelRetagDeleteConfirm(groupId) {
- const area = document.getElementById(`retag-delete-area-${groupId}`);
- if (!area) return;
- area.innerHTML = ``;
-}
-
-async function executeRetagGroupDelete(groupId) {
- try {
- const response = await fetch(`/api/retag/groups/${groupId}`, { method: 'DELETE' });
- const data = await response.json();
- if (data.success) {
- const card = document.querySelector(`.retag-group-card[data-group-id="${groupId}"]`);
- if (card) {
- const section = card.closest('.retag-artist-section');
- card.remove();
- if (section && section.querySelectorAll('.retag-group-card').length === 0) {
- section.remove();
- }
- }
- loadRetagStats();
- updateRetagBatchBar();
- showToast('Group removed', 'success');
- } else {
- showToast('Failed to remove group', 'error');
- }
- } catch (e) {
- showToast('Failed to remove group', 'error');
- }
-}
-
-/**
- * Update the retag batch action bar based on checkbox selection
- */
-function updateRetagBatchBar() {
- const checked = document.querySelectorAll('.retag-select-cb:checked');
- const bar = document.getElementById('retag-batch-bar');
- const countEl = document.getElementById('retag-batch-count');
- if (!bar) return;
-
- if (checked.length > 0) {
- bar.style.display = 'flex';
- countEl.textContent = `${checked.length} selected`;
- } else {
- bar.style.display = 'none';
- }
-}
-
-/**
- * Batch remove selected retag groups
- */
-async function batchRemoveRetagGroups() {
- const checked = document.querySelectorAll('.retag-select-cb:checked');
- if (checked.length === 0) return;
-
- const groupIds = Array.from(checked).map(cb => parseInt(cb.getAttribute('data-group-id')));
-
- try {
- const response = await fetch('/api/retag/groups/delete-batch', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ group_ids: groupIds })
- });
- const data = await response.json();
- if (data.success) {
- showToast(`Removed ${data.removed} group${data.removed !== 1 ? 's' : ''}`, 'success');
- openRetagModal(); // Refresh
- } else {
- showToast('Failed to remove groups', 'error');
- }
- } catch (e) {
- showToast('Failed to remove groups', 'error');
- }
-}
-
-/**
- * Clear all retag groups — inline confirm on the button itself
- */
-function clearAllRetagGroups(btn) {
- if (!btn) return;
- if (btn.dataset.confirming === 'true') {
- // Already confirming — execute
- btn.dataset.confirming = '';
- btn.textContent = 'Clear All';
- executeClearAllRetag();
- return;
- }
- // First click — show confirm state
- btn.dataset.confirming = 'true';
- btn.textContent = 'Confirm Clear?';
- btn.style.background = 'rgba(255, 59, 48, 0.15)';
- // Auto-reset after 3 seconds if not clicked again
- setTimeout(() => {
- if (btn.dataset.confirming === 'true') {
- btn.dataset.confirming = '';
- btn.textContent = 'Clear All';
- btn.style.background = '';
- }
- }, 3000);
-}
-
-async function executeClearAllRetag() {
- try {
- const response = await fetch('/api/retag/groups/clear-all', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' }
- });
- const data = await response.json();
- if (data.success) {
- showToast(`Cleared ${data.removed} group${data.removed !== 1 ? 's' : ''}`, 'success');
- openRetagModal(); // Refresh
- } else {
- showToast('Failed to clear groups', 'error');
- }
- } catch (e) {
- showToast('Failed to clear groups', 'error');
- }
-}
-
-function stopWishlistCountPolling() {
- if (wishlistCountInterval) {
- clearInterval(wishlistCountInterval);
- wishlistCountInterval = null;
- }
-}
-
-
-
-function resetWishlistModalToIdleState() {
- // Reset wishlist modal to idle state after background processing completes
- const playlistId = 'wishlist';
- const process = activeDownloadProcesses[playlistId];
-
- if (process) {
- console.log('🔄 Resetting wishlist modal to idle state...');
-
- // Reset button states
- const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
- if (beginBtn) {
- beginBtn.style.display = 'inline-block';
- beginBtn.disabled = false;
- beginBtn.textContent = 'Begin Analysis';
- }
- if (cancelBtn) {
- cancelBtn.style.display = 'none';
- }
-
- // Show the force download toggle again
- const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
- if (forceToggleContainer) {
- forceToggleContainer.style.display = 'flex';
- }
-
- // Reset progress displays
- const analysisText = document.getElementById(`analysis-progress-text-${playlistId}`);
- const analysisBar = document.getElementById(`analysis-progress-fill-${playlistId}`);
- const downloadText = document.getElementById(`download-progress-text-${playlistId}`);
- const downloadBar = document.getElementById(`download-progress-fill-${playlistId}`);
-
- if (analysisText) analysisText.textContent = 'Ready to start';
- if (analysisBar) analysisBar.style.width = '0%';
- if (downloadText) downloadText.textContent = 'Waiting for analysis';
- if (downloadBar) downloadBar.style.width = '0%';
-
- // Reset all track rows to pending state
- const trackRows = document.querySelectorAll(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index]`);
- trackRows.forEach((row, index) => {
- const matchCell = row.querySelector(`#match-${playlistId}-${index}`);
- const downloadCell = row.querySelector(`#download-${playlistId}-${index}`);
- const actionsCell = row.querySelector(`#actions-${playlistId}-${index}`);
-
- if (matchCell) matchCell.textContent = '🔍 Pending';
- if (downloadCell) downloadCell.textContent = '-';
- if (actionsCell) actionsCell.innerHTML = '-';
- });
-
- // Reset stats
- const foundElement = document.getElementById(`stat-found-${playlistId}`);
- const missingElement = document.getElementById(`stat-missing-${playlistId}`);
- const downloadedElement = document.getElementById(`stat-downloaded-${playlistId}`);
- if (foundElement) foundElement.textContent = '-';
- if (missingElement) missingElement.textContent = '-';
- if (downloadedElement) downloadedElement.textContent = '0';
-
- // Reset process status
- process.status = 'idle';
- process.batchId = null;
- if (process.poller) {
- clearInterval(process.poller);
- process.poller = null;
- }
-
- console.log('✅ Wishlist modal fully reset to idle state');
- } else {
- console.log('⚠️ No wishlist process found to reset');
- }
-}
-
-let toolsPageState = { isInitialized: false };
-
-async function initializeToolsPage() {
- // Attach event listeners for tool buttons (idempotent — getElementById returns null if already wired)
- const updateButton = document.getElementById('db-update-button');
- if (updateButton && !updateButton._toolsWired) {
- updateButton.addEventListener('click', handleDbUpdateButtonClick);
- updateButton._toolsWired = true;
- }
-
- const metadataButton = document.getElementById('metadata-update-button');
- if (metadataButton && !metadataButton._toolsWired) {
- metadataButton.addEventListener('click', handleMetadataUpdateButtonClick);
- metadataButton._toolsWired = true;
- }
-
- const qualityScanButton = document.getElementById('quality-scan-button');
- if (qualityScanButton && !qualityScanButton._toolsWired) {
- qualityScanButton.addEventListener('click', handleQualityScanButtonClick);
- qualityScanButton._toolsWired = true;
- }
-
- const duplicateCleanButton = document.getElementById('duplicate-clean-button');
- if (duplicateCleanButton && !duplicateCleanButton._toolsWired) {
- duplicateCleanButton.addEventListener('click', handleDuplicateCleanButtonClick);
- duplicateCleanButton._toolsWired = true;
- }
-
- const retagOpenButton = document.getElementById('retag-open-button');
- if (retagOpenButton && !retagOpenButton._toolsWired) {
- retagOpenButton.addEventListener('click', openRetagModal);
- retagOpenButton._toolsWired = true;
- }
-
- const mediaScanButton = document.getElementById('media-scan-button');
- if (mediaScanButton && !mediaScanButton._toolsWired) {
- mediaScanButton.addEventListener('click', handleMediaScanButtonClick);
- mediaScanButton._toolsWired = true;
- }
-
- const backupNowButton = document.getElementById('backup-now-button');
- if (backupNowButton && !backupNowButton._toolsWired) {
- backupNowButton.addEventListener('click', handleBackupNowClick);
- backupNowButton._toolsWired = true;
- }
-
- // Tool-specific init
- await checkAndHideMetadataUpdaterForNonPlex();
- await checkAndRestoreMetadataUpdateState();
- await checkAndShowMediaScanForPlex();
- loadBackupList();
- initializeToolHelpButtons();
- loadRetagStats();
- checkRetagStatus();
- await fetchAndUpdateDbStats();
- loadDiscoveryPoolStats();
- loadMetadataCacheStats();
-
- // Start polling (cleared when navigating away via loadPageData preamble)
- stopDbStatsPolling();
- dbStatsInterval = setInterval(fetchAndUpdateDbStats, 10000);
-
- // Check for ongoing operations
- await checkAndUpdateDbProgress();
- await checkAndUpdateQualityScanProgress();
- await checkAndUpdateDuplicateCleanProgress();
-
- // Initialize library maintenance section
- updateRepairStatus();
- switchRepairTab('jobs');
-
- toolsPageState.isInitialized = true;
-}
-
-async function loadDashboardData() {
- // Initial load of wishlist count
- await updateWishlistCount();
-
- // Start periodic refresh of wishlist count (every 10 seconds)
- stopWishlistCountPolling(); // Ensure no duplicates
- wishlistCountInterval = setInterval(updateWishlistCount, 10000);
-
- // Initial load of service status, system statistics, and library status
- await fetchAndUpdateServiceStatus();
- await fetchAndUpdateSystemStats();
- await fetchAndUpdateDbStats();
-
- // Service status is already polled globally (line 311)
- // System stats polling kept here (dashboard-specific)
- setInterval(fetchAndUpdateSystemStats, 10000);
-
- // Initial load of activity feed
- await fetchAndUpdateActivityFeed();
-
- // Start periodic refresh of activity feed (every 2 seconds for responsiveness)
- setInterval(fetchAndUpdateActivityFeed, 2000);
-
- // Start periodic toast checking (every 3 seconds)
- setInterval(checkForActivityToasts, 3000);
-
- // Check for any active download processes that need rehydration
- await checkForActiveProcesses();
-
- // Populate the Active Downloads dashboard section with any existing downloads
- updateDashboardDownloads();
-
- // Automatic wishlist processing now runs server-side
-}
-
-// --- Data Fetching and UI Updates ---
-
-async function fetchAndUpdateDbStats() {
- if (socketConnected) return; // WebSocket handles this
- try {
- const response = await fetch('/api/database/stats');
- if (!response.ok) return;
-
- const stats = await response.json();
-
- // This function updates the stat cards in the top grid
- updateDashboardStatCards(stats);
-
- // This function updates the info within the DB Updater tool card
- updateDbUpdaterCardInfo(stats);
-
- } catch (error) {
- console.warn('Could not fetch DB stats:', error);
- }
-}
-
-function updateDashboardStatCards(stats) {
- // Update the Library Status card on the dashboard
- updateLibraryStatusCard(stats);
-}
-
-/**
- * Smart Library Status card on the Dashboard.
- * Shows different states: no server, empty library, healthy library, scanning.
- */
-function updateLibraryStatusCard(dbStats) {
- const card = document.getElementById('library-status-card');
- if (!card) return;
-
- const title = document.getElementById('library-status-title');
- const subtitle = document.getElementById('library-status-subtitle');
- const statsRow = document.getElementById('library-status-stats');
- const scanBtn = document.getElementById('library-status-scan-btn');
- const scanLabel = document.getElementById('library-status-scan-label');
- const deepBtn = document.getElementById('library-status-deep-btn');
- const progressDiv = document.getElementById('library-status-progress');
- const messageDiv = document.getElementById('library-status-message');
-
- const artists = dbStats ? (dbStats.artists || 0) : 0;
- const albums = dbStats ? (dbStats.albums || 0) : 0;
- const tracks = dbStats ? (dbStats.tracks || 0) : 0;
- const sizeMb = dbStats ? (dbStats.database_size_mb || 0) : 0;
- const lastUpdate = dbStats ? dbStats.last_update : null;
- const serverSource = dbStats ? dbStats.server_source : null;
-
- // Check if a scan is in progress
- const isScanning = window._libraryStatusScanning || false;
-
- // Determine state
- const serverConnected = _lastServiceStatus && _lastServiceStatus.media_server && _lastServiceStatus.media_server.connected;
- const serverType = _lastServiceStatus && _lastServiceStatus.active_media_server;
- const hasData = tracks > 0;
- const hasServer = !!serverType && serverType !== 'none';
-
- // Reset classes
- card.className = 'library-status-card';
-
- if (isScanning) {
- // State: Scanning
- card.classList.add('scanning');
- if (title) title.textContent = 'Library Scan';
- if (subtitle) subtitle.textContent = 'Updating library database...';
- if (scanBtn) {
- scanBtn.style.display = '';
- scanBtn.classList.add('scanning');
- scanLabel.textContent = 'Stop';
- scanBtn.disabled = false;
- }
- if (deepBtn) deepBtn.style.display = 'none';
- if (statsRow) statsRow.style.display = hasData ? '' : 'none';
- if (progressDiv) progressDiv.style.display = '';
- if (messageDiv) messageDiv.style.display = 'none';
-
- } else if (!hasServer) {
- // State: No server configured
- card.classList.add('needs-setup');
- if (title) title.textContent = 'No Media Server';
- if (subtitle) subtitle.textContent = 'Connect a server to get started';
- if (scanBtn) scanBtn.style.display = 'none';
- if (deepBtn) deepBtn.style.display = 'none';
- if (statsRow) statsRow.style.display = 'none';
- if (progressDiv) progressDiv.style.display = 'none';
- if (messageDiv) {
- messageDiv.style.display = '';
- messageDiv.innerHTML = 'SoulSync needs a media server to manage your library. '
- + 'Go to Settings '
- + 'to connect Plex, Jellyfin, or Navidrome.';
- }
-
- } else if (!serverConnected) {
- // State: Server configured but not connected
- card.classList.add('needs-setup');
- const serverName = _capitalize(serverType);
- if (title) title.textContent = `${serverName} — Disconnected`;
- if (subtitle) subtitle.textContent = 'Cannot reach your media server';
- if (scanBtn) scanBtn.style.display = 'none';
- if (deepBtn) deepBtn.style.display = 'none';
- if (statsRow) statsRow.style.display = 'none';
- if (progressDiv) progressDiv.style.display = 'none';
- if (messageDiv) {
- messageDiv.style.display = '';
- messageDiv.innerHTML = `Your ${serverName} server is configured but not responding. `
- + 'Check that it\'s running and the connection details are correct in '
- + 'Settings.';
- }
-
- } else if (!hasData) {
- // State: Server connected but library is empty
- card.classList.add('empty-library');
- const serverName = _capitalize(serverType);
- if (title) title.textContent = `${serverName} Connected`;
- if (subtitle) subtitle.textContent = 'Library database is empty';
- if (scanBtn) {
- scanBtn.style.display = '';
- scanBtn.classList.remove('scanning');
- scanLabel.textContent = 'Scan Now';
- scanBtn.disabled = false;
- }
- if (deepBtn) deepBtn.style.display = 'none';
- if (statsRow) statsRow.style.display = 'none';
- if (progressDiv) progressDiv.style.display = 'none';
- if (messageDiv) {
- messageDiv.style.display = '';
- messageDiv.innerHTML = 'Your server is connected but SoulSync hasn\'t imported your library yet. '
- + 'Click Scan Now to pull your artists, albums, and tracks into SoulSync.';
- }
-
- } else {
- // State: Healthy library with data
- card.classList.add('has-data');
- const serverName = _capitalize(serverType);
- let lastRefreshText = 'Never';
- if (lastUpdate) {
- const d = new Date(lastUpdate);
- if (!isNaN(d.getTime())) {
- lastRefreshText = typeof _formatTimeAgo === 'function' ? _formatTimeAgo(d) : d.toLocaleDateString();
- }
- }
- if (title) title.textContent = `${serverName} Library`;
- if (subtitle) subtitle.textContent = `Last refreshed ${lastRefreshText}`;
- if (scanBtn) {
- scanBtn.style.display = '';
- scanBtn.classList.remove('scanning');
- scanLabel.textContent = 'Refresh';
- scanBtn.disabled = false;
- }
- if (deepBtn) deepBtn.style.display = '';
- if (statsRow) {
- statsRow.style.display = '';
- document.getElementById('library-status-artists').textContent = artists.toLocaleString();
- document.getElementById('library-status-albums').textContent = albums.toLocaleString();
- document.getElementById('library-status-tracks').textContent = tracks.toLocaleString();
- document.getElementById('library-status-size').textContent = sizeMb < 1 ? `${Math.round(sizeMb * 1024)} KB` : `${sizeMb.toFixed(1)} MB`;
- }
- if (progressDiv) progressDiv.style.display = 'none';
- if (messageDiv) messageDiv.style.display = 'none';
- }
-}
-
-// Track last service status for library card
-let _lastServiceStatus = null;
-let _isSoulsyncStandalone = false; // Global flag: true when no media server (sync buttons hidden)
-const _origFetchServiceStatus = typeof fetchAndUpdateServiceStatus === 'function' ? fetchAndUpdateServiceStatus : null;
-
-function _capitalize(s) { return s ? s.charAt(0).toUpperCase() + s.slice(1) : ''; }
-
-/**
- * Dashboard library scan button handler — triggers incremental DB update.
- */
-async function dashboardLibraryScan(fullRefresh = false) {
- const scanBtn = document.getElementById('library-status-scan-btn');
- const scanLabel = document.getElementById('library-status-scan-label');
-
- // If already scanning, stop it
- if (window._libraryStatusScanning) {
- try {
- await fetch('/api/database/update/stop', { method: 'POST' });
- window._libraryStatusScanning = false;
- showToast('Library scan stopped', 'info');
- // Refresh the card
- try {
- const r = await fetch('/api/database/stats');
- if (r.ok) updateLibraryStatusCard(await r.json());
- } catch (e) {}
- } catch (e) {
- showToast('Failed to stop scan', 'error');
- }
- return;
- }
-
- // Start scan
- try {
- window._libraryStatusScanning = true;
- updateLibraryStatusCard(null); // Update to scanning state
-
- const response = await fetch('/api/database/update', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ full_refresh: fullRefresh })
- });
- const data = await response.json();
- if (!data.success) {
- window._libraryStatusScanning = false;
- showToast(data.error || 'Failed to start scan', 'error');
- return;
- }
-
- showToast('Library scan started', 'success');
-
- // Poll for progress
- const pollInterval = setInterval(async () => {
- try {
- const statusResp = await fetch('/api/database/update/status');
- if (!statusResp.ok) return;
- const status = await statusResp.json();
-
- const phase = document.getElementById('library-status-phase');
- const barFill = document.getElementById('library-status-bar-fill');
- const detail = document.getElementById('library-status-progress-detail');
-
- if (phase) phase.textContent = status.phase || 'Scanning...';
- if (barFill) barFill.style.width = `${status.progress || 0}%`;
- if (detail && status.processed !== undefined) {
- detail.textContent = `${status.processed} / ${status.total || '?'}`;
- }
-
- if (status.status === 'completed' || status.status === 'finished' || status.status === 'error' || status.status === 'idle') {
- clearInterval(pollInterval);
- window._libraryStatusScanning = false;
-
- if (status.status === 'completed' || status.status === 'finished') {
- showToast('Library scan complete', 'success');
- } else if (status.status === 'error') {
- showToast(`Scan error: ${status.error_message || 'Unknown'}`, 'error');
- }
-
- // Refresh stats
- try {
- const r = await fetch('/api/database/stats');
- if (r.ok) updateLibraryStatusCard(await r.json());
- } catch (e) {}
- }
- } catch (e) {
- clearInterval(pollInterval);
- window._libraryStatusScanning = false;
- }
- }, 2000);
-
- } catch (e) {
- window._libraryStatusScanning = false;
- showToast(`Scan failed: ${e.message}`, 'error');
- }
-}
-
-/**
- * Dashboard deep scan — finds new tracks, removes stale ones, preserves enrichment data.
- */
-async function dashboardLibraryDeepScan() {
- if (window._libraryStatusScanning) {
- showToast('A scan is already running', 'warning');
- return;
- }
-
- if (!await showConfirmDialog({
- title: 'Deep Scan Library',
- message: 'A deep scan re-checks every track in your media server library.\n\n' +
- '• Adds any new tracks that were missed\n' +
- '• Removes tracks no longer on your server\n' +
- '• Preserves all existing metadata and enrichment data\n\n' +
- 'This may take a while for large libraries. Continue?',
- })) return;
-
- // Use the same scan flow as dashboardLibraryScan but with deep_scan flag
- try {
- window._libraryStatusScanning = true;
- updateLibraryStatusCard(null);
-
- const response = await fetch('/api/database/update', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ deep_scan: true })
- });
- const data = await response.json();
- if (!data.success) {
- window._libraryStatusScanning = false;
- showToast(data.error || 'Failed to start deep scan', 'error');
- try { const r = await fetch('/api/database/stats'); if (r.ok) updateLibraryStatusCard(await r.json()); } catch (e) {}
- return;
- }
-
- showToast('Deep scan started — this may take a while', 'success');
-
- const pollInterval = setInterval(async () => {
- try {
- const statusResp = await fetch('/api/database/update/status');
- if (!statusResp.ok) return;
- const status = await statusResp.json();
-
- const phase = document.getElementById('library-status-phase');
- const barFill = document.getElementById('library-status-bar-fill');
- const detail = document.getElementById('library-status-progress-detail');
-
- if (phase) phase.textContent = status.phase || 'Deep scanning...';
- if (barFill) barFill.style.width = `${status.progress || 0}%`;
- if (detail && status.processed !== undefined) {
- detail.textContent = `${status.processed} / ${status.total || '?'}`;
- }
-
- if (status.status === 'completed' || status.status === 'finished' || status.status === 'error' || status.status === 'idle') {
- clearInterval(pollInterval);
- window._libraryStatusScanning = false;
-
- if (status.status === 'completed' || status.status === 'finished') {
- showToast('Deep scan complete', 'success');
- } else if (status.status === 'error') {
- showToast(`Deep scan error: ${status.error_message || 'Unknown'}`, 'error');
- }
-
- try { const r = await fetch('/api/database/stats'); if (r.ok) updateLibraryStatusCard(await r.json()); } catch (e) {}
- }
- } catch (e) {
- clearInterval(pollInterval);
- window._libraryStatusScanning = false;
- }
- }, 2000);
-
- } catch (e) {
- window._libraryStatusScanning = false;
- showToast(`Deep scan failed: ${e.message}`, 'error');
- }
-}
-
-/**
- * Update the Active Downloads section on the dashboard.
- * Called from artist, search, and discover update points (event-driven, no polling).
- */
-function updateDashboardDownloads() {
- const section = document.getElementById('dashboard-active-downloads-section');
- const container = document.getElementById('dashboard-downloads-container');
- if (!section || !container) return;
-
- // Collect active entries from each source
- const activeArtists = Object.keys(artistDownloadBubbles).filter(id =>
- artistDownloadBubbles[id].downloads.length > 0
- );
- const activeSearch = Object.keys(searchDownloadBubbles).filter(name =>
- searchDownloadBubbles[name].downloads.length > 0
- );
- const activeDiscover = Object.keys(discoverDownloads);
- const activeBeatport = Object.keys(beatportDownloadBubbles).filter(key =>
- beatportDownloadBubbles[key].downloads.length > 0
- );
-
- const totalCount = activeArtists.length + activeSearch.length + activeDiscover.length + activeBeatport.length;
-
- if (totalCount === 0) {
- section.style.display = 'none';
- container.innerHTML = '';
- return;
- }
-
- section.style.display = '';
- let html = '';
-
- // --- Artists group ---
- if (activeArtists.length > 0) {
- html += `
-
-
`;
- }
-
- // --- Search group ---
- if (activeSearch.length > 0) {
- html += `
-
- Artists
- ${activeArtists.length}
-
-
- ${activeArtists.map(id => createArtistBubbleCard(artistDownloadBubbles[id])).join('')}
-
-
-
`;
- }
-
- // --- Discover group ---
- if (activeDiscover.length > 0) {
- html += `
-
- Search
- ${activeSearch.length}
-
-
- ${activeSearch.map(name => createSearchBubbleCard(searchDownloadBubbles[name])).join('')}
-
-
-
`;
- }
-
- // --- Beatport group ---
- if (activeBeatport.length > 0) {
- html += `
-
- Discover
- ${activeDiscover.length}
-
-
- ${activeDiscover.map(pid => createDashboardDiscoverBubble(pid)).join('')}
-
-
-
`;
- }
-
- container.innerHTML = html;
-
- // Post-render: attach artist bubble click handlers + dynamic glow
- activeArtists.forEach(artistId => {
- const card = container.querySelector(`.artist-bubble-card[data-artist-id="${artistId}"]`);
- if (card) {
- card.addEventListener('click', () => openArtistDownloadModal(artistId));
- const artist = artistDownloadBubbles[artistId].artist;
- if (artist.image_url) {
- extractImageColors(artist.image_url, (colors) => {
- applyDynamicGlow(card, colors);
- });
- }
- }
- });
- // Beatport bubble click handlers + glow
- activeBeatport.forEach(chartKey => {
- const card = container.querySelector(`.artist-bubble-card[data-chart-key="${chartKey}"]`);
- if (card) {
- card.addEventListener('click', () => openBeatportBubbleModal(chartKey));
- const chartImage = beatportDownloadBubbles[chartKey].chart.image;
- if (chartImage) {
- extractImageColors(chartImage, (colors) => {
- applyDynamicGlow(card, colors);
- });
- }
- }
- });
- // Search and discover cards use inline onclick — no post-render needed
-}
-
-/**
- * Create a 150px circle card for a discover download (dashboard variant).
- * Matches artist/search bubble sizing.
- */
-function createDashboardDiscoverBubble(playlistId) {
- const download = discoverDownloads[playlistId];
- if (!download) return '';
-
- const isCompleted = download.status === 'completed';
- const imageUrl = download.imageUrl || '';
- const backgroundStyle = imageUrl
- ? `background-image: url('${imageUrl}');`
- : `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
-
- return `
-
- Beatport
- ${activeBeatport.length}
-
-
- ${activeBeatport.map(key => createBeatportBubbleCard(beatportDownloadBubbles[key])).join('')}
-
-
-
-
-
- `;
-}
-
-
-
-function updateDbUpdaterCardInfo(stats) {
- // Update the detailed stats within the DB Updater tool card
- const lastRefreshEl = document.getElementById('db-last-refresh');
- const artistsStatEl = document.getElementById('db-stat-artists');
- const albumsStatEl = document.getElementById('db-stat-albums');
- const tracksStatEl = document.getElementById('db-stat-tracks');
- const sizeStatEl = document.getElementById('db-stat-size');
-
- if (lastRefreshEl) {
- if (stats.last_full_refresh) {
- const date = new Date(stats.last_full_refresh);
- lastRefreshEl.textContent = date.toLocaleString();
- } else {
- lastRefreshEl.textContent = 'Never';
- }
- }
-
- if (artistsStatEl) artistsStatEl.textContent = stats.artists.toLocaleString() || '0';
- if (albumsStatEl) albumsStatEl.textContent = stats.albums.toLocaleString() || '0';
- if (tracksStatEl) tracksStatEl.textContent = stats.tracks.toLocaleString() || '0';
- if (sizeStatEl) sizeStatEl.textContent = `${stats.database_size_mb.toFixed(2)} MB`;
-
- // Update the title of the tool card to show which server is active
- const toolCardTitle = document.querySelector('#db-updater-card .tool-card-title');
- if (toolCardTitle && stats.server_source) {
- const serverName = stats.server_source.charAt(0).toUpperCase() + stats.server_source.slice(1);
- toolCardTitle.textContent = `${serverName} Database Updater`;
- }
-}
-
-// --- Wishlist Count Functions ---
-
-async function updateWishlistCount() {
- if (socketConnected) return; // WebSocket handles this
- try {
- const response = await fetch('/api/wishlist/count');
- if (!response.ok) return;
-
- const data = await response.json();
- const count = data.count || 0;
-
- _updateHeroBtnCount('wishlist-button', 'wishlist-badge', count);
- // Update sidebar nav badge
- const wlNavBadge = document.getElementById('wishlist-nav-badge');
- if (wlNavBadge) {
- wlNavBadge.textContent = count;
- wlNavBadge.classList.toggle('hidden', count === 0);
- }
- const wishlistButton = document.getElementById('wishlist-button');
- if (wishlistButton) {
- if (count === 0) {
- wishlistButton.classList.remove('wishlist-active');
- wishlistButton.classList.add('wishlist-inactive');
- } else {
- wishlistButton.classList.remove('wishlist-inactive');
- wishlistButton.classList.add('wishlist-active');
- }
- }
-
- // Check for auto-initiated wishlist processes that user should see immediately
- await checkForAutoInitiatedWishlistProcess();
-
- } catch (error) {
- console.warn('Could not fetch wishlist count:', error);
- }
-}
-
-async function checkForAutoInitiatedWishlistProcess() {
- try {
- const playlistId = 'wishlist';
-
- // Only check if we're on the dashboard and no modal is currently visible
- if (currentPage !== 'dashboard') {
- return;
- }
-
- // Don't override if user has manually closed the modal during auto-processing
- if (WishlistModalState.wasUserClosed()) {
- return;
- }
-
- // Check for active wishlist processes
- const response = await fetch('/api/active-processes');
- if (!response.ok) return;
-
- const data = await response.json();
- const processes = data.active_processes || [];
- const serverWishlistProcess = processes.find(p => p.playlist_id === playlistId);
- const clientWishlistProcess = activeDownloadProcesses[playlistId];
-
- if (serverWishlistProcess && serverWishlistProcess.auto_initiated) {
- console.log('🤖 [Auto-Processing] Detected auto-initiated wishlist process during polling');
-
- // Only sync frontend state if needed, but don't auto-show modal
- const needsSync = !clientWishlistProcess ||
- clientWishlistProcess.batchId !== serverWishlistProcess.batch_id ||
- !clientWishlistProcess.modalElement ||
- !document.body.contains(clientWishlistProcess.modalElement);
-
- if (needsSync) {
- console.log('🔄 [Auto-Processing] Syncing frontend state for auto-processing (background mode)');
- await rehydrateModal(serverWishlistProcess, false); // Background sync only
- }
-
- // Note: Modal visibility is controlled by user interaction only
- // User must click wishlist button to see auto-processing progress
- }
-
- } catch (error) {
- console.warn('Error checking for auto-initiated wishlist process:', error);
- }
-}
-
-async function checkAndUpdateDbProgress() {
- if (socketConnected) return; // WebSocket handles this
- try {
- const response = await fetch('/api/database/update/status', {
- signal: AbortSignal.timeout(10000) // 10 second timeout
- });
- if (!response.ok) return;
-
- const state = await response.json();
- console.debug('📊 DB Status:', state.status, `${state.processed}/${state.total}`, `${state.progress.toFixed(1)}%`);
- updateDbProgressUI(state);
-
- // Start polling only if not already polling and status is running
- if (state.status === 'running' && !dbUpdateStatusInterval) {
- console.log('🔄 Starting database update polling (1 second interval)');
- dbUpdateStatusInterval = setInterval(checkAndUpdateDbProgress, 1000);
- }
-
- } catch (error) {
- console.warn('Could not fetch DB update status:', error);
- // Don't stop polling on network errors - keep trying
- }
-}
-
-function updateDbProgressFromData(data) {
- const prev = _lastToolStatus['db-update'];
- _lastToolStatus['db-update'] = data.status;
- if (prev !== undefined && data.status === prev && data.status !== 'running') return;
- updateDbProgressUI(data);
-}
-
-function updateDbProgressUI(state) {
- const button = document.getElementById('db-update-button');
- const phaseLabel = document.getElementById('db-phase-label');
- const progressLabel = document.getElementById('db-progress-label');
- const progressBar = document.getElementById('db-progress-bar');
- const refreshSelect = document.getElementById('db-refresh-type');
-
- if (!button || !phaseLabel || !progressLabel || !progressBar || !refreshSelect) return;
-
- if (state.status === 'running') {
- button.textContent = 'Stop Update';
- button.disabled = false;
- refreshSelect.disabled = true;
-
- phaseLabel.textContent = state.phase || 'Processing...';
- progressLabel.textContent = `${state.processed} / ${state.total} artists (${state.progress.toFixed(1)}%)`;
- progressBar.style.width = `${state.progress}%`;
- } else { // idle, finished, or error
- stopDbUpdatePolling();
- button.textContent = 'Update Database';
- button.disabled = false;
- refreshSelect.disabled = false;
-
- if (state.status === 'error') {
- phaseLabel.textContent = `Error: ${state.error_message}`;
- progressBar.style.backgroundColor = '#ff4444'; // Red for error
- } else {
- phaseLabel.textContent = state.phase || 'Idle';
- progressBar.style.backgroundColor = 'rgb(var(--accent-rgb))'; // Green for normal
- }
-
- if (state.status === 'finished' || state.status === 'error') {
- // Final stats refresh after completion/error
- setTimeout(fetchAndUpdateDbStats, 500);
- }
- }
-}
-
-// ===================================================================
-// TIDAL PLAYLIST MANAGEMENT (YouTube-style cards with Tidal colors)
-// ===================================================================
-
-async function loadTidalPlaylists() {
- const container = document.getElementById('tidal-playlist-container');
- const refreshBtn = document.getElementById('tidal-refresh-btn');
-
- container.innerHTML = `
-
- ${escapeHtml(download.name)}
- ${isCompleted ? 'Completed' : 'In Progress'}
- 🔄 Loading Tidal playlists...
`;
- refreshBtn.disabled = true;
- refreshBtn.textContent = '🔄 Loading...';
-
- try {
- const response = await fetch('/api/tidal/playlists');
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch Tidal playlists');
- }
-
- tidalPlaylists = await response.json();
- renderTidalPlaylists();
- tidalPlaylistsLoaded = true;
-
- console.log(`🎵 Loaded ${tidalPlaylists.length} Tidal playlists`);
-
- // Auto-mirror Tidal playlists: fetch tracks in background then mirror
- // Cards render instantly from metadata; tracks load per-playlist without blocking UI
- for (const p of tidalPlaylists) {
- // Skip if already have tracks from a previous load
- if (p.tracks && p.tracks.length > 0) {
- mirrorPlaylist('tidal', p.id, p.name, p.tracks.map(t => ({
- track_name: t.name || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artists || ''),
- album_name: typeof t.album === 'string' ? t.album : '', duration_ms: t.duration_ms || 0,
- source_track_id: t.id || ''
- })), { owner: p.owner, image_url: p.image_url, description: p.description });
- continue;
- }
- // Fetch tracks on-demand for this playlist
- try {
- const fullResp = await fetch(`/api/tidal/playlist/${p.id}`);
- if (fullResp.ok) {
- const fullData = await fullResp.json();
- if (fullData.tracks && fullData.tracks.length > 0) {
- p.tracks = fullData.tracks;
- p.track_count = fullData.tracks.length;
- // Update card track count in UI
- const countEl = document.querySelector(`#tidal-card-${p.id} .playlist-card-track-count`);
- if (countEl) countEl.textContent = `${fullData.tracks.length} tracks`;
- // Mirror with full track data
- mirrorPlaylist('tidal', p.id, p.name, fullData.tracks.map(t => ({
- track_name: t.name || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artists || ''),
- album_name: typeof t.album === 'string' ? t.album : '', duration_ms: t.duration_ms || 0,
- source_track_id: t.id || ''
- })), { owner: p.owner, image_url: p.image_url, description: p.description });
- }
- }
- } catch (e) {
- console.warn(`Failed to fetch tracks for Tidal playlist ${p.name}: ${e.message}`);
- }
- }
-
- // Load and apply saved discovery states from backend (like YouTube)
- await loadTidalPlaylistStatesFromBackend();
-
- } catch (error) {
- container.innerHTML = `❌ Error: ${error.message}
`;
- showToast(`Error loading Tidal playlists: ${error.message}`, 'error');
- } finally {
- refreshBtn.disabled = false;
- refreshBtn.textContent = '🔄 Refresh';
- }
-}
-
-function renderTidalPlaylists() {
- const container = document.getElementById('tidal-playlist-container');
- if (tidalPlaylists.length === 0) {
- container.innerHTML = `No Tidal playlists found.
`;
- return;
- }
-
- container.innerHTML = tidalPlaylists.map(p => {
- // Initialize state if not exists (fresh state like sync.py)
- if (!tidalPlaylistStates[p.id]) {
- tidalPlaylistStates[p.id] = {
- phase: 'fresh',
- playlist: p
- };
- }
-
- return createTidalCard(p);
- }).join('');
-
- // Add click handlers to cards
- tidalPlaylists.forEach(p => {
- const card = document.getElementById(`tidal-card-${p.id}`);
- if (card) {
- card.addEventListener('click', () => handleTidalCardClick(p.id));
- }
- });
-}
-
-function createTidalCard(playlist) {
- const state = tidalPlaylistStates[playlist.id];
- const phase = state.phase;
-
- // Get phase-specific button text (like YouTube cards)
- let buttonText = getActionButtonText(phase);
- let phaseText = getPhaseText(phase);
- let phaseColor = getPhaseColor(phase);
-
- return `
-
-
-
- `;
-}
-
-async function handleTidalCardClick(playlistId) {
- // Robust state validation
- const state = tidalPlaylistStates[playlistId];
- if (!state) {
- console.error(`❌ [Card Click] No state found for Tidal playlist: ${playlistId}`);
- showToast('Playlist state not found - try refreshing the page', 'error');
- return;
- }
-
- // Validate required state data
- if (!state.playlist) {
- console.error(`❌ [Card Click] No playlist data found for Tidal playlist: ${playlistId}`);
- showToast('Playlist data missing - try refreshing the page', 'error');
- return;
- }
-
- // Validate phase
- if (!state.phase) {
- console.warn(`⚠️ [Card Click] No phase set for Tidal playlist ${playlistId} - defaulting to 'fresh'`);
- state.phase = 'fresh';
- }
-
- console.log(`🎵 [Card Click] Tidal card clicked: ${playlistId}, Phase: ${state.phase}`);
-
- if (state.phase === 'fresh') {
- // Fetch tracks if not yet loaded (metadata-only listing doesn't include them)
- if (!state.playlist.tracks || state.playlist.tracks.length === 0) {
- console.log(`🎵 Fetching tracks for Tidal playlist: ${state.playlist.name}`);
- showLoadingOverlay(`Loading ${state.playlist.name}...`);
- try {
- const resp = await fetch(`/api/tidal/playlist/${playlistId}`);
- if (resp.ok) {
- const fullData = await resp.json();
- if (fullData.tracks && fullData.tracks.length > 0) {
- // Convert to Track-like objects for the discovery modal
- state.playlist.tracks = fullData.tracks.map(t => ({
- id: t.id, name: t.name, artists: t.artists || [],
- album: t.album || '', duration_ms: t.duration_ms || 0,
- track_number: t.track_number || 0
- }));
- // Update card count
- const countEl = document.querySelector(`#tidal-card-${playlistId} .playlist-card-track-count`);
- if (countEl) countEl.textContent = `${state.playlist.tracks.length} tracks`;
- }
- }
- } catch (e) {
- console.error(`Failed to fetch Tidal playlist tracks: ${e}`);
- hideLoadingOverlay();
- }
- }
-
- if (!state.playlist.tracks || state.playlist.tracks.length === 0) {
- hideLoadingOverlay();
- showToast('Could not load tracks for this playlist', 'error');
- return;
- }
-
- hideLoadingOverlay();
- console.log(`🎵 Ready with ${state.playlist.tracks.length} Tidal tracks for discovery`);
-
- // Open discovery modal - phase will be updated when discovery actually starts
- openTidalDiscoveryModal(playlistId, state.playlist);
-
- } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
- // Reopen existing modal with preserved discovery results (like GUI sync.py)
- console.log(`🎵 [Card Click] Opening Tidal discovery modal for ${state.phase} phase`);
-
- // Validate that we have discovery results to show
- if (state.phase === 'discovered' && (!state.discovery_results || state.discovery_results.length === 0)) {
- console.warn(`⚠️ [Card Click] Discovered phase but no discovery results found - attempting to reload from backend`);
-
- // Try to fetch from backend as fallback
- try {
- const stateResponse = await fetch(`/api/tidal/state/${playlistId}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- if (fullState.discovery_results) {
- // Merge backend state with current state
- state.discovery_results = fullState.discovery_results;
- state.spotify_matches = fullState.spotify_matches || state.spotify_matches;
- state.discovery_progress = fullState.discovery_progress || state.discovery_progress;
- tidalPlaylistStates[playlistId] = { ...tidalPlaylistStates[playlistId], ...state };
- console.log(`✅ [Card Click] Restored ${fullState.discovery_results.length} discovery results from backend`);
- }
- }
- } catch (error) {
- console.error(`❌ [Card Click] Failed to fetch discovery results from backend: ${error}`);
- }
- }
-
- openTidalDiscoveryModal(playlistId, state.playlist);
- } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
- // Open download modal if we have the converted playlist ID
- if (state.convertedSpotifyPlaylistId) {
- console.log(`🔍 [Card Click] Opening download modal for Tidal playlist: ${state.playlist.name} (phase: ${state.phase})`);
- // Check if modal already exists, if not create it
- if (activeDownloadProcesses[state.convertedSpotifyPlaylistId]) {
- const process = activeDownloadProcesses[state.convertedSpotifyPlaylistId];
- if (process.modalElement) {
- console.log(`📱 [Card Click] Showing existing download modal for ${state.phase} phase`);
- process.modalElement.style.display = 'flex';
- } else {
- console.warn(`⚠️ [Card Click] Download process exists but modal element missing - rehydrating`);
- await rehydrateTidalDownloadModal(playlistId, state);
- }
- } else {
- // Need to create the download modal - fetch the discovery results
- console.log(`🔧 [Card Click] Rehydrating Tidal download modal for ${state.phase} phase`);
- await rehydrateTidalDownloadModal(playlistId, state);
- }
- } else {
- console.error('❌ [Card Click] No converted Spotify playlist ID found for Tidal download modal');
- console.log('📊 [Card Click] Available state data:', Object.keys(state));
-
- // Fallback: try to open discovery modal if we have discovery results
- if (state.discovery_results && state.discovery_results.length > 0) {
- console.log(`🔄 [Card Click] Fallback: Opening discovery modal with ${state.discovery_results.length} results`);
- openTidalDiscoveryModal(playlistId, state.playlist);
- } else {
- showToast('Unable to open download modal - missing playlist data', 'error');
- }
- }
- }
-}
-
-async function rehydrateTidalDownloadModal(playlistId, state) {
- try {
- // Robust state validation for rehydration
- if (!state || !state.playlist) {
- console.error(`❌ [Rehydration] Invalid state data for Tidal playlist: ${playlistId}`);
- showToast('Cannot open download modal - invalid playlist data', 'error');
- return;
- }
-
- console.log(`💧 [Rehydration] Rehydrating Tidal download modal for: ${state.playlist.name}`);
-
- // Get discovery results from backend if not already loaded
- if (!state.discovery_results) {
- console.log(`🔍 Fetching discovery results from backend for Tidal playlist: ${playlistId}`);
- const stateResponse = await fetch(`/api/tidal/state/${playlistId}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- state.discovery_results = fullState.discovery_results;
- state.convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
- state.download_process_id = fullState.download_process_id;
- console.log(`✅ Loaded ${fullState.discovery_results?.length || 0} discovery results from backend`);
- } else {
- console.error('❌ Failed to fetch Tidal discovery results from backend');
- showToast('Error loading playlist data', 'error');
- return;
- }
- }
-
- // Extract Spotify tracks from discovery results
- const spotifyTracks = [];
- for (const result of state.discovery_results) {
- if (result.spotify_data) {
- spotifyTracks.push(result.spotify_data);
- }
- }
-
- if (spotifyTracks.length === 0) {
- console.error('❌ No Spotify tracks found for download modal');
- showToast('No Spotify matches found for download', 'error');
- return;
- }
-
- const virtualPlaylistId = state.convertedSpotifyPlaylistId;
- const playlistName = state.playlist.name;
-
- // Create the download modal
- await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
-
- // If we have a download process ID, set up the modal for the running state
- if (state.download_process_id) {
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process) {
- process.status = state.phase === 'download_complete' ? 'complete' : 'running';
- process.batchId = state.download_process_id;
-
- // Update UI based on phase
- const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-
- if (state.phase === 'downloading') {
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Start polling for live updates
- startModalDownloadPolling(virtualPlaylistId);
- console.log(`🔄 Started polling for active Tidal download: ${state.download_process_id}`);
- } else if (state.phase === 'download_complete') {
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'none';
- console.log(`✅ Showing completed Tidal download results: ${state.download_process_id}`);
-
- // For completed downloads, fetch the final results once to populate the modal
- try {
- const response = await fetch(`/api/playlists/${state.download_process_id}/download_status`);
- if (response.ok) {
- const data = await response.json();
- if (data.phase === 'complete' && data.tasks) {
- console.log(`📊 [Rehydration] Loading ${data.tasks.length} completed tasks for modal display`);
- // Process the completed tasks to update modal display
- updateCompletedModalResults(virtualPlaylistId, data);
- } else {
- console.warn(`⚠️ [Rehydration] Unexpected data from download_status: phase=${data.phase}, tasks=${data.tasks?.length || 0}`);
- }
- } else {
- console.error(`❌ [Rehydration] Failed to fetch download status: ${response.status} ${response.statusText}`);
- }
- } catch (error) {
- console.error(`❌ [Rehydration] Error fetching final results for completed download: ${error}`);
- // Show a user-friendly message but still allow modal to open
- showToast('Could not load download results - modal may show incomplete data', 'warning', 3000);
- }
- }
- }
- }
-
- console.log(`✅ Successfully rehydrated Tidal download modal for: ${state.playlist.name}`);
-
- } catch (error) {
- console.error(`❌ Error rehydrating Tidal download modal:`, error);
- showToast('Error opening download modal', 'error');
- }
-}
-
-function updateCompletedModalResults(playlistId, downloadData) {
- /**
- * Update a completed download modal with final results
- * This reuses the existing status polling logic but applies it once for completed state
- */
- console.log(`📊 [Completed Results] Updating modal ${playlistId} with final download results`);
-
- // Validate input data
- if (!downloadData || !downloadData.tasks) {
- console.error(`❌ [Completed Results] Invalid download data for playlist ${playlistId}:`, downloadData);
- return;
- }
-
- try {
- // Update analysis progress to 100%
- const analysisProgressFill = document.getElementById(`analysis-progress-fill-${playlistId}`);
- const analysisProgressText = document.getElementById(`analysis-progress-text-${playlistId}`);
- if (analysisProgressFill) analysisProgressFill.style.width = '100%';
- if (analysisProgressText) analysisProgressText.textContent = 'Analysis complete!';
-
- // Update analysis results and stats
- if (downloadData.analysis_results) {
- updateTrackAnalysisResults(playlistId, downloadData.analysis_results);
- const foundCount = downloadData.analysis_results.filter(r => r.found).length;
- const missingCount = downloadData.analysis_results.filter(r => !r.found).length;
-
- const statFound = document.getElementById(`stat-found-${playlistId}`);
- const statMissing = document.getElementById(`stat-missing-${playlistId}`);
- if (statFound) statFound.textContent = foundCount;
- if (statMissing) statMissing.textContent = missingCount;
- }
-
- // Process completed tasks to update individual track statuses
- const missingTracks = (downloadData.analysis_results || []).filter(r => !r.found);
- let completedCount = 0;
- let failedOrCancelledCount = 0;
- let notFoundCount = 0;
-
- (downloadData.tasks || []).forEach(task => {
- const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${task.track_index}"]`);
- if (!row) return;
-
- row.dataset.taskId = task.task_id;
- const statusEl = document.getElementById(`download-${playlistId}-${task.track_index}`);
- const actionsEl = document.getElementById(`actions-${playlistId}-${task.track_index}`);
-
- let statusText = '';
- switch (task.status) {
- case 'pending': statusText = '⏸️ Pending'; break;
- case 'searching': statusText = '🔍 Searching...'; break;
- case 'downloading': statusText = `⏬ Downloading... ${Math.round(task.progress || 0)}%`; break;
- case 'post_processing': statusText = '⌛ Processing...'; break; // NEW VERIFICATION WORKFLOW
- case 'completed': statusText = '✅ Completed'; completedCount++; break;
- case 'not_found': statusText = '🔇 Not Found'; notFoundCount++; break;
- case 'failed': statusText = '❌ Failed'; failedOrCancelledCount++; break;
- case 'cancelled': statusText = '🚫 Cancelled'; failedOrCancelledCount++; break;
- default: statusText = `⚪ ${task.status}`; break;
- }
-
- if (statusEl) {
- statusEl.textContent = statusText;
- if ((task.status === 'failed' || task.status === 'cancelled' || task.status === 'not_found') && task.error_message) {
- statusEl.classList.add('has-error-tooltip');
- statusEl.dataset.errorMsg = task.error_message;
- _ensureErrorTooltipListeners(statusEl);
- }
- if (task.status === 'not_found' && task.has_candidates) {
- statusEl.classList.add('has-candidates');
- statusEl.dataset.taskId = task.task_id;
- _ensureCandidatesClickListener(statusEl);
- }
- }
- if (actionsEl) actionsEl.innerHTML = '-'; // Remove action buttons for completed tasks
- });
-
- // Update download progress to final state
- const totalFinished = completedCount + failedOrCancelledCount + notFoundCount;
- const missingCount = missingTracks.length;
- const progressPercent = missingCount > 0 ? (totalFinished / missingCount) * 100 : 100;
-
- const downloadProgressFill = document.getElementById(`download-progress-fill-${playlistId}`);
- const downloadProgressText = document.getElementById(`download-progress-text-${playlistId}`);
- const statDownloaded = document.getElementById(`stat-downloaded-${playlistId}`);
-
- if (downloadProgressFill) downloadProgressFill.style.width = `${progressPercent}%`;
- if (downloadProgressText) downloadProgressText.textContent = `${completedCount}/${missingCount} completed (${progressPercent.toFixed(0)}%)`;
- if (statDownloaded) statDownloaded.textContent = completedCount;
-
- console.log(`✅ [Completed Results] Updated modal with ${completedCount} completed, ${notFoundCount} not found, ${failedOrCancelledCount} failed tasks`);
-
- } catch (error) {
- console.error(`❌ [Completed Results] Error updating completed modal results:`, error);
- }
-}
-
-function updateTidalCardPhase(playlistId, phase) {
- const state = tidalPlaylistStates[playlistId];
- if (!state) return;
-
- state.phase = phase;
-
- // Re-render the card with new phase
- const card = document.getElementById(`tidal-card-${playlistId}`);
- if (card) {
- const oldButtonText = card.querySelector('.playlist-card-action-btn')?.textContent || 'unknown';
- const newCardHtml = createTidalCard(state.playlist);
- card.outerHTML = newCardHtml;
-
- // Verify the card was actually updated
- const updatedCard = document.getElementById(`tidal-card-${playlistId}`);
- const newButtonText = updatedCard?.querySelector('.playlist-card-action-btn')?.textContent || 'unknown';
-
- console.log(`🔄 [Card Update] Re-rendered Tidal card ${playlistId}:`);
- console.log(` 📊 Phase: ${phase}`);
- console.log(` 🔘 Button text: "${oldButtonText}" → "${newButtonText}"`);
- console.log(` ✅ Expected: "${getActionButtonText(phase)}"`);
-
- if (newButtonText !== getActionButtonText(phase)) {
- console.error(`❌ [Card Update] Button text mismatch! Expected "${getActionButtonText(phase)}", got "${newButtonText}"`);
- }
-
- // Re-attach click handler
- const newCard = document.getElementById(`tidal-card-${playlistId}`);
- if (newCard) {
- newCard.addEventListener('click', () => handleTidalCardClick(playlistId));
- console.debug(`🔗 [Card Update] Reattached click handler for Tidal card: ${playlistId}`);
- } else {
- console.error(`❌ [Card Update] Failed to find new card after rendering: tidal-card-${playlistId}`);
- }
-
- // If we have sync progress and we're in sync/sync_complete phase, restore it
- if ((phase === 'syncing' || phase === 'sync_complete') && state.lastSyncProgress) {
- setTimeout(() => {
- updateTidalCardSyncProgress(playlistId, state.lastSyncProgress);
- }, 0);
- }
- }
-
- console.log(`🎵 Updated Tidal card phase: ${playlistId} -> ${phase}`);
-}
-
-async function openTidalDiscoveryModal(playlistId, playlistData) {
- console.log(`🎵 Opening Tidal discovery modal (reusing YouTube modal): ${playlistData.name}`);
-
- // Create a fake YouTube-style urlHash for the modal system
- const fakeUrlHash = `tidal_${playlistId}`;
-
- // Get current Tidal card state to check if discovery is already done or in progress
- const tidalCardState = tidalPlaylistStates[playlistId];
- const isAlreadyDiscovered = tidalCardState && (tidalCardState.phase === 'discovered' || tidalCardState.phase === 'syncing' || tidalCardState.phase === 'sync_complete');
- const isCurrentlyDiscovering = tidalCardState && tidalCardState.phase === 'discovering';
-
- // Prepare discovery results in the correct format for modal
- let transformedResults = [];
- let actualMatches = 0;
- if (isAlreadyDiscovered && tidalCardState.discovery_results) {
- transformedResults = tidalCardState.discovery_results.map((result, index) => {
- // Check multiple status formats
- const isFound = result.status === 'found' ||
- result.status === '✅ Found' ||
- result.status_class === 'found' ||
- result.spotify_data ||
- result.spotify_track;
- if (isFound) actualMatches++;
-
- return {
- index: index,
- yt_track: result.tidal_track ? result.tidal_track.name : 'Unknown',
- yt_artist: result.tidal_track ? (result.tidal_track.artists ? result.tidal_track.artists.join(', ') : 'Unknown') : 'Unknown',
- status: isFound ? '✅ Found' : '❌ Not Found',
- status_class: isFound ? 'found' : 'not-found',
- spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
- spotify_artist: result.spotify_data && result.spotify_data.artists ?
- (Array.isArray(result.spotify_data.artists)
- ? result.spotify_data.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-'
- : result.spotify_data.artists)
- : (result.spotify_artist || '-'),
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
- spotify_data: result.spotify_data, // Pass through spotify_data
- spotify_id: result.spotify_id, // Pass through spotify_id
- manual_match: result.manual_match // Pass through manual match flag
- };
- });
- console.log(`🎵 Tidal modal: Calculated ${actualMatches} matches from ${transformedResults.length} results`);
- }
-
- // Create YouTube-compatible state structure
- const modalPhase = tidalCardState ? tidalCardState.phase : 'fresh';
- youtubePlaylistStates[fakeUrlHash] = {
- phase: modalPhase,
- playlist: {
- name: playlistData.name,
- tracks: playlistData.tracks
- },
- is_tidal_playlist: true, // Flag to identify this as Tidal
- tidal_playlist_id: playlistId,
- discovery_progress: isAlreadyDiscovered ? 100 : 0,
- spotify_matches: isAlreadyDiscovered ? actualMatches : 0, // Backend format (snake_case)
- spotifyMatches: isAlreadyDiscovered ? actualMatches : 0, // Frontend format (camelCase) - for button logic
- spotify_total: playlistData.tracks.length,
- discovery_results: transformedResults,
- discoveryResults: transformedResults, // Both formats for compatibility
- discoveryProgress: isAlreadyDiscovered ? 100 : 0 // Frontend format for modal progress display
- };
-
- // Only start discovery if not already discovered AND not currently discovering
- if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
- // Start Tidal discovery process automatically (like sync.py)
- try {
- console.log(`🔍 Starting Tidal discovery for: ${playlistData.name}`);
-
- const response = await fetch(`/api/tidal/discovery/start/${playlistId}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- console.error('❌ Error starting Tidal discovery:', result.error);
- showToast(`Error starting discovery: ${result.error}`, 'error');
- return;
- }
-
- console.log('✅ Tidal discovery started, beginning polling...');
-
- // Update phase to discovering now that backend discovery is actually started
- tidalPlaylistStates[playlistId].phase = 'discovering';
- updateTidalCardPhase(playlistId, 'discovering');
-
- // Update modal phase to match
- youtubePlaylistStates[fakeUrlHash].phase = 'discovering';
-
- // Start polling for progress
- startTidalDiscoveryPolling(fakeUrlHash, playlistId);
-
- } catch (error) {
- console.error('❌ Error starting Tidal discovery:', error);
- showToast(`Error starting discovery: ${error.message}`, 'error');
- }
- } else if (isCurrentlyDiscovering) {
- // Resume polling if discovery is already in progress (like YouTube)
- console.log(`🔄 Resuming Tidal discovery polling for: ${playlistData.name}`);
- startTidalDiscoveryPolling(fakeUrlHash, playlistId);
- } else if (tidalCardState && tidalCardState.phase === 'syncing') {
- // Resume sync polling if sync is in progress
- console.log(`🔄 Resuming Tidal sync polling for: ${playlistData.name}`);
- startTidalSyncPolling(fakeUrlHash);
- } else {
- console.log('✅ Using existing results - no need to re-discover');
- }
-
- // Reuse YouTube discovery modal (exact sync.py pattern)
- openYouTubeDiscoveryModal(fakeUrlHash);
-}
-
-function startTidalDiscoveryPolling(fakeUrlHash, playlistId) {
- console.log(`🔄 Starting Tidal discovery polling for: ${playlistId}`);
-
- // Stop any existing polling
- if (activeYouTubePollers[fakeUrlHash]) {
- clearInterval(activeYouTubePollers[fakeUrlHash]);
- }
-
- // Phase 5: Subscribe via WebSocket
- if (socketConnected) {
- socket.emit('discovery:subscribe', { ids: [playlistId] });
- _discoveryProgressCallbacks[playlistId] = (data) => {
- if (data.error) {
- if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
- return;
- }
- // Transform to YouTube modal format
- const transformed = {
- progress: data.progress, spotify_matches: data.spotify_matches, spotify_total: data.spotify_total,
- complete: data.complete,
- results: (data.results || []).map((r, i) => {
- const isWingIt = r.wing_it_fallback || r.status_class === 'wing-it';
- const isFound = !isWingIt && (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found' || r.spotify_data || r.spotify_track);
- return {
- index: i, yt_track: r.tidal_track ? r.tidal_track.name : 'Unknown',
- yt_artist: r.tidal_track ? (r.tidal_track.artists ? r.tidal_track.artists.join(', ') : 'Unknown') : 'Unknown',
- status: isWingIt ? '🎯 Wing It' : (isFound ? '✅ Found' : '❌ Not Found'),
- status_class: isWingIt ? 'wing-it' : (isFound ? 'found' : 'not-found'),
- spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
- spotify_artist: r.spotify_data && r.spotify_data.artists
- ? (Array.isArray(r.spotify_data.artists)
- ? (r.spotify_data.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-')
- : r.spotify_data.artists)
- : (r.spotify_artist || '-'),
- spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
- spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match,
- wing_it_fallback: isWingIt
- };
- })
- };
- const st = youtubePlaylistStates[fakeUrlHash];
- if (st) {
- st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
- st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
- st.discovery_results = data.results; st.discoveryResults = transformed.results;
- st.phase = data.phase;
- updateYouTubeDiscoveryModal(fakeUrlHash, transformed);
- }
- if (tidalPlaylistStates[playlistId]) {
- tidalPlaylistStates[playlistId].phase = data.phase;
- tidalPlaylistStates[playlistId].discovery_results = data.results;
- tidalPlaylistStates[playlistId].spotify_matches = data.spotify_matches;
- tidalPlaylistStates[playlistId].discovery_progress = data.progress;
- updateTidalCardPhase(playlistId, data.phase);
- }
- updateTidalCardProgress(playlistId, data);
- if (data.complete) {
- if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
- }
- };
- }
-
- const pollInterval = setInterval(async () => {
- // Always poll — no dedicated WebSocket events for discovery progress
- try {
- const response = await fetch(`/api/tidal/discovery/status/${playlistId}`);
- const status = await response.json();
-
- if (status.error) {
- console.error('❌ Error polling Tidal discovery status:', status.error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[fakeUrlHash];
- return;
- }
-
- // Transform Tidal results to YouTube modal format first
- const transformedStatus = {
- progress: status.progress,
- spotify_matches: status.spotify_matches,
- spotify_total: status.spotify_total,
- complete: status.complete,
- results: status.results.map((result, index) => {
- const isFound = result.status === 'found' ||
- result.status === '✅ Found' ||
- result.status_class === 'found' ||
- result.spotify_data ||
- result.spotify_track;
-
- return {
- index: index,
- yt_track: result.tidal_track ? result.tidal_track.name : 'Unknown',
- yt_artist: result.tidal_track ? (result.tidal_track.artists ? result.tidal_track.artists.join(', ') : 'Unknown') : 'Unknown',
- status: isFound ? '✅ Found' : '❌ Not Found',
- status_class: isFound ? 'found' : 'not-found',
- spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
- spotify_artist: result.spotify_data && result.spotify_data.artists
- ? (Array.isArray(result.spotify_data.artists)
- ? (result.spotify_data.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-')
- : result.spotify_data.artists)
- : (result.spotify_artist || '-'),
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
- spotify_data: result.spotify_data, // Pass through
- spotify_id: result.spotify_id, // Pass through
- manual_match: result.manual_match // Pass through
- };
- })
- };
-
- // Update fake YouTube state with Tidal discovery results
- const state = youtubePlaylistStates[fakeUrlHash];
- if (state) {
- state.discovery_progress = status.progress; // Backend format
- state.discoveryProgress = status.progress; // Frontend format - for modal progress display
- state.spotify_matches = status.spotify_matches; // Backend format
- state.spotifyMatches = status.spotify_matches; // Frontend format - for button logic
- state.discovery_results = status.results; // Backend format
- state.discoveryResults = transformedStatus.results; // Frontend format - for button logic
- state.phase = status.phase;
-
- // Update modal with transformed data (reuse YouTube modal update logic)
- updateYouTubeDiscoveryModal(fakeUrlHash, transformedStatus);
-
- // Update Tidal card phase and save discovery results FIRST
- if (tidalPlaylistStates[playlistId]) {
- tidalPlaylistStates[playlistId].phase = status.phase;
- tidalPlaylistStates[playlistId].discovery_results = status.results;
- tidalPlaylistStates[playlistId].spotify_matches = status.spotify_matches;
- tidalPlaylistStates[playlistId].discovery_progress = status.progress;
- updateTidalCardPhase(playlistId, status.phase);
- }
-
- // Update Tidal card progress AFTER phase update to avoid being overwritten
- updateTidalCardProgress(playlistId, status);
-
- console.log(`🔄 Tidal discovery progress: ${status.progress}% (${status.spotify_matches}/${status.spotify_total} found)`);
- }
-
- // Stop polling when complete
- if (status.complete) {
- console.log(`✅ Tidal discovery complete: ${status.spotify_matches}/${status.spotify_total} tracks found`);
- clearInterval(pollInterval);
- delete activeYouTubePollers[fakeUrlHash];
- }
-
- } catch (error) {
- console.error('❌ Error polling Tidal discovery:', error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[fakeUrlHash];
- }
- }, 1000); // Poll every second like YouTube
-
- // Store poller reference (reuse YouTube poller storage)
- activeYouTubePollers[fakeUrlHash] = pollInterval;
-}
-
-async function loadTidalPlaylistStatesFromBackend() {
- // Load all stored Tidal playlist discovery states from backend (similar to YouTube hydration)
- try {
- console.log('🎵 Loading Tidal playlist states from backend...');
-
- const response = await fetch('/api/tidal/playlists/states');
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch Tidal playlist states');
- }
-
- const data = await response.json();
- const states = data.states || [];
-
- console.log(`🎵 Found ${states.length} stored Tidal playlist states in backend`);
-
- if (states.length === 0) {
- console.log('🎵 No Tidal playlist states to hydrate');
- return;
- }
-
- // Apply states to existing playlist cards
- for (const stateInfo of states) {
- await applyTidalPlaylistState(stateInfo);
- }
-
- // Rehydrate download modals for Tidal playlists in downloading/download_complete phases
- for (const stateInfo of states) {
- if ((stateInfo.phase === 'downloading' || stateInfo.phase === 'download_complete') &&
- stateInfo.converted_spotify_playlist_id && stateInfo.download_process_id) {
-
- const convertedPlaylistId = stateInfo.converted_spotify_playlist_id;
-
- if (!activeDownloadProcesses[convertedPlaylistId]) {
- console.log(`💧 Rehydrating download modal for Tidal playlist: ${stateInfo.playlist_id}`);
- try {
- // Get the playlist data
- const playlistData = tidalPlaylists.find(p => p.id === stateInfo.playlist_id);
- if (!playlistData) {
- console.warn(`⚠️ Playlist data not found for rehydration: ${stateInfo.playlist_id}`);
- continue;
- }
-
- // Create the download modal using the Tidal-specific function
- const spotifyTracks = tidalPlaylistStates[stateInfo.playlist_id]?.discovery_results
- ?.filter(result => result.spotify_data)
- ?.map(result => result.spotify_data) || [];
-
- if (spotifyTracks.length > 0) {
- await openDownloadMissingModalForTidal(
- convertedPlaylistId,
- playlistData.name,
- spotifyTracks
- );
-
- // Set the modal to running state with the correct batch ID
- const process = activeDownloadProcesses[convertedPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = stateInfo.download_process_id;
-
- // Update UI to running state
- const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Start polling for this process
- startModalDownloadPolling(convertedPlaylistId);
-
- console.log(`✅ Rehydrated Tidal download modal for batch ${stateInfo.download_process_id}`);
- }
- } else {
- console.warn(`⚠️ No Spotify tracks found for Tidal playlist rehydration: ${stateInfo.playlist_id}`);
- }
- } catch (error) {
- console.error(`❌ Error rehydrating Tidal download modal for ${stateInfo.playlist_id}:`, error);
- }
- }
- }
- }
-
- console.log('✅ Tidal playlist states loaded and applied');
-
- } catch (error) {
- console.error('❌ Error loading Tidal playlist states:', error);
- }
-}
-
-async function applyTidalPlaylistState(stateInfo) {
- const { playlist_id, phase, discovery_progress, spotify_matches, discovery_results, converted_spotify_playlist_id, download_process_id } = stateInfo;
-
- try {
- console.log(`🎵 Applying saved state for Tidal playlist: ${playlist_id}, Phase: ${phase}`);
-
- // Find the playlist data from the loaded playlists
- const playlistData = tidalPlaylists.find(p => p.id === playlist_id);
- if (!playlistData) {
- console.warn(`⚠️ Playlist data not found for state ${playlist_id} - skipping`);
- return;
- }
-
- // Update local state
- if (!tidalPlaylistStates[playlist_id]) {
- // Initialize state if it doesn't exist
- tidalPlaylistStates[playlist_id] = {
- playlist: playlistData,
- phase: 'fresh'
- };
- }
-
- // Update with backend state
- tidalPlaylistStates[playlist_id].phase = phase;
- tidalPlaylistStates[playlist_id].discovery_progress = discovery_progress;
- tidalPlaylistStates[playlist_id].spotify_matches = spotify_matches;
- tidalPlaylistStates[playlist_id].discovery_results = discovery_results;
- tidalPlaylistStates[playlist_id].convertedSpotifyPlaylistId = converted_spotify_playlist_id;
- tidalPlaylistStates[playlist_id].download_process_id = download_process_id;
- tidalPlaylistStates[playlist_id].playlist = playlistData; // Ensure playlist data is set
-
- // Fetch full discovery results for non-fresh playlists (matching YouTube pattern)
- if (phase !== 'fresh' && phase !== 'discovering') {
- try {
- console.log(`🔍 Fetching full discovery results for Tidal playlist: ${playlistData.name}`);
- const stateResponse = await fetch(`/api/tidal/state/${playlist_id}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- console.log(`📋 Retrieved full Tidal state with ${fullState.discovery_results?.length || 0} discovery results`);
-
- // Store full discovery results in local state (matching YouTube pattern)
- if (fullState.discovery_results && tidalPlaylistStates[playlist_id]) {
- tidalPlaylistStates[playlist_id].discovery_results = fullState.discovery_results;
- tidalPlaylistStates[playlist_id].discovery_progress = fullState.discovery_progress;
- tidalPlaylistStates[playlist_id].spotify_matches = fullState.spotify_matches;
- tidalPlaylistStates[playlist_id].convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
- tidalPlaylistStates[playlist_id].download_process_id = fullState.download_process_id;
- console.log(`✅ Restored ${fullState.discovery_results.length} discovery results for Tidal playlist: ${playlistData.name}`);
- }
- } else {
- console.warn(`⚠️ Could not fetch full discovery results for Tidal playlist: ${playlistData.name}`);
- }
- } catch (error) {
- console.warn(`⚠️ Error fetching full discovery results for Tidal playlist ${playlistData.name}:`, error.message);
- }
- }
-
- // Update the card UI to reflect the saved state
- updateTidalCardPhase(playlist_id, phase);
-
- // Update card progress if we have discovery results
- if (phase === 'discovered' && tidalPlaylistStates[playlist_id]) {
- const progressInfo = {
- spotify_total: playlistData.track_count || playlistData.tracks?.length || 0,
- spotify_matches: tidalPlaylistStates[playlist_id].spotify_matches || 0
- };
- updateTidalCardProgress(playlist_id, progressInfo);
- }
-
- // Handle active polling resumption (matching YouTube/Beatport pattern)
- if (phase === 'discovering') {
- console.log(`🔍 Resuming discovery polling for Tidal: ${playlistData.name}`);
- const fakeUrlHash = `tidal_${playlist_id}`;
- startTidalDiscoveryPolling(fakeUrlHash, playlist_id);
- } else if (phase === 'syncing') {
- console.log(`🔄 Resuming sync polling for Tidal: ${playlistData.name}`);
- const fakeUrlHash = `tidal_${playlist_id}`;
- startTidalSyncPolling(fakeUrlHash);
- }
-
- console.log(`✅ Applied saved state for Tidal playlist: ${playlist_id} -> ${phase}`);
-
- } catch (error) {
- console.error(`❌ Error applying Tidal playlist state for ${playlist_id}:`, error);
- }
-}
-
-function updateTidalCardProgress(playlistId, progress) {
- const state = tidalPlaylistStates[playlistId];
- if (!state) return;
-
- const card = document.getElementById(`tidal-card-${playlistId}`);
- if (!card) return;
-
- const progressElement = card.querySelector('.playlist-card-progress');
- if (!progressElement) return;
-
- const total = progress.spotify_total || 0;
- const matches = progress.spotify_matches || 0;
- const failed = total - matches;
- const percentage = total > 0 ? Math.round((matches / total) * 100) : 0;
-
- progressElement.textContent = `♪ ${total} / ✓ ${matches} / ✗ ${failed} / ${percentage}%`;
- progressElement.classList.remove('hidden'); // Show progress during discovery
-
- console.log('🎵 Updated Tidal card progress:', playlistId, `${matches}/${total} (${percentage}%)`);
-}
-
-// ===============================
-// TIDAL SYNC FUNCTIONALITY
-// ===============================
-
-async function startTidalPlaylistSync(urlHash) {
- try {
- console.log('🎵 Starting Tidal playlist sync:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_tidal_playlist) {
- console.error('❌ Invalid Tidal playlist state for sync');
- return;
- }
-
- const playlistId = state.tidal_playlist_id;
- const response = await fetch(`/api/tidal/sync/start/${playlistId}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error starting sync: ${result.error}`, 'error');
- return;
- }
-
- // Capture sync_playlist_id for WebSocket subscription
- const syncPlaylistId = result.sync_playlist_id;
- if (state) state.syncPlaylistId = syncPlaylistId;
-
- // Update card and modal to syncing phase
- updateTidalCardPhase(playlistId, 'syncing');
-
- // Update modal buttons if modal is open
- updateTidalModalButtons(urlHash, 'syncing');
-
- // Start sync polling
- startTidalSyncPolling(urlHash, syncPlaylistId);
-
- showToast('Tidal playlist sync started!', 'success');
-
- } catch (error) {
- console.error('❌ Error starting Tidal sync:', error);
- showToast(`Error starting sync: ${error.message}`, 'error');
- }
-}
-
-function startTidalSyncPolling(urlHash, syncPlaylistId) {
- // Stop any existing polling
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- }
-
- const state = youtubePlaylistStates[urlHash];
- const playlistId = state.tidal_playlist_id;
-
- // Resolve syncPlaylistId from argument or stored state
- syncPlaylistId = syncPlaylistId || (state && state.syncPlaylistId);
-
- // Phase 6: Subscribe via WebSocket
- if (socketConnected && syncPlaylistId) {
- socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
- _syncProgressCallbacks[syncPlaylistId] = (data) => {
- const progress = data.progress || {};
- updateTidalCardSyncProgress(playlistId, progress);
- updateTidalModalSyncProgress(urlHash, progress);
-
- if (data.status === 'finished') {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
- delete _syncProgressCallbacks[syncPlaylistId];
- if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'sync_complete';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
- updateTidalCardPhase(playlistId, 'sync_complete');
- updateTidalModalButtons(urlHash, 'sync_complete');
- showToast('Tidal playlist sync complete!', 'success');
- } else if (data.status === 'error' || data.status === 'cancelled') {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
- delete _syncProgressCallbacks[syncPlaylistId];
- if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'discovered';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
- updateTidalCardPhase(playlistId, 'discovered');
- updateTidalModalButtons(urlHash, 'discovered');
- showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
- }
- };
- }
-
- // Define the polling function (HTTP fallback)
- const pollFunction = async () => {
- if (socketConnected) return; // Phase 6: WS handles updates
- try {
- const response = await fetch(`/api/tidal/sync/status/${playlistId}`);
- const status = await response.json();
-
- if (status.error) {
- console.error('❌ Error polling Tidal sync status:', status.error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- return;
- }
-
- updateTidalCardSyncProgress(playlistId, status.progress);
- updateTidalModalSyncProgress(urlHash, status.progress);
-
- if (status.complete) {
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'sync_complete';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
- updateTidalCardPhase(playlistId, 'sync_complete');
- updateTidalModalButtons(urlHash, 'sync_complete');
- showToast('Tidal playlist sync complete!', 'success');
- } else if (status.sync_status === 'error') {
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'discovered';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
- updateTidalCardPhase(playlistId, 'discovered');
- updateTidalModalButtons(urlHash, 'discovered');
- showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
- }
- } catch (error) {
- console.error('❌ Error polling Tidal sync:', error);
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- }
- }
- };
-
- // Run immediately to get current status (skip if WS active)
- if (!socketConnected) pollFunction();
-
- // Then continue polling at regular intervals
- const pollInterval = setInterval(pollFunction, 1000);
- activeYouTubePollers[urlHash] = pollInterval;
-}
-
-async function cancelTidalSync(urlHash) {
- try {
- console.log('❌ Cancelling Tidal sync:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_tidal_playlist) {
- console.error('❌ Invalid Tidal playlist state');
- return;
- }
-
- const playlistId = state.tidal_playlist_id;
- const response = await fetch(`/api/tidal/sync/cancel/${playlistId}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error cancelling sync: ${result.error}`, 'error');
- return;
- }
-
- // Stop polling
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- }
-
- // Phase 6: Clean up WS subscription
- const syncId = state && state.syncPlaylistId;
- if (syncId && _syncProgressCallbacks[syncId]) {
- if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncId] });
- delete _syncProgressCallbacks[syncId];
- }
-
- // Revert to discovered phase
- updateTidalCardPhase(playlistId, 'discovered');
- updateTidalModalButtons(urlHash, 'discovered');
-
- showToast('Tidal sync cancelled', 'info');
-
- } catch (error) {
- console.error('❌ Error cancelling Tidal sync:', error);
- showToast(`Error cancelling sync: ${error.message}`, 'error');
- }
-}
-
-function updateTidalCardSyncProgress(playlistId, progress) {
- const state = tidalPlaylistStates[playlistId];
- if (!state || !state.playlist || !progress) return;
-
- // Save the progress for later restoration
- state.lastSyncProgress = progress;
-
- const card = document.getElementById(`tidal-card-${playlistId}`);
- if (!card) return;
-
- const progressElement = card.querySelector('.playlist-card-progress');
-
- // Build clean status counter HTML exactly like YouTube cards
- let statusCounterHTML = '';
- if (progress && progress.total_tracks > 0) {
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
- const total = progress.total_tracks || 0;
- const processed = matched + failed;
- const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
- statusCounterHTML = `
-
-
- ${escapeHtml(playlist.name)}
-
- ${playlist.track_count} tracks
- ${phaseText}
-
-
-
-
-
-
- ♪ ${total}
- /
- ✓ ${matched}
- /
- ✗ ${failed}
- (${percentage}%)
-
- `;
- }
-
- // Only update if we have valid sync progress, otherwise preserve existing discovery results
- if (statusCounterHTML) {
- progressElement.innerHTML = statusCounterHTML;
- }
-
- console.log(`🎵 Updated Tidal card sync progress: ♪ ${progress?.total_tracks || 0} / ✓ ${progress?.matched_tracks || 0} / ✗ ${progress?.failed_tracks || 0}`);
-}
-
-function updateTidalModalSyncProgress(urlHash, progress) {
- const statusDisplay = document.getElementById(`tidal-sync-status-${urlHash}`);
- if (!statusDisplay || !progress) return;
-
- console.log(`📊 Updating Tidal modal sync progress for ${urlHash}:`, progress);
-
- // Update individual counters exactly like YouTube sync
- const totalEl = document.getElementById(`tidal-total-${urlHash}`);
- const matchedEl = document.getElementById(`tidal-matched-${urlHash}`);
- const failedEl = document.getElementById(`tidal-failed-${urlHash}`);
- const percentageEl = document.getElementById(`tidal-percentage-${urlHash}`);
-
- const total = progress.total_tracks || 0;
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
-
- if (totalEl) totalEl.textContent = total;
- if (matchedEl) matchedEl.textContent = matched;
- if (failedEl) failedEl.textContent = failed;
-
- // Calculate percentage like YouTube sync
- if (total > 0) {
- const processed = matched + failed;
- const percentage = Math.round((processed / total) * 100);
- if (percentageEl) percentageEl.textContent = percentage;
- }
-
- console.log(`📊 Tidal modal updated: ♪ ${total} / ✓ ${matched} / ✗ ${failed} (${Math.round((matched + failed) / total * 100)}%)`);
-}
-
-function updateTidalModalButtons(urlHash, phase) {
- const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (!modal) return;
-
- const footerLeft = modal.querySelector('.modal-footer-left');
- if (footerLeft) {
- footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
- }
-}
-
-async function startTidalDownloadMissing(urlHash) {
- try {
- console.log('🔍 Starting download missing tracks for Tidal playlist:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_tidal_playlist) {
- console.error('❌ Invalid Tidal playlist state for download');
- return;
- }
-
- // Tidal reuses youtubePlaylistStates infrastructure, so get results from there
- const discoveryResults = state.discoveryResults || state.discovery_results;
-
- if (!discoveryResults) {
- showToast('No discovery results available for download', 'error');
- return;
- }
-
- // Convert Tidal discovery results to Spotify tracks format (same as YouTube)
- const spotifyTracks = [];
- for (const result of discoveryResults) {
- if (result.spotify_data) {
- spotifyTracks.push(result.spotify_data);
- } else if (result.spotify_track && result.status_class === 'found') {
- // Build from individual fields (automatic discovery format)
- // Convert album to proper object format for wishlist compatibility
- const albumData = result.spotify_album || 'Unknown Album';
- const albumObject = typeof albumData === 'object' && albumData !== null
- ? albumData
- : {
- name: typeof albumData === 'string' ? albumData : 'Unknown Album',
- album_type: 'album',
- images: []
- };
-
- spotifyTracks.push({
- id: result.spotify_id || 'unknown',
- name: result.spotify_track || 'Unknown Track',
- artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
- album: albumObject,
- duration_ms: 0
- });
- }
- }
-
- if (spotifyTracks.length === 0) {
- showToast('No Spotify matches found for download', 'error');
- return;
- }
-
- // Create a virtual playlist for the download system
- const virtualPlaylistId = `tidal_${state.tidal_playlist_id}`;
- const playlistName = state.playlist.name;
-
- // Store reference for card navigation (same as YouTube)
- state.convertedSpotifyPlaylistId = virtualPlaylistId;
-
- // Close the discovery modal if it's open (same as YouTube)
- const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (discoveryModal) {
- discoveryModal.classList.add('hidden');
- console.log('🔄 Closed Tidal discovery modal to show download modal');
- }
-
- // Open download missing tracks modal for Tidal playlist
- await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
-
- // Phase will change to 'downloading' when user clicks "Begin Analysis" button
-
- } catch (error) {
- console.error('❌ Error starting download missing tracks:', error);
- showToast(`Error starting downloads: ${error.message}`, 'error');
- }
-}
-
-async function openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks) {
- showLoadingOverlay('Loading Tidal playlist...');
- // Check if a process is already active for this virtual playlist
- if (activeDownloadProcesses[virtualPlaylistId]) {
- console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process.modalElement) {
- if (process.status === 'complete') {
- showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
- }
- process.modalElement.style.display = 'flex';
- }
- return;
- }
-
- console.log(`📥 Opening Download Missing Tracks modal for Tidal playlist: ${virtualPlaylistId}`);
-
- // Create virtual playlist object for compatibility with existing modal logic
- const virtualPlaylist = {
- id: virtualPlaylistId,
- name: playlistName,
- track_count: spotifyTracks.length
- };
-
- // Store the tracks in the cache for the modal to use
- playlistTrackCache[virtualPlaylistId] = spotifyTracks;
- currentPlaylistTracks = spotifyTracks;
- currentModalPlaylistId = virtualPlaylistId;
-
- let modal = document.createElement('div');
- modal.id = `download-missing-modal-${virtualPlaylistId}`;
- modal.className = 'download-missing-modal';
- modal.style.display = 'none';
- document.body.appendChild(modal);
-
- // Register the new process in our global state tracker using the same structure as Spotify
- activeDownloadProcesses[virtualPlaylistId] = {
- status: 'idle',
- modalElement: modal,
- poller: null,
- batchId: null,
- playlist: virtualPlaylist,
- tracks: spotifyTracks
- };
-
- // Generate hero section with dynamic source detection (same as YouTube/Beatport)
- const source = virtualPlaylistId.startsWith('beatport_') ? 'Beatport' :
- virtualPlaylistId.startsWith('tidal_') ? 'Tidal' :
- virtualPlaylistId.startsWith('listenbrainz_') ? 'ListenBrainz' :
- virtualPlaylistId.startsWith('spotify_public_') ? 'Spotify' :
- virtualPlaylistId.startsWith('spotify:') ? 'Spotify' :
- virtualPlaylistId.startsWith('discover_') ? 'SoulSync' :
- virtualPlaylistId.startsWith('seasonal_') ? 'SoulSync' :
- virtualPlaylistId.startsWith('spotify_library_') ? 'SoulSync' :
- virtualPlaylistId.startsWith('build_playlist_') ? 'SoulSync' :
- virtualPlaylistId.startsWith('decade_') ? 'SoulSync' :
- virtualPlaylistId === 'build_playlist_custom' ? 'SoulSync' :
- 'YouTube';
-
- const heroContext = {
- type: 'playlist',
- playlist: { name: playlistName, owner: source },
- trackCount: spotifyTracks.length,
- playlistId: virtualPlaylistId
- };
-
- // Use the exact same modal HTML structure as the existing Spotify modal
- modal.innerHTML = `
-
- `;
-
- applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
- modal.style.display = 'flex';
- hideLoadingOverlay();
-}
-
-
-// ===================================================================
-// DEEZER ARL PLAYLIST MANAGEMENT (Spotify-identical pattern)
-// ===================================================================
-
-async function loadDeezerArlPlaylists() {
- const container = document.getElementById('deezer-arl-playlist-container');
- const refreshBtn = document.getElementById('deezer-arl-refresh-btn');
-
- container.innerHTML = `🔄 Loading playlists...
`;
- refreshBtn.disabled = true;
- refreshBtn.textContent = '🔄 Loading...';
-
- try {
- const response = await fetch('/api/deezer/arl-playlists');
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch Deezer playlists');
- }
- deezerArlPlaylists = await response.json();
- renderDeezerArlPlaylists();
- deezerArlPlaylistsLoaded = true;
-
- // Check for active syncs or downloads and rehydrate UI
- await checkForActiveProcesses();
- for (const p of deezerArlPlaylists) {
- const arlId = `deezer_arl_${p.id}`;
- try {
- const syncResp = await fetch(`/api/sync/status/${arlId}`);
- if (syncResp.ok) {
- const syncState = await syncResp.json();
- if (syncState.status === 'syncing') {
- // Re-attach sync polling and update card UI
- if (!spotifyPlaylists.find(sp => sp.id === arlId)) {
- spotifyPlaylists.push({ id: arlId, name: p.name, track_count: p.track_count || 0, image_url: p.image_url || '', owner: p.owner || '' });
- }
- updateCardToSyncing(arlId, syncState.progress?.progress || 0, syncState.progress);
- startSyncPolling(arlId);
- console.log(`🔄 Rehydrated active sync for Deezer ARL playlist: ${p.name}`);
- }
- }
- } catch (e) { /* No active sync — normal */ }
- }
-
- } catch (error) {
- container.innerHTML = `❌ Error: ${error.message}
`;
- showToast(`Error loading Deezer playlists: ${error.message}`, 'error');
- } finally {
- refreshBtn.disabled = false;
- refreshBtn.textContent = '🔄 Refresh';
- }
-}
-
-function renderDeezerArlPlaylists() {
- const container = document.getElementById('deezer-arl-playlist-container');
- if (deezerArlPlaylists.length === 0) {
- container.innerHTML = `No Deezer playlists found.
`;
- return;
- }
-
- container.innerHTML = deezerArlPlaylists.map(p => {
- const arlId = `deezer_arl_${p.id}`;
- let statusClass = 'status-never-synced';
- if (p.sync_status && p.sync_status.startsWith('Synced')) statusClass = 'status-synced';
-
- return `
-
-
- `;
- }).join('');
-}
-
-function handleDeezerArlViewProgressClick(event, playlistId) {
- event.stopPropagation();
- const arlPlaylistId = `deezer_arl_${playlistId}`;
- const process = activeDownloadProcesses[arlPlaylistId];
- if (process && process.modalElement) {
- process.modalElement.style.display = 'flex';
- }
-}
-
-async function openDeezerArlPlaylistDetailsModal(event, playlistId) {
- event.stopPropagation();
-
- const playlist = deezerArlPlaylists.find(p => String(p.id) === String(playlistId));
- if (!playlist) return;
-
- const arlPlaylistId = `deezer_arl_${playlistId}`;
- showLoadingOverlay(`Loading playlist: ${playlist.name}...`);
-
- try {
- if (playlistTrackCache[arlPlaylistId]) {
- const fullPlaylist = { ...playlist, id: arlPlaylistId, tracks: playlistTrackCache[arlPlaylistId] };
- showDeezerArlPlaylistDetailsModal(fullPlaylist, playlistId);
- } else {
- const response = await fetch(`/api/deezer/arl-playlist/${playlistId}`);
- const fullPlaylist = await response.json();
- if (fullPlaylist.error) throw new Error(fullPlaylist.error);
-
- playlistTrackCache[arlPlaylistId] = fullPlaylist.tracks;
-
- // Auto-mirror
- mirrorPlaylist('deezer', playlistId, fullPlaylist.name, fullPlaylist.tracks.map(t => ({
- track_name: t.name,
- artist_name: (t.artists && t.artists[0]) ? (typeof t.artists[0] === 'object' ? t.artists[0].name : t.artists[0]) : '',
- album_name: t.album ? (typeof t.album === 'object' ? t.album.name : t.album) : '',
- duration_ms: t.duration_ms || 0,
- source_track_id: t.id || ''
- })), { description: fullPlaylist.description, owner: fullPlaylist.owner, image_url: fullPlaylist.image_url });
-
- showDeezerArlPlaylistDetailsModal({ ...fullPlaylist, id: arlPlaylistId }, playlistId);
- }
- } catch (error) {
- showToast(`Error: ${error.message}`, 'error');
- } finally {
- hideLoadingOverlay();
- }
-}
-
-function showDeezerArlPlaylistDetailsModal(playlist, originalDeezerPlaylistId) {
- let modal = document.getElementById('deezer-arl-playlist-details-modal');
- if (!modal) {
- modal = document.createElement('div');
- modal.id = 'deezer-arl-playlist-details-modal';
- modal.className = 'modal-overlay';
- document.body.appendChild(modal);
- }
-
- const playlistId = playlist.id;
- const activeProcess = activeDownloadProcesses[playlistId];
- const hasCompletedProcess = activeProcess && activeProcess.status === 'complete';
- const isSyncing = !!activeSyncPollers[playlistId];
-
- modal.innerHTML = `
-
-
-
-
- ${escapeHtml(p.name)}
-
- ${p.track_count} tracks •
- ${p.sync_status || 'Never Synced'}
-
-
-
-
-
-
-
-
- `;
-
- // Store playlist in spotifyPlaylists-compatible format for openDownloadMissingModal
- if (!spotifyPlaylists.find(p => p.id === playlistId)) {
- spotifyPlaylists.push({
- id: playlistId,
- name: playlist.name,
- track_count: playlist.tracks ? playlist.tracks.length : 0,
- image_url: playlist.image_url || '',
- owner: playlist.owner || '',
- });
- }
-
- modal.style.display = 'flex';
-}
-
-function closeDeezerArlPlaylistDetailsModal() {
- const modal = document.getElementById('deezer-arl-playlist-details-modal');
- if (modal) modal.style.display = 'none';
-}
-
-function updateDeezerArlPlaylistCardUI(playlistId) {
- const arlPlaylistId = `deezer_arl_${playlistId}`;
- const process = activeDownloadProcesses[arlPlaylistId];
- const progressBtn = document.getElementById(`progress-btn-${arlPlaylistId}`);
- const actionBtn = document.getElementById(`action-btn-${arlPlaylistId}`);
- const card = document.querySelector(`.playlist-card[data-playlist-id="${arlPlaylistId}"]`);
-
- if (!progressBtn || !actionBtn) return;
-
- if (process && process.status === 'running') {
- progressBtn.classList.remove('hidden');
- progressBtn.textContent = 'View Progress';
- progressBtn.style.backgroundColor = '';
- actionBtn.textContent = '📥 Downloading...';
- actionBtn.disabled = true;
- if (card) card.classList.remove('download-complete');
- } else if (process && process.status === 'complete') {
- progressBtn.classList.remove('hidden');
- progressBtn.textContent = '📋 View Results';
- progressBtn.style.backgroundColor = '#28a745';
- progressBtn.style.color = 'white';
- actionBtn.textContent = '✅ Ready for Review';
- actionBtn.disabled = false;
- if (card) card.classList.add('download-complete');
- } else {
- progressBtn.classList.add('hidden');
- progressBtn.style.backgroundColor = '';
- progressBtn.style.color = '';
- actionBtn.textContent = 'Sync / Download';
- actionBtn.disabled = false;
- if (card) card.classList.remove('download-complete');
- }
-}
-
-
-// ===================================================================
-// DEEZER PLAYLIST MANAGEMENT (URL-input like YouTube, reuses YouTube modal)
-// ===================================================================
-
-async function loadDeezerPlaylist() {
- const urlInput = document.getElementById('deezer-url-input');
- if (!urlInput) return;
-
- const rawUrl = urlInput.value.trim();
- if (!rawUrl) {
- showToast('Please paste a Deezer playlist URL', 'error');
- return;
- }
-
- // Extract playlist ID from URL
- // Supports: deezer.com/playlist/{id}, deezer.com/{locale}/playlist/{id}, or raw numeric ID
- let playlistId = null;
- const urlMatch = rawUrl.match(/deezer\.com\/(?:[a-z]{2}\/)?playlist\/(\d+)/i);
- if (urlMatch) {
- playlistId = urlMatch[1];
- } else if (/^\d+$/.test(rawUrl)) {
- playlistId = rawUrl;
- }
-
- if (!playlistId) {
- showToast('Invalid Deezer playlist URL. Expected format: deezer.com/playlist/{id}', 'error');
- return;
- }
-
- // Check if already loaded
- if (deezerPlaylists.find(p => String(p.id) === String(playlistId))) {
- showToast('This playlist is already loaded', 'info');
- urlInput.value = '';
- return;
- }
-
- const parseBtn = document.getElementById('deezer-parse-btn');
- if (parseBtn) {
- parseBtn.disabled = true;
- parseBtn.textContent = 'Loading...';
- }
-
- try {
- const response = await fetch(`/api/deezer/playlist/${playlistId}`);
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch Deezer playlist');
- }
-
- const playlist = await response.json();
- deezerPlaylists.push(playlist);
-
- // Auto-mirror Deezer playlist
- if (playlist.tracks && playlist.tracks.length > 0) {
- mirrorPlaylist('deezer', playlist.id, playlist.name, playlist.tracks.map(t => ({
- track_name: t.name || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artists || ''),
- album_name: typeof t.album === 'string' ? t.album : '', duration_ms: t.duration_ms || 0,
- source_track_id: t.id || ''
- })), { owner: playlist.owner, image_url: playlist.image_url, description: rawUrl });
- }
-
- // Save to URL history
- saveUrlHistory('deezer', rawUrl, playlist.name);
-
- renderDeezerPlaylists();
- await loadDeezerPlaylistStatesFromBackend();
-
- urlInput.value = '';
- showToast(`Deezer playlist loaded: ${playlist.name} (${playlist.track_count || playlist.tracks.length} tracks)`, 'success');
- console.log(`🎵 Loaded Deezer playlist: ${playlist.name}`);
-
- } catch (error) {
- showToast(`Error loading Deezer playlist: ${error.message}`, 'error');
- } finally {
- if (parseBtn) {
- parseBtn.disabled = false;
- parseBtn.textContent = 'Load Playlist';
- }
- }
-}
-
-function renderDeezerPlaylists() {
- const container = document.getElementById('deezer-playlist-container');
- if (deezerPlaylists.length === 0) {
- container.innerHTML = `
-
-
-
-
- ×
- ${escapeHtml(playlist.name)}
-
- ${playlist.track_count || (playlist.tracks ? playlist.tracks.length : 0)} tracks
- by ${escapeHtml(playlist.owner || '')}
-
-
-
- ${playlist.description ? `
-
-
- ${escapeHtml(playlist.description)}
` : ''}
-
-
-
-
- ${(playlist.tracks || []).map((track, index) => `
-
-
- ${index + 1}
-
- `).join('')}
-
-
- ${escapeHtml(track.name)}
- ${formatArtists(track.artists)}
- ${formatDuration(track.duration_ms)}
- Paste a Deezer playlist URL above to get started.
`;
- return;
- }
-
- container.innerHTML = deezerPlaylists.map(p => {
- if (!deezerPlaylistStates[p.id]) {
- deezerPlaylistStates[p.id] = {
- phase: 'fresh',
- playlist: p
- };
- }
- return createDeezerCard(p);
- }).join('');
-
- // Add click handlers to cards
- deezerPlaylists.forEach(p => {
- const card = document.getElementById(`deezer-card-${p.id}`);
- if (card) {
- card.addEventListener('click', () => handleDeezerCardClick(p.id));
- }
- });
-}
-
-function createDeezerCard(playlist) {
- const state = deezerPlaylistStates[playlist.id];
- const phase = state.phase;
-
- let buttonText = getActionButtonText(phase);
- let phaseText = getPhaseText(phase);
- let phaseColor = getPhaseColor(phase);
-
- return `
-
-
-
- `;
-}
-
-async function handleDeezerCardClick(playlistId) {
- const state = deezerPlaylistStates[playlistId];
- if (!state) {
- console.error(`No state found for Deezer playlist: ${playlistId}`);
- showToast('Playlist state not found - try refreshing the page', 'error');
- return;
- }
-
- if (!state.playlist) {
- console.error(`No playlist data found for Deezer playlist: ${playlistId}`);
- showToast('Playlist data missing - try refreshing the page', 'error');
- return;
- }
-
- if (!state.phase) {
- state.phase = 'fresh';
- }
-
- console.log(`🎵 [Card Click] Deezer card clicked: ${playlistId}, Phase: ${state.phase}`);
-
- if (state.phase === 'fresh') {
- console.log(`🎵 Using pre-loaded Deezer playlist data for: ${state.playlist.name}`);
- openDeezerDiscoveryModal(playlistId, state.playlist);
-
- } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
- console.log(`🎵 [Card Click] Opening Deezer discovery modal for ${state.phase} phase`);
-
- if (state.phase === 'discovered' && (!state.discovery_results || state.discovery_results.length === 0)) {
- try {
- const stateResponse = await fetch(`/api/deezer/state/${playlistId}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- if (fullState.discovery_results) {
- state.discovery_results = fullState.discovery_results;
- state.spotify_matches = fullState.spotify_matches || state.spotify_matches;
- state.discovery_progress = fullState.discovery_progress || state.discovery_progress;
- deezerPlaylistStates[playlistId] = { ...deezerPlaylistStates[playlistId], ...state };
- console.log(`Restored ${fullState.discovery_results.length} discovery results from backend`);
- }
- }
- } catch (error) {
- console.error(`Failed to fetch discovery results from backend: ${error}`);
- }
- }
-
- openDeezerDiscoveryModal(playlistId, state.playlist);
- } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
- if (state.convertedSpotifyPlaylistId) {
- if (activeDownloadProcesses[state.convertedSpotifyPlaylistId]) {
- const process = activeDownloadProcesses[state.convertedSpotifyPlaylistId];
- if (process.modalElement) {
- process.modalElement.style.display = 'flex';
- } else {
- await rehydrateDeezerDownloadModal(playlistId, state);
- }
- } else {
- await rehydrateDeezerDownloadModal(playlistId, state);
- }
- } else {
- if (state.discovery_results && state.discovery_results.length > 0) {
- openDeezerDiscoveryModal(playlistId, state.playlist);
- } else {
- showToast('Unable to open download modal - missing playlist data', 'error');
- }
- }
- }
-}
-
-async function rehydrateDeezerDownloadModal(playlistId, state) {
- try {
- if (!state || !state.playlist) {
- showToast('Cannot open download modal - invalid playlist data', 'error');
- return;
- }
-
- const spotifyTracks = state.discovery_results
- ?.filter(result => result.spotify_data)
- ?.map(result => result.spotify_data) || [];
-
- if (spotifyTracks.length > 0) {
- const virtualPlaylistId = state.convertedSpotifyPlaylistId || `deezer_${playlistId}`;
- await openDownloadMissingModalForTidal(virtualPlaylistId, state.playlist.name, spotifyTracks);
-
- if (state.download_process_id) {
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = state.download_process_id;
- const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
- startModalDownloadPolling(virtualPlaylistId);
- }
- }
- } else {
- showToast('No Spotify tracks found for download', 'error');
- }
- } catch (error) {
- console.error(`Error rehydrating Deezer download modal: ${error}`);
- }
-}
-
-async function openDeezerDiscoveryModal(playlistId, playlistData) {
- console.log(`🎵 Opening Deezer discovery modal (reusing YouTube modal): ${playlistData.name}`);
-
- const fakeUrlHash = `deezer_${playlistId}`;
-
- const deezerCardState = deezerPlaylistStates[playlistId];
- const isAlreadyDiscovered = deezerCardState && (deezerCardState.phase === 'discovered' || deezerCardState.phase === 'syncing' || deezerCardState.phase === 'sync_complete');
- const isCurrentlyDiscovering = deezerCardState && deezerCardState.phase === 'discovering';
-
- let transformedResults = [];
- let actualMatches = 0;
- if (isAlreadyDiscovered && deezerCardState.discovery_results) {
- transformedResults = deezerCardState.discovery_results.map((result, index) => {
- const isFound = result.status === 'found' ||
- result.status === '✅ Found' ||
- result.status_class === 'found' ||
- result.spotify_data ||
- result.spotify_track;
- if (isFound) actualMatches++;
-
- return {
- index: index,
- yt_track: result.deezer_track ? result.deezer_track.name : 'Unknown',
- yt_artist: result.deezer_track ? (result.deezer_track.artists ? result.deezer_track.artists.join(', ') : 'Unknown') : 'Unknown',
- status: isFound ? '✅ Found' : '❌ Not Found',
- status_class: isFound ? 'found' : 'not-found',
- spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
- spotify_artist: result.spotify_data && result.spotify_data.artists ?
- (Array.isArray(result.spotify_data.artists)
- ? result.spotify_data.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-'
- : result.spotify_data.artists)
- : (result.spotify_artist || '-'),
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
- spotify_data: result.spotify_data,
- spotify_id: result.spotify_id,
- manual_match: result.manual_match
- };
- });
- console.log(`🎵 Deezer modal: Calculated ${actualMatches} matches from ${transformedResults.length} results`);
- }
-
- const modalPhase = deezerCardState ? deezerCardState.phase : 'fresh';
- youtubePlaylistStates[fakeUrlHash] = {
- phase: modalPhase,
- playlist: {
- name: playlistData.name,
- tracks: playlistData.tracks
- },
- is_deezer_playlist: true,
- deezer_playlist_id: playlistId,
- discovery_progress: isAlreadyDiscovered ? 100 : 0,
- spotify_matches: isAlreadyDiscovered ? actualMatches : 0,
- spotifyMatches: isAlreadyDiscovered ? actualMatches : 0,
- spotify_total: playlistData.tracks.length,
- discovery_results: transformedResults,
- discoveryResults: transformedResults,
- discoveryProgress: isAlreadyDiscovered ? 100 : 0
- };
-
- if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
- try {
- console.log(`🔍 Starting Deezer discovery for: ${playlistData.name}`);
-
- const response = await fetch(`/api/deezer/discovery/start/${playlistId}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- console.error('Error starting Deezer discovery:', result.error);
- showToast(`Error starting discovery: ${result.error}`, 'error');
- return;
- }
-
- console.log('Deezer discovery started, beginning polling...');
-
- deezerPlaylistStates[playlistId].phase = 'discovering';
- updateDeezerCardPhase(playlistId, 'discovering');
- youtubePlaylistStates[fakeUrlHash].phase = 'discovering';
-
- startDeezerDiscoveryPolling(fakeUrlHash, playlistId);
-
- } catch (error) {
- console.error('Error starting Deezer discovery:', error);
- showToast(`Error starting discovery: ${error.message}`, 'error');
- }
- } else if (isCurrentlyDiscovering) {
- console.log(`🔄 Resuming Deezer discovery polling for: ${playlistData.name}`);
- startDeezerDiscoveryPolling(fakeUrlHash, playlistId);
- } else if (deezerCardState && deezerCardState.phase === 'syncing') {
- console.log(`🔄 Resuming Deezer sync polling for: ${playlistData.name}`);
- startDeezerSyncPolling(fakeUrlHash);
- } else {
- console.log('Using existing results - no need to re-discover');
- }
-
- openYouTubeDiscoveryModal(fakeUrlHash);
-}
-
-function startDeezerDiscoveryPolling(fakeUrlHash, playlistId) {
- console.log(`🔄 Starting Deezer discovery polling for: ${playlistId}`);
-
- if (activeYouTubePollers[fakeUrlHash]) {
- clearInterval(activeYouTubePollers[fakeUrlHash]);
- }
-
- // WebSocket subscription
- if (socketConnected) {
- socket.emit('discovery:subscribe', { ids: [playlistId] });
- _discoveryProgressCallbacks[playlistId] = (data) => {
- if (data.error) {
- if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
- return;
- }
- const transformed = {
- progress: data.progress, spotify_matches: data.spotify_matches, spotify_total: data.spotify_total,
- complete: data.complete,
- results: (data.results || []).map((r, i) => {
- const isWingIt = r.wing_it_fallback || r.status_class === 'wing-it';
- const isFound = !isWingIt && (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found' || r.spotify_data || r.spotify_track);
- return {
- index: i, yt_track: r.deezer_track ? r.deezer_track.name : 'Unknown',
- yt_artist: r.deezer_track ? (r.deezer_track.artists ? r.deezer_track.artists.join(', ') : 'Unknown') : 'Unknown',
- status: isWingIt ? '🎯 Wing It' : (isFound ? '✅ Found' : '❌ Not Found'),
- status_class: isWingIt ? 'wing-it' : (isFound ? 'found' : 'not-found'),
- spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
- spotify_artist: r.spotify_data && r.spotify_data.artists
- ? (Array.isArray(r.spotify_data.artists)
- ? (r.spotify_data.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-')
- : r.spotify_data.artists)
- : (r.spotify_artist || '-'),
- spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
- spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match,
- wing_it_fallback: isWingIt
- };
- })
- };
- const st = youtubePlaylistStates[fakeUrlHash];
- if (st) {
- st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
- st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
- st.discovery_results = data.results; st.discoveryResults = transformed.results;
- st.phase = data.phase;
- updateYouTubeDiscoveryModal(fakeUrlHash, transformed);
- }
- if (deezerPlaylistStates[playlistId]) {
- deezerPlaylistStates[playlistId].phase = data.phase;
- deezerPlaylistStates[playlistId].discovery_results = data.results;
- deezerPlaylistStates[playlistId].spotify_matches = data.spotify_matches;
- deezerPlaylistStates[playlistId].discovery_progress = data.progress;
- updateDeezerCardPhase(playlistId, data.phase);
- }
- updateDeezerCardProgress(playlistId, data);
- if (data.complete) {
- if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
- }
- };
- }
-
- const pollInterval = setInterval(async () => {
- if (socketConnected) return;
- try {
- const response = await fetch(`/api/deezer/discovery/status/${playlistId}`);
- const status = await response.json();
-
- if (status.error) {
- console.error('Error polling Deezer discovery status:', status.error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[fakeUrlHash];
- return;
- }
-
- const transformedStatus = {
- progress: status.progress,
- spotify_matches: status.spotify_matches,
- spotify_total: status.spotify_total,
- complete: status.complete,
- results: status.results.map((result, index) => {
- const isFound = result.status === 'found' ||
- result.status === '✅ Found' ||
- result.status_class === 'found' ||
- result.spotify_data ||
- result.spotify_track;
-
- return {
- index: index,
- yt_track: result.deezer_track ? result.deezer_track.name : 'Unknown',
- yt_artist: result.deezer_track ? (result.deezer_track.artists ? result.deezer_track.artists.join(', ') : 'Unknown') : 'Unknown',
- status: isFound ? '✅ Found' : '❌ Not Found',
- status_class: isFound ? 'found' : 'not-found',
- spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
- spotify_artist: result.spotify_data && result.spotify_data.artists
- ? (Array.isArray(result.spotify_data.artists)
- ? (result.spotify_data.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-')
- : result.spotify_data.artists)
- : (result.spotify_artist || '-'),
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
- spotify_data: result.spotify_data,
- spotify_id: result.spotify_id,
- manual_match: result.manual_match
- };
- })
- };
-
- const state = youtubePlaylistStates[fakeUrlHash];
- if (state) {
- state.discovery_progress = status.progress;
- state.discoveryProgress = status.progress;
- state.spotify_matches = status.spotify_matches;
- state.spotifyMatches = status.spotify_matches;
- state.discovery_results = status.results;
- state.discoveryResults = transformedStatus.results;
- state.phase = status.phase;
-
- updateYouTubeDiscoveryModal(fakeUrlHash, transformedStatus);
-
- if (deezerPlaylistStates[playlistId]) {
- deezerPlaylistStates[playlistId].phase = status.phase;
- deezerPlaylistStates[playlistId].discovery_results = status.results;
- deezerPlaylistStates[playlistId].spotify_matches = status.spotify_matches;
- deezerPlaylistStates[playlistId].discovery_progress = status.progress;
- updateDeezerCardPhase(playlistId, status.phase);
- }
-
- updateDeezerCardProgress(playlistId, status);
-
- console.log(`🔄 Deezer discovery progress: ${status.progress}% (${status.spotify_matches}/${status.spotify_total} found)`);
- }
-
- if (status.complete) {
- console.log(`Deezer discovery complete: ${status.spotify_matches}/${status.spotify_total} tracks found`);
- clearInterval(pollInterval);
- delete activeYouTubePollers[fakeUrlHash];
- }
-
- } catch (error) {
- console.error('Error polling Deezer discovery:', error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[fakeUrlHash];
- }
- }, 1000);
-
- activeYouTubePollers[fakeUrlHash] = pollInterval;
-}
-
-async function loadDeezerPlaylistStatesFromBackend() {
- try {
- console.log('🎵 Loading Deezer playlist states from backend...');
-
- const response = await fetch('/api/deezer/playlists/states');
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch Deezer playlist states');
- }
-
- const data = await response.json();
- const states = data.states || [];
-
- console.log(`🎵 Found ${states.length} stored Deezer playlist states in backend`);
-
- if (states.length === 0) return;
-
- for (const stateInfo of states) {
- await applyDeezerPlaylistState(stateInfo);
- }
-
- // Rehydrate download modals for Deezer playlists in downloading/download_complete phases
- for (const stateInfo of states) {
- if ((stateInfo.phase === 'downloading' || stateInfo.phase === 'download_complete') &&
- stateInfo.converted_spotify_playlist_id && stateInfo.download_process_id) {
-
- const convertedPlaylistId = stateInfo.converted_spotify_playlist_id;
-
- if (!activeDownloadProcesses[convertedPlaylistId]) {
- console.log(`Rehydrating download modal for Deezer playlist: ${stateInfo.playlist_id}`);
- try {
- const playlistData = deezerPlaylists.find(p => String(p.id) === String(stateInfo.playlist_id));
- if (!playlistData) continue;
-
- const spotifyTracks = deezerPlaylistStates[stateInfo.playlist_id]?.discovery_results
- ?.filter(result => result.spotify_data)
- ?.map(result => result.spotify_data) || [];
-
- if (spotifyTracks.length > 0) {
- await openDownloadMissingModalForTidal(
- convertedPlaylistId,
- playlistData.name,
- spotifyTracks
- );
-
- const process = activeDownloadProcesses[convertedPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = stateInfo.download_process_id;
- const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
- startModalDownloadPolling(convertedPlaylistId);
- }
- }
- } catch (error) {
- console.error(`Error rehydrating Deezer download modal for ${stateInfo.playlist_id}:`, error);
- }
- }
- }
- }
-
- console.log('Deezer playlist states loaded and applied');
-
- } catch (error) {
- console.error('Error loading Deezer playlist states:', error);
- }
-}
-
-async function applyDeezerPlaylistState(stateInfo) {
- const { playlist_id, phase, discovery_progress, spotify_matches, discovery_results, converted_spotify_playlist_id, download_process_id } = stateInfo;
-
- try {
- console.log(`🎵 Applying saved state for Deezer playlist: ${playlist_id}, Phase: ${phase}`);
-
- const playlistData = deezerPlaylists.find(p => String(p.id) === String(playlist_id));
- if (!playlistData) {
- console.warn(`Playlist data not found for state ${playlist_id} - skipping`);
- return;
- }
-
- if (!deezerPlaylistStates[playlist_id]) {
- deezerPlaylistStates[playlist_id] = {
- playlist: playlistData,
- phase: 'fresh'
- };
- }
-
- deezerPlaylistStates[playlist_id].phase = phase;
- deezerPlaylistStates[playlist_id].discovery_progress = discovery_progress;
- deezerPlaylistStates[playlist_id].spotify_matches = spotify_matches;
- deezerPlaylistStates[playlist_id].discovery_results = discovery_results;
- deezerPlaylistStates[playlist_id].convertedSpotifyPlaylistId = converted_spotify_playlist_id;
- deezerPlaylistStates[playlist_id].download_process_id = download_process_id;
- deezerPlaylistStates[playlist_id].playlist = playlistData;
-
- if (phase !== 'fresh' && phase !== 'discovering') {
- try {
- const stateResponse = await fetch(`/api/deezer/state/${playlist_id}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- if (fullState.discovery_results && deezerPlaylistStates[playlist_id]) {
- deezerPlaylistStates[playlist_id].discovery_results = fullState.discovery_results;
- deezerPlaylistStates[playlist_id].discovery_progress = fullState.discovery_progress;
- deezerPlaylistStates[playlist_id].spotify_matches = fullState.spotify_matches;
- deezerPlaylistStates[playlist_id].convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
- deezerPlaylistStates[playlist_id].download_process_id = fullState.download_process_id;
- }
- }
- } catch (error) {
- console.warn(`Error fetching full discovery results for Deezer playlist ${playlistData.name}:`, error.message);
- }
- }
-
- updateDeezerCardPhase(playlist_id, phase);
-
- if (phase === 'discovered' && deezerPlaylistStates[playlist_id]) {
- const progressInfo = {
- spotify_total: playlistData.track_count || playlistData.tracks?.length || 0,
- spotify_matches: deezerPlaylistStates[playlist_id].spotify_matches || 0
- };
- updateDeezerCardProgress(playlist_id, progressInfo);
- }
-
- if (phase === 'discovering') {
- const fakeUrlHash = `deezer_${playlist_id}`;
- startDeezerDiscoveryPolling(fakeUrlHash, playlist_id);
- } else if (phase === 'syncing') {
- const fakeUrlHash = `deezer_${playlist_id}`;
- startDeezerSyncPolling(fakeUrlHash);
- }
-
- } catch (error) {
- console.error(`Error applying Deezer playlist state for ${playlist_id}:`, error);
- }
-}
-
-function updateDeezerCardPhase(playlistId, phase) {
- const state = deezerPlaylistStates[playlistId];
- if (!state) return;
-
- state.phase = phase;
-
- const card = document.getElementById(`deezer-card-${playlistId}`);
- if (card) {
- const newCardHtml = createDeezerCard(state.playlist);
- card.outerHTML = newCardHtml;
-
- const newCard = document.getElementById(`deezer-card-${playlistId}`);
- if (newCard) {
- newCard.addEventListener('click', () => handleDeezerCardClick(playlistId));
- }
-
- if ((phase === 'syncing' || phase === 'sync_complete') && state.lastSyncProgress) {
- setTimeout(() => {
- updateDeezerCardSyncProgress(playlistId, state.lastSyncProgress);
- }, 0);
- }
- }
-}
-
-function updateDeezerCardProgress(playlistId, progress) {
- const state = deezerPlaylistStates[playlistId];
- if (!state) return;
-
- const card = document.getElementById(`deezer-card-${playlistId}`);
- if (!card) return;
-
- const progressElement = card.querySelector('.playlist-card-progress');
- if (!progressElement) return;
-
- progressElement.classList.remove('hidden');
-
- const total = progress.spotify_total || 0;
- const matches = progress.spotify_matches || 0;
-
- if (total > 0) {
- progressElement.innerHTML = `
-
-
- ${escapeHtml(playlist.name)}
-
- ${playlist.track_count || playlist.tracks.length} tracks
- ${phaseText}
-
-
-
-
-
-
- ✓ ${matches}
- /
- ♪ ${total}
-
- `;
- }
-}
-
-// ===============================
-// DEEZER SYNC FUNCTIONALITY
-// ===============================
-
-async function startDeezerPlaylistSync(urlHash) {
- try {
- console.log('🎵 Starting Deezer playlist sync:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_deezer_playlist) {
- console.error('Invalid Deezer playlist state for sync');
- return;
- }
-
- const playlistId = state.deezer_playlist_id;
- const response = await fetch(`/api/deezer/sync/start/${playlistId}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error starting sync: ${result.error}`, 'error');
- return;
- }
-
- const syncPlaylistId = result.sync_playlist_id;
- if (state) state.syncPlaylistId = syncPlaylistId;
-
- updateDeezerCardPhase(playlistId, 'syncing');
- updateDeezerModalButtons(urlHash, 'syncing');
-
- startDeezerSyncPolling(urlHash, syncPlaylistId);
-
- showToast('Deezer playlist sync started!', 'success');
-
- } catch (error) {
- console.error('Error starting Deezer sync:', error);
- showToast(`Error starting sync: ${error.message}`, 'error');
- }
-}
-
-function startDeezerSyncPolling(urlHash, syncPlaylistId) {
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- }
-
- const state = youtubePlaylistStates[urlHash];
- const playlistId = state.deezer_playlist_id;
-
- syncPlaylistId = syncPlaylistId || (state && state.syncPlaylistId);
-
- // WebSocket subscription
- if (socketConnected && syncPlaylistId) {
- socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
- _syncProgressCallbacks[syncPlaylistId] = (data) => {
- const progress = data.progress || {};
- updateDeezerCardSyncProgress(playlistId, progress);
- updateDeezerModalSyncProgress(urlHash, progress);
-
- if (data.status === 'finished') {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
- delete _syncProgressCallbacks[syncPlaylistId];
- if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'sync_complete';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
- updateDeezerCardPhase(playlistId, 'sync_complete');
- updateDeezerModalButtons(urlHash, 'sync_complete');
- showToast('Deezer playlist sync complete!', 'success');
- } else if (data.status === 'error' || data.status === 'cancelled') {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
- delete _syncProgressCallbacks[syncPlaylistId];
- if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'discovered';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
- updateDeezerCardPhase(playlistId, 'discovered');
- updateDeezerModalButtons(urlHash, 'discovered');
- showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
- }
- };
- }
-
- const pollFunction = async () => {
- if (socketConnected) return;
- try {
- const response = await fetch(`/api/deezer/sync/status/${playlistId}`);
- const status = await response.json();
-
- if (status.error) {
- console.error('Error polling Deezer sync status:', status.error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- return;
- }
-
- updateDeezerCardSyncProgress(playlistId, status.progress);
- updateDeezerModalSyncProgress(urlHash, status.progress);
-
- if (status.complete) {
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'sync_complete';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
- updateDeezerCardPhase(playlistId, 'sync_complete');
- updateDeezerModalButtons(urlHash, 'sync_complete');
- showToast('Deezer playlist sync complete!', 'success');
- } else if (status.sync_status === 'error') {
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'discovered';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
- updateDeezerCardPhase(playlistId, 'discovered');
- updateDeezerModalButtons(urlHash, 'discovered');
- showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
- }
- } catch (error) {
- console.error('Error polling Deezer sync:', error);
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- }
- }
- };
-
- if (!socketConnected) pollFunction();
-
- const pollInterval = setInterval(pollFunction, 1000);
- activeYouTubePollers[urlHash] = pollInterval;
-}
-
-async function cancelDeezerSync(urlHash) {
- try {
- console.log('Cancelling Deezer sync:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_deezer_playlist) {
- console.error('Invalid Deezer playlist state');
- return;
- }
-
- const playlistId = state.deezer_playlist_id;
- const response = await fetch(`/api/deezer/sync/cancel/${playlistId}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error cancelling sync: ${result.error}`, 'error');
- return;
- }
-
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- }
-
- const syncId = state && state.syncPlaylistId;
- if (syncId && _syncProgressCallbacks[syncId]) {
- if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncId] });
- delete _syncProgressCallbacks[syncId];
- }
-
- updateDeezerCardPhase(playlistId, 'discovered');
- updateDeezerModalButtons(urlHash, 'discovered');
-
- showToast('Deezer sync cancelled', 'info');
-
- } catch (error) {
- console.error('Error cancelling Deezer sync:', error);
- showToast(`Error cancelling sync: ${error.message}`, 'error');
- }
-}
-
-function updateDeezerCardSyncProgress(playlistId, progress) {
- const state = deezerPlaylistStates[playlistId];
- if (!state || !state.playlist || !progress) return;
-
- state.lastSyncProgress = progress;
-
- const card = document.getElementById(`deezer-card-${playlistId}`);
- if (!card) return;
-
- const progressElement = card.querySelector('.playlist-card-progress');
-
- let statusCounterHTML = '';
- if (progress && progress.total_tracks > 0) {
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
- const total = progress.total_tracks || 0;
- const processed = matched + failed;
- const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
- statusCounterHTML = `
-
- ♪ ${total}
- /
- ✓ ${matched}
- /
- ✗ ${failed}
- (${percentage}%)
-
- `;
- }
-
- if (statusCounterHTML) {
- progressElement.innerHTML = statusCounterHTML;
- }
-}
-
-function updateDeezerModalSyncProgress(urlHash, progress) {
- const statusDisplay = document.getElementById(`deezer-sync-status-${urlHash}`);
- if (!statusDisplay || !progress) return;
-
- const totalEl = document.getElementById(`deezer-total-${urlHash}`);
- const matchedEl = document.getElementById(`deezer-matched-${urlHash}`);
- const failedEl = document.getElementById(`deezer-failed-${urlHash}`);
- const percentageEl = document.getElementById(`deezer-percentage-${urlHash}`);
-
- const total = progress.total_tracks || 0;
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
-
- if (totalEl) totalEl.textContent = total;
- if (matchedEl) matchedEl.textContent = matched;
- if (failedEl) failedEl.textContent = failed;
-
- if (total > 0) {
- const processed = matched + failed;
- const percentage = Math.round((processed / total) * 100);
- if (percentageEl) percentageEl.textContent = percentage;
- }
-}
-
-function updateDeezerModalButtons(urlHash, phase) {
- const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (!modal) return;
-
- const footerLeft = modal.querySelector('.modal-footer-left');
- if (footerLeft) {
- footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
- }
-}
-
-async function startDeezerDownloadMissing(urlHash) {
- try {
- console.log('🔍 Starting download missing tracks for Deezer playlist:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_deezer_playlist) {
- console.error('Invalid Deezer playlist state for download');
- return;
- }
-
- const discoveryResults = state.discoveryResults || state.discovery_results;
-
- if (!discoveryResults) {
- showToast('No discovery results available for download', 'error');
- return;
- }
-
- const spotifyTracks = [];
- for (const result of discoveryResults) {
- if (result.spotify_data) {
- spotifyTracks.push(result.spotify_data);
- } else if (result.spotify_track && result.status_class === 'found') {
- const albumData = result.spotify_album || 'Unknown Album';
- const albumObject = typeof albumData === 'object' && albumData !== null
- ? albumData
- : {
- name: typeof albumData === 'string' ? albumData : 'Unknown Album',
- album_type: 'album',
- images: []
- };
-
- spotifyTracks.push({
- id: result.spotify_id || 'unknown',
- name: result.spotify_track || 'Unknown Track',
- artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
- album: albumObject,
- duration_ms: 0
- });
- }
- }
-
- if (spotifyTracks.length === 0) {
- showToast('No Spotify matches found for download', 'error');
- return;
- }
-
- const virtualPlaylistId = `deezer_${state.deezer_playlist_id}`;
- const playlistName = state.playlist.name;
-
- state.convertedSpotifyPlaylistId = virtualPlaylistId;
-
- const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (discoveryModal) {
- discoveryModal.classList.add('hidden');
- }
-
- await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
-
- } catch (error) {
- console.error('Error starting download missing tracks:', error);
- showToast(`Error starting downloads: ${error.message}`, 'error');
- }
-}
-
-
-// ===============================
-// SYNC PAGE FUNCTIONALITY (REDESIGNED)
-// ===============================
-
-function initializeSyncPage() {
- // Logic for tab switching
- const tabButtons = document.querySelectorAll('.sync-tab-button');
- const syncSidebar = document.querySelector('.sync-sidebar');
- const syncContentArea = document.querySelector('.sync-content-area');
-
- tabButtons.forEach(button => {
- button.addEventListener('click', () => {
- const tabId = button.dataset.tab;
- const previousActiveTab = document.querySelector('.sync-tab-button.active');
- const previousTabId = previousActiveTab ? previousActiveTab.dataset.tab : null;
-
- // Update button active state
- tabButtons.forEach(btn => btn.classList.remove('active'));
- button.classList.add('active');
-
- // Update content active state
- document.querySelectorAll('.sync-tab-content').forEach(content => {
- content.classList.remove('active');
- });
- document.getElementById(`${tabId}-tab-content`).classList.add('active');
-
- // Show/hide sidebar based on active tab (skip on mobile where sidebar is always hidden)
- if (syncSidebar && syncContentArea) {
- const isMobile = window.innerWidth <= 1300;
- // Sidebar always hidden by default — shown only when sync is active
- syncSidebar.style.display = 'none';
- syncContentArea.style.gridTemplateColumns = '1fr';
- }
-
- // Auto-load Deezer ARL playlists on first tab activation
- if (tabId === 'deezer' && !deezerArlPlaylistsLoaded) {
- // Check ARL status first
- fetch('/api/deezer/arl-status').then(r => r.json()).then(data => {
- const container = document.getElementById('deezer-arl-playlist-container');
- if (data.authenticated) {
- loadDeezerArlPlaylists();
- } else if (container) {
- container.innerHTML = `Deezer ARL not configured. Add your ARL token in Settings > Downloads to see your playlists here.
`;
- }
- }).catch(() => { });
- }
-
- // Auto-load mirrored playlists on first tab activation
- if (tabId === 'mirrored' && !mirroredPlaylistsLoaded) {
- loadMirroredPlaylists();
- }
-
- // Auto-load server playlists on first tab activation
- if (tabId === 'server' && !window._serverPlaylistsLoaded) {
- window._serverPlaylistsLoaded = true;
- loadServerPlaylists();
- }
-
- if (previousTabId === 'beatport' && tabId !== 'beatport') {
- cleanupBeatportContent();
- }
-
- // Lazily load Beatport content the first time the Beatport tab is opened
- if (tabId === 'beatport') {
- ensureBeatportContentLoaded();
- }
- });
- });
-
- // If the Beatport tab is already active when Sync initializes, load it now.
- const activeBeatportTab = document.querySelector('.sync-tab-button.active[data-tab="beatport"]');
- if (activeBeatportTab) {
- ensureBeatportContentLoaded();
- }
-
- // Logic for the Spotify refresh button
- const refreshBtn = document.getElementById('spotify-refresh-btn');
- if (refreshBtn) {
- // Remove any old listeners to be safe, then add the new one
- refreshBtn.removeEventListener('click', loadSpotifyPlaylists);
- refreshBtn.addEventListener('click', loadSpotifyPlaylists);
- }
-
- // Logic for the Tidal refresh button
- const tidalRefreshBtn = document.getElementById('tidal-refresh-btn');
- if (tidalRefreshBtn) {
- tidalRefreshBtn.removeEventListener('click', loadTidalPlaylists);
- tidalRefreshBtn.addEventListener('click', loadTidalPlaylists);
- }
-
- // Logic for the Deezer ARL refresh button
- const deezerArlRefreshBtn = document.getElementById('deezer-arl-refresh-btn');
- if (deezerArlRefreshBtn) {
- deezerArlRefreshBtn.removeEventListener('click', loadDeezerArlPlaylists);
- deezerArlRefreshBtn.addEventListener('click', loadDeezerArlPlaylists);
- }
-
- // Logic for the Deezer Link parse button
- const deezerParseBtn = document.getElementById('deezer-parse-btn');
- if (deezerParseBtn) {
- deezerParseBtn.addEventListener('click', loadDeezerPlaylist);
- }
- // Also allow Enter key in the Deezer input
- const deezerUrlInput = document.getElementById('deezer-url-input');
- if (deezerUrlInput) {
- deezerUrlInput.addEventListener('keypress', (e) => {
- if (e.key === 'Enter') loadDeezerPlaylist();
- });
- }
-
- // Logic for the Mirrored refresh button
- const mirroredRefreshBtn = document.getElementById('mirrored-refresh-btn');
- if (mirroredRefreshBtn) {
- mirroredRefreshBtn.addEventListener('click', loadMirroredPlaylists);
- }
-
- // Initialize import file tab
- _initImportFileTab();
-
- // Logic for the Beatport clear button
- const beatportClearBtn = document.getElementById('beatport-clear-btn');
- if (beatportClearBtn) {
- beatportClearBtn.addEventListener('click', clearBeatportPlaylists);
- // Set initial clear button state
- updateBeatportClearButtonState();
- }
-
- // Logic for Beatport nested tabs
- const beatportTabButtons = document.querySelectorAll('.beatport-tab-button');
- beatportTabButtons.forEach(button => {
- button.addEventListener('click', () => {
- const tabId = button.dataset.beatportTab;
-
- // Update button active state
- beatportTabButtons.forEach(btn => btn.classList.remove('active'));
- button.classList.add('active');
-
- // Update content active state
- document.querySelectorAll('.beatport-tab-content').forEach(content => {
- content.classList.remove('active');
- });
- document.getElementById(`beatport-${tabId}-content`).classList.add('active');
-
- // Initialize rebuild content lazily when the rebuild tab is selected
- if (tabId === 'rebuild') {
- ensureBeatportContentLoaded();
- }
- });
- });
-
- // Logic for Homepage Genre Explorer card
- const genreExplorerCard = document.querySelector('[data-action="show-genres"]');
- if (genreExplorerCard) {
- genreExplorerCard.addEventListener('click', () => {
- console.log('🎵 Genre Explorer card clicked');
- showBeatportSubView('genres');
- loadBeatportGenres();
- });
- }
-
- // Setup homepage chart handlers (following genre page pattern to prevent duplicates)
- setupHomepageChartTypeHandlers();
-
- // Load homepage chart collections automatically (disabled since Browse Charts tab is hidden)
- // loadDJChartsInline();
- // loadFeaturedChartsInline();
-
- // Logic for Beatport breadcrumb back buttons
- const beatportBackButtons = document.querySelectorAll('.breadcrumb-back');
- beatportBackButtons.forEach(button => {
- button.addEventListener('click', () => {
- // Handle different back button types
- if (button.id === 'genre-detail-back') {
- showBeatportGenresView();
- } else if (button.id === 'genre-charts-list-back') {
- showBeatportGenreDetailViewFromBack();
- } else {
- showBeatportMainView();
- }
- });
- });
-
- // Logic for Beatport chart items
- const beatportChartItems = document.querySelectorAll('.beatport-chart-item');
- beatportChartItems.forEach(item => {
- item.addEventListener('click', () => {
- const chartType = item.dataset.chartType;
- const chartId = item.dataset.chartId;
- const chartName = item.dataset.chartName;
- const chartEndpoint = item.dataset.chartEndpoint;
- handleBeatportChartClick(chartType, chartId, chartName, chartEndpoint);
- });
- });
-
- // Logic for Beatport genre items
- const beatportGenreItems = document.querySelectorAll('.beatport-genre-item');
- beatportGenreItems.forEach(item => {
- item.addEventListener('click', () => {
- const genreSlug = item.dataset.genreSlug;
- const genreId = item.dataset.genreId;
- handleBeatportGenreClick(genreSlug, genreId);
- });
- });
-
- // Logic for Rebuild page Top 10 containers - Beatport Top 10
- const beatportTop10Container = document.getElementById('beatport-top10-list');
- if (beatportTop10Container) {
- beatportTop10Container.addEventListener('click', () => {
- console.log('🎵 Beatport Top 10 container clicked on rebuild page');
- handleRebuildBeatportTop10Click();
- });
- }
-
- // Logic for Rebuild page Top 10 containers - Hype Top 10
- const beatportHype10Container = document.getElementById('beatport-hype10-list');
- if (beatportHype10Container) {
- beatportHype10Container.addEventListener('click', () => {
- console.log('🔥 Hype Top 10 container clicked on rebuild page');
- handleRebuildHypeTop10Click();
- });
- }
-
- // Logic for Rebuild page Hero Slider - individual slide click handlers will be set up in populateBeatportSlider
- // Container-level click handler removed to allow individual slide clicks like top 10 releases
-
- // Logic for the Start Sync button
- const startSyncBtn = document.getElementById('start-sync-btn');
- if (startSyncBtn) {
- startSyncBtn.addEventListener('click', startSequentialSync);
- }
-
- // Logic for the YouTube parse button
- const youtubeParseBtn = document.getElementById('youtube-parse-btn');
- if (youtubeParseBtn) {
- youtubeParseBtn.addEventListener('click', parseYouTubePlaylist);
- }
-
- // Logic for YouTube URL input (Enter key support)
- const youtubeUrlInput = document.getElementById('youtube-url-input');
- if (youtubeUrlInput) {
- youtubeUrlInput.addEventListener('keypress', (e) => {
- if (e.key === 'Enter') {
- parseYouTubePlaylist();
- }
- });
- }
-
- // Logic for Spotify Public parse button
- const spotifyPublicParseBtn = document.getElementById('spotify-public-parse-btn');
- if (spotifyPublicParseBtn) {
- spotifyPublicParseBtn.addEventListener('click', parseSpotifyPublicUrl);
- }
-
- // Logic for Spotify Public URL input (Enter key support)
- const spotifyPublicUrlInput = document.getElementById('spotify-public-url-input');
- if (spotifyPublicUrlInput) {
- spotifyPublicUrlInput.addEventListener('keypress', (e) => {
- if (e.key === 'Enter') {
- parseSpotifyPublicUrl();
- }
- });
- }
-
- // Logic for Beatport Top 100 button
- const beatportTop100Btn = document.getElementById('beatport-top100-btn');
- if (beatportTop100Btn) {
- beatportTop100Btn.addEventListener('click', handleBeatportTop100Click);
- }
-
- // Logic for Hype Top 100 button
- const hypeTop100Btn = document.getElementById('hype-top100-btn');
- if (hypeTop100Btn) {
- hypeTop100Btn.addEventListener('click', handleHypeTop100Click);
- }
-
- // Initialize live log viewer
- initializeLiveLogViewer();
-}
-
-
-// --- Event Handlers ---
-
-// --- Find and REPLACE the existing handleDbUpdateButtonClick function ---
-
-async function handleDbUpdateButtonClick() {
- const button = document.getElementById('db-update-button');
- const currentAction = button.textContent;
-
- if (currentAction === 'Update Database') {
- const refreshSelect = document.getElementById('db-refresh-type');
- const isFullRefresh = refreshSelect.value === 'full';
-
- if (isFullRefresh) {
- // Replicates the QMessageBox confirmation from the GUI
- const confirmed = await showConfirmDialog({ title: 'Full Refresh', message: 'This will clear and rebuild the database for the active server. It can take a long time.\n\nAre you sure you want to proceed?', confirmText: 'Proceed' });
- if (!confirmed) return;
- }
-
- try {
- button.disabled = true;
- button.textContent = 'Starting...';
- const response = await fetch('/api/database/update', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ full_refresh: isFullRefresh })
- });
-
- if (response.ok) {
- showToast('Database update started!', 'success');
- // Start polling immediately to get live status
- checkAndUpdateDbProgress();
- } else {
- const errorData = await response.json();
- showToast(`Error: ${errorData.error}`, 'error');
- button.disabled = false;
- button.textContent = 'Update Database';
- }
- } catch (error) {
- showToast('Failed to start update process.', 'error');
- button.disabled = false;
- button.textContent = 'Update Database';
- }
-
- } else { // "Stop Update"
- try {
- const response = await fetch('/api/database/update/stop', { method: 'POST' });
- if (response.ok) {
- showToast('Stop request sent.', 'info');
- } else {
- showToast('Failed to send stop request.', 'error');
- }
- } catch (error) {
- showToast('Error sending stop request.', 'error');
- }
- }
-}
-
-async function handleWishlistButtonClick() {
- try {
- const playlistId = 'wishlist';
-
- console.log('🎵 [Wishlist Button] User clicked wishlist button - checking server state first');
-
- // STEP 1: Always check server state first to detect any active wishlist processes
- const response = await fetch('/api/active-processes');
- if (!response.ok) {
- throw new Error(`Failed to fetch active processes: ${response.status}`);
- }
-
- const data = await response.json();
- const processes = data.active_processes || [];
- const serverWishlistProcess = processes.find(p => p.playlist_id === playlistId);
-
- // STEP 2: Handle active server process - show current state immediately
- if (serverWishlistProcess) {
- console.log('🎯 [Wishlist Button] Server has active wishlist process:', {
- batch_id: serverWishlistProcess.batch_id,
- phase: serverWishlistProcess.phase,
- auto_initiated: serverWishlistProcess.auto_initiated,
- should_show: serverWishlistProcess.should_show_modal
- });
-
- // Clear any user-closed state since user explicitly requested to see modal
- WishlistModalState.clearUserClosed();
-
- // Check if we need to create/sync the frontend modal
- const clientWishlistProcess = activeDownloadProcesses[playlistId];
- const needsRehydration = !clientWishlistProcess ||
- clientWishlistProcess.batchId !== serverWishlistProcess.batch_id ||
- !clientWishlistProcess.modalElement ||
- !document.body.contains(clientWishlistProcess.modalElement);
-
- if (needsRehydration) {
- console.log('🔄 [Wishlist Button] Frontend modal needs sync/creation');
- await rehydrateModal(serverWishlistProcess, true); // user-requested = true
- } else {
- console.log('✅ [Wishlist Button] Frontend modal already synced, showing existing modal');
- clientWishlistProcess.modalElement.style.display = 'flex';
- WishlistModalState.setVisible();
- }
- return;
- }
-
- // STEP 3: No active server process - check wishlist count and create fresh modal
- console.log('📭 [Wishlist Button] No active server process, checking wishlist content');
-
- const countResponse = await fetch('/api/wishlist/count');
- if (!countResponse.ok) {
- throw new Error(`Failed to fetch wishlist count: ${countResponse.status}`);
- }
-
- const countData = await countResponse.json();
- if (countData.count === 0) {
- showToast('Wishlist is empty. No tracks to download.', 'info');
- return;
- }
-
- // STEP 4: Open wishlist overview modal (NEW - category selection)
- console.log(`🆕 [Wishlist Button] Opening wishlist overview for ${countData.count} tracks`);
- await openWishlistOverviewModal();
-
- } catch (error) {
- console.error('❌ [Wishlist Button] Error handling wishlist button click:', error);
- showToast(`Error opening wishlist: ${error.message}`, 'error');
- }
-}
-
-async function cleanupWishlist(playlistId) {
- try {
- // Show information dialog
- const confirmed = await showConfirmDialog({
- title: 'Cleanup Wishlist',
- message: 'This will check all wishlist tracks against your music library and automatically remove any tracks that already exist in your database.\n\nThis is a safe operation that only removes tracks you already have. Continue with cleanup?'
- });
-
- if (!confirmed) {
- return;
- }
-
- // Disable the cleanup button during the operation
- const cleanupBtn = document.getElementById(`cleanup-wishlist-btn-${playlistId}`);
- if (cleanupBtn) {
- cleanupBtn.disabled = true;
- cleanupBtn.textContent = '🧹 Cleaning...';
- }
-
- const response = await fetch('/api/wishlist/cleanup', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- }
- });
-
- const result = await response.json();
-
- if (result.success) {
- const removedCount = result.removed_count || 0;
- const processedCount = result.processed_count || 0;
-
- if (removedCount > 0) {
- showToast(`Wishlist cleanup completed: ${removedCount} tracks removed (${processedCount} checked)`, 'success');
-
- // Refresh the modal content to show updated state
- setTimeout(() => {
- openDownloadMissingWishlistModal();
- }, 500);
-
- // Update the wishlist count in the main dashboard
- await updateWishlistCount();
- } else {
- showToast(`Wishlist cleanup completed: No tracks to remove (${processedCount} checked)`, 'info');
- }
- } else {
- showToast(`Error cleaning wishlist: ${result.error}`, 'error');
- }
-
- } catch (error) {
- console.error('Error cleaning wishlist:', error);
- showToast(`Error cleaning wishlist: ${error.message}`, 'error');
- } finally {
- // Re-enable the cleanup button
- const cleanupBtn = document.getElementById(`cleanup-wishlist-btn-${playlistId}`);
- if (cleanupBtn) {
- cleanupBtn.disabled = false;
- cleanupBtn.textContent = '🧹 Cleanup Wishlist';
- }
- }
-}
-
-async function clearWishlist(playlistId) {
- try {
- // Show confirmation dialog
- const confirmed = await showConfirmDialog({
- title: 'Clear Wishlist',
- message: 'Are you sure you want to clear the entire wishlist?\n\nThis will permanently remove all failed tracks from the wishlist. This action cannot be undone.',
- confirmText: 'Clear All',
- destructive: true
- });
-
- if (!confirmed) {
- return;
- }
-
- // Disable the clear button during the operation
- const clearBtn = document.getElementById(`clear-wishlist-btn-${playlistId}`);
- if (clearBtn) {
- clearBtn.disabled = true;
- clearBtn.textContent = 'Clearing...';
- }
-
- // Call the clear API endpoint
- const response = await fetch('/api/wishlist/clear', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- }
- });
-
- const result = await response.json();
-
- if (result.success) {
- showToast('Wishlist cleared successfully', 'success');
-
- // Close the modal since there are no more tracks
- closeDownloadMissingModal(playlistId);
-
- // Update the wishlist count in the main dashboard
- await updateWishlistCount();
-
- } else {
- showToast(`Failed to clear wishlist: ${result.error || 'Unknown error'}`, 'error');
- }
-
- } catch (error) {
- console.error('Error clearing wishlist:', error);
- showToast(`Error clearing wishlist: ${error.message}`, 'error');
- } finally {
- // Re-enable the clear button
- const clearBtn = document.getElementById(`clear-wishlist-btn-${playlistId}`);
- if (clearBtn) {
- clearBtn.disabled = false;
- clearBtn.textContent = '🗑️ Clear Wishlist';
- }
- }
-}
-
-
-// ===============================
-// BEATPORT CHARTS FUNCTIONALITY
-// ===============================
-
-function updateBeatportClearButtonState() {
- const clearBtn = document.getElementById('beatport-clear-btn');
- if (!clearBtn) return;
-
- // Check if any Beatport cards are in active states
- const activeCharts = Object.values(beatportChartStates).filter(state =>
- state.phase === 'discovering' || state.phase === 'syncing' || state.phase === 'downloading'
- );
-
- const hasActiveCharts = activeCharts.length > 0;
- const hasAnyCharts = Object.keys(beatportChartStates).length > 0;
-
- if (!hasAnyCharts) {
- // No charts at all
- clearBtn.disabled = true;
- clearBtn.textContent = '🗑️ Clear';
- clearBtn.style.opacity = '0.5';
- clearBtn.style.cursor = 'not-allowed';
- clearBtn.title = 'No Beatport charts to clear';
- } else if (hasActiveCharts) {
- // Has charts but some are active
- clearBtn.disabled = true;
- clearBtn.textContent = '🚫 Clear Blocked';
- clearBtn.style.opacity = '0.6';
- clearBtn.style.cursor = 'not-allowed';
- const activeNames = activeCharts.map(state => state.chart?.name || 'Unknown').join(', ');
- clearBtn.title = `Cannot clear: ${activeCharts.length} chart(s) are currently active: ${activeNames}`;
- } else {
- // Has charts and none are active
- clearBtn.disabled = false;
- clearBtn.textContent = '🗑️ Clear';
- clearBtn.style.opacity = '1';
- clearBtn.style.cursor = 'pointer';
- clearBtn.title = 'Clear all Beatport charts';
- }
-}
-
-async function clearBeatportPlaylists() {
- const container = document.getElementById('beatport-playlist-container');
- const clearBtn = document.getElementById('beatport-clear-btn');
-
- if (Object.keys(beatportChartStates).length === 0) {
- showToast('No Beatport playlists to clear', 'info');
- return;
- }
-
- // Check if any Beatport cards are in active states (discovering, syncing, or downloading)
- const activeCharts = Object.values(beatportChartStates).filter(state =>
- state.phase === 'discovering' || state.phase === 'syncing' || state.phase === 'downloading'
- );
-
- if (activeCharts.length > 0) {
- const activeNames = activeCharts.map(state => state.chart?.name || 'Unknown').join(', ');
- showToast(`Cannot clear: ${activeCharts.length} chart(s) are currently discovering, syncing, or downloading: ${activeNames}`, 'warning');
- return;
- }
-
- // Show loading state
- clearBtn.disabled = true;
- clearBtn.textContent = '🗑️ Clearing...';
-
- try {
- // Clear all Beatport chart states
- Object.keys(beatportChartStates).forEach(chartHash => {
- // Close any open modals for this chart
- const modal = document.getElementById(`youtube-discovery-modal-${chartHash}`);
- if (modal) {
- modal.remove();
- }
-
- // Remove from YouTube states (since Beatport reuses that infrastructure)
- if (youtubePlaylistStates[chartHash]) {
- // Clean up any active download processes for this Beatport chart
- const ytState = youtubePlaylistStates[chartHash];
- if (ytState.is_beatport_playlist && ytState.convertedSpotifyPlaylistId) {
- const downloadProcess = activeDownloadProcesses[ytState.convertedSpotifyPlaylistId];
- if (downloadProcess) {
- console.log(`🗑️ Cleaning up download process for Beatport chart: ${chartHash}`);
- if (downloadProcess.modalElement) {
- downloadProcess.modalElement.remove();
- }
- delete activeDownloadProcesses[ytState.convertedSpotifyPlaylistId];
- }
- }
-
- delete youtubePlaylistStates[chartHash];
- }
- });
-
- // Clear Beatport states
- const chartHashesToClear = Object.keys(beatportChartStates);
- beatportChartStates = {};
-
- // Clear backend state for all charts
- for (const chartHash of chartHashesToClear) {
- try {
- await fetch(`/api/beatport/charts/delete/${chartHash}`, {
- method: 'DELETE'
- });
- console.log(`🗑️ Deleted backend state for Beatport chart: ${chartHash}`);
- } catch (error) {
- console.warn(`⚠️ Error deleting backend state for chart ${chartHash}:`, error);
- }
- }
-
- // Reset container to placeholder
- container.innerHTML = `
- Your created Beatport playlists will appear here.
- `;
-
- console.log(`🗑️ Cleared ${chartHashesToClear.length} Beatport charts from frontend and backend`);
- showToast('Cleared all Beatport playlists', 'success');
-
- // Update clear button state after clearing all charts
- updateBeatportClearButtonState();
-
- } catch (error) {
- console.error('Error clearing Beatport playlists:', error);
- showToast(`Error clearing playlists: ${error.message}`, 'error');
- } finally {
- clearBtn.disabled = false;
- clearBtn.textContent = '🗑️ Clear';
- }
-}
-
-function handleBeatportCategoryClick(category) {
- console.log(`🎵 Beatport category clicked: ${category}`);
-
- // Only handle genres category now - homepage has direct chart buttons
- switch (category) {
- case 'genres':
- showBeatportSubView('genres');
- loadBeatportGenres(); // Load genres dynamically
- break;
- default:
- showToast(`Unknown category: ${category}`, 'error');
- }
-}
-
-async function loadBeatportGenres() {
- console.log('🔍 Loading Beatport genres dynamically...');
-
- const genreGrid = document.querySelector('#beatport-genres-view .beatport-genre-grid');
- if (!genreGrid) {
- console.error('❌ Could not find genre grid element');
- return;
- }
-
- // Show loading state
- genreGrid.innerHTML = `
-
-
-
- `;
-
- try {
- // First, fetch genres quickly without images
- console.log('🚀 Fetching genres without images for fast loading...');
- const fastResponse = await fetch('/api/beatport/genres');
- if (!fastResponse.ok) {
- throw new Error(`API returned ${fastResponse.status}: ${fastResponse.statusText}`);
- }
-
- const fastData = await fastResponse.json();
- const genres = fastData.genres || [];
-
- if (genres.length === 0) {
- genreGrid.innerHTML = `
- 🔍 Discovering current Beatport genres...
-
-
- `;
- return;
- }
-
- // Generate genre cards dynamically (without images first)
- const genreCardsHTML = genres.map(genre => `
- ⚠️ No genres available
- -
-
-
- `).join('');
-
- genreGrid.innerHTML = genreCardsHTML;
-
- // Add click handlers to dynamically created genre items
- const genreItems = genreGrid.querySelectorAll('.beatport-genre-item');
- genreItems.forEach(item => {
- item.addEventListener('click', () => {
- const genreSlug = item.dataset.genreSlug;
- const genreId = item.dataset.genreId;
- const genreName = item.dataset.genreName;
- handleBeatportGenreClick(genreSlug, genreId, genreName);
- });
- });
-
- console.log(`✅ Loaded ${genres.length} Beatport genres dynamically (fast mode)`);
- showToast(`Loaded ${genres.length} current Beatport genres`, 'success');
-
- // Now fetch images progressively in the background if there are many genres
- if (genres.length > 10) {
- console.log('🖼️ Loading genre images progressively...');
- loadGenreImagesProgressively(genres);
- }
-
- } catch (error) {
- console.error('❌ Error loading Beatport genres:', error);
- genreGrid.innerHTML = `
- ${genre.name}
- Top 100 -
-
- `;
- showToast(`Error loading Beatport genres: ${error.message}`, 'error');
- }
-}
-
-async function loadGenreImagesProgressively(genres) {
- // Load genre images with 2 concurrent workers for faster loading
-
- const imageQueue = [...genres]; // Create a copy for processing
- let imagesLoaded = 0;
- const maxWorkers = 2;
-
- console.log(`🖼️ Starting progressive image loading with ${maxWorkers} workers for ${imageQueue.length} genres`);
-
- // Function to process a single image
- async function processImage(genre) {
- try {
- // Fetch individual genre image from backend
- const response = await fetch(`/api/beatport/genre-image/${genre.slug}/${genre.id}`);
-
- if (response.ok) {
- const data = await response.json();
-
- if (data.success && data.image_url) {
- // Find the genre item in the DOM
- const genreItem = document.querySelector(
- `[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
- );
-
- if (genreItem) {
- const iconElement = genreItem.querySelector('.genre-icon');
- if (iconElement) {
- // Create new image element with smooth transition
- const imageDiv = document.createElement('div');
- imageDiv.className = 'genre-image';
- imageDiv.style.backgroundImage = `url('${data.image_url}')`;
- imageDiv.style.opacity = '0';
- imageDiv.style.transition = 'opacity 0.3s ease';
-
- // Replace icon with image
- iconElement.replaceWith(imageDiv);
-
- // Trigger fade-in animation
- setTimeout(() => {
- imageDiv.style.opacity = '1';
- }, 50);
-
- imagesLoaded++;
- console.log(`🖼️ [${imagesLoaded}/${imageQueue.length}] Loaded image for ${genre.name}`);
- }
- }
- }
- }
- } catch (error) {
- console.warn(`⚠️ Failed to load image for ${genre.name}:`, error);
- }
- }
-
- // Worker function that processes images from the queue
- async function imageWorker(workerId) {
- while (imageQueue.length > 0) {
- const genre = imageQueue.shift(); // Take next image from queue
- if (genre) {
- await processImage(genre);
-
- // Small delay between requests to be respectful (500ms per worker = ~2 images per second total)
- await new Promise(resolve => setTimeout(resolve, 500));
- }
- }
- console.log(`✅ Worker ${workerId} finished`);
- }
-
- // Start the workers
- const workers = [];
- for (let i = 0; i < maxWorkers; i++) {
- workers.push(imageWorker(i + 1));
- }
-
- // Wait for all workers to complete
- await Promise.all(workers);
-
- console.log(`✅ Progressive image loading complete: ${imagesLoaded}/${genres.length} images loaded`);
-}
-
-function setupHomepageChartTypeHandlers() {
- console.log('🔧 Setting up homepage chart type handlers...');
-
- // Select all homepage chart type cards (following genre page pattern)
- const chartTypeCards = document.querySelectorAll('.homepage-main-charts-section .genre-chart-type-card[data-chart-type], .homepage-releases-section .genre-chart-type-card[data-chart-type], .homepage-hype-section .genre-chart-type-card[data-chart-type]');
-
- chartTypeCards.forEach(card => {
- // Remove existing listeners by cloning (following genre page pattern)
- card.replaceWith(card.cloneNode(true));
- });
-
- // Re-select after cloning to ensure clean event listeners (following genre page pattern)
- const newChartTypeCards = document.querySelectorAll('.homepage-main-charts-section .genre-chart-type-card[data-chart-type], .homepage-releases-section .genre-chart-type-card[data-chart-type], .homepage-hype-section .genre-chart-type-card[data-chart-type]');
-
- newChartTypeCards.forEach(card => {
- card.addEventListener('click', () => {
- const chartType = card.dataset.chartType;
- const chartEndpoint = card.dataset.chartEndpoint;
- const chartName = card.querySelector('.chart-type-info h3').textContent;
- console.log(`🔥 Homepage chart clicked: ${chartName} (${chartType})`);
- handleHomepageChartTypeClick(chartType, chartEndpoint, chartName);
- });
- });
-
- console.log(`✅ Setup ${newChartTypeCards.length} homepage chart handlers`);
-}
-
-async function handleHomepageChartTypeClick(chartType, chartEndpoint, chartName) {
- console.log(`🔥 Homepage chart type clicked: ${chartType} (${chartName})`);
-
- // Map chart types to API endpoints and create descriptive names (following genre page pattern)
- const chartTypeMap = {
- 'top-10': {
- endpoint: `/api/beatport/top-100`, // Use top-100 endpoint and limit to 10
- name: `Beatport Top 10`,
- limit: 10
- },
- 'top-100': {
- endpoint: `/api/beatport/top-100`,
- name: `Beatport Top 100`,
- limit: 100
- },
- 'releases-top-10': {
- endpoint: `/api/beatport/homepage/top-10-releases`, // Working route
- name: `Top 10 Releases`,
- limit: 10
- },
- 'releases-top-100': {
- endpoint: `/api/beatport/top-100-releases`,
- name: `Top 100 Releases`,
- limit: 100
- },
- 'latest-releases': {
- endpoint: `/api/beatport/homepage/new-releases`, // Use new-releases as fallback for now
- name: `Latest Releases`,
- limit: 50
- },
- 'hype-top-10': {
- endpoint: `/api/beatport/hype-top-100`, // Use hype-100 endpoint and limit to 10
- name: `Hype Top 10`,
- limit: 10
- },
- 'hype-top-100': {
- endpoint: `/api/beatport/hype-top-100`,
- name: `Hype Top 100`,
- limit: 100
- },
- 'hype-picks': {
- endpoint: `/api/beatport/homepage/hype-picks`, // Working route
- name: `Hype Picks`,
- limit: 50
- }
- };
-
- const chartConfig = chartTypeMap[chartType];
- if (!chartConfig) {
- console.error(`❌ Unknown homepage chart type: ${chartType}`);
- showToast(`Unknown chart type: ${chartType}`, 'error');
- return;
- }
-
- try {
- showToast(`Loading ${chartConfig.name}...`, 'info');
- showLoadingOverlay(`Loading ${chartConfig.name}...`);
-
- const response = await fetch(`${chartConfig.endpoint}?limit=${chartConfig.limit}`);
- if (!response.ok) {
- throw new Error(`Failed to fetch ${chartConfig.name}: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- throw new Error(`No tracks found in ${chartConfig.name}`);
- }
-
- console.log(`✅ Fetched ${data.tracks.length} tracks from ${chartConfig.name}`);
- hideLoadingOverlay();
- openBeatportChartAsDownloadModal(data.tracks, chartConfig.name, null);
-
- } catch (error) {
- console.error(`❌ Error loading ${chartConfig.name}:`, error);
- hideLoadingOverlay();
- showToast(`Error loading ${chartConfig.name}: ${error.message}`, 'error');
- }
-}
-
-
-
-async function openBeatportDiscoveryModal(chartHash, chartData) {
- console.log(`🎵 Opening Beatport discovery modal (reusing YouTube modal): ${chartData.name}`);
-
- // Create YouTube-style state entry for this Beatport chart
- const beatportState = {
- phase: 'fresh',
- playlist: {
- name: chartData.name,
- tracks: chartData.tracks,
- description: `${chartData.track_count} tracks from ${chartData.name}`,
- source: 'beatport'
- },
- is_beatport_playlist: true,
- beatport_chart_type: chartData.chart_type,
- beatport_chart_hash: chartHash // Link to Beatport card state
- };
-
- // Store in YouTube playlist states (reusing the infrastructure)
- youtubePlaylistStates[chartHash] = beatportState;
-
- // Start discovery automatically (like Tidal does)
- try {
- console.log(`🔍 Starting Beatport discovery for: ${chartData.name}`);
-
- // Update card phase to discovering immediately
- updateBeatportCardPhase(chartHash, 'discovering');
-
- // Call the discovery start endpoint with chart data
- const response = await fetch(`/api/beatport/discovery/start/${chartHash}`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- chart_data: chartData
- })
- });
-
- const result = await response.json();
- if (result.success) {
- // Update state to discovering
- youtubePlaylistStates[chartHash].phase = 'discovering';
-
- // Start polling for progress
- startBeatportDiscoveryPolling(chartHash);
-
- console.log(`✅ Started Beatport discovery for: ${chartData.name}`);
- } else {
- console.error('❌ Error starting Beatport discovery:', result.error);
- showToast(`Error starting discovery: ${result.error}`, 'error');
- // Revert card phase on error
- updateBeatportCardPhase(chartHash, 'fresh');
- }
- } catch (error) {
- console.error('❌ Error starting Beatport discovery:', error);
- showToast(`Error starting discovery: ${error.message}`, 'error');
- // Revert card phase on error
- updateBeatportCardPhase(chartHash, 'fresh');
- }
-
- // Open the existing YouTube discovery modal infrastructure
- openYouTubeDiscoveryModal(chartHash);
-
- console.log(`✅ Beatport discovery modal opened for ${chartData.name} with ${chartData.tracks.length} tracks`);
-}
-
-function startBeatportDiscoveryPolling(urlHash) {
- console.log(`🔄 Starting Beatport discovery polling for: ${urlHash}`);
-
- // Stop any existing polling (reuse YouTube polling infrastructure)
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- }
-
- // Phase 5: Subscribe via WebSocket
- if (socketConnected) {
- socket.emit('discovery:subscribe', { ids: [urlHash] });
- _discoveryProgressCallbacks[urlHash] = (data) => {
- if (data.error) {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
- return;
- }
- if (youtubePlaylistStates[urlHash]) {
- const transformed = {
- progress: data.progress || 0, spotify_matches: data.spotify_matches || 0, spotify_total: data.spotify_total || 0,
- results: (data.results || []).map((r, i) => ({
- index: r.index !== undefined ? r.index : i,
- yt_track: r.beatport_track ? r.beatport_track.title : 'Unknown',
- yt_artist: r.beatport_track ? r.beatport_track.artist : 'Unknown',
- status: (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found') ? '✅ Found' : (r.status === 'error' ? '❌ Error' : '❌ Not Found'),
- status_class: r.status_class || ((r.status === 'found' || r.status === '✅ Found') ? 'found' : (r.status === 'error' ? 'error' : 'not-found')),
- spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
- spotify_artist: r.spotify_data && r.spotify_data.artists ? r.spotify_data.artists.map(a => a.name || a).join(', ') : (r.spotify_artist || '-'),
- spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
- spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match
- }))
- };
- const st = youtubePlaylistStates[urlHash];
- st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
- st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
- st.discovery_results = data.results; st.discoveryResults = transformed.results;
- st.phase = data.phase || 'discovering';
- const chartHash = st.beatport_chart_hash || urlHash;
- updateBeatportCardPhase(chartHash, data.phase || 'discovering');
- updateBeatportCardProgress(chartHash, { spotify_total: data.spotify_total || 0, spotify_matches: data.spotify_matches || 0, failed: (data.spotify_total || 0) - (data.spotify_matches || 0) });
- if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = data.phase || 'discovering';
- updateYouTubeDiscoveryModal(urlHash, transformed);
- }
- if (data.phase === 'discovered' || data.phase === 'error') {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
- }
- };
- }
-
- const pollInterval = setInterval(async () => {
- // Always poll — no dedicated WebSocket events for discovery progress
- try {
- const response = await fetch(`/api/beatport/discovery/status/${urlHash}`);
- const status = await response.json();
-
- if (status.error) {
- console.error('❌ Error polling Beatport discovery status:', status.error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- return;
- }
-
- // Update state and modal (reuse YouTube infrastructure like Tidal)
- if (youtubePlaylistStates[urlHash]) {
- // Transform Beatport results to YouTube modal format (like Tidal does)
- const transformedStatus = {
- progress: status.progress || 0,
- spotify_matches: status.spotify_matches || 0,
- spotify_total: status.spotify_total || 0,
- results: (status.results || []).map((result, index) => ({
- index: result.index !== undefined ? result.index : index,
- yt_track: result.beatport_track ? result.beatport_track.title : 'Unknown',
- yt_artist: result.beatport_track ? result.beatport_track.artist : 'Unknown',
- status: result.status === 'found' || result.status === '✅ Found' || result.status_class === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
- status_class: result.status_class || (result.status === 'found' || result.status === '✅ Found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
- spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
- spotify_artist: result.spotify_data && result.spotify_data.artists ?
- result.spotify_data.artists.map(a => a.name || a).join(', ') : (result.spotify_artist || '-'),
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
- spotify_data: result.spotify_data, // Pass through
- spotify_id: result.spotify_id, // Pass through
- manual_match: result.manual_match // Pass through
- }))
- };
-
- // Update state with both backend and frontend formats (like Tidal)
- const state = youtubePlaylistStates[urlHash];
- state.discovery_progress = status.progress; // Backend format
- state.discoveryProgress = status.progress; // Frontend format - for modal progress display
- state.spotify_matches = status.spotify_matches; // Backend format
- state.spotifyMatches = status.spotify_matches; // Frontend format - for button logic
- state.discovery_results = status.results; // Backend format
- state.discoveryResults = transformedStatus.results; // Frontend format - for button logic
- state.phase = status.phase || 'discovering';
-
- // Update Beatport card phase and progress
- const chartHash = state.beatport_chart_hash || urlHash;
- updateBeatportCardPhase(chartHash, status.phase || 'discovering');
- updateBeatportCardProgress(chartHash, {
- spotify_total: status.spotify_total || 0,
- spotify_matches: status.spotify_matches || 0,
- failed: (status.spotify_total || 0) - (status.spotify_matches || 0)
- });
-
- // Sync with backend Beatport chart state
- if (beatportChartStates[chartHash]) {
- beatportChartStates[chartHash].phase = status.phase || 'discovering';
- }
-
- // Update modal display with transformed data
- updateYouTubeDiscoveryModal(urlHash, transformedStatus);
- }
-
- // Stop polling when discovery is complete
- if (status.phase === 'discovered' || status.phase === 'error') {
- console.log(`✅ Beatport discovery polling complete for: ${urlHash}`);
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- }
-
- } catch (error) {
- console.error('❌ Error polling Beatport discovery:', error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- }
- }, 2000); // Poll every 2 seconds like Tidal
-
- // Store the interval so we can clean it up later
- activeYouTubePollers[urlHash] = pollInterval;
-}
-
-function showBeatportSubView(viewType) {
- // Hide main category view
- const mainView = document.getElementById('beatport-main-view');
- if (mainView) {
- mainView.classList.remove('active');
- }
-
- // Hide all sub-views
- document.querySelectorAll('.beatport-sub-view').forEach(view => {
- view.classList.remove('active');
- });
-
- // Show the requested sub-view
- const targetView = document.getElementById(`beatport-${viewType}-view`);
- if (targetView) {
- targetView.classList.add('active');
- console.log(`🎵 Showing Beatport ${viewType} view`);
- } else {
- console.error(`🎵 Could not find view: beatport-${viewType}-view`);
- }
-}
-
-function showBeatportMainView() {
- // Hide all sub-views
- document.querySelectorAll('.beatport-sub-view').forEach(view => {
- view.classList.remove('active');
- });
-
- // Show main category view
- const mainView = document.getElementById('beatport-main-view');
- if (mainView) {
- mainView.classList.add('active');
- console.log('🎵 Showing Beatport main view');
- }
-}
-
-// ===============================
-// REBUILD PAGE TOP 10 FUNCTIONALITY
-// ===============================
-
-// Global variable to store rebuild page track data for reuse
-let rebuildPageTrackData = {
- beatport_top10: null,
- hype_top10: null
- // hero_slider removed - now uses individual slide click handlers
-};
-
-async function handleRebuildBeatportTop10Click() {
- console.log('🎵 Handling Beatport Top 10 click on rebuild page');
-
- // Use the existing chart creation pattern from Browse Charts EXACTLY
- await handleRebuildChartClick('beatport_top10', 'Beatport Top 10', 'rebuild_beatport_top10');
-}
-
-async function handleRebuildHypeTop10Click() {
- console.log('🔥 Handling Hype Top 10 click on rebuild page');
-
- // Use the existing chart creation pattern from Browse Charts EXACTLY
- await handleRebuildChartClick('hype_top10', 'Hype Top 10', 'rebuild_hype_top10');
-}
-
-// Hero slider now uses individual slide click handlers instead of container-level clicking
-// The old handleRebuildHeroSliderClick function has been removed in favor of individual release discovery
-
-async function handleRebuildChartClick(trackDataKey, chartName, chartType) {
- if (_beatportModalOpening) return;
- _beatportModalOpening = true;
- setTimeout(() => { _beatportModalOpening = false; }, 2000);
-
- try {
- // Get basic track data from DOM
- const trackData = await getRebuildPageTrackData(trackDataKey);
- if (!trackData || trackData.length === 0) {
- throw new Error(`No track data found for ${chartName}`);
- }
-
- console.log(`✅ Got ${trackData.length} tracks from ${chartName}, enriching one-by-one...`);
- showLoadingOverlay(`Fetching track metadata... (0/${trackData.length})`);
-
- const enrichedTracks = await _enrichTracksWithProgress(trackData, chartName);
-
- console.log(`✅ Enriched ${enrichedTracks.length} tracks`);
- hideLoadingOverlay();
- openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
-
- } catch (error) {
- hideLoadingOverlay();
- console.error(`❌ Error handling ${chartName} click:`, error);
- showToast(`Error loading ${chartName}: ${error.message}`, 'error');
- }
-}
-
-async function getRebuildPageTrackData(trackDataKey) {
- // First check if we have cached data from when the rebuild page was loaded
- if (rebuildPageTrackData[trackDataKey]) {
- console.log(`📦 Using cached ${trackDataKey} data`);
- return rebuildPageTrackData[trackDataKey];
- }
-
- // If no cached data, extract from DOM (fallback)
- console.log(`🔍 Extracting ${trackDataKey} data from rebuild page DOM`);
-
- let containerSelector, cardSelector;
- if (trackDataKey === 'beatport_top10') {
- containerSelector = '#beatport-top10-list';
- cardSelector = '.beatport-top10-card[data-url]';
- } else if (trackDataKey === 'hype_top10') {
- containerSelector = '#beatport-hype10-list';
- cardSelector = '.beatport-hype10-card[data-url]';
- } else {
- throw new Error(`Unknown track data key: ${trackDataKey}`);
- }
-
- const container = document.querySelector(containerSelector);
- if (!container) {
- throw new Error(`Container ${containerSelector} not found`);
- }
-
- const trackCards = container.querySelectorAll(cardSelector);
- if (trackCards.length === 0) {
- throw new Error(`No track cards found in ${containerSelector}`);
- }
-
- // Extract track data from DOM cards
- const tracks = Array.from(trackCards).map(card => {
- const title = card.querySelector('.beatport-top10-card-title, .beatport-hype10-card-title')?.textContent?.trim() || 'Unknown Title';
- const artist = card.querySelector('.beatport-top10-card-artist, .beatport-hype10-card-artist')?.textContent?.trim() || 'Unknown Artist';
- const label = card.querySelector('.beatport-top10-card-label, .beatport-hype10-card-label')?.textContent?.trim() || 'Unknown Label';
- const url = card.getAttribute('data-url') || '';
- const rank = card.querySelector('.beatport-top10-card-rank, .beatport-hype10-card-rank')?.textContent?.trim() || '';
-
- return {
- title: title,
- artist: artist,
- label: label,
- url: url,
- rank: rank
- };
- });
-
- console.log(`📋 Extracted ${tracks.length} tracks from ${containerSelector}`);
-
- // Cache for future use
- rebuildPageTrackData[trackDataKey] = tracks;
-
- return tracks;
-}
-
-// getHeroSliderTrackData function removed - hero slider now uses individual slide click handlers
-// Each slide will create its own discovery modal using handleBeatportReleaseCardClick
-
-// Hook into the loadBeatportTop10Lists function to cache track data
-const originalLoadBeatportTop10Lists = window.loadBeatportTop10Lists;
-if (originalLoadBeatportTop10Lists) {
- window.loadBeatportTop10Lists = async function () {
- const result = await originalLoadBeatportTop10Lists.apply(this, arguments);
-
- // If the load was successful, we can potentially cache the track data
- // But for now, we'll rely on DOM extraction as it's more reliable
-
- return result;
- };
-}
-
-// ===============================
-// BEATPORT CHART FUNCTIONALITY
-// ===============================
-
-function createBeatportCard(chartData) {
- const state = beatportChartStates[chartData.hash];
- const phase = state ? state.phase : 'fresh';
-
- let buttonText = getActionButtonText(phase);
- let phaseText = getPhaseText(phase);
- let phaseColor = getPhaseColor(phase);
-
- return `
- ❌ Failed to load genres: ${error.message}
- -
-
-
- `;
-}
-
-function addBeatportCardToContainer(chartData) {
- const container = document.getElementById('beatport-playlist-container');
-
- // Remove placeholder if it exists
- const placeholder = container.querySelector('.playlist-placeholder');
- if (placeholder) {
- placeholder.remove();
- }
-
- // Check if card already exists
- const existingCard = document.getElementById(`beatport-card-${chartData.hash}`);
- if (existingCard) {
- console.log(`Card already exists for ${chartData.name}, updating instead`);
- return;
- }
-
- // Create and add the card
- const cardHtml = createBeatportCard(chartData);
- container.insertAdjacentHTML('beforeend', cardHtml);
-
- // Initialize state
- beatportChartStates[chartData.hash] = {
- phase: 'fresh',
- chart: chartData,
- cardElement: document.getElementById(`beatport-card-${chartData.hash}`)
- };
-
- // Add click handler
- const card = document.getElementById(`beatport-card-${chartData.hash}`);
- if (card) {
- card.addEventListener('click', async () => await handleBeatportCardClick(chartData.hash));
- }
-
- console.log(`🃏 Created Beatport card: ${chartData.name}`);
-
- // Auto-mirror this Beatport chart
- if (chartData.tracks && chartData.tracks.length > 0) {
- mirrorPlaylist('beatport', chartData.hash, chartData.name, chartData.tracks.map(t => ({
- track_name: t.name || t.title || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artist || ''),
- album_name: t.album || '', duration_ms: t.duration_ms || 0,
- source_track_id: t.id || '', image_url: t.image_url || null
- })));
- }
-
- // Update clear button state after creating card
- updateBeatportClearButtonState();
-}
-
-async function handleBeatportCardClick(chartHash) {
- const state = beatportChartStates[chartHash];
- if (!state) {
- console.error(`❌ [Card Click] No state found for Beatport chart: ${chartHash}`);
- showToast('Chart state not found - try refreshing the page', 'error');
- return;
- }
-
- if (!state.chart) {
- console.error(`❌ [Card Click] No chart data found for Beatport chart: ${chartHash}`);
- showToast('Chart data missing - try refreshing the page', 'error');
- return;
- }
-
- console.log(`🎧 [Card Click] Beatport card clicked: ${chartHash}, Phase: ${state.phase}`);
-
- if (state.phase === 'fresh') {
- // Open discovery modal and start discovery
- openBeatportDiscoveryModal(chartHash, state.chart);
- } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
- // Reopen existing modal with preserved discovery results
- console.log(`🎧 [Card Click] Opening Beatport discovery modal for ${state.phase} phase`);
-
- // Check if we have the required state data
- const ytState = youtubePlaylistStates[chartHash];
- if (!ytState || !ytState.playlist) {
- console.log(`🔍 [Card Click] Missing playlist data for ${state.phase} phase, fetching from backend...`);
-
- try {
- // Fetch the full state from backend
- const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
-
- // Restore the missing playlist data
- if (fullState.chart_data) {
- if (!youtubePlaylistStates[chartHash]) {
- youtubePlaylistStates[chartHash] = {};
- }
- youtubePlaylistStates[chartHash].playlist = fullState.chart_data;
- youtubePlaylistStates[chartHash].is_beatport_playlist = true;
- youtubePlaylistStates[chartHash].beatport_chart_hash = chartHash;
-
- // Also restore discovery results if available
- if (fullState.discovery_results) {
- youtubePlaylistStates[chartHash].discovery_results = fullState.discovery_results;
- console.log(`🔄 [Hydration] Restored ${fullState.discovery_results.length} discovery results`);
- console.log(`🔄 [Hydration] First result:`, fullState.discovery_results[0]);
- }
-
- // Restore discovery progress state
- if (fullState.discovery_progress !== undefined) {
- youtubePlaylistStates[chartHash].discovery_progress = fullState.discovery_progress;
- }
- if (fullState.spotify_matches !== undefined) {
- youtubePlaylistStates[chartHash].spotify_matches = fullState.spotify_matches;
- console.log(`🔄 [Hydration] Restored spotify_matches: ${fullState.spotify_matches}`);
- }
- if (fullState.spotify_total !== undefined) {
- youtubePlaylistStates[chartHash].spotify_total = fullState.spotify_total;
- }
-
- console.log(`✅ [Card Click] Restored playlist data for ${state.phase} phase`);
- }
- } else {
- console.error(`❌ [Card Click] Failed to fetch state for chart: ${chartHash}`);
- showToast('Error loading chart data', 'error');
- return;
- }
- } catch (error) {
- console.error(`❌ [Card Click] Error fetching chart state:`, error);
- showToast('Error loading chart data', 'error');
- return;
- }
- }
-
- openYouTubeDiscoveryModal(chartHash);
-
- // If still in discovering phase, start polling for live updates
- if (state.phase === 'discovering') {
- console.log(`🔄 [Card Click] Starting discovery polling for ${state.phase} phase`);
-
- // Let the polling handle all modal updates to avoid data structure mismatches
- console.log(`📊 [Card Click] Starting polling - it will update modal with current progress`);
-
- startBeatportDiscoveryPolling(chartHash);
- }
- } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
- // Open download modal if we have the converted playlist ID (following YouTube/Tidal pattern)
- const ytState = youtubePlaylistStates[chartHash];
- if (ytState && ytState.is_beatport_playlist && ytState.convertedSpotifyPlaylistId) {
- console.log(`📥 [Card Click] Opening download modal for Beatport chart: ${ytState.playlist.name} (phase: ${state.phase})`);
-
- // Check if modal already exists, if not create it (like Tidal implementation)
- if (activeDownloadProcesses[ytState.convertedSpotifyPlaylistId]) {
- const process = activeDownloadProcesses[ytState.convertedSpotifyPlaylistId];
- if (process.modalElement) {
- console.log(`📱 [Card Click] Showing existing download modal for ${state.phase} phase`);
- process.modalElement.style.display = 'flex';
- } else {
- console.warn(`⚠️ [Card Click] Download process exists but modal element missing - rehydrating`);
- await rehydrateBeatportDownloadModal(chartHash, ytState);
- }
- } else {
- // Need to create the download modal - fetch the discovery results if needed
- console.log(`🔧 [Card Click] Rehydrating Beatport download modal for ${state.phase} phase`);
- await rehydrateBeatportDownloadModal(chartHash, ytState);
- }
- } else {
- console.error('❌ [Card Click] No converted Spotify playlist ID found for Beatport download modal');
- console.log('📊 [Card Click] Available state data:', Object.keys(ytState || {}));
-
- // Fallback: try to open discovery modal if we have discovery results
- if (ytState && ytState.discovery_results && ytState.discovery_results.length > 0) {
- console.log(`🔄 [Card Click] Fallback: Opening discovery modal with ${ytState.discovery_results.length} results`);
- openYouTubeDiscoveryModal(chartHash);
- } else {
- showToast('Unable to open download modal - missing playlist data', 'error');
- }
- }
- }
-}
-
-async function rehydrateBeatportDownloadModal(chartHash, ytState) {
- try {
- console.log(`💧 [Rehydration] Attempting fallback rehydration for Beatport chart: ${chartHash}`);
-
- // This function is only called as a fallback when the modal wasn't created during backend loading
- // In most cases, the modal should already exist from loadBeatportChartsFromBackend()
-
- if (!ytState || !ytState.playlist || !ytState.convertedSpotifyPlaylistId) {
- console.error(`❌ [Rehydration] Invalid state data for Beatport chart: ${chartHash}`);
- showToast('Cannot open download modal - invalid playlist data', 'error');
- return;
- }
-
- // Get discovery results from backend if not already loaded
- if (!ytState.discovery_results) {
- console.log(`🔍 Fetching discovery results from backend for Beatport chart: ${chartHash}`);
- const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- ytState.discovery_results = fullState.discovery_results;
- ytState.download_process_id = fullState.download_process_id;
- console.log(`✅ Loaded ${fullState.discovery_results?.length || 0} discovery results from backend`);
- } else {
- console.error('❌ Failed to fetch Beatport discovery results from backend');
- showToast('Error loading playlist data', 'error');
- return;
- }
- }
-
- // Extract Spotify tracks from discovery results
- const spotifyTracks = ytState.discovery_results
- .filter(result => result.spotify_data)
- .map(result => {
- const track = result.spotify_data;
- // Ensure artists is an array of strings
- if (track.artists && Array.isArray(track.artists)) {
- track.artists = track.artists.map(artist =>
- typeof artist === 'string' ? artist : (artist.name || artist)
- );
- } else if (track.artists && typeof track.artists === 'string') {
- track.artists = [track.artists];
- } else {
- track.artists = ['Unknown Artist'];
- }
- return {
- id: track.id,
- name: track.name,
- artists: track.artists,
- album: track.album || 'Unknown Album',
- duration_ms: track.duration_ms || 0,
- external_urls: track.external_urls || {}
- };
- });
-
- if (spotifyTracks.length === 0) {
- console.error('❌ No Spotify tracks found for download modal');
- showToast('No Spotify matches found for download', 'error');
- return;
- }
-
- const virtualPlaylistId = ytState.convertedSpotifyPlaylistId;
- const playlistName = ytState.playlist.name;
-
- // Create the download modal
- await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
- // Set up the modal for the running state if we have a download process ID
- if (ytState.download_process_id) {
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = ytState.download_process_id;
-
- // Update UI to reflect running state
- const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
- // Start polling for this process
- startModalDownloadPolling(virtualPlaylistId);
-
- console.log(`✅ [Rehydration] Fallback modal rehydrated for running download process`);
- }
- }
-
- } catch (error) {
- console.error(`❌ [Rehydration] Error in fallback rehydration for Beatport chart:`, error);
- showToast('Error opening download modal', 'error');
- hideLoadingOverlay();
- }
-}
-
-function updateBeatportCardPhase(chartHash, phase) {
- const state = beatportChartStates[chartHash];
- if (!state) return;
-
- state.phase = phase;
-
- // Re-render the card with new phase
- const card = document.getElementById(`beatport-card-${chartHash}`);
- if (card) {
- const newCardHtml = createBeatportCard(state.chart);
- card.outerHTML = newCardHtml;
-
- // Re-attach click handler
- const newCard = document.getElementById(`beatport-card-${chartHash}`);
- if (newCard) {
- newCard.addEventListener('click', async () => await handleBeatportCardClick(chartHash));
- state.cardElement = newCard;
- }
- }
-
- // Update clear button state after phase change
- updateBeatportClearButtonState();
-}
-
-function updateBeatportCardProgress(chartHash, progress) {
- const state = beatportChartStates[chartHash];
- if (!state) return;
-
- const card = document.getElementById(`beatport-card-${chartHash}`);
- if (!card) return;
-
- const progressElement = card.querySelector('.playlist-card-progress');
- if (!progressElement) return;
-
- const { spotify_total, spotify_matches, failed } = progress;
- const percentage = spotify_total > 0 ? Math.round((spotify_matches / spotify_total) * 100) : 0;
-
- progressElement.textContent = `♪ ${spotify_total} / ✓ ${spotify_matches} / ✗ ${failed} / ${percentage}%`;
- progressElement.classList.remove('hidden');
-
- console.log('🎧 Updated Beatport card progress:', chartHash, `${spotify_matches}/${spotify_total} (${percentage}%)`);
-}
-
-function switchToBeatportPlaylistsTab() {
- // Switch from "Browse Charts" to "My Playlists" tab
- const browseTab = document.querySelector('.beatport-tab-button[data-beatport-tab="browse"]');
- const playlistsTab = document.querySelector('.beatport-tab-button[data-beatport-tab="playlists"]');
- const browseContent = document.getElementById('beatport-browse-content');
- const playlistsContent = document.getElementById('beatport-playlists-content');
-
- if (browseTab && playlistsTab && browseContent && playlistsContent) {
- // Update tab buttons
- browseTab.classList.remove('active');
- playlistsTab.classList.add('active');
-
- // Update tab content
- browseContent.classList.remove('active');
- playlistsContent.classList.add('active');
-
- console.log('🔄 Switched to Beatport "My Playlists" tab');
- }
-}
-
-// ===============================
-// BEATPORT SYNC FUNCTIONALITY
-// ===============================
-
-async function startBeatportPlaylistSync(urlHash) {
- try {
- console.log('🎧 Starting Beatport playlist sync:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_beatport_playlist) {
- console.error('❌ Invalid Beatport playlist state for sync');
- showToast('Invalid Beatport playlist state', 'error');
- return;
- }
-
- // Call Beatport sync endpoint
- const response = await fetch(`/api/beatport/sync/start/${urlHash}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error starting sync: ${result.error}`, 'error');
- return;
- }
-
- // Capture sync_playlist_id for WebSocket subscription (Beatport returns sync_id)
- const syncPlaylistId = result.sync_id || result.sync_playlist_id;
- if (state) state.syncPlaylistId = syncPlaylistId;
-
- // Update state to syncing
- state.phase = 'syncing';
- updateBeatportCardPhase(state.beatport_chart_hash || urlHash, 'syncing');
-
- // Update modal buttons and start polling
- updateBeatportModalButtons(urlHash, 'syncing');
- startBeatportSyncPolling(urlHash, syncPlaylistId);
-
- showToast('Starting Beatport playlist sync...', 'success');
-
- } catch (error) {
- console.error('❌ Error starting Beatport sync:', error);
- showToast(`Error starting sync: ${error.message}`, 'error');
- }
-}
-
-function startBeatportSyncPolling(urlHash, syncPlaylistId) {
- // Stop any existing polling (reuse activeYouTubePollers for Beatport)
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- }
-
- // Resolve syncPlaylistId from argument or stored state
- const bpState = youtubePlaylistStates[urlHash];
- syncPlaylistId = syncPlaylistId || (bpState && bpState.syncPlaylistId);
-
- // Phase 6: Subscribe via WebSocket
- if (socketConnected && syncPlaylistId) {
- socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
- _syncProgressCallbacks[syncPlaylistId] = (data) => {
- const progress = data.progress || {};
- updateBeatportModalSyncProgress(urlHash, progress);
-
- if (data.status === 'finished' || data.status === 'error' || data.status === 'cancelled') {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
- delete _syncProgressCallbacks[syncPlaylistId];
-
- const state = youtubePlaylistStates[urlHash];
- if (state) {
- const chartHash = state.beatport_chart_hash || urlHash;
- if (data.status === 'finished') {
- state.phase = 'sync_complete';
- updateBeatportCardPhase(chartHash, 'sync_complete');
- updateBeatportModalButtons(urlHash, 'sync_complete');
- if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'sync_complete';
- } else {
- state.phase = 'discovered';
- updateBeatportCardPhase(chartHash, 'discovered');
- if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'discovered';
- }
- }
- }
- };
- }
-
- // Define the polling function (HTTP fallback)
- const pollFunction = async () => {
- if (socketConnected) return; // Phase 6: WS handles updates
- try {
- const response = await fetch(`/api/beatport/sync/status/${urlHash}`);
- const status = await response.json();
-
- if (status.error) {
- console.error('❌ Error polling Beatport sync:', status.error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- return;
- }
-
- updateBeatportModalSyncProgress(urlHash, status.progress);
-
- if (status.complete || status.status === 'error') {
- const state = youtubePlaylistStates[urlHash];
- if (state) {
- const chartHash = state.beatport_chart_hash || urlHash;
- if (status.complete) {
- state.phase = 'sync_complete';
- state.convertedSpotifyPlaylistId = status.converted_spotify_playlist_id;
- updateBeatportCardPhase(chartHash, 'sync_complete');
- updateBeatportModalButtons(urlHash, 'sync_complete');
- if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'sync_complete';
- } else {
- state.phase = 'discovered';
- updateBeatportCardPhase(chartHash, 'discovered');
- if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'discovered';
- }
- }
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- }
- } catch (error) {
- console.error('❌ Error polling Beatport sync:', error);
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- }
- }
- };
-
- // Run immediately to get current status (skip if WS active)
- if (!socketConnected) pollFunction();
-
- // Then continue polling at regular intervals
- const pollInterval = setInterval(pollFunction, 2000);
- activeYouTubePollers[urlHash] = pollInterval;
-}
-
-async function cancelBeatportSync(urlHash) {
- try {
- console.log('❌ Cancelling Beatport sync:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_beatport_playlist) {
- console.error('❌ Invalid Beatport playlist state');
- return;
- }
-
- const response = await fetch(`/api/beatport/sync/cancel/${urlHash}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error cancelling sync: ${result.error}`, 'error');
- return;
- }
-
- // Stop polling
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- }
-
- // Phase 6: Clean up WS subscription
- const bpSyncId = state && state.syncPlaylistId;
- if (bpSyncId && _syncProgressCallbacks[bpSyncId]) {
- if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [bpSyncId] });
- delete _syncProgressCallbacks[bpSyncId];
- }
-
- // Revert to discovered phase
- const chartHash = state.beatport_chart_hash || urlHash;
- state.phase = 'discovered';
- updateBeatportCardPhase(chartHash, 'discovered');
- updateBeatportModalButtons(urlHash, 'discovered');
-
- // Sync with backend Beatport chart state
- if (beatportChartStates[chartHash]) {
- beatportChartStates[chartHash].phase = 'discovered';
- }
-
- showToast('Beatport sync cancelled', 'info');
-
- } catch (error) {
- console.error('❌ Error cancelling Beatport sync:', error);
- showToast(`Error cancelling sync: ${error.message}`, 'error');
- }
-}
-
-function updateBeatportModalSyncProgress(urlHash, progress) {
- const statusDisplay = document.getElementById(`beatport-sync-status-${urlHash}`);
- if (!statusDisplay || !progress) return;
-
- console.log(`📊 Updating Beatport modal sync progress for ${urlHash}:`, progress);
-
- // Update individual counters with Beatport-specific IDs
- const totalEl = document.getElementById(`beatport-total-${urlHash}`);
- const matchedEl = document.getElementById(`beatport-matched-${urlHash}`);
- const failedEl = document.getElementById(`beatport-failed-${urlHash}`);
- const percentageEl = document.getElementById(`beatport-percentage-${urlHash}`);
-
- const total = progress.total_tracks || 0;
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
- const percentage = total > 0 ? Math.round((matched / total) * 100) : 0;
-
- if (totalEl) totalEl.textContent = total;
- if (matchedEl) matchedEl.textContent = matched;
- if (failedEl) failedEl.textContent = failed;
- if (percentageEl) percentageEl.textContent = percentage;
-}
-
-function updateBeatportModalButtons(urlHash, phase) {
- const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (!modal) return;
-
- const footerLeft = modal.querySelector('.modal-footer-left');
- if (footerLeft) {
- footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
- }
-}
-
-async function startBeatportDownloadMissing(urlHash) {
- try {
- console.log('🔍 Starting download missing tracks for Beatport chart:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- // Support both camelCase and snake_case
- const discoveryResults = state?.discoveryResults || state?.discovery_results;
-
- if (!state || !discoveryResults) {
- showToast('No discovery results available for download', 'error');
- return;
- }
-
- if (!state.is_beatport_playlist) {
- console.error('❌ State is not a Beatport playlist');
- showToast('Invalid Beatport chart state', 'error');
- return;
- }
-
- // Convert Beatport discovery results to Spotify tracks format (like Tidal does)
- console.log(`🔍 Total discovery results: ${discoveryResults.length}`);
- console.log(`🔍 First result (full object):`, JSON.stringify(discoveryResults[0], null, 2));
- console.log(`🔍 Second result (full object):`, JSON.stringify(discoveryResults[1], null, 2));
- console.log(`🔍 Results with spotify_data:`, discoveryResults.filter(r => r.spotify_data).length);
- console.log(`🔍 Results with spotify_id:`, discoveryResults.filter(r => r.spotify_id).length);
-
- const spotifyTracks = discoveryResults
- .filter(result => {
- // Accept if has spotify_data OR if has spotify_track (from automatic discovery)
- return result.spotify_data || (result.spotify_track && result.status_class === 'found');
- })
- .map(result => {
- // Use spotify_data if available, otherwise build from individual fields
- let track;
- if (result.spotify_data) {
- track = result.spotify_data;
- } else {
- // Build from individual fields (automatic discovery format)
- // Convert album to proper object format for wishlist compatibility
- const albumData = result.spotify_album || 'Unknown Album';
- const albumObject = typeof albumData === 'object' && albumData !== null
- ? albumData
- : {
- name: typeof albumData === 'string' ? albumData : 'Unknown Album',
- album_type: 'album',
- images: []
- };
-
- track = {
- id: result.spotify_id || 'unknown',
- name: result.spotify_track || 'Unknown Track',
- artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
- album: albumObject,
- duration_ms: 0
- };
- }
-
- // Ensure artists is an array of strings
- if (track.artists && Array.isArray(track.artists)) {
- track.artists = track.artists.map(artist =>
- typeof artist === 'string' ? artist : (artist.name || artist)
- );
- } else if (track.artists && typeof track.artists === 'string') {
- track.artists = [track.artists];
- } else {
- track.artists = ['Unknown Artist'];
- }
-
- // Ensure album is an object (in case it was converted back to string somehow)
- const albumForReturn = typeof track.album === 'object' && track.album !== null
- ? track.album
- : {
- name: typeof track.album === 'string' ? track.album : 'Unknown Album',
- album_type: 'album',
- images: []
- };
-
- return {
- id: track.id,
- name: track.name,
- artists: track.artists,
- album: albumForReturn,
- duration_ms: track.duration_ms || 0,
- external_urls: track.external_urls || {}
- };
- });
-
- if (spotifyTracks.length === 0) {
- showToast('No Spotify matches found for download', 'error');
- return;
- }
-
- console.log(`🎧 Found ${spotifyTracks.length} Spotify tracks for Beatport download`);
-
- // Create a virtual playlist for the download system
- const virtualPlaylistId = `beatport_${urlHash}`;
- const playlistName = state.playlist.name;
-
- // Store reference for card navigation (but don't change phase yet)
- state.convertedSpotifyPlaylistId = virtualPlaylistId;
-
- // Store converted playlist ID in backend but keep current phase
- const chartHash = state.beatport_chart_hash || urlHash;
- if (beatportChartStates[chartHash]) {
- try {
- await fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- phase: state.phase, // Keep current phase (should be 'discovered')
- converted_spotify_playlist_id: virtualPlaylistId
- })
- });
- console.log('✅ Updated backend with Beatport converted playlist ID (phase unchanged)');
- } catch (error) {
- console.warn('⚠️ Error updating backend Beatport state:', error);
- }
- }
-
- // Close the discovery modal if it's open
- const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (discoveryModal) {
- discoveryModal.classList.add('hidden');
- console.log('🔄 Closed Beatport discovery modal to show download modal');
- }
-
- // DON'T update card phase here - let the download modal handle phase changes when "Begin Analysis" is clicked
-
- // Open download missing tracks modal using the same system as YouTube/Tidal
- await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
- console.log(`✅ Opened download modal for Beatport chart: ${state.playlist.name}`);
-
- } catch (error) {
- console.error('❌ Error starting Beatport download missing tracks:', error);
- showToast(`Error starting downloads: ${error.message}`, 'error');
- }
-}
-
-async function handleBeatportChartClick(chartType, chartId, chartName, chartEndpoint) {
- console.log(`🎵 Beatport chart clicked: ${chartType} - ${chartId} - ${chartName}`);
-
- try {
- showToast(`Loading ${chartName}...`, 'info');
- showLoadingOverlay(`Loading ${chartName}...`);
-
- const response = await fetch(`${chartEndpoint}?limit=100`);
- if (!response.ok) {
- throw new Error(`Failed to fetch ${chartName}: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- throw new Error(`No tracks found in ${chartName}`);
- }
-
- console.log(`✅ Fetched ${data.tracks.length} tracks from ${chartName}`);
- hideLoadingOverlay();
- openBeatportChartAsDownloadModal(data.tracks, chartName, null);
-
- } catch (error) {
- console.error(`❌ Error handling Beatport chart click:`, error);
- hideLoadingOverlay();
- showToast(`Error loading ${chartName || chartId}: ${error.message}`, 'error');
- }
-}
-
-function handleBeatportGenreClick(genreSlug, genreId, genreName) {
- console.log(`🎵 Beatport genre clicked: ${genreName} (${genreSlug}/${genreId}) - SHOWING GENRE DETAIL VIEW`);
- console.log(`📝 Debug: Parameters received - Slug: ${genreSlug}, ID: ${genreId}, Name: ${genreName}`);
-
- // Navigate to genre detail view with proper parameters
- showBeatportGenreDetailView(genreSlug, genreId, genreName);
-}
-
-function showBeatportGenreDetailView(genreSlug, genreId, genreName) {
- console.log(`🎯 Showing genre detail view for: ${genreName}`);
- console.log(`📝 Debug: Function called with - Slug: ${genreSlug}, ID: ${genreId}, Name: ${genreName}`);
-
- // Hide all other beatport views
- document.querySelectorAll('.beatport-sub-view').forEach(view => {
- view.classList.remove('active');
- });
- const mainView = document.getElementById('beatport-main-view');
- if (mainView) {
- mainView.classList.remove('active');
- }
-
- // Show genre detail view
- const genreDetailView = document.getElementById('beatport-genre-detail-view');
- if (genreDetailView) {
- genreDetailView.classList.add('active');
- console.log(`📝 Debug: Genre detail view element found and activated`);
-
- // Update view content
- const titleElement = document.getElementById('genre-detail-title');
- const breadcrumbElement = document.getElementById('genre-detail-breadcrumb');
-
- console.log(`📝 Debug: Title element found: ${!!titleElement}, Breadcrumb element found: ${!!breadcrumbElement}`);
-
- if (titleElement) {
- titleElement.textContent = genreName;
- console.log(`📝 Debug: Updated title to: ${genreName}`);
- }
- if (breadcrumbElement) {
- breadcrumbElement.textContent = `Browse Charts > Genre Explorer > ${genreName} Charts`;
- console.log(`📝 Debug: Updated breadcrumb`);
- }
-
- // Update chart type titles with genre name
- const chartTitles = [
- 'genre-top-10-title',
- 'genre-top-100-title',
- 'genre-releases-top-10-title',
- 'genre-releases-top-100-title',
- 'genre-staff-picks-title',
- 'genre-latest-releases-title',
- 'genre-new-charts-title'
- ];
-
- chartTitles.forEach(titleId => {
- const element = document.getElementById(titleId);
- if (element) {
- console.log(`📝 Debug: Found chart title element: ${titleId}`);
- } else {
- console.log(`📝 Debug: Missing chart title element: ${titleId}`);
- }
- });
-
- document.getElementById('genre-top-10-title').textContent = `Top 10 ${genreName}`;
- document.getElementById('genre-top-100-title').textContent = `Top 100 ${genreName}`;
- document.getElementById('genre-releases-top-10-title').textContent = `Top 10 ${genreName} Releases`;
- document.getElementById('genre-releases-top-100-title').textContent = `Top 100 ${genreName} Releases`;
- document.getElementById('genre-staff-picks-title').textContent = `${genreName} Staff Picks`;
- document.getElementById('genre-latest-releases-title').textContent = `Latest ${genreName} Releases`;
-
- // Update Hype section titles
- document.getElementById('genre-hype-top-10-title').textContent = `${genreName} Hype Top 10`;
- document.getElementById('genre-hype-top-100-title').textContent = `${genreName} Hype Top 100`;
- document.getElementById('genre-hype-picks-title').textContent = `${genreName} Hype Picks`;
-
- // Load new charts directly (no expansion needed)
- console.log(`🔄 Auto-loading new charts for ${genreName}...`);
- loadNewChartsInline(genreSlug, genreId, genreName);
-
- // Store current genre data for chart type handlers
- genreDetailView.dataset.genreSlug = genreSlug;
- genreDetailView.dataset.genreId = genreId;
- genreDetailView.dataset.genreName = genreName;
-
- // Add click handlers to chart type cards
- setupGenreChartTypeHandlers();
-
- console.log(`✅ Genre detail view shown for ${genreName}`);
- } else {
- console.error('❌ Genre detail view element not found');
- }
-}
-
-function setupGenreChartTypeHandlers() {
- const chartTypeCards = document.querySelectorAll('#beatport-genre-detail-view .genre-chart-type-card');
-
- chartTypeCards.forEach(card => {
- // Remove existing listeners
- card.replaceWith(card.cloneNode(true));
- });
-
- // Re-select after cloning
- const newChartTypeCards = document.querySelectorAll('#beatport-genre-detail-view .genre-chart-type-card');
-
- newChartTypeCards.forEach(card => {
- card.addEventListener('click', () => {
- const chartType = card.dataset.chartType;
- const genreDetailView = document.getElementById('beatport-genre-detail-view');
- const genreSlug = genreDetailView.dataset.genreSlug;
- const genreId = genreDetailView.dataset.genreId;
- const genreName = genreDetailView.dataset.genreName;
-
- // All chart types now go directly to discovery modal
- handleGenreChartTypeClick(genreSlug, genreId, genreName, chartType);
- });
- });
-}
-
-function showBeatportGenresView() {
- // Hide genre detail view and show genres view
- document.querySelectorAll('.beatport-sub-view').forEach(view => {
- view.classList.remove('active');
- });
-
- const genresView = document.getElementById('beatport-genres-view');
- if (genresView) {
- genresView.classList.add('active');
- }
-}
-
-async function toggleNewChartsExpansion(genreSlug, genreId, genreName) {
- console.log(`📈 Toggling new charts expansion for: ${genreName}`);
-
- const expandedContent = document.getElementById('new-charts-expanded');
- const expandIndicator = document.getElementById('expand-indicator');
- const chartsCount = document.getElementById('new-charts-count');
-
- if (!expandedContent || !expandIndicator) {
- console.error('❌ New charts expansion elements not found');
- return;
- }
-
- // Check if already expanded
- const isExpanded = expandedContent.style.display !== 'none';
-
- if (isExpanded) {
- // Collapse
- expandedContent.style.display = 'none';
- expandIndicator.classList.remove('expanded');
- console.log('📉 Collapsed new charts section');
- } else {
- // Expand and load charts
- expandedContent.style.display = 'block';
- expandIndicator.classList.add('expanded');
-
- // Load charts if not already loaded
- await loadNewChartsInline(genreSlug, genreId, genreName);
- console.log('📈 Expanded new charts section');
- }
-}
-
-async function loadNewChartsInline(genreSlug, genreId, genreName) {
- const chartsGrid = document.getElementById('new-charts-grid');
- const loadingInline = document.getElementById('charts-loading-inline');
-
- if (!chartsGrid || !loadingInline) {
- console.error('❌ Inline charts elements not found');
- return;
- }
-
- // Show loading state
- loadingInline.style.display = 'block';
- chartsGrid.style.display = 'none';
- chartsGrid.innerHTML = '';
-
- try {
- console.log(`🔍 Loading inline charts for ${genreName}...`);
-
- // Fetch charts from the new-charts endpoint
- const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/new-charts?limit=20`);
- if (!response.ok) {
- throw new Error(`Failed to fetch charts: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- // Show empty state
- chartsGrid.innerHTML = `
-
-
- ${escapeHtml(chartData.name)}
-
- ${chartData.track_count} tracks
- ${phaseText}
-
-
-
-
-
-
-
- `;
- } else {
- // Populate charts grid
- const chartsHTML = data.tracks.map((chart, index) => {
- const chartName = chart.title || 'Untitled Chart';
- const artistName = chart.artist || 'Various Artists';
- const chartUrl = chart.url || '';
-
- return `
- No Charts Available
-No curated charts found for ${genreName} at the moment.
-
-
- `;
- }).join('');
-
- chartsGrid.innerHTML = chartsHTML;
-
- // Add click handlers to chart items
- setupNewChartItemHandlers(genreSlug, genreId, genreName);
- }
-
- // Hide loading and show grid
- loadingInline.style.display = 'none';
- chartsGrid.style.display = 'grid';
-
- console.log(`✅ Loaded ${data.tracks?.length || 0} inline charts for ${genreName}`);
- showToast(`Found ${data.tracks?.length || 0} chart collections`, 'success');
-
- } catch (error) {
- console.error(`❌ Error loading inline charts for ${genreName}:`, error);
-
- // Show error state
- chartsGrid.innerHTML = `
-
-
-
-
-
- ${chartName}
-by ${artistName}
-
- Curated ${genreName} chart collection
-
-
-
-
- `;
-
- loadingInline.style.display = 'none';
- chartsGrid.style.display = 'grid';
-
- showToast(`Error loading charts: ${error.message}`, 'error');
- }
-}
-
-async function loadDJChartsInline() {
- const chartsGrid = document.getElementById('dj-charts-grid');
- const loadingInline = document.getElementById('dj-charts-loading-inline');
-
- if (!chartsGrid || !loadingInline) {
- console.error('❌ DJ charts elements not found');
- return;
- }
-
- // Show loading state
- loadingInline.style.display = 'block';
- chartsGrid.style.display = 'none';
- chartsGrid.innerHTML = '';
-
- try {
- console.log('🔍 Loading DJ charts...');
-
- // Fetch charts from the dj-charts-improved endpoint
- const response = await fetch('/api/beatport/dj-charts-improved?limit=20');
- if (!response.ok) {
- throw new Error(`Failed to fetch DJ charts: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.charts || data.charts.length === 0) {
- // Show empty state
- chartsGrid.innerHTML = `
- Error Loading Charts
-Unable to load chart collections for ${genreName}.
-
-
- `;
- loadingInline.style.display = 'none';
- chartsGrid.style.display = 'grid';
- return;
- }
-
- // Create chart items using New Charts structure
- const chartsHTML = data.charts.map(chart => {
- const chartName = chart.name || chart.title || 'Untitled Chart';
- const artistName = chart.artist || chart.curator || 'Various Artists';
- const chartUrl = chart.url || chart.chart_url || '';
-
- return `
- No DJ Charts Available
-No DJ curated charts found at the moment.
-
-
- `;
- }).join('');
-
- chartsGrid.innerHTML = chartsHTML;
-
- // Hide loading, show content
- loadingInline.style.display = 'none';
- chartsGrid.style.display = 'grid';
-
- // Setup click handlers for chart items
- setupDJChartItemHandlers();
-
- console.log(`✅ Loaded ${data.charts.length} DJ charts`);
-
- } catch (error) {
- console.error('❌ Error loading DJ charts:', error);
-
- // Show error state
- chartsGrid.innerHTML = `
-
-
-
-
-
- ${chartName}
-by ${artistName}
-
- DJ curated chart collection
-
-
-
-
- `;
-
- loadingInline.style.display = 'none';
- chartsGrid.style.display = 'grid';
-
- showToast(`Error loading DJ charts: ${error.message}`, 'error');
- }
-}
-
-async function loadFeaturedChartsInline() {
- const chartsGrid = document.getElementById('featured-charts-grid');
- const loadingInline = document.getElementById('featured-charts-loading-inline');
-
- if (!chartsGrid || !loadingInline) {
- console.error('❌ Featured charts elements not found');
- return;
- }
-
- // Show loading state
- loadingInline.style.display = 'block';
- chartsGrid.style.display = 'none';
- chartsGrid.innerHTML = '';
-
- try {
- console.log('🔍 Loading Featured charts...');
-
- // Fetch charts from the homepage/featured-charts endpoint
- const response = await fetch('/api/beatport/homepage/featured-charts?limit=20');
- if (!response.ok) {
- throw new Error(`Failed to fetch Featured charts: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- // Show empty state
- chartsGrid.innerHTML = `
- Error Loading DJ Charts
-Unable to load DJ chart collections.
-
-
- `;
- loadingInline.style.display = 'none';
- chartsGrid.style.display = 'grid';
- return;
- }
-
- // Create chart items using New Charts structure
- const chartsHTML = data.tracks.map(chart => {
- const chartName = chart.name || chart.title || 'Untitled Chart';
- const artistName = chart.artist || chart.curator || 'Various Artists';
- const chartUrl = chart.url || chart.chart_url || '';
-
- return `
- No Featured Charts Available
-No featured curated charts found at the moment.
-
-
- `;
- }).join('');
-
- chartsGrid.innerHTML = chartsHTML;
-
- // Hide loading, show content
- loadingInline.style.display = 'none';
- chartsGrid.style.display = 'grid';
-
- // Setup click handlers for chart items
- setupFeaturedChartItemHandlers();
-
- console.log(`✅ Loaded ${data.tracks.length} Featured charts`);
-
- } catch (error) {
- console.error('❌ Error loading Featured charts:', error);
-
- // Show error state
- chartsGrid.innerHTML = `
-
-
-
-
-
- ${chartName}
-by ${artistName}
-
- Editor curated chart collection
-
-
-
-
- `;
-
- loadingInline.style.display = 'none';
- chartsGrid.style.display = 'grid';
-
- showToast(`Error loading Featured charts: ${error.message}`, 'error');
- }
-}
-
-function setupDJChartItemHandlers() {
- const chartItems = document.querySelectorAll('#dj-charts-grid .new-chart-item');
-
- chartItems.forEach(item => {
- item.addEventListener('click', async () => {
- const chartName = item.dataset.chartName;
- const chartUrl = item.dataset.chartUrl;
-
- console.log(`🎧 DJ Chart clicked: ${chartName}`);
-
- try {
- showToast(`Loading ${chartName}...`, 'info');
- showLoadingOverlay(`Scraping ${chartName}...`);
-
- const response = await fetch('/api/beatport/chart/extract', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
- });
-
- if (!response.ok) {
- throw new Error(`Failed to extract chart tracks: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- throw new Error('No tracks found in chart');
- }
-
- console.log(`✅ Extracted ${data.tracks.length} raw tracks from DJ chart, enriching...`);
- const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
-
- hideLoadingOverlay();
- openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
-
- } catch (error) {
- console.error('❌ Error extracting DJ chart tracks:', error);
- hideLoadingOverlay();
- showToast(`Error loading chart: ${error.message}`, 'error');
- }
- });
- });
-}
-
-function setupFeaturedChartItemHandlers() {
- const chartItems = document.querySelectorAll('#featured-charts-grid .new-chart-item');
-
- chartItems.forEach(item => {
- item.addEventListener('click', async () => {
- const chartName = item.dataset.chartName;
- const chartUrl = item.dataset.chartUrl;
-
- console.log(`⭐ Featured Chart clicked: ${chartName}`);
-
- try {
- showToast(`Loading ${chartName}...`, 'info');
- showLoadingOverlay(`Scraping ${chartName}...`);
-
- const response = await fetch('/api/beatport/chart/extract', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
- });
-
- if (!response.ok) {
- throw new Error(`Failed to extract chart tracks: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- throw new Error('No tracks found in chart');
- }
-
- console.log(`✅ Extracted ${data.tracks.length} raw tracks from Featured chart, enriching...`);
- const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
-
- hideLoadingOverlay();
- openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
-
- } catch (error) {
- console.error('❌ Error extracting Featured chart tracks:', error);
- hideLoadingOverlay();
- showToast(`Error loading chart: ${error.message}`, 'error');
- }
- });
- });
-}
-
-function setupNewChartItemHandlers(genreSlug, genreId, genreName) {
- const chartItems = document.querySelectorAll('#new-charts-grid .new-chart-item');
-
- chartItems.forEach(item => {
- item.addEventListener('click', async () => {
- const chartName = item.dataset.chartName;
- const chartArtist = item.dataset.chartArtist;
- const chartUrl = item.dataset.chartUrl;
-
- console.log(`🎵 Chart clicked: ${chartName} by ${chartArtist}`);
-
- const fullChartName = `${chartName} (${genreName})`;
-
- try {
- showToast(`Loading ${chartName}...`, 'info');
- showLoadingOverlay(`Scraping ${chartName}...`);
-
- const response = await fetch('/api/beatport/chart/extract', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
- });
-
- if (!response.ok) {
- throw new Error(`Failed to fetch chart content: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- throw new Error('No tracks found in chart');
- }
-
- console.log(`✅ Extracted ${data.tracks.length} raw tracks from ${fullChartName}, enriching...`);
- const enrichedTracks = await _enrichTracksWithProgress(data.tracks, fullChartName);
-
- hideLoadingOverlay();
- openBeatportChartAsDownloadModal(enrichedTracks, fullChartName, null);
-
- } catch (error) {
- console.error(`❌ Error loading chart: ${error.message}`);
- hideLoadingOverlay();
- showToast(`Error loading chart: ${error.message}`, 'error');
- }
- });
- });
-}
-
-function showBeatportGenreDetailViewFromBack() {
- // Show genre detail view (used by charts list back button)
- document.querySelectorAll('.beatport-sub-view').forEach(view => {
- view.classList.remove('active');
- });
-
- const genreDetailView = document.getElementById('beatport-genre-detail-view');
- if (genreDetailView) {
- genreDetailView.classList.add('active');
- }
-}
-
-async function showBeatportGenreChartsListView(genreSlug, genreId, genreName) {
- console.log(`📈 Showing charts list for: ${genreName}`);
-
- // Hide all other beatport views
- document.querySelectorAll('.beatport-sub-view').forEach(view => {
- view.classList.remove('active');
- });
- const mainView = document.getElementById('beatport-main-view');
- if (mainView) {
- mainView.classList.remove('active');
- }
-
- // Show charts list view
- const chartsListView = document.getElementById('beatport-genre-charts-list-view');
- if (chartsListView) {
- chartsListView.classList.add('active');
-
- // Update view content
- document.getElementById('genre-charts-list-title').textContent = `New ${genreName} Charts`;
- document.getElementById('genre-charts-list-breadcrumb').textContent = `Browse Charts > Genre Explorer > ${genreName} Charts > New Charts`;
-
- // Store current genre data for individual chart handlers
- chartsListView.dataset.genreSlug = genreSlug;
- chartsListView.dataset.genreId = genreId;
- chartsListView.dataset.genreName = genreName;
-
- // Load charts for this genre
- await loadGenreChartsList(genreSlug, genreId, genreName);
-
- console.log(`✅ Charts list view shown for ${genreName}`);
- } else {
- console.error('❌ Charts list view element not found');
- }
-}
-
-async function loadGenreChartsList(genreSlug, genreId, genreName) {
- const chartsGrid = document.getElementById('genre-charts-grid');
- const loadingPlaceholder = document.getElementById('charts-loading-placeholder');
-
- if (!chartsGrid || !loadingPlaceholder) {
- console.error('❌ Charts grid or loading placeholder not found');
- return;
- }
-
- // Show loading state
- loadingPlaceholder.style.display = 'block';
- chartsGrid.style.display = 'none';
- chartsGrid.innerHTML = '';
-
- try {
- console.log(`🔍 Loading charts for ${genreName}...`);
-
- // Fetch charts from the new-charts endpoint
- const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/new-charts?limit=50`);
- if (!response.ok) {
- throw new Error(`Failed to fetch charts: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- // Show empty state
- chartsGrid.innerHTML = `
- Error Loading Featured Charts
-Unable to load featured chart collections.
-
-
- `;
- } else {
- // Populate charts grid
- const chartsHTML = data.tracks.map((chart, index) => {
- const chartName = chart.title || 'Untitled Chart';
- const artistName = chart.artist || 'Various Artists';
- const chartUrl = chart.url || '';
-
- // Extract chart ID from URL for click handling
- const chartId = chartUrl.split('/').pop() || `chart_${index}`;
-
- return `
- No Charts Available
-No curated charts found for ${genreName} at the moment.
Check back later for new DJ and artist chart collections.
-
- `;
- }).join('');
-
- chartsGrid.innerHTML = chartsHTML;
-
- // Add click handlers to chart items
- setupGenreChartItemHandlers(genreSlug, genreId, genreName);
- }
-
- // Hide loading and show grid
- loadingPlaceholder.style.display = 'none';
- chartsGrid.style.display = 'grid';
-
- console.log(`✅ Loaded ${data.tracks?.length || 0} charts for ${genreName}`);
- showToast(`Found ${data.tracks?.length || 0} chart collections`, 'success');
-
- } catch (error) {
- console.error(`❌ Error loading charts for ${genreName}:`, error);
-
- // Show error state
- chartsGrid.innerHTML = `
-
-
-
-
-
- ${chartName}
-by ${artistName}
-
- Curated chart collection featuring ${genreName} tracks
-
-
-
-
- `;
-
- loadingPlaceholder.style.display = 'none';
- chartsGrid.style.display = 'grid';
-
- showToast(`Error loading charts: ${error.message}`, 'error');
- }
-}
-
-function setupGenreChartItemHandlers(genreSlug, genreId, genreName) {
- const chartItems = document.querySelectorAll('#genre-charts-grid .genre-chart-item');
-
- chartItems.forEach(item => {
- item.addEventListener('click', async () => {
- const chartName = item.dataset.chartName;
- const chartArtist = item.dataset.chartArtist;
- const chartUrl = item.dataset.chartUrl;
-
- console.log(`🎵 Chart clicked: ${chartName} by ${chartArtist}`);
-
- const fullChartName = `${chartName} (${genreName})`;
-
- try {
- showToast(`Loading ${chartName}...`, 'info');
- showLoadingOverlay(`Scraping ${chartName}...`);
-
- const response = await fetch('/api/beatport/chart/extract', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
- });
-
- if (!response.ok) {
- throw new Error(`Failed to fetch chart content: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- throw new Error('No tracks found in chart');
- }
-
- console.log(`✅ Extracted ${data.tracks.length} raw tracks from ${fullChartName}, enriching...`);
- const enrichedTracks = await _enrichTracksWithProgress(data.tracks, fullChartName);
-
- hideLoadingOverlay();
- openBeatportChartAsDownloadModal(enrichedTracks, fullChartName, null);
-
- } catch (error) {
- console.error(`❌ Error loading chart: ${error.message}`);
- hideLoadingOverlay();
- showToast(`Error loading chart: ${error.message}`, 'error');
- }
- });
- });
-}
-
-async function handleGenreChartTypeClick(genreSlug, genreId, genreName, chartType) {
- console.log(`🎯 Genre chart type clicked: ${chartType} for ${genreName} (${genreSlug}/${genreId})`);
-
- // Map chart types to API endpoints and create descriptive names
- const chartTypeMap = {
- 'top-10': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/top-10`,
- name: `Top 10 ${genreName}`,
- limit: 10
- },
- 'top-100': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/tracks`,
- name: `Top 100 ${genreName}`,
- limit: 100
- },
- 'releases-top-10': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/releases-top-10`,
- name: `Top 10 ${genreName} Releases`,
- limit: 10
- },
- 'releases-top-100': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/releases-top-100`,
- name: `Top 100 ${genreName} Releases`,
- limit: 100
- },
- 'staff-picks': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/staff-picks`,
- name: `${genreName} Staff Picks`,
- limit: 50
- },
- 'latest-releases': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/latest-releases`,
- name: `Latest ${genreName} Releases`,
- limit: 50
- },
- 'hype-top-10': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/hype-top-10`,
- name: `${genreName} Hype Top 10`,
- limit: 10
- },
- 'hype-top-100': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/hype-top-100`,
- name: `${genreName} Hype Top 100`,
- limit: 100
- },
- 'hype-picks': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/hype-picks`,
- name: `${genreName} Hype Picks`,
- limit: 50
- },
- 'new-charts': {
- endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/new-charts`,
- name: `New ${genreName} Charts`,
- limit: 100
- }
- };
-
- const chartConfig = chartTypeMap[chartType];
- if (!chartConfig) {
- console.error(`❌ Unknown chart type: ${chartType}`);
- showToast(`Unknown chart type: ${chartType}`, 'error');
- return;
- }
-
- try {
- showToast(`Loading ${chartConfig.name}...`, 'info');
- showLoadingOverlay(`Loading ${chartConfig.name}...`);
-
- const response = await fetch(`${chartConfig.endpoint}?limit=${chartConfig.limit}`);
- if (!response.ok) {
- throw new Error(`Failed to fetch ${chartConfig.name}: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success || !data.tracks || data.tracks.length === 0) {
- throw new Error(`No tracks found in ${chartConfig.name}`);
- }
-
- console.log(`✅ Fetched ${data.tracks.length} tracks from ${chartConfig.name}`);
- hideLoadingOverlay();
- openBeatportChartAsDownloadModal(data.tracks, chartConfig.name, null);
-
- } catch (error) {
- console.error(`❌ Error loading ${chartConfig.name}:`, error);
- hideLoadingOverlay();
- showToast(`Error loading ${chartConfig.name}: ${error.message}`, 'error');
- }
-}
-
-// ===============================
-// SPOTIFY PUBLIC LINK FUNCTIONALITY
-// ===============================
-
-let spotifyPublicPlaylists = []; // Array of loaded Spotify public playlist objects
-let spotifyPublicPlaylistStates = {}; // Key: url_hash, Value: state dict
-
-async function parseSpotifyPublicUrl() {
- const urlInput = document.getElementById('spotify-public-url-input');
- const url = urlInput.value.trim();
-
- if (!url) {
- showToast('Please enter a Spotify URL', 'error');
- return;
- }
-
- // Basic URL validation
- if (!url.includes('open.spotify.com/playlist') && !url.includes('open.spotify.com/album') &&
- !url.startsWith('spotify:playlist:') && !url.startsWith('spotify:album:')) {
- showToast('Please enter a valid Spotify playlist or album URL', 'error');
- return;
- }
-
- // Check if already loaded
- if (_isUrlAlreadyLoaded('spotify-public', url)) {
- showToast('This playlist is already loaded', 'info');
- urlInput.value = '';
- return;
- }
-
- const parseBtn = document.getElementById('spotify-public-parse-btn');
- if (parseBtn) {
- parseBtn.disabled = true;
- parseBtn.textContent = 'Loading...';
- }
-
- try {
- console.log('🎵 Parsing public Spotify URL:', url);
-
- const response = await fetch('/api/spotify/parse-public', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ url })
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error: ${result.error}`, 'error');
- return;
- }
-
- // Check if already loaded
- if (spotifyPublicPlaylists.find(p => String(p.url_hash) === String(result.url_hash))) {
- showToast('This playlist is already loaded', 'info');
- urlInput.value = '';
- return;
- }
-
- console.log(`✅ Spotify ${result.type} parsed: ${result.name} (${result.track_count} tracks)`);
-
- spotifyPublicPlaylists.push(result);
-
- // Auto-mirror
- if (result.tracks && result.tracks.length > 0) {
- mirrorPlaylist('spotify_public', result.url_hash, result.name, result.tracks.map(t => ({
- track_name: t.name || '',
- artist_name: Array.isArray(t.artists) ? t.artists.map(a => a.name).join(', ') : '',
- album_name: t.album?.name || '',
- duration_ms: t.duration_ms || 0,
- source_track_id: t.id || ''
- })), { owner: result.subtitle || '', image_url: '', description: result.url || '' });
- }
-
- // Save to URL history
- saveUrlHistory('spotify-public', url, result.name);
-
- renderSpotifyPublicPlaylists();
- await loadSpotifyPublicPlaylistStatesFromBackend();
-
- urlInput.value = '';
- showToast(`Loaded: ${result.name} (${result.track_count} tracks)`, 'success');
- console.log(`🎵 Loaded Spotify playlist: ${result.name}`);
-
- } catch (error) {
- console.error('❌ Error parsing Spotify URL:', error);
- showToast(`Error parsing Spotify URL: ${error.message}`, 'error');
- } finally {
- if (parseBtn) {
- parseBtn.disabled = false;
- parseBtn.textContent = 'Load';
- }
- }
-}
-
-function renderSpotifyPublicPlaylists() {
- const container = document.getElementById('spotify-public-playlist-container');
- if (spotifyPublicPlaylists.length === 0) {
- container.innerHTML = `Error Loading Charts
-Unable to load chart collections for ${genreName}.
Please try again later.
Paste a Spotify playlist or album URL above to load tracks without needing Spotify API credentials.
`;
- return;
- }
-
- container.innerHTML = spotifyPublicPlaylists.map(p => {
- if (!spotifyPublicPlaylistStates[p.url_hash]) {
- spotifyPublicPlaylistStates[p.url_hash] = {
- phase: 'fresh',
- playlist: p
- };
- }
- return createSpotifyPublicCard(p);
- }).join('');
-
- // Add click handlers to cards
- spotifyPublicPlaylists.forEach(p => {
- const card = document.getElementById(`spotify-public-card-${p.url_hash}`);
- if (card) {
- card.addEventListener('click', () => handleSpotifyPublicCardClick(p.url_hash));
- }
- });
-}
-
-function createSpotifyPublicCard(playlist) {
- const state = spotifyPublicPlaylistStates[playlist.url_hash];
- const phase = state ? state.phase : 'fresh';
- const isAlbum = playlist.type === 'album';
-
- let buttonText = getActionButtonText(phase);
- let phaseText = getPhaseText(phase);
- let phaseColor = getPhaseColor(phase);
-
- return `
-
-
-
- `;
-}
-
-async function handleSpotifyPublicCardClick(urlHash) {
- const state = spotifyPublicPlaylistStates[urlHash];
- if (!state) {
- console.error(`No state found for Spotify public playlist: ${urlHash}`);
- showToast('Playlist state not found - try refreshing the page', 'error');
- return;
- }
-
- if (!state.playlist) {
- console.error(`No playlist data found for Spotify public playlist: ${urlHash}`);
- showToast('Playlist data missing - try refreshing the page', 'error');
- return;
- }
-
- if (!state.phase) {
- state.phase = 'fresh';
- }
-
- console.log(`🎵 [Card Click] Spotify public card clicked: ${urlHash}, Phase: ${state.phase}`);
-
- if (state.phase === 'fresh') {
- console.log(`🎵 Using pre-loaded Spotify public playlist data for: ${state.playlist.name}`);
- openSpotifyPublicDiscoveryModal(urlHash, state.playlist);
-
- } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
- console.log(`🎵 [Card Click] Opening Spotify public discovery modal for ${state.phase} phase`);
-
- if (state.phase === 'discovered' && (!state.discovery_results || state.discovery_results.length === 0)) {
- try {
- const stateResponse = await fetch(`/api/spotify-public/state/${urlHash}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- if (fullState.discovery_results) {
- state.discovery_results = fullState.discovery_results;
- state.spotify_matches = fullState.spotify_matches || state.spotify_matches;
- state.discovery_progress = fullState.discovery_progress || state.discovery_progress;
- spotifyPublicPlaylistStates[urlHash] = { ...spotifyPublicPlaylistStates[urlHash], ...state };
- console.log(`Restored ${fullState.discovery_results.length} discovery results from backend`);
- }
- }
- } catch (error) {
- console.error(`Failed to fetch discovery results from backend: ${error}`);
- }
- }
-
- openSpotifyPublicDiscoveryModal(urlHash, state.playlist);
- } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
- if (state.convertedSpotifyPlaylistId) {
- if (activeDownloadProcesses[state.convertedSpotifyPlaylistId]) {
- const process = activeDownloadProcesses[state.convertedSpotifyPlaylistId];
- if (process.modalElement) {
- process.modalElement.style.display = 'flex';
- } else {
- await rehydrateSpotifyPublicDownloadModal(urlHash, state);
- }
- } else {
- await rehydrateSpotifyPublicDownloadModal(urlHash, state);
- }
- } else {
- if (state.discovery_results && state.discovery_results.length > 0) {
- openSpotifyPublicDiscoveryModal(urlHash, state.playlist);
- } else {
- showToast('Unable to open download modal - missing playlist data', 'error');
- }
- }
- }
-}
-
-async function rehydrateSpotifyPublicDownloadModal(urlHash, state) {
- try {
- if (!state || !state.playlist) {
- showToast('Cannot open download modal - invalid playlist data', 'error');
- return;
- }
-
- const spotifyTracks = state.discovery_results
- ?.filter(result => result.spotify_data)
- ?.map(result => result.spotify_data) || [];
-
- if (spotifyTracks.length > 0) {
- const virtualPlaylistId = state.convertedSpotifyPlaylistId || `spotify_public_${urlHash}`;
- await openDownloadMissingModalForTidal(virtualPlaylistId, state.playlist.name, spotifyTracks);
-
- if (state.download_process_id) {
- const process = activeDownloadProcesses[virtualPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = state.download_process_id;
- const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
- startModalDownloadPolling(virtualPlaylistId);
- }
- }
- } else {
- showToast('No Spotify tracks found for download', 'error');
- }
- } catch (error) {
- console.error(`Error rehydrating Spotify public download modal: ${error}`);
- }
-}
-
-async function openSpotifyPublicDiscoveryModal(urlHash, playlistData) {
- console.log(`🎵 Opening Spotify public discovery modal (reusing YouTube modal): ${playlistData.name}`);
-
- const fakeUrlHash = `spotifypublic_${urlHash}`;
-
- const cardState = spotifyPublicPlaylistStates[urlHash];
- const isAlreadyDiscovered = cardState && (cardState.phase === 'discovered' || cardState.phase === 'syncing' || cardState.phase === 'sync_complete');
- const isCurrentlyDiscovering = cardState && cardState.phase === 'discovering';
-
- let transformedResults = [];
- let actualMatches = 0;
- if (isAlreadyDiscovered && cardState.discovery_results) {
- transformedResults = cardState.discovery_results.map((result, index) => {
- const isFound = result.status === 'found' ||
- result.status === '✅ Found' ||
- result.status_class === 'found' ||
- result.spotify_data ||
- result.spotify_track;
- if (isFound) actualMatches++;
-
- return {
- index: index,
- yt_track: result.spotify_public_track ? result.spotify_public_track.name : 'Unknown',
- yt_artist: result.spotify_public_track ? (result.spotify_public_track.artists ? result.spotify_public_track.artists.join(', ') : 'Unknown') : 'Unknown',
- status: isFound ? '✅ Found' : '❌ Not Found',
- status_class: isFound ? 'found' : 'not-found',
- spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
- spotify_artist: result.spotify_data && result.spotify_data.artists ?
- (Array.isArray(result.spotify_data.artists)
- ? result.spotify_data.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-'
- : result.spotify_data.artists)
- : (result.spotify_artist || '-'),
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
- spotify_data: result.spotify_data,
- spotify_id: result.spotify_id,
- manual_match: result.manual_match
- };
- });
- console.log(`🎵 Spotify public modal: Calculated ${actualMatches} matches from ${transformedResults.length} results`);
- }
-
- // Normalize artist objects to strings for the discovery modal table
- const normalizedTracks = playlistData.tracks.map(t => ({
- ...t,
- artists: Array.isArray(t.artists)
- ? t.artists.map(a => typeof a === 'object' ? a.name : a)
- : t.artists
- }));
-
- const modalPhase = cardState ? cardState.phase : 'fresh';
- youtubePlaylistStates[fakeUrlHash] = {
- phase: modalPhase,
- playlist: {
- name: playlistData.name,
- tracks: normalizedTracks
- },
- is_spotify_public_playlist: true,
- spotify_public_playlist_id: urlHash,
- discovery_progress: isAlreadyDiscovered ? 100 : 0,
- spotify_matches: isAlreadyDiscovered ? actualMatches : 0,
- spotifyMatches: isAlreadyDiscovered ? actualMatches : 0,
- spotify_total: playlistData.tracks.length,
- discovery_results: transformedResults,
- discoveryResults: transformedResults,
- discoveryProgress: isAlreadyDiscovered ? 100 : 0
- };
-
- if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
- try {
- console.log(`🔍 Starting Spotify public discovery for: ${playlistData.name}`);
-
- const response = await fetch(`/api/spotify-public/discovery/start/${urlHash}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- console.error('Error starting Spotify public discovery:', result.error);
- showToast(`Error starting discovery: ${result.error}`, 'error');
- return;
- }
-
- console.log('Spotify public discovery started, beginning polling...');
-
- spotifyPublicPlaylistStates[urlHash].phase = 'discovering';
- updateSpotifyPublicCardPhase(urlHash, 'discovering');
- youtubePlaylistStates[fakeUrlHash].phase = 'discovering';
-
- startSpotifyPublicDiscoveryPolling(fakeUrlHash, urlHash);
-
- } catch (error) {
- console.error('Error starting Spotify public discovery:', error);
- showToast(`Error starting discovery: ${error.message}`, 'error');
- }
- } else if (isCurrentlyDiscovering) {
- console.log(`🔄 Resuming Spotify public discovery polling for: ${playlistData.name}`);
- startSpotifyPublicDiscoveryPolling(fakeUrlHash, urlHash);
- } else if (cardState && cardState.phase === 'syncing') {
- console.log(`🔄 Resuming Spotify public sync polling for: ${playlistData.name}`);
- startSpotifyPublicSyncPolling(fakeUrlHash);
- } else {
- console.log('Using existing results - no need to re-discover');
- }
-
- openYouTubeDiscoveryModal(fakeUrlHash);
-}
-
-function startSpotifyPublicDiscoveryPolling(fakeUrlHash, urlHash) {
- console.log(`🔄 Starting Spotify public discovery polling for: ${urlHash}`);
-
- if (activeYouTubePollers[fakeUrlHash]) {
- clearInterval(activeYouTubePollers[fakeUrlHash]);
- }
-
- // WebSocket subscription
- if (socketConnected) {
- socket.emit('discovery:subscribe', { ids: [urlHash] });
- _discoveryProgressCallbacks[urlHash] = (data) => {
- if (data.error) {
- if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
- return;
- }
- const transformed = {
- progress: data.progress, spotify_matches: data.spotify_matches, spotify_total: data.spotify_total,
- complete: data.complete,
- results: (data.results || []).map((r, i) => {
- const isWingIt = r.wing_it_fallback || r.status_class === 'wing-it';
- const isFound = !isWingIt && (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found' || r.spotify_data || r.spotify_track);
- return {
- index: i, yt_track: r.spotify_public_track ? r.spotify_public_track.name : 'Unknown',
- yt_artist: r.spotify_public_track ? (r.spotify_public_track.artists ? r.spotify_public_track.artists.join(', ') : 'Unknown') : 'Unknown',
- status: isWingIt ? '🎯 Wing It' : (isFound ? '✅ Found' : '❌ Not Found'),
- status_class: isWingIt ? 'wing-it' : (isFound ? 'found' : 'not-found'),
- spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
- spotify_artist: r.spotify_data && r.spotify_data.artists
- ? (Array.isArray(r.spotify_data.artists)
- ? (r.spotify_data.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-')
- : r.spotify_data.artists)
- : (r.spotify_artist || '-'),
- spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
- spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match,
- wing_it_fallback: isWingIt
- };
- })
- };
- const st = youtubePlaylistStates[fakeUrlHash];
- if (st) {
- st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
- st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
- st.discovery_results = data.results; st.discoveryResults = transformed.results;
- st.phase = data.phase;
- updateYouTubeDiscoveryModal(fakeUrlHash, transformed);
- }
- if (spotifyPublicPlaylistStates[urlHash]) {
- spotifyPublicPlaylistStates[urlHash].phase = data.phase;
- spotifyPublicPlaylistStates[urlHash].discovery_results = data.results;
- spotifyPublicPlaylistStates[urlHash].spotify_matches = data.spotify_matches;
- spotifyPublicPlaylistStates[urlHash].discovery_progress = data.progress;
- updateSpotifyPublicCardPhase(urlHash, data.phase);
- }
- updateSpotifyPublicCardProgress(urlHash, data);
- if (data.complete) {
- if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
- }
- };
- }
-
- const pollInterval = setInterval(async () => {
- if (socketConnected) return;
- try {
- const response = await fetch(`/api/spotify-public/discovery/status/${urlHash}`);
- const status = await response.json();
-
- if (status.error) {
- console.error('Error polling Spotify public discovery status:', status.error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[fakeUrlHash];
- return;
- }
-
- const transformedStatus = {
- progress: status.progress,
- spotify_matches: status.spotify_matches,
- spotify_total: status.spotify_total,
- complete: status.complete,
- results: status.results.map((result, index) => {
- const isFound = result.status === 'found' ||
- result.status === '✅ Found' ||
- result.status_class === 'found' ||
- result.spotify_data ||
- result.spotify_track;
-
- return {
- index: index,
- yt_track: result.spotify_public_track ? result.spotify_public_track.name : 'Unknown',
- yt_artist: result.spotify_public_track ? (result.spotify_public_track.artists ? result.spotify_public_track.artists.join(', ') : 'Unknown') : 'Unknown',
- status: isFound ? '✅ Found' : '❌ Not Found',
- status_class: isFound ? 'found' : 'not-found',
- spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
- spotify_artist: result.spotify_data && result.spotify_data.artists
- ? (Array.isArray(result.spotify_data.artists)
- ? (result.spotify_data.artists
- .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
- .filter(Boolean)
- .join(', ') || '-')
- : result.spotify_data.artists)
- : (result.spotify_artist || '-'),
- spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
- spotify_data: result.spotify_data,
- spotify_id: result.spotify_id,
- manual_match: result.manual_match
- };
- })
- };
-
- const state = youtubePlaylistStates[fakeUrlHash];
- if (state) {
- state.discovery_progress = status.progress;
- state.discoveryProgress = status.progress;
- state.spotify_matches = status.spotify_matches;
- state.spotifyMatches = status.spotify_matches;
- state.discovery_results = status.results;
- state.discoveryResults = transformedStatus.results;
- state.phase = status.phase;
-
- updateYouTubeDiscoveryModal(fakeUrlHash, transformedStatus);
-
- if (spotifyPublicPlaylistStates[urlHash]) {
- spotifyPublicPlaylistStates[urlHash].phase = status.phase;
- spotifyPublicPlaylistStates[urlHash].discovery_results = status.results;
- spotifyPublicPlaylistStates[urlHash].spotify_matches = status.spotify_matches;
- spotifyPublicPlaylistStates[urlHash].discovery_progress = status.progress;
- updateSpotifyPublicCardPhase(urlHash, status.phase);
- }
-
- updateSpotifyPublicCardProgress(urlHash, status);
-
- console.log(`🔄 Spotify public discovery progress: ${status.progress}% (${status.spotify_matches}/${status.spotify_total} found)`);
- }
-
- if (status.complete) {
- console.log(`Spotify public discovery complete: ${status.spotify_matches}/${status.spotify_total} tracks found`);
- clearInterval(pollInterval);
- delete activeYouTubePollers[fakeUrlHash];
- }
-
- } catch (error) {
- console.error('Error polling Spotify public discovery:', error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[fakeUrlHash];
- }
- }, 1000);
-
- activeYouTubePollers[fakeUrlHash] = pollInterval;
-}
-
-async function loadSpotifyPublicPlaylistStatesFromBackend() {
- try {
- console.log('🎵 Loading Spotify public playlist states from backend...');
-
- const response = await fetch('/api/spotify-public/playlists/states');
- if (!response.ok) {
- const error = await response.json();
- throw new Error(error.error || 'Failed to fetch Spotify public playlist states');
- }
-
- const data = await response.json();
- const states = data.states || [];
-
- console.log(`🎵 Found ${states.length} stored Spotify public playlist states in backend`);
-
- if (states.length === 0) return;
-
- for (const stateInfo of states) {
- await applySpotifyPublicPlaylistState(stateInfo);
- }
-
- // Rehydrate download modals for playlists in downloading/download_complete phases
- for (const stateInfo of states) {
- if ((stateInfo.phase === 'downloading' || stateInfo.phase === 'download_complete') &&
- stateInfo.converted_spotify_playlist_id && stateInfo.download_process_id) {
-
- const convertedPlaylistId = stateInfo.converted_spotify_playlist_id;
-
- if (!activeDownloadProcesses[convertedPlaylistId]) {
- console.log(`Rehydrating download modal for Spotify public playlist: ${stateInfo.playlist_id}`);
- try {
- const playlistData = spotifyPublicPlaylists.find(p => String(p.url_hash) === String(stateInfo.playlist_id));
- if (!playlistData) continue;
-
- const spotifyTracks = spotifyPublicPlaylistStates[stateInfo.playlist_id]?.discovery_results
- ?.filter(result => result.spotify_data)
- ?.map(result => result.spotify_data) || [];
-
- if (spotifyTracks.length > 0) {
- await openDownloadMissingModalForTidal(
- convertedPlaylistId,
- playlistData.name,
- spotifyTracks
- );
-
- const process = activeDownloadProcesses[convertedPlaylistId];
- if (process) {
- process.status = 'running';
- process.batchId = stateInfo.download_process_id;
- const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
- const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
- if (beginBtn) beginBtn.style.display = 'none';
- if (cancelBtn) cancelBtn.style.display = 'inline-block';
- startModalDownloadPolling(convertedPlaylistId);
- }
- }
- } catch (error) {
- console.error(`Error rehydrating Spotify public download modal for ${stateInfo.playlist_id}:`, error);
- }
- }
- }
- }
-
- console.log('Spotify public playlist states loaded and applied');
-
- } catch (error) {
- console.error('Error loading Spotify public playlist states:', error);
- }
-}
-
-async function applySpotifyPublicPlaylistState(stateInfo) {
- const { playlist_id, phase, discovery_progress, spotify_matches, discovery_results, converted_spotify_playlist_id, download_process_id } = stateInfo;
-
- try {
- console.log(`🎵 Applying saved state for Spotify public playlist: ${playlist_id}, Phase: ${phase}`);
-
- const playlistData = spotifyPublicPlaylists.find(p => String(p.url_hash) === String(playlist_id));
- if (!playlistData) {
- console.warn(`Playlist data not found for state ${playlist_id} - skipping`);
- return;
- }
-
- if (!spotifyPublicPlaylistStates[playlist_id]) {
- spotifyPublicPlaylistStates[playlist_id] = {
- playlist: playlistData,
- phase: 'fresh'
- };
- }
-
- spotifyPublicPlaylistStates[playlist_id].phase = phase;
- spotifyPublicPlaylistStates[playlist_id].discovery_progress = discovery_progress;
- spotifyPublicPlaylistStates[playlist_id].spotify_matches = spotify_matches;
- spotifyPublicPlaylistStates[playlist_id].discovery_results = discovery_results;
- spotifyPublicPlaylistStates[playlist_id].convertedSpotifyPlaylistId = converted_spotify_playlist_id;
- spotifyPublicPlaylistStates[playlist_id].download_process_id = download_process_id;
- spotifyPublicPlaylistStates[playlist_id].playlist = playlistData;
-
- if (phase !== 'fresh' && phase !== 'discovering') {
- try {
- const stateResponse = await fetch(`/api/spotify-public/state/${playlist_id}`);
- if (stateResponse.ok) {
- const fullState = await stateResponse.json();
- if (fullState.discovery_results && spotifyPublicPlaylistStates[playlist_id]) {
- spotifyPublicPlaylistStates[playlist_id].discovery_results = fullState.discovery_results;
- spotifyPublicPlaylistStates[playlist_id].discovery_progress = fullState.discovery_progress;
- spotifyPublicPlaylistStates[playlist_id].spotify_matches = fullState.spotify_matches;
- spotifyPublicPlaylistStates[playlist_id].convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
- spotifyPublicPlaylistStates[playlist_id].download_process_id = fullState.download_process_id;
- }
- }
- } catch (error) {
- console.warn(`Error fetching full discovery results for Spotify public playlist ${playlistData.name}:`, error.message);
- }
- }
-
- updateSpotifyPublicCardPhase(playlist_id, phase);
-
- if (phase === 'discovered' && spotifyPublicPlaylistStates[playlist_id]) {
- const progressInfo = {
- spotify_total: playlistData.track_count || playlistData.tracks?.length || 0,
- spotify_matches: spotifyPublicPlaylistStates[playlist_id].spotify_matches || 0
- };
- updateSpotifyPublicCardProgress(playlist_id, progressInfo);
- }
-
- if (phase === 'discovering') {
- const fakeUrlHash = `spotifypublic_${playlist_id}`;
- startSpotifyPublicDiscoveryPolling(fakeUrlHash, playlist_id);
- } else if (phase === 'syncing') {
- const fakeUrlHash = `spotifypublic_${playlist_id}`;
- startSpotifyPublicSyncPolling(fakeUrlHash);
- }
-
- } catch (error) {
- console.error(`Error applying Spotify public playlist state for ${playlist_id}:`, error);
- }
-}
-
-function updateSpotifyPublicCardPhase(urlHash, phase) {
- const state = spotifyPublicPlaylistStates[urlHash];
- if (!state) return;
-
- state.phase = phase;
-
- const card = document.getElementById(`spotify-public-card-${urlHash}`);
- if (card) {
- const newCardHtml = createSpotifyPublicCard(state.playlist);
- card.outerHTML = newCardHtml;
-
- const newCard = document.getElementById(`spotify-public-card-${urlHash}`);
- if (newCard) {
- newCard.addEventListener('click', () => handleSpotifyPublicCardClick(urlHash));
- }
-
- if ((phase === 'syncing' || phase === 'sync_complete') && state.lastSyncProgress) {
- setTimeout(() => {
- updateSpotifyPublicCardSyncProgress(urlHash, state.lastSyncProgress);
- }, 0);
- }
- }
-}
-
-function updateSpotifyPublicCardProgress(urlHash, progress) {
- const state = spotifyPublicPlaylistStates[urlHash];
- if (!state) return;
-
- const card = document.getElementById(`spotify-public-card-${urlHash}`);
- if (!card) return;
-
- const progressElement = card.querySelector('.playlist-card-progress');
- if (!progressElement) return;
-
- progressElement.classList.remove('hidden');
-
- const total = progress.spotify_total || 0;
- const matches = progress.spotify_matches || 0;
-
- if (total > 0) {
- progressElement.innerHTML = `
-
-
- ${escapeHtml(playlist.name)}
-
- ${isAlbum ? 'Album' : 'Playlist'}
- ${playlist.track_count || playlist.tracks.length} tracks
- ${phaseText}
-
-
-
-
-
-
- ✓ ${matches}
- /
- ♪ ${total}
-
- `;
- }
-}
-
-// ===============================
-// SPOTIFY PUBLIC SYNC FUNCTIONALITY
-// ===============================
-
-async function startSpotifyPublicPlaylistSync(urlHash) {
- try {
- console.log('🎵 Starting Spotify public playlist sync:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_spotify_public_playlist) {
- console.error('Invalid Spotify public playlist state for sync');
- return;
- }
-
- const playlistId = state.spotify_public_playlist_id;
- const response = await fetch(`/api/spotify-public/sync/start/${playlistId}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error starting sync: ${result.error}`, 'error');
- return;
- }
-
- const syncPlaylistId = result.sync_playlist_id;
- if (state) state.syncPlaylistId = syncPlaylistId;
-
- updateSpotifyPublicCardPhase(playlistId, 'syncing');
- updateSpotifyPublicModalButtons(urlHash, 'syncing');
-
- startSpotifyPublicSyncPolling(urlHash, syncPlaylistId);
-
- showToast('Spotify public playlist sync started!', 'success');
-
- } catch (error) {
- console.error('Error starting Spotify public sync:', error);
- showToast(`Error starting sync: ${error.message}`, 'error');
- }
-}
-
-function startSpotifyPublicSyncPolling(urlHash, syncPlaylistId) {
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- }
-
- const state = youtubePlaylistStates[urlHash];
- const playlistId = state.spotify_public_playlist_id;
-
- syncPlaylistId = syncPlaylistId || (state && state.syncPlaylistId);
-
- // WebSocket subscription
- if (socketConnected && syncPlaylistId) {
- socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
- _syncProgressCallbacks[syncPlaylistId] = (data) => {
- const progress = data.progress || {};
- updateSpotifyPublicCardSyncProgress(playlistId, progress);
- updateSpotifyPublicModalSyncProgress(urlHash, progress);
-
- if (data.status === 'finished') {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
- delete _syncProgressCallbacks[syncPlaylistId];
- if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'sync_complete';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
- updateSpotifyPublicCardPhase(playlistId, 'sync_complete');
- updateSpotifyPublicModalButtons(urlHash, 'sync_complete');
- showToast('Spotify public playlist sync complete!', 'success');
- } else if (data.status === 'error' || data.status === 'cancelled') {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
- delete _syncProgressCallbacks[syncPlaylistId];
- if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'discovered';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
- updateSpotifyPublicCardPhase(playlistId, 'discovered');
- updateSpotifyPublicModalButtons(urlHash, 'discovered');
- showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
- }
- };
- }
-
- const pollFunction = async () => {
- if (socketConnected) return;
- try {
- const response = await fetch(`/api/spotify-public/sync/status/${playlistId}`);
- const status = await response.json();
-
- if (status.error) {
- console.error('Error polling Spotify public sync status:', status.error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- return;
- }
-
- updateSpotifyPublicCardSyncProgress(playlistId, status.progress);
- updateSpotifyPublicModalSyncProgress(urlHash, status.progress);
-
- if (status.complete) {
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'sync_complete';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
- updateSpotifyPublicCardPhase(playlistId, 'sync_complete');
- updateSpotifyPublicModalButtons(urlHash, 'sync_complete');
- showToast('Spotify public playlist sync complete!', 'success');
- } else if (status.sync_status === 'error') {
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'discovered';
- if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
- updateSpotifyPublicCardPhase(playlistId, 'discovered');
- updateSpotifyPublicModalButtons(urlHash, 'discovered');
- showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
- }
- } catch (error) {
- console.error('Error polling Spotify public sync:', error);
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- }
- }
- };
-
- if (!socketConnected) pollFunction();
-
- const pollInterval = setInterval(pollFunction, 1000);
- activeYouTubePollers[urlHash] = pollInterval;
-}
-
-async function cancelSpotifyPublicSync(urlHash) {
- try {
- console.log('Cancelling Spotify public sync:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_spotify_public_playlist) {
- console.error('Invalid Spotify public playlist state');
- return;
- }
-
- const playlistId = state.spotify_public_playlist_id;
- const response = await fetch(`/api/spotify-public/sync/cancel/${playlistId}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error cancelling sync: ${result.error}`, 'error');
- return;
- }
-
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- }
-
- const syncId = state && state.syncPlaylistId;
- if (syncId && _syncProgressCallbacks[syncId]) {
- if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncId] });
- delete _syncProgressCallbacks[syncId];
- }
-
- updateSpotifyPublicCardPhase(playlistId, 'discovered');
- updateSpotifyPublicModalButtons(urlHash, 'discovered');
-
- showToast('Spotify public sync cancelled', 'info');
-
- } catch (error) {
- console.error('Error cancelling Spotify public sync:', error);
- showToast(`Error cancelling sync: ${error.message}`, 'error');
- }
-}
-
-function updateSpotifyPublicCardSyncProgress(urlHash, progress) {
- const state = spotifyPublicPlaylistStates[urlHash];
- if (!state || !state.playlist || !progress) return;
-
- state.lastSyncProgress = progress;
-
- const card = document.getElementById(`spotify-public-card-${urlHash}`);
- if (!card) return;
-
- const progressElement = card.querySelector('.playlist-card-progress');
-
- let statusCounterHTML = '';
- if (progress && progress.total_tracks > 0) {
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
- const total = progress.total_tracks || 0;
- const processed = matched + failed;
- const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
- statusCounterHTML = `
-
- ♪ ${total}
- /
- ✓ ${matched}
- /
- ✗ ${failed}
- (${percentage}%)
-
- `;
- }
-
- if (statusCounterHTML) {
- progressElement.innerHTML = statusCounterHTML;
- }
-}
-
-function updateSpotifyPublicModalSyncProgress(urlHash, progress) {
- const statusDisplay = document.getElementById(`spotify-public-sync-status-${urlHash}`);
- if (!statusDisplay || !progress) return;
-
- const totalEl = document.getElementById(`spotify-public-total-${urlHash}`);
- const matchedEl = document.getElementById(`spotify-public-matched-${urlHash}`);
- const failedEl = document.getElementById(`spotify-public-failed-${urlHash}`);
- const percentageEl = document.getElementById(`spotify-public-percentage-${urlHash}`);
-
- const total = progress.total_tracks || 0;
- const matched = progress.matched_tracks || 0;
- const failed = progress.failed_tracks || 0;
-
- if (totalEl) totalEl.textContent = total;
- if (matchedEl) matchedEl.textContent = matched;
- if (failedEl) failedEl.textContent = failed;
-
- if (total > 0) {
- const processed = matched + failed;
- const percentage = Math.round((processed / total) * 100);
- if (percentageEl) percentageEl.textContent = percentage;
- }
-}
-
-function updateSpotifyPublicModalButtons(urlHash, phase) {
- const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (!modal) return;
-
- const footerLeft = modal.querySelector('.modal-footer-left');
- if (footerLeft) {
- footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
- }
-}
-
-async function startSpotifyPublicDownloadMissing(urlHash) {
- try {
- console.log('🔍 Starting download missing tracks for Spotify public playlist:', urlHash);
-
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.is_spotify_public_playlist) {
- console.error('Invalid Spotify public playlist state for download');
- return;
- }
-
- const discoveryResults = state.discoveryResults || state.discovery_results;
-
- if (!discoveryResults) {
- showToast('No discovery results available for download', 'error');
- return;
- }
-
- const spotifyTracks = [];
- for (const result of discoveryResults) {
- if (result.spotify_data) {
- spotifyTracks.push(result.spotify_data);
- } else if (result.spotify_track && result.status_class === 'found') {
- const albumData = result.spotify_album || 'Unknown Album';
- const albumObject = typeof albumData === 'object' && albumData !== null
- ? albumData
- : {
- name: typeof albumData === 'string' ? albumData : 'Unknown Album',
- album_type: 'album',
- images: []
- };
-
- spotifyTracks.push({
- id: result.spotify_id || 'unknown',
- name: result.spotify_track || 'Unknown Track',
- artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
- album: albumObject,
- duration_ms: 0
- });
- }
- }
-
- if (spotifyTracks.length === 0) {
- showToast('No Spotify matches found for download', 'error');
- return;
- }
-
- const realUrlHash = state.spotify_public_playlist_id;
- const virtualPlaylistId = `spotify_public_${realUrlHash}`;
- const playlistName = state.playlist.name;
-
- state.convertedSpotifyPlaylistId = virtualPlaylistId;
-
- // Sync convertedSpotifyPlaylistId to spotifyPublicPlaylistStates for card click routing
- if (realUrlHash && spotifyPublicPlaylistStates[realUrlHash]) {
- spotifyPublicPlaylistStates[realUrlHash].convertedSpotifyPlaylistId = virtualPlaylistId;
- }
-
- const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
- if (discoveryModal) {
- discoveryModal.classList.add('hidden');
- }
-
- await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
-
- } catch (error) {
- console.error('Error starting Spotify public download missing:', error);
- showToast(`Error: ${error.message}`, 'error');
- }
-}
-
-// ===============================
-// URL HISTORY (Saved playlist URLs)
-// ===============================
-
-const URL_HISTORY_MAX = 10;
-const URL_HISTORY_SOURCES = {
- youtube: { key: 'soulsync-url-history-youtube', icon: '▶', inputId: 'youtube-url-input', containerId: 'youtube-url-history', loadFn: () => parseYouTubePlaylist() },
- deezer: { key: 'soulsync-url-history-deezer', icon: '🎵', inputId: 'deezer-url-input', containerId: 'deezer-url-history', loadFn: () => loadDeezerPlaylist() },
- 'spotify-public': { key: 'soulsync-url-history-spotify-public', icon: '🎧', inputId: 'spotify-public-url-input', containerId: 'spotify-public-url-history', loadFn: () => parseSpotifyPublicUrl() }
-};
-
-function getUrlHistory(source) {
- try {
- const cfg = URL_HISTORY_SOURCES[source];
- if (!cfg) return [];
- const raw = localStorage.getItem(cfg.key);
- return raw ? JSON.parse(raw) : [];
- } catch { return []; }
-}
-
-function saveUrlHistory(source, url, name) {
- const cfg = URL_HISTORY_SOURCES[source];
- if (!cfg || !url) return;
- let history = getUrlHistory(source);
- // Remove duplicate (same URL)
- history = history.filter(h => h.url !== url);
- // Add to front
- history.unshift({ url, name: name || url, ts: Date.now() });
- // Cap
- if (history.length > URL_HISTORY_MAX) history = history.slice(0, URL_HISTORY_MAX);
- localStorage.setItem(cfg.key, JSON.stringify(history));
- renderUrlHistory(source);
-}
-
-function removeUrlHistoryEntry(source, url) {
- const cfg = URL_HISTORY_SOURCES[source];
- if (!cfg) return;
- let history = getUrlHistory(source);
- history = history.filter(h => h.url !== url);
- localStorage.setItem(cfg.key, JSON.stringify(history));
- renderUrlHistory(source);
-}
-
-function renderUrlHistory(source) {
- const cfg = URL_HISTORY_SOURCES[source];
- if (!cfg) return;
- const container = document.getElementById(cfg.containerId);
- if (!container) return;
- const history = getUrlHistory(source);
- if (history.length === 0) {
- container.style.display = 'none';
- container.innerHTML = '';
- return;
- }
- container.style.display = 'flex';
- container.innerHTML = `` +
- history.map(h => {
- const rawName = h.name.length > 30 ? h.name.substring(0, 28) + '...' : h.name;
- const safeName = escapeHtml(rawName);
- const safeTitle = escapeHtml(h.name);
- const safeUrl = h.url.replace(/"/g, '"');
- return `
-
- ${safeName}
-
-
`;
- }).join('');
-
- // Pill click → fill input and load (skip if already loaded)
- container.querySelectorAll('.url-history-pill').forEach(pill => {
- pill.addEventListener('click', (e) => {
- // Don't trigger if clicking the X button
- if (e.target.classList.contains('url-history-pill-remove')) return;
- const pillUrl = pill.dataset.url;
- if (_isUrlAlreadyLoaded(source, pillUrl)) {
- showToast('This playlist is already loaded', 'info');
- return;
- }
- const input = document.getElementById(cfg.inputId);
- if (input) input.value = pillUrl;
- cfg.loadFn();
- });
- });
-
- // X button click → remove entry
- container.querySelectorAll('.url-history-pill-remove').forEach(btn => {
- btn.addEventListener('click', (e) => {
- e.stopPropagation();
- removeUrlHistoryEntry(btn.dataset.source, btn.dataset.url);
- });
- });
-}
-
-function _isUrlAlreadyLoaded(source, url) {
- if (source === 'youtube') {
- // Check for existing YouTube card with this URL
- const container = document.getElementById('youtube-playlist-container');
- if (container) {
- const cards = container.querySelectorAll('.youtube-playlist-card[data-url]');
- for (const card of cards) {
- if (card.dataset.url === url) return true;
- }
- }
- return false;
- } else if (source === 'deezer') {
- // Extract playlist ID from URL and check deezerPlaylists array
- const match = url.match(/deezer\.com\/(?:[a-z]{2}\/)?playlist\/(\d+)/i);
- const id = match ? match[1] : (/^\d+$/.test(url) ? url : null);
- if (id && deezerPlaylists.find(p => String(p.id) === String(id))) return true;
- return false;
- } else if (source === 'spotify-public') {
- // Extract Spotify ID from URL and compare against loaded playlists
- const spMatch = url.match(/open\.spotify\.com\/(playlist|album)\/([a-zA-Z0-9]+)/);
- const spId = spMatch ? spMatch[2] : null;
- if (spId && spotifyPublicPlaylists.some(p => p.id === spId)) return true;
- // Fallback: direct URL comparison
- return spotifyPublicPlaylists.some(p => p.url === url);
- }
- return false;
-}
-
-function initUrlHistories() {
- for (const source of Object.keys(URL_HISTORY_SOURCES)) {
- renderUrlHistory(source);
- }
-}
-
-// ===============================
-// YOUTUBE PLAYLIST FUNCTIONALITY
-// ===============================
-
-async function parseYouTubePlaylist() {
- const urlInput = document.getElementById('youtube-url-input');
- const url = urlInput.value.trim();
-
- if (!url) {
- showToast('Please enter a YouTube playlist URL', 'error');
- return;
- }
-
- // Validate URL format
- if (!url.includes('youtube.com/playlist') && !url.includes('music.youtube.com/playlist')) {
- showToast('Please enter a valid YouTube playlist URL', 'error');
- return;
- }
-
- // Check if already loaded
- if (_isUrlAlreadyLoaded('youtube', url)) {
- showToast('This playlist is already loaded', 'info');
- urlInput.value = '';
- return;
- }
-
- try {
- console.log('🎬 Parsing YouTube playlist:', url);
-
- // Create card immediately in 'fresh' phase
- createYouTubeCard(url, 'fresh');
-
- // Parse playlist via API
- const response = await fetch('/api/youtube/parse', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({ url: url })
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error parsing YouTube playlist: ${result.error}`, 'error');
- removeYouTubeCard(url);
- return;
- }
-
- console.log('✅ YouTube playlist parsed:', result.name, `(${result.tracks.length} tracks)`);
-
- // Save to URL history
- saveUrlHistory('youtube', url, result.name);
-
- // Update card with parsed data and stay in 'fresh' phase
- updateYouTubeCardData(result.url_hash, result);
- updateYouTubeCardPhase(result.url_hash, 'fresh');
-
- // Auto-mirror this YouTube playlist
- mirrorPlaylist('youtube', result.url_hash, result.name, result.tracks.map(t => ({
- track_name: t.name || t.title || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artist || ''),
- album_name: '', duration_ms: t.duration_ms || 0, source_track_id: t.id || ''
- })), { description: url });
-
- // Clear input
- urlInput.value = '';
-
- // Show success message
- showToast(`YouTube playlist parsed: ${result.name} (${result.tracks.length} tracks)`, 'success');
-
- } catch (error) {
- console.error('❌ Error parsing YouTube playlist:', error);
- showToast(`Error parsing YouTube playlist: ${error.message}`, 'error');
- removeYouTubeCard(url);
- }
-}
-
-function createYouTubeCard(url, phase = 'fresh') {
- const container = document.getElementById('youtube-playlist-container');
- const placeholder = container.querySelector('.playlist-placeholder');
-
- // Remove placeholder if it exists
- if (placeholder) {
- placeholder.style.display = 'none';
- }
-
- // Create temporary URL hash for initial card
- const tempHash = btoa(url).substring(0, 8);
-
- const cardHtml = `
-
-
-
- `;
-
- container.insertAdjacentHTML('beforeend', cardHtml);
-
- // Store temporary state
- youtubePlaylistStates[tempHash] = {
- phase: phase,
- url: url,
- cardElement: document.getElementById(`youtube-card-${tempHash}`),
- tempHash: tempHash
- };
-
- console.log('🃏 Created YouTube card for URL:', url);
-}
-
-function updateYouTubeCardData(urlHash, playlistData) {
- // Find the card by URL or temp hash
- let state = youtubePlaylistStates[urlHash];
- if (!state) {
- // Look for temporary card by URL
- const tempState = Object.values(youtubePlaylistStates).find(s => s.url === playlistData.url);
- if (tempState) {
- // Update the state with real hash
- delete youtubePlaylistStates[tempState.tempHash];
- youtubePlaylistStates[urlHash] = tempState;
- state = tempState;
-
- // Update card ID
- if (state.cardElement) {
- state.cardElement.id = `youtube-card-${urlHash}`;
- }
- }
- }
-
- if (!state || !state.cardElement) {
- console.error('❌ Could not find YouTube card for hash:', urlHash);
- return;
- }
-
- const card = state.cardElement;
-
- // Update card content
- const nameElement = card.querySelector('.playlist-card-name');
- const trackCountElement = card.querySelector('.playlist-card-track-count');
-
- nameElement.textContent = playlistData.name;
- trackCountElement.textContent = `${playlistData.tracks.length} tracks`;
-
- // Store playlist data
- state.playlist = playlistData;
- state.urlHash = urlHash;
-
- // Add click handler for card and action button
- const handleCardClick = () => handleYouTubeCardClick(urlHash);
- const actionBtn = card.querySelector('.playlist-card-action-btn');
-
- card.addEventListener('click', handleCardClick);
- actionBtn.addEventListener('click', (e) => {
- e.stopPropagation(); // Prevent card click
- handleCardClick();
- });
-
- console.log('🃏 Updated YouTube card data:', playlistData.name);
-}
-
-function updateYouTubeCardPhase(urlHash, phase) {
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.cardElement) return;
-
- const card = state.cardElement;
- const phaseTextElement = card.querySelector('.playlist-card-phase-text');
- const actionBtn = card.querySelector('.playlist-card-action-btn');
- const progressElement = card.querySelector('.playlist-card-progress');
-
- state.phase = phase;
-
- switch (phase) {
- case 'fresh':
- phaseTextElement.textContent = 'Ready to discover';
- phaseTextElement.style.color = '#999';
- actionBtn.textContent = 'Start Discovery';
- actionBtn.disabled = false;
- progressElement.classList.add('hidden');
- break;
-
- case 'discovering':
- phaseTextElement.textContent = 'Discovering...';
- phaseTextElement.style.color = '#ffa500'; // Orange
- actionBtn.textContent = 'View Progress';
- actionBtn.disabled = false;
- progressElement.classList.remove('hidden');
- break;
-
- case 'discovered':
- phaseTextElement.textContent = 'Discovery Complete';
- phaseTextElement.style.color = 'rgb(var(--accent-rgb))'; // Green
- actionBtn.textContent = 'View Details';
- actionBtn.disabled = false;
- progressElement.classList.add('hidden');
- break;
-
- case 'syncing':
- phaseTextElement.textContent = 'Syncing...';
- phaseTextElement.style.color = '#ffa500'; // Orange
- actionBtn.textContent = 'View Progress';
- actionBtn.disabled = false;
- progressElement.classList.remove('hidden');
- break;
-
- case 'sync_complete':
- phaseTextElement.textContent = 'Sync Complete';
- phaseTextElement.style.color = 'rgb(var(--accent-rgb))'; // Green
- actionBtn.textContent = 'View Details';
- actionBtn.disabled = false;
- progressElement.classList.add('hidden');
- break;
-
- case 'downloading':
- phaseTextElement.textContent = 'Downloading...';
- phaseTextElement.style.color = '#ffa500'; // Orange
- actionBtn.textContent = 'View Downloads';
- actionBtn.disabled = false;
- progressElement.classList.remove('hidden');
- break;
-
- case 'download_complete':
- phaseTextElement.textContent = 'Download Complete';
- phaseTextElement.style.color = 'rgb(var(--accent-rgb))'; // Green
- actionBtn.textContent = 'View Results';
- actionBtn.disabled = false;
- progressElement.classList.add('hidden');
- break;
- }
-
- console.log('🃏 Updated YouTube card phase:', urlHash, phase);
-}
-
-function handleYouTubeCardClick(urlHash) {
- const state = youtubePlaylistStates[urlHash];
- if (!state) return;
-
- switch (state.phase) {
- case 'fresh':
- // First click: Start discovery and open modal
- console.log('🎬 Starting YouTube discovery for first time:', urlHash);
- updateYouTubeCardPhase(urlHash, 'discovering');
- startYouTubeDiscovery(urlHash);
- openYouTubeDiscoveryModal(urlHash);
- break;
-
- case 'discovering':
- case 'discovered':
- case 'syncing':
- case 'sync_complete':
- // Open discovery modal with current state
- console.log('🎬 Opening YouTube discovery modal:', urlHash);
- openYouTubeDiscoveryModal(urlHash);
- break;
-
- case 'downloading':
- case 'download_complete':
- // Open download missing tracks modal
- console.log('🎬 Opening download modal for YouTube playlist:', urlHash);
- // Need to get playlist ID from converted Spotify data
- const spotifyPlaylistId = state.convertedSpotifyPlaylistId;
- if (spotifyPlaylistId) {
- // Check if we have discovery results, if not load them first
- if (!state.discoveryResults || state.discoveryResults.length === 0) {
- console.log('🔍 Loading discovery results for download modal...');
- fetch(`/api/youtube/state/${urlHash}`)
- .then(response => response.json())
- .then(fullState => {
- if (fullState.discovery_results) {
- state.discoveryResults = fullState.discovery_results;
- console.log(`✅ Loaded ${state.discoveryResults.length} discovery results`);
-
- // Now open the modal with the loaded data
- const playlistName = state.playlist.name;
- const spotifyTracks = state.discoveryResults
- .filter(result => result.spotify_data)
- .map(result => result.spotify_data);
- openDownloadMissingModalForYouTube(spotifyPlaylistId, playlistName, spotifyTracks);
- } else {
- console.error('❌ No discovery results found for downloads');
- showToast('Unable to open download modal - no discovery data', 'error');
- }
- })
- .catch(error => {
- console.error('❌ Error loading discovery results:', error);
- showToast('Error loading playlist data', 'error');
- });
- } else {
- // Use the YouTube-specific function to maintain proper state linking
- const playlistName = state.playlist.name;
- const spotifyTracks = state.discoveryResults
- .filter(result => result.spotify_data)
- .map(result => result.spotify_data);
- openDownloadMissingModalForYouTube(spotifyPlaylistId, playlistName, spotifyTracks);
- }
- } else {
- console.error('❌ No converted Spotify playlist ID found for downloads');
- showToast('Unable to open download modal - missing playlist data', 'error');
- }
- break;
- }
-}
-
-function updateYouTubeCardProgress(urlHash, progress) {
- const state = youtubePlaylistStates[urlHash];
- if (!state || !state.cardElement) return;
-
- const card = state.cardElement;
- const progressElement = card.querySelector('.playlist-card-progress');
-
- const total = progress.spotify_total || 0;
- const matches = progress.spotify_matches || 0;
- const failed = total - matches;
- const percentage = total > 0 ? Math.round((matches / total) * 100) : 0;
-
- progressElement.textContent = `♪ ${total} / ✓ ${matches} / ✗ ${failed} / ${percentage}%`;
-
- console.log('🃏 Updated YouTube card progress:', urlHash, `${matches}/${total} (${percentage}%)`);
-}
-
-function removeYouTubeCard(url) {
- const state = Object.values(youtubePlaylistStates).find(s => s.url === url);
- if (state && state.cardElement) {
- state.cardElement.remove();
-
- // Remove from state
- if (state.urlHash) {
- delete youtubePlaylistStates[state.urlHash];
- } else if (state.tempHash) {
- delete youtubePlaylistStates[state.tempHash];
- }
- }
-
- // Show placeholder if no cards left
- const container = document.getElementById('youtube-playlist-container');
- const cards = container.querySelectorAll('.youtube-playlist-card');
- const placeholder = container.querySelector('.playlist-placeholder');
-
- if (cards.length === 0 && placeholder) {
- placeholder.style.display = 'block';
- }
-}
-
-async function startYouTubeDiscovery(urlHash) {
- try {
- console.log('🔍 Starting YouTube Spotify discovery for:', urlHash);
-
- const response = await fetch(`/api/youtube/discovery/start/${urlHash}`, {
- method: 'POST'
- });
-
- const result = await response.json();
-
- if (result.error) {
- showToast(`Error starting discovery: ${result.error}`, 'error');
- return;
- }
-
- // Update frontend phase to match backend
- const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
- if (state) {
- state.phase = 'discovering';
- }
-
- // Update modal buttons to show "Discovering..." instead of "Start Discovery"
- updateYouTubeModalButtons(urlHash, 'discovering');
-
- // Start polling for progress
- startYouTubeDiscoveryPolling(urlHash);
-
- // Open discovery modal
- openYouTubeDiscoveryModal(urlHash);
-
- } catch (error) {
- console.error('❌ Error starting YouTube discovery:', error);
- showToast(`Error starting discovery: ${error.message}`, 'error');
- }
-}
-
-function startYouTubeDiscoveryPolling(urlHash) {
- // Stop any existing polling
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- }
-
- // Phase 5: Subscribe via WebSocket
- if (socketConnected) {
- socket.emit('discovery:subscribe', { ids: [urlHash] });
- _discoveryProgressCallbacks[urlHash] = (data) => {
- if (data.error) {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
- return;
- }
- updateYouTubeCardProgress(urlHash, data);
- const st = youtubePlaylistStates[urlHash];
- if (st) { st.discoveryResults = data.results || []; st.discovery_results = data.results || []; st.discoveryProgress = data.progress || 0; st.spotifyMatches = data.spotify_matches || 0; st.spotify_matches = data.spotify_matches || 0; }
- updateYouTubeDiscoveryModal(urlHash, data);
- if (data.complete) {
- if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
- socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
- // Update phase in state directly (updateYouTubeCardPhase may skip if no cardElement)
- if (st) st.phase = 'discovered';
- updateYouTubeCardPhase(urlHash, 'discovered');
- updateYouTubeModalButtons(urlHash, 'discovered');
- showToast('Discovery complete!', 'success');
- }
- };
- }
-
- const pollInterval = setInterval(async () => {
- // Always poll — no dedicated WebSocket events for discovery progress
- try {
- const response = await fetch(`/api/youtube/discovery/status/${urlHash}`);
- const status = await response.json();
-
- if (status.error) {
- console.error('❌ Error polling YouTube discovery status:', status.error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- return;
- }
-
- // Update card progress
- updateYouTubeCardProgress(urlHash, status);
-
- // Store discovery results and progress in state
- const state = youtubePlaylistStates[urlHash];
- if (state) {
- state.discoveryResults = status.results || [];
- state.discovery_results = status.results || [];
- state.discoveryProgress = status.progress || 0;
- state.spotifyMatches = status.spotify_matches || 0;
- state.spotify_matches = status.spotify_matches || 0;
- }
-
- // Update modal if open
- updateYouTubeDiscoveryModal(urlHash, status);
-
- // Check if complete
- if (status.complete) {
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
-
- // Update phase in state directly (updateYouTubeCardPhase may skip if no cardElement)
- if (state) state.phase = 'discovered';
- // Update card phase to discovered
- updateYouTubeCardPhase(urlHash, 'discovered');
-
- // Update modal buttons to show sync and download buttons
- updateYouTubeModalButtons(urlHash, 'discovered');
-
- console.log('✅ Discovery complete:', urlHash);
- showToast('Discovery complete!', 'success');
- }
-
- } catch (error) {
- console.error('❌ Error polling YouTube discovery:', error);
- clearInterval(pollInterval);
- delete activeYouTubePollers[urlHash];
- }
- }, 1000);
-
- activeYouTubePollers[urlHash] = pollInterval;
-}
-
-function stopYouTubeDiscoveryPolling(urlHash) {
- if (activeYouTubePollers[urlHash]) {
- clearInterval(activeYouTubePollers[urlHash]);
- delete activeYouTubePollers[urlHash];
- console.log('⏹ Stopped YouTube discovery polling for:', urlHash);
- }
-}
-
-function openYouTubeDiscoveryModal(urlHash) {
- // Check ListenBrainz state first, then fallback to YouTube state
- const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
- if (!state || !state.playlist) {
- console.error('❌ No playlist data found for identifier:', urlHash);
- return;
- }
-
- console.log('🎵 Opening discovery modal for:', state.playlist.name);
-
- // Check if modal already exists
- let modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-
- if (modal) {
- // Modal exists, just show it
- modal.classList.remove('hidden');
- console.log('🔄 Showing existing modal with preserved state');
- console.log('🔄 Current discovery results count:', state.discoveryResults?.length || state.discovery_results?.length || 0);
-
- // Resume polling if discovery or sync is in progress
- if (state.phase === 'discovering' && !activeYouTubePollers[urlHash]) {
- console.log('🔄 Resuming discovery polling...');
- startYouTubeDiscoveryPolling(urlHash);
- } else if (state.phase === 'syncing' && !activeYouTubePollers[urlHash]) {
- console.log('🔄 Resuming sync polling...');
- if (state.is_tidal_playlist) {
- startTidalSyncPolling(urlHash);
- } else if (state.is_deezer_playlist) {
- startDeezerSyncPolling(urlHash);
- } else if (state.is_spotify_public_playlist) {
- startSpotifyPublicSyncPolling(urlHash);
- } else if (state.is_beatport_playlist) {
- startBeatportSyncPolling(urlHash);
- } else if (state.is_listenbrainz_playlist) {
- startListenBrainzSyncPolling(urlHash);
- } else {
- startYouTubeSyncPolling(urlHash);
- }
- }
- } else {
- // Create new modal (support YouTube, Tidal, Deezer, Beatport, ListenBrainz, Spotify Public, and Mirrored)
- const isTidal = state.is_tidal_playlist;
- const isDeezer = state.is_deezer_playlist;
- const isSpotifyPublic = state.is_spotify_public_playlist;
- const isBeatport = state.is_beatport_playlist;
- const isListenBrainz = state.is_listenbrainz_playlist;
- const isMirrored = state.is_mirrored_playlist;
- const isLastfmRadio = typeof urlHash === 'string' && urlHash.startsWith('lastfm_radio_');
- const modalTitle = isMirrored ? '🎵 Mirrored Playlist Discovery' :
- isSpotifyPublic ? '🎵 Spotify Playlist Discovery' :
- isDeezer ? '🎵 Deezer Playlist Discovery' :
- isTidal ? '🎵 Tidal Playlist Discovery' :
- isBeatport ? '🎵 Beatport Chart Discovery' :
- isLastfmRadio ? '📻 Last.fm Radio Discovery' :
- isListenBrainz ? '🎵 ListenBrainz Playlist Discovery' :
- '🎵 YouTube Playlist Discovery';
- const sourceLabel = isMirrored ? (state.mirrored_source ? state.mirrored_source.charAt(0).toUpperCase() + state.mirrored_source.slice(1) : 'Source') :
- isSpotifyPublic ? 'Spotify' :
- isDeezer ? 'Deezer' :
- isTidal ? 'Tidal' :
- isBeatport ? 'Beatport' :
- isLastfmRadio ? 'Last.fm' :
- isListenBrainz ? 'LB' :
- 'YT';
-
- const modalHtml = `
-
- `;
-
- // Add modal to DOM
- document.body.insertAdjacentHTML('beforeend', modalHtml);
- modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-
- // Store modal reference
- state.modalElement = modal;
-
- // Set initial progress if we have discovery results
- if (state.discoveryResults && state.discoveryResults.length > 0) {
- // Compute progress from results if discoveryProgress is missing/zero
- let progress = state.discoveryProgress || 0;
- const matches = state.spotifyMatches || 0;
- if (progress === 0 && state.discoveryResults.length > 0 && state.playlist.tracks.length > 0) {
- progress = Math.min(100, Math.round((state.discoveryResults.length / state.playlist.tracks.length) * 100));
- }
- const progressData = {
- progress: progress,
- spotify_matches: matches || state.discoveryResults.filter(r => r.status_class === 'found').length,
- spotify_total: state.playlist.tracks.length,
- results: state.discoveryResults
- };
- updateYouTubeDiscoveryModal(urlHash, progressData);
- }
-
- // Start polling immediately if modal is opened in syncing phase
- if (state.phase === 'syncing') {
- console.log('🔄 Modal opened in syncing phase - starting immediate polling...');
- if (state.is_tidal_playlist) {
- startTidalSyncPolling(urlHash);
- } else if (state.is_deezer_playlist) {
- startDeezerSyncPolling(urlHash);
- } else if (state.is_spotify_public_playlist) {
- startSpotifyPublicSyncPolling(urlHash);
- } else if (state.is_beatport_playlist) {
- startBeatportSyncPolling(urlHash);
- } else {
- startYouTubeSyncPolling(urlHash);
- }
- }
-
- console.log('✨ Created new modal with current state');
- }
-}
-
-function getModalActionButtons(urlHash, phase, state = null) {
- // Get state if not provided
- if (!state) {
- state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
- }
-
- const isTidal = state && state.is_tidal_playlist;
- const isDeezer = state && state.is_deezer_playlist;
- const isSpotifyPublic = state && state.is_spotify_public_playlist;
- const isBeatport = state && state.is_beatport_playlist;
- const isListenBrainz = state && state.is_listenbrainz_playlist;
-
- // Validate data availability for buttons (support both naming conventions)
- const hasDiscoveryResults = state && ((state.discoveryResults && state.discoveryResults.length > 0) || (state.discovery_results && state.discovery_results.length > 0));
- const hasSpotifyMatches = state && ((state.spotifyMatches > 0) || (state.spotify_matches > 0));
- const hasConvertedPlaylistId = state && state.convertedSpotifyPlaylistId;
-
- switch (phase) {
- case 'fresh':
- case 'discovering':
- // Show start discovery button for fresh playlists
- if (phase === 'fresh') {
- const wingItBtn = ` `;
-
- if (isListenBrainz) {
- return `${wingItBtn}`;
- } else {
- return `${wingItBtn}`;
- }
- } else {
- // Discovering phase - show progress
- return `
-
-
-
- Parsing YouTube playlist...
-
- -- tracks
- Loading...
-
- 🔍 Discovering ${currentMusicSourceName} matches...
`;
- }
-
- case 'discovered':
- case 'downloading':
- case 'download_complete':
- // Only show buttons if we actually have discovery data
- if (!hasDiscoveryResults) {
- return `⚠️ No discovery results available. Try starting discovery again.
`;
- }
-
- let buttons = '';
-
- // Only show sync button if there are Spotify matches (and not standalone mode)
- if (hasSpotifyMatches && !_isSoulsyncStandalone) {
- if (isListenBrainz) {
- buttons += ``;
- } else if (isTidal) {
- buttons += ``;
- } else if (isDeezer) {
- buttons += ``;
- } else if (isSpotifyPublic) {
- buttons += ``;
- } else if (isBeatport) {
- buttons += ``;
- } else {
- buttons += ``;
- }
- }
-
- // Only show download button if we have matches or a converted playlist ID
- if (hasSpotifyMatches || hasConvertedPlaylistId) {
- if (isListenBrainz) {
- buttons += ``;
- } else if (isTidal) {
- buttons += ``;
- } else if (isDeezer) {
- buttons += ``;
- } else if (isSpotifyPublic) {
- buttons += ``;
- } else if (isBeatport) {
- buttons += ``;
- } else {
- buttons += ``;
- }
- }
-
- // Retry Failed button for mirrored playlists
- if (state && state.is_mirrored_playlist) {
- const results = state.discovery_results || state.discoveryResults || [];
- const failedCount = results.filter(r => r.status_class !== 'found').length;
- if (failedCount > 0) {
- buttons += ``;
- }
- }
-
- // Rediscover button — reset and re-run discovery (only for sources with reset endpoints)
- if (isBeatport) {
- buttons += ``;
- } else if (!isListenBrainz && !isTidal && !isDeezer && !isSpotifyPublic) {
- buttons += ``;
- }
-
- // Wing It button — available in discovered phase
- buttons += ` `;
-
- if (!buttons || buttons.trim().startsWith('
' : ''}
- 
- })
` : ''}
-