Changeset 976d36d in Klonkt for src/assets/js/embed-player.js

Timestamp:

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

Author:

roboburr <roboburr@…>

Branches:

main

Children:

b56afa7

Parents:

9e6b54f

Message:

fix(embed): bar-free square cover for YouTube audio

hqdefault is 4:3 with baked-in black bars → doesn't fill a square cover.
Now mqdefault (16:9, no bars) as the direct cover, and async upgrade to the
sharp maxresdefault (also no bars) when available. Applies to the launcher
card and the mini/sheet cover. busters audio-player.js?v=22,
embed-player.js?v=10.

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

File:

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

src/assets/js/embed-player.js

@@ -193 +193 @@
     const poster = provider === 'youtube'
       ? `https://i.ytimg.com/vi/${ytId(ref, url)}/hqdefault.jpg` : '';
+    // 16:9-thumbnail ZONDER zwarte balken (mqdefault) voor de vierkante cover —
+    // hqdefault is 4:3 met letterbox en vult een vierkant niet schoon.
+    const ytThumb = provider === 'youtube'
+      ? `https://i.ytimg.com/vi/${ytId(ref, url)}/mqdefault.jpg` : '';
 
     el.innerHTML = ''
@@ -229 +233 @@
     let preMuteVol = 100;
     // Audio-only YouTube: zet de thumbnail als albumhoes op de audio-kaart.
-    if (audioOnly && poster) {
+    if (audioOnly && ytThumb) {
       const art0 = el.querySelector('.pcms-embed-art');
-      if (art0) { art0.style.backgroundImage = `url('${poster}')`; art0.classList.add('has-art'); }
+      if (art0) { art0.style.backgroundImage = `url('${ytThumb}')`; art0.classList.add('has-art'); }
     }
 
@@ -310 +314 @@
       // é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 });
+        window.pcmsAudioPlayer.playYouTube({ id: ytId(ref, url), cover: ytThumb, postUrl: location.pathname + location.search });
         el.classList.add('pcms-embed-elsewhere');
         return;