source: Klonkt/src/assets/js/embed-player.js@ 16b0c00

main
Last change on this file since 16b0c00 was 16b0c00, checked in by roboburr <roboburr@…>, 3 months ago

fix(embed): Spotify API via CSP whitelist + faster fallback

Diagnosis (measured live): the loader open.spotify.com (200) loads the real
API bundle from embed-cdn.spotifycdn.com, which was NOT in our CSP scriptSrc
→ API never init → 8s wait before the bare iframe = "sluggish". Not an
ad-blocker issue.

  • CSP: *.spotifycdn.com added to scriptSrc + connectSrc (+ *.scdn.co).
  • Spotify API timeout 8s → 4s so the iframe fallback appears quickly if the API still doesn't initialise (CDN 503 / origin gating).

buster embed-player.js?v=5.

Co-Authored-By: Claude <noreply@…>
  • Property mode set to 100644
File size: 23.4 KB
Line 
1/**
2 * Klonkt Embed Player — eigen, in-huisstijl media-embeds bovenop de ÉCHTE
3 * player-API's (YouTube IFrame API, SoundCloud Widget API, Spotify iFrame API).
4 *
5 * De server (AudioEmbedService) rendert per embed een placeholder:
6 * <div class="folio-embed folio-embed--<provider> pcms-embed-card"
7 * data-embed-provider data-embed-ref data-embed-type data-embed-url></div>
8 * Dit script bouwt daar onze eigen kaart omheen (cover/poster + onze play-knop +
9 * voortgangsbalk in huisstijl) en bestuurt de onderliggende speler via de
10 * platform-API, zodat play/pause/voortgang in ÓNZE handen liggen.
11 *
12 * Capability-eerlijkheid:
13 * - youtube/soundcloud → volledig eigen controls (native chrome verborgen).
14 * - spotify → besturing + onze frame eromheen; Spotify's eigen UI
15 * blijft binnenin (kan niet anders zonder Premium+OAuth).
16 *
17 * Mutual exclusion: elke speler (incl. de site-audiospeler in audio-player.js)
18 * registreert zich in window.pcmsMediaRegistry. Start er één → de vorige pauzeert.
19 * Dit vervangt de oude focus/blur-heuristiek door echte play-events.
20 *
21 * Singleton — guard tegen dubbel-init (HTMX laadt scripts soms opnieuw).
22 */
23(function () {
24 if (window.pcmsEmbedPlayer) return;
25
26 // ============================================================
27 // 0. Gedeelde playback-registry (ook door audio-player.js gebruikt)
28 // ============================================================
29 function registry() {
30 if (window.pcmsMediaRegistry) return window.pcmsMediaRegistry;
31 const r = {
32 _active: null,
33 // Markeer `player` als de enige actieve; pauzeer de vorige.
34 setActive(player) {
35 if (this._active && this._active !== player && this._active.pause) {
36 try { this._active.pause(); } catch (e) {}
37 }
38 this._active = player;
39 },
40 release(player) { if (this._active === player) this._active = null; },
41 };
42 window.pcmsMediaRegistry = r;
43 return r;
44 }
45
46 // ============================================================
47 // 1. Lazy script-loaders — 1 promise per platform, gedeeld over N embeds.
48 // We laden een platform-script PAS als er een embed van dat platform op de
49 // pagina daadwerkelijk wordt gestart.
50 // ============================================================
51 const scripts = {};
52 function loadScript(src) {
53 return new Promise((resolve, reject) => {
54 const s = document.createElement('script');
55 s.src = src; s.async = true;
56 s.onload = () => resolve();
57 s.onerror = () => reject(new Error('embed-script faalde: ' + src));
58 document.head.appendChild(s);
59 });
60 }
61 // Belangrijk: alle loaders REJECTEN bij een script-fout (bv. een ad-blocker die
62 // het API-script blokkeert) én na een time-out — zodat de aanroeper netjes kan
63 // terugvallen op het kale platform-iframe i.p.v. eeuwig te hangen.
64 const API_TIMEOUT = 8000;
65
66 // YouTube: globale callback onYouTubeIframeAPIReady (1×) → in promise wikkelen.
67 function ytApi() {
68 if (scripts.yt) return scripts.yt;
69 scripts.yt = new Promise((resolve, reject) => {
70 if (window.YT && window.YT.Player) return resolve(window.YT);
71 const prev = window.onYouTubeIframeAPIReady;
72 window.onYouTubeIframeAPIReady = function () {
73 if (typeof prev === 'function') { try { prev(); } catch (e) {} }
74 resolve(window.YT);
75 };
76 loadScript('https://www.youtube.com/iframe_api').catch(reject);
77 setTimeout(() => reject(new Error('YT API timeout')), API_TIMEOUT);
78 });
79 return scripts.yt;
80 }
81 // SoundCloud: geen globale ready-callback; resolve op script-onload, daarna
82 // wacht elke widget op z'n eigen SC.Widget.Events.READY.
83 function scApi() {
84 if (scripts.sc) return scripts.sc;
85 scripts.sc = new Promise((resolve, reject) => {
86 if (window.SC && window.SC.Widget) return resolve(window.SC);
87 loadScript('https://w.soundcloud.com/player/api.js')
88 .then(() => resolve(window.SC)).catch(reject);
89 setTimeout(() => { (window.SC && window.SC.Widget) ? resolve(window.SC) : reject(new Error('SC API timeout')); }, API_TIMEOUT);
90 });
91 return scripts.sc;
92 }
93 // Spotify: globale callback onSpotifyIframeApiReady(IFrameAPI) (1×) → wrappen.
94 function spotifyApi() {
95 if (scripts.sp) return scripts.sp;
96 scripts.sp = new Promise((resolve, reject) => {
97 if (window.__spotifyIframeApi) return resolve(window.__spotifyIframeApi);
98 window.onSpotifyIframeApiReady = function (IFrameAPI) {
99 window.__spotifyIframeApi = IFrameAPI;
100 resolve(IFrameAPI);
101 };
102 loadScript('https://open.spotify.com/embed/iframe-api/v1').catch(reject);
103 // Korter dan API_TIMEOUT: Spotify's bundle initialiseert snel óf helemaal
104 // niet (CDN 503 / origin-gating). Niet 8s wachten vóór de iframe-fallback.
105 setTimeout(() => reject(new Error('Spotify API timeout')), 4000);
106 });
107 return scripts.sp;
108 }
109
110 // Kaal platform-iframe als fallback wanneer de JS-API geblokkeerd/onbereikbaar
111 // is. Ad-blockers laten de embed-iframes doorgaans wél door. Autoplay-param
112 // omdat we hier altijd in een user-gesture-context zitten (klik op play).
113 function fallbackIframe(provider, ref, url) {
114 if (provider === 'youtube') {
115 const id = ytId(ref, url);
116 return { src: 'https://www.youtube-nocookie.com/embed/' + encodeURIComponent(id) + '?autoplay=1&rel=0', ratio: true, fs: true };
117 }
118 if (provider === 'soundcloud') {
119 return { src: 'https://w.soundcloud.com/player/?url=' + encodeURIComponent(ref || url) + '&auto_play=true&visual=true&hide_related=true', h: '300px' };
120 }
121 if (provider === 'spotify') {
122 const m = (ref || '').match(/^spotify:(\w+):(\w+)$/);
123 return { src: m ? `https://open.spotify.com/embed/${m[1]}/${m[2]}` : (url || ''), h: '152px' };
124 }
125 return { src: url || '' };
126 }
127
128 // ============================================================
129 // 2. Helpers
130 // ============================================================
131 function fmt(sec) {
132 if (!sec || isNaN(sec) || sec < 0) return '0:00';
133 const m = Math.floor(sec / 60), s = Math.floor(sec % 60);
134 return m + ':' + (s < 10 ? '0' : '') + s;
135 }
136 function ytId(ref, url) {
137 if (ref && /^[A-Za-z0-9_-]{11}$/.test(ref)) return ref;
138 const m = (url || '').match(/(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
139 if (m) return m[1];
140 return null; // geen blinde slice — een ongeldige ref geeft liever niets dan een kapotte id
141 }
142 // Alleen http(s) als href toelaten (defense-in-depth tegen javascript:/data:).
143 function safeHref(u) {
144 try { const p = new URL(u, location.href); return (p.protocol === 'http:' || p.protocol === 'https:') ? u : '#'; }
145 catch (e) { return '#'; }
146 }
147 const ICON = {
148 play: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 4l12 8-12 8z" fill="currentColor"/></svg>',
149 pause: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h4v16H7zM13 4h4v16h-4z" fill="currentColor"/></svg>',
150 };
151 const LABEL = { youtube: 'YouTube', soundcloud: 'SoundCloud', spotify: 'Spotify' };
152
153 // ============================================================
154 // 3. Card controller — bouwt de huisstijl-kaart + delegeert naar een adapter
155 // ============================================================
156 function buildCard(el) {
157 const provider = el.dataset.embedProvider;
158 const ref = el.dataset.embedRef || '';
159 const url = el.dataset.embedUrl || '';
160 if (!provider) return;
161
162 el.classList.add('pcms-embed-card', 'pcms-embed-card--' + provider);
163 el.classList.remove('pcms-embed-loading');
164
165 // Onze speler-zijde (registry-peer). pause() wijst naar de adapter zodra die
166 // gemount is; ervoor is 't een no-op.
167 let adapter = null;
168 const self = { pause() { if (adapter && adapter.pause) { try { adapter.pause(); } catch (e) {} } } };
169
170 // Teardown-hook: aangeroepen door de MutationObserver als deze kaart uit de
171 // DOM verdwijnt (HTMX-swap) → adapter opruimen (timers/iframes) + registry
172 // vrijgeven, zodat er geen poll-timers of spelers blijven lekken.
173 el._pcmsDestroy = function () {
174 try { if (adapter && adapter.destroy) adapter.destroy(); } catch (e) {}
175 registry().release(self);
176 };
177
178 let playing = false;
179 let mounted = false;
180 let dur = 0;
181
182 // --- UI ophangen (verschilt per provider-type) ---
183 const isVideo = provider === 'youtube';
184 const custom = provider === 'youtube' || provider === 'soundcloud'; // eigen controls
185 const poster = provider === 'youtube'
186 ? `https://i.ytimg.com/vi/${ytId(ref, url)}/hqdefault.jpg` : '';
187
188 el.innerHTML = ''
189 + (isVideo
190 ? `<div class="pcms-embed-stage"><div class="pcms-embed-mount"></div>`
191 + `<button type="button" class="pcms-embed-poster"${poster ? ` style="background-image:url('${poster}')"` : ''} aria-label="Afspelen">`
192 + `<span class="pcms-embed-bigplay">${ICON.play}</span></button></div>`
193 : `<div class="pcms-embed-audio">`
194 + `<button type="button" class="pcms-embed-art" aria-label="Afspelen"><span class="pcms-embed-bigplay">${ICON.play}</span></button>`
195 + `<div class="pcms-embed-info"><div class="pcms-embed-title">${LABEL[provider] || provider}</div>`
196 + `<div class="pcms-embed-sub"></div></div>`
197 + `<div class="pcms-embed-mount"></div></div>`)
198 + (custom
199 ? `<div class="pcms-embed-bar">`
200 + `<button type="button" class="pcms-embed-pp" aria-label="Afspelen/pauzeren">${ICON.play}</button>`
201 + `<span class="pcms-embed-cur mono">0:00</span>`
202 + `<div class="pcms-embed-seek" role="slider" aria-label="Voortgang" tabindex="0"><div class="pcms-embed-seek-fill"></div></div>`
203 + `<span class="pcms-embed-dur mono">0:00</span>`
204 + `<a class="pcms-embed-badge" href="${escAttr(safeHref(url))}" target="_blank" rel="noopener">${LABEL[provider] || provider}</a>`
205 + `</div>`
206 : `<div class="pcms-embed-frame-badge"><a href="${escAttr(safeHref(url))}" target="_blank" rel="noopener">via ${LABEL[provider] || provider}</a></div>`);
207
208 const mountEl = el.querySelector('.pcms-embed-mount');
209 const ppBtn = el.querySelector('.pcms-embed-pp');
210 const curEl = el.querySelector('.pcms-embed-cur');
211 const durEl = el.querySelector('.pcms-embed-dur');
212 const seekEl = el.querySelector('.pcms-embed-seek');
213 const seekFill = el.querySelector('.pcms-embed-seek-fill');
214 const posterBtn = el.querySelector('.pcms-embed-poster, .pcms-embed-art');
215 const subEl = el.querySelector('.pcms-embed-sub');
216
217 function setPlayingUI(on) {
218 playing = on;
219 el.classList.toggle('is-playing', on);
220 if (ppBtn) ppBtn.innerHTML = on ? ICON.pause : ICON.play;
221 }
222 function setProgress(cur, total) {
223 if (total > 0) { dur = total; if (durEl) durEl.textContent = fmt(total); }
224 if (curEl) curEl.textContent = fmt(cur);
225 if (seekFill && dur > 0) seekFill.style.width = Math.max(0, Math.min(100, (cur / dur) * 100)) + '%';
226 }
227
228 const hooks = {
229 onReady(meta) {
230 el.classList.add('is-ready');
231 el.classList.remove('pcms-embed-busy');
232 if (meta && meta.title && subEl) subEl.textContent = meta.title;
233 if (meta && meta.artwork) {
234 const art = el.querySelector('.pcms-embed-art');
235 if (art) { art.style.backgroundImage = `url('${meta.artwork}')`; art.classList.add('has-art'); }
236 }
237 if (meta && meta.duration) setProgress(0, meta.duration);
238 },
239 onPlay() { setPlayingUI(true); registry().setActive(self); },
240 onPause() { setPlayingUI(false); },
241 onEnded() { setPlayingUI(false); setProgress(0, dur); registry().release(self); },
242 onProgress(cur, total) { setProgress(cur, total); },
243 };
244
245 // API geblokkeerd/onbereikbaar → kaal platform-iframe (graceful degradation).
246 // De mutual-exclusion loopt voor deze fallback via de blur-heuristiek
247 // (audio-player.js), want de kaart krijgt geen .is-mounted.
248 function renderFallback() {
249 const fb = fallbackIframe(provider, ref, url);
250 if (!fb.src) { el.classList.remove('pcms-embed-busy'); el.classList.add('pcms-embed-error'); return; }
251 const iframe = document.createElement('iframe');
252 iframe.src = fb.src;
253 iframe.loading = 'lazy';
254 iframe.title = LABEL[provider] || provider;
255 iframe.setAttribute('allow', 'autoplay; encrypted-media; clipboard-write; picture-in-picture; fullscreen');
256 if (fb.fs) iframe.allowFullscreen = true;
257 iframe.style.cssText = fb.ratio
258 ? 'width:100%;aspect-ratio:16/9;border:0;display:block;'
259 : 'width:100%;height:' + (fb.h || '152px') + ';border:0;display:block;';
260 el.classList.remove('is-mounted', 'pcms-embed-busy');
261 el.classList.add('pcms-embed-fallback');
262 el.innerHTML = '';
263 el.appendChild(iframe);
264
265 // Mutual exclusion óók voor de fallback-iframe. Een cross-origin iframe
266 // kunnen we niet via een API pauzeren, dus 'pauze' = herladen ZONDER
267 // autoplay (= stopt het geluid, speler blijft zichtbaar/herstartbaar).
268 // We registreren 'm als actief: nu (= gebruiker start de embed) pauzeert de
269 // site-speler/andere embeds; en als de site-speler later start, pauzeert de
270 // registry deze fallback.
271 self.pause = function () {
272 try {
273 const noAuto = fb.src
274 .replace(/([?&])(?:autoplay=1|auto_play=true)(&|$)/gi, '$1')
275 .replace(/[?&]$/, '');
276 if (iframe.src === noAuto) {
277 // src ongewijzigd (bv. Spotify zonder autoplay) → forceer een reload
278 iframe.src = 'about:blank';
279 setTimeout(() => { try { iframe.src = noAuto; } catch (e) {} }, 30);
280 } else {
281 iframe.src = noAuto;
282 }
283 } catch (e) {}
284 };
285 registry().setActive(self);
286 }
287
288 // Eerste interactie → adapter mounten + spelen. Daarna toggelt de knop.
289 async function ensureMountedAndPlay() {
290 if (mounted) { if (adapter) adapter.play(); return; }
291 mounted = true;
292 el.classList.add('pcms-embed-busy');
293 try {
294 adapter = await MOUNTERS[provider](mountEl, { ref, url }, hooks);
295 // is-mounted: CSS verbergt de poster (video) of de Spotify-facade en
296 // toont de echte speler. Voor SoundCloud blijft onze kaart+balk staan en
297 // blijft het (functionele) iframe off-screen verborgen.
298 el.classList.add('is-mounted');
299 adapter.play();
300 } catch (err) {
301 console.warn('[pcms-embed] API niet beschikbaar, val terug op kaal iframe', provider, err);
302 renderFallback();
303 }
304 }
305
306 if (posterBtn) posterBtn.addEventListener('click', ensureMountedAndPlay);
307 if (ppBtn) ppBtn.addEventListener('click', () => {
308 if (!mounted) return ensureMountedAndPlay();
309 if (playing) { adapter && adapter.pause(); } else { adapter && adapter.play(); }
310 });
311 if (seekEl) seekEl.addEventListener('click', (e) => {
312 if (!adapter || !adapter.seek || !dur) return;
313 const rect = seekEl.getBoundingClientRect();
314 const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
315 adapter.seek(ratio * dur);
316 });
317 }
318
319 function escAttr(s) {
320 return String(s || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
321 }
322
323 // ============================================================
324 // 4. Adapters — normaliseren de 3 zeer verschillende API's naar 1 vorm.
325 // Elke mounter geeft { play, pause, seek } terug en roept hooks aan met
326 // seconden (units worden hier rechtgetrokken).
327 // ============================================================
328 const MOUNTERS = {
329 // ---- YouTube: IFrame Player API, eigen controls (controls:0) ----
330 async youtube(mountEl, { ref, url }, hooks) {
331 const YT = await ytApi();
332 const id = ytId(ref, url);
333 return new Promise((resolve, reject) => {
334 let pollTimer = null;
335 const player = new YT.Player(mountEl, {
336 videoId: id,
337 host: 'https://www.youtube-nocookie.com',
338 playerVars: {
339 controls: 0, modestbranding: 1, rel: 0, playsinline: 1, fs: 0,
340 disablekb: 1, iv_load_policy: 3, origin: window.location.origin,
341 },
342 events: {
343 onReady() {
344 let d = 0; try { d = player.getDuration() || 0; } catch (e) {}
345 hooks.onReady({ duration: d });
346 resolve({
347 play() { try { player.playVideo(); } catch (e) {} },
348 pause() { try { player.pauseVideo(); } catch (e) {} },
349 seek(sec) { try { player.seekTo(sec, true); } catch (e) {} },
350 destroy() {
351 if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
352 try { player.destroy(); } catch (e) {}
353 },
354 });
355 },
356 onStateChange(e) {
357 // -1 unstarted, 0 ended, 1 playing, 2 paused, 3 buffering, 5 cued
358 if (e.data === 1) {
359 hooks.onPlay();
360 if (!pollTimer) pollTimer = setInterval(() => {
361 try { hooks.onProgress(player.getCurrentTime() || 0, player.getDuration() || 0); } catch (e) {}
362 }, 250);
363 } else if (e.data === 2) {
364 hooks.onPause();
365 if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
366 } else if (e.data === 0) {
367 hooks.onEnded();
368 if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
369 }
370 },
371 onError() { reject(new Error('YT error')); },
372 },
373 });
374 });
375 },
376
377 // ---- SoundCloud: Widget API, visual=false, eigen controls ----
378 async soundcloud(mountEl, { ref, url }, hooks) {
379 const SC = await scApi();
380 // Iframe zelf bouwen (kale balk) en daarna SC.Widget eraan hangen.
381 const iframe = document.createElement('iframe');
382 iframe.allow = 'autoplay';
383 iframe.title = 'SoundCloud';
384 const params = new URLSearchParams({
385 url: ref || url, visual: 'false', auto_play: 'false', hide_related: 'true',
386 show_comments: 'false', show_user: 'false', show_teaser: 'false',
387 sharing: 'false', buy: 'false', download: 'false', show_artwork: 'true',
388 single_active: 'true', color: 'ff5500',
389 });
390 iframe.src = 'https://w.soundcloud.com/player/?' + params.toString();
391 mountEl.appendChild(iframe);
392 const widget = SC.Widget(iframe);
393 const E = SC.Widget.Events;
394 return new Promise((resolve, reject) => {
395 let resolved = false;
396 widget.bind(E.READY, () => {
397 widget.getCurrentSound((sound) => {
398 const meta = sound ? {
399 title: sound.title || '',
400 artwork: (sound.artwork_url || (sound.user && sound.user.avatar_url) || '').replace('-large', '-t300x300'),
401 } : {};
402 widget.getDuration((ms) => { meta.duration = (ms || 0) / 1000; hooks.onReady(meta); });
403 });
404 resolved = true;
405 resolve({
406 play() { widget.play(); },
407 pause() { widget.pause(); },
408 seek(sec) { widget.seekTo(sec * 1000); },
409 destroy() {
410 try { ['READY', 'PLAY', 'PAUSE', 'FINISH', 'PLAY_PROGRESS', 'ERROR'].forEach((k) => E[k] && widget.unbind(E[k])); } catch (e) {}
411 try { iframe.remove(); } catch (e) {}
412 },
413 });
414 });
415 widget.bind(E.PLAY, () => hooks.onPlay());
416 widget.bind(E.PAUSE, () => hooks.onPause());
417 widget.bind(E.FINISH, () => hooks.onEnded());
418 widget.bind(E.PLAY_PROGRESS, (d) => {
419 hooks.onProgress((d.currentPosition || 0) / 1000, 0);
420 });
421 widget.bind(E.ERROR, () => { if (!resolved) reject(new Error('SC error')); });
422 setTimeout(() => { if (!resolved) reject(new Error('SC timeout')); }, 12000);
423 });
424 },
425
426 // ---- Spotify: iFrame API — besturing + onze frame; geen eigen skin ----
427 async spotify(mountEl, { ref, url }, hooks) {
428 const IFrameAPI = await spotifyApi();
429 const uri = ref || url;
430 return new Promise((resolve, reject) => {
431 let lastPaused = true, resolved = false;
432 IFrameAPI.createController(mountEl, { uri, width: '100%', height: 152 }, (controller) => {
433 controller.addListener('ready', () => {
434 hooks.onReady({});
435 resolved = true;
436 resolve({
437 play() { try { controller.resume(); } catch (e) { try { controller.play(); } catch (e2) {} } },
438 pause() { try { controller.pause(); } catch (e) {} },
439 seek(sec) { try { controller.seek(sec); } catch (e) {} },
440 destroy() { try { controller.destroy(); } catch (e) {} },
441 });
442 });
443 controller.addListener('playback_update', (e) => {
444 const d = e && e.data ? e.data : {};
445 hooks.onProgress((d.position || 0) / 1000, (d.duration || 0) / 1000);
446 // Geen betrouwbare 'ended'-event bij Spotify; we behandelen elke
447 // isPaused-overgang als play/pause. Einde = gewoon een pauze (de balk
448 // blijft op de eindpositie i.p.v. misleidend naar 0 te springen).
449 if (d.isPaused === false && lastPaused) { lastPaused = false; hooks.onPlay(); }
450 else if (d.isPaused === true && !lastPaused) { lastPaused = true; hooks.onPause(); }
451 });
452 });
453 setTimeout(() => { if (!resolved) reject(new Error('Spotify timeout')); }, 12000);
454 });
455 },
456 };
457
458 // ============================================================
459 // 5. Scan + HTMX-/DOM-mutatie-aware (de site navigeert deels via HTMX-swaps)
460 // ============================================================
461 function scan(root) {
462 (root || document).querySelectorAll('.folio-embed[data-embed-provider]').forEach((el) => {
463 if (el.dataset.embedInit) return;
464 el.dataset.embedInit = '1';
465 try { buildCard(el); } catch (e) { console.error('[pcms-embed] buildCard faalde', e); }
466 });
467 }
468
469 if (document.readyState === 'loading') {
470 document.addEventListener('DOMContentLoaded', () => scan(document));
471 } else {
472 scan(document);
473 }
474 // HTMX vervangt #pcms-main bij interne navigatie → opnieuw scannen.
475 document.body.addEventListener('htmx:afterSwap', (e) => scan(e.target || document));
476 document.body.addEventListener('htmx:load', (e) => scan(e.target || document));
477
478 // Teardown bij verwijdering uit de DOM (HTMX vervangt #pcms-main innerHTML, of
479 // een SPA-achtige swap). Zonder dit blijven YouTube-poll-timers + adapters/
480 // iframes hangen als je wegnavigeert terwijl een embed speelt → CPU/geheugenlek
481 // dat per navigatie opstapelt. We roepen el._pcmsDestroy() aan voor elke kaart
482 // die echt uit het document verdwijnt.
483 const teardownObserver = new MutationObserver((muts) => {
484 for (const m of muts) {
485 m.removedNodes.forEach((node) => {
486 if (node.nodeType !== 1) return;
487 const cards = [];
488 if (node.matches && node.matches('.folio-embed[data-embed-init]')) cards.push(node);
489 if (node.querySelectorAll) node.querySelectorAll('.folio-embed[data-embed-init]').forEach((c) => cards.push(c));
490 cards.forEach((c) => {
491 if (typeof c._pcmsDestroy === 'function' && !document.contains(c)) {
492 try { c._pcmsDestroy(); } catch (e) {}
493 }
494 });
495 });
496 }
497 });
498 try { teardownObserver.observe(document.body, { childList: true, subtree: true }); } catch (e) {}
499
500 window.pcmsEmbedPlayer = { scan, registry };
501})();
Note: See TracBrowser for help on using the repository browser.