From ebc7a14103e0d552c6664d6a9d5b00712f10a490 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sun, 2 Feb 2025 21:19:33 +0330
Subject: [PATCH] Add mute/unmute button for slider videos

---
 frontend/components/home/Hero.vue | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue
index 02843e5..adf07db 100644
--- a/frontend/components/home/Hero.vue
+++ b/frontend/components/home/Hero.vue
@@ -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">
-                        <video
-                            v-if="!!slide.video"
-                            muted
-                            autoplay
-                            loop
-                            class="absolute inset-0 size-full object-cover"
-                            :src="slide.video"
-                        />
+                        <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
+                                :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"