Changeset c0e463b in Klonkt for src/assets/css/style.css

Timestamp:

08/22/2026 11:05:19 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

5e72413

Parents:

4fbe2c1

Message:

Speler-UI in bandmodus: spoelknoppen, eerlijke teller, lijst zonder keuze (shaer-tmyn)

Speelt er een bandje, dan hoort de speler onderin zich als een cassettedeck te
gedragen en niet als een playlist-speler. Drie van de vier stappen uit de bead;
de vierde (seek over de hele tijdlijn) staat er los van, want die raakt
loadTrack en de keten.

• De tracklijst blijft staan maar is geen keuzelijst: renderQueue hangt in bandmodus geen klik meer op de items, en een CSS-klasse haalt de belofte weg dat het kan. Op een cassette spring je niet naar nummer zeven.
• Vorige/volgende worden terugspoelen/vooruitspoelen: ander teken, ander woord, en vasthouden spoelt door. Een korte klik spoelt vijf seconden, voor toetsenbord en schermlezer.
• De spoellus is VERHUISD naar de speler. Hij stond in mod/tape.js, en met spoelknoppen op twee plekken zouden twee kopieen van dezelfde versnelling uit elkaar lopen zodra iemand aan een getal draait. De cassette in de post bedient nu dezelfde lus en tekent alleen nog het jasje.

En de teller is eerlijk geworden. Die kwam uit chain[last].end, dus uit de
lengte van wat toevallig gebufferd was: 2:05 met een nummer geladen, 4:07 met
drie, terwijl de band 6:13 duurt. Erger nog, sprong je naar nummer drie dan
begon de keten daar opnieuw op nul en stond de teller weer vooraan. Nu telt hij
bandOffset(nummer) + positie in dat nummer, uit de trackduren -- die daarvoor
in de wachtrij-JSON moesten. Ontbreekt er een duur, dan valt hij terug: een som
met gaten is een verzonnen getal.

Nagemeten op dev: totaal 6:13 meteen bij de eerste seconde (klopt met de
PT373S op het AP-object), vier knoppen op Terug-/Vooruitspoelen, drie items in
de lijst met pointer-events none en het lopende nummer gemarkeerd, en spoelen
via de spelerknop loopt door de band heen.

audio-player v38, MOD_V 55, style.css v108.

Co-Authored-By: Claude Opus 5 <noreply@…>

File:

• src/assets/css/style.css (modified) (1 diff)

src/assets/css/style.css

@@ -5235 +5235 @@
     background: color-mix(in srgb, var(--accent) 12%, transparent);
 }
+
+
+/* ── De speler in bandmodus ────────────────────────────────────────────
+   Zelfde speler, ander gedrag: op een cassette kies je geen nummer. De lijst
+   blijft staan zodat je ziet wat erop staat, maar zonder de opmaak die belooft
+   dat je erin kunt prikken. */
+.audio-sheet-queue-list.is-tape .audio-sheet-queue-item {
+    cursor: default;
+    pointer-events: none;
+}
+.audio-sheet-queue-list.is-tape .audio-sheet-queue-item:hover {
+    background: none;
+}
+/* Het lopende nummer blijft wel gemarkeerd -- dat is de enige plek waar je op
+   een bandje leest waar je bent. */
+.audio-sheet-queue-list.is-tape .audio-sheet-queue-item.is-current {
+    opacity: 1;
+}
+/* Spoelknoppen mogen niet als "volgende" voelen: vasthouden hoort geen tekst te
+   selecteren of de pagina te laten zoomen. */
+.audio-btn.is-wind {
+    touch-action: manipulation;
+    user-select: none;
+}