Changeset 9e6b54f in Klonkt for src/assets/js/embed-player.js

Timestamp:

06/20/2026 03:53:58 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

976d36d

Parents:

73b41eb

Message:

feat(player): YouTube audio via the site audio player (continuous play + bottom bar)

Audio-only YouTube embeds now play through the persistent site audio player
instead of a per-card player:

• audio-player.js gets a second backend: a hidden YT IFrame player in the (persistent) player root. loadTrack/play/pause/seek/volume/mute/progress/ended are backend-aware (ytMode). New API: pcmsAudioPlayer.playYouTube({id,...}).
• embed-player.js: an audio-only YT embed is now a launcher that calls pcmsAudioPlayer.playYouTube (no own control bar anymore).

Result: YouTube audio appears in the bottom bar, keeps playing during htmx
navigation, and mutual exclusion with the site tracks is automatic (one player).
busters audio-player.js?v=21, embed-player.js?v=9, embed.css?v=6.

Co-Authored-By: Claude <noreply@…>

File:

• src/assets/js/embed-player.js (modified) (2 diffs)

src/assets/js/embed-player.js

@@ -189 +189 @@
     if (audioOnly) el.classList.add('pcms-embed-audio-mode');
     const isVideo = provider === 'youtube' && !audioOnly;
-    const custom = provider === 'youtube' || provider === 'soundcloud'; // eigen controls
+    // Audio-only YT speelt via de site-onderbalk → geen eigen in-kaart controlebar.
+    const custom = (provider === 'youtube' || provider === 'soundcloud') && !audioOnly;
     const poster = provider === 'youtube'
       ? `https://i.ytimg.com/vi/${ytId(ref, url)}/hqdefault.jpg` : '';
@@ -306 +307 @@
     // Eerste interactie → adapter mounten + spelen. Daarna toggelt de knop.
     async function ensureMountedAndPlay() {
+      // Audio-only YouTube → speel via de site-audiospeler (onderbalk): zichtbaar
+      // én doorspelen bij navigeren. De inline-kaart is enkel de launcher.
+      if (audioOnly && window.pcmsAudioPlayer && typeof window.pcmsAudioPlayer.playYouTube === 'function') {
+        window.pcmsAudioPlayer.playYouTube({ id: ytId(ref, url), cover: poster, postUrl: location.pathname + location.search });
+        el.classList.add('pcms-embed-elsewhere');
+        return;
+      }
       if (mounted) { if (adapter) adapter.play(); return; }
       mounted = true;