Changeset 834bcc3 in Klonkt for src/assets/js

Timestamp:

06/23/2026 06:14:27 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

d774679

Parents:

bb42dfb

Message:

i18n: translate Dutch code comments to English across src/

Comments in routes/services/views/config/middleware/assets translated to
English for the public repo. A few dev-facing throw/console message strings
were Englished too. No user-facing UI strings or i18n dictionary values changed
(src/services/i18n.js untouched). Logic unchanged.

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

Location:

src/assets/js

Files:

• audio-player.js (modified) (23 diffs)
• embed-player.js (modified) (27 diffs)
• smooth-scroll.js (modified) (1 diff)

src/assets/js/audio-player.js

@@ -230 +230 @@
     }
     currentObjectUrl = objUrl;
-    // Schone overgang: pause + load forceert reset van internal state na
-    // meerdere src-changes (voorkomt state-corruption van het audio-element).
+    // Clean transition: pause + load forces a reset of internal state after
+    // multiple src changes (prevents state corruption of the audio element).
     try { audio.pause(); } catch (e) {}
     audio.src = objUrl;
@@ -276 +276 @@
   // Used by the site pre-seed so opening a page doesn't auto-download audio;
   // the blob is fetched lazily on the first play().
-  // Markeer de huidige track persistent (blijvende highlight zolang 'ie actief is).
+  // Persistently mark the current track (stays highlighted as long as it's active).
   function markPlaying(trackId) {
     document.querySelectorAll('.pat-playing').forEach((e) => e.classList.remove('pat-playing'));
@@ -283 +283 @@
     if (el) el.classList.add('pat-playing');
   }
