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

Timestamp:

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

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d43ea3f

Parents:

976d36d

Message:

feat(embed): show real YouTube title on the audio-only card

YT oEmbed has no CORS → new same-origin proxy GET /audio/yt-title (server
fetches oEmbed + caches it). The audio-only embed now shows the real video
title instead of "YouTube", and passes it to the site player. buster
embed-player.js?v=11.

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

File:

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

src/assets/js/embed-player.js

@@ -233 +233 @@
     let preMuteVol = 100;
     // Audio-only YouTube: zet de thumbnail als albumhoes op de audio-kaart.
+    let ytTitle = '';  // echte videotitel (via same-origin oEmbed-proxy)
     if (audioOnly && ytThumb) {
       const art0 = el.querySelector('.pcms-embed-art');
       if (art0) { art0.style.backgroundImage = `url('${ytThumb}')`; art0.classList.add('has-art'); }
+      // Haal de echte titel op (server-proxy, want YT-oEmbed heeft geen CORS) en
+      // toon 'm i.p.v. "YouTube".
+      fetch('/audio/yt-title?url=' + encodeURIComponent(url))
+        .then((r) => (r.ok ? r.json() : null))
+        .then((d) => {
+          if (d && d.title) {
+            ytTitle = d.title;
+            const tt = el.querySelector('.pcms-embed-title');
+            if (tt) tt.textContent = d.title;
+          }
+        })
+        .catch(() => {});
     }
 
@@ -314 +327 @@
       // é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: ytThumb, postUrl: location.pathname + location.search });
+        window.pcmsAudioPlayer.playYouTube({ id: ytId(ref, url), title: ytTitle || undefined, cover: ytThumb, postUrl: location.pathname + location.search });
         el.classList.add('pcms-embed-elsewhere');
         return;