danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Fix redownload progress bar visibility

Browse source 
Bar was using var(--accent) which can be dark/invisible against the
modal background. Now uses bright green gradient with glow shadow.
Also thicker (8px) and queries DOM fresh each poll tick to prevent
stale references.
This commit is contained in:
Broque Thomas 2026-04-01 15:19:29 -07:00
parent 19538233fd
commit 04bf2c5c4f
2 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
webui/static/script.js
View file

@ -43282,19 +43282,22 @@ if (false) {
} }
function _pollRedownloadProgress(taskId, overlay) { function _pollRedownloadProgress(taskId, overlay) {
const bar = document.getElementById('redownload-progress-bar');
const status = document.getElementById('redownload-progress-status');
let completed = false; let completed = false;
const poll = setInterval(async () => { const poll = setInterval(async () => {
if (completed) return; 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 { try {
// Poll real download progress from /api/downloads/status // Poll real download progress from /api/downloads/status
const dlRes = await fetch('/api/downloads/status'); const dlRes = await fetch('/api/downloads/status');
const dlData = await dlRes.json(); const dlData = await dlRes.json();
const transfers = dlData.transfers || []; const transfers = dlData.transfers || [];
// Find our transfer — match by checking active non-completed transfers // Find any active transfer
let bestTransfer = null; let bestTransfer = null;
for (const t of transfers) { for (const t of transfers) {
const st = (t.state || '').toLowerCase(); const st = (t.state || '').toLowerCase();
@ -43313,22 +43316,17 @@ function _pollRedownloadProgress(taskId, overlay) {
if (bar) bar.style.width = `${Math.min(95, pct)}%`; if (bar) bar.style.width = `${Math.min(95, pct)}%`;
if (status) { if (status) {
if (total > 0) { status.textContent = total > 0
status.textContent = `Downloading... ${Math.round(pct)}% (${transferredMB} / ${totalMB} MB)`; ? `Downloading... ${Math.round(pct)}% (${transferredMB} / ${totalMB} MB)`
} else { : `Downloading... ${Math.round(pct)}%`;
status.textContent = `Downloading... ${Math.round(pct)}%`;
}
} }
} else { } else {
// No active Soulseek transfer — might be a streaming source (Tidal/YouTube) // No active slskd transfer — streaming source or post-processing
// or post-processing phase if (bar) bar.style.width = '80%';
if (bar && parseFloat(bar.style.width) < 50) {
bar.style.width = '60%';
}
if (status) status.textContent = 'Processing...'; if (status) status.textContent = 'Processing...';
} }
// Check for completion — look for completed transfers or batch gone // Check for batch completion
const procRes = await fetch('/api/active-processes'); const procRes = await fetch('/api/active-processes');
const procData = await procRes.json(); const procData = await procRes.json();
const procs = procData.active_processes || []; const procs = procData.active_processes || [];
@ -43354,6 +43352,7 @@ function _pollRedownloadProgress(taskId, overlay) {
setTimeout(() => { setTimeout(() => {
if (!completed) { if (!completed) {
clearInterval(poll); clearInterval(poll);
const status = document.getElementById('redownload-progress-status');
if (status) status.textContent = 'Download may still be in progress. Check the dashboard.'; if (status) status.textContent = 'Download may still be in progress. Check the dashboard.';
} }
}, 300000); }, 300000);

4
webui/static/style.css
View file

@ -52354,8 +52354,8 @@ tr.tag-diff-same {
.redownload-progress { padding: 20px 0; text-align: center; } .redownload-progress { padding: 20px 0; text-align: center; }
.redownload-progress-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); } .redownload-progress-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
.redownload-progress-from { font-size: 11px; color: rgba(255,255,255,0.3); margin: 4px 0 16px; } .redownload-progress-from { font-size: 11px; color: rgba(255,255,255,0.3); margin: 4px 0 16px; }
.redownload-progress-bar-wrap { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; } .redownload-progress-bar-wrap { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.redownload-progress-bar { height: 100%; background: var(--accent); border-radius: 3px; width: 0; transition: width 0.5s ease; } .redownload-progress-bar { height: 100%; background: linear-gradient(90deg, #4caf50, #66bb6a); border-radius: 4px; width: 0; transition: width 0.5s ease; box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); }
.redownload-progress-status { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 12px; } .redownload-progress-status { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 12px; }
/* Action buttons */ /* Action buttons */