Changeset 16fd4fe in Klonkt

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@…>

Files:

• src/assets/css/style.css (modified) (1 diff)
• src/assets/js/mod/tape.js (added)
• src/routes/posts.js (modified) (2 diffs)
• src/services/AudioEmbedService.js (modified) (3 diffs)
• src/views/shell.ejs (modified) (2 diffs)
• test/mixtape-ui.test.js (modified) (1 diff)

src/assets/css/style.css

@@ -5076 +5076 @@
   background: var(--accent, #e8b04b); color: #1a1205;
 }
+
+/* ── Het bandje (mixtape) ──────────────────────────────────────────────
+   Zelfde familie als .post-album hierboven: dezelfde rand, dezelfde radius,
+   dezelfde papierkleur. Het verschil zit in wat je ziet draaien, niet in een
+   ander jasje -- een mixtape is een soort uitgave binnen Klonkt, geen ander
+   product.
+
+   Alles hieronder gebruikt de bestaande variabelen (--rule, --paper-2, --ink,
+   --accent), dus het volgt licht en donker en het accent van de site vanzelf. */
+.post-tape {
+    position: relative;
+    border: 1px solid var(--rule, rgba(0,0,0,.1));
+    border-radius: 14px;
+    overflow: hidden;
+    margin: 1.25rem 0;
+    background: var(--paper-2, color-mix(in srgb, var(--ink) 3%, transparent));
+}
+
+/* De cassette zelf. De verhouding is die van een echt bandje (ongeveer 10:6),
+   zodat hij ook op een telefoon als cassette leest en niet als balk. */
+.tape-shell {
+    display: grid;
+    grid-template-rows: auto auto;
+    gap: .5rem;
+    padding: .8rem .8rem .4rem;
+}
+.tape-window {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12%;
+    padding: .9rem 1.2rem;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--ink) 8%, transparent);
+    border: 1px solid var(--rule, rgba(0,0,0,.12));
+}
+/* De band tussen de spoelen. Een dun lijntje is genoeg: het gaat om de twee
+   draaiende schijven, dat is wat een cassette een cassette maakt. */
+.tape-band {
+    position: absolute;
+    left: 22%; right: 22%;
+    height: 3px;
+    background: color-mix(in srgb, var(--ink) 35%, transparent);
+    border-radius: 2px;
+}
+.tape-reel {
+    position: relative;
+    width: clamp(48px, 16vw, 76px);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background:
+      repeating-conic-gradient(from 0deg,
+        color-mix(in srgb, var(--ink) 22%, transparent) 0deg 12deg,
+        transparent 12deg 24deg);
+    border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent);
+    display: grid;
+    place-items: center;
+}
+.tape-reel-hub {
+    width: 34%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--paper, #fff);
+    border: 2px solid color-mix(in srgb, var(--ink) 40%, transparent);
+}
+/* Draaien doet hij alleen als hij speelt. De animatie staat op de spoel en niet
+   op de hele cassette: het label hoort stil te blijven, anders wordt de titel
+   onleesbaar. */
+.post-tape.is-playing .tape-reel { animation: tape-spin 2.4s linear infinite; }
+.post-tape.is-playing .tape-reel--right { animation-duration: 3.2s; }
+@keyframes tape-spin { to { transform: rotate(360deg); } }
+/* Wie liever geen beweging ziet, krijgt geen beweging. De cassette blijft dan
+   gewoon staan; de statusregel eronder vertelt nog steeds wat er speelt. */
+@media (prefers-reduced-motion: reduce) {
+    .post-tape.is-playing .tape-reel { animation: none; }
+}
+
+.tape-label {
+    padding: .5rem .6rem;
+    border-radius: 8px;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+}
+/* Staat er een hoes achter het label, dan moet de tekst leesbaar blijven. */
+.tape-label[style] { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
+.tape-kind {
+    margin: 0;
+    font-size: .7rem;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    opacity: .75;
+}
+.tape-title { margin: .1rem 0 0; font-size: 1.05rem; line-height: 1.25; }
+.tape-artist { margin: .05rem 0 0; font-size: .85rem; opacity: .8; }
+.tape-meta { margin: .15rem 0 0; font-size: .75rem; opacity: .65; }
+
+/* De knoppen: terugspoelen, spelen, vooruitspoelen. Meer heeft een bandje niet,
+   en dat is de bedoeling -- er is geen zoekbalk omdat je op een cassette niet
+   kunt zoeken. */
+.tape-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .6rem;
+    padding: .3rem 0 .7rem;
+}
+.tape-btn {
+    display: grid;
+    place-items: center;
+    width: 40px; height: 40px;
+    border-radius: 50%;
+    border: 1px solid var(--rule, rgba(0,0,0,.15));
+    background: var(--paper, #fff);
+    color: var(--ink);
+    cursor: pointer;
+    padding: 0;
+}
+.tape-btn svg { width: 18px; height: 18px; }
+.tape-btn:hover { border-color: var(--accent); color: var(--accent); }
+.tape-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.tape-btn--play {
+    width: 52px; height: 52px;
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--paper, #fff);
+}
+.tape-btn--play svg { width: 22px; height: 22px; }
+/* Speelt hij, dan is dezelfde knop de pauzeknop. Twee knoppen zou een bandje
+   niet hebben. */
+.post-tape.is-playing .tape-btn--play svg path { d: path("M7 5h4v14H7zM13 5h4v14h-4z"); }
+
+.tape-now {
+    margin: 0;
+    padding: 0 .8rem .4rem;
+    text-align: center;
+    font-size: .8rem;
+    opacity: .8;
+    min-height: 1.2em;
+}
+
+/* De nummers staan er als INHOUD, niet als knoppen. Geen cursor, geen hover,
+   geen aanwijzing dat je erop kunt drukken: op een cassette kun je dat niet. */
+.tape-tracks {
+    margin: 0;
+    padding: 0 .8rem .8rem;
+    list-style: none;
+    counter-reset: tape;
+    display: grid;
+    gap: .1rem;
+}
+.tape-track {
+    counter-increment: tape;
+    display: flex;
+    gap: .5rem;
+    align-items: baseline;
+    font-size: .85rem;
+    padding: .18rem .3rem;
+    border-radius: 6px;
+    opacity: .75;
+}
+.tape-track::before {
+    content: counter(tape) ".";
+    opacity: .55;
+    min-width: 1.4em;
+    font-variant-numeric: tabular-nums;
+}
+.tape-track-title { flex: 1; }
+.tape-track-dur { opacity: .6; font-variant-numeric: tabular-nums; }
+.tape-track.is-current {
+    opacity: 1;
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+}

src/routes/posts.js

@@ -255 +255 @@
     bodyClass: 'on-home',
     // mod/read.js: alleen nog de tik-op-een-bericht in de leesweergave.
-    pageJs: 'read',
+    pageJs: 'read tape',
   });
 });
