@harshit-wander/component-lib 1.1.8 → 1.1.10

package/dist/index.cjs

@@ -278,11 +278,12 @@ var EventBanner = react.forwardRef(
 );
 EventBanner.displayName = "EventBanner";
 var frameClass2 = "block w-full h-[300px] overflow-hidden rounded-md no-underline text-inherit focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
-var videoClass = "block w-full h-full object-cover";
+var mediaClass = "block w-full h-full object-cover";
 var EventVideoBanner = react.forwardRef(
-  ({ posterUrl, videoUrl, alt, href, className, ...rest }, ref) => {
+  ({ posterUrl, videoUrl, alt, href, isActive = true, className, ...rest }, ref) => {
     const videoRef = react.useRef(null);
     react.useEffect(() => {
+      if (!isActive) return;
       const video = videoRef.current;
       if (!video || !videoUrl) return;
       if (!videoUrl.includes(".m3u8")) {
@@ -306,8 +307,8 @@ var EventVideoBanner = react.forwardRef(
         const stored = video._hls;
         stored?.destroy();
       };
-    }, [videoUrl]);
-    const videoEl = /* @__PURE__ */ jsxRuntime.jsx(
+    }, [videoUrl, isActive]);
+    const mediaEl = isActive ? /* @__PURE__ */ jsxRuntime.jsx(
       "video",
       {
         ref: videoRef,
@@ -319,10 +320,10 @@ var EventVideoBanner = react.forwardRef(
         loop: true,
         playsInline: true,
         preload: "metadata",
-        className: videoClass
+        className: mediaClass
       }
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: frameClass2, children: videoEl }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass2, children: videoEl }) });
+    ) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: posterUrl, alt, loading: "lazy", decoding: "async", className: mediaClass });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: frameClass2, children: mediaEl }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass2, children: mediaEl }) });
   }
 );
 EventVideoBanner.displayName = "EventVideoBanner";
