Changeset b5a09ce2 in Klonkt for src/views/pages

Timestamp:

06/30/2026 05:32:33 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

857a06f

Parents:

1d6f9a2

Message:

feat(video-cover): frontend — render animated covers as iOS video, capture in editor

• post-edit.ejs: hidden cover_video_url field; the cover uploader stores the returned MP4 url
• post.ejs: the cover <img> carries data-ios-mp4 when a loop MP4 exists
• shell.ejs: on iOS, swap <img data-ios-mp4> for a muted looping inline <video> (runs on load + htmx swaps); every other browser keeps the crisp WebP

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

Location:

src/views/pages

Files:

• post-edit.ejs (modified) (3 diffs)
• post.ejs (modified) (1 diff)

src/views/pages/post-edit.ejs

@@ -106 +106 @@
                    placeholder="<%= t('pedit.cover_url_placeholder') %>">
           </label>
+          <%# Muted loop MP4 for an animated cover (auto-made from an animated WebP). Hidden — set by the uploader. %>
+          <input type="hidden" name="cover_video_url" id="cover-video-field" value="<%= post.cover_video_url || '' %>">
           <div class="pe-cover-upload">
             <button type="button" class="pe-btn pe-btn-secondary" id="cover-upload-trigger">
@@ -1170 +1172 @@
   const coverTrigger = document.getElementById('cover-upload-trigger');
   const coverUrl     = document.getElementById('cover-url-field');
+  const coverVideo   = document.getElementById('cover-video-field');
   const coverStatus  = document.getElementById('cover-upload-status');
   const coverWrap    = document.getElementById('cover-preview-wrap');
@@ -1329 +1332 @@
         const j = await uploadImage(edited);
         coverUrl.value = j.url;
+        if (coverVideo) coverVideo.value = j.video || ''; // muted loop MP4 for an animated cover
         showCoverPreview(j.url);
-        coverStatus.textContent = '<%= t('pedit.js_uploaded') %> ✓';
+        coverStatus.textContent = (j.video ? '🎬 ' : '') + '<%= t('pedit.js_uploaded') %> ✓';
         setTimeout(() => { coverStatus.textContent = ''; }, 2000);
       } catch (e) {

src/views/pages/post.ejs

@@ -20 +20 @@
   <% if (post.cover_image_url) { %>
     <figure class="post-cover">
-      <img src="<%= post.cover_image_url %>" alt="">
+      <img src="<%= post.cover_image_url %>" alt=""<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>>
     </figure>
   <% } %>