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

Chapter picker: tap the chapter badge to jump to any chapter

Browse Source 
The CH badge by the scrubber is now a button opening a list of every chapter
(number, title, start time); the playing one is highlighted and scrolled into
view, a tap seeks there (and resumes if paused). Works with shared chapters and
YouTube's.
This commit is contained in:
Jonathan Sykes
2026-10-03 07:50:15 +08:00
parent ea9e11d054
commit 5d94acf3f0
4 changed files with 62 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/styles.css
View File

@@ -4314,3 +4314,20 @@ html.ios-nozoom, html.ios-nozoom body { touch-action: manipulation; }
/* Classic-layout SVG nav icons: `hidden` is not reliably honoured on SVG, so
hide them explicitly everywhere; theme-classic.css shows them in Classic. */
.classic-nav-icon { display: none; }
/* Chapter picker (tap the chapter badge) */
.ch-picker-src { margin: 0 0 8px; font-size: 12.5px; color: var(--text-dim); }
.ch-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: min(60vh, 460px); overflow-y: auto; margin: 0 -4px; padding: 2px 4px; }
.ch-pick {
display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 10px;
width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; text-align: left; cursor: pointer;
border: 1px solid transparent; background: var(--bg-2); color: var(--text); font: 600 14px var(--ui);
transition: border-color .15s, background .15s;
}
.ch-pick:hover { border-color: var(--accent); }
.ch-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ch-pick-n { font: 600 12px var(--mono, ui-monospace, monospace); color: var(--text-dim); }
.ch-pick-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-pick-t { font: 500 12.5px var(--mono, ui-monospace, monospace); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ch-pick.on { background: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ch-pick.on .ch-pick-n, .ch-pick.on .ch-pick-t { color: var(--accent-bright); }