Changeset adb6291 in Klonkt

Timestamp:

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

Author:

roboburr <roboburr@…>

Branches:

main

Children:

a95dbfd

Parents:

1c33804

Message:

feat(video-cover): render iOS video covers across grid, list, related + listing pages

• post-tile.ejs / post-card.ejs / post.ejs(related): the cover <img> carries data-ios-mp4 when a loop MP4 exists; shell.ejs's iOS swap upgrades it everywhere covers render
• cover_video_url threaded through the explicit listing SELECTs (tags/types/users/related); the home grid + main list already use SELECT p.*

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

Location:

src

Files:

• routes/posts.js (modified) (2 diffs)
• routes/tags.js (modified) (2 diffs)
• routes/types.js (modified) (1 diff)
• routes/users.js (modified) (1 diff)
• views/pages/post.ejs (modified) (1 diff)
• views/partials/post-card.ejs (modified) (1 diff)
• views/partials/post-tile.ejs (modified) (1 diff)

src/routes/posts.js

@@ -998 +998 @@
   const candidates = isHub
     ? db.prepare(`
-        SELECT p.id, p.slug, p.title, p.cover_image_url, p.published_at, p.tags, p.nsfw, p.content_warning, s.slug AS site_slug
+        SELECT p.id, p.slug, p.title, p.cover_image_url, p.cover_video_url, p.published_at, p.tags, p.nsfw, p.content_warning, s.slug AS site_slug
         FROM posts p JOIN sites s ON s.id = p.site_id
         WHERE p.status = 'published' AND p.id != ?
@@ -1004 +1004 @@
       `).all(post.id)
     : db.prepare(`
-        SELECT id, slug, title, cover_image_url, published_at, tags, nsfw, content_warning
+        SELECT id, slug, title, cover_image_url, cover_video_url, published_at, tags, nsfw, content_warning
         FROM posts
         WHERE site_id = ? AND status = 'published' AND id != ?

src/routes/tags.js

@@ -22 +22 @@
   try {
     posts = db.prepare(`
-      SELECT DISTINCT p.id, p.slug, p.title, p.excerpt, p.cover_image_url,
+      SELECT DISTINCT p.id, p.slug, p.title, p.excerpt, p.cover_image_url, p.cover_video_url,
                       p.published_at, u.username AS author_username
       FROM posts p, json_each(p.tags) j
@@ -35 +35 @@
     // Fall back to a LIKE match if json_each isn't available for some reason
     posts = db.prepare(`
-      SELECT p.id, p.slug, p.title, p.excerpt, p.cover_image_url,
+      SELECT p.id, p.slug, p.title, p.excerpt, p.cover_image_url, p.cover_video_url,
              p.published_at, u.username AS author_username
       FROM posts p JOIN users u ON u.id = p.author_id

src/routes/types.js

@@ -21 +21 @@
 
   const posts = db.prepare(`
-    SELECT p.id, p.slug, p.title, p.excerpt, p.cover_image_url,
+    SELECT p.id, p.slug, p.title, p.excerpt, p.cover_image_url, p.cover_video_url,
            p.published_at, p.type, u.username AS author_username
     FROM posts p JOIN users u ON u.id = p.author_id

src/routes/users.js

@@ -27 +27 @@
 
   const posts = db.prepare(`
-    SELECT p.id, p.slug, p.title, p.excerpt, p.cover_image_url, p.published_at
+    SELECT p.id, p.slug, p.title, p.excerpt, p.cover_image_url, p.cover_video_url, p.published_at
     FROM posts p
     WHERE p.author_id = ? AND p.site_id = ? AND p.status = 'published'

src/views/pages/post.ejs

@@ -182 +182 @@
                hx-push-url="/<%= rp.slug %>" hx-indicator="#pcms-loading"<% } %>>
               <% if (rp.cover_image_url) { %>
-                <span class="post-related-cover<%= rp.nsfw ? ' nsfw-media' : '' %>" aria-hidden="true"><img class="post-related-img" src="<%= rp.cover_image_url %>" alt="" loading="lazy" decoding="async"><% if (rp.nsfw) { %><span class="nsfw-veil"><span class="nsfw-veil-label">🔞 <%= rp.content_warning || t('post.nsfw_warning') %></span><span class="nsfw-veil-btn"><%= t('post.nsfw_show') %></span></span><% } %></span>
+                <span class="post-related-cover<%= rp.nsfw ? ' nsfw-media' : '' %>" aria-hidden="true"><img class="post-related-img" src="<%= rp.cover_image_url %>" alt="" loading="lazy" decoding="async"<% if (rp.cover_video_url) { %> data-ios-mp4="<%= rp.cover_video_url %>"<% } %>><% if (rp.nsfw) { %><span class="nsfw-veil"><span class="nsfw-veil-label">🔞 <%= rp.content_warning || t('post.nsfw_warning') %></span><span class="nsfw-veil-btn"><%= t('post.nsfw_show') %></span></span><% } %></span>
               <% } else { %>
                 <span class="post-related-cover post-related-cover--empty<%= rp.nsfw ? ' nsfw-media' : '' %>" aria-hidden="true"><% if (rp.nsfw) { %><span class="nsfw-veil"><span class="nsfw-veil-label">🔞 <%= rp.content_warning || t('post.nsfw_warning') %></span><span class="nsfw-veil-btn"><%= t('post.nsfw_show') %></span></span><% } %></span>

src/views/partials/post-card.ejs

@@ -52 +52 @@
            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">
+           alt="" loading="lazy" decoding="async"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>>
       <% 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 (_hasCover) { %><img class="grid-tile-img" src="<%= thumb(post.cover_image_url, 480) %>" alt="" loading="lazy" decoding="async"><% } %>
+  <% 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 (_typeLabel) { %>