feat: queue, channel view, downloads/saved pages, repeat/loop, accessibility, perf, multithreading

2026-06-21 15:39:58 +08:00
parent b67e40348b
commit 38511fa450
6 changed files with 1040 additions and 93 deletions
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -29,6 +29,7 @@ async function call(zeroName, tauriName, payload = {}) {

 const API = {
  search: (query) => call('yt.search', 'yt_search', { query }),
+  getChannel: (channel) => call('yt.channel', 'yt_channel', { channel }),
  getStreams: (videoId) => call('yt.streams', 'yt_streams', { videoId }),
  loadData: () => call('store.load', 'store_load', {}),
  // data is sent pre-stringified so the native side can write it verbatim.
@@ -50,16 +51,29 @@ function toAssetUrl(path) {
 }

 // ---------- State ----------
-let data = { playlists: [], history: [], settings: { quality: 'auto', volume: 1, audioOnly: false, autoPreload: true }, resumePositions: {} };
-let view = { type: 'search' };          // 'search' | 'history' | 'playlist' | 'settings'
+const DEFAULT_SETTINGS = {
+  quality: 'auto', volume: 1, audioOnly: false, autoPreload: true,
+  repeatMode: 'off',        // 'off' | 'all' — repeat the playing list when it ends
+  loopOne: false,           // repeat the single current video
+  theme: 'dark',            // 'dark' | 'light' | 'contrast'
+  fontScale: 'normal',      // 'small' | 'normal' | 'large' | 'xl'
+  density: 'comfortable',   // 'comfortable' | 'compact'
+  perfMode: false,          // disable heavy visual effects for speed
+  reduceMotion: false,      // disable animations
+};
+let data = { playlists: [], history: [], queue: [], settings: { ...DEFAULT_SETTINGS }, resumePositions: {} };
+let view = { type: 'search' };          // 'search'|'history'|'playlist'|'settings'|'queue'|'saved'|'downloads'|'channel'
 let searchResults = [];
+let channelData = { name: '', url: '', key: '', results: [], loading: false };
 let queue = [];                          // list of video objects for autoplay
 let queueIndex = -1;
+let queueSource = '';                    // label of what's playing ('queue','playlist:<id>',…)
 let current = null;                      // { meta, qualities, audioUrl, localUrl? }
 let dragSource = -1;                     // index of card being dragged
 let saveTimer = null;
 const cachedIds = new Set();             // video ids that exist in the offline cache
 const downloading = new Set();           // video ids with an in-flight download
+const downloadMeta = new Map();          // id -> video object, for the Downloads page

 // ---------- DOM ----------
 const $ = (id) => document.getElementById(id);
@@ -86,6 +100,9 @@ const els = {
  speed: $('speedSelect'),
  quality: $('qualitySelect'),
  fsBtn: $('fsBtn'),
+  loopBtn: $('loopBtn'),
+  repeatBtn: $('repeatBtn'),
+  queueBtn: $('queueBtn'),
  cards: $('cards'),
  listTitle: $('listTitle'),
  listActions: $('listActions'),
@@ -140,6 +157,18 @@ function toast(msg, { duration = 2200 } = {}) {
  }
 }
 function uid() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 7); }
