@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/video-with-backdrop/index.js

@@ -0,0 +1,1284 @@
+"use client";
+import * as React5 from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { MediaController, MediaLoadingIndicator, MediaControlBar, MediaPlayButton, MediaMuteButton, MediaVolumeRange, MediaTimeDisplay, MediaTimeRange } from 'media-chrome/react';
+
+// src/components/molecules/video-with-backdrop/video-with-backdrop.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var blurredVideoBackdropVariants = tv({
+  base: [
+    "absolute",
+    "pointer-events-none",
+    "select-none",
+    "will-change-contents",
+    "transform-gpu"
+  ],
+  variants: {
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+      low: "",
+      medium: "",
+      high: "",
+      extreme: ""
+    },
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+      none: "",
+      vignette: "",
+      "top-bottom": ""
+    }
+  },
+  defaultVariants: {
+    blur: "high",
+    overlay: "none"
+  }
+});
+var canvasVariants = tv({
+  base: ["w-full", "h-full", "object-cover"]
+});
+var gradientOverlayVariants = tv({
+  base: ["absolute", "inset-0", "pointer-events-none"]
+});
+var OVERLAY_GRADIENTS = {
+  vignette: "radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%)",
+  "top-bottom": "linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%)"
+};
+var BLUR_AMOUNTS = {
+  low: 40,
+  medium: 80,
+  high: 100,
+  extreme: 120
+};
+function useCanvasBlur({
+  videoRef,
+  blurAmount,
+  enabled = true,
+  targetFps = 30,
+  scale = 0.5
+}) {
+  const canvasRef = React5.useRef(null);
+  const ctxRef = React5.useRef(null);
+  const [isRendering, setIsRendering] = React5.useState(false);
+  const [metrics, setMetrics] = React5.useState({ fps: 0, frameTime: 0 });
+  const [videoReady, setVideoReady] = React5.useState(false);
+  const lastFrameTimeRef = React5.useRef(0);
+  const frameCountRef = React5.useRef(0);
+  const fpsIntervalRef = React5.useRef(0);
+  const frameInterval = 1e3 / targetFps;
+  React5.useEffect(() => {
+    if (!enabled) return;
+    const checkRef = () => {
+      if (videoRef.current && canvasRef.current) {
+        setVideoReady(true);
+      }
+    };
+    checkRef();
+    const frameId = requestAnimationFrame(checkRef);
+    const timeoutId = setTimeout(checkRef, 100);
+    const timeoutId2 = setTimeout(checkRef, 500);
+    return () => {
+      cancelAnimationFrame(frameId);
+      clearTimeout(timeoutId);
+      clearTimeout(timeoutId2);
+    };
+  }, [enabled, videoRef]);
+  React5.useEffect(() => {
+    if (!enabled || !videoReady) return;
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas) return;
+    const ctx = canvas.getContext("2d", {
+      alpha: false,
+      desynchronized: true
+      // Reduces latency
+    });
+    if (!ctx) return;
+    ctxRef.current = ctx;
+    let animationFrameId;
+    let isActive = true;
+    const updateCanvasSize = () => {
+      if (video.videoWidth && video.videoHeight) {
+        canvas.width = Math.floor(video.videoWidth * scale);
+        canvas.height = Math.floor(video.videoHeight * scale);
+      }
+    };
+    const render = (timestamp) => {
+      if (!isActive || !video || !ctx) return;
+      const elapsed = timestamp - lastFrameTimeRef.current;
+      if (elapsed >= frameInterval) {
+        const frameStart = performance.now();
+        if (canvas.width === 0 || canvas.height === 0) {
+          updateCanvasSize();
+        }
+        if (video.readyState >= 2 && !video.paused) {
+          ctx.filter = `blur(${blurAmount * scale}px)`;
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          setIsRendering(true);
+        }
+        const frameTime = performance.now() - frameStart;
+        frameCountRef.current++;
+        if (timestamp - fpsIntervalRef.current >= 1e3) {
+          setMetrics({
+            fps: frameCountRef.current,
+            frameTime: Math.round(frameTime * 100) / 100
+          });
+          frameCountRef.current = 0;
+          fpsIntervalRef.current = timestamp;
+        }
+        lastFrameTimeRef.current = timestamp - elapsed % frameInterval;
+      }
+      animationFrameId = requestAnimationFrame(render);
+    };
+    const handleLoadedMetadata = () => {
+      updateCanvasSize();
+    };
+    const handlePlay = () => {
+      if (isActive) {
+        animationFrameId = requestAnimationFrame(render);
+      }
+    };
+    const handlePause = () => {
+      setIsRendering(false);
+    };
+    video.addEventListener("loadedmetadata", handleLoadedMetadata);
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    if (video.readyState >= 1) {
+      updateCanvasSize();
+    }
+    if (!video.paused) {
+      animationFrameId = requestAnimationFrame(render);
+    }
+    return () => {
+      isActive = false;
+      cancelAnimationFrame(animationFrameId);
+      video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      setIsRendering(false);
+    };
+  }, [enabled, videoReady, videoRef, blurAmount, frameInterval, scale]);
+  return {
+    canvasRef,
+    isRendering,
+    metrics
+  };
+}
+var BlurredVideoBackdrop = React5.forwardRef(
+  ({
+    className,
+    videoRef,
+    blur = "high",
+    overlay = "none",
+    opacity = 0.6,
+    extension = 120,
+    targetFps = 30,
+    scale = 0.5,
+    showMetrics = false,
+    style,
+    ...props
+  }, ref) => {
+    const blurAmount = BLUR_AMOUNTS[blur ?? "high"];
+    const { canvasRef, isRendering, metrics } = useCanvasBlur({
+      videoRef,
+      blurAmount,
+      enabled: true,
+      targetFps,
+      scale
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          blurredVideoBackdropVariants({ blur, overlay }),
+          className
+        ),
+        style: {
+          inset: `-${extension}px`,
+          opacity,
+          contain: "layout style paint",
+          ...style
+        },
+        "data-blur": blur ?? "high",
+        "data-overlay": overlay ?? "none",
+        "data-rendering": isRendering,
+        "aria-hidden": "true",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              className: cn(
+                canvasVariants(),
+                // Scale up the low-res canvas to fill container
+                "scale-[2]",
+                // Inverse of 0.5 scale factor
+                "origin-center"
+              ),
+              style: {
+                // Additional CSS blur for smoother appearance
+                filter: `blur(${blurAmount * 0.3}px)`
+              }
+            }
+          ),
+          overlay && overlay !== "none" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: gradientOverlayVariants(),
+              style: { background: OVERLAY_GRADIENTS[overlay] }
+            }
+          ),
+          showMetrics && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-8 left-8 z-10 bg-black/80 text-white typography-caption px-8 py-4 rounded-4 font-mono", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              "FPS: ",
+              metrics.fps
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              "Frame: ",
+              metrics.frameTime,
+              "ms"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              "Scale: ",
+              scale,
+              "x"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+BlurredVideoBackdrop.displayName = "BlurredVideoBackdrop";
+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 = React5.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] = React5.useState([]);
+  const [internalTime, setInternalTime] = React5.useState(0);
+  const [isLoading, setIsLoading] = React5.useState(false);
+  const [error, setError] = React5.useState(null);
+  const currentTime = externalTime ?? internalTime;
+  React5.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 = React5.useMemo(() => {
+    return cues.find(
+      (cue) => currentTime >= cue.startTime && currentTime <= cue.endTime
+    ) ?? null;
+  }, [cues, currentTime]);
+  const handleSetCurrentTime = React5.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 = React5.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 = React5.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] = React5.useState(true);
+  const [error, setError] = React5.useState(null);
+  const hlsRef = React5.useRef(null);
+  React5.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 = React5.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 = React5.useRef(null);
+    const internalVideoRef = React5.useRef(null);
+    const controlsTimeoutRef = React5.useRef(null);
+    const [isPlaying, setIsPlaying] = React5.useState(false);
+    const [currentTime, setCurrentTime] = React5.useState(0);
+    const [controlsVisible, setControlsVisible] = React5.useState(true);
+    const [captionsEnabled, setCaptionsEnabled] = React5.useState(
+      initialCaptionsEnabled
+    );
+    const [isFullscreen, setIsFullscreen] = React5.useState(false);
+    const videoSrc = React5.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
+    });
+    React5.useEffect(() => {
+      if (externalVideoRef) {
+        externalVideoRef.current = internalVideoRef.current;
+      }
+    }, [externalVideoRef]);
+    React5.useImperativeHandle(
+      ref,
+      () => containerRef.current
+    );
+    React5.useEffect(() => {
+      if (hlsError && onError) {
+        onError(hlsError);
+      }
+    }, [hlsError, onError]);
+    React5.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]);
+    React5.useEffect(() => {
+      if (!autoHideControls || !isPlaying || !controlsVisible) return;
+      controlsTimeoutRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, autoHideDelay);
+      return () => {
+        if (controlsTimeoutRef.current) {
+          clearTimeout(controlsTimeoutRef.current);
+        }
+      };
+    }, [autoHideControls, isPlaying, controlsVisible, autoHideDelay]);
+    React5.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 = React5.useCallback(() => {
+      const video = internalVideoRef.current;
+      if (!video) return;
+      if (video.paused) {
+        video.play().catch(() => {
+        });
+      } else {
+        video.pause();
+      }
+    }, []);
+    const toggleCaptions = React5.useCallback(() => {
+      setCaptionsEnabled((prev) => !prev);
+    }, []);
+    const toggleFullscreen = React5.useCallback(() => {
+      if (!document.fullscreenElement) {
+        containerRef.current?.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }, []);
+    const showControls = React5.useCallback(() => {
+      setControlsVisible(true);
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    }, []);
+    const handleMouseLeave = React5.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" })
+      ] })
+    )
+  }
+);
+var VideoWithBackdropContext = React5.createContext(null);
+function useVideoWithBackdropContext() {
+  const context = React5.useContext(VideoWithBackdropContext);
+  if (!context) {
+    throw new Error(
+      "VideoWithBackdrop compound components must be used within VideoWithBackdrop.Root"
+    );
+  }
+  return context;
+}
+var videoWithBackdropVariants = tv({
+  base: ["relative", "overflow-hidden", "bg-black"],
+  variants: {
+    /**
+     * Full-height mode for dialogs.
+     */
+    fullHeight: {
+      true: "h-full w-full",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    fullHeight: false
+  }
+});
+var contentVariants = tv({
+  base: ["relative", "z-10", "flex", "items-center", "justify-center"],
+  variants: {
+    fullHeight: {
+      true: "h-full w-full",
+      false: ""
+    },
+    padding: {
+      none: "",
+      sm: "p-16",
+      md: "p-24",
+      lg: "p-48"
+    }
+  },
+  defaultVariants: {
+    fullHeight: false,
+    padding: "md"
+  }
+});
+var VideoWithBackdropRoot = React5.forwardRef(({ className, src, cloudflare, fullHeight, children, ...props }, ref) => {
+  const videoRef = React5.useRef(null);
+  const contextValue = React5.useMemo(
+    () => ({ videoRef, src, cloudflare }),
+    [src, cloudflare]
+  );
+  return /* @__PURE__ */ jsx(VideoWithBackdropContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(videoWithBackdropVariants({ fullHeight }), className),
+      "data-full-height": fullHeight ?? false,
+      ...props,
+      children
+    }
+  ) });
+});
+VideoWithBackdropRoot.displayName = "VideoWithBackdropRoot";
+var VideoWithBackdropBackdrop = React5.forwardRef(({ ...props }, ref) => {
+  const { videoRef } = useVideoWithBackdropContext();
+  return /* @__PURE__ */ jsx(BlurredVideoBackdrop, { ref, videoRef, ...props });
+});
+VideoWithBackdropBackdrop.displayName = "VideoWithBackdropBackdrop";
+var VideoWithBackdropContent = React5.forwardRef(({ className, fullHeight, padding, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(contentVariants({ fullHeight, padding }), className),
+      ...props,
+      children
+    }
+  );
+});
+VideoWithBackdropContent.displayName = "VideoWithBackdropContent";
+var VideoWithBackdropVideo = React5.forwardRef(({ className, maxWidth = "960px", cloudflare, src, ...props }, ref) => {
+  const context = useVideoWithBackdropContext();
+  const videoCloudflare = cloudflare ?? context.cloudflare;
+  const videoSrc = src ?? context.src;
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: { maxWidth }, children: /* @__PURE__ */ jsx(
+    VideoPlayer,
+    {
+      cloudflare: videoCloudflare,
+      src: videoSrc,
+      videoRef: context.videoRef,
+      ...props
+    }
+  ) });
+});
+VideoWithBackdropVideo.displayName = "VideoWithBackdropVideo";
+var VideoWithBackdrop = React5.forwardRef(
+  ({
+    src,
+    cloudflare,
+    blur = "high",
+    overlay = "vignette",
+    backdropOpacity = 0.6,
+    maxWidth = "960px",
+    padding = "md",
+    rounded = "lg",
+    className,
+    targetFps = 30,
+    scale = 0.5,
+    ...videoProps
+  }, ref) => {
+    const videoRef = React5.useRef(null);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          videoWithBackdropVariants({ fullHeight: true }),
+          className
+        ),
+        "data-component": "video-with-backdrop",
+        children: [
+          /* @__PURE__ */ jsx(
+            BlurredVideoBackdrop,
+            {
+              videoRef,
+              blur,
+              overlay,
+              opacity: backdropOpacity,
+              targetFps,
+              scale
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: cn(contentVariants({ fullHeight: true, padding })), children: /* @__PURE__ */ jsx("div", { className: "w-full", style: { maxWidth }, children: /* @__PURE__ */ jsx(
+            VideoPlayer,
+            {
+              src,
+              cloudflare,
+              videoRef,
+              rounded,
+              ...videoProps
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+VideoWithBackdrop.displayName = "VideoWithBackdrop";
+var VideoWithBackdropParts = Object.assign(VideoWithBackdropRoot, {
+  Root: VideoWithBackdropRoot,
+  Backdrop: VideoWithBackdropBackdrop,
+  Content: VideoWithBackdropContent,
+  Video: VideoWithBackdropVideo
+});
+
+export { VideoWithBackdrop, VideoWithBackdropBackdrop, VideoWithBackdropContent, VideoWithBackdropParts, VideoWithBackdropRoot, VideoWithBackdropVideo, contentVariants, videoWithBackdropVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map