Changeset 5f3f9ec in Klonkt for src/routes/circle.js

Timestamp:

06/30/2026 11:06:00 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

86fa2d2

Parents:

e091add

Message:

fix(cirkel): render a federated video cover as <video>, not a broken <img>

An animated cover that federates as an MP4 (Video attachment) put the video URL into cover_image_url
— circle.js's mediaImage fell back to media[0] even when it was the video — so the Cirkel feed
rendered <img src=...mp4> = a broken image. Now the video is extracted separately (never used as the
cover image) and post-tile/post-card render a muted looping <video> for a video-only cover.

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

File:

• src/routes/circle.js (modified) (3 diffs)

src/routes/circle.js

@@ -19 +19 @@
   try { return s ? JSON.parse(s) : []; } catch { return []; }
 }
-function mediaImage(media_json) {
+// The cover image + (separately) a cover video from a remote note's media. NEVER use a video/audio
+// item as the cover image — that produced a broken <img> for an animated cover that federated as an
+// MP4 (the video becomes a <video> instead).
+function coverMedia(media_json) {
   const media = safeJson(media_json).map((m) => ({ ...m, url: safeUrl(m.url) })).filter((m) => m.url);
-  return media.find((m) => /image/i.test(m.type || '')) || media[0] || null;
+  const video = media.find((m) => /video/i.test(m.type || '')) || null;
+  const image = media.find((m) => /image/i.test(m.type || ''))
+    || (media[0] && !/(video|audio)/i.test(media[0].type || '') ? media[0] : null);
+  return { image, video };
 }
 function htmlToText(html) {
@@ -37 +43 @@
     const titleM = (r.content || '').match(/^\s*<p>\s*<strong>([\s\S]*?)<\/strong>/i);
     const realTitle = titleM ? htmlToText(titleM[1]).trim() : '';
-    const image = mediaImage(r.media_json);
+    const cover = coverMedia(r.media_json);
     const name = r.author_name || r.author_handle || 'Onbekend';
     return {
@@ -46 +52 @@
         : (text ? (text.length > 90 ? text.slice(0, 90) + '…' : text) : name),
       excerpt: '',
-      cover_image_url: image ? image.url : null,
+      cover_image_url: cover.image ? cover.image.url : null,
+      cover_video_url: cover.video ? cover.video.url : null,
       published_at: r.published,
       created_at: r.published,