Updated

frontend/components/home/Preview.vue

@@ -10,16 +10,28 @@ const { data: homeData } = useHomeData();
 
 const clipPathPercent = ref(49);
 
+const activeSlideVideo = ref<"left" | "right" | "none">("none");
+
 const draggableEl = ref<HTMLElement | null>(null);
 const previewContainerEl = ref<HTMLElement | null>(null);
 
 const { x: dragAxisX } = useDraggable(draggableEl, {
     initialValue: { x: 0, y: 0 },
-    axis: "x",
+    axis: "x"
 });
 
 // watch
 
+watch(() => clipPathPercent.value, (newValue) => {
+    if (newValue > 80) {
+        activeSlideVideo.value = "right";
+    } else if (newValue < 20) {
+        activeSlideVideo.value = "left";
+    } else {
+        activeSlideVideo.value = "none";
+    }
+});
+
 watch(
     () => dragAxisX.value,
     (newValue) => {
@@ -39,24 +51,45 @@ watch(
             <span class="typo-p-md text-slate-500">مقایسه محصولات</span>
             <span class="typo-h-3 text-black">
                 تفاوت محصلات ما را ببینید
+                {{ activeSlideVideo }}
             </span>
         </div>
         <div
             ref="previewContainerEl"
             class="rounded-200 overflow-hidden h-[90svh] relative"
         >
-            <img
-                :src="homeData!.difreance_section.image1"
-                class="select-none absolute size-full object-cover brightness-[95%]"
-                :alt="homeData!.difreance_section.title1"
-            />
+            <Transition name="fade">
+                <img
+                    v-if="activeSlideVideo !== 'right'"
+                    :src="homeData!.difreance_section.image1"
+                    class="select-none absolute size-full object-cover brightness-[95%]"
+                    :alt="homeData!.difreance_section.title1"
+                />
+                <video
+                    v-else
+                    autoplay
+                    muted
+                    src="/video/vid-3.mp4"
+                    class="select-none absolute size-full object-cover brightness-[95%]"
+                />
+            </Transition>
 
             <div class="absolute size-full right-0 w-full">
-                <img
-                    :src="homeData!.difreance_section.image2"
-                    class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
-                    :alt="homeData!.difreance_section.title2"
-                />
+                <Transition name="fade">
+                    <img
+                        v-if="activeSlideVideo !== 'left'"
+                        :src="homeData!.difreance_section.image2"
+                        class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
+                        :alt="homeData!.difreance_section.title2"
+                    />
+                    <video
+                        v-else
+                        autoplay
+                        muted
+                        src="/video/vid-3.mp4"
+                        class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
+                    />
+                </Transition>
                 <div
                     :style="{
                         left: `${clipPathPercent}%`,