Changeset 2a58d76 in Klonkt for src/views/partials/post-card.ejs

Timestamp:

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

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

b31c119

Parents:

38120c7

Message:

fix(cirkel): video covers were blank in the grid view

The cover fade-in script grabbed <video class=grid-tile-img> too and
set is-loading (opacity:0) waiting for a 'load' event a <video> never
fires (it fires loadeddata/canplay), so grid video covers stayed
invisible and the tile's accent-gradient placeholder showed through.
The list view was unaffected (its selector is img-only).

• src/views/shell.ejs — qualify the fade selector as img.grid-tile-img so it no longer touches <video> elements (they show + autoplay directly)
• src/views/partials/post-tile.ejs — give the grid video a poster (still frame via the thumb proxy) so the cover is never blank even if autoplay is throttled
• src/views/partials/post-card.ejs — same poster on the list video

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

File:

• src/views/partials/post-card.ejs (modified) (1 diff)

src/views/partials/post-card.ejs

@@ -53 +53 @@
            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><% } %>
+      <% } else if (post.cover_video_url) { %><video src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" 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>