fix sync on discovery page

This commit is contained in:
Broque Thomas 2025-11-17 19:10:15 -08:00
parent a3f98f29d3
commit c08df3041e
2 changed files with 119 additions and 17 deletions

View file

@ -1745,12 +1745,13 @@
<div class="sync-status-content"> <div class="sync-status-content">
<div class="sync-status-label"> <div class="sync-status-label">
<span class="sync-icon"></span> <span class="sync-icon"></span>
<span class="sync-text">Syncing Seasonal Mix...</span> <span>Syncing to media server...</span>
</div> </div>
<div class="sync-status-progress"> <div class="sync-status-stats">
<div class="sync-progress-text"> <span class="sync-stat"><span id="seasonal-playlist-sync-completed">0</span></span>
<span id="seasonal-playlist-sync-progress">0/0 tracks</span> <span class="sync-stat"><span id="seasonal-playlist-sync-pending">0</span></span>
</div> <span class="sync-stat"><span id="seasonal-playlist-sync-failed">0</span></span>
<span class="sync-stat">(<span id="seasonal-playlist-sync-percentage">0</span>%)</span>
</div> </div>
</div> </div>
</div> </div>
@ -1887,6 +1888,21 @@
</button> </button>
</div> </div>
</div> </div>
<!-- Sync Status Display -->
<div class="discover-sync-status" id="popular-picks-sync-status" style="display: none;">
<div class="sync-status-content">
<div class="sync-status-label">
<span class="sync-icon"></span>
<span>Syncing to media server...</span>
</div>
<div class="sync-status-stats">
<span class="sync-stat"><span id="popular-picks-sync-completed">0</span></span>
<span class="sync-stat"><span id="popular-picks-sync-pending">0</span></span>
<span class="sync-stat"><span id="popular-picks-sync-failed">0</span></span>
<span class="sync-stat">(<span id="popular-picks-sync-percentage">0</span>%)</span>
</div>
</div>
</div>
<div class="discover-playlist-container compact" id="personalized-popular-picks"> <div class="discover-playlist-container compact" id="personalized-popular-picks">
<!-- Content will be populated dynamically --> <!-- Content will be populated dynamically -->
</div> </div>
@ -1910,6 +1926,21 @@
</button> </button>
</div> </div>
</div> </div>
<!-- Sync Status Display -->
<div class="discover-sync-status" id="hidden-gems-sync-status" style="display: none;">
<div class="sync-status-content">
<div class="sync-status-label">
<span class="sync-icon"></span>
<span>Syncing to media server...</span>
</div>
<div class="sync-status-stats">
<span class="sync-stat"><span id="hidden-gems-sync-completed">0</span></span>
<span class="sync-stat"><span id="hidden-gems-sync-pending">0</span></span>
<span class="sync-stat"><span id="hidden-gems-sync-failed">0</span></span>
<span class="sync-stat">(<span id="hidden-gems-sync-percentage">0</span>%)</span>
</div>
</div>
</div>
<div class="discover-playlist-container compact" id="personalized-hidden-gems"> <div class="discover-playlist-container compact" id="personalized-hidden-gems">
<!-- Content will be populated dynamically --> <!-- Content will be populated dynamically -->
</div> </div>
@ -1955,6 +1986,21 @@
</button> </button>
</div> </div>
</div> </div>
<!-- Sync Status Display -->
<div class="discover-sync-status" id="discovery-shuffle-sync-status" style="display: none;">
<div class="sync-status-content">
<div class="sync-status-label">
<span class="sync-icon"></span>
<span>Syncing to media server...</span>
</div>
<div class="sync-status-stats">
<span class="sync-stat"><span id="discovery-shuffle-sync-completed">0</span></span>
<span class="sync-stat"><span id="discovery-shuffle-sync-pending">0</span></span>
<span class="sync-stat"><span id="discovery-shuffle-sync-failed">0</span></span>
<span class="sync-stat">(<span id="discovery-shuffle-sync-percentage">0</span>%)</span>
</div>
</div>
</div>
<div class="discover-playlist-container compact" id="personalized-discovery-shuffle"> <div class="discover-playlist-container compact" id="personalized-discovery-shuffle">
<!-- Content will be populated dynamically --> <!-- Content will be populated dynamically -->
</div> </div>
@ -1978,6 +2024,21 @@
</button> </button>
</div> </div>
</div> </div>
<!-- Sync Status Display -->
<div class="discover-sync-status" id="familiar-favorites-sync-status" style="display: none;">
<div class="sync-status-content">
<div class="sync-status-label">
<span class="sync-icon"></span>
<span>Syncing to media server...</span>
</div>
<div class="sync-status-stats">
<span class="sync-stat"><span id="familiar-favorites-sync-completed">0</span></span>
<span class="sync-stat"><span id="familiar-favorites-sync-pending">0</span></span>
<span class="sync-stat"><span id="familiar-favorites-sync-failed">0</span></span>
<span class="sync-stat">(<span id="familiar-favorites-sync-percentage">0</span>%)</span>
</div>
</div>
</div>
<div class="discover-playlist-container compact" id="personalized-familiar-favorites"> <div class="discover-playlist-container compact" id="personalized-familiar-favorites">
<!-- Content will be populated dynamically --> <!-- Content will be populated dynamically -->
</div> </div>
@ -2046,6 +2107,22 @@
</div> </div>
</div> </div>
<!-- Sync Status Display -->
<div class="discover-sync-status" id="build-playlist-sync-status" style="display: none;">
<div class="sync-status-content">
<div class="sync-status-label">
<span class="sync-icon"></span>
<span>Syncing to media server...</span>
</div>
<div class="sync-status-stats">
<span class="sync-stat"><span id="build-playlist-sync-completed">0</span></span>
<span class="sync-stat"><span id="build-playlist-sync-pending">0</span></span>
<span class="sync-stat"><span id="build-playlist-sync-failed">0</span></span>
<span class="sync-stat">(<span id="build-playlist-sync-percentage">0</span>%)</span>
</div>
</div>
</div>
<!-- Metadata Display --> <!-- Metadata Display -->
<div id="build-playlist-metadata-display"></div> <div id="build-playlist-metadata-display"></div>

