Changeset 16fd4fe in Klonkt for test/mixtape-ui.test.js

Timestamp:

08/22/2026 09:32:29 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

e679bce

Parents:

8e1af9c

Message:

De cassettespeler: draaiende spoelen, vooruit en achteruit

Een album toont een genummerde lijst waar je in prikt. Een cassette is het
tegenovergestelde: je spoelt, en je hoort wat er komt in de volgorde waarin het
is opgenomen. Vandaar een eigen vorm en niet het albumjasje met een plaatje.

DE SPELER IS DE BESTAANDE SPELER. De afspeelknop draagt exact dezelfde
data-attributen als een albumhoes, dus audio-player.js pakt hem op; spoelen is
next()/prev(). Een tweede speler ernaast bouwen zou twee dingen tegelijk laten
klinken en de sessie weggooien die een paginawissel overleeft. Daarom spoelt
het per NUMMER en niet per seconde: die speler denkt in een wachtrij.

De nummers staan er als inhoud, niet als knoppen. Geen speel-url, geen knop,
geen hover -- op een cassette kun je niet naar nummer zeven springen. Wat er
speelt lees je op de statusregel, en dat is meteen de toegankelijke kant.

Verder:

• De pauzeknop vangt zijn klik in de CAPTURE-fase, want audio-player.js luistert in de bubbelfase en zou de wachtrij anders opnieuw vanaf een zetten.
• Spoelen doet niets als dit bandje niet loopt; anders verzet een spoelknop de wachtrij van een ander blok.
• init() ruimt de tikker altijd eerst op, ook zonder bandje op de pagina. Zonder dat blijft hij lopen na een paginawissel -- dezelfde fout die in de leesweergave ooit de hele site heeft vastgezet.
• prefers-reduced-motion zet het draaien uit; de statusregel blijft.

Opmaak in dezelfde familie als .post-album: zelfde rand, radius en papier, en
alleen bestaande variabelen, dus licht, donker en het accent volgen vanzelf.

MOD_V 52, style.css v106.

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

File:

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

test/mixtape-ui.test.js

@@ -96 +96 @@
   assert.match(bron, /mixtape: '📼 Mixtape'/);
 });
+
+test('het bandje is een cassette, geen albumlijst', async () => {
+  const AudioEmbedService = (await import('../src/services/AudioEmbedService.js')).default;
+  const pl = {
+    id: 'tape', title: 'De Mixtape', artist: 'robo', kind: 'mixtape', cover: '',
+    tracks: [
+      { id: 't1', title: 'Kant A', artist: 'robo', url: '/a.mp3', duration: 100, cover: '' },
+      { id: 't2', title: 'Kant B', artist: 'robo', url: '/b.mp3', duration: 44, cover: '' },
+    ],
+  };
+  const html = AudioEmbedService.embedPlaylistShortcodes('<p>[[playlist:tape]]</p>', (id) => (id === 'tape' ? pl : null));
+
+  assert.match(html, /class="post-tape"/);
+  assert.match(html, /tape-reel--left/, 'twee spoelen, anders is het geen cassette');
+  assert.match(html, /tape-reel--right/);
+  assert.match(html, /data-tape-go="back"/, 'terugspoelen');
+  assert.match(html, /data-tape-go="fwd"/, 'vooruitspoelen');
+
+  // DE KERN VAN HET IDEE: de nummers staan er als inhoud, niet als knoppen.
+  // Zodra een track een speel-url draagt kun je erop prikken, en dan is het
+  // geen bandje meer maar een lijst met een cassetteplaatje erboven.
+  const lijst = html.slice(html.indexOf('<ol class="tape-tracks"'));
+  assert.doesNotMatch(lijst, /data-pcms-track-url/, 'een aanklikbaar nummer hoort hier niet');
+  assert.doesNotMatch(lijst, /<button/, 'en een knop ook niet');
+
+  // De afspeelknop leunt wel op de bestaande speler, anders bouwen we een
+  // tweede speler naast de site-speler.
+  assert.match(html, /data-pcms-album-id="album-tape"/);
+  assert.match(html, /data-pcms-track-url="\/a\.mp3"/);
+
+  // En geen albumopmaak: dat was de hele reden voor een eigen vorm.
+  assert.doesNotMatch(html, /class="post-album"/);
+});