diff --git a/BACKLOG.md b/BACKLOG.md index eff3c20..c187d62 100644 --- a/BACKLOG.md +++ b/BACKLOG.md @@ -25,7 +25,7 @@ bottom as they come up. ## Features - [x] Drag-to-reorder videos within a playlist. - [x] "Up next" queue panel showing the autoplay queue. -- [ ] Persistent mini now-playing bar when browsing other views. +- [x] Persistent mini now-playing bar when browsing other views. - [ ] Cache size cap in Settings (auto-evict oldest past a limit). - [ ] Export / import playlists as JSON. - [ ] More / trending quick-search chips on the hero, rotated. diff --git a/frontend/app.js b/frontend/app.js index 69bcdc1..845c802 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -263,6 +263,7 @@ const Player = { els.npChannel.textContent = current.meta.channel || ''; updateNowPlayingActions(); markPlayingCard(); + showMiniBar(); // Restore saved playback position const id = current.meta.id; if (data.resumePositions[id] && data.resumePositions[id] > 1) { @@ -526,6 +527,7 @@ function wirePlayerEvents() { function updatePlayBtn() { els.playBtn.textContent = Player.master.paused ? '▶' : '⏸'; + $('miniPlayBtn').textContent = Player.master.paused ? '▶' : '⏸'; } // Reflect cache state on the now-playing Save button. function updateNowPlayingActions() { @@ -555,6 +557,30 @@ function updateProgress() { els.curTime.textContent = fmtTime(cur); els.durTime.textContent = fmtTime(dur); if (dur) els.seek.value = String((cur / dur) * 1000); + updateMiniBar(); +} + +// ============================================================================ +// Mini now-playing bar +// ============================================================================ +function showMiniBar() { + if (!current || !current.meta) return; + $('miniTitle').textContent = current.meta.title; + $('miniChannel').textContent = current.meta.channel || ''; + $('miniBar').classList.remove('hidden'); + updateMiniBar(); +} +function updateMiniBar() { + if (!current || !current.meta) return; + const cur = Player.master.currentTime || 0; + const dur = Player.master.duration || 0; + $('miniTime').textContent = fmtTime(cur); + if (dur > 0) { + $('miniProgressFill').style.width = Math.min(100, (cur / dur) * 100) + '%'; + } +} +function hideMiniBar() { + $('miniBar').classList.add('hidden'); } // ============================================================================ @@ -1236,6 +1262,15 @@ function wireUI() { $('modal').addEventListener('click', (e) => { if (e.target.id === 'modal') closeModal(); }); + // Mini now-playing bar + $('miniPlayBtn').addEventListener('click', (e) => { e.stopPropagation(); Player.toggle(); }); + $('miniBar').addEventListener('click', () => { + hideMiniBar(); + // Scroll the player into view if needed + els.playerPane.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); + }); + $('miniCloseBtn').addEventListener('click', (e) => { e.stopPropagation(); hideMiniBar(); }); + // Drag-to-reorder: prevent default on cards container els.cards.addEventListener('dragover', (e) => { if (view.type === 'playlist') e.preventDefault(); diff --git a/frontend/index.html b/frontend/index.html index cda2498..83696a3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -173,6 +173,20 @@
+ + +