Settings: the saved-videos list folds

Settings → Offline cache lists every saved video; it now sits in a collapsible
'Saved videos' section showing the count and total size, closed by default,
remembering how it was left.
This commit is contained in:
Jonathan Sykes
2026-10-03 07:57:21 +08:00
parent 258aad83dd
commit 2c6f285cfe
2 changed files with 30 additions and 1 deletions

View File

@@ -9379,7 +9379,10 @@ async function renderSettings() {
<div class="set-actions">
<button id="clearCacheBtn" class="btn danger">Clear all cached videos</button>
</div>
<div id="cacheList" class="cache-list"></div>
<details id="cacheFold" class="cache-fold">
<summary><span>Saved videos</span><span id="cacheFoldCount" class="cache-fold-count"></span></summary>
<div id="cacheList" class="cache-list"></div>
</details>
</div>
<div class="set-group">
@@ -9644,6 +9647,13 @@ async function renderSettings() {
]);
});
// The saved-videos list folds; remember how the user left it.
{
const fold = $('cacheFold');
try { fold.open = localStorage.getItem('ytpCacheFoldOpen') === '1'; } catch { /* blocked */ }
fold.addEventListener('toggle', () => { try { localStorage.setItem('ytpCacheFoldOpen', fold.open ? '1' : '0'); } catch { /* blocked */ } });
}
// ---- Populate live cache stats ----
try {
const res = await API.cacheList();
@@ -9651,6 +9661,7 @@ async function renderSettings() {
const total = (res && res.total) || 0;
const items = (res && res.items) || [];
$('cacheTotal').textContent = `${fmtBytes(total)} · ${items.length} video${items.length === 1 ? '' : 's'}`;
$('cacheFoldCount').textContent = items.length ? `${items.length} · ${fmtBytes(total)}` : 'none';
const listEl = $('cacheList');
if (!items.length) {
listEl.innerHTML = '<div class="cache-empty">No videos saved offline yet.</div>';