@harshit-wander/component-lib 1.0.1 → 1.1.1

package/dist/index.cjs

@@ -278,33 +278,50 @@ 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 EventVideoBanner = react.forwardRef(
-  ({ posterUrl, videoUrl, alt, href, className, ...rest }, ref) => /* @__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: /* @__PURE__ */ jsxRuntime.jsx(
-    "video",
-    {
-      src: videoUrl,
-      poster: posterUrl,
-      "aria-label": alt,
-      muted: true,
-      autoPlay: true,
-      loop: true,
-      playsInline: true,
-      preload: "metadata",
-      className: videoClass
-    }
-  ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass2, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "video",
-    {
-      src: videoUrl,
-      poster: posterUrl,
-      "aria-label": alt,
-      muted: true,
-      autoPlay: true,
-      loop: true,
-      playsInline: true,
-      preload: "metadata",
-      className: videoClass
-    }
-  ) }) })
+  ({ posterUrl, videoUrl, alt, href, className, ...rest }, ref) => {
+    const videoRef = react.useRef(null);
+    react.useEffect(() => {
+      const video = videoRef.current;
+      if (!video || !videoUrl) return;
+      if (!videoUrl.includes(".m3u8")) {
+        video.src = videoUrl;
+        return;
+      }
+      if (video.canPlayType("application/vnd.apple.mpegurl")) {
+        video.src = videoUrl;
+        return;
+      }
+      let cancelled = false;
+      import('hls.js').then(({ default: Hls }) => {
+        if (cancelled || !Hls.isSupported()) return;
+        const hls = new Hls({ autoStartLoad: true, startLevel: -1 });
+        hls.loadSource(videoUrl);
+        hls.attachMedia(video);
+        video._hls = hls;
+      });
+      return () => {
+        cancelled = true;
+        const stored = video._hls;
+        stored?.destroy();
+      };
+    }, [videoUrl]);
+    const videoEl = /* @__PURE__ */ jsxRuntime.jsx(
+      "video",
+      {
+        ref: videoRef,
+        src: videoUrl?.includes(".m3u8") ? void 0 : videoUrl,
+        poster: posterUrl,
+        "aria-label": alt,
+        muted: true,
+        autoPlay: true,
+        loop: true,
+        playsInline: true,
+        preload: "metadata",
+        className: videoClass
+      }
+    );
+    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 }) });
+  }
 );
 EventVideoBanner.displayName = "EventVideoBanner";
 var ExpandableValueCard = react.forwardRef(
@@ -2790,6 +2807,94 @@ var TripsCategorySection = react.forwardRef(
   }
 );
 TripsCategorySection.displayName = "TripsCategorySection";
+var UCT_VIDEO_DEFAULT = "https://wanderon-video.gumlet.io/upcoming-community-trips-a.mp4";
+var UCT_POSTER_DEFAULT = "https://wanderon-images.gumlet.io/uct-thumbnail.jpg?updatedAt=1739361886945";
+var UctMobileBanner = react.forwardRef(
+  ({
+    href,
+    videoUrl = UCT_VIDEO_DEFAULT,
+    posterUrl = UCT_POSTER_DEFAULT,
+    LinkComponent,
+    className,
+    ...rest
+  }, ref) => {
+    const Link = LinkComponent ?? "a";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        ref,
+        href,
+        className: cn(
+          "flex justify-center no-underline outline-none select-none [-webkit-tap-highlight-color:transparent]",
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full mx-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[-15px] left-[10px] w-[51px] h-[50px] rounded-full z-[6] [box-shadow:0px_4px_10px_0px_rgba(254,230,11,0.2)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "video",
+            {
+              src: videoUrl,
+              poster: posterUrl,
+              muted: true,
+              loop: true,
+              autoPlay: true,
+              playsInline: true,
+              className: "w-full h-full object-cover rounded-full"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "relative flex items-center justify-between overflow-hidden h-[60px] pl-[70px] pr-[10px] py-[10px] rounded-xl cursor-pointer",
+              style: {
+                background: "linear-gradient(90deg, #015f74 0%, #02b3da 100%)",
+                boxShadow: "0px 4px 4px 0px rgba(1, 95, 116, 0.3) inset"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[#f5fdff] text-base font-medium leading-7 font-[inherit]", children: "Upcoming Community Trips" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "inline-flex",
+                    style: { animation: "uct-move-arrow 1.5s infinite" },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M13 6L19 12L13 18M5 6L11 12L5 18",
+                        stroke: "white",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[250px] pointer-events-none", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[#ababab] w-0 h-0",
+                      style: { animation: "uct-pulse-one 2s infinite 0s ease-in-out" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[#ababab] w-0 h-0",
+                      style: { animation: "uct-pulse-two 2s infinite 1s ease-in-out" }
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+UctMobileBanner.displayName = "UctMobileBanner";
 var ValuesSection = react.forwardRef(
   ({ heading: heading2, subheading, values, singleOpen = false, className, ...rest }, ref) => {
     const [openIndex, setOpenIndex] = react.useState(null);
@@ -3011,6 +3116,7 @@ exports.TestimonialsCarousel = TestimonialsCarousel;
 exports.TextSection = TextSection;
 exports.TripCategoryCard = TripCategoryCard;
 exports.TripsCategorySection = TripsCategorySection;
+exports.UctMobileBanner = UctMobileBanner;
 exports.ValuesSection = ValuesSection;
 exports.WarriorCard = WarriorCard;
 exports.WarriorsSection = WarriorsSection;