From 6b0a2793c573c0fc8f6e5caddb5c07de70916fbe Mon Sep 17 00:00:00 2001
From: Keziah <contact@keziahmoselle.fr>
Date: Sun, 14 Apr 2024 18:55:52 +0200
Subject: [PATCH] feat(build): improve layout of images/video

---
 .../components/molecules/LikeBuildButton.vue  |  1 +
 frontend/src/pages/build/[id].astro           | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/molecules/LikeBuildButton.vue b/frontend/src/components/molecules/LikeBuildButton.vue
index 37559d9..5449916 100644
--- a/frontend/src/components/molecules/LikeBuildButton.vue
+++ b/frontend/src/components/molecules/LikeBuildButton.vue
@@ -8,6 +8,7 @@
   const props = defineProps<{
     build?: ErBuild,
     hasVoted?: boolean
+    class?: string
   }>()
 
   const hasVoted = ref(props.hasVoted)
diff --git a/frontend/src/pages/build/[id].astro b/frontend/src/pages/build/[id].astro
index b6aa84f..2839dd8 100644
--- a/frontend/src/pages/build/[id].astro
+++ b/frontend/src/pages/build/[id].astro
@@ -11,7 +11,7 @@ const REGEX_YOUTUBE_URL = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\
 const { id } = Astro.params
 
 const build: ErBuild = await apiFetch(`/api/er-builds/${id}`)
-const [, youtubeId] = build.youtube_url.match(REGEX_YOUTUBE_URL)
+const youtubeMatches = build.youtube_url?.match(REGEX_YOUTUBE_URL)
 ---
 
 <script>
@@ -46,11 +46,16 @@ const [, youtubeId] = build.youtube_url.match(REGEX_YOUTUBE_URL)
     </div>
   </section>
 
-  <section class="container grid md:grid-cols-2 gap-4">
+  <section class:list={[
+    'container grid gap-4',
+    {
+      'md:grid-cols-2': build.youtube_url && build.images.length > 0
+    }
+  ]}>
     {build.youtube_url && (
       <div class="plyr__video-embed" id="player">
         <iframe
-          src={`https://www.youtube.com/embed/${youtubeId}?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1`}
+          src={`https://www.youtube.com/embed/${youtubeMatches[1]}?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1`}
           allowfullscreen
           allowtransparency
           allow="autoplay"
@@ -58,7 +63,14 @@ const [, youtubeId] = build.youtube_url.match(REGEX_YOUTUBE_URL)
       </div>
     )}
 
-    <div class="grid grid-cols-2 grid-rows-2 gap-2">
+    <div
+      class:list={[
+        'grid gap-2',
+        {
+          'grid-cols-2': build.images.length > 1,
+          'grid-rows-2': build.images.length > 2
+        }
+      ]}>
       { build.images.map((image) => (
         <img
           class="zoomable aspect-video h-full object-contain"
@@ -71,4 +83,8 @@ const [, youtubeId] = build.youtube_url.match(REGEX_YOUTUBE_URL)
   <section class="mt-8 py-8 border-t">
     <Build build={build} client:visible/>
   </section>
+
+  <section class="my-8">
+    {JSON.stringify(build.description, null, 2)}
+  </section>
 </Layout>
\ No newline at end of file