Changeset c0e463b in Klonkt for src/assets/js/mod/tape.js

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/js/mod/tape.js (modified) (4 diffs)

src/assets/js/mod/tape.js

@@ -14 +14 @@
  * die tijdlijn. Vandaar seekBy() en niet next()/prev() -- springen per nummer
  * is een playlistgebaar, en dan is dit een lijst met een cassetteplaatje.
+ *
+ * DE SPOELLUS STAAT IN DE SPELER, niet hier: sinds de speler onderin dezelfde
+ * spoelknoppen heeft zou dezelfde versnelling op twee plekken staan. Deze
+ * module bedient hem en tekent het jasje.
  *
  * WAAROM ER GEPOLLD WORDT. audio-player.js zendt geen gebeurtenissen uit -- het
@@ -56 +60 @@
   tape.classList.toggle('is-playing', draait);
   tape.classList.toggle('is-loaded', i >= 0);
+  // Spoelt de SPELER (bijvoorbeeld via zijn eigen knoppen onderin), dan hoort
+  // deze cassette dat ook te laten zien.
+  const windt = i >= 0 && !!p && p.isWinding && p.isWinding();
+  if (!windt) tape.classList.remove('is-winding', 'is-winding-back');
+  else tape.classList.add('is-winding');
 
   const knop = tape.querySelector('[data-tape-play]');
@@ -91 +100 @@
  * schermlezer, want vasthouden is met een spatiebalk geen gebaar.
  */
-const START_SNELHEID = 4;    // maal de normale snelheid bij het indrukken
-const MAX_SNELHEID = 16;
-const VERSNELLING = 1.35;    // per stap
-const STAP_MS = 120;
 const TIK_STAP_S = 5;        // een losse klik
 
-let winder = null;
-
 function stopWinden(tape) {
-  if (winder) { clearInterval(winder.timer); winder = null; }
+  const p = speler();
+  if (p && p.stopWind) p.stopWind();
   if (tape) tape.classList.remove('is-winding', 'is-winding-back');
 }
@@ -106 +110 @@
 function startWinden(tape, richting) {
   const p = speler();
-  if (!p || huidigeIndex(tape) < 0) return;
-  stopWinden(tape);
-  let snelheid = START_SNELHEID;
-  let vorigePositie = null;
-  let stil = 0;
+  if (!p || !p.startWind || huidigeIndex(tape) < 0) return;
+  // DE LUS STAAT IN DE SPELER. Hij stond hier, en toen kreeg de speler zelf ook
+  // spoelknoppen -- twee kopieen van dezelfde versnelling die uit elkaar lopen
+  // zodra iemand aan een getal draait. Deze module zet alleen nog het jasje:
+  // welke spoelen draaien en hoe hard.
+  p.startWind(richting);
   tape.classList.add('is-winding');
   if (richting < 0) tape.classList.add('is-winding-back');
-  const timer = setInterval(() => {
-    snelheid = Math.min(MAX_SNELHEID, snelheid * VERSNELLING);
-    p.seekBy(richting * snelheid * (STAP_MS / 1000));
-    tekenBand(tape);
-    // AAN HET EIND VAN DE BAND STOPPEN MET SPOELEN. De speler klemt de positie
-    // af, dus daar gebeurt niets meer -- maar de spoelen bleven wel doordraaien
-    // en de knop bleef oplichten, alsof er nog band was. Beweegt de teller twee
-    // rondes niet, dan zijn we bij de kop of de staart.
-    const nu = p.tapeTijden ? p.tapeTijden().cur : null;
-    if (nu !== null && vorigePositie !== null && Math.abs(nu - vorigePositie) < 0.05) {
-      if (++stil >= 2) { stopWinden(tape); return; }
-    } else stil = 0;
-    vorigePositie = nu;
-  }, STAP_MS);
-  winder = { timer, tape };
 }