diff --git a/BACKLOG.md b/BACKLOG.md index a90bc06..9bb8cea 100644 --- a/BACKLOG.md +++ b/BACKLOG.md @@ -18,7 +18,7 @@ bottom as they come up. - [x] Empty-state designs for empty playlists and empty history (match the new hero). - [x] Loading skeletons for search results instead of a bare "Searching…". - [x] Keyboard-shortcut help overlay (press `?`), listing space / arrows / f / m. -- [ ] Download/preload progress indicator on cards (percent or a bar, not just a pulse). +- [x] Download/preload progress indicator on cards (percent or a bar, not just a pulse). - [ ] Remember and restore the last playback position per video. - [ ] Toast queue (stack multiple toasts instead of replacing). diff --git a/frontend/app.js b/frontend/app.js index d4aa902..e3ee74d 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -172,6 +172,16 @@ function markCardCacheState(id, state) { document.querySelectorAll(`.card[data-id="${CSS.escape(id)}"]`).forEach((c) => { c.classList.toggle('cached', state === 'cached'); c.classList.toggle('downloading', state === 'downloading'); + const thumb = c.querySelector('.thumb'); + if (state === 'downloading' && !thumb.querySelector('.dl-progress')) { + const bar = document.createElement('div'); + bar.className = 'dl-progress'; + bar.innerHTML = '
'; + thumb.appendChild(bar); + } else if (state !== 'downloading') { + const bar = thumb.querySelector('.dl-progress'); + if (bar) bar.remove(); + } }); } @@ -802,13 +812,16 @@ async function renderSettings() { function renderCard(v, index, list) { const card = document.createElement('div'); - card.className = 'card' + (cachedIds.has(v.id) ? ' cached' : '') + (downloading.has(v.id) ? ' downloading' : ''); + const isCached = cachedIds.has(v.id); + const isDownloading = downloading.has(v.id); + card.className = 'card' + (isCached ? ' cached' : '') + (isDownloading ? ' downloading' : ''); card.dataset.id = v.id; card.innerHTML = `