@@ -1695 +1695 @@
 
   renderPage(req, res, 'pages/post', {
-    pageJs: 'post reply-editor',
+    pageJs: 'post reply-editor tape',
     post,
     poll: ActivityPubService.ownPollView(post),

src/services/AudioEmbedService.js

@@ -545 +545 @@
       // uitkomsten, en dan draagt een mixtape het jasje en het woord van een
       // album -- dezelfde vorm die op vier andere plekken al misging.
-      // DE SPELER IS ER NOG NIET. Een mixtape rendert voorlopig als de gewone
-      // lijst; wat hier af is, is dat hij zichzelf goed noemt.
       const kind = SOORTEN.includes(pl.kind) ? pl.kind : 'album';
       const KIND_LABEL = { album: '💿 Album', playlist: '📃 Playlist', mixtape: '📼 Mixtape' };
@@ -630 +628 @@
     </li>`;
       }).join('\n');
+
+      // HET BANDJE HEEFT ZIJN EIGEN VORM. Een album toont een genummerde lijst
+      // waar je in kunt prikken; een cassette is juist het tegenovergestelde --
+      // je hoort wat er komt, in de volgorde waarin het is opgenomen. Alles
+      // hierboven (de wachtrij, de metaregel, de duur) is gedeeld; alleen de
+      // opmaak splitst hier.
+      if (kind === 'mixtape') {
+        return this.renderTape({
+          domId: albumDomId, id, titleH, artistH, coverH, metaLine, firstUrl,
+          albumJson, tracks: pl.tracks, isAdmin,
+        });
+      }
 
       return `<div class="post-album" id="${albumDomId}"
@@ -673 +683 @@
 
   /**
+   * Het bandje (Robins idee, 21-8).
+   *
+   * WAT HET ANDERS MAAKT DAN EEN ALBUM, en dat is de hele reden dat dit een
+   * eigen vorm heeft: bij een album prik je in een genummerde lijst en spring
+   * je naar nummer zeven. Op een cassette kan dat niet. Je spoelt vooruit of
+   * terug, en wat er komt hoor je in de volgorde waarin het is opgenomen. De
+   * lijst staat er dus wel -- je mag zien wat erop staat -- maar hij is geen
+   * knoppenrij.
+   *
+   * DE SPELER IS DE BESTAANDE SPELER. De knop hieronder draagt exact dezelfde
+   * data-attributen als de albumhoes (data-pcms-track-url + data-pcms-album-id),
+   * dus audio-player.js pakt hem op zonder dat hier iets nieuws bij komt. Vooruit
+   * en terug lopen via window.pcmsAudioPlayer.next()/prev(), en dat is meteen de
+   * reden dat spoelen per NUMMER gaat en niet per seconde: die speler denkt in
+   * een wachtrij, en een tweede speler ernaast bouwen om een band na te doen zou
+   * twee dingen tegelijk laten afspelen.
+   */
+  static renderTape({ domId, id, titleH, artistH, coverH, metaLine, firstUrl, albumJson, tracks, isAdmin }) {
+    // De nummers als tekst, niet als knoppen. Bewust geen data-pcms-track-url:
+    // een aanklikbaar nummer is precies wat een bandje niet heeft.
+    const lijst = tracks.map((t, i) => {
+      const tTitle = this.escape(t.title || ('Track ' + (i + 1)));
+      const dur = t.duration > 0
+        ? `${Math.floor(t.duration / 60)}:${String(t.duration % 60).padStart(2, '0')}`
+        : '—:—';
+      return `      <li class="tape-track" data-tape-index="${i}"><span class="tape-track-title">${tTitle}</span><span class="tape-track-dur">${dur}</span></li>`;
+    }).join('\n');
+
+    const spoel = (richting, label, pad) => `    <button type="button" class="tape-btn tape-btn--${richting}" data-tape-go="${richting}" aria-label="${label}">
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">${pad}</svg>
+    </button>`;
+
+    return `<div class="post-tape" id="${domId}"
+     data-pcms-album='${albumJson}'
+     data-pcms-album-title="${titleH}"
+     data-pcms-album-kind="mixtape"
+     data-pcms-playlist-id="${this.escape(id)}">
+${isAdmin ? `  <div class="post-album-actions" role="group" aria-label="Mixtape beheren">
+    <a class="post-album-action" href="/admin/playlists?edit=${this.escape(id)}" title="Bewerk mixtape" aria-label="Bewerk mixtape">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
+    </a>
+  </div>
+` : ''}  <div class="tape-shell">
+    <div class="tape-window" aria-hidden="true">
+      <span class="tape-reel tape-reel--left"><span class="tape-reel-hub"></span></span>
+      <span class="tape-band"></span>
+      <span class="tape-reel tape-reel--right"><span class="tape-reel-hub"></span></span>
+    </div>
+    <div class="tape-label"${coverH ? ` style="background-image:url('${coverH}')"` : ''}>
+      <p class="tape-kind">📼 Mixtape</p>
+      <h3 class="tape-title">${titleH}</h3>
+      ${artistH ? `<p class="tape-artist">${artistH}</p>` : ''}
+      <p class="tape-meta">${metaLine}</p>
+    </div>
+  </div>
+  <div class="tape-controls" role="group" aria-label="Bandje bedienen">
+${spoel('back', 'Terugspoelen', '<path d="M11 12l9-7v14zM2 12l9-7v14z"/>')}
+    <button type="button" class="tape-btn tape-btn--play"
+            data-pcms-track-url="${firstUrl}"
+            data-pcms-album-id="${domId}"
+            data-tape-play
+            aria-label="Afspelen">
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 4l12 8-12 8z"/></svg>
+    </button>
+${spoel('fwd', 'Vooruitspoelen', '<path d="M13 12L4 5v14zM22 12l-9-7v14z"/>')}
+  </div>
+  <p class="tape-now" data-tape-now aria-live="polite"></p>
+  <ol class="tape-tracks">
+${lijst}
+  </ol>
+</div>`;
+  }
+
+  /**
    * Human-readable label for a provider slug. Used by external-link buttons.
    */

src/views/shell.ejs

@@ -222 +222 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=105">
+<link rel="stylesheet" href="/assets/css/style.css?v=106">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
@@ -505 +505 @@
   // Eén nummer voor de hele map. Te vaak bumpen kost één download; te weinig
   // bumpen kost een bugfix die nooit aankomt.
-  var MOD_V = 51;
+  var MOD_V = 52;
 
   // name -> 1 (aan het laden) of de module-namespace (geladen). Een module

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"/);
+});