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

Merge Queue and Playlist into one Add button and put Service mode in the common actions

Browse Source
This commit is contained in:
Claude
2026-10-01 21:17:37 +00:00
parent 859ecd2255
commit 36fc5ff9e4
3 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/app.js
View File

@@ -2602,6 +2602,29 @@ function openMoreControls() {
showModal('More controls', list, [{ label: 'Done', onClick: closeModal }]);
}
// "＋ Add": one button, then a small choice between the queue and a playlist.
function openAddChoice() {
if (!current || !current.meta) return;
const video = current.meta;
const list = document.createElement('div');
list.className = 'more-list';
const row = (icon, title, sub, fn) => {
const r = document.createElement('button');
r.type = 'button';
r.className = 'more-row';
r.innerHTML = '<span class="more-ico"></span><span class="more-txt"><b></b><small></small></span><span class="more-go">›</span>';
r.querySelector('.more-ico').textContent = icon;
r.querySelector('b').textContent = title;
r.querySelector('small').textContent = sub;
r.onclick = () => { closeModal(); setTimeout(fn, 0); };
list.appendChild(r);
};
row('▶', 'Add to queue', 'Play it next in this session', () => addToQueue(video));
row('☰', 'Add to playlist', 'Save it to one of your playlists', () => openCardMenu(video));
showModal('Add “' + (video.title || 'video').slice(0, 40) + '”', list, [{ label: 'Cancel', onClick: closeModal }]);
}
// "More actions" sheet: the everyday four stay on the page, the rest live here.
// Each row drives the original (hidden) button, so handlers and the hidden /
// disabled state those buttons already manage keep working.
@@ -9484,6 +9507,8 @@ document.querySelectorAll('.chip').forEach((c) => {
}
});
if ($('moreBtn')) $('moreBtn').addEventListener('click', openMoreActions);
if ($('addBtn')) $('addBtn').addEventListener('click', openAddChoice);
if ($('serviceBtn')) $('serviceBtn').addEventListener('click', () => enterServiceMode());
if ($('ctlMoreBtn')) $('ctlMoreBtn').addEventListener('click', openMoreControls);
if ($('exportBtn')) $('exportBtn').addEventListener('click', () => { if (current && current.meta) exportToDevice(current.meta); });
els.addPlaylistBtn.addEventListener('click', () => {

6
frontend/index.html
View File

@@ -225,11 +225,13 @@
<div class="np-avail hidden" id="npAvail" aria-live="polite"></div>
</div>
<div class="np-actions">
<button id="queueBtn" class="np-btn" title="Add to the temporary queue">＋ Queue</button>
<button id="addBtn" class="np-btn" title="Add to the queue or to a playlist">＋ Add</button>
<button id="saveBtn" class="np-btn" title="Save this video for offline playback">⬇ Save</button>
<button id="exportBtn" class="np-btn" title="Save this video to your gallery, Files app or Downloads folder — works while streaming too">🖼 Gallery</button>
<button id="addPlaylistBtn" class="np-btn" title="Add to a playlist">＋ Playlist</button>
<button id="serviceBtn" class="np-btn" title="Service mode — set-list view with the screen kept awake">🎤 Service</button>
<div id="npMoreHost" class="np-more-host" hidden>
<button id="queueBtn" class="np-btn" title="Add to the temporary queue">＋ Queue</button>
<button id="addPlaylistBtn" class="np-btn" title="Add to a playlist">＋ Playlist</button>
<button id="editBtn" class="np-btn" title="Cut parts out and save a custom edited copy">✂ Edit &amp; download</button>
<button id="shareMomentBtn" class="np-btn" title="Share a link or GIF of this exact moment">🔗 Share moment</button>
<button id="externalBtn" class="np-btn" title="Play this in VLC, MX Player or another app">📺 Open in…</button>

11
frontend/refresh.css
View File

@@ -312,7 +312,7 @@
@media (min-width: 900px) {
#listActions button:not(.la-primary):not(.la-main):not(.la-icon) { flex: 0 0 auto; min-width: 124px; }
}
#nowPlayingMeta .np-actions .np-btn:not(#queueBtn):not(#saveBtn):not(#exportBtn):not(#addPlaylistBtn) {
#nowPlayingMeta .np-actions .np-btn:not(#addBtn):not(#serviceBtn):not(#queueBtn):not(#saveBtn):not(#exportBtn):not(#addPlaylistBtn) {
flex: 0 0 calc(50% - 4px);
height: 42px;
padding: 0 10px;
@@ -321,7 +321,7 @@
overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 900px) {
#nowPlayingMeta .np-actions .np-btn:not(#queueBtn):not(#saveBtn):not(#exportBtn):not(#addPlaylistBtn) { flex: 0 0 auto; min-width: 140px; }
#nowPlayingMeta .np-actions .np-btn:not(#addBtn):not(#serviceBtn):not(#queueBtn):not(#saveBtn):not(#exportBtn):not(#addPlaylistBtn) { flex: 0 0 auto; min-width: 140px; }
}
/* Deck tabs */
@@ -527,3 +527,10 @@
#controls .deck-vol #muteBtn svg { fill: currentColor; stroke: currentColor; stroke-width: 1.8; }
#controls .deck-vol #muteBtn svg path:not(.spk) { fill: none; }
#controls .deck-vol #muteBtn.muted { color: var(--accent-bright); }
#nowPlayingMeta .np-actions #addBtn,
#nowPlayingMeta .np-actions #serviceBtn {
order: -1; flex: 1 1 calc(25% - 8px); min-width: 0; height: 52px; padding: 0 4px; justify-content: center;
border-radius: 16px; color: var(--text); background: var(--bg-3); font-weight: 700; font-size: 12.5px; white-space: nowrap;
}
@media (max-width: 380px) { #nowPlayingMeta .np-actions #addBtn, #nowPlayingMeta .np-actions #serviceBtn { flex-basis: calc(50% - 8px); } }