Changeset 5f3f9ec in Klonkt for src/views

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@…>

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;
+const _hasCover  = !!post.cover_image_url || !!post.cover_video_url;
 const _typeLabel = (post.type && post.type !== 'overig' && post.type !== 'post') ? post.type : '';
 const _isPinned  = !!post.pinned;
@@ -49 +49 @@
        <% 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"<% } %>
        aria-label="<%= post.title || '(zonder titel)' %>" tabindex="-1">
-      <img src="<%= thumb(post.cover_image_url, 480) %>"
+      <% if (post.cover_image_url) { %><img src="<%= thumb(post.cover_image_url, 480) %>"
            srcset="<%= thumb(post.cover_image_url, 320) %> 320w, <%= thumb(post.cover_image_url, 640) %> 640w, <%= thumb(post.cover_image_url, 1280) %> 1280w"
            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 %>" autoplay loop muted playsinline></video><% } %>
       <% if (post.nsfw) { %><span class="nsfw-veil"><span class="nsfw-veil-label">🔞 <%= post.content_warning || t('post.nsfw_warning') %></span><span class="nsfw-veil-btn"><%= t('post.nsfw_show') %></span></span><% } %>
     </a>

src/views/partials/post-tile.ejs

@@ -6 +6 @@
 const _isPinned = !!post.pinned;
 const _isBoost = !!post.isBoost;
-const _hasCover = !!post.cover_image_url;
+const _hasCover = !!post.cover_image_url || !!post.cover_video_url;
 const _typeLabel = (post.type && post.type !== 'post') ? post.type : '';
 const _src = post.source_name || '';   // bron-site (cirkel-feed: van welke site komt deze post)
@@ -19 +19 @@
    <% 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 (_hasCover) { %><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 %>"<% } %>><% } %>
+  <% 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 %>" autoplay loop muted playsinline></video><% } %>
 
   <% if (_typeLabel) { %>