Changeset 9e6b54f in Klonkt for src/assets/css/embed.css

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/css/embed.css (modified) (1 diff)

src/assets/css/embed.css

@@ -122 +122 @@
   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. */