Changeset c0e463b in Klonkt for test/mixtape-ui.test.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:

• test/mixtape-ui.test.js (modified) (1 diff)

test/mixtape-ui.test.js

@@ -210 +210 @@
   assert.match(speler, /if \(\(queue\.length === 1 \|\| laatsteVanDeBand\) && ms && ms\.readyState === 'open'\)/);
 });
+
+test('de speler-UI schakelt mee in bandmodus (shaer-tmyn)', () => {
+  const speler = fs.readFileSync('src/assets/js/audio-player.js', 'utf8');
+
+  // 1. De tracklijst blijft staan maar is geen keuzelijst meer.
+  assert.match(speler, /sheetQueueList\.classList\.toggle\('is-tape', tapeMode\);\s*\n\s*if \(tapeMode\) return;/,
+    'zonder deze return kun je op een cassette alsnog naar nummer zeven springen');
+
+  // 2. Vorige/volgende worden terugspoelen/vooruitspoelen, op EEN plek geregeld.
+  assert.match(speler, /function zetKnopStanden\(\)/);
+  assert.match(speler, /'Vooruitspoelen' : 'Terugspoelen'/);
+  // en vasthouden spoelt door
+  assert.match(speler, /addEventListener\('pointerdown', \(\) => \{ if \(tapeMode\) startWind/);
+
+  // 3. De spoellus staat in de speler, niet meer in de module -- anders lopen
+  //    twee kopieen van dezelfde versnelling uit elkaar.
+  assert.match(speler, /function startWind\(richting\)/);
+  const mod = fs.readFileSync('src/assets/js/mod/tape.js', 'utf8');
+  assert.doesNotMatch(mod, /VERSNELLING/, 'de versnelling hoort niet meer in de module te staan');
+  assert.match(mod, /p\.startWind\(richting\)/, 'de cassette bedient de gedeelde lus');
+});
+
+test('de bandteller komt uit de trackduren, niet uit de buffer', () => {
+  const speler = fs.readFileSync('src/assets/js/audio-player.js', 'utf8');
+  assert.match(speler, /function bandDuur\(\)/);
+  assert.match(speler, /function bandOffset\(i\)/);
+  // Een som met gaten is een verzonnen getal: ontbreekt er een duur, dan valt
+  // hij terug in plaats van te gokken.
+  assert.match(speler, /if \(d <= 0\) return null;/);
+
+  // En de duur moet mee in de wachtrij, anders kan de speler het niet weten.
+  const embed = fs.readFileSync('src/services/AudioEmbedService.js', 'utf8');
+  assert.match(embed, /duration: Number\(t\.duration\) \|\| 0,/,
+    'zonder dit las de teller de lengte van wat toevallig gebufferd was');
+});