Changeset 976d36d in Klonkt for src/assets

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@…>

Location:

src/assets/js

Files:

• audio-player.js (modified) (1 diff)
• embed-player.js (modified) (3 diffs)

src/assets/js/audio-player.js

@@ -924 +924 @@
       postUrl: opts.postUrl || '',
     }], 0);
+    // Upgrade de cover async naar de scherpe maxresdefault (ook 16:9, geen balken)
+    // als die bestaat. Async → de user-gesture voor afspelen blijft intact; de
+    // direct gezette mqdefault toont al meteen een balkloze cover.
+    try {
+      const maxres = 'https://i.ytimg.com/vi/' + opts.id + '/maxresdefault.jpg';
+      const im = new Image();
+      im.onload = () => {
+        if (im.naturalWidth <= 120) return;  // 120x90 = YouTube-placeholder (geen maxres)
+        const t = queue[currentIndex];
+        if (t && t.yt === opts.id) { t.cover = maxres; setCoverImage(cover, maxres); setCoverImage(sheetCover, maxres); }
+      };
+      im.src = maxres;
+    } catch (e) {}
   }
 

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;