Changeset 4c9f29a in Klonkt for src/assets/js

Timestamp:

06/15/2026 03:23:14 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

3e86f1c

Parents:

650b601

git-author:

roboburr <roboburr@…> (06/15/2026 03:22:47 AM)

git-committer:

roboburr <roboburr@…> (06/15/2026 03:23:14 AM)

Message:

feat: on-brand media embeds via the real player APIs

Replaces bare platform iframes with on-brand cards, powered by the
official JS APIs so play/pause/progress are in our own hands:

• YouTube (IFrame Player API) + SoundCloud (Widget API): fully custom controls, native chrome hidden.
• Spotify (iFrame API): our frame around it + controls (their player UI remains; restyling not possible without Premium+OAuth).
• Shared PlaybackRegistry: mutual exclusion -- only 1 thing plays at a time (incl. the site audio player). Replaces the focus/blur heuristic with real play events (blur stays as fallback for iframe-only embeds).
• Progressive enhancement: if an ad-blocker blocks the platform API, falls back seamlessly to the bare platform iframe (autoplay). The resting-state card is our brand for everyone.

AudioEmbedService now renders a placeholder div (data-embed-*) for YT/SC/
Spotify instead of an iframe; embed-player.js builds the card client-side.
CSP scriptSrc extended with the player API hosts.

Adversarial review (workflow) -> 6 bugs fixed: HTMX swap leak (poll timers/
adapters -> MutationObserver teardown + adapter.destroy()), javascript: URL XSS
(scheme guard in detectProvider + safeHref client-side), Spotify ended
misdetection (no more reset-to-0), ytId/server regex on exact 11, blur scope
limited to .folio-embed.

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

Location:

src/assets/js

Files:

• audio-player.js (modified) (4 diffs)
• embed-player.js (added)

src/assets/js/audio-player.js

@@ -386 +386 @@
   function close() {
     pause();
+    mediaRegistry().release(registrySelf);
     root.classList.add('audio-player-hidden');
     document.body.classList.remove('has-audio-player');
@@ -425 +426 @@
 
   // ============================================================
+  // 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.)
+  function mediaRegistry() {
+    if (window.pcmsMediaRegistry) return window.pcmsMediaRegistry;
+    const r = {
+      _active: null,
+      setActive(player) {
+        if (this._active && this._active !== player && this._active.pause) {
+          try { this._active.pause(); } catch (e) {}
+        }
+        this._active = player;
+      },
+      release(player) { if (this._active === player) this._active = null; },
+    };
+    window.pcmsMediaRegistry = r;
+    return r;
+  }
+  const registrySelf = { pause() { try { audio.pause(); } catch (e) {} } };
+
+  // ============================================================
   // 5. Audio element events → UI sync
   // ============================================================
@@ -434 +460 @@
     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
@@ -547 +574 @@
   });
 
-  // Geen dubbel geluid: élke embed (YouTube/Vimeo/SoundCloud/Spotify/Apple Music/
-  // Bandcamp) is een iframe. Zodra de gebruiker er een aanklikt om af te spelen,
-  // gaat de focus naar dat iframe -> window 'blur'. Speelt onze speler dan?
-  // Pauzeer 'm. (Op de site zijn iframes per definitie embeds.)
+  // 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.)
   window.addEventListener('blur', () => {
     setTimeout(() => {
       const el = document.activeElement;
-      if (el && el.tagName === 'IFRAME' && audio.src && !audio.paused) {
+      // Alleen embed-iframes (binnen .folio-embed) pauzeren de speler — niet een
+      // willekeurig iframe (captcha/reclame/kaart) dat per ongeluk focus krijgt.
+      if (el && el.tagName === 'IFRAME' && el.closest('.folio-embed') && audio.src && !audio.paused) {
         pause();
       }