fix(videos): stop thumbnails reloading on every convert poll

Instead of full re-render every 10s, patch converting badges in-place. Only does a full renderFiles() when file count changes (conversion done) or on the final poll when all conversions finish. Co-authored-by: Copilot <[email protected]>
2026-08-10 01:49:03 -04:00
parent 7d5755180a
commit 1fde8732c2
1 changed files with 48 additions and 1 deletions
@@ -210,10 +210,57 @@
        }
        // Auto-refresh every 10s while conversions are running
        if (convertingCount > 0) {
-            setTimeout(refreshFiles, 10000);
+            setTimeout(refreshConvertingOnly, 10000);
        }
    }

+    // Lightweight refresh: only update converting badges in existing rows.
+    // Falls back to full render if file count changed.
+    function refreshConvertingOnly() {
+        return fetchJson("/api/local-videos")
+            .then(function (result) {
+                const files = result.files || [];
+                const existingRows = Array.from(body.querySelectorAll("tr[data-path]"));
+                // If file count changed (new import, conversion finished → file renamed), do full render
+                if (files.length !== existingRows.length) {
+                    renderFiles(result);
+                    return;
+                }
+                let convertingCount = 0;
+                files.forEach(function (file) {
+                    if (!file.converting) return;
+                    convertingCount++;
+                    const row = body.querySelector(`tr[data-path="${CSS.escape(file.path)}"]`);
+                    if (!row) return;
+                    // Update desktop badge
+                    const badge = row.querySelector(".dash-col-upload .badge");
+                    if (badge) {
+                        const p = file.convert_progress;
+                        const pct = p && p.pct > 0 ? ` ${p.pct}%` : '';
+                        const elapsed = p ? ` ${Math.floor(p.elapsed_s / 60)}m${p.elapsed_s % 60}s` : '';
+                        badge.innerHTML = `<i class="fas fa-spinner fa-spin me-1"></i>Converting${pct}${elapsed}`;
+                    }
+                    // Update mobile badge
+                    const mobileBadge = row.querySelector(".dash-thumb-converting");
+                    if (mobileBadge) {
+                        const p = file.convert_progress;
+                        const pct = p && p.pct > 0 ? ` ${p.pct}%` : '';
+                        const elapsed = p ? `${Math.floor(p.elapsed_s / 60)}m${p.elapsed_s % 60}s` : '…';
+                        mobileBadge.innerHTML = `<i class="fas fa-spinner fa-spin me-1"></i>${pct || elapsed}`;
+                    }
+                });
+                if (convertingCount > 0) {
+                    setTimeout(refreshConvertingOnly, 10000);
+                } else {
+                    // All done — do one full render to show final state
+                    renderFiles(result);
+                }
+            })
+            .catch(function () {
+                // silently ignore — don't disturb the UI during a background poll
+            });
+    }
+
    function refreshFiles() {
        refreshButton.disabled = true;
        summary.textContent = "Loading...";