Changeset b56afa7 in Klonkt for src/routes

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/routes/audio.js (modified) (1 diff)

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;