-  // Na een htmx-navigatie is de post-DOM vervangen → highlight opnieuw zetten.
+  // After an htmx navigation the post DOM is replaced → reapply the highlight.
   document.body.addEventListener('htmx:afterSettle', () => {
     const t = queue[currentIndex];
@@ -341 +341 @@
   // (@media max-width:719.98px). On wider/desktop widths the sheet is a centered
   // panel, so we do NOT auto-open it there.
-  // Drie weergaves (Robin 2026-06-15): telefoon (<768) = fullscreen sheet;
-  // tablet/auto (768–1199) = grote landscape full-player (tablet + tablet-in-de-
-  // auto); desktop (≥1200) = alleen mini-speler, GEEN full player. matchMedia
-  // zodat dit exact de CSS-breekpunten volgt.
+  // Three layouts (Robin 2026-06-15): phone (<768) = fullscreen sheet;
+  // tablet/car (768–1199) = large landscape full-player (tablet + car-mode);
+  // desktop (≥1200) = mini-player only, NO full player. matchMedia so this
+  // exactly follows the CSS breakpoints.
   function playerTier() {
     if (window.matchMedia('(min-width: 1200px)').matches) return 'desktop';
@@ -359 +359 @@
     loadTrack(typeof startIdx === 'number' ? Math.max(0, Math.min(startIdx, queue.length - 1)) : 0, true);
     // Mobile: a track press from an album/playlist auto-opens the full
-    // now-playing sheet (Spotify-style) i.p.v. alleen de dunne mini-strip.
-    // Alleen hier (setQueue = een verse, door-de-gebruiker-gestarte queue) —
-    // niet bij next/prev of de site-pre-seed — zodat een sheet die de gebruiker
-    // bewust sloot niet vanzelf terugkomt.
+    // now-playing sheet (Spotify-style) instead of just the thin mini-strip.
+    // Only here (setQueue = a fresh, user-initiated queue) —
+    // not on next/prev or the site pre-seed — so a sheet the user
+    // deliberately closed doesn't reappear by itself.
     if (hasFullPlayer()) openSheet();
   }
@@ -377 +377 @@
       p.catch((err) => {
         console.warn('[pcms-audio] play() rejected:', err.name, err.message);
-        // Browser-autoplay-policy heeft 't gestopt (typisch na 3-4
-        // automatische plays op iOS Safari, of als tab tijdelijk inactive
-        // was). Visuele hint dat user op play moet tappen.
+        // Browser autoplay policy blocked it (typically after 3-4
+        // auto-plays on iOS Safari, or when the tab was temporarily inactive).
+        // Show a visual hint for the user to tap play.
         if (err && err.name === 'NotAllowedError') {
           root.classList.add('audio-needs-tap');
@@ -440 +440 @@
 
   // ============================================================
-  // 4b. Mutual exclusion — gedeelde media-registry (zie embed-player.js).
-  // ============================================================
-  // Alle spelers (deze site-speler + de YouTube/SoundCloud/Spotify-embeds)
-  // registreren zich in window.pcmsMediaRegistry. Start er één, dan pauzeert de
-  // vorige. Dit is de precieze vervanger van de oude focus/blur-heuristiek voor
-  // de embeds met een echte JS-API. (De blur-fallback hieronder blijft staan
-  // voor iframe-only embeds zonder API: Bandcamp/Apple Music/Vimeo.)
+  // 4b. Mutual exclusion — shared media registry (see embed-player.js).
+  // ============================================================
+  // All players (this site player + YouTube/SoundCloud/Spotify embeds)
+  // register themselves in window.pcmsMediaRegistry. Starting one pauses
+  // the previous. This is the precise replacement for the old focus/blur
+  // heuristic for embeds with a real JS API. (The blur fallback below stays
+  // for iframe-only embeds without an API: Bandcamp/Apple Music/Vimeo.)
   function mediaRegistry() {
     if (window.pcmsMediaRegistry) return window.pcmsMediaRegistry;
@@ -467 +467 @@
   // 5. Audio element events → UI sync
   // ============================================================
-  // Error-counter voorkomt infinite-loop als ALLE tracks broken zijn.
+  // Error counter prevents an infinite loop when ALL tracks are broken.
   let consecutiveErrors = 0;
 
@@ -473 +473 @@
     isPlaying = true;
     root.classList.add('is-playing');
-    root.classList.remove('audio-needs-tap');  // verstop tap-hint
-    mediaRegistry().setActive(registrySelf);   // pauzeer eventueel spelende embeds
-  });
-  // Reset de error-teller pas bij ECHTE playback-start (`playing`), niet bij
-  // het eager `play`-event. `play` vuurt vóór een eventuele netwerk-/decode-
-  // fout, dus resetten daar zou de 3-strikes-stop nooit laten triggeren bij
-  // een kapotte track → infinite "next"-loop. `playing` vuurt alleen als er
-  // daadwerkelijk audio speelt.
+    root.classList.remove('audio-needs-tap');  // hide tap hint
+    mediaRegistry().setActive(registrySelf);   // pause any currently playing embeds
+  });
+  // Reset the error counter only on a REAL playback start (`playing`), not the
+  // eager `play` event. `play` fires before any network/decode error, so resetting
+  // there would prevent the 3-strikes stop from ever triggering on a broken
+  // track → infinite "next" loop. `playing` only fires when audio is actually playing.
   audio.addEventListener('playing', () => { consecutiveErrors = 0; preloadNext(); });
   audio.addEventListener('pause', () => { isPlaying = false; root.classList.remove('is-playing'); });
@@ -488 +487 @@
     console.error('[pcms-audio] playback error', code, audio.src, e);
     consecutiveErrors++;
-    // Bij netwerk/decode-fout: skip naar volgende track ipv stilstaan.
-    // Max 3 fouten op rij voordat we opgeven (anders infinite loop).
+    // On network/decode error: skip to next track instead of stalling.
+    // Max 3 consecutive errors before giving up (otherwise infinite loop).
     if (consecutiveErrors < 3 && queue.length > 1) {
-      console.warn('[pcms-audio] auto-skip naar volgende na error', consecutiveErrors);
+      console.warn('[pcms-audio] auto-skip to next after error', consecutiveErrors);
       setTimeout(next, 400);
     }
@@ -545 +544 @@
   // 7. Sheet expand/close + drag-down-to-close
   // ============================================================
-  // Back-knop sluit de sheet op mobiel: bij openen pushen we een history-entry,
-  // zodat de telefoon-terugknop (popstate) eerst de sheet sluit i.p.v. de pagina
-  // te verlaten. We balanceren 'm bij een UI-sluiting via history.back().
+  // Back button closes the sheet on mobile: on open we push a history entry
+  // so the phone back button (popstate) closes the sheet first instead of
+  // leaving the page. We balance it on a UI-initiated close via history.back().
   let sheetHistoryPushed = false;
 
   function openSheet() {
-    if (!hasFullPlayer()) return; // desktop (≥1200): geen full player, alleen mini-speler
+    if (!hasFullPlayer()) return; // desktop (≥1200): no full player, mini-player only
     if (sheet.classList.contains('is-open')) return;
     sheet.classList.add('is-open');
     sheet.setAttribute('aria-hidden', 'false');
     document.body.classList.add('audio-sheet-locked');
-    // Telefoon + tablet: history-entry zodat de terug-knop eerst de sheet sluit.
+    // Phone + tablet: push a history entry so the back button closes the sheet first.
     try { history.pushState({ pcmsSheet: true }, ''); sheetHistoryPushed = true; } catch (e) {}
   }
@@ -566 +565 @@
     sheetPanel.style.removeProperty('--pcms-drag-y');
     sheetBackdrop.style.removeProperty('--pcms-sheet-progress');
-    // UI-sluiting (X / swipe / backdrop / Esc): pop onze eigen history-entry zodat
-    // de volgende terug-knop weer normaal navigeert. Bij een popstate-sluiting
-    // (de terug-knop zelf) is de entry al gepopt.
+    // UI close (X / swipe / backdrop / Esc): pop our own history entry so the
+    // next back button navigates normally. On a popstate close (back button itself)
+    // the entry is already popped.
     const wasPushed = sheetHistoryPushed;
     sheetHistoryPushed = false;
@@ -576 +575 @@
     if (sheet.classList.contains('is-open')) closeSheet(true);
   });
