Show videos in the feed too

pepicrft · Jun 22, 2024 · 57188df · 57188df
1 parent 79f7896
commit 57188df
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/lib/pepicrft_web/controllers/home_html/feed.html.heex b/lib/pepicrft_web/controllers/home_html/feed.html.heex
@@ -5,11 +5,28 @@
 <section class="pp-Feed-List">
   <%= for status <- @statuses do %>
     <% content = status["content"] %>
+    <% media = status["media_attachments"] %>
     <% url = status["url"] %>
     <%= if String.trim(content) != "" do %>
       <article class="pp-Feed-List_Post">
         <a class="pp-Feed-List_Post_Link" href={url}>Link</a>
         <%= raw content %>
+        <%= if media != [] do %>
+          <div class="pp-Feed-List_Post_Media">
+            <%= for m <- media do %>
+              <%= case m["type"] do %>
+              <% "gifv" -> %>
+                <video autoplay loop muted playsinline class="pp-Feed-List_Post_Media_Image">
+                  <source src={m["url"]} type="video/mp4">
+                </video>
+              <% _ -> %>
+                <a href={m["url"]} target="_blank">
+                  <img src={m["url"]} alt={m["description"]} class="pp-Feed-List_Post_Media_Image"/>
+                </a>
+              <% end  %>
+            <% end %>
+          </div>
+        <% end %>
       </article>
       <hr>
     <% end %>

diff --git a/priv/static/styles/feed.css b/priv/static/styles/feed.css
@@ -33,3 +33,18 @@
   align-self: end;
   font-weight: var(--font-weight-4);
 }
+
+.pp-Feed-List_Post_Media {
+  display: grid;
+  gap: var(--size-2);
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.pp-Feed-List_Post_Media_Image {
+  width: 100%;
+  object-fit: contain;
+  border-style: solid;
+  border-width: 1px;
+  border-color: black;
+}
+