Changeset 15f1cb5 in Klonkt

Timestamp:

07/30/2026 08:09:51 AM (6 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

2a10445

Parents:

79f00c5

Message:

De tegel speelt de video als zijn eigen thumbnail

Robins aanwijzing (30-7) bij de (untitled)-gradient: een videopost uit de app
mag in het Klonkt-grid de video zelf als thumbnail afspelen. De machinerie
bestond al (animated covers renderen als muted-loop video in de tegel);
C2S-posts zetten alleen nooit een cover.

Nu promoveert de eerste video van een C2S-post tot cover_video_url, met
bewust GEEN cover-image ernaast: de image-tak van de tegel zou winnen en de
tegel bevriezen. Een fotopost krijgt zijn eerste foto als cover, dus ook die
verliest de (untitled)-gradient.

In buildNote schuiven de C2S-entries voor de cover-push: de URL-dedupe houdt
de eerste, en dat moet de entry zijn die zijn mediaType en poster kent,
anders verloor de federatie het icon zodra de video ook cover werd.

Changed files:
src/services/ActivityPubService.js

• c2sCreatePost: eerste video wordt cover-video, eerste foto cover-image
• buildNote: C2S-entries voor de covers, zodat de rijke entry wint

test/c2s-compose.test.js

• de tegelbelofte: cover-video gezet, geen cover-image ernaast, en de dedupe houdt de entry met de poster

remarks: 338 tests groen.

-robo
Co-Authored-By: Claude Opus 5 <noreply@…>

Files:

• src/services/ActivityPubService.js (modified) (5 diffs)
• test/c2s-compose.test.js (modified) (2 diffs)

src/services/ActivityPubService.js

@@ -374 +374 @@
   // unreliable on Mastodon and its iOS apps; the MP4 plays everywhere. Else the still cover image.
   // Each entry carries the media URL + its alt text (federated as the AS2 attachment `name`, for a11y).
-  if (post.cover_video_url && !noImages) urls.push({ url: abs(post.cover_video_url), name: post.cover_alt || '' });
-  else if (post.cover_image_url && !noImages) urls.push({ url: abs(post.cover_image_url), name: post.cover_alt || '' });
   // Media a C2S composer attached (shaer-j3uh): federate with their REAL
   // mediaType, because the extension map below knows no audio and would call
-  // an m4a an Image. Images also live inline in the content, so the dedupe
-  // by URL keeps them single.
+  // an m4a an Image. Pushed BEFORE the covers: a C2S video doubles as the
+  // cover video, and the URL-dedupe keeps the FIRST entry, which must be the
+  // one that knows its type and poster. Images also live inline in the
+  // content, so the dedupe keeps those single too.
   try {
     for (const a of JSON.parse(post.c2s_attachments || '[]')) {
@@ -385 +385 @@
     }
   } catch { /* malformed never blocks the Note */ }
+  if (post.cover_video_url && !noImages) urls.push({ url: abs(post.cover_video_url), name: post.cover_alt || '' });
+  else if (post.cover_image_url && !noImages) urls.push({ url: abs(post.cover_image_url), name: post.cover_alt || '' });
   let body = post.content || '';
   // Only federate inline images we can actually serve: absolute http(s) URLs, or our own
@@ -2408 +2410 @@
     return `<p><video controls playsinline preload="metadata"${poster} src="${a.url}"></video></p>`;
   }).join('');
+  // The web tile (Robins aanwijzing, 30-7): a video post's first video
+  // becomes the cover video, so the grid plays it muted-looping as its own
+  // thumbnail, exactly like an animated cover. Deliberately NO cover image
+  // next to it: the tile's image branch would win and freeze the tile. A
+  // photo post gets its first image as cover, instead of the (untitled)
+  // gradient.
+  const coverVid = media.find((a) => a.mediaType.startsWith('video/'));
+  const coverImg = media.find((a) => a.mediaType.startsWith('image/'));
   const postId = crypto.randomUUID();
   const slug = 'n-' + postId.slice(0, 8);