View file

@ -26394,6 +26394,18 @@ async function startDiscoverPlaylistSync(playlistType, playlistName) {
tracks = discoverReleaseRadarTracks; tracks = discoverReleaseRadarTracks;
} else if (playlistType === 'discovery_weekly') { } else if (playlistType === 'discovery_weekly') {
tracks = discoverWeeklyTracks; 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) { if (!tracks || tracks.length === 0) {
@ -26448,15 +26460,15 @@ async function startDiscoverPlaylistSync(playlistType, playlistName) {
spotifyPlaylists.push(virtualPlaylist); spotifyPlaylists.push(virtualPlaylist);
} }
// Show sync status display // Show sync status display (convert underscores to hyphens for ID)
const statusId = playlistType === 'release_radar' ? 'release-radar-sync-status' : 'discovery-weekly-sync-status'; const statusId = playlistType.replace(/_/g, '-') + '-sync-status';
const statusDisplay = document.getElementById(statusId); const statusDisplay = document.getElementById(statusId);
if (statusDisplay) { if (statusDisplay) {
statusDisplay.style.display = 'block'; statusDisplay.style.display = 'block';
} }
// Disable sync button to prevent duplicate syncs // Disable sync button to prevent duplicate syncs (convert underscores to hyphens for ID)
const buttonId = playlistType === 'release_radar' ? 'release-radar-sync-btn' : 'discovery-weekly-sync-btn'; const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
const syncButton = document.getElementById(buttonId); const syncButton = document.getElementById(buttonId);
if (syncButton) { if (syncButton) {
syncButton.disabled = true; syncButton.disabled = true;
@ -26495,11 +26507,12 @@ function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
console.log(`📊 Sync status for ${playlistType}:`, data); console.log(`📊 Sync status for ${playlistType}:`, data);
// Update UI with progress (data structure: {status: ..., progress: {...}}) // Update UI with progress (data structure: {status: ..., progress: {...}})
const prefix = playlistType === 'release_radar' ? 'release-radar' : 'discovery-weekly'; // Convert underscores to hyphens for HTML IDs
const prefix = playlistType.replace(/_/g, '-');
const progress = data.progress || {}; const progress = data.progress || {};
const totalEl = document.getElementById(`${prefix}-sync-total`); const completedEl = document.getElementById(`${prefix}-sync-completed`);
const matchedEl = document.getElementById(`${prefix}-sync-matched`); const pendingEl = document.getElementById(`${prefix}-sync-pending`);
const failedEl = document.getElementById(`${prefix}-sync-failed`); const failedEl = document.getElementById(`${prefix}-sync-failed`);
const percentageEl = document.getElementById(`${prefix}-sync-percentage`); const percentageEl = document.getElementById(`${prefix}-sync-percentage`);
@ -26507,10 +26520,11 @@ function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
const matched = progress.matched_tracks || 0; const matched = progress.matched_tracks || 0;
const failed = progress.failed_tracks || 0; const failed = progress.failed_tracks || 0;
const processed = matched + failed; const processed = matched + failed;
const pending = total - processed;
const completionPercentage = total > 0 ? Math.round((processed / total) * 100) : 0; const completionPercentage = total > 0 ? Math.round((processed / total) * 100) : 0;
if (totalEl) totalEl.textContent = total; if (completedEl) completedEl.textContent = matched;
if (matchedEl) matchedEl.textContent = matched; if (pendingEl) pendingEl.textContent = pending;
if (failedEl) failedEl.textContent = failed; if (failedEl) failedEl.textContent = failed;
if (percentageEl) percentageEl.textContent = completionPercentage; if (percentageEl) percentageEl.textContent = completionPercentage;
@ -26521,7 +26535,7 @@ function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
delete discoverSyncPollers[playlistType]; delete discoverSyncPollers[playlistType];
// Re-enable sync button // Re-enable sync button
const buttonId = playlistType === 'release_radar' ? 'release-radar-sync-btn' : 'discovery-weekly-sync-btn'; const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
const syncButton = document.getElementById(buttonId); const syncButton = document.getElementById(buttonId);
if (syncButton) { if (syncButton) {
syncButton.disabled = false; syncButton.disabled = false;
@ -26529,8 +26543,19 @@ function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
syncButton.style.cursor = 'pointer'; syncButton.style.cursor = 'pointer';
} }
// Show completion toast // Show completion toast with playlist name
showToast(`${playlistType === 'release_radar' ? 'Fresh Tape' : 'The Archives'} sync complete!`, 'success'); 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 // Hide status display after 3 seconds
setTimeout(() => { setTimeout(() => {