Changeset e679bce in Klonkt for test/mixtape-ui.test.js

Timestamp:

08/22/2026 09:54:51 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

8bb3b09

Parents:

16fd4fe

Message:

Het bandje speelt als bandje: een cassette, een object, spoelen in seconden

Robins correctie (21-8): vooruit en achteruit deden hier next()/prev(), en dat
is een playlistgebaar. Dan is het een lijst met een cassetteplaatje erboven.
Een cassette kent geen "volgend nummer" -- je houdt de knop ingedrukt, de band
loopt door, en je laat los waar je bent.

Dat kan omdat audio-player.js een wachtrij al in EEN doorlopende
MediaSource-tijdlijn giet: "een trackwissel is een positie, geen omschakeling".
Een bandje IS die tijdlijn. Dus:

• seekBy(seconden) op de speler, over de nummergrenzen heen. Op de blob-motor (iOS, geen MSE) bestaat die tijdlijn niet; daar loopt spoelen tot de rand van het nummer en stapt dan naar de buur. Grover, maar eerlijker dan doen alsof.
• Bandmodus: de speler toont het BANDJE als titel met het lopende nummer eronder, en de teller loopt over de hele band in plaats van per nummer. Dat is wat "een object, geen losse tracks" betekent op het scherm.
• Vasthouden versnelt (4x tot 16x), loslaten stopt -- ook als je buiten de knop loslaat. Een korte tik spoelt vijf seconden, want vasthouden is met een spatiebalk geen gebaar.

Een echte cassette, als SVG. Verhouding 100,4 x 63,8 mm, de maat van een
compact cassette, dus viewBox 314x200: behuizing, labelvlak met de titel erop,
venster, twee spoelen met tandjes die meedraaien, de bandpakketten, vier
schroefjes en de openingen voor de kop en de capstans. De vorige versie waren
twee CSS-schijfjes.

Twee dingen die alleen door het echt te draaien boven kwamen:

• audio-player.js kiest zijn knoppen met een lijst KLASSENAMEN (PLAY_SELECTOR), niet met een regel over data-attributen. De cassetteknop droeg alle juiste data-pcms-* en deed niets. Er staat nu een test op.
• De sessie sloeg displayTimes().cur op als trackpositie. In bandmodus is dat de bandteller, dus een hersteld bandje sprong naar een plek die in dat nummer niet bestaat. Daarvoor is trackTijd() afgesplitst.

MOD_V 53, style.css v107, audio-player v35.

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

File:

• test/mixtape-ui.test.js (modified) (2 diffs)

test/mixtape-ui.test.js

@@ -86 +86 @@
   // bestaat en sloeg zichzelf dan over -- groen zonder iets te meten.
   const html = AudioEmbedService.embedPlaylistShortcodes('<p>[[playlist:tape]]</p>', (id) => (id === 'tape' ? pl : null));
-  assert.match(html, /📼 Mixtape/, 'een mixtape hoort zichzelf zo te noemen');
+  // Het teken zat eerst in de tekst; nu staat er een echte cassette getekend en
+  // is het woord genoeg. De eis blijft dezelfde: hij noemt zichzelf goed.
+  assert.match(html, /class="tape-kind">Mixtape</, 'een mixtape hoort zichzelf zo te noemen');
   assert.doesNotMatch(html, /💿 Album/, 'en niet het jasje van een album te dragen');
 });
@@ -129 +131 @@
   assert.doesNotMatch(html, /class="post-album"/);
 });
+
+test('de cassetteknop staat in de selectorlijst van de speler', () => {
+  // DIT IS DE TEST DIE ONTBRAK. De markup-tests hierboven waren groen terwijl
+  // op de knop drukken niets deed: audio-player.js kiest zijn knoppen met een
+  // lijst met KLASSENAMEN, niet met een regel over data-attributen. Alle juiste
+  // data-pcms-* dragen helpt dan niets.
+  const speler = fs.readFileSync('src/assets/js/audio-player.js', 'utf8');
+  const m = speler.match(/const PLAY_SELECTOR =\s*\n?\s*'([^']+)'/);
+  assert.ok(m, 'PLAY_SELECTOR moet te vinden zijn -- is hij hernoemd, dan dekt deze test niets meer');
+  assert.match(m[1], /\.tape-btn--play/,
+    'zonder deze klasse doet de afspeelknop van het bandje niets');
+});
+
+test('een bandje gaat als EEN object de speler in', () => {
+  const speler = fs.readFileSync('src/assets/js/audio-player.js', 'utf8');
+  // De stand moet vanaf het blok worden doorgegeven; zonder dit is een mixtape
+  // in de speler gewoon weer een rij nummers.
+  assert.match(speler, /asTape: album\.dataset\.pcmsAlbumKind === 'mixtape'/);
+  // En hij moet een paginawissel overleven, anders valt de speler halverwege
+  // terug op de nummertitel.
+  assert.match(speler, /queue, currentIndex, albumName, tapeMode,/, 'in de sessie opslaan');
+  assert.match(speler, /tapeMode = !!s\.tapeMode;/, 'en terugzetten');
+  // De opgeslagen tijd is de positie BINNEN het nummer, ook in bandmodus: bij
+  // herstellen begint de keten opnieuw. Slaat hij de bandteller op, dan springt
+  // een hersteld bandje naar een plek die in dat nummer niet bestaat.
+  assert.match(speler, /time: trackTijd\(\)\.cur \|\| 0,/);
+});
+
+test('spoelen gaat in seconden, niet per nummer', () => {
+  const mod = fs.readFileSync('src/assets/js/mod/tape.js', 'utf8');
+  assert.match(mod, /seekBy\(/, 'spoelen hoort over de tijdlijn te gaan');
+  // next()/prev() mag hier niet meer voorkomen als spoelgebaar: dat is een
+  // playlistknop en maakt van de cassette een lijst met een plaatje.
+  assert.doesNotMatch(mod, /p\.next\(\); else p\.prev\(\)/, 'de oude sprong per nummer');
+});