@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260704091052 → 0.8.1-dev.20260706114046

package/dist/HlsPlayer-5AWFZ2P6.mjs

@@ -0,0 +1,601 @@
+"use client";
+
+"use client";
+
+// src/components/HlsPlayer.tsx
+import React, { useRef, useEffect, useState, useCallback } from "react";
+import Hls from "hls.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pickSource = (sources) => {
+  for (const { src, media } of sources) {
+    if (media && window.matchMedia(media).matches) return src;
+  }
+  return sources.find((s) => !s.media)?.src ?? sources[0]?.src ?? "";
+};
+var requestFullscreen = (el) => {
+  if (el.requestFullscreen) return el.requestFullscreen();
+  const anyEl = el;
+  if (anyEl.webkitRequestFullscreen) return anyEl.webkitRequestFullscreen();
+  if (anyEl.mozRequestFullScreen) return anyEl.mozRequestFullScreen();
+  return Promise.resolve();
+};
+var exitFullscreen = () => {
+  if (document.exitFullscreen) return document.exitFullscreen();
+  const anyDoc = document;
+  if (anyDoc.webkitExitFullscreen) return anyDoc.webkitExitFullscreen();
+  if (anyDoc.mozCancelFullScreen) return anyDoc.mozCancelFullScreen();
+  return Promise.resolve();
+};
+var getFullscreenElement = () => (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  document.fullscreenElement ?? document.webkitFullscreenElement ?? null
+);
+var HlsPlayer = React.memo(
+  ({
+    sources,
+    assetUrl,
+    posterUrl,
+    intrinsicWidth,
+    intrinsicHeight,
+    showControls = true,
+    loop = false,
+    playOptions = "autoplay",
+    placementCode = "",
+    styles
+  }) => {
+    const containerRef = useRef(null);
+    const videoRef = useRef(null);
+    const hlsRef = useRef(null);
+    const isPlayOnHover = playOptions === "playOnHover";
+    const startsMuted = playOptions === "autoplay" || isPlayOnHover;
+    const [isPlaying, setIsPlaying] = useState(playOptions === "autoplay");
+    const [isHovered, setIsHovered] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const [isControlsVisible, setIsControlsVisible] = useState(true);
+    const [isPosterVisible, setIsPosterVisible] = useState(true);
+    const [isMuted, setIsMuted] = useState(startsMuted);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [isBuffering, setIsBuffering] = useState(false);
+    const wasManuallyPausedRef = useRef(false);
+    const inactivityTimerRef = useRef(null);
+    const clickTimerRef = useRef(null);
+    const hlsInitializedRef = useRef(false);
+    const [isInView, setIsInView] = useState(false);
+    const INACTIVITY_DELAY = 2500;
+    const CLICK_DEBOUNCE = 220;
+    const resolvedSources = sources && sources.length > 0 ? sources : assetUrl ? [{ src: assetUrl, posterUrl }] : [];
+    useEffect(() => {
+      const checkMobile = () => {
+        const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+        const isSmallScreen = window.innerWidth <= 768;
+        const isMobileUA = /android|iphone|ipad|ipod/i.test(
+          navigator.userAgent.toLowerCase()
+        );
+        setIsMobile(hasTouch || isSmallScreen || isMobileUA);
+      };
+      checkMobile();
+      window.addEventListener("resize", checkMobile);
+      return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container || typeof IntersectionObserver === "undefined") {
+        setIsInView(true);
+        return;
+      }
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            observer.disconnect();
+          }
+        },
+        { threshold: 0.25 }
+        // 25% of the player must be visible to trigger
+      );
+      observer.observe(container);
+      return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+      const onFullscreenChange = () => {
+        setIsFullscreen(getFullscreenElement() === containerRef.current);
+      };
+      document.addEventListener("fullscreenchange", onFullscreenChange);
+      document.addEventListener("webkitfullscreenchange", onFullscreenChange);
+      return () => {
+        document.removeEventListener("fullscreenchange", onFullscreenChange);
+        document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
+      };
+    }, []);
+    useEffect(() => {
+      if (isPlaying) {
+        setIsPosterVisible(false);
+      } else {
+        const v = videoRef.current;
+        if (!v || v.currentTime === 0) setIsPosterVisible(true);
+      }
+    }, [isPlaying]);
+    const resetInactivityTimer = useCallback(() => {
+      setIsControlsVisible(true);
+      if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
+      if (isPlaying) {
+        inactivityTimerRef.current = setTimeout(
+          () => setIsControlsVisible(false),
+          INACTIVITY_DELAY
+        );
+      }
+    }, [isPlaying]);
+    useEffect(() => {
+      if (!isPlaying) {
+        if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
+        setIsControlsVisible(true);
+      }
+    }, [isPlaying]);
+    useEffect(() => {
+      return () => {
+        if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
+        if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+      };
+    }, []);
+    const initHls = useCallback((autoPlayAfterLoad) => {
+      const v = videoRef.current;
+      if (!v || resolvedSources.length === 0) return;
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+      const chosenSrc = pickSource(resolvedSources);
+      if (!chosenSrc) return;
+      hlsInitializedRef.current = true;
+      if (Hls.isSupported()) {
+        const hlsConfig = isPlayOnHover ? {
+          // For hover-play: only buffer enough to start playing smoothly.
+          // maxBufferLength    – target seconds of forward buffer (default 30s → 10s)
+          // maxMaxBufferLength – hard ceiling hls.js won't exceed (default 600s → 15s)
+          // maxBufferSize      – byte ceiling before hls.js pauses loading (default 60MB → 10MB)
+          // lowLatencyMode     – off; we don't need ultra-low latency for on-demand hover clips
+          maxBufferLength: 10,
+          maxMaxBufferLength: 15,
+          maxBufferSize: 10 * 1e3 * 1e3,
+          // 10 MB
+          lowLatencyMode: false
+        } : {};
+        const hls = new Hls(hlsConfig);
+        hls.loadSource(chosenSrc);
+        hls.attachMedia(v);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          if (autoPlayAfterLoad && !wasManuallyPausedRef.current) {
+            v.play().catch(console.error).then(() => setIsPlaying(true));
+          }
+        });
+        v.addEventListener("playing", () => setIsBuffering(false), { once: true });
+        v.addEventListener("error", () => setIsBuffering(false), { once: true });
+        hlsRef.current = hls;
+      } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
+        v.src = chosenSrc;
+        v.load();
+        v.addEventListener("playing", () => setIsBuffering(false), { once: true });
+        v.addEventListener("error", () => setIsBuffering(false), { once: true });
+        if (autoPlayAfterLoad) {
+          v.play().catch(console.error).then(() => setIsPlaying(true));
+        }
+      }
+    }, [JSON.stringify(resolvedSources)]);
+    useEffect(() => {
+      if (!isInView) return;
+      if (isPlayOnHover) return;
+      if (playOptions !== "autoplay") return;
+      initHls(
+        /* autoPlayAfterLoad */
+        true
+      );
+      return () => {
+        if (hlsRef.current) {
+          hlsRef.current.destroy();
+          hlsRef.current = null;
+        }
+        hlsInitializedRef.current = false;
+      };
+    }, [JSON.stringify(resolvedSources), isPlayOnHover, isInView, playOptions]);
+    const handlePlayPause = useCallback(() => {
+      const v = videoRef.current;
+      if (!v) return;
+      if (!hlsInitializedRef.current) {
+        setIsBuffering(true);
+        initHls(
+          /* autoPlayAfterLoad */
+          true
+        );
+        return;
+      }
+      if (v.paused) {
+        wasManuallyPausedRef.current = false;
+        v.play().then(() => setIsPlaying(true));
+      } else {
+        wasManuallyPausedRef.current = true;
+        v.pause();
+        setIsPlaying(false);
+      }
+    }, [initHls]);
+    const handleMuteToggle = useCallback(() => {
+      const v = videoRef.current;
+      if (!v) return;
+      v.muted = !v.muted;
+      setIsMuted(v.muted);
+    }, []);
+    const handleFullscreenToggle = useCallback(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      if (getFullscreenElement() === container) {
+        exitFullscreen().catch(console.error);
+      } else {
+        requestFullscreen(container).catch(console.error);
+      }
+    }, []);
+    const handleVideoClick = useCallback(() => {
+      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+      clickTimerRef.current = setTimeout(() => {
+        handlePlayPause();
+      }, CLICK_DEBOUNCE);
+    }, [handlePlayPause]);
+    const handleVideoDoubleClick = useCallback(() => {
+      if (clickTimerRef.current) {
+        clearTimeout(clickTimerRef.current);
+        clickTimerRef.current = null;
+      }
+      handleFullscreenToggle();
+    }, [handleFullscreenToggle]);
+    const handleMouseEnter = useCallback(() => {
+      if (isMobile) return;
+      setIsHovered(true);
+      resetInactivityTimer();
+      if (isPlayOnHover && !wasManuallyPausedRef.current) {
+        if (!hlsInitializedRef.current) {
+          initHls(
+            /* autoPlayAfterLoad */
+            true
+          );
+        } else if (videoRef.current) {
+          videoRef.current.play().then(() => setIsPlaying(true)).catch(console.error);
+        }
+      }
+    }, [isPlayOnHover, isMobile, resetInactivityTimer, initHls]);
+    const handleMouseLeave = useCallback(() => {
+      if (isMobile) return;
+      setIsHovered(false);
+      if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
+      if (isPlaying) setIsControlsVisible(false);
+      if (isPlayOnHover && videoRef.current) {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+        setIsPlaying(false);
+        if (hlsRef.current) {
+          hlsRef.current.destroy();
+          hlsRef.current = null;
+          hlsInitializedRef.current = false;
+        }
+      }
+    }, [isPlayOnHover, isMobile, isPlaying]);
+    const handleMouseMove = useCallback(() => {
+      if (isMobile) return;
+      resetInactivityTimer();
+    }, [isMobile, resetInactivityTimer]);
+    const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
+    const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
+    const playBtnSize = "clamp(44px, 8vmin, 80px)";
+    const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
+    const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
+    const playIconSize = "clamp(24px, 4.5vmin, 44px)";
+    const iconButtonStyle = {
+      pointerEvents: isControlsVisible ? "auto" : "none",
+      width: iconBtnSize,
+      height: iconBtnSize,
+      borderRadius: "50%",
+      border: "1.5px solid rgba(255,255,255,0.18)",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "rgba(0, 0, 0, 0.45)",
+      backdropFilter: "blur(10px)",
+      WebkitBackdropFilter: "blur(10px)",
+      boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
+      transition: "transform 0.18s ease",
+      flexShrink: 0
+    };
+    if (resolvedSources.length === 0) return null;
+    const showMuteButton = !showControls && !isPlayOnHover;
+    const showExpandButton = !showControls && !isPlayOnHover;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "relative w-full overflow-hidden aspect-video bg-black",
+        style: styles,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove,
+        children: [
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              ref: videoRef,
+              className: "w-full h-full object-cover",
+              poster: fallbackPoster,
+              controls: showControls && (isMobile || isPlaying),
+              muted: startsMuted,
+              autoPlay: playOptions === "autoplay",
+              loop,
+              playsInline: true,
+              preload: playOptions === "autoplay" ? "auto" : "none",
+              onClick: handleVideoClick,
+              onDoubleClick: handleVideoDoubleClick,
+              children: playOptions === "autoplay" && resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ jsx(
+                "source",
+                {
+                  src,
+                  type: "application/x-mpegURL",
+                  ...media ? { media } : {}
+                },
+                i
+              ))
+            }
+          ),
+          fallbackPoster && /* @__PURE__ */ jsxs(
+            "picture",
+            {
+              className: "absolute inset-0 pointer-events-none",
+              style: {
+                opacity: isPosterVisible && (!isPlayOnHover || !isHovered) ? 1 : 0,
+                transition: "opacity 0.4s ease"
+              },
+              children: [
+                posterSources.map(({ media, posterUrl: src }, i) => /* @__PURE__ */ jsx("source", { media, srcSet: src }, i)),
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: fallbackPoster,
+                    width: intrinsicWidth,
+                    height: intrinsicHeight,
+                    alt: "poster",
+                    className: "w-full h-full object-cover",
+                    style: { pointerEvents: "none" }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("style", { children: `
+          .hls-play-btn {
+            will-change: transform;
+            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+          }
+          .hls-play-btn:hover {
+            transform: scale(1.08);
+          }
+        ` }),
+          isBuffering && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+              style: { zIndex: 10 },
+              children: [
+                /* @__PURE__ */ jsx("style", { children: `
+              @keyframes hls-spin {
+                to { transform: rotate(360deg); }
+              }
+              .hls-spinner {
+                animation: hls-spin 1s linear infinite;
+                filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
+                        drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
+              }
+            ` }),
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "hls-spinner",
+                    width: "clamp(44px, 8vmin, 72px)",
+                    height: "clamp(44px, 8vmin, 72px)",
+                    viewBox: "0 0 72 72",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: [
+                      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+                        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
+                        /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
+                        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
+                      ] }) }),
+                      Array.from({ length: 18 }).map((_, i) => {
+                        const angle = i / 18 * 360;
+                        const opacity = 0.15 + i / 17 * 0.85;
+                        const rad = (angle - 90) * (Math.PI / 180);
+                        const r = 30;
+                        const cx = 36 + r * Math.cos(rad);
+                        const cy = 36 + r * Math.sin(rad);
+                        const t = i / 17;
+                        const r1 = Math.round(243 * (1 - t) + 143 * t);
+                        const g1 = Math.round(31 * (1 - t) + 38 * t);
+                        const b1 = Math.round(73 * (1 - t) + 237 * t);
+                        return /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: cx - 2.2,
+                            y: cy - 5.5,
+                            width: 4.4,
+                            height: 11,
+                            rx: 2.2,
+                            fill: `rgba(${r1},${g1},${b1},${opacity})`,
+                            transform: `rotate(${angle}, ${cx}, ${cy})`
+                          },
+                          i
+                        );
+                      })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          !isPlayOnHover && !isBuffering && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+              style: {
+                opacity: isControlsVisible ? 1 : 0,
+                transition: "opacity 0.3s ease"
+              },
+              children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isPlaying ? "Pause" : "Play",
+                  className: "hls-play-btn",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handlePlayPause();
+                  },
+                  style: {
+                    pointerEvents: isControlsVisible ? "auto" : "none",
+                    width: playBtnSize,
+                    height: playBtnSize,
+                    borderRadius: "50%",
+                    border: "none",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
+                    flexShrink: 0,
+                    position: "relative",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          borderRadius: "50%",
+                          background: "radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 55%, transparent 75%)",
+                          pointerEvents: "none"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          borderRadius: "50%",
+                          background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
+                          pointerEvents: "none"
+                        }
+                      }
+                    ),
+                    isPlaying ? (
+                      /* Pause — two rounded bars, sized to match play icon proportions */
+                      /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          width: playIconSize,
+                          height: playIconSize,
+                          viewBox: "0 0 20 20",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          children: [
+                            /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
+                            /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
+                          ]
+                        }
+                      )
+                    ) : (
+                      /*
+                       * Play — rounded-corner triangle from the provided SVG path.
+                       * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
+                       * We flatten the transform: effective drawing area is 240×250 units.
+                       */
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: playIconSize,
+                          height: playIconSize,
+                          viewBox: "0 0 240 250",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          style: { transform: "translateX(4%)" },
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
+                              fill: "white"
+                            }
+                          )
+                        }
+                      )
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute bottom-4 right-4 pointer-events-none",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                opacity: isControlsVisible ? 1 : 0,
+                transition: "opacity 0.3s ease"
+              },
+              children: [
+                showMuteButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": isMuted ? "Unmute" : "Mute",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleMuteToggle();
+                    },
+                    style: iconButtonStyle,
+                    children: isMuted ? /* @__PURE__ */ jsxs("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                      /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                      /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+                    ] }) : /* @__PURE__ */ jsxs("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                      /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                      /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+                    ] })
+                  }
+                ),
+                showExpandButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleFullscreenToggle();
+                    },
+                    style: iconButtonStyle,
+                    children: isFullscreen ? /* @__PURE__ */ jsx("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx("svg", { width: iconSvgSize, height: iconSvgSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+HlsPlayer.displayName = "HlsPlayer";
+var HlsPlayer_default = HlsPlayer;
+export {
+  HlsPlayer_default as default
+};