Changeset b56afa7 in Klonkt

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

Location:

src

Files:

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

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;

src/routes/audio.js

@@ -158 +158 @@
 });
 
+// Same-origin proxy voor de YouTube-titel (oEmbed). YouTube's oEmbed stuurt geen
+// CORS-header, dus de browser kan 'm niet direct fetchen — wij halen 'm server-
+// side op (geen CORS) en cachen 't. Gebruikt door de audio-only YT-embed om de
+// echte videotitel te tonen i.p.v. "YouTube".
+const ytTitleCache = new Map();
+router.get('/yt-title', async (req, res) => {
+  const url = String(req.query.url || '');
+  if (!/^https:\/\/(www\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\//i.test(url)) {
+    return res.status(400).json({ error: 'bad url' });
+  }
+  if (ytTitleCache.has(url)) return res.json({ title: ytTitleCache.get(url) });
+  try {
+    const ac = new AbortController();
+    const timer = setTimeout(() => ac.abort(), 6000);
+    const r = await fetch('https://www.youtube.com/oembed?format=json&url=' + encodeURIComponent(url), { signal: ac.signal });
+    clearTimeout(timer);
+    if (!r.ok) { ytTitleCache.set(url, ''); return res.json({ title: '' }); }
+    const d = await r.json();
+    const title = (d && d.title) ? String(d.title).slice(0, 200) : '';
+    ytTitleCache.set(url, title);
+    res.json({ title });
+  } catch (e) {
+    res.status(502).json({ error: 'fetch failed' });
+  }
+});
+
 export default router;

src/views/shell.ejs

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