From be1336a9ec87fb3655d732d04a2a59fe48565ba0 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 1 Nov 2024 18:01:07 +1100
Subject: [PATCH] feat: switch store carousel to embla

---
 package.json                                  |  3 +-
 .../components/store/CoverSwiper.svelte       | 72 +++++++++++--------
 2 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 5c084766..15be60e4 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,8 @@
     "codemirror": "^6.0.1",
     "color": "^4.2.3",
     "dompurify": "^3.1.6",
+    "embla-carousel-autoplay": "^8.3.1",
+    "embla-carousel-svelte": "^8.3.1",
     "fuse.js": "^7.0.0",
     "idb": "^8.0.0",
     "kolorist": "^1.8.0",
@@ -85,7 +87,6 @@
     "react-dom": "17",
     "sortablejs": "^1.15.3",
     "svelte": "5.0.0-next.244",
-    "swiper": "latest",
     "tailwindcss": "^3.4.11",
     "typescript": "^5.6.2",
     "uuid": "^9.0.1",
diff --git a/src/interface/components/store/CoverSwiper.svelte b/src/interface/components/store/CoverSwiper.svelte
index acfd560e..f3a214d9 100644
--- a/src/interface/components/store/CoverSwiper.svelte
+++ b/src/interface/components/store/CoverSwiper.svelte
@@ -1,43 +1,59 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { Theme } from '@/interface/types/Theme';
-  import { register, type SwiperContainer } from 'swiper/element/bundle';
+  import emblaCarouselSvelte from 'embla-carousel-svelte';
+  import Autoplay from 'embla-carousel-autoplay';
 
-  let { coverThemes, setDisplayTheme } = $props<{ coverThemes: Theme[], setDisplayTheme: (theme: Theme) => void  }>();
-  let swiperEl = $state<SwiperContainer | undefined>();
-  
+  let { coverThemes, setDisplayTheme } = $props<{ coverThemes: Theme[], setDisplayTheme: (theme: Theme) => void }>();
+  let emblaApi = $state();
 
-  const slidePrev = () => swiperEl?.swiper.slidePrev();
-  const slideNext = () => swiperEl?.swiper.slideNext();
+  const options = { loop: true };
+  const plugins = [
+    Autoplay({
+      delay: 5000,
+      stopOnInteraction: false,
+      stopOnMouseEnter: true
+    })
+  ];
 
-  onMount(() => {
-    register();
-  });
+  function onInit(event: CustomEvent) {
+    emblaApi = event.detail;
+  }
+
+  // @ts-ignore
+  const slidePrev = () => emblaApi?.scrollPrev();
+  // @ts-ignore
+  const slideNext = () => emblaApi?.scrollNext();
 </script>
 
 {#if coverThemes.length > 0}
   <div class="relative w-full transition-opacity rounded-xl overflow-clip" transition:fade>
-    <swiper-container bind:this={swiperEl} slides-per-view="1" space-between="20" loop="true" autoplay="true" disable-on-interaction="false" pause-on-mouse-enter="true" class="w-full aspect-[8/3]">
-      {#each coverThemes as theme, index (index)}
-        <swiper-slide
-          onkeydown={(e: any) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
-          onclick={() => setDisplayTheme(theme)}
-          role="button"
-          tabindex="0"
-          class="relative cursor-pointer rounded-xl overflow-clip"
-        >
-          <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
-          <div class='absolute bottom-0 left-0 p-8 z-[1]'>
-            <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
-            <p class='text-lg text-white'>{theme.description}</p>
+    <div 
+      class="w-full aspect-[8/3]" 
+      use:emblaCarouselSvelte={{ options, plugins }} 
+      onemblaInit={onInit}
+    >
+      <div class="flex">
+        {#each coverThemes as theme}
+          <div
+            class="relative flex-[0_0_100%] cursor-pointer rounded-xl overflow-clip"
+            role="button"
+            tabindex="0"
+            onkeydown={(e) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
+            onclick={() => setDisplayTheme(theme)}
+          >
+            <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
+            <div class='absolute bottom-0 left-0 p-8 z-[1]'>
+              <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
+              <p class='text-lg text-white'>{theme.description}</p>
+            </div>
+            <div class='absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/80 to-transparent'></div>
           </div>
-          <div class='absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/80 to-transparent'></div>
-        </swiper-slide>
-      {/each}
-    </swiper-container>
+        {/each}
+      </div>
+    </div>
 
-    <!-- Pagination buttons -->
+    <!-- Navigation buttons -->
     <div class='absolute z-10 flex gap-2 bottom-2 right-2'>
       <button onclick={slidePrev} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">