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

Label the fullscreen button, add a mini fullscreen icon and show A-B markers beside it

Browse Source
This commit is contained in:
Claude
2026-10-01 21:09:00 +00:00
parent 25e7a28b6a
commit b3a43c66db
3 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app.js
View File

@@ -9512,6 +9512,7 @@ document.querySelectorAll('.chip').forEach((c) => {
if ($('modeBtn')) $('modeBtn').addEventListener('click', cyclePlayMode);
els.loopBtn.addEventListener('click', toggleLoopOne);
els.repeatBtn.addEventListener('click', toggleRepeat);
if ($('fsMini')) $('fsMini').addEventListener('click', () => els.fsBtn.click());
els.fsBtn.addEventListener('click', () => {
const stage = els.video.parentElement;
const video = els.video;
@@ -9918,6 +9919,8 @@ function updateAbUI() {
if (bBtn) bBtn.classList.toggle('active', bSet);
if (clrBtn) clrBtn.classList.toggle('hidden', !(aSet && bSet));
if (ind) ind.classList.toggle('hidden', !aSet && !bSet);
const q = document.querySelector('.dk-quick');
if (q) q.classList.toggle('ab-on', aSet || bSet);
const aLbl = $('abALabel'), bLbl = $('abBLabel');
if (aLbl) { aLbl.textContent = 'A: ' + (aSet ? fmtTime(abA) : '--'); aLbl.classList.toggle('active', aSet); }
if (bLbl) { bLbl.textContent = 'B: ' + (bSet ? fmtTime(abB) : '--'); bLbl.classList.toggle('active', bSet); }

9
frontend/index.html
View File

@@ -168,6 +168,7 @@
</div>
</div>
<span id="durTime" class="time">0:00</span>
<button id="fsMini" class="fs-mini" type="button" title="Fullscreen" aria-label="Fullscreen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg></button>
</div>
<button id="waveLoud" class="wave-loud hidden" type="button">⚡ Jump to the loudest part</button>
<div class="deck-main">
@@ -182,13 +183,13 @@
<input id="volume" type="range" min="0" max="1" step="0.01" value="1" aria-label="Volume" />
</div>
<div class="dk-quick">
<button id="fsBtn" class="ctrl" title="Fullscreen">⛶</button>
<button id="ctlMoreBtn" class="dk-more" type="button" aria-haspopup="dialog"><span>⋯ More controls</span><small>Speed · Quality · A-B · Sleep · EQ</small></button>
</div>
<div id="dkMoreHost" hidden>
<button id="fsBtn" class="ctrl" title="Fullscreen" aria-label="Fullscreen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg><span class="fs-label">Fullscreen</span></button>
<button id="abABtn" class="ctrl ab-ctrl" title="Set A-B loop start [A]">A</button>
<button id="abBBtn" class="ctrl ab-ctrl" title="Set A-B loop end [B]">B</button>
<button id="abClearBtn" class="ctrl ab-ctrl hidden" title="Clear A-B loop">↺</button>
<button id="ctlMoreBtn" class="dk-more" type="button" aria-haspopup="dialog"><span>⋯ More<i class="mc-rest"> controls</i></span><small>Speed · Quality · A-B · Sleep · EQ</small></button>
</div>
<div id="dkMoreHost" hidden>
<button id="rememberPosBtn" class="ctrl" title="Remember playback position for this song (per playlist)">📍</button>
<button id="sleepTimerBtn" class="ctrl" title="Sleep timer">⏱</button>
<button id="transitionBtn" class="ctrl" title="Between songs in a playlist: Normal — click to change">↦</button>

26
frontend/refresh.css
View File

@@ -486,3 +486,29 @@
#controls .dk-quick #fsBtn { display: grid; }
#controls .deck-main #modeBtn { order: 1; }
#controls .deck-main #muteBtn { order: 5; }
/* Fullscreen: labelled in the quick row, icon-only once A-B markers appear */
#controls .dk-quick .ctrl { display: none; }
#controls .dk-quick #fsBtn { display: flex; flex: 0 0 auto; width: auto; padding: 0 16px; gap: 8px; align-items: center; justify-content: center; }
#controls .dk-quick #fsBtn svg { width: 22px; height: 22px; }
#controls .dk-quick .fs-label { font: 700 13px var(--ui); }
#controls .dk-quick.ab-on #fsBtn { width: 56px; padding: 0; }
#controls .dk-quick.ab-on .fs-label { display: none; }
#controls .dk-quick.ab-on #abABtn,
#controls .dk-quick.ab-on #abBBtn { display: grid; flex: 0 0 56px; width: 56px; font: 800 18px var(--ui); }
#controls .dk-quick.ab-on #abClearBtn:not(.hidden) { display: grid; flex: 0 0 56px; width: 56px; }
#controls .dk-quick.ab-on .dk-more small { display: none; }
#controls .fs-mini {
flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
border-radius: 9px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
}
#controls .fs-mini:hover { color: var(--accent-bright); background: var(--bg-3); }
#controls .fs-mini svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 380px) { #controls .dk-quick.ab-on .dk-more span { font-size: 12px; } }
#controls .dk-quick .fs-label { text-transform: none; letter-spacing: 0; }
#controls .dk-more i { font-style: normal; }
#controls .dk-quick.ab-on .mc-rest { display: none; }
#controls .dk-quick.ab-on .dk-more { padding: 6px 10px; align-items: center; text-align: center; }
#controls .dk-quick.ab-on .dk-more span { white-space: nowrap; }
#controls .dk-quick.ab-on #abABtn, #controls .dk-quick.ab-on #abBBtn,
#controls .dk-quick.ab-on #abClearBtn:not(.hidden), #controls .dk-quick.ab-on #fsBtn { flex-basis: 52px; width: 52px; height: 52px; }