Add mute/unmute button for slider videos

2025-02-02 21:19:33 +03:30
parent 65ea8b3808
commit ebc7a14103
1 changed files with 21 additions and 9 deletions
@@ -10,6 +10,7 @@ import useHomeData from "~/composables/api/home/useHomeData";

 const { data: homeData } = useHomeData();
 const swiper_instance = ref<SwiperClass | null>(null);
+const isMuted = ref(true);

 // methods

@@ -37,18 +38,29 @@ const onChange = (swiper: SwiperClass) => {
                @slide-change="onChange"
            >
                <SwiperSlide
-                    v-for="slide in homeData!.sliders"
+                    v-for="(slide, index) in homeData!.sliders"
                    :key="slide.id"
                >
                    <div class="relative w-full rounded-200 h-[80svh] overflow-hidden">
+                        <template v-if="!!slide.video">
+                            <button
+                                @click="isMuted = !isMuted"
+                                class="transition-all hover:invert cursor-pointer flex-center hover:scale-110 size-[50px] border border-white hover:border-transparent rounded-full absolute z-20 top-10 right-20 bg-black"
+                            >
+                                <Icon
+                                    :name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
+                                    class="text-white"
+                                    size="24px"
+                                />
+                            </button>
                            <video
-                            v-if="!!slide.video"
-                            muted
+                                :muted="swiper_instance?.realIndex !== index ? true : isMuted"
                                autoplay
                                loop
                                class="absolute inset-0 size-full object-cover"
                                :src="slide.video"
                            />
+                        </template>
                        <img
                            v-else
                            class="absolute inset-0 size-full object-cover"