Changeset 8d43aa1 in Klonkt

Timestamp:

06/20/2026 04:39:28 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

8ab20b6

Parents:

e056e56

Message:

fix(player): prewarm hidden YT player (autoplay within gesture)

The YT player was only created on click (cold) → by the time it was ready
the click gesture had expired → YouTube blocked autoplay (flaky: only worked
if the player happened to be warm). Now embed-player prewarms the player as
soon as an audio-only YT embed/album renders
(pcmsAudioPlayer.prewarmYouTube), so the first click falls within the
gesture. busters audio-player.js?v=26, embed-player.js?v=15.

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

Location:

src

Files:

• assets/js/audio-player.js (modified) (1 diff)
• assets/js/embed-player.js (modified) (2 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/js/audio-player.js

@@ -982 +982 @@
   }
 
+  // Maak de verborgen YT-speler vast aan (zonder iets te spelen), zodat 'ie bij de
+  // eerste klik al klaar staat → loadVideoById valt dan binnen de user-gesture en
+  // YouTube's autoplay-policy blokkeert het niet.
+  function prewarmYouTube() { try { ensureYT(); } catch (e) {} }
+
   window.pcmsAudioPlayer = {
-    setQueue, play, pause, next, prev, close, openSheet, closeSheet, playYouTube, playYouTubeList,
+    setQueue, play, pause, next, prev, close, openSheet, closeSheet, playYouTube, playYouTubeList, prewarmYouTube,
     isPlaying: () => isPlaying,
     currentTrack: () => queue[currentIndex] || null,

src/assets/js/embed-player.js

@@ -243 +243 @@
       const art0 = el.querySelector('.pcms-embed-art');
       if (art0) { art0.style.backgroundImage = `url('${ytThumb}')`; art0.classList.add('has-art'); }
+      // Speler vast aanmaken → eerste klik valt binnen de user-gesture (autoplay).
+      if (window.pcmsAudioPlayer && window.pcmsAudioPlayer.prewarmYouTube) window.pcmsAudioPlayer.prewarmYouTube();
       // Haal de echte titel op (server-proxy, want YT-oEmbed heeft geen CORS) en
       // toon 'm i.p.v. "YouTube".
@@ -445 +447 @@
     countEl.textContent = ids.length + ' track' + (ids.length === 1 ? '' : 's');
     if (coverImg) coverImg.src = thumb(ids[0]);
+    // Speler vast aanmaken → eerste klik valt binnen de user-gesture (autoplay).
+    if (window.pcmsAudioPlayer && window.pcmsAudioPlayer.prewarmYouTube) window.pcmsAudioPlayer.prewarmYouTube();
 
     olEl.innerHTML = ids.map((id, i) =>

src/views/shell.ejs

@@ -300 +300 @@
      ?v=N — cache-buster: bump bij elke audio-player.js wijziging zodat
      Cloudflare (max-age=1y) niet de oude versie blijft serveren. -->
-<script src="/assets/js/audio-player.js?v=25"></script>
+<script src="/assets/js/audio-player.js?v=26"></script>
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
      player-API's + gedeelde mutual-exclusion registry met de site-speler. -->
-<script src="/assets/js/embed-player.js?v=14" defer></script>
+<script src="/assets/js/embed-player.js?v=15" defer></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>