josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fix portrait mode design in pwa — YouTube-style bottom bar

Browse Source 
Task #46 completed by ClaudeQueue

ClaudeQueue
This commit is contained in:
Claude Worker
2026-06-30 17:02:25 +00:00
parent fc61defba5
commit d9371fdea4
3 changed files with 159 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/app.js
View File

@@ -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