From 865fc12cbebc6693ad6f15cda111c21417dd0d00 Mon Sep 17 00:00:00 2001 From: marzban-dev Date: Thu, 6 Feb 2025 22:55:32 +0330 Subject: [PATCH] Add logic for muting videos Change ui --- frontend/components/home/Hero.vue | 110 ++++++++++++++++-------------- 1 file changed, 57 insertions(+), 53 deletions(-) diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue index 117305d..7c8631a 100644 --- a/frontend/components/home/Hero.vue +++ b/frontend/components/home/Hero.vue @@ -10,9 +10,19 @@ import useHomeData from "~/composables/api/home/useHomeData"; const { data: homeData } = useHomeData(); const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp(); -const route = useRoute(); - const swiper_instance = ref(null); + +const observerTarget = ref(null); +const shouldPauseVideos = ref(false); + +useIntersectionObserver( + observerTarget, + ([entry], observerElement) => { + console.log(entry.rootBounds ? !entry.isIntersecting : false, "asdad"); + shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false; + } +); + const isMuted = ref(true); const slidesPerView = ref(1); @@ -24,14 +34,30 @@ const onSwiper = (swiper: SwiperClass) => { swiper_instance.value = swiper; }; -const onChange = (swiper: SwiperClass) => { - console.log(swiper.activeIndex, swiper.realIndex, swiper.snapIndex); +const updateVideoStates = () => { + const activeIndex = swiper_instance.value?.realIndex || 0; + const videosElements = document.querySelectorAll(`.slide-video`) as NodeListOf; + videosElements.forEach(videoElement => { + if (videoElement.id === `slide-video-${activeIndex}` && !shouldPauseVideos.value) { + videoElement.play(); + } else { + videoElement.pause(); + } + }); }; +// watch + +watch(() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => { + updateVideoStates(); +}); + // lifecycle onMounted(() => { - gsapTimeline = gsap.timeline({}); + updateVideoStates(); + + gsapTimeline = gsap.timeline(); gsapTimeline .fromTo(".header-slider-item", { @@ -89,16 +115,9 @@ onMounted(() => { }); -watch(() => route.path, (nv) => { - if (gsapTimeline) { - if (nv === "/") { - gsapTimeline.play(); - } else { - gsapTimeline.pause().progress(0); - } - } -}, { - immediate: true +onUnmounted(() => { + gsapTimeline.progress(1).pause(); + gsapTimeline.kill(); }); @@ -108,12 +127,12 @@ watch(() => route.path, (nv) => {
route.path, (nv) => { class="header-slider-item relative w-full overflow-hidden" > @@ -173,9 +160,26 @@ watch(() => route.path, (nv) => {
-

- {{ slide.title }} -

+
+
+
+ +
+

+ {{ slide.title }} +

+
{{ slide.description }}