From f11178eb3d0f1e903ec7a7ae96e8f2997b7f9df6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= <barbara.chaves@vizzuality.com>
Date: Wed, 4 Dec 2024 16:02:58 +0100
Subject: [PATCH] Fix media position

---
 client/src/components/ui/carousel/index.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/components/ui/carousel/index.tsx b/client/src/components/ui/carousel/index.tsx
index 5815763..eb88717 100644
--- a/client/src/components/ui/carousel/index.tsx
+++ b/client/src/components/ui/carousel/index.tsx
@@ -188,20 +188,19 @@ type PropType = PropsWithChildren & {
 };
 
 const EmblaCarousel: React.FC<PropType> = ({ options, medias, selected }) => {
-  const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: true,
+    startIndex: selected,
+    align: 'center',
+    inViewThreshold: 0.5,
+    ...options,
+  });
   const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi);
   // const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } =
   //   usePrevNextButtons(emblaApi);
 
   const [currSlider, setCurrSlider] = useState(0);
 
-  useEffect(() => {
-    if (selected !== undefined && emblaApi) {
-      emblaApi.scrollTo(selected);
-      setCurrSlider(selected);
-    }
-  }, [selected, emblaApi]);
-
   const handleSelectedSlide = useCallback((embla: EmblaCarouselType) => {
     setCurrSlider(embla.selectedScrollSnap());
   }, []);
@@ -223,7 +222,9 @@ const EmblaCarousel: React.FC<PropType> = ({ options, medias, selected }) => {
             <div
               className={cn(
                 'embla__slide flex-[0_0_60%] pl-4 sm:pl-10',
-                index === currSlider ? 'h-[80vh]' : 'h-[40vh]'
+                index === currSlider ? 'h-[80vh]' : 'h-[40vh]',
+                medias.length === 2 && index === 0 && 'ml-[20%]',
+                medias.length === 2 && index === 1 && 'mr-[20%]'
               )}
               key={index}
             >