@@ -1574,7 +1575,9 @@ var useScrollSnap = (itemCount) => {
     setScrollProgress(maxScroll > 0 ? el.scrollLeft / maxScroll : 0);
     if (itemCount > 0) {
       const itemWidth = el.scrollWidth / itemCount;
-      setActiveIndex(Math.round(el.scrollLeft / itemWidth));
+      if (itemWidth > 0) {
+        setActiveIndex(Math.round(el.scrollLeft / itemWidth));
+      }
     }
   }, [itemCount]);
   const setRef = react.useCallback(
@@ -1676,13 +1679,14 @@ var EventCarousel = react.forwardRef(
               ref: trackRef,
               className: "flex w-full gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
               children: events.map(
-                (event) => "videoUrl" in event ? /* @__PURE__ */ jsxRuntime.jsx(
+                (event, index) => "videoUrl" in event ? /* @__PURE__ */ jsxRuntime.jsx(
                   EventVideoBanner,
                   {
                     posterUrl: event.posterUrl,
                     videoUrl: event.videoUrl,
                     alt: event.alt,
-                    href: event.href
+                    href: event.href,
+                    isActive: index === activeIndex
                   },
                   `${event.videoUrl}|${event.alt}`
                 ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -2715,6 +2719,34 @@ var TextSection = react.forwardRef(
   )
 );
 TextSection.displayName = "TextSection";
+var useDesktopVideoVisible = (ref, breakpointPx = 768) => {
+  const [shouldRender, setShouldRender] = react.useState(false);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia(`(min-width: ${breakpointPx}px)`);
+    if (!mq.matches) {
+      setShouldRender(false);
+      return;
+    }
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") {
+      setShouldRender(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setShouldRender(true);
+          io.disconnect();
+        }
+      },
+      { rootMargin: "200px" }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [ref, breakpointPx]);
+  return shouldRender;
+};
 var ChevronLeft5 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -2746,6 +2778,8 @@ var TripsCategorySection = react.forwardRef(
       canNext,
       scrollProgress
     } = useScrollSnap(trips.length);
+    const heroRef = react.useRef(null);
+    const showDesktopVideo = useDesktopVideoVisible(heroRef);
     const handleCtaClick = () => {
       if (cta.href) {
         window.location.assign(cta.href);
@@ -2754,134 +2788,152 @@ var TripsCategorySection = react.forwardRef(
       cta.onClick?.();
     };
     const progressWidth = Math.min(33 + scrollProgress * (120 - 33), 120);
-    return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: cn("relative flex flex-col bg-surface max-md:overflow-x-hidden", className), ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        ref,
+        className: cn("relative flex flex-col bg-surface max-md:overflow-x-clip", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              src: poster,
-              alt: "",
-              "aria-hidden": "true",
-              className: "w-full h-full object-cover md:hidden"
+              ref: heroRef,
+              className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: poster,
+                      alt: "",
+                      "aria-hidden": "true",
+                      className: "w-full h-full object-cover",
+                      loading: "lazy",
+                      decoding: "async"
+                    }
+                  ),
+                  showDesktopVideo && /* @__PURE__ */ jsxRuntime.jsx(
+                    "video",
+                    {
+                      autoPlay: true,
+                      muted: true,
+                      loop: true,
+                      playsInline: true,
+                      preload: "metadata",
+                      poster,
+                      src: videoSrc,
+                      className: "hidden md:block absolute inset-0 w-full h-full object-cover"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-center gap-lg p-[44px] max-md:p-[24px] text-on-image [text-shadow:0px_6px_24px_rgba(0,0,0,0.16)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-hero-title max-w-[436px] max-md:text-secondary max-md:[text-shadow:none]", children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-md:hidden m-0 text-xs font-bold leading-5", children: description }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCtaClick,
+                      className: "max-md:hidden inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
+                      children: cta.label
+                    }
+                  )
+                ] })
+              ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "video",
-            {
-              autoPlay: true,
-              muted: true,
-              loop: true,
-              playsInline: true,
-              poster,
-              src: videoSrc,
-              className: "hidden md:block w-full h-full object-cover"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-center gap-lg p-[44px] max-md:p-[24px] text-on-image [text-shadow:0px_6px_24px_rgba(0,0,0,0.16)]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-hero-title max-w-[436px]", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-md:hidden m-0 text-xs font-bold leading-5", children: description }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleCtaClick,
-              className: "max-md:hidden inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
-              children: cta.label
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px] hidden md:block", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: scrollPrev,
-            disabled: !canPrev,
-            "aria-label": "Previous trips",
-            className: cn(arrowBase4, "left-2"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft5, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref: trackRef,
-            className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-            children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
-              TripCategoryCard,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px] hidden md:block", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
               {
-                image: trip.image,
-                alt: trip.alt,
-                destination: trip.destination,
-                startingPrice: trip.startingPrice,
-                href: trip.href
-              },
-              `${trip.image}|${trip.destination}`
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: scrollNext,
-            disabled: !canNext,
-            "aria-label": "Next trips",
-            className: cn(arrowBase4, "right-2"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight5, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            role: "progressbar",
-            "aria-valuenow": Math.round(scrollProgress * 100),
-            "aria-valuemin": 0,
-            "aria-valuemax": 100,
-            "aria-label": "Scroll position",
-            className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
+                type: "button",
+                onClick: scrollPrev,
+                disabled: !canPrev,
+                "aria-label": "Previous trips",
+                className: cn(arrowBase4, "left-2"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft5, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
-                style: { width: `${progressWidth}px` }
+                ref: trackRef,
+                className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
+                  TripCategoryCard,
+                  {
+                    image: trip.image,
+                    alt: trip.alt,
+                    destination: trip.destination,
+                    startingPrice: trip.startingPrice,
+                    href: trip.href
+                  },
+                  `${trip.image}|${trip.destination}`
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: scrollNext,
+                disabled: !canNext,
+                "aria-label": "Next trips",
+                className: cn(arrowBase4, "right-2"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight5, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "progressbar",
+                "aria-valuenow": Math.round(scrollProgress * 100),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-label": "Scroll position",
+                className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
+                    style: { width: `${progressWidth}px` }
+                  }
+                )
               }
             )
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative -mt-[60px] pb-md md:hidden flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-        react$1.Swiper,
-        {
-          effect: "cards",
-          grabCursor: true,
-          modules: [modules.EffectCards],
-          className: "w-[74vw] [aspect-ratio:289/367]",
-          style: { overflow: "visible" },
-          children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
-            react$1.SwiperSlide,
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative -mt-[60px] pb-md md:hidden flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.Swiper,
             {
-              style: { borderRadius: "12px", overflow: "hidden" },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                TripCategoryCard,
+              effect: "cards",
+              grabCursor: true,
+              modules: [modules.EffectCards],
+              className: "w-[74vw] [aspect-ratio:289/367]",
+              style: { overflow: "visible" },
+              children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
+                react$1.SwiperSlide,
                 {
-                  image: trip.image,
-                  alt: trip.alt,
-                  destination: trip.destination,
-                  startingPrice: trip.startingPrice,
-                  href: trip.href,
-                  className: "w-full h-full rounded-xl shrink-0"
-                }
-              )
-            },
-            `${trip.image}|${trip.destination}|mobile`
-          ))
-        }
-      ) })
-    ] });
+                  style: { borderRadius: "12px", overflow: "hidden" },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    TripCategoryCard,
+                    {
+                      image: trip.image,
+                      alt: trip.alt,
+                      destination: trip.destination,
+                      startingPrice: trip.startingPrice,
+                      href: trip.href,
+                      className: "w-full h-full rounded-xl shrink-0"
+                    }
+                  )
+                },
+                `${trip.image}|${trip.destination}|mobile`
+              ))
+            }
+          ) })
+        ]
+      }
+    );
   }
 );
 TripsCategorySection.displayName = "TripsCategorySection";