Changeset 2a10445 in Klonkt for src/views/partials

Timestamp:

07/30/2026 08:23:47 AM (6 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

094f7d0

Parents:

15f1cb5

Message:

De tegel leest zijn beeld uit de content, de cover-kopie is weg

Robins melding: de video stond dubbel op de postpagina, een keer afspeelbaar
in de content en een keer als cover erboven. Terecht; de cover-promotie van
vanmiddag was de verkeerde helft van de oplossing.

Nu doet de tegel wat de Cirkel-kaart al deed: zijn beeld AFLEIDEN uit de
content. post-tile en post-card pakken de eerste video (met zijn poster) of
de eerste afbeelding uit post.content als er geen echte cover is, en de
grid-tegel speelt de video muted-loopend als zijn eigen thumbnail. Het
post-model blijft single-source: c2sCreatePost zet geen covers meer.

En zelfherstel voor wat er al staat: covers die hun eigen content-media
dupliceren (het korte cover-promotie-venster) worden bij boot leeggemaakt;
idempotent en raakt alleen die gevallen.

Changed files:
src/services/ActivityPubService.js

• c2sCreatePost zet geen covers meer; media leeft alleen in de content

src/views/partials/post-tile.ejs

• content-afgeleide fallback: video (met poster) of afbeelding

src/views/partials/post-card.ejs

• dezelfde fallback in de lijstweergave

src/config/database.js

• zelfherstel: cover-kopieen van content-media leeggemaakt

test/c2s-compose.test.js

• covers blijven null; de video federeert precies een keer

remarks: 338 tests groen, server start.

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

Location:

src/views/partials

Files:

• post-card.ejs (modified) (2 diffs)
• post-tile.ejs (modified) (2 diffs)

src/views/partials/post-card.ejs

@@ -16 +16 @@
 const _ext       = !!_external;
 const _src       = post.source_name || '';
-const _hasCover  = !!post.cover_image_url || !!post.cover_video_url;
+const _realCover = !!post.cover_image_url || !!post.cover_video_url;
+// Content-derived fallback (see post-tile.ejs): a C2S post's media lives in
+// its content, and the card fronts it from there.
+let _cVideo = null, _cPoster = null, _cImg = null;
+if (!_realCover && post.content) {
+  const vm = String(post.content).match(/<video[^>]*\ssrc="([^"]+)"[^>]*>/i);
+  if (vm) { _cVideo = vm[1]; const pm = vm[0].match(/poster="([^"]+)"/i); if (pm) _cPoster = pm[1]; }
+  else { const im = String(post.content).match(/<img[^>]*\ssrc="([^"]+)"/i); if (im) _cImg = im[1]; }
+}
+const _hasCover  = _realCover || !!_cVideo || !!_cImg;
 const _typeLabel = (post.type && post.type !== 'overig' && post.type !== 'post') ? post.type : '';
 const _isPinned  = !!post.pinned;
@@ -53 +62 @@
            sizes="(min-width: 768px) 120px, 100vw"
            alt="" loading="lazy" decoding="async"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>>
-      <% } else if (post.cover_video_url) { %><video src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" autoplay loop muted playsinline></video><% } %>
+      <% } else if (post.cover_video_url) { %><video src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" autoplay loop muted playsinline></video><% } else if (_cVideo) { %><video src="<%= _cVideo %>"<% if (_cPoster) { %> poster="<%= _cPoster %>"<% } %> autoplay loop muted playsinline preload="metadata"></video><% } else if (_cImg) { %><img src="<%= _cImg %>" alt="" loading="lazy" decoding="async"><% } %>
       <% if (post.nsfw) { %><span class="nsfw-veil"><%- include('nsfw-veil', { cw: post.content_warning }) %></span><% } %>
     </a>

src/views/partials/post-tile.ejs

@@ -7 +7 @@
 const _isBoost = !!post.isBoost;
 const _hasCover = !!post.cover_image_url || !!post.cover_video_url;
+// A C2S post carries its media IN the content (a cover next to it showed the
+// video twice on the post page). The tile derives its picture from the
+// content instead, like the Cirkel card: first <video> (with its poster) or
+// first <img>.
+let _cVideo = null, _cPoster = null, _cImg = null;
+if (!_hasCover && post.content) {
+  const vm = String(post.content).match(/<video[^>]*\ssrc="([^"]+)"[^>]*>/i);
+  if (vm) { _cVideo = vm[1]; const pm = vm[0].match(/poster="([^"]+)"/i); if (pm) _cPoster = pm[1]; }
+  else { const im = String(post.content).match(/<img[^>]*\ssrc="([^"]+)"/i); if (im) _cImg = im[1]; }
+}
+const _showCover = _hasCover || !!_cVideo || !!_cImg;
 const _typeLabel = (post.type && post.type !== 'post') ? post.type : '';
 const _src = post.source_name || '';   // bron-site (cirkel-feed: van welke site komt deze post)
@@ -14 +25 @@
 const _ext = !!_external;
 %>
-<a class="grid-tile<%= _hasCover ? '' : ' grid-tile-gradient' %><%= (_isPinned || _isBoost) ? ' is-pinned' : '' %><%= post.nsfw ? ' nsfw-media' : '' %>"
+<a class="grid-tile<%= _showCover ? '' : ' grid-tile-gradient' %><%= (_isPinned || _isBoost) ? ' is-pinned' : '' %><%= post.nsfw ? ' nsfw-media' : '' %>"
    href="<%= _href %>"
    style="--tile-hue: <%= _tileHue %>;"
    <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>>
 
-  <% if (post.cover_image_url) { %><img class="grid-tile-img" src="<%= thumb(post.cover_image_url, 480) %>" alt="" loading="lazy" decoding="async"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>><% } else if (post.cover_video_url) { %><video class="grid-tile-img" src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" autoplay loop muted playsinline></video><% } %>
+  <% if (post.cover_image_url) { %><img class="grid-tile-img" src="<%= thumb(post.cover_image_url, 480) %>" alt="" loading="lazy" decoding="async"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>><% } else if (post.cover_video_url) { %><video class="grid-tile-img" src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" autoplay loop muted playsinline></video><% } else if (_cVideo) { %><video class="grid-tile-img" src="<%= _cVideo %>"<% if (_cPoster) { %> poster="<%= _cPoster %>"<% } %> autoplay loop muted playsinline preload="metadata"></video><% } else if (_cImg) { %><img class="grid-tile-img" src="<%= _cImg %>" alt="" loading="lazy" decoding="async"><% } %>
 
   <% if (_typeLabel) { %>