-  // Mini-player-info aanklikken:
-  //  - DESKTOP (≥768px): spring naar de post waar de track vandaan komt (als bekend),
-  //    via htmx zodat de audio blijft spelen. Geen post bekend → val terug op de sheet.
-  //  - MOBIEL: altijd de uitgebreide speler-sheet openen (huidig gedrag).
+  // Clicking the mini-player track info:
+  //  - DESKTOP (≥1200px): jump to the post the track came from (if known),
+  //    via htmx so audio keeps playing. No post known → fall back to the sheet.
+  //  - MOBILE/TABLET: always open the full now-playing sheet.
   function scrollToTrack(trackId) {
     if (!trackId) { window.scrollTo(0, 0); return; }
@@ -594 +593 @@
         const p = window.htmx.ajax('GET', url, { target: '#pcms-main', swap: 'innerHTML' });
         history.pushState({}, '', url + hash);
-        // Na de swap naar de track scrollen (klein uitstel zodat de globale
-        // afterSwap-top-scroll eerst is geweest); val terug op top als niet gevonden.
+        // Scroll to the track after the swap (small delay so the global
+        // afterSwap scroll-to-top runs first); fall back to top if not found.
         const go = () => setTimeout(() => scrollToTrack(trackId), 60);
         if (p && typeof p.then === 'function') p.then(go); else setTimeout(go, 150);
         return;
-      } catch (e) { /* val terug op volledige navigatie */ }
+      } catch (e) { /* fall back to full navigation */ }
     }
     location.href = url + hash;
