Index: src/assets/css/embed.css =================================================================== --- src/assets/css/embed.css (revision 73b41ebe795a1650e35e118b3416a3b94077b035) +++ src/assets/css/embed.css (revision 9e6b54fd187cd53d7d9e8a697c036e2fc7302335) @@ -122,4 +122,24 @@ pointer-events: none; } +/* Verborgen YouTube-audio-speler ván de site-audiospeler (onderbalk). Off-screen + * met echte grootte zodat de browser 'm niet pauzeert; alleen het geluid telt. */ +#pcms-yt-host { + position: absolute; + left: -99999px; + top: 0; + width: 320px; + height: 180px; + opacity: 0; + pointer-events: none; +} +/* Audio-only embed-kaart die nu via de onderbalk speelt = launcher-hint. */ +.pcms-embed-elsewhere { opacity: .9; } +.pcms-embed-elsewhere .pcms-embed-title::after { + content: ' — speelt in de speler ↓'; + font-weight: normal; + opacity: .6; + font-size: .85em; +} + /* Audio-only YouTube: de YT-speler draait verborgen (off-screen) maar moet een * echte grootte houden, anders pauzeert de browser 'm. Alleen het geluid telt. */ Index: src/assets/js/audio-player.js =================================================================== --- src/assets/js/audio-player.js (revision 73b41ebe795a1650e35e118b3416a3b94077b035) +++ src/assets/js/audio-player.js (revision 9e6b54fd187cd53d7d9e8a697c036e2fc7302335) @@ -289,4 +289,88 @@ }); + // ============================================================ + // 4a. YouTube-backend — speelt YT-AUDIO via een verborgen IFrame-speler in de + // (persistente) speler-root. Zo speelt YouTube net als de site-tracks door bij + // htmx-navigatie en is 't bedienbaar in de onderbalk. Video wordt niet getoond. + // ============================================================ + let ytMode = false, ytPlayer = null, ytReady = false, ytApiLoading = null, ytTick = null; + + function loadYTApi() { + if (window.YT && window.YT.Player) return Promise.resolve(window.YT); + if (ytApiLoading) return ytApiLoading; + ytApiLoading = new Promise((resolve) => { + const prev = window.onYouTubeIframeAPIReady; + window.onYouTubeIframeAPIReady = function () { if (prev) { try { prev(); } catch (e) {} } resolve(window.YT); }; + if (!document.querySelector('script[src*="youtube.com/iframe_api"]')) { + const s = document.createElement('script'); s.src = 'https://www.youtube.com/iframe_api'; s.async = true; document.head.appendChild(s); + } + setTimeout(() => { if (window.YT && window.YT.Player) resolve(window.YT); }, 8000); + }); + return ytApiLoading; + } + + function ensureYT() { + if (ytPlayer) return Promise.resolve(ytPlayer); + return loadYTApi().then((YT) => new Promise((resolve) => { + if (!YT || !YT.Player) { resolve(null); return; } + let host = document.getElementById('pcms-yt-host'); + if (!host) { + host = document.createElement('div'); host.id = 'pcms-yt-host'; + const m = document.createElement('div'); m.id = 'pcms-yt-mount'; host.appendChild(m); + root.appendChild(host); + } + ytPlayer = new YT.Player('pcms-yt-mount', { + host: 'https://www.youtube-nocookie.com', + playerVars: { controls: 0, playsinline: 1, rel: 0, modestbranding: 1, iv_load_policy: 3, origin: window.location.origin }, + events: { + onReady: () => { ytReady = true; try { ytPlayer.setVolume(audio.muted ? 0 : Math.round(audio.volume * 100)); } catch (e) {} resolve(ytPlayer); }, + onStateChange: onYTState, + }, + }); + setTimeout(() => resolve(ytPlayer), 8000); + })); + } + + function onYTState(e) { + if (!ytMode) return; + const s = e.data; // 1 playing, 2 paused, 0 ended + if (s === 1) { + isPlaying = true; root.classList.add('is-playing'); root.classList.remove('audio-needs-tap'); + mediaRegistry().setActive(registrySelf); startYTTick(); pullYTMeta(); + } else if (s === 2) { + isPlaying = false; root.classList.remove('is-playing'); stopYTTick(); + } else if (s === 0) { + stopYTTick(); next(); + } + } + + function startYTTick() { + if (ytTick) return; + ytTick = setInterval(() => { + if (!ytPlayer || !ytMode) return; + try { updateProgressUI(ytPlayer.getCurrentTime() || 0, ytPlayer.getDuration() || 0); } catch (e) {} + }, 250); + } + function stopYTTick() { if (ytTick) { clearInterval(ytTick); ytTick = null; } } + + function pullYTMeta() { + try { + const t = queue[currentIndex]; if (!t || !t.yt || !ytPlayer.getVideoData) return; + const vd = ytPlayer.getVideoData(); + if (vd && vd.title && (!t.title || t.title === 'YouTube')) { + t.title = vd.title; titleEl.textContent = vd.title; sheetTitle.textContent = vd.title; renderQueue(); markPlaying(t.id); + } + } catch (e) {} + } + + // Gedeelde voortgang-UI (beide backends). Audio gebruikt 'timeupdate', YT de tick. + function updateProgressUI(cur, dur) { + if (!dur || isNaN(dur)) return; + const pct = Math.max(0, Math.min(100, (cur / dur) * 100)); + seekFill.style.width = pct + '%'; sheetSeekFill.style.width = pct + '%'; + currentEl.textContent = formatTime(cur); totalEl.textContent = formatTime(dur); + sheetCurrent.textContent = formatTime(cur); sheetTotal.textContent = formatTime(dur); + } + function loadTrack(index, autoplay, metaOnly) { if (!queue[index]) { @@ -296,14 +380,8 @@ currentIndex = index; const t = queue[index]; - if (!t.url) { - console.error('[pcms-audio] track has no url', t); - return; - } - console.log('[pcms-audio] loading', t.title, t.url, metaOnly ? '(meta only)' : ''); - // Metadata + chrome update synchronously so the UI reacts instantly while - // the bytes download. - titleEl.textContent = t.title || 'Untitled'; + // Metadata + chrome update synchronously (geldt voor beide backends). + titleEl.textContent = t.title || (t.yt ? 'YouTube' : 'Untitled'); artistEl.textContent = t.artist || ''; - sheetTitle.textContent = t.title || 'Untitled'; + sheetTitle.textContent = t.title || (t.yt ? 'YouTube' : 'Untitled'); sheetArtist.textContent = t.artist || ''; sheetAlbum.textContent = albumName || ''; @@ -316,4 +394,30 @@ if (metaOnly) return; + + // YouTube-bron → verborgen YT-speler i.p.v. de blob-