source: Klonkt/src/assets/js/embed-player.js@ 73b41eb

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

feat(embed): YouTube audio-only option in posts

Per embed you now choose audio-only or video. [[embed:audio:URL]] (YouTube)
renders as an audio card with our controls (play/seek/volume + thumbnail as
cover); the YT player runs hidden off-screen and provides only the sound.
[[embed:URL]] stays video. The editor embed button asks for audio or video
when a YouTube URL is given. Server: audio:/video: prefix in the shortcode
→ data-embed-mode. busters embed-player.js?v=8, embed.css?v=5.

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