@@ -605 +604 @@
   expandTrigger.addEventListener('click', () => {
     const t = queue[currentIndex];
-    // Alleen op échte desktop (≥1200, geen full-player) springen we naar de post.
-    // Tablet + telefoon hebben een full-player → open die (zoals mobiel).
+    // Only on true desktop (≥1200, no full-player) do we jump to the post.
+    // Tablet + phone have a full-player → open it (same as mobile behaviour).
     const jumpToPost = !hasFullPlayer();
     if (jumpToPost && t) {
-      // 1) Track speelde vanuit een post → die URL kennen we al.
+      // 1) Track played from a post → we already know that URL.
       if (t.postUrl) { goToPost(t.postUrl, t.id); return; }
-      // 2) Site-brede track (geen postUrl) → zoek de post op via de track-id.
+      // 2) Site-wide track (no postUrl) → look up the post via the track id.
       if (t.id) {
         fetch('/audio/track/' + encodeURIComponent(t.id) + '/post')
@@ -627 +626 @@
     if (e.key === 'Escape' && sheet.classList.contains('is-open')) closeSheet();
   });
-  // Naar desktop-breedte (≥1200) gesleept terwijl de full player open is? Sluiten —
-  // op desktop bestaat de full player niet.
+  // Resized to desktop width (≥1200) while the full player is open? Close it —
+  // the full player doesn't exist on desktop.
   window.addEventListener('resize', () => {
     if (!hasFullPlayer() && sheet.classList.contains('is-open')) closeSheet();
   });
 
-  // Vangnet voor mutual exclusion. Voor YouTube/SoundCloud/Spotify-embeds doet de
-  // registry dit al precies (echte play-events). Maar voor iframe-only embeds
-  // ZONDER JS-API (Bandcamp/Apple/Vimeo) én voor de iframe-FALLBACK (als een
-  // ad-blocker de player-API blokkeert) is er geen play-event: daar vangen we het
-  // af via focus. Klikt de gebruiker zo'n iframe aan → window 'blur' → pauzeer
-  // onze speler. (Voor de API-embeds is dit hooguit een onschadelijke dubbele
-  // pauze.)
+  // Fallback for mutual exclusion. For YouTube/SoundCloud/Spotify embeds the
+  // registry already handles this precisely (real play events). But for
+  // iframe-only embeds WITHOUT a JS API (Bandcamp/Apple/Vimeo) and for the
+  // iframe FALLBACK (when an ad-blocker blocks the player API) there is no
+  // play event: we catch those via focus. User clicks such an iframe →
+  // window 'blur' → pause our player. (For API embeds this is at worst a
+  // harmless double-pause.)
   window.addEventListener('blur', () => {
     setTimeout(() => {
       const el = document.activeElement;
-      // Alleen embed-iframes (binnen .folio-embed) pauzeren de speler — niet een
-      // willekeurig iframe (captcha/reclame/kaart) dat per ongeluk focus krijgt.
+      // Only embed iframes (inside .folio-embed) pause the player — not a
+      // random iframe (captcha/ad/map) that happens to receive focus.
       if (el && el.tagName === 'IFRAME' && el.closest('.folio-embed') && audio.src && !audio.paused) {
         pause();
@@ -710 +709 @@
   // wrapper. For the other three the data is on the button itself. The
   // handler reads from button-first, falls back to wrapper.
-  // Event-delegation op document.body i.p.v. per-knop listeners. Dit overleeft
-  // HTMX history-restores: de mobiele terug-knop (popstate) laat HTMX #pcms-main
-  // terugzetten uit z'n snapshot; een per-element `data-pcms-attached`-vlag zou
-  // dan dode knoppen geven (vlag ingebakken in de snapshot, listener weg). Eén
-  // gedelegeerde listener werkt ongeacht hoe vaak de DOM ge(her)swapt wordt.
+  // Event delegation on document.body instead of per-button listeners. This
+  // survives HTMX history-restores: the mobile back button (popstate) lets HTMX
+  // restore #pcms-main from its snapshot; a per-element `data-pcms-attached` flag
+  // would leave dead buttons (flag baked into the snapshot, listener gone). One
+  // delegated listener works regardless of how many times the DOM is (re)swapped.
   const PLAY_SELECTOR =
     '.post-audio-track .pat-play, .post-album-tracks .pat-row, .post-album-cover-btn, .post-album-playall';
@@ -722 +721 @@
     e.preventDefault();
     e.stopPropagation();
-    // De post waar je VANAF afspeelt = de pagina waar je nu bent (de embeds staan
-    // in de post-content). Bewaar 'm op de track(s) zodat de mini-player er op
-    // desktop naartoe kan springen — overleeft ook de sessionStorage-resume.
+    // The post you're playing FROM = the current page (embeds live in post content).
+    // Store it on the track(s) so the desktop mini-player can jump back to it —
+    // survives the sessionStorage resume as well.
     const postUrl = location.pathname + location.search;
     // Resolve metadata: button-first, then closest .post-audio-track wrapper
@@ -804 +803 @@
 
   // ============================================================
-  // 10. Sessie-persistentie — speler "blijft" over page-navigaties heen
-  // ============================================================
-  // Een <audio> overleeft geen volledige page-load (en cross-context navigatie
-  // — bv. naar de headerloze hub-overview — is bewust full-nav). We bewaren de
-  // sessie in sessionStorage en herstellen + hervatten 'm op de volgende pagina:
-  // de speler staat er weer met dezelfde track op dezelfde positie. In Chrome
-  // (hoge media-engagement) speelt 'ie meteen door; staat de browser autoplay
-  // niet toe, dan staat 'ie klaar op die plek (één tik = verder).
+  // 10. Session persistence — player "survives" across page navigations
+  // ============================================================
+  // An <audio> element doesn't survive a full page load (and cross-context
+  // navigation — e.g. to the headerless hub overview — is intentionally a
+  // full-nav). We save the session to sessionStorage and restore + resume it
+  // on the next page: the player comes back with the same track at the same
+  // position. In Chrome (high media engagement) it resumes immediately;
+  // if the browser blocks autoplay it waits at that position (one tap = play).
   const PLAYER_STATE_KEY = 'pcms-player-state';
   let pendingSeek = 0;
@@ -830 +829 @@
   audio.addEventListener('ended', savePlayerState);
   setInterval(() => { if (audio.src && !audio.paused) savePlayerState(); }, 5000);
-  // Herstelde positie toepassen zodra de track-metadata binnen is.
+  // Apply the restored position once track metadata is available.
   audio.addEventListener('loadedmetadata', () => {
     if (pendingSeek > 0 && isFinite(audio.duration) && audio.duration > 0) {
@@ -845 +844 @@
     pendingSeek = s.time || 0;
     const idx = Math.max(0, Math.min(s.currentIndex || 0, queue.length - 1));
-    // playing -> fetch + (poging tot) hervatten; gepauzeerd -> alleen metadata.
+    // playing → fetch + (attempt to) resume; paused → meta-only.
     loadTrack(idx, !!s.playing, !s.playing);
     return true;
@@ -853 +852 @@
   // 11. Site-level pre-seed (window.PCMS_SITE_TRACKS)
   // ============================================================
-  // Een actieve sessie (restore) wint van de pagina-seed, zodat lopende muziek
-  // doorgaat i.p.v. vervangen te worden door de tracks van de nieuwe pagina.
+  // An active session (restore) wins over the page seed, so music that is
+  // already playing continues instead of being replaced by the new page's tracks.
   if (!restorePlayerState()) {
     if (Array.isArray(window.PCMS_SITE_TRACKS) && window.PCMS_SITE_TRACKS.length) {
@@ -864 +863 @@
         cover:  t.cover_url || t.cover || '',
       }));
-      // Queue alleen klaarzetten — de speler-balk verschijnt PAS bij de eerste
-      // audio-klik (een .post-audio-track of de mini-speler-play roept setQueue/
-      // loadTrack → die toont de balk). Geen pre-seed-balk meer op page-load.
+      // Only prime the queue — the player bar appears only on the first audio click
+      // (.post-audio-track or the mini-player play button calls setQueue/loadTrack,
+      // which shows the bar). No more pre-seed bar on page load.
       currentIndex = 0;
     }

src/assets/js/embed-player.js

@@ -1 +1 @@
 /**
- * Klonkt Embed Player — eigen, in-huisstijl media-embeds bovenop de ÉCHTE
- * player-API's (YouTube IFrame API, SoundCloud Widget API, Spotify iFrame API).
+ * Klonkt Embed Player — custom, on-brand media embeds on top of the REAL
+ * player APIs (YouTube IFrame API, SoundCloud Widget API, Spotify iFrame API).
  *
- * De server (AudioEmbedService) rendert per embed een placeholder:
+ * The server (AudioEmbedService) renders a placeholder per embed:
  *   <div class="folio-embed folio-embed--<provider> pcms-embed-card"
  *        data-embed-provider data-embed-ref data-embed-type data-embed-url></div>
- * Dit script bouwt daar onze eigen kaart omheen (cover/poster + onze play-knop +
- * voortgangsbalk in huisstijl) en bestuurt de onderliggende speler via de
- * platform-API, zodat play/pause/voortgang in ÓNZE handen liggen.
+ * This script wraps it in our own card (cover/poster + our play button +
+ * progress bar in brand style) and controls the underlying player via the
+ * platform API, so play/pause/progress are in OUR hands.
  *
- * Capability-eerlijkheid:
- *  - youtube/soundcloud  → volledig eigen controls (native chrome verborgen).
- *  - spotify             → besturing + onze frame eromheen; Spotify's eigen UI
- *                          blijft binnenin (kan niet anders zonder Premium+OAuth).
+ * Capability honesty:
+ *  - youtube/soundcloud  → fully custom controls (native chrome hidden).
+ *  - spotify             → controls + our frame around it; Spotify's own UI
+ *                          stays inside (no alternative without Premium+OAuth).
  *
- * Mutual exclusion: elke speler (incl. de site-audiospeler in audio-player.js)
- * registreert zich in window.pcmsMediaRegistry. Start er één → de vorige pauzeert.
- * Dit vervangt de oude focus/blur-heuristiek door echte play-events.
+ * Mutual exclusion: every player (incl. the site audio player in audio-player.js)
+ * registers itself in window.pcmsMediaRegistry. Starting one pauses the previous.
+ * This replaces the old focus/blur heuristic with real play events.
  *
- * Singleton — guard tegen dubbel-init (HTMX laadt scripts soms opnieuw).
+ * Singleton — guard against double-init (HTMX can reload scripts).
  */
 (function () {
@@ -25 +25 @@
 
   // ============================================================
-  // 0. Gedeelde playback-registry (ook door audio-player.js gebruikt)
+  // 0. Shared playback registry (also used by audio-player.js)
   // ============================================================
   function registry() {
@@ -31 +31 @@
     const r = {
       _active: null,
-      // Markeer `player` als de enige actieve; pauzeer de vorige.
+      // Mark `player` as the sole active one; pause the previous.
       setActive(player) {
         if (this._active && this._active !== player && this._active.pause) {
@@ -45 +45 @@
 
   // ============================================================
-  // 1. Lazy script-loaders — 1 promise per platform, gedeeld over N embeds.
-  //    We laden een platform-script PAS als er een embed van dat platform op de
-  //    pagina daadwerkelijk wordt gestart.
+  // 1. Lazy script loaders — 1 promise per platform, shared across N embeds.
+  //    A platform script is only loaded when an embed from that platform
+  //    is actually started on the page.
   // ============================================================
   const scripts = {};
@@ -55 +55 @@
       s.src = src; s.async = true;
       s.onload = () => resolve();
-      s.onerror = () => reject(new Error('embed-script faalde: ' + src));
+      s.onerror = () => reject(new Error('embed script failed: ' + src));
       document.head.appendChild(s);
     });
   }
-  // Belangrijk: alle loaders REJECTEN bij een script-fout (bv. een ad-blocker die
-  // het API-script blokkeert) én na een time-out — zodat de aanroeper netjes kan
-  // terugvallen op het kale platform-iframe i.p.v. eeuwig te hangen.
+  // Important: all loaders REJECT on script errors (e.g. an ad-blocker blocking
+  // the API script) and on timeout — so the caller can gracefully fall back to
+  // the plain platform iframe instead of hanging indefinitely.
   const API_TIMEOUT = 8000;
 
-  // YouTube: globale callback onYouTubeIframeAPIReady (1×) → in promise wikkelen.
+  // YouTube: global callback onYouTubeIframeAPIReady (once) → wrap in a promise.
   function ytApi() {
     if (scripts.yt) return scripts.yt;
@@ -79 +79 @@
     return scripts.yt;
   }
-  // SoundCloud: geen globale ready-callback; resolve op script-onload, daarna
-  // wacht elke widget op z'n eigen SC.Widget.Events.READY.
+  // SoundCloud: no global ready callback; resolve on script onload, then
+  // each widget waits for its own SC.Widget.Events.READY.
   function scApi() {
     if (scripts.sc) return scripts.sc;
@@ -91 +91 @@
     return scripts.sc;
   }
-  // Spotify: globale callback onSpotifyIframeApiReady(IFrameAPI) (1×) → wrappen.
+  // Spotify: global callback onSpotifyIframeApiReady(IFrameAPI) (once) → wrap in a promise.
   function spotifyApi() {
     if (scripts.sp) return scripts.sp;
@@ -101 +101 @@
       };
       loadScript('https://open.spotify.com/embed/iframe-api/v1').catch(reject);
-      // Korter dan API_TIMEOUT: Spotify's bundle initialiseert snel óf helemaal
-      // niet (CDN 503 / origin-gating). Niet 8s wachten vóór de iframe-fallback.
+      // Shorter than API_TIMEOUT: Spotify's bundle initialises quickly or not at all
+      // (CDN 503 / origin-gating). No need to wait 8 s before the iframe fallback.
       setTimeout(() => reject(new Error('Spotify API timeout')), 4000);
     });
@@ -108 +108 @@
   }
 
-  // Kaal platform-iframe als fallback wanneer de JS-API geblokkeerd/onbereikbaar
-  // is. Ad-blockers laten de embed-iframes doorgaans wél door. Autoplay-param
-  // omdat we hier altijd in een user-gesture-context zitten (klik op play).
+  // Plain platform iframe as fallback when the JS API is blocked/unreachable.
+  // Ad-blockers generally let embed iframes through. Autoplay parameter
+  // is safe here because we're always in a user-gesture context (play click).
   function fallbackIframe(provider, ref, url) {
     if (provider === 'youtube') {
@@ -138 +138 @@
     const m = (url || '').match(/(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
     if (m) return m[1];
-    return null;  // geen blinde slice — een ongeldige ref geeft liever niets dan een kapotte id
-  }
-  // Alleen http(s) als href toelaten (defense-in-depth tegen javascript:/data:).
+    return null;  // no blind slice — an invalid ref returns nothing rather than a broken id
+  }
+  // Only allow http(s) as href (defense-in-depth against javascript:/data: URIs).
   function safeHref(u) {
     try { const p = new URL(u, location.href); return (p.protocol === 'http:' || p.protocol === 'https:') ? u : '#'; }
@@ -154 +154 @@
 
   // ============================================================
-  // 3. Card controller — bouwt de huisstijl-kaart + delegeert naar een adapter
+  // 3. Card controller — builds the on-brand card + delegates to an adapter
   // ============================================================
   function buildCard(el) {
@@ -165 +165 @@
     el.classList.remove('pcms-embed-loading');
 
-    // Onze speler-zijde (registry-peer). pause() wijst naar de adapter zodra die
-    // gemount is; ervoor is 't een no-op.
+    // Our player side (registry peer). pause() points to the adapter once
+    // mounted; before that it's a no-op.
     let adapter = null;
     const self = { pause() { if (adapter && adapter.pause) { try { adapter.pause(); } catch (e) {} } } };
 
-    // Teardown-hook: aangeroepen door de MutationObserver als deze kaart uit de
-    // DOM verdwijnt (HTMX-swap) → adapter opruimen (timers/iframes) + registry
-    // vrijgeven, zodat er geen poll-timers of spelers blijven lekken.
+    // Teardown hook: called by the MutationObserver when this card leaves the
+    // DOM (HTMX swap) → clean up the adapter (timers/iframes) + release the registry,
+    // so no poll timers or players keep leaking.
     el._pcmsDestroy = function () {
       try { if (adapter && adapter.destroy) adapter.destroy(); } catch (e) {}
@@ -182 +182 @@
     let dur = 0;
 
-    // --- UI ophangen (verschilt per provider-type) ---
+    // --- Mount the UI (differs per provider type) ---
     const isVideo = provider === 'youtube';
     const custom = provider === 'youtube' || provider === 'soundcloud'; // eigen controls
@@ -220 +220 @@
     const volEl = el.querySelector('.pcms-embed-vol');
     const muteBtn = el.querySelector('.pcms-embed-mute');
-    let vol = 100;       // huidige volume 0-100 (wordt op de adapter toegepast)
+    let vol = 100;       // current volume 0-100 (applied to the adapter)
     let preMuteVol = 100;
 
@@ -251 +251 @@
     };
 
-    // API geblokkeerd/onbereikbaar → kaal platform-iframe (graceful degradation).
-    // De mutual-exclusion loopt voor deze fallback via de blur-heuristiek
-    // (audio-player.js), want de kaart krijgt geen .is-mounted.
+    // API blocked/unreachable → plain platform iframe (graceful degradation).
+    // Mutual exclusion for this fallback runs via the blur heuristic
+    // (audio-player.js), because the card never gets .is-mounted.
     function renderFallback() {
       const fb = fallbackIframe(provider, ref, url);
@@ -271 +271 @@
       el.appendChild(iframe);
 
-      // Mutual exclusion óók voor de fallback-iframe. Een cross-origin iframe
-      // kunnen we niet via een API pauzeren, dus 'pauze' = herladen ZONDER
-      // autoplay (= stopt het geluid, speler blijft zichtbaar/herstartbaar).
-      // We registreren 'm als actief: nu (= gebruiker start de embed) pauzeert de
-      // site-speler/andere embeds; en als de site-speler later start, pauzeert de
-      // registry deze fallback.
+      // Mutual exclusion also for the fallback iframe. A cross-origin iframe
+      // cannot be paused via an API, so 'pause' = reload WITHOUT
+      // autoplay (= stops the audio, player stays visible/restartable).
+      // We register it as active: now (= user starts the embed) the
+      // site player/other embeds pause; and when the site player starts later,
+      // the registry pauses this fallback.
       self.pause = function () {
         try {
@@ -294 +294 @@
     }
 
-    // Eerste interactie → adapter mounten + spelen. Daarna toggelt de knop.
+    // First interaction → mount the adapter + play. The button toggles after that.
     async function ensureMountedAndPlay() {
       if (mounted) { if (adapter) adapter.play(); return; }
       mounted = true;
-      // Spotify: hun speler is toch niet te skinnen (besturing-only) én de
-      // iFrame-API-bundle initialiseert in de praktijk vaak niet (CDN-gating/503)
-      // → niet op de API wachten, meteen het kale Spotify-iframe tonen. Instant.
+      // Spotify: their player cannot be skinned (controls-only) and the
+      // iFrame API bundle often fails to initialise in practice (CDN-gating/503)
+      // → don't wait for the API, show the plain Spotify iframe immediately.
       if (provider === 'spotify') { renderFallback(); return; }
       el.classList.add('pcms-embed-busy');
@@ -306 +306 @@
         adapter = await MOUNTERS[provider](mountEl, { ref, url }, hooks);
         if (el._pcmsApplyVol) el._pcmsApplyVol();  // onthouden volume toepassen
-        // is-mounted: CSS verbergt de poster (video) of de Spotify-facade en
-        // toont de echte speler. Voor SoundCloud blijft onze kaart+balk staan en
-        // blijft het (functionele) iframe off-screen verborgen.
+        // is-mounted: CSS hides the poster (video) or Spotify facade and
+        // shows the real player. For SoundCloud our card+bar stays visible and
+        // the (functional) iframe remains hidden off-screen.
         el.classList.add('is-mounted');
         adapter.play();
       } catch (err) {
-        console.warn('[pcms-embed] API niet beschikbaar, val terug op kaal iframe', provider, err);
+        console.warn('[pcms-embed] API unavailable, falling back to plain iframe', provider, err);
         renderFallback();
       }
@@ -328 +328 @@
       adapter.seek(ratio * dur);
     });
-    // Volume: schuif zet vol (0-100) en past 'm toe op de adapter (YT/SC hebben
-    // setVolume). De waarde wordt onthouden en na het mounten opnieuw toegepast.
+    // Volume: slider sets vol (0-100) and applies it to the adapter (YT/SC support
+    // setVolume). The value is remembered and reapplied after mounting.
     function applyVol() {
       if (adapter && adapter.setVolume) { try { adapter.setVolume(vol); } catch (e) {} }
@@ -341 +341 @@
       applyVol();
     });
-    el._pcmsApplyVol = applyVol;  // door ensureMountedAndPlay aangeroepen na mount
+    el._pcmsApplyVol = applyVol;  // called by ensureMountedAndPlay after mount
   }
 
@@ -349 +349 @@
 
   // ============================================================
-  // 4. Adapters — normaliseren de 3 zeer verschillende API's naar 1 vorm.
-  //    Elke mounter geeft { play, pause, seek } terug en roept hooks aan met
-  //    seconden (units worden hier rechtgetrokken).
+  // 4. Adapters — normalise the 3 very different APIs to one common shape.
+  //    Each mounter returns { play, pause, seek } and calls hooks with
+  //    seconds (units are normalised here).
   // ============================================================
   const MOUNTERS = {
@@ -403 +403 @@
     },
 
-    // ---- SoundCloud: Widget API, visual=false, eigen controls ----
+    // ---- SoundCloud: Widget API, visual=false, custom controls ----
     async soundcloud(mountEl, { ref, url }, hooks) {
       const SC = await scApi();
-      // Iframe zelf bouwen (kale balk) en daarna SC.Widget eraan hangen.
+      // Build the iframe ourselves (bare bar) and then attach SC.Widget to it.
       const iframe = document.createElement('iframe');
       iframe.allow = 'autoplay';
@@ -453 +453 @@
     },
 
-    // ---- Spotify: iFrame API — besturing + onze frame; geen eigen skin ----
+    // ---- Spotify: iFrame API — controls + our frame; no custom skin ----
     async spotify(mountEl, { ref, url }, hooks) {
       const IFrameAPI = await spotifyApi();
@@ -473 +473 @@
             const d = e && e.data ? e.data : {};
             hooks.onProgress((d.position || 0) / 1000, (d.duration || 0) / 1000);
-            // Geen betrouwbare 'ended'-event bij Spotify; we behandelen elke
-            // isPaused-overgang als play/pause. Einde = gewoon een pauze (de balk
-            // blijft op de eindpositie i.p.v. misleidend naar 0 te springen).
+            // No reliable 'ended' event from Spotify; we treat every
+            // isPaused transition as play/pause. End = just a pause (the bar
+            // stays at the end position rather than misleadingly jumping to 0).
             if (d.isPaused === false && lastPaused) { lastPaused = false; hooks.onPlay(); }
             else if (d.isPaused === true && !lastPaused) { lastPaused = true; hooks.onPause(); }
@@ -486 +486 @@
 
   // ============================================================
-  // 5. Scan + HTMX-/DOM-mutatie-aware (de site navigeert deels via HTMX-swaps)
+  // 5. Scan + HTMX/DOM-mutation-aware (the site partially navigates via HTMX swaps)
   // ============================================================
   function scan(root) {
@@ -492 +492 @@
       if (el.dataset.embedInit) return;
       el.dataset.embedInit = '1';
-      try { buildCard(el); } catch (e) { console.error('[pcms-embed] buildCard faalde', e); }
+      try { buildCard(el); } catch (e) { console.error('[pcms-embed] buildCard failed', e); }
     });
   }
@@ -501 +501 @@
     scan(document);
   }
-  // HTMX vervangt #pcms-main bij interne navigatie → opnieuw scannen.
+  // HTMX replaces #pcms-main on internal navigation → rescan.
   document.body.addEventListener('htmx:afterSwap', (e) => scan(e.target || document));
   document.body.addEventListener('htmx:load', (e) => scan(e.target || document));
 
-  // Teardown bij verwijdering uit de DOM (HTMX vervangt #pcms-main innerHTML, of
-  // een SPA-achtige swap). Zonder dit blijven YouTube-poll-timers + adapters/
-  // iframes hangen als je wegnavigeert terwijl een embed speelt → CPU/geheugenlek
-  // dat per navigatie opstapelt. We roepen el._pcmsDestroy() aan voor elke kaart
-  // die echt uit het document verdwijnt.
+  // Teardown on DOM removal (HTMX replaces #pcms-main innerHTML, or an SPA-like
+  // swap). Without this, YouTube poll timers + adapters/iframes linger when
+  // navigating away while an embed is playing → CPU/memory leak that accumulates
+  // per navigation. We call el._pcmsDestroy() for every card that truly leaves the document.
   const teardownObserver = new MutationObserver((muts) => {
     for (const m of muts) {

src/assets/js/smooth-scroll.js

@@ -2 +2 @@
 (function () {
   if (typeof Lenis === "undefined") return;
-  // Skip op touch/mobile — native momentum is beter dan JS lib
+  // Skip on touch/mobile — native momentum scroll is better than a JS lib
   var isMobile = window.matchMedia("(pointer: coarse)").matches || window.innerWidth < 1024;
   if (isMobile) return;