Put videos on homepage

LostKobrakai · Dec 26, 2024 · c8593ec · c8593ec
1 parent e40f45c
commit c8593ec
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/lib/kobrakai_web/controllers/page_controller.ex b/lib/kobrakai_web/controllers/page_controller.ex
@@ -2,14 +2,23 @@ defmodule KobrakaiWeb.PageController do
   use KobrakaiWeb, :controller
 
   def home(conn, _params) do
+    videos =
+      Kobrakai.Bold.list_videos!().body["data"]
+      |> Enum.sort_by(& &1["published_at"])
+      |> Enum.take(4)
+      |> Enum.map(&Kobrakai.Bold.video_response_mapping/1)
+      |> Stream.concat(Stream.repeatedly(fn -> nil end))
+      |> Enum.take(4)
+
     # The home page is often custom made,
     # so skip the default app layout.
     conn
     |> merge_open_graph(title: "Home")
     |> render(:home,
       projects: Kobrakai.Portfolio.featured_projects(),
       posts: Kobrakai.Blog.all_posts(),
-      images: Kobrakai.Photography.homepage()
+      images: Kobrakai.Photography.homepage(),
+      videos: videos
     )
   end
 end
diff --git a/lib/kobrakai_web/views/page_html/home.html.heex b/lib/kobrakai_web/views/page_html/home.html.heex
@@ -1,5 +1,34 @@
 <h1 class="sr-only">Benjamin Milde</h1>
 <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+  <div class="sm:col-span-2 lg:col-span-3 space-y-4">
+    <h2 class="uppercase mb-6 group">Video</h2>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+      <%= for {video, index} <- Enum.with_index(@videos, 1) do %>
+        <.link
+          :if={video}
+          class={[
+            "opacity-0",
+            "animate-in-small animation-fill-mode-forwards animation-delay-#{index * 55}"
+          ]}
+          href={url(@conn, ~p"/videos/#{video.id}")}
+        >
+          <.image class="border-white border-2 mb-1" src={video.thumbnail} size={{640, 0}} />
+          <div class="text-gray-500 dark:text-gray-400 text-sm">
+            {Calendar.strftime(video.date, "%d.%m.%Y")}
+          </div>
+        </.link>
+        <div :if={video == nil}>
+          <div class="border-neutral-900 border-2 mb-1 aspect-[16/9]"></div>
+          <div class="text-gray-500 dark:text-gray-400 text-sm"></div>
+        </div>
+      <% end %>
+    </div>
+    <div :if={Enum.count(@videos) > 4}>
+      <.link navigate={~p"/videos"}>
+        Alle Videos <.arrow />
+      </.link>
+    </div>
+  </div>
   <div>
     <h2 class="uppercase mb-6">Projekte</h2>
     <ol class="staggered-intro">