source: Klonkt/src/assets/js/embed-player.js@ 441f5d6

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

Branding: 100% PrutCMS/PrutFolio-free — Klonkt as original product

All fork/lineage references (README, package description, server/comments,
PrutFolio-as-noun -> Klonkt-site) removed. Plus a small, mysterious wink
at a certain Bart in CircleFederation.js. Internal package name (prutfolio)
+ PWA id + server paths left untouched (stability).

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