Changeset 976d36d in Klonkt

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

Files:

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

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;

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=21"></script>
+<script src="/assets/js/audio-player.js?v=22"></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=9" defer></script>
+<script src="/assets/js/embed-player.js?v=10" defer></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>