@@ -2418 +2428 @@
   const vis = c2sVisibility(object);
   const fanOnly = (vis === 'friends' || vis === 'direct') ? 1 : 0;
-  db.prepare(`INSERT INTO posts (id, site_id, slug, author_id, title, content, excerpt, status, type, language, fan_only, ap_visibility, created_at, updated_at, published_at)
-              VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)`)
-    .run(postId, site.id, slug, user.id, '', html + mediaHtml, '', 'published', 'post', object.language || 'nl', fanOnly, vis, now, now, now);
+  db.prepare(`INSERT INTO posts (id, site_id, slug, author_id, title, content, excerpt, status, type, language, fan_only, ap_visibility, cover_image_url, cover_video_url, created_at, updated_at, published_at)
+              VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)`)
+    .run(postId, site.id, slug, user.id, '', html + mediaHtml, '', 'published', 'post', object.language || 'nl', fanOnly, vis,
+      coverVid ? null : (coverImg ? coverImg.url : null), coverVid ? coverVid.url : null, now, now, now);
   if (media.length) { try { db.prepare('UPDATE posts SET c2s_attachments = ? WHERE id = ?').run(JSON.stringify(media), postId); } catch { /* column exists via ensureColumn */ } }
   try { db.prepare('UPDATE posts SET content_rendered = ? WHERE id = ?').run(bakePostContent(html + mediaHtml), postId); } catch { /* render fallback covers it */ }
@@ -2426 +2437 @@
   try { db.prepare('INSERT INTO posts_fts(content, title, author, post_id) VALUES (?,?,?,?)').run(HtmlSanitizerService.toPlainText(html), '', user.username || '', postId); } catch { /* FTS non-fatal */ }
   if (vis !== 'direct') {
-    deliverCreate(site, { id: postId, slug, title: '', content: html + mediaHtml, published_at: now, created_at: now, fan_only: fanOnly, ap_visibility: vis, c2s_attachments: media.length ? JSON.stringify(media) : null }).catch(() => { /* best-effort */ });
+    deliverCreate(site, { id: postId, slug, title: '', content: html + mediaHtml, published_at: now, created_at: now, fan_only: fanOnly, ap_visibility: vis, cover_image_url: coverVid ? null : (coverImg ? coverImg.url : null), cover_video_url: coverVid ? coverVid.url : null, c2s_attachments: media.length ? JSON.stringify(media) : null }).catch(() => { /* best-effort */ });
   }
   return { status: 201, id: postId, url: `${base}/ap/notes/${postId}` };

test/c2s-compose.test.js

@@ -85 +85 @@
     assert.equal(vid.icon && vid.icon.url, 'https://test.example/media/reply-media/film.mp4.poster.jpg',
       'the poster federates as the attachment icon');
+    // The web tile plays the video as its own thumbnail (Robins aanwijzing):
+    // the first video becomes the cover video, with NO cover image beside it,
+    // because the tile's image branch would win and freeze the tile.
+    assert.equal(post.cover_video_url, '/media/reply-media/film.mp4');
+    assert.equal(post.cover_image_url, null);
+    assert.equal((note.attachment || []).filter((a) => a.url.endsWith('film.mp4')).length, 1,
+      'cover video + attachment dedupe to the one entry that knows its poster');
   } finally {
     if (prev === undefined) delete process.env.MEDIA_PATH; else process.env.MEDIA_PATH = prev;
@@ -115 +122 @@
   });
   assert.equal(r.status, 201, 'a picture can be the whole message');
+  const post = db.prepare('SELECT * FROM posts WHERE id = ?').get(r.id);
+  assert.equal(post.cover_image_url, '/media/reply-media/alleen.jpg',
+    'a photo post fronts its photo instead of the (untitled) gradient');
 });