/**
* Klonkt Embed Player — custom, on-brand media embeds on top of the REAL
* player APIs (YouTube IFrame API, SoundCloud Widget API, Spotify iFrame API).
*
* The server (AudioEmbedService) renders a placeholder per embed:
*
* 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 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: 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 against double-init (HTMX can reload scripts).
*/
(function () {
if (window.pcmsEmbedPlayer) return;
// ============================================================
// 0. Shared playback registry (also used by audio-player.js)
// ============================================================
function registry() {
if (window.pcmsMediaRegistry) return window.pcmsMediaRegistry;
const r = {
_active: null,
// Mark `player` as the sole active one; pause the previous.
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;
}
// ============================================================
// 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 = {};
function loadScript(src) {
return new Promise((resolve, reject) => {
const s = document.createElement('script');
s.src = src; s.async = true;
s.onload = () => resolve();
s.onerror = () => reject(new Error('embed script failed: ' + src));
document.head.appendChild(s);
});
}
// 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: global callback onYouTubeIframeAPIReady (once) → wrap in a promise.
function ytApi() {
if (scripts.yt) return scripts.yt;
scripts.yt = new Promise((resolve, reject) => {
if (window.YT && window.YT.Player) return resolve(window.YT);
const prev = window.onYouTubeIframeAPIReady;
window.onYouTubeIframeAPIReady = function () {
if (typeof prev === 'function') { try { prev(); } catch (e) {} }
resolve(window.YT);
};
loadScript('https://www.youtube.com/iframe_api').catch(reject);
setTimeout(() => reject(new Error('YT API timeout')), API_TIMEOUT);
});
return scripts.yt;
}
// 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;
scripts.sc = new Promise((resolve, reject) => {
if (window.SC && window.SC.Widget) return resolve(window.SC);
loadScript('https://w.soundcloud.com/player/api.js')
.then(() => resolve(window.SC)).catch(reject);
setTimeout(() => { (window.SC && window.SC.Widget) ? resolve(window.SC) : reject(new Error('SC API timeout')); }, API_TIMEOUT);
});
return scripts.sc;
}
// Spotify: global callback onSpotifyIframeApiReady(IFrameAPI) (once) → wrap in a promise.
function spotifyApi() {
if (scripts.sp) return scripts.sp;
scripts.sp = new Promise((resolve, reject) => {
if (window.__spotifyIframeApi) return resolve(window.__spotifyIframeApi);
window.onSpotifyIframeApiReady = function (IFrameAPI) {
window.__spotifyIframeApi = IFrameAPI;
resolve(IFrameAPI);
};
loadScript('https://open.spotify.com/embed/iframe-api/v1').catch(reject);
// 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);
});
return scripts.sp;
}
// 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') {
const id = ytId(ref, url);
return { src: 'https://www.youtube-nocookie.com/embed/' + encodeURIComponent(id) + '?autoplay=1&rel=0', ratio: true, fs: true };
}
if (provider === 'soundcloud') {
return { src: 'https://w.soundcloud.com/player/?url=' + encodeURIComponent(ref || url) + '&auto_play=true&visual=true&hide_related=true', h: '300px' };
}
if (provider === 'spotify') {
const m = (ref || '').match(/^spotify:(\w+):(\w+)$/);
return { src: m ? `https://open.spotify.com/embed/${m[1]}/${m[2]}` : (url || ''), h: '152px' };
}
return { src: url || '' };
}
// ============================================================
// 2. Helpers
// ============================================================
function fmt(sec) {
if (!sec || isNaN(sec) || sec < 0) return '0:00';
const m = Math.floor(sec / 60), s = Math.floor(sec % 60);
return m + ':' + (s < 10 ? '0' : '') + s;
}
function ytId(ref, url) {
if (ref && /^[A-Za-z0-9_-]{11}$/.test(ref)) return ref;
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; // 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 : '#'; }
catch (e) { return '#'; }
}
const ICON = {
play: '',
pause: '',
volume: '',
muted: '',
};
const LABEL = { youtube: 'YouTube', soundcloud: 'SoundCloud', spotify: 'Spotify' };
// ============================================================
// 3. Card controller — builds the on-brand card + delegates to an adapter
// ============================================================
function buildCard(el) {
const provider = el.dataset.embedProvider;
const ref = el.dataset.embedRef || '';
const url = el.dataset.embedUrl || '';
if (!provider) return;
el.classList.add('pcms-embed-card', 'pcms-embed-card--' + provider);
el.classList.remove('pcms-embed-loading');
// 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: 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) {}
registry().release(self);
};
let playing = false;
let mounted = false;
let dur = 0;
// --- Mount the UI (differs per provider type) ---
const isVideo = provider === 'youtube';
const custom = provider === 'youtube' || provider === 'soundcloud'; // eigen controls
const poster = provider === 'youtube'
? `https://i.ytimg.com/vi/${ytId(ref, url)}/hqdefault.jpg` : '';
el.innerHTML = ''
+ (isVideo
? `