+
+// Apply theme / font size / density / performance settings to the document root.
+// Driven entirely by data-* attributes that styles.css keys off of.
+function applyAppearance() {
+  const s = data.settings;
+  const root = document.documentElement;
+  root.dataset.theme = s.theme || 'dark';
+  root.dataset.font = s.fontScale || 'normal';
+  root.dataset.density = s.density || 'comfortable';
+  root.dataset.perf = s.perfMode ? 'on' : 'off';
+  root.dataset.motion = s.reduceMotion ? 'reduced' : 'full';
+}
 function fmtBytes(n) {
  if (!n) return '0 B';
  const u = ['B', 'KB', 'MB', 'GB'];
@@ -164,7 +193,10 @@ async function preload(video, { quiet = false } = {}) {
  const id = video.id;
  if (!id || cachedIds.has(id) || downloading.has(id)) return;
  downloading.add(id);
+  downloadMeta.set(id, slim(video));
  markCardCacheState(id, 'downloading');
+  if (view.type === 'downloads') renderList();
+  updateDownloadBadge();
  if (!quiet) toast(`Saving “${video.title}” for offline…`);
  try {
    const res = await API.cacheDownload(id);
@@ -178,12 +210,23 @@ async function preload(video, { quiet = false } = {}) {
    if (!quiet) toast('⚠ Saving not supported in this build.');
  } finally {
    downloading.delete(id);
+    downloadMeta.delete(id);
    markCardCacheState(id, cachedIds.has(id) ? 'cached' : 'none');
    if (current && current.meta && current.meta.id === id) updateNowPlayingActions();
-    if (view.type === 'settings') renderList();
+    updateDownloadBadge();
+    if (view.type === 'settings' || view.type === 'downloads' || view.type === 'saved') renderList();
  }
 }

+// Sidebar badge showing how many downloads are in flight.
+function updateDownloadBadge() {
+  const badge = $('navDlCount');
+  if (!badge) return;
+  const n = downloading.size;
+  badge.textContent = String(n);
+  badge.classList.toggle('hidden', n === 0);
+}
+
 // Auto-preload every video in a playlist (respecting the setting).
 function preloadPlaylist(pl) {
  if (!data.settings.autoPreload || !pl) return;
@@ -530,7 +573,7 @@ function wirePlayerEvents() {
      }
    });
    el.addEventListener('loadedmetadata', () => { if (masterIs(el)) updateProgress(); });
-    el.addEventListener('ended', () => { if (masterIs(el)) playNext(); });
+    el.addEventListener('ended', () => { if (masterIs(el)) onTrackEnded(); });
    el.addEventListener('error', () => {
      // A failed master stream, or a failed synced-audio track in dual mode,
      // both warrant falling back to the next candidate.
@@ -606,6 +649,7 @@ function addToHistory(meta) {
  data.history = data.history.filter((v) => v.id !== meta.id);
  data.history.unshift({
    id: meta.id, title: meta.title, channel: meta.channel,
+    channelId: meta.channelId || '', channelUrl: meta.channelUrl || '',
    duration: meta.duration, thumbnail: meta.thumbnail,
  });
  if (data.history.length > 200) data.history.length = 200;
@@ -616,13 +660,55 @@ function addToHistory(meta) {
 // ============================================================================
 // Queue / navigation
 // ============================================================================
-function playFromList(list, index) {
+function playFromList(list, index, source = '') {
  queue = list;
  queueIndex = index;
+  queueSource = source;
  Player.loadVideo(list[index]);
  renderUpNext();
 }

+// ---------- Temporary queue ----------
+function updateQueueBadge() {
+  const b = $('navQueueCount');
+  if (!b) return;
+  b.textContent = String(data.queue.length);
+  b.classList.toggle('hidden', data.queue.length === 0);
+}
+function addToQueue(video, { quiet = false } = {}) {
+  if (!video || !video.id) return;
+  if (data.queue.some((v) => v.id === video.id)) { if (!quiet) toast('Already in queue'); return; }
+  data.queue.push(slim(video));
+  persist();
+  updateQueueBadge();
+  if (view.type === 'queue') renderList();
+  if (!quiet) toast('Added to queue');
+}
+function removeFromQueue(id) {
+  data.queue = data.queue.filter((v) => v.id !== id);
+  // Keep an in-progress queue playback in sync if it was sourced from the queue.
+  if (queueSource === 'queue') {
+    const playingId = current && current.meta && current.meta.id;
+    queue = data.queue.slice();
+    queueIndex = playingId ? queue.findIndex((v) => v.id === playingId) : -1;
+    renderUpNext();
+  }
+  persist();
+  updateQueueBadge();
+  if (view.type === 'queue') renderList();
+}
+function clearQueue() {
+  data.queue = [];
+  persist();
+  updateQueueBadge();
+  if (view.type === 'queue') renderList();
+  toast('Queue cleared');
+}
+function playQueue(index = 0) {
+  if (!data.queue.length) return;
+  playFromList(data.queue.slice(), index, 'queue');
+}
+
 function renderUpNext() {
  const upcoming = queue.slice(queueIndex + 1);
  if (!upcoming.length) { $('upnext').classList.add('hidden'); return; }
@@ -646,15 +732,42 @@ function renderUpNext() {
    list.appendChild(item);
  });
 }
-function playNext() {
+// Advance to the next track. Wraps to the start when "repeat list" is on.
+function advanceQueue() {
  if (queueIndex >= 0 && queueIndex < queue.length - 1) {
    queueIndex++;
-    Player.loadVideo(queue[queueIndex]);
-    renderUpNext();
+  } else if (data.settings.repeatMode === 'all' && queue.length) {
+    queueIndex = 0;
  } else {
-    updatePlayBtn();
-    $('upnext').classList.add('hidden');
+    return false;
  }
+  Player.loadVideo(queue[queueIndex]);
+  renderUpNext();
+  return true;
+}
+function playNext() {
+  if (!advanceQueue()) { updatePlayBtn(); $('upnext').classList.add('hidden'); }
+}
+// Fired when a track finishes on its own — honors single-video loop first.
+function onTrackEnded() {
+  if (data.settings.loopOne) { Player.seek(0); Player.play(); return; }
+  if (!advanceQueue()) { updatePlayBtn(); $('upnext').classList.add('hidden'); }
+}
+function toggleLoopOne() {
+  data.settings.loopOne = !data.settings.loopOne;
+  persist();
+  updateLoopRepeatButtons();
+  toast(data.settings.loopOne ? 'Looping current video' : 'Loop off');
+}
+function toggleRepeat() {
+  data.settings.repeatMode = data.settings.repeatMode === 'all' ? 'off' : 'all';
+  persist();
+  updateLoopRepeatButtons();
+  toast(data.settings.repeatMode === 'all' ? 'Repeating list' : 'Repeat off');
+}
+function updateLoopRepeatButtons() {
+  if (els.loopBtn) els.loopBtn.classList.toggle('active', !!data.settings.loopOne);
+  if (els.repeatBtn) els.repeatBtn.classList.toggle('active', data.settings.repeatMode === 'all');
 }
 function playPrev() {
  if (Player.master.currentTime > 3) { Player.seek(0); return; }
@@ -665,6 +778,38 @@ function playPrev() {
  }
 }

+// ============================================================================
+// Channel view — list a channel's uploads with quick actions
+// ============================================================================
+async function openChannel(channelKey, displayName) {
+  if (!channelKey) { toast('No channel info for this video'); return; }
+  view = { type: 'channel' };
+  channelData = { name: displayName || 'Channel', url: channelKey, key: channelKey, results: [], loading: true };
+  render();
+  try {
+    const res = await API.getChannel(channelKey);
+    if (view.type !== 'channel' || channelData.key !== channelKey) return; // navigated away
+    if (!res || !res.ok) throw new Error(res?.error || 'Could not load channel');
+    channelData.results = res.results || [];
+    channelData.name = res.channel || displayName || 'Channel';
+    channelData.url = res.channelUrl || channelKey;
+    channelData.loading = false;
+    renderList();
+  } catch (err) {
+    channelData.loading = false;
+    if (view.type === 'channel') {
+      els.cards.innerHTML = '';
+      els.status.classList.remove('hidden');
+      els.status.textContent = '⚠ ' + err.message;
+    }
+  }
+}
+
+// The identifier we hand the backend to look a channel up (URL preferred).
+function channelKeyOf(v) {
+  return (v && (v.channelUrl || v.channelId)) || '';
+}
+
 // ============================================================================
 // Rendering
 // ============================================================================
@@ -681,11 +826,15 @@ function renderSidebar() {
  document.querySelectorAll('.nav-item').forEach((b) => {
    b.classList.toggle('active', b.dataset.view === view.type);
  });
+  updateQueueBadge();
+  updateDownloadBadge();
 }

 function currentList() {
  if (view.type === 'search') return searchResults;
  if (view.type === 'history') return data.history;
+  if (view.type === 'queue') return data.queue;
+  if (view.type === 'channel') return channelData.results;
  if (view.type === 'playlist') {
    const pl = data.playlists.find((p) => p.id === view.id);
    return pl ? pl.videos : [];
@@ -712,6 +861,8 @@ function showSearchSkeletons() {

 function renderList() {
  if (view.type === 'settings') { renderSettings(); return; }
+  if (view.type === 'saved') { renderSaved(); return; }
+  if (view.type === 'downloads') { renderDownloads(); return; }

  const list = currentList();
  els.cards.innerHTML = '';
@@ -727,23 +878,54 @@ function renderList() {
      clear.onclick = () => { data.history = []; persist(); renderList(); };
      els.listActions.appendChild(clear);
    }
+  } else if (view.type === 'queue') {
+    els.listTitle.textContent = 'Queue';
+    if (list.length) {
+      const playAll = document.createElement('button');
+      playAll.textContent = '▶ Play queue';
+      playAll.onclick = () => playQueue(0);
+      const clear = document.createElement('button');
+      clear.textContent = 'Clear';
+      clear.onclick = clearQueue;
+      els.listActions.append(playAll, clear);
+    }
+  } else if (view.type === 'channel') {
+    els.listTitle.textContent = channelData.name || 'Channel';
+    if (list.length) {
+      const playAll = document.createElement('button');
+      playAll.textContent = '▶ Play all';
+      playAll.onclick = () => playFromList(channelData.results.slice(), 0, 'channel');
+      const queueAll = document.createElement('button');
+      queueAll.textContent = '＋ Queue all';
+      queueAll.onclick = () => { channelData.results.forEach((v) => addToQueue(v, { quiet: true })); toast('Added channel to queue'); };
+      els.listActions.append(playAll, queueAll);
+    }
  } else if (view.type === 'playlist') {
    const pl = data.playlists.find((p) => p.id === view.id);
    els.listTitle.textContent = pl ? pl.name : 'Playlist';
    if (pl) {
      const playAll = document.createElement('button');
      playAll.textContent = '▶ Play all';
-      playAll.onclick = () => { if (pl.videos.length) playFromList(pl.videos, 0); };
+      playAll.onclick = () => { if (pl.videos.length) playFromList(pl.videos, 0, 'playlist:' + pl.id); };
+      const queueAll = document.createElement('button');
+      queueAll.textContent = '＋ Queue';
+      queueAll.onclick = () => { pl.videos.forEach((v) => addToQueue(v, { quiet: true })); toast('Added playlist to queue'); };
      const rename = document.createElement('button');
      rename.textContent = 'Rename';
      rename.onclick = () => renamePlaylist(pl);
      const del = document.createElement('button');
      del.textContent = 'Delete';
      del.onclick = () => deletePlaylist(pl);
-      els.listActions.append(playAll, rename, del);
+      els.listActions.append(playAll, queueAll, rename, del);
    }
  }

+  // Channel still loading — show skeletons.
+  if (view.type === 'channel' && channelData.loading && !list.length) {
+    showSearchSkeletons();
+    return;
+  }
+
  if (!list.length) {
    els.status.classList.add('hidden');
    els.cards.innerHTML = '';
@@ -763,11 +945,21 @@ function renderList() {
        <h3 class="empty-title">Nothing watched yet</h3>
        <p class="empty-desc">Your viewing history shows up here once you start playing videos.</p>
      `;
-      const cta = document.createElement('button');
-      cta.className = 'empty-cta';
-      cta.textContent = '🔍  Search videos';
-      cta.addEventListener('click', () => { view = { type: 'search' }; render(); });
-      empty.appendChild(cta);
+      addBrowseCta(empty, '🔍  Search videos');
+    } else if (view.type === 'queue') {
+      empty.innerHTML = `
+        <div class="empty-icon">▶</div>
+        <h3 class="empty-title">Your queue is empty</h3>
+        <p class="empty-desc">Use <strong>+ Queue</strong> on any video to line it up. The queue is temporary and plays in order.</p>
+      `;
+      addBrowseCta(empty, '🔍  Find something to play');
+    } else if (view.type === 'channel') {
+      empty.innerHTML = `
+        <div class="empty-icon">📺</div>
+        <h3 class="empty-title">No videos found</h3>
+        <p class="empty-desc">This channel didn't return any uploads.</p>
+      `;
+      addBrowseCta(empty, '🔍  Back to search');
    } else {
      // Playlist view — empty
      empty.innerHTML = `
@@ -775,11 +967,7 @@ function renderList() {
        <h3 class="empty-title">This playlist is empty</h3>
        <p class="empty-desc">Add videos from search results or use the <strong>+ Playlist</strong> button while playing.</p>
      `;
-      const cta = document.createElement('button');
-      cta.className = 'empty-cta';
-      cta.textContent = '🔍  Browse videos';
-      cta.addEventListener('click', () => { view = { type: 'search' }; render(); });
-      empty.appendChild(cta);
+      addBrowseCta(empty, '🔍  Browse videos');
    }

    els.cards.appendChild(empty);
@@ -791,17 +979,178 @@ function renderList() {
  markPlayingCard();
 }

+function addBrowseCta(empty, label) {
+  const cta = document.createElement('button');
+  cta.className = 'empty-cta';
+  cta.textContent = label;
+  cta.addEventListener('click', () => { view = { type: 'search' }; render(); });
+  empty.appendChild(cta);
+}
+
+// ============================================================================
+// Saved videos page — every offline-cached file with sizes + totals
+// ============================================================================
+async function renderSaved() {
+  els.listTitle.textContent = 'Saved videos';
+  els.listActions.innerHTML = '';
+  els.status.classList.add('hidden');
+  const c = els.cards;
+  c.innerHTML = '<div class="status">Loading saved videos…</div>';
+
+  let res;
+  try { res = await API.cacheList(); } catch { res = null; }
+  if (view.type !== 'saved') return; // navigated away
+
+  if (!res || !res.ok) {
+    c.innerHTML = '';
+    const empty = document.createElement('div');
+    empty.className = 'empty-state';
+    empty.innerHTML = `
+      <div class="empty-icon">💾</div>
+      <h3 class="empty-title">Offline cache unavailable</h3>
+      <p class="empty-desc">This build doesn't support saving videos for offline playback.</p>`;
+    c.appendChild(empty);
+    return;
+  }
+
+  const items = (res.items || []).slice().sort((a, b) => b.size - a.size);
+  const total = res.total || 0;
+
+  if (!items.length) {
+    c.innerHTML = '';
+    const empty = document.createElement('div');
+    empty.className = 'empty-state';
+    empty.innerHTML = `
+      <div class="empty-icon">💾</div>
+      <h3 class="empty-title">Nothing saved yet</h3>
+      <p class="empty-desc">Use <strong>⬇ Save</strong> while playing, or add videos to a playlist to keep them offline.</p>`;
+    addBrowseCta(empty, '🔍  Find videos');
+    c.appendChild(empty);
+    return;
+  }
+
+  // Header actions: total + clear all.
+  const clearAll = document.createElement('button');
+  clearAll.textContent = 'Clear all';
+  clearAll.onclick = () => {
+    showModal('Clear all saved videos?', document.createTextNode('Frees disk space. Playlist entries stay and re-download on demand.'), [
+      { label: 'Cancel', onClick: closeModal },
+      { label: 'Clear all', danger: true, onClick: async () => {
+        try { await API.cacheClear(); } catch {}
+        cachedIds.clear();
+        closeModal();
+        toast('Cache cleared');
+        if (current) updateNowPlayingActions();
+        renderSaved();
+      } },
+    ]);
+  };
+  els.listActions.appendChild(clearAll);
+
+  c.innerHTML = '';
+  const summary = document.createElement('div');
+  summary.className = 'saved-summary';
+  summary.innerHTML = `<span class="saved-total">${fmtBytes(total)}</span><span class="saved-sub">${items.length} video${items.length === 1 ? '' : 's'} stored offline</span>`;
+  c.appendChild(summary);
+
+  items.forEach((it) => {
+    const v = videoById(it.id) || { id: it.id, title: videoTitleById(it.id), thumbnail: `https://i.ytimg.com/vi/${it.id}/mqdefault.jpg` };
+    const row = document.createElement('div');
+    row.className = 'card saved-card';
+    row.dataset.id = it.id;
+    row.innerHTML = `
+      <div class="thumb"><img loading="lazy" src="${v.thumbnail || ''}" alt="" /></div>
+      <div class="card-info">
+        <div class="card-title"></div>
+        <div class="card-channel saved-size">${fmtBytes(it.size)}</div>
+      </div>
+      <button class="card-del" title="Delete saved file">✕</button>`;
+    row.querySelector('.card-title').textContent = v.title || it.id;
+    row.addEventListener('click', (e) => {
+      if (e.target.closest('.card-del')) return;
+      playFromList([v], 0, 'saved');
+    });
+    row.querySelector('.card-del').addEventListener('click', async (e) => {
+      e.stopPropagation();
+      try { await API.cacheDelete(it.id); } catch {}
+      cachedIds.delete(it.id);
+      if (current && current.meta && current.meta.id === it.id) updateNowPlayingActions();
+      markCardCacheState(it.id, 'none');
+      toast('Removed from cache');
+      renderSaved();
+    });
+    c.appendChild(row);
+  });
+  markPlayingCard();
+}
+
+// ============================================================================
+// Downloads page — videos currently being saved
+// ============================================================================
+function renderDownloads() {
+  els.listTitle.textContent = 'Downloads';
+  els.listActions.innerHTML = '';
+  els.status.classList.add('hidden');
+  const c = els.cards;
+  c.innerHTML = '';
+
+  const active = [...downloadMeta.values()];
+  if (!active.length) {
+    const empty = document.createElement('div');
+    empty.className = 'empty-state';
+    empty.innerHTML = `
+      <div class="empty-icon">⬇</div>
+      <h3 class="empty-title">No active downloads</h3>
+      <p class="empty-desc">Saves in progress show here with live status. Finished videos land in <strong>Saved</strong>.</p>`;
+    const cta = document.createElement('button');
+    cta.className = 'empty-cta';
+    cta.textContent = '💾  View saved videos';
+    cta.addEventListener('click', () => { view = { type: 'saved' }; render(); });
+    empty.appendChild(cta);
+    c.appendChild(empty);
+    return;
+  }
+
+  const note = document.createElement('div');
+  note.className = 'saved-summary';
+  note.innerHTML = `<span class="saved-total">${active.length}</span><span class="saved-sub">download${active.length === 1 ? '' : 's'} in progress</span>`;
+  c.appendChild(note);
+
+  active.forEach((v) => {
+    const row = document.createElement('div');
+    row.className = 'card downloading';
+    row.dataset.id = v.id;
+    row.innerHTML = `
+      <div class="thumb">
+        <img loading="lazy" src="${v.thumbnail || ''}" alt="" />
+        <div class="dl-progress"><div class="dl-bar"></div></div>
+      </div>
+      <div class="card-info">
+        <div class="card-title"></div>
+        <div class="card-channel">⏳ Saving for offline…</div>
+      </div>`;
+    row.querySelector('.card-title').textContent = v.title || v.id;
+    c.appendChild(row);
+  });
+}
+
 // ============================================================================
 // Settings page
 // ============================================================================
-function videoTitleById(id) {
+function videoById(id) {
  for (const pl of data.playlists) {
    const v = pl.videos.find((x) => x.id === id);
-    if (v) return v.title;
+    if (v) return v;
  }
+  const q = data.queue.find((x) => x.id === id);
+  if (q) return q;
  const h = data.history.find((x) => x.id === id);
-  if (h) return h.title;
-  return id;
+  if (h) return h;
+  return null;
+}
+function videoTitleById(id) {
+  const v = videoById(id);
+  return v ? v.title : id;
 }

 async function renderSettings() {
@@ -820,13 +1169,55 @@ async function renderSettings() {
    .map((q) => `<option value="${q}"${data.settings.quality === q ? ' selected' : ''}>${q === 'auto' ? 'Auto' : q}</option>`)
    .join('');

+  const sel = (id, val, opts) => `<select id="${id}" class="set-select">` +
+    opts.map(([v, label]) => `<option value="${v}"${val === v ? ' selected' : ''}>${label}</option>`).join('') +
+    `</select>`;
+
  wrap.innerHTML = `
+    <div class="set-group">
+      <div class="set-group-title">Appearance &amp; accessibility</div>
+      <label class="set-row">
+        <span>Theme</span>
+        ${sel('setTheme', data.settings.theme, [['dark', 'Dark'], ['light', 'Light'], ['contrast', 'High contrast']])}
+      </label>
+      <label class="set-row">
+        <span>Font size</span>
+        ${sel('setFont', data.settings.fontScale, [['small', 'Small'], ['normal', 'Normal'], ['large', 'Large'], ['xl', 'Extra large']])}
+      </label>
+      <label class="set-row">
+        <span>Layout density</span>
+        ${sel('setDensity', data.settings.density, [['comfortable', 'Comfortable'], ['compact', 'Compact']])}
+      </label>
+      <label class="set-row">
+        <span>
+          Performance mode
+          <small>Turns off heavy visual effects (grain, blur, glows) for a faster, lighter UI.</small>
+        </span>
+        <input id="setPerf" type="checkbox" ${data.settings.perfMode ? 'checked' : ''} />
+      </label>
+      <label class="set-row">
+        <span>
+          Reduce motion
+          <small>Disables animations and transitions.</small>
+        </span>
+        <input id="setMotion" type="checkbox" ${data.settings.reduceMotion ? 'checked' : ''} />
+      </label>
+    </div>
+
    <div class="set-group">
      <div class="set-group-title">Playback</div>
      <label class="set-row">
        <span>Default quality</span>
        <select id="setQuality" class="set-select">${qOptions}</select>
      </label>
+      <label class="set-row">
+        <span>Repeat list when finished</span>
+        <input id="setRepeat" type="checkbox" ${data.settings.repeatMode === 'all' ? 'checked' : ''} />
+      </label>
+      <label class="set-row">
+        <span>Loop the current video</span>
+        <input id="setLoopOne" type="checkbox" ${data.settings.loopOne ? 'checked' : ''} />
+      </label>
      <label class="set-row">
        <span>Default volume</span>
        <input id="setVolume" type="range" min="0" max="1" step="0.01" value="${data.settings.volume}" />
@@ -880,6 +1271,15 @@ async function renderSettings() {

  c.appendChild(wrap);

+  // ---- Wire appearance / accessibility ----
+  $('setTheme').addEventListener('change', (e) => { data.settings.theme = e.target.value; applyAppearance(); persist(); });
+  $('setFont').addEventListener('change', (e) => { data.settings.fontScale = e.target.value; applyAppearance(); persist(); });
+  $('setDensity').addEventListener('change', (e) => { data.settings.density = e.target.value; applyAppearance(); persist(); });
+  $('setPerf').addEventListener('change', (e) => { data.settings.perfMode = e.target.checked; applyAppearance(); persist(); });
+  $('setMotion').addEventListener('change', (e) => { data.settings.reduceMotion = e.target.checked; applyAppearance(); persist(); });
+  $('setRepeat').addEventListener('change', (e) => { data.settings.repeatMode = e.target.checked ? 'all' : 'off'; updateLoopRepeatButtons(); persist(); });
+  $('setLoopOne').addEventListener('change', (e) => { data.settings.loopOne = e.target.checked; updateLoopRepeatButtons(); persist(); });
+
  // ---- Wire playback controls ----
  $('setQuality').addEventListener('change', (e) => {
    data.settings.quality = e.target.value;
@@ -986,18 +1386,42 @@ function renderCard(v, index, list) {
    </div>
    <button class="card-menu" title="Add to playlist">＋</button>`;
  card.querySelector('.card-title').textContent = v.title;
-  card.querySelector('.card-channel').textContent = v.channel || '';
+  const chEl = card.querySelector('.card-channel');
+  chEl.textContent = v.channel || '';
+  if (channelKeyOf(v)) {
+    chEl.classList.add('link');
+    chEl.title = 'View channel';
+    chEl.addEventListener('click', (e) => {
+      e.stopPropagation();
+      openChannel(channelKeyOf(v), v.channel);
+    });
+  }
  card.addEventListener('click', (e) => {
-    if (e.target.closest('.card-menu')) return;
-    playFromList(list, index);
+    if (e.target.closest('.card-menu') || e.target.closest('.card-del') || e.target.closest('.card-channel.link')) return;
+    playFromList(list, index, view.type === 'playlist' ? 'playlist:' + view.id : view.type);
  });
  card.querySelector('.card-menu').addEventListener('click', (e) => {
    e.stopPropagation();
    openCardMenu(v);
  });

-  // Drag-to-reorder in playlist view
-  if (view.type === 'playlist') {
+  // Per-item delete in playlist and queue views.
+  if (view.type === 'playlist' || view.type === 'queue') {
+    const del = document.createElement('button');
+    del.className = 'card-del';
+    del.title = view.type === 'queue' ? 'Remove from queue' : 'Remove from playlist';
+    del.textContent = '✕';
+    del.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (view.type === 'queue') { removeFromQueue(v.id); return; }
+      const pl = data.playlists.find((p) => p.id === view.id);
+      if (pl) { pl.videos = pl.videos.filter((x) => x.id !== v.id); persist(); render(); toast('Removed from playlist'); }
+    });
+    card.appendChild(del);
+  }
+
+  // Drag-to-reorder in playlist and queue views
+  if (view.type === 'playlist' || view.type === 'queue') {
    card.draggable = true;
    card.addEventListener('dragstart', () => {
      card.classList.add('dragging');
@@ -1019,10 +1443,18 @@ function renderCard(v, index, list) {
      const from = dragSource;
      const to = index;
      if (from === to || from < 0) return;
-      const pl = data.playlists.find((p) => p.id === view.id);
-      if (!pl) return;
-      const [moved] = pl.videos.splice(from, 1);
-      pl.videos.splice(to, 0, moved);
+      const arr = view.type === 'queue'
+        ? data.queue
+        : (data.playlists.find((p) => p.id === view.id) || {}).videos;
+      if (!arr) return;
+      const [moved] = arr.splice(from, 1);
+      arr.splice(to, 0, moved);
+      if (view.type === 'queue' && queueSource === 'queue') {
+        const playingId = current && current.meta && current.meta.id;
+        queue = data.queue.slice();
+        queueIndex = playingId ? queue.findIndex((x) => x.id === playingId) : queueIndex;
+        renderUpNext();
+      }
      persist();
      renderList();
    });
@@ -1087,6 +1519,35 @@ function openCardMenu(video) {
  const body = document.createElement('div');
  body.className = 'modal-list';

+  // Quick: add to queue
+  const queueBtn = document.createElement('button');
+  queueBtn.textContent = '▶ Add to queue';
+  queueBtn.onclick = () => { addToQueue(video); closeModal(); };
+  body.appendChild(queueBtn);
+
+  // Quick: save / remove offline
+  const saveBtn = document.createElement('button');
+  const isSaved = cachedIds.has(video.id);
+  saveBtn.textContent = isSaved ? '✓ Saved offline — remove' : '⬇ Save for offline';
+  saveBtn.onclick = async () => {
+    closeModal();
+    if (cachedIds.has(video.id)) {
+      try { await API.cacheDelete(video.id); } catch {}
+      cachedIds.delete(video.id);
+      markCardCacheState(video.id, 'none');
+      if (current && current.meta && current.meta.id === video.id) updateNowPlayingActions();
+      toast('Removed from offline cache');
+    } else {
+      preload(video);
+    }
+  };
+  body.appendChild(saveBtn);
+
+  const divider = document.createElement('div');
+  divider.className = 'modal-divider';
+  divider.textContent = 'Playlists';
+  body.appendChild(divider);
+
  data.playlists.forEach((pl) => {
    const has = pl.videos.some((x) => x.id === video.id);
    const btn = document.createElement('button');
@@ -1125,7 +1586,11 @@ function openCardMenu(video) {
 }

 function slim(v) {
-  return { id: v.id, title: v.title, channel: v.channel, duration: v.duration, thumbnail: v.thumbnail };
+  return {
+    id: v.id, title: v.title, channel: v.channel,
+    channelId: v.channelId || '', channelUrl: v.channelUrl || '',
+    duration: v.duration, thumbnail: v.thumbnail,
+  };
 }

 function newPlaylist(addVideo) {
@@ -1296,11 +1761,22 @@ document.querySelectorAll('.chip').forEach((c) => {
  els.addPlaylistBtn.addEventListener('click', () => {
    if (current && current.meta) openCardMenu(current.meta);
  });
+  els.queueBtn.addEventListener('click', () => {
+    if (current && current.meta) addToQueue(current.meta);
+  });
+  // Now-playing channel name → channel view
+  els.npChannel.addEventListener('click', () => {
+    if (current && current.meta && channelKeyOf(current.meta)) {
+      openChannel(channelKeyOf(current.meta), current.meta.channel);
+    }
+  });

  // Controls
  els.playBtn.addEventListener('click', () => Player.toggle());
  els.nextBtn.addEventListener('click', playNext);
  els.prevBtn.addEventListener('click', playPrev);
+  els.loopBtn.addEventListener('click', toggleLoopOne);
+  els.repeatBtn.addEventListener('click', toggleRepeat);
  els.fsBtn.addEventListener('click', () => {
    const stage = els.video.parentElement;
    if (document.fullscreenElement) document.exitFullscreen();
@@ -1365,6 +1841,9 @@ document.querySelectorAll('.chip').forEach((c) => {
    else if (e.code === 'ArrowLeft') Player.seek(Math.max(0, Player.master.currentTime - 5));
    else if (e.key === 'f') els.fsBtn.click();
    else if (e.key === 'm') els.muteBtn.click();
+    else if (e.key === 'l') toggleLoopOne();
+    else if (e.key === 'r') toggleRepeat();
+    else if (e.key === 'q') { if (current && current.meta) addToQueue(current.meta); }
    else if (e.key === '?') toggleShortcutHelp();
    else if (e.key === 'Escape' && !$('shortcutHelp').classList.contains('hidden')) { $('shortcutHelp').classList.add('hidden'); }
  });
@@ -1382,7 +1861,7 @@ document.querySelectorAll('.chip').forEach((c) => {

  // Drag-to-reorder: prevent default on cards container
  els.cards.addEventListener('dragover', (e) => {
-    if (view.type === 'playlist') e.preventDefault();
+    if (view.type === 'playlist' || view.type === 'queue') e.preventDefault();
  });
 }

@@ -1399,13 +1878,17 @@ async function boot() {
      data = {
        playlists: loaded.playlists || [],
        history: loaded.history || [],
+        queue: loaded.queue || [],
        resumePositions: loaded.resumePositions || {},
-        settings: { quality: 'auto', volume: 1, audioOnly: false, autoPreload: true, ...(loaded.settings || {}) },
+        settings: { ...DEFAULT_SETTINGS, ...(loaded.settings || {}) },
      };
    }
  } catch {
    // first run / bridge not ready — start with defaults
  }
+  applyAppearance();
+  updateLoopRepeatButtons();
+  updateQueueBadge();
  els.volume.value = String(data.settings.volume ?? 1);
  els.quality.value = data.settings.quality || 'auto';
  els.audioOnlyToggle.checked = !!data.settings.audioOnly;