@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/video-player/index.js

@@ -0,0 +1,879 @@
+"use client";
+import * as React4 from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { MediaController, MediaLoadingIndicator, MediaControlBar, MediaPlayButton, MediaMuteButton, MediaVolumeRange, MediaTimeDisplay, MediaTimeRange } from 'media-chrome/react';
+
+// src/components/atoms/video-player/caption-overlay.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var captionOverlayVariants = tv({
+  base: [
+    // Positioning - absolute at bottom of video container
+    "pointer-events-none",
+    "absolute right-0 left-0",
+    "z-10",
+    "flex justify-center",
+    "px-4"
+  ],
+  variants: {
+    position: {
+      bottom: "bottom-64",
+      "bottom-sm": "bottom-24"
+    }
+  },
+  defaultVariants: {
+    position: "bottom-sm"
+  }
+});
+var captionTextVariants = tv({
+  base: [
+    "flex items-center justify-center",
+    "w-fit max-w-[80%]",
+    "gap-10",
+    "px-12 py-6",
+    "text-center",
+    "font-normal leading-[1.4]",
+    "rounded-6",
+    "bg-video-player-caption-bg text-video-player-caption-text"
+  ],
+  variants: {
+    size: {
+      sm: "text-14",
+      md: "[font-size:clamp(16px,2vw,24px)]",
+      lg: "text-24"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var CaptionOverlay = React4.forwardRef(
+  ({ className, cue, text, position, size, ...props }, ref) => {
+    const displayText = cue?.text ?? text;
+    if (!displayText) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "output",
+      {
+        ref,
+        className: cn(captionOverlayVariants({ position }), className),
+        "aria-live": "polite",
+        "aria-label": "Video caption",
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: captionTextVariants({ size }), children: displayText })
+      }
+    );
+  }
+);
+CaptionOverlay.displayName = "CaptionOverlay";
+function parseVttTimestamp(timestamp) {
+  const parts = timestamp.trim().split(":");
+  let hours = 0;
+  let minutes = 0;
+  let seconds = 0;
+  if (parts.length === 3) {
+    hours = Number.parseInt(parts[0], 10);
+    minutes = Number.parseInt(parts[1], 10);
+    seconds = Number.parseFloat(parts[2]);
+  } else if (parts.length === 2) {
+    minutes = Number.parseInt(parts[0], 10);
+    seconds = Number.parseFloat(parts[1]);
+  }
+  return hours * 3600 + minutes * 60 + seconds;
+}
+function parseVtt(vttContent) {
+  const cues = [];
+  const lines = vttContent.trim().split("\n");
+  let i = 0;
+  while (i < lines.length && !lines[i].includes("-->")) {
+    i++;
+  }
+  while (i < lines.length) {
+    const line = lines[i].trim();
+    if (line.includes("-->")) {
+      const [startStr, endStr] = line.split("-->").map((s) => s.trim());
+      const endParts = endStr.split(" ");
+      const endTime = parseVttTimestamp(endParts[0]);
+      const startTime = parseVttTimestamp(startStr);
+      const textLines = [];
+      i++;
+      while (i < lines.length && lines[i].trim() !== "" && !lines[i].includes("-->")) {
+        if (!/^\d+$/.test(lines[i].trim())) {
+          textLines.push(lines[i].trim());
+        }
+        i++;
+      }
+      if (textLines.length > 0) {
+        cues.push({
+          id: `cue-${cues.length}`,
+          startTime,
+          endTime,
+          text: textLines.join("\n")
+        });
+      }
+    } else {
+      i++;
+    }
+  }
+  return cues;
+}
+function stripVttTags(text) {
+  return text.replace(/<\/?[^>]+(>|$)/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
+}
+function useCaptions(options = {}) {
+  const { src, content, stripTags = true, currentTime: externalTime } = options;
+  const [cues, setCues] = React4.useState([]);
+  const [internalTime, setInternalTime] = React4.useState(0);
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const currentTime = externalTime ?? internalTime;
+  React4.useEffect(() => {
+    if (content) {
+      const parsed = parseVtt(content);
+      setCues(
+        stripTags ? parsed.map((cue) => ({ ...cue, text: stripVttTags(cue.text) })) : parsed
+      );
+      return;
+    }
+    if (!src) {
+      setCues([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    fetch(src).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch captions: ${response.status}`);
+      }
+      return response.text();
+    }).then((vttContent) => {
+      const parsed = parseVtt(vttContent);
+      setCues(
+        stripTags ? parsed.map((cue) => ({ ...cue, text: stripVttTags(cue.text) })) : parsed
+      );
+    }).catch((err) => {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [src, content, stripTags]);
+  const activeCue = React4.useMemo(() => {
+    return cues.find(
+      (cue) => currentTime >= cue.startTime && currentTime <= cue.endTime
+    ) ?? null;
+  }, [cues, currentTime]);
+  const handleSetCurrentTime = React4.useCallback((time) => {
+    setInternalTime(time);
+  }, []);
+  return {
+    cues,
+    activeCue,
+    setCurrentTime: handleSetCurrentTime,
+    isLoading,
+    error
+  };
+}
+function useVideoKeyboard({
+  videoRef,
+  enabled = true,
+  seekAmount = 5,
+  volumeStep = 0.1,
+  onTogglePlay,
+  onToggleFullscreen,
+  onToggleCaptions,
+  onShowControls
+}) {
+  const handleKeyDown = React4.useCallback(
+    (e) => {
+      if (!enabled) return;
+      const video = videoRef.current;
+      if (!video) return;
+      const target = e.target;
+      if (target.tagName === "BUTTON" || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.closest("button") || target.closest("input") || target.closest("[role='slider']")) {
+        return;
+      }
+      let handled = false;
+      switch (e.key) {
+        // Play/Pause
+        case " ":
+        case "Spacebar":
+        case "k":
+          if (onTogglePlay) {
+            onTogglePlay();
+          } else {
+            if (video.paused) {
+              video.play().catch(() => {
+              });
+            } else {
+              video.pause();
+            }
+          }
+          handled = true;
+          break;
+        // Seek backward
+        case "ArrowLeft":
+        case "j":
+          video.currentTime = Math.max(0, video.currentTime - seekAmount);
+          handled = true;
+          break;
+        // Seek forward
+        case "ArrowRight":
+        case "l":
+          video.currentTime = Math.min(
+            video.duration || 0,
+            video.currentTime + seekAmount
+          );
+          handled = true;
+          break;
+        // Volume up
+        case "ArrowUp":
+          video.volume = Math.min(1, video.volume + volumeStep);
+          video.muted = false;
+          handled = true;
+          break;
+        // Volume down
+        case "ArrowDown":
+          video.volume = Math.max(0, video.volume - volumeStep);
+          handled = true;
+          break;
+        // Toggle mute
+        case "m":
+        case "M":
+          video.muted = !video.muted;
+          handled = true;
+          break;
+        // Toggle fullscreen
+        case "f":
+        case "F":
+          onToggleFullscreen?.();
+          handled = true;
+          break;
+        // Toggle captions
+        case "c":
+        case "C":
+          onToggleCaptions?.();
+          handled = true;
+          break;
+        // Jump to start
+        case "Home":
+          video.currentTime = 0;
+          handled = true;
+          break;
+        // Jump to end
+        case "End":
+          video.currentTime = video.duration || 0;
+          handled = true;
+          break;
+        // Number keys for percentage seeking (0-9)
+        case "0":
+        case "1":
+        case "2":
+        case "3":
+        case "4":
+        case "5":
+        case "6":
+        case "7":
+        case "8":
+        case "9":
+          if (video.duration) {
+            const percent = parseInt(e.key, 10) / 10;
+            video.currentTime = video.duration * percent;
+            handled = true;
+          }
+          break;
+      }
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+        onShowControls?.();
+      }
+    },
+    [
+      enabled,
+      videoRef,
+      seekAmount,
+      volumeStep,
+      onTogglePlay,
+      onToggleFullscreen,
+      onToggleCaptions,
+      onShowControls
+    ]
+  );
+  const containerProps = React4.useMemo(
+    () => ({
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "application",
+      "aria-label": "Video player, press space to play or pause"
+    }),
+    [handleKeyDown]
+  );
+  return {
+    handleKeyDown,
+    containerProps
+  };
+}
+var videoPlayerVariants = tv({
+  base: [
+    "relative",
+    "bg-black",
+    "overflow-hidden",
+    // Focus styling for keyboard navigation
+    "focus:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-white/50"
+  ],
+  variants: {
+    aspectRatio: {
+      "16/9": "aspect-video",
+      "4/3": "aspect-[4/3]",
+      "1/1": "aspect-square",
+      "9/16": "aspect-[9/16]",
+      auto: ""
+    },
+    rounded: {
+      none: "",
+      sm: "rounded-4",
+      md: "rounded-8",
+      lg: "rounded-12"
+    }
+  },
+  defaultVariants: {
+    aspectRatio: "16/9",
+    rounded: "none"
+  }
+});
+var mediaControllerVariants = tv({
+  base: [
+    "absolute inset-0",
+    "w-full h-full",
+    // Button styling - transparent base, hover shows background
+    "[--media-control-background:transparent]",
+    "[--media-control-hover-background:var(--color-video-player-button-bg-hover)]",
+    "[--media-control-padding:8px]",
+    "[--media-control-height:36px]",
+    "[--media-button-icon-width:20px]",
+    "[--media-button-icon-height:20px]",
+    // Progress bar / range styling
+    "[--media-range-track-background:var(--color-video-player-progress-bg)]",
+    "[--media-range-bar-color:var(--color-video-player-progress-fill)]",
+    "[--media-range-track-height:4px]",
+    "[--media-range-track-border-radius:2px]",
+    "[--media-range-thumb-background:var(--color-video-player-progress-fill)]",
+    "[--media-range-thumb-height:12px]",
+    "[--media-range-thumb-width:12px]",
+    "[--media-range-thumb-border-radius:50%]",
+    // Text/icon colors
+    "[--media-icon-color:var(--color-video-player-controls-text)]",
+    "[--media-primary-color:var(--color-video-player-controls-text)]",
+    "[--media-secondary-color:transparent]",
+    "[--media-text-color:var(--color-video-player-controls-text)]",
+    "[--media-font-size:14px]",
+    // Time display styling
+    "[--media-time-display-background:transparent]"
+  ]
+});
+var mediaButtonStyles = {
+  padding: "8px",
+  borderRadius: "50%",
+  // Tooltip styling - consistent across all buttons
+  "--media-tooltip-background": "var(--color-video-player-tooltip-bg)",
+  "--media-tooltip-arrow-display": "none",
+  "--media-tooltip-distance": "8px"
+};
+var timeRangeStyles = {
+  flex: 1,
+  background: "transparent",
+  // Preview tooltip styling - consistent with button tooltips
+  "--media-box-arrow-display": "none",
+  "--media-preview-box-margin": "0 0 8px 0",
+  "--media-preview-time-margin": "0 0 8px 0",
+  "--media-preview-time-background": "var(--color-video-player-tooltip-bg)"
+};
+var volumeRangeStyles = {
+  width: "80px",
+  background: "transparent",
+  // Tooltip styling - consistent with button tooltips
+  "--media-tooltip-background": "var(--color-video-player-tooltip-bg)",
+  "--media-tooltip-arrow-display": "none",
+  "--media-tooltip-distance": "8px"
+};
+var timeDisplayStyles = {
+  background: "transparent",
+  fontFamily: "monospace",
+  fontSize: "14px",
+  color: "white",
+  whiteSpace: "nowrap"
+};
+var controlBarVariants = tv({
+  base: [
+    // Layout handled in inline styles, but we need flex
+    "flex items-center",
+    // Background using semantic token
+    "bg-video-player-controls-bg",
+    // Animation
+    "transition-all duration-300"
+  ],
+  variants: {
+    visible: {
+      true: "opacity-100 translate-y-0",
+      false: "opacity-0 translate-y-16 pointer-events-none"
+    }
+  },
+  defaultVariants: {
+    visible: true
+  }
+});
+var controlButtonVariants = tv({
+  base: [
+    "flex items-center justify-center",
+    "p-8 rounded-full",
+    // Transparent by default, background on hover
+    "bg-transparent",
+    "text-video-player-controls-text",
+    "hover:bg-video-player-button-bg-hover",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-video-player-progress-bg",
+    "transition-colors duration-150",
+    "cursor-pointer"
+  ]
+});
+var loadingOverlayVariants = tv({
+  base: [
+    "absolute inset-0",
+    "flex items-center justify-center",
+    "bg-black/50",
+    "pointer-events-none",
+    "z-10"
+  ]
+});
+function useHlsInternal(videoRef, src, enabled) {
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  const hlsRef = React4.useRef(null);
+  React4.useEffect(() => {
+    if (!src || !videoRef.current) {
+      return;
+    }
+    const video = videoRef.current;
+    const isHlsSource = src.includes(".m3u8");
+    if (!isHlsSource) {
+      video.src = src;
+      setIsLoading(false);
+      return;
+    }
+    if (video.canPlayType("application/vnd.apple.mpegurl")) {
+      video.src = src;
+      setIsLoading(false);
+      return;
+    }
+    const loadHls = async () => {
+      try {
+        const HlsModule = await import('hls.js');
+        const Hls = HlsModule.default;
+        if (!Hls.isSupported()) {
+          video.src = src;
+          setIsLoading(false);
+          return;
+        }
+        const hls = new Hls({
+          enableWorker: true,
+          lowLatencyMode: false
+        });
+        hls.loadSource(src);
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          setIsLoading(false);
+        });
+        hls.on(
+          Hls.Events.ERROR,
+          (_event, data) => {
+            if (data.fatal) {
+              setError(new Error(`HLS error: ${data.details}`));
+              setIsLoading(false);
+            }
+          }
+        );
+        hlsRef.current = hls;
+      } catch {
+        video.src = src;
+        setIsLoading(false);
+      }
+    };
+    loadHls();
+    return () => {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
+  }, [enabled, src, videoRef]);
+  return { isLoading, error };
+}
+var VideoPlayer = React4.forwardRef(
+  ({
+    className,
+    src,
+    cloudflare,
+    poster,
+    captionsSrc,
+    autoPlay = false,
+    loop = false,
+    muted = false,
+    controls = true,
+    autoHideControls = true,
+    autoHideDelay = 3e3,
+    captionsEnabled: initialCaptionsEnabled = false,
+    aspectRatio,
+    rounded,
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onError,
+    videoRef: externalVideoRef,
+    ...props
+  }, ref) => {
+    const containerRef = React4.useRef(null);
+    const internalVideoRef = React4.useRef(null);
+    const controlsTimeoutRef = React4.useRef(null);
+    const [isPlaying, setIsPlaying] = React4.useState(false);
+    const [currentTime, setCurrentTime] = React4.useState(0);
+    const [controlsVisible, setControlsVisible] = React4.useState(true);
+    const [captionsEnabled, setCaptionsEnabled] = React4.useState(
+      initialCaptionsEnabled
+    );
+    const [isFullscreen, setIsFullscreen] = React4.useState(false);
+    const videoSrc = React4.useMemo(() => {
+      if (cloudflare) {
+        return `https://customer-${cloudflare.customerCode}.cloudflarestream.com/${cloudflare.videoId}/manifest/video.m3u8`;
+      }
+      return src;
+    }, [cloudflare, src]);
+    const { isLoading, error: hlsError } = useHlsInternal(
+      internalVideoRef,
+      videoSrc,
+      true
+    );
+    const { activeCue } = useCaptions({
+      src: captionsSrc,
+      currentTime
+    });
+    React4.useEffect(() => {
+      if (externalVideoRef) {
+        externalVideoRef.current = internalVideoRef.current;
+      }
+    }, [externalVideoRef]);
+    React4.useImperativeHandle(
+      ref,
+      () => containerRef.current
+    );
+    React4.useEffect(() => {
+      if (hlsError && onError) {
+        onError(hlsError);
+      }
+    }, [hlsError, onError]);
+    React4.useEffect(() => {
+      const video = internalVideoRef.current;
+      if (!video) return;
+      const handlePlay = () => {
+        setIsPlaying(true);
+        onPlay?.();
+      };
+      const handlePause = () => {
+        setIsPlaying(false);
+        onPause?.();
+      };
+      const handleEnded = () => {
+        setIsPlaying(false);
+        onEnded?.();
+      };
+      const handleTimeUpdate = () => {
+        setCurrentTime(video.currentTime);
+        onTimeUpdate?.(video.currentTime);
+      };
+      const handleCanPlay = () => {
+        if (autoPlay) {
+          video.play().catch(() => {
+          });
+        }
+      };
+      video.addEventListener("play", handlePlay);
+      video.addEventListener("pause", handlePause);
+      video.addEventListener("ended", handleEnded);
+      video.addEventListener("timeupdate", handleTimeUpdate);
+      video.addEventListener("canplay", handleCanPlay);
+      return () => {
+        video.removeEventListener("play", handlePlay);
+        video.removeEventListener("pause", handlePause);
+        video.removeEventListener("ended", handleEnded);
+        video.removeEventListener("timeupdate", handleTimeUpdate);
+        video.removeEventListener("canplay", handleCanPlay);
+      };
+    }, [autoPlay, onPlay, onPause, onEnded, onTimeUpdate]);
+    React4.useEffect(() => {
+      if (!autoHideControls || !isPlaying || !controlsVisible) return;
+      controlsTimeoutRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, autoHideDelay);
+      return () => {
+        if (controlsTimeoutRef.current) {
+          clearTimeout(controlsTimeoutRef.current);
+        }
+      };
+    }, [autoHideControls, isPlaying, controlsVisible, autoHideDelay]);
+    React4.useEffect(() => {
+      const handleFullscreenChange = () => {
+        setIsFullscreen(!!document.fullscreenElement);
+      };
+      document.addEventListener("fullscreenchange", handleFullscreenChange);
+      document.addEventListener(
+        "webkitfullscreenchange",
+        handleFullscreenChange
+      );
+      return () => {
+        document.removeEventListener(
+          "fullscreenchange",
+          handleFullscreenChange
+        );
+        document.removeEventListener(
+          "webkitfullscreenchange",
+          handleFullscreenChange
+        );
+      };
+    }, []);
+    const togglePlay = React4.useCallback(() => {
+      const video = internalVideoRef.current;
+      if (!video) return;
+      if (video.paused) {
+        video.play().catch(() => {
+        });
+      } else {
+        video.pause();
+      }
+    }, []);
+    const toggleCaptions = React4.useCallback(() => {
+      setCaptionsEnabled((prev) => !prev);
+    }, []);
+    const toggleFullscreen = React4.useCallback(() => {
+      if (!document.fullscreenElement) {
+        containerRef.current?.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }, []);
+    const showControls = React4.useCallback(() => {
+      setControlsVisible(true);
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    }, []);
+    const handleMouseLeave = React4.useCallback(() => {
+      if (autoHideControls && isPlaying) {
+        setControlsVisible(false);
+      }
+    }, [autoHideControls, isPlaying]);
+    const { containerProps: keyboardProps } = useVideoKeyboard({
+      videoRef: internalVideoRef,
+      onTogglePlay: togglePlay,
+      onToggleFullscreen: toggleFullscreen,
+      onToggleCaptions: captionsSrc ? toggleCaptions : void 0,
+      onShowControls: showControls
+    });
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: role is applied via keyboardProps spread
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(videoPlayerVariants({ aspectRatio, rounded }), className),
+          onMouseMove: showControls,
+          onMouseLeave: handleMouseLeave,
+          ...keyboardProps,
+          ...props,
+          children: [
+            controls ? /* @__PURE__ */ jsxs(
+              MediaController,
+              {
+                noAutohide: true,
+                className: mediaControllerVariants(),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      ref: internalVideoRef,
+                      slot: "media",
+                      poster,
+                      loop,
+                      muted,
+                      playsInline: true,
+                      crossOrigin: "anonymous",
+                      className: "w-full h-full object-contain"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(MediaLoadingIndicator, { slot: "centered-chrome", noAutohide: true }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      onClick: togglePlay,
+                      className: "absolute inset-0 cursor-pointer z-[1]",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    MediaControlBar,
+                    {
+                      className: controlBarVariants({ visible: controlsVisible }),
+                      onClick: (e) => e.stopPropagation(),
+                      style: {
+                        position: "absolute",
+                        left: "24px",
+                        right: "24px",
+                        bottom: "24px",
+                        gap: "12px",
+                        padding: "8px 16px",
+                        borderRadius: "9999px",
+                        backdropFilter: "blur(10px)",
+                        WebkitBackdropFilter: "blur(10px)",
+                        zIndex: 2
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(MediaPlayButton, { style: mediaButtonStyles }),
+                        /* @__PURE__ */ jsx(MediaMuteButton, { style: mediaButtonStyles }),
+                        /* @__PURE__ */ jsx(MediaVolumeRange, { style: volumeRangeStyles }),
+                        /* @__PURE__ */ jsx(
+                          MediaTimeDisplay,
+                          {
+                            style: timeDisplayStyles,
+                            showDuration: true,
+                            noToggle: true
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(MediaTimeRange, { style: timeRangeStyles }),
+                        captionsSrc && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: controlButtonVariants(),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              toggleCaptions();
+                            },
+                            "aria-label": captionsEnabled ? "Disable captions" : "Enable captions",
+                            "aria-pressed": captionsEnabled,
+                            children: /* @__PURE__ */ jsx(CaptionsIcon, { enabled: captionsEnabled })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: controlButtonVariants(),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              toggleFullscreen();
+                            },
+                            "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                            children: /* @__PURE__ */ jsx(FullscreenIcon, { isFullscreen })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) : (
+              /* Video without controls */
+              /* @__PURE__ */ jsx(
+                "video",
+                {
+                  ref: internalVideoRef,
+                  poster,
+                  loop,
+                  muted,
+                  playsInline: true,
+                  crossOrigin: "anonymous",
+                  className: "w-full h-full object-contain",
+                  onClick: togglePlay
+                }
+              )
+            ),
+            isLoading && /* @__PURE__ */ jsx("div", { className: loadingOverlayVariants(), children: /* @__PURE__ */ jsx("div", { className: "w-40 h-40 border-3 border-white/30 border-t-white rounded-full animate-spin" }) }),
+            hlsError && /* @__PURE__ */ jsx("div", { className: loadingOverlayVariants(), children: /* @__PURE__ */ jsxs("div", { className: "text-white text-center px-16", children: [
+              /* @__PURE__ */ jsx("p", { className: "typography-body-sm-sm", children: "Failed to load video" }),
+              /* @__PURE__ */ jsx("p", { className: "typography-caption text-white/60 mt-4", children: hlsError.message })
+            ] }) }),
+            captionsEnabled && activeCue && /* @__PURE__ */ jsx(CaptionOverlay, { cue: activeCue })
+          ]
+        }
+      )
+    );
+  }
+);
+VideoPlayer.displayName = "VideoPlayer";
+var CaptionsIcon = ({ enabled }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "w-20 h-20",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: enabled ? (
+      // Captions On
+      /* @__PURE__ */ jsx("path", { d: "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z" })
+    ) : (
+      // Captions Off (with strike-through)
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z" }),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: "4",
+            y1: "20",
+            x2: "20",
+            y2: "4",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          }
+        )
+      ] })
+    )
+  }
+);
+var FullscreenIcon = ({ isFullscreen }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "w-20 h-20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: isFullscreen ? (
+      // Minimize (exit fullscreen)
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("polyline", { points: "4 14 10 14 10 20" }),
+        /* @__PURE__ */ jsx("polyline", { points: "20 10 14 10 14 4" }),
+        /* @__PURE__ */ jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ] })
+    ) : (
+      // Maximize (enter fullscreen)
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ] })
+    )
+  }
+);
+
+export { CaptionOverlay, VideoPlayer, captionOverlayVariants, controlBarVariants, controlButtonVariants, loadingOverlayVariants, mediaControllerVariants, videoPlayerVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map