Fix videos in status posts

slices/main/decorators/posts/decorator.rb

@@ -45,6 +45,10 @@ module Main
             return photos.first["url"]
           end
 
+          if videos?
+            return videos.first["value"]
+          end
+
           inline_images.first[1] if inline_images
         end
 

slices/main/templates/posts/show.html.slim

@@ -52,7 +52,6 @@ article class="h-entry"
               video loop=false muted=true controls=true
                 source type="video/mp4" src="#{video["value"]}"
               figcaption= video["alt"]
-              a href="#" data-replay="video-#{index}" Replay
 
 
         - if post.location
@@ -167,4 +166,4 @@ article class="h-entry"
 
 svg width="10" height="10" viewBox="0 0 10 10"
   clipPath id="squircleClip" clipPathUnits="objectBoundingBox"
-    path fill="red" stroke="none" d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5"          
+    path fill="red" stroke="none" d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5"

slices/main/templates/shared/_photo_post.html.slim

@@ -4,6 +4,12 @@
       a href="#{post.permalink}#photo-#{idx}"
         img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{photo["value"]}" alt="#{photo["alt"]}"
 - else
-  div class="rounded max-w-xs"
-    a href="#{post.permalink}"
-      img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}"
+  - if post.photos.count > 0
+    div class="rounded max-w-xs"
+      a href="#{post.permalink}"
+        img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}"
+  - if post.videos.count > 0
+    div class="rounded max-w-xs"
+      a href="#{post.permalink}"
+        video class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" loop=false muted=true controls=false
+          source type="video/mp4" src="#{post.videos[0]["value"]}"

slices/main/templates/shared/_status.html.slim

@@ -1,17 +1,26 @@
 div class="mb-8 h-entry border border-gray-200 m-2 p-4 bg-gray-50 hover:bg-gray-100 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-950 hover:dark:border-slate-900 rounded"
-  a class="border-b-2 border-transparent hover:border-blue-600 hover:border-b-2" href="/post/#{post.slug}"
-    div class="e-content prose-p:mb-0 prose-img:my-2 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline p-name text-base prose prose-ul:list-none prose-ul:pl-0 prose-li:pl-0 text-gray-800 dark:text-gray-200 prose-a:dark:text-gray-100 mb-4 prose-img:rounded"
-      - if post.photos.count == 0 && post.key_image.nil?
+  div class="border-b-2 border-transparent"
+    div
+      - if !post.photos? && post.key_image.nil?
         div class="flex"
           div class="text-8xl px-8"
             = post.prefix_emoji
-          div class=""
-            == post.raw_content
+          a href="/post/#{post.slug}"
+            div class="e-content prose-p:mb-0 prose-img:my-2 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline p-name text-base prose prose-ul:list-none prose-ul:pl-0 prose-li:pl-0 text-gray-800 dark:text-gray-200 prose-a:dark:text-gray-100 mb-4 prose-img:rounded"
+              == post.raw_content
       -else
-        == " #{post.prefix_emoji} #{post.raw_content}"
-        div class="grid gap-4 grid-flow-row grid-cols-4 grid-rows-1"
-          - post.photos.each do |photo|
-            img loading="lazy" class="w-32 h-32 object-cover rounded" src=photo["value"]
+        a href="/post/#{post.slug}"
+          div class="e-content prose-p:mb-0 prose-img:my-2 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline p-name text-base prose prose-ul:list-none prose-ul:pl-0 prose-li:pl-0 text-gray-800 dark:text-gray-200 prose-a:dark:text-gray-100 mb-4 prose-img:rounded"
+            == " #{post.prefix_emoji} #{post.raw_content}"
+        - if post.photos?
+          div class="grid gap-4 grid-flow-row grid-cols-#{post.photos.count > 1 ? "4" : "1"} grid-rows-1"
+            - post.photos.each do |photo|
+              img loading="lazy" class="w-32 h-32 object-cover rounded" src=photo["value"]
+        - if post.videos?
+          div class="grid gap-4 grid-flow-row grid-cols-#{post.videos.count > 1 ? "4" : "1"} grid-rows-1"
+            - post.videos.each do |video|
+              video class="rounded w-max" autoplay=false loop=false muted=true controls=true
+                source type="video/mp4" src="#{video["value"]}"
     == render "shared/tags", tags: post.tags
 
   div class="mb-8"

slices/main/views/posts/index.rb

@@ -1,3 +1,5 @@
+# memoize: true
+
 module Main
   module Views
     module Posts