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

Merge shuffle, repeat list and loop one into one playback mode button

Browse Source
This commit is contained in:
Claude
2026-10-01 21:03:48 +00:00
parent f9cb7edeb2
commit 25e7a28b6a
3 changed files with 64 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/app.js
View File

@@ -6717,7 +6717,7 @@ function applyShuffle() {
queue = queue.slice(0, queueIndex + 1).concat(upcoming);
}
function toggleShuffle() {
function toggleShuffle({ quiet = false } = {}) {
data.settings.shuffle = !data.settings.shuffle;
if (data.settings.shuffle) {
applyShuffle();
@@ -6731,7 +6731,7 @@ function toggleShuffle() {
persist();
updateLoopRepeatButtons();
renderUpNext();
toast(data.settings.shuffle ? 'Shuffle on' : 'Shuffle off');
if (!quiet) toast(data.settings.shuffle ? 'Shuffle on' : 'Shuffle off');
}
// ---------- Temporary queue ----------
@@ -6854,10 +6854,51 @@ function toggleRepeat() {
updateLoopRepeatButtons();
toast(data.settings.repeatMode === 'all' ? 'Repeating list' : 'Repeat off');
}
// One button for shuffle / repeat list / loop one. Cycle:
// off → repeat list → shuffle → shuffle + repeat → loop this video → off.
const PLAY_MODES = [
{ name: 'In order', sub: 'Plays the list once, then stops' },
{ name: 'Repeat list', sub: 'Starts over when the list ends' },
{ name: 'Shuffle', sub: 'Random order' },
{ name: 'Shuffle + repeat', sub: 'Random order, forever' },
{ name: 'Loop this video', sub: 'Plays the same video again and again' },
];
const MODE_ICONS = [
'<path d="M17 2l4 4-4 4M3 12v-2a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 12v2a4 4 0 0 1-4 4H3"/>',
'<path d="M17 2l4 4-4 4M3 12v-2a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 12v2a4 4 0 0 1-4 4H3"/>',
'<path d="M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/>',
'<path d="M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/>',
'<path d="M17 2l4 4-4 4M3 12v-2a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 12v2a4 4 0 0 1-4 4H3M11 10.2l1.6-.9v5.4"/>',
];
function playModeIndex() {
const st = data.settings;
if (st.loopOne) return 4;
const rep = st.repeatMode === 'all';
return st.shuffle ? (rep ? 3 : 2) : (rep ? 1 : 0);
}
function cyclePlayMode() {
const next = (playModeIndex() + 1) % PLAY_MODES.length;
const wantShuffle = next === 2 || next === 3;
data.settings.loopOne = next === 4;
data.settings.repeatMode = next === 1 || next === 3 ? 'all' : 'off';
if (!!data.settings.shuffle !== wantShuffle) toggleShuffle({ quiet: true });
persist();
updateLoopRepeatButtons();
toast(PLAY_MODES[next].name, { duration: 1800 });
}
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');
if (els.shuffleBtn) els.shuffleBtn.classList.toggle('active', !!data.settings.shuffle);
const mb = $('modeBtn');
if (mb) {
const i = playModeIndex();
mb.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${MODE_ICONS[i]}</svg>`;
mb.classList.toggle('active', i > 0);
mb.dataset.badge = i === 3 ? '∞' : '';
mb.title = `${PLAY_MODES[i].name} — ${PLAY_MODES[i].sub}. Tap to change.`;
mb.setAttribute('aria-label', 'Playback mode: ' + PLAY_MODES[i].name);
}
}
function playPrev() {
if (Party.intercept('prev')) return;
@@ -9467,7 +9508,8 @@ document.querySelectorAll('.chip').forEach((c) => {
els.playBtn.addEventListener('click', () => Player.toggle());
els.nextBtn.addEventListener('click', playNext);
els.prevBtn.addEventListener('click', playPrev);
els.shuffleBtn.addEventListener('click', toggleShuffle);
els.shuffleBtn.addEventListener('click', () => toggleShuffle());
if ($('modeBtn')) $('modeBtn').addEventListener('click', cyclePlayMode);
els.loopBtn.addEventListener('click', toggleLoopOne);
els.repeatBtn.addEventListener('click', toggleRepeat);
els.fsBtn.addEventListener('click', () => {