Fix redownload progress bar visibility

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

View file

@ -43282,19 +43282,22 @@ if (false) {
}
function _pollRedownloadProgress(taskId, overlay) {
const bar = document.getElementById('redownload-progress-bar');
const status = document.getElementById('redownload-progress-status');
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 our transfer — match by checking active non-completed transfers
// Find any active transfer
let bestTransfer = null;
for (const t of transfers) {
const st = (t.state || '').toLowerCase();
@ -43313,22 +43316,17 @@ function _pollRedownloadProgress(taskId, overlay) {
if (bar) bar.style.width = `${Math.min(95, pct)}%`;
if (status) {
if (total > 0) {
status.textContent = `Downloading... ${Math.round(pct)}% (${transferredMB} / ${totalMB} MB)`;
} else {
status.textContent = `Downloading... ${Math.round(pct)}%`;
}
status.textContent = total > 0
? `Downloading... ${Math.round(pct)}% (${transferredMB} / ${totalMB} MB)`
: `Downloading... ${Math.round(pct)}%`;
}
} else {
// No active Soulseek transfer — might be a streaming source (Tidal/YouTube)
// or post-processing phase
if (bar && parseFloat(bar.style.width) < 50) {
bar.style.width = '60%';
}
// No active slskd transfer — streaming source or post-processing
if (bar) bar.style.width = '80%';
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 procData = await procRes.json();
const procs = procData.active_processes || [];
@ -43354,6 +43352,7 @@ function _pollRedownloadProgress(taskId, overlay) {
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);

View file

@ -52354,8 +52354,8 @@ tr.tag-diff-same {
.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-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 { height: 100%; background: var(--accent); border-radius: 3px; width: 0; transition: width 0.5s ease; }
.redownload-progress-bar-wrap { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.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; }
/* Action buttons */