@harshit-wander/component-lib 1.0.1 → 1.1.0

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(