Changeset 1ecbf71 in Klonkt for src/routes

Timestamp:

06/26/2026 02:01:26 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

297c77d

Parents:

5e3be97

Message:

feat(tijdlijn): graphical redesign + inline embeds (others' media)

• Redesigned timeline cards: rounded avatars with accent ring, cleaner meta, hover lift, image grid (Mastodon-style), nicer actions, empty state.
• Render others' media: images (grid), video (<video>), audio (<audio>) — not just images.
• Inline embeds: detect the first YouTube/Spotify/SoundCloud/Vimeo link in a remote post's content and render a direct iframe (CSP already allows these frame-srcs).

File:

• src/routes/posts.js (modified) (1 diff)

src/routes/posts.js

@@ -580 +580 @@
 
 // ==================== FEDIVERSE CLIENT: home timeline + following ====================
+// Build a direct embed iframe for the first embeddable link (YouTube/Spotify/
+// SoundCloud/Vimeo) in a remote post's content, so others' media plays inline.
+function timelineEmbedHtml(html) {
+  if (!html) return null;
+  const re = /href=["']([^"']+)["']/gi; let m; const seen = new Set();
+  while ((m = re.exec(html))) {
+    const u = m[1]; if (seen.has(u)) continue; seen.add(u);
+    let p; try { p = AudioEmbedService.detectProvider(u); } catch { p = null; }
+    if (!p) continue;
+    if (p.provider === 'youtube') return `<iframe class="tl-embed-frame" src="https://www.youtube-nocookie.com/embed/${p.id}" title="YouTube" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+    if (p.provider === 'spotify') return `<iframe class="tl-embed-frame tl-embed-spotify" src="https://open.spotify.com/embed/${p.type}/${p.id}" title="Spotify" loading="lazy" frameborder="0" allow="encrypted-media"></iframe>`;
+    if (p.provider === 'soundcloud') return `<iframe class="tl-embed-frame tl-embed-sc" src="https://w.soundcloud.com/player/?url=${encodeURIComponent(p.url)}&color=%23ff5500&visual=false" title="SoundCloud" loading="lazy" frameborder="0" allow="autoplay" scrolling="no"></iframe>`;
+    if (p.provider === 'vimeo') return `<iframe class="tl-embed-frame" src="https://player.vimeo.com/video/${p.id}" title="Vimeo" loading="lazy" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
+  }
+  return null;
+}
+
 router.get('/tijdlijn', requireSiteManager, (req, res) => {
   const site = res.locals.site;
-  const timeline = site ? ActivityPubService.getTimeline(site.slug, 60) : [];
+  const timeline = (site ? ActivityPubService.getTimeline(site.slug, 60) : [])
+    .map((p) => ({ ...p, embedHtml: timelineEmbedHtml(p.content) }));
   renderPage(req, res, 'pages/timeline', {
     pageTitle: 'Tijdlijn', bodyClass: 'on-special',