From d9371fdea4e2aa4966fcb219dbc87aacd77362d0 Mon Sep 17 00:00:00 2001 From: Claude Worker Date: Tue, 30 Jun 2026 17:02:25 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20fix=20portrait=20mode=20design=20in=20p?= =?UTF-8?q?wa=20=E2=80=94=20YouTube-style=20bottom=20bar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Task #46 completed by ClaudeQueue ClaudeQueue --- frontend/app.js | 26 +++++++--- frontend/index.html | 30 +++++++++++ frontend/styles.css | 119 ++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 159 insertions(+), 16 deletions(-) diff --git a/frontend/app.js b/frontend/app.js index 950f283..2217bce 100755 --- a/frontend/app.js +++ b/frontend/app.js @@ -367,11 +367,12 @@ async function preload(video, { quiet = false } = {}) { // 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); + const badge = $('navDlCount'); + if (badge) { badge.textContent = String(n); badge.classList.toggle('hidden', n === 0); } + // Mirror to bottom-nav badge + const bb = $('bnDlCount'); + if (bb) { bb.textContent = String(n); bb.classList.toggle('hidden', n === 0); } } // Auto-preload every video in a playlist (respecting the setting). @@ -859,10 +860,12 @@ function playFromList(list, index, source = '') { // ---------- Temporary queue ---------- function updateQueueBadge() { + const count = data.queue.length; const b = $('navQueueCount'); - if (!b) return; - b.textContent = String(data.queue.length); - b.classList.toggle('hidden', data.queue.length === 0); + if (b) { b.textContent = String(count); b.classList.toggle('hidden', count === 0); } + // Mirror to bottom-nav badge + const bb = $('bnQueueCount'); + if (bb) { bb.textContent = String(count); bb.classList.toggle('hidden', count === 0); } } function addToQueue(video, { quiet = false } = {}) { if (!video || !video.id) return; @@ -1023,6 +1026,10 @@ function renderSidebar() { document.querySelectorAll('.nav-item').forEach((b) => { b.classList.toggle('active', b.dataset.view === view.type); }); + // Keep bottom-nav in sync with sidebar nav active state + document.querySelectorAll('.bottom-nav-btn').forEach((b) => { + b.classList.toggle('active', b.dataset.view === view.type); + }); updateQueueBadge(); updateDownloadBadge(); } @@ -2083,6 +2090,11 @@ function wireUI() { b.addEventListener('click', () => { view = { type: b.dataset.view }; render(); }); }); + // Bottom-nav (portrait PWA) — same view switching as sidebar nav + document.querySelectorAll('.bottom-nav-btn').forEach((b) => { + b.addEventListener('click', () => { view = { type: b.dataset.view }; render(); }); + }); + els.newPlaylistBtn.addEventListener('click', () => newPlaylist(null)); // Landing-hero quick-search chips — rotate periodically diff --git a/frontend/index.html b/frontend/index.html index 93378d0..cfae38d 100755 --- a/frontend/index.html +++ b/frontend/index.html @@ -250,6 +250,36 @@
+ + +