Changeset 2a58d76 in Klonkt

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

Location:

src/views

Files:

• partials/post-card.ejs (modified) (1 diff)
• partials/post-tile.ejs (modified) (1 diff)
• shell.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>

src/views/partials/post-tile.ejs

@@ -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 (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 (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 (_typeLabel) { %>

src/views/shell.ejs

@@ -759 +759 @@
   if (window.__coverFadeWired) return; window.__coverFadeWired = true;
   function scan(root) {
-    (root || document).querySelectorAll('.grid-tile-img, .post-list-cover img, .tl-media-img img').forEach(function (img) {
+    (root || document).querySelectorAll('img.grid-tile-img, .post-list-cover img, .tl-media-img img').forEach(function (img) {
       if (img.dataset.fade) return; img.dataset.fade = '1';
       if (img.complete && img.naturalWidth > 0) return;   // already loaded → leave visible