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-label">
<span class="sync-icon"></span>
<span class="sync-text">Syncing Seasonal Mix...</span>
<span>Syncing to media server...</span>
</div>
<div class="sync-status-progress">
<div class="sync-progress-text">
<span id="seasonal-playlist-sync-progress">0/0 tracks</span>
</div>
<div class="sync-status-stats">
<span class="sync-stat"><span id="seasonal-playlist-sync-completed">0</span></span>
<span class="sync-stat"><span id="seasonal-playlist-sync-pending">0</span></span>
<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>
@ -1887,6 +1888,21 @@
</button>
</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">
<!-- Content will be populated dynamically -->
</div>
@ -1910,6 +1926,21 @@
</button>
</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">
<!-- Content will be populated dynamically -->
</div>
@ -1955,6 +1986,21 @@
</button>
</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">
<!-- Content will be populated dynamically -->
</div>
@ -1978,6 +2024,21 @@
</button>
</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">
<!-- Content will be populated dynamically -->
</div>
@ -2046,6 +2107,22 @@
</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 -->
<div id="build-playlist-metadata-display"></div>

View file

@ -26394,6 +26394,18 @@ async function startDiscoverPlaylistSync(playlistType, playlistName) {
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) {
@ -26448,15 +26460,15 @@ async function startDiscoverPlaylistSync(playlistType, playlistName) {
spotifyPlaylists.push(virtualPlaylist);
}
// Show sync status display
const statusId = playlistType === 'release_radar' ? 'release-radar-sync-status' : 'discovery-weekly-sync-status';
// 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
const buttonId = playlistType === 'release_radar' ? 'release-radar-sync-btn' : 'discovery-weekly-sync-btn';
// 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;
@ -26495,11 +26507,12 @@ function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
console.log(`📊 Sync status for ${playlistType}:`, data);
// 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 totalEl = document.getElementById(`${prefix}-sync-total`);
const matchedEl = document.getElementById(`${prefix}-sync-matched`);
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`);
@ -26507,10 +26520,11 @@ function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
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 (totalEl) totalEl.textContent = total;
if (matchedEl) matchedEl.textContent = matched;
if (completedEl) completedEl.textContent = matched;
if (pendingEl) pendingEl.textContent = pending;
if (failedEl) failedEl.textContent = failed;
if (percentageEl) percentageEl.textContent = completionPercentage;
@ -26521,7 +26535,7 @@ function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
delete discoverSyncPollers[playlistType];
// 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);
if (syncButton) {
syncButton.disabled = false;
@ -26529,8 +26543,19 @@ function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
syncButton.style.cursor = 'pointer';
}
// Show completion toast
showToast(`${playlistType === 'release_radar' ? 'Fresh Tape' : 'The Archives'} sync complete!`, 'success');
// 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(() => {