This commit is contained in:
Broque Thomas 2025-08-24 20:18:54 -07:00
parent 628e8b7709
commit 042baf429f
2 changed files with 39 additions and 3 deletions

View file

@ -1758,17 +1758,16 @@ function updateCardToSyncing(playlistId, percent, progress = null) {
let actualPercent = percent || 0; let actualPercent = percent || 0;
if (progress) { if (progress) {
// Use the actual progress percentage from the sync service
actualPercent = progress.progress || 0;
// Create detailed progress text like the GUI // Create detailed progress text like the GUI
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 total = progress.total_tracks || 0; const total = progress.total_tracks || 0;
const currentStep = progress.current_step || 'Processing'; const currentStep = progress.current_step || 'Processing';
// Calculate actual progress as processed/total, not just successful/total
if (total > 0) { if (total > 0) {
const processed = matched + failed; const processed = matched + failed;
actualPercent = Math.round((processed / total) * 100);
progressText = `${currentStep}: ${processed}/${total} (${matched} matched, ${failed} failed)`; progressText = `${currentStep}: ${processed}/${total} (${matched} matched, ${failed} failed)`;
} else { } else {
progressText = currentStep; progressText = currentStep;
@ -1780,7 +1779,29 @@ function updateCardToSyncing(playlistId, percent, progress = null) {
} }
} }
// 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 = `
<div class="playlist-card-sync-status">
<span class="sync-stat total-tracks"> ${total}</span>
<span class="sync-separator">/</span>
<span class="sync-stat matched-tracks"> ${matched}</span>
<span class="sync-separator">/</span>
<span class="sync-stat failed-tracks"> ${failed}</span>
<span class="sync-stat percentage">(${percentage}%)</span>
</div>
`;
}
progressBar.innerHTML = ` progressBar.innerHTML = `
${statusCounterHTML}
<div class="progress-bar-sync"> <div class="progress-bar-sync">
<div class="progress-fill-sync" style="width: ${actualPercent}%;"></div> <div class="progress-fill-sync" style="width: ${actualPercent}%;"></div>
</div> </div>

View file

@ -4534,4 +4534,19 @@ body {
.sync-separator { .sync-separator {
color: #666666; color: #666666;
}
/* Playlist card sync status display */
.playlist-card-sync-status {
background: rgba(29, 185, 84, 0.08);
border: 1px solid rgba(29, 185, 84, 0.2);
border-radius: 8px;
padding: 4px 8px;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 11px;
font-weight: 500;
} }