@djangocfg/ui-tools 2.1.110 → 2.1.111

package/dist/chunk-47T5ECYV.cjs

@@ -0,0 +1,1357 @@
+'use strict';
+
+var chunkF2N7P5XU_cjs = require('./chunk-F2N7P5XU.cjs');
+var chunkXTBRWVIV_cjs = require('./chunk-XTBRWVIV.cjs');
+var chunkWGEGR3DF_cjs = require('./chunk-WGEGR3DF.cjs');
+var react = require('react');
+require('@vidstack/react/player/styles/base.css');
+require('@vidstack/react/player/styles/default/theme.css');
+require('@vidstack/react/player/styles/default/layouts/video.css');
+var lib = require('@djangocfg/ui-core/lib');
+var react$1 = require('@vidstack/react');
+var _default = require('@vidstack/react/player/layouts/default');
+var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@djangocfg/ui-core');
+var lucideReact = require('lucide-react');
+
+var videoDebug = lib.createMediaLogger("VideoPlayer");
+function getVidstackSrc(source) {
+  switch (source.type) {
+    case "youtube":
+      return `youtube/${source.id}`;
+    case "vimeo":
+      return `vimeo/${source.id}`;
+    case "hls":
+      return { src: source.url, type: "application/x-mpegurl" };
+    case "dash":
+      return { src: source.url, type: "application/dash+xml" };
+    case "url":
+      return source.url;
+    default:
+      return "";
+  }
+}
+chunkWGEGR3DF_cjs.__name(getVidstackSrc, "getVidstackSrc");
+function DefaultErrorFallback({ error }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-4 text-white bg-black", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: "w-16 h-16 text-muted-foreground",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg", children: error || "Video cannot be played" })
+  ] });
+}
+chunkWGEGR3DF_cjs.__name(DefaultErrorFallback, "DefaultErrorFallback");
+var VidstackProvider = react.forwardRef(
+  ({
+    source,
+    aspectRatio = 16 / 9,
+    autoPlay = false,
+    muted = false,
+    loop = false,
+    playsInline = true,
+    controls = true,
+    className,
+    showInfo = false,
+    theme = "default",
+    errorFallback,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onLoadStart,
+    onCanPlay,
+    onTimeUpdate
+  }, ref) => {
+    const playerRef = react.useRef(null);
+    const [hasError, setHasError] = react.useState(false);
+    const [errorMessage, setErrorMessage] = react.useState("Video cannot be played");
+    const lastSavedTimeRef = react.useRef(0);
+    const hasRestoredPositionRef = react.useRef(false);
+    const {
+      getPosterUrl,
+      cachePosterUrl,
+      saveVideoPosition,
+      getVideoPosition
+    } = chunkXTBRWVIV_cjs.useVideoCache();
+    const sourceKey = react.useMemo(() => {
+      switch (source.type) {
+        case "youtube":
+          return `youtube:${source.id}`;
+        case "vimeo":
+          return `vimeo:${source.id}`;
+        case "hls":
+        case "dash":
+        case "url":
+          return `url:${source.url}`;
+        default:
+          return null;
+      }
+    }, [source]);
+    const posterUrl = react.useMemo(() => {
+      if (source.poster) return source.poster;
+      if (!source.title) return void 0;
+      const cached = getPosterUrl(source.title);
+      if (cached) return cached;
+      const url = lib.generateOgImageUrl({ title: source.title });
+      cachePosterUrl(source.title, url);
+      return url;
+    }, [source.poster, source.title, getPosterUrl, cachePosterUrl]);
+    const vidstackSrc = react.useMemo(() => getVidstackSrc(source), [source]);
+    react.useEffect(() => {
+      const srcString = typeof vidstackSrc === "string" ? vidstackSrc : vidstackSrc.src;
+      videoDebug.load(srcString, source.type);
+    }, [vidstackSrc, source.type]);
+    const retry = react.useCallback(() => {
+      setHasError(false);
+      setErrorMessage("Video cannot be played");
+      const player = playerRef.current;
+      if (player) {
+        player.currentTime = 0;
+        player.play();
+      }
+    }, []);
+    react.useImperativeHandle(
+      ref,
+      () => {
+        const player = playerRef.current;
+        return {
+          play: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => player?.play(), "play"),
+          pause: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => player?.pause(), "pause"),
+          togglePlay: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+            if (player) {
+              player.paused ? player.play() : player.pause();
+            }
+          }, "togglePlay"),
+          seekTo: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((time) => {
+            if (player) player.currentTime = time;
+          }, "seekTo"),
+          setVolume: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((volume) => {
+            if (player) player.volume = Math.max(0, Math.min(1, volume));
+          }, "setVolume"),
+          toggleMute: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+            if (player) player.muted = !player.muted;
+          }, "toggleMute"),
+          enterFullscreen: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => player?.enterFullscreen(), "enterFullscreen"),
+          exitFullscreen: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => player?.exitFullscreen(), "exitFullscreen"),
+          get currentTime() {
+            return player?.currentTime ?? 0;
+          },
+          get duration() {
+            return player?.duration ?? 0;
+          },
+          get paused() {
+            return player?.paused ?? true;
+          }
+        };
+      },
+      []
+    );
+    const handlePlay = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => onPlay?.(), "handlePlay");
+    const handlePause = react.useCallback(() => {
+      const player = playerRef.current;
+      if (sourceKey && player && player.currentTime > 0) {
+        saveVideoPosition(sourceKey, player.currentTime);
+        lastSavedTimeRef.current = player.currentTime;
+      }
+      onPause?.();
+    }, [sourceKey, saveVideoPosition, onPause]);
+    const handleEnded = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => onEnded?.(), "handleEnded");
+    const handleError = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((detail) => {
+      const error = detail;
+      const msg = error?.message || "Video playback error";
+      videoDebug.error("Vidstack error", { message: msg });
+      setHasError(true);
+      setErrorMessage(msg);
+      onError?.(msg);
+    }, "handleError");
+    const handleLoadStart = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => onLoadStart?.(), "handleLoadStart");
+    const handleCanPlay = react.useCallback(() => {
+      const player = playerRef.current;
+      if (player) {
+        videoDebug.state("canplay", { duration: player.duration });
+        const mediaEl = player.provider?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      }
+      setHasError(false);
+      if (sourceKey && player && !hasRestoredPositionRef.current) {
+        const cachedPosition = getVideoPosition(sourceKey);
+        if (cachedPosition && cachedPosition > 0) {
+          const duration = player.duration;
+          if (cachedPosition < duration - 1) {
+            videoDebug.debug(`Restoring position: ${cachedPosition}s`);
+            player.currentTime = cachedPosition;
+          }
+        }
+        hasRestoredPositionRef.current = true;
+      }
+      onCanPlay?.();
+    }, [sourceKey, getVideoPosition, onCanPlay]);
+    const handleTimeUpdate = react.useCallback(() => {
+      const player = playerRef.current;
+      if (!player) return;
+      if (sourceKey && player.currentTime > 0) {
+        const timeSinceLastSave = player.currentTime - lastSavedTimeRef.current;
+        if (timeSinceLastSave >= 5 || timeSinceLastSave < 0) {
+          saveVideoPosition(sourceKey, player.currentTime);
+          lastSavedTimeRef.current = player.currentTime;
+        }
+      }
+      onTimeUpdate?.(player.currentTime, player.duration);
+    }, [sourceKey, saveVideoPosition, onTimeUpdate]);
+    react.useEffect(() => {
+      hasRestoredPositionRef.current = false;
+      lastSavedTimeRef.current = 0;
+    }, [sourceKey]);
+    react.useEffect(() => {
+      const player = playerRef.current;
+      if (!player) return;
+      const handleSeeking = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.event("seeking", { currentTime: player.currentTime });
+      }, "handleSeeking");
+      const handleSeeked = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.event("seeked", { currentTime: player.currentTime });
+        const mediaEl = player.provider?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      }, "handleSeeked");
+      const handleWaiting = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.warn("WAITING - buffering...");
+        const mediaEl = player.provider?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      }, "handleWaiting");
+      const handleStalled = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.warn("STALLED - network issue");
+        const mediaEl = player.provider?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      }, "handleStalled");
+      player.addEventListener("seeking", handleSeeking);
+      player.addEventListener("seeked", handleSeeked);
+      player.addEventListener("waiting", handleWaiting);
+      player.addEventListener("stalled", handleStalled);
+      return () => {
+        player.removeEventListener("seeking", handleSeeking);
+        player.removeEventListener("seeked", handleSeeked);
+        player.removeEventListener("waiting", handleWaiting);
+        player.removeEventListener("stalled", handleStalled);
+      };
+    }, [vidstackSrc]);
+    const isFillMode = aspectRatio === "fill";
+    const computedAspectRatio = aspectRatio === "auto" || aspectRatio === "fill" ? void 0 : aspectRatio;
+    const renderErrorFallback = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+      const fallbackProps = { error: errorMessage, retry };
+      if (typeof errorFallback === "function") {
+        return errorFallback(fallbackProps);
+      }
+      if (errorFallback) {
+        return errorFallback;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(DefaultErrorFallback, { ...fallbackProps });
+    }, "renderErrorFallback");
+    const containerStyles = isFillMode ? { width: "100%", height: "100%" } : { aspectRatio: computedAspectRatio };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: lib.cn(isFillMode ? "w-full h-full" : "w-full", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: lib.cn(
+            "relative w-full rounded-sm bg-black overflow-hidden",
+            isFillMode && "h-full",
+            theme === "minimal" && "rounded-none",
+            theme === "modern" && "rounded-xl shadow-2xl"
+          ),
+          style: containerStyles,
+          children: hasError ? renderErrorFallback() : /* @__PURE__ */ jsxRuntime.jsxs(
+            react$1.MediaPlayer,
+            {
+              ref: playerRef,
+              title: source.title || "Video",
+              src: vidstackSrc,
+              autoPlay,
+              muted,
+              loop,
+              playsInline,
+              onPlay: handlePlay,
+              onPause: handlePause,
+              onEnded: handleEnded,
+              onError: handleError,
+              onLoadStart: handleLoadStart,
+              onCanPlay: handleCanPlay,
+              onTimeUpdate: handleTimeUpdate,
+              className: "w-full h-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(react$1.MediaProvider, {}),
+                posterUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                  react$1.Poster,
+                  {
+                    className: "vds-poster",
+                    src: posterUrl,
+                    alt: source.title || "Video poster",
+                    style: { objectFit: "cover" }
+                  }
+                ),
+                controls && /* @__PURE__ */ jsxRuntime.jsx(_default.DefaultVideoLayout, { icons: _default.defaultLayoutIcons, thumbnails: posterUrl })
+              ]
+            }
+          )
+        }
+      ),
+      showInfo && source.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-foreground", children: source.title }) })
+    ] });
+  }
+);
+VidstackProvider.displayName = "VidstackProvider";
+function useVideoPlayerSettings2() {
+  const { settings, saveSettings } = chunkXTBRWVIV_cjs.useVideoPlayerSettings();
+  const updateVolume = react.useCallback(
+    (volume) => {
+      saveSettings({ volume: Math.max(0, Math.min(1, volume)) });
+    },
+    [saveSettings]
+  );
+  const updateLoop = react.useCallback(
+    (isLooping) => {
+      saveSettings({ isLooping });
+    },
+    [saveSettings]
+  );
+  const updateSettings = react.useCallback(
+    (newSettings) => {
+      saveSettings(newSettings);
+    },
+    [saveSettings]
+  );
+  return {
+    settings,
+    updateVolume,
+    updateLoop,
+    updateSettings
+  };
+}
+chunkWGEGR3DF_cjs.__name(useVideoPlayerSettings2, "useVideoPlayerSettings");
+function getVideoUrl(source) {
+  switch (source.type) {
+    case "url":
+      return source.url;
+    case "data-url":
+      return source.data;
+    default:
+      return "";
+  }
+}
+chunkWGEGR3DF_cjs.__name(getVideoUrl, "getVideoUrl");
+var NativeProvider = react.forwardRef(
+  ({
+    source,
+    aspectRatio = 16 / 9,
+    autoPlay = true,
+    muted = true,
+    loop = true,
+    playsInline = true,
+    preload = "auto",
+    controls = false,
+    disableContextMenu = true,
+    showPreloader = true,
+    preloaderTimeout = 5e3,
+    className,
+    videoClassName,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onLoadStart,
+    onCanPlay,
+    onTimeUpdate
+  }, ref) => {
+    const [isLoading, setIsLoading] = react.useState(showPreloader);
+    const videoRef = react.useRef(null);
+    const { settings: savedSettings, updateVolume } = useVideoPlayerSettings2();
+    const videoUrl = getVideoUrl(source);
+    react.useEffect(() => {
+      videoDebug.load(videoUrl, source.type);
+    }, [videoUrl, source.type]);
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        play: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => videoRef.current?.play(), "play"),
+        pause: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => videoRef.current?.pause(), "pause"),
+        togglePlay: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+          const video = videoRef.current;
+          if (video) {
+            video.paused ? video.play() : video.pause();
+          }
+        }, "togglePlay"),
+        seekTo: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((time) => {
+          if (videoRef.current) videoRef.current.currentTime = time;
+        }, "seekTo"),
+        setVolume: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((volume) => {
+          if (videoRef.current) videoRef.current.volume = Math.max(0, Math.min(1, volume));
+        }, "setVolume"),
+        toggleMute: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+          if (videoRef.current) videoRef.current.muted = !videoRef.current.muted;
+        }, "toggleMute"),
+        enterFullscreen: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => videoRef.current?.requestFullscreen(), "enterFullscreen"),
+        exitFullscreen: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => document.exitFullscreen(), "exitFullscreen"),
+        get currentTime() {
+          return videoRef.current?.currentTime ?? 0;
+        },
+        get duration() {
+          return videoRef.current?.duration ?? 0;
+        },
+        get paused() {
+          return videoRef.current?.paused ?? true;
+        }
+      }),
+      []
+    );
+    react.useEffect(() => {
+      if (!showPreloader) return;
+      const video = videoRef.current;
+      if (!video) return;
+      if (video.readyState >= 3) {
+        setIsLoading(false);
+        return;
+      }
+      const hideLoader = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => setIsLoading(false), "hideLoader");
+      video.addEventListener("canplay", hideLoader);
+      video.addEventListener("loadeddata", hideLoader);
+      video.addEventListener("playing", hideLoader);
+      const timeout = setTimeout(hideLoader, preloaderTimeout);
+      return () => {
+        video.removeEventListener("canplay", hideLoader);
+        video.removeEventListener("loadeddata", hideLoader);
+        video.removeEventListener("playing", hideLoader);
+        clearTimeout(timeout);
+      };
+    }, [showPreloader, preloaderTimeout]);
+    react.useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const handleLoadedMetadata = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.state("loadedmetadata", { duration: video.duration });
+      }, "handleLoadedMetadata");
+      const handleCanPlayDebug = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.state("canplay", { duration: video.duration, buffered: video.buffered.length });
+        videoDebug.buffer(video.buffered, video.duration);
+        video.volume = savedSettings.volume;
+      }, "handleCanPlayDebug");
+      const handleSeeking = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.event("seeking", { currentTime: video.currentTime });
+      }, "handleSeeking");
+      const handleSeeked = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.event("seeked", { currentTime: video.currentTime });
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleSeeked");
+      const handleWaiting = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.warn("WAITING - buffering...");
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleWaiting");
+      const handleStalled = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.warn("STALLED - network issue");
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleStalled");
+      video.addEventListener("loadedmetadata", handleLoadedMetadata);
+      video.addEventListener("canplay", handleCanPlayDebug);
+      video.addEventListener("seeking", handleSeeking);
+      video.addEventListener("seeked", handleSeeked);
+      video.addEventListener("waiting", handleWaiting);
+      video.addEventListener("stalled", handleStalled);
+      return () => {
+        video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        video.removeEventListener("canplay", handleCanPlayDebug);
+        video.removeEventListener("seeking", handleSeeking);
+        video.removeEventListener("seeked", handleSeeked);
+        video.removeEventListener("waiting", handleWaiting);
+        video.removeEventListener("stalled", handleStalled);
+      };
+    }, [savedSettings.volume]);
+    react.useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const handleVolumeChange = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        updateVolume(video.volume);
+      }, "handleVolumeChange");
+      video.addEventListener("volumechange", handleVolumeChange);
+      return () => video.removeEventListener("volumechange", handleVolumeChange);
+    }, [updateVolume]);
+    const handleContextMenu = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((e) => {
+      if (disableContextMenu) {
+        e.preventDefault();
+      }
+    }, "handleContextMenu");
+    const handleError = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((e) => {
+      const video = e.currentTarget;
+      const errorMsg = video.error?.message || "Video playback error";
+      videoDebug.error("Video error", { code: video.error?.code, message: errorMsg });
+      setIsLoading(false);
+      onError?.(errorMsg);
+    }, "handleError");
+    const handleTimeUpdate = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+      const video = videoRef.current;
+      if (video && onTimeUpdate) {
+        onTimeUpdate(video.currentTime, video.duration);
+      }
+    }, "handleTimeUpdate");
+    const isFillMode = aspectRatio === "fill";
+    const computedAspectRatio = aspectRatio === "auto" || aspectRatio === "fill" ? void 0 : aspectRatio;
+    const videoContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      showPreloader && isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: lib.cn(
+            "absolute inset-0 flex items-center justify-center bg-muted/30 backdrop-blur-sm z-10"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.Preloader, { size: "lg", spinnerClassName: "text-white" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          ref: videoRef,
+          className: lib.cn("w-full h-full object-cover", videoClassName),
+          src: videoUrl,
+          autoPlay,
+          muted,
+          loop,
+          playsInline,
+          preload,
+          controls,
+          poster: source.poster,
+          onContextMenu: handleContextMenu,
+          onLoadStart,
+          onCanPlay,
+          onPlay,
+          onPause,
+          onPlaying: () => setIsLoading(false),
+          onEnded,
+          onError: handleError,
+          onTimeUpdate: handleTimeUpdate
+        }
+      )
+    ] });
+    if (isFillMode) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn("relative w-full h-full overflow-hidden", className), children: videoContent });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn("relative overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.AspectRatio, { ratio: computedAspectRatio, children: videoContent }) });
+  }
+);
+NativeProvider.displayName = "NativeProvider";
+function DefaultErrorFallback2({ error }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-4 text-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: "w-16 h-16 text-muted-foreground",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg", children: error || "Video cannot be previewed" })
+  ] });
+}
+chunkWGEGR3DF_cjs.__name(DefaultErrorFallback2, "DefaultErrorFallback");
+var StreamProvider = react.forwardRef(
+  ({
+    source,
+    aspectRatio = 16 / 9,
+    autoPlay = false,
+    muted = false,
+    loop = false,
+    playsInline = true,
+    preload = "metadata",
+    controls = true,
+    disableContextMenu = false,
+    showPreloader = true,
+    preloaderTimeout = 1e4,
+    className,
+    videoClassName,
+    errorFallback,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onLoadStart,
+    onCanPlay,
+    onTimeUpdate,
+    onBufferProgress
+  }, ref) => {
+    const [videoUrl, setVideoUrl] = react.useState(null);
+    const [isLoading, setIsLoading] = react.useState(true);
+    const [hasError, setHasError] = react.useState(false);
+    const [errorMessage, setErrorMessage] = react.useState("Video cannot be previewed");
+    const videoRef = react.useRef(null);
+    const contentKeyRef = react.useRef(null);
+    const lastSavedTimeRef = react.useRef(0);
+    const getOrCreateBlobUrl = chunkXTBRWVIV_cjs.useMediaCacheStore.getState().getOrCreateBlobUrl;
+    const releaseBlobUrl = chunkXTBRWVIV_cjs.useMediaCacheStore.getState().releaseBlobUrl;
+    const getOrCreateStreamUrl = chunkXTBRWVIV_cjs.useMediaCacheStore.getState().getOrCreateStreamUrl;
+    const saveVideoPosition = chunkXTBRWVIV_cjs.useMediaCacheStore.getState().saveVideoPosition;
+    const getVideoPosition = chunkXTBRWVIV_cjs.useMediaCacheStore.getState().getVideoPosition;
+    const { settings: savedSettings, updateVolume } = useVideoPlayerSettings2();
+    const retry = react.useCallback(() => {
+      setHasError(false);
+      setIsLoading(true);
+      if (source.type === "stream") {
+        const streamSource = source;
+        const freshUrl = streamSource.getStreamUrl(streamSource.sessionId, streamSource.path);
+        setVideoUrl(freshUrl);
+        return;
+      }
+      const video = videoRef.current;
+      if (video && videoUrl) {
+        video.load();
+      }
+    }, [source, videoUrl]);
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        play: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => videoRef.current?.play(), "play"),
+        pause: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => videoRef.current?.pause(), "pause"),
+        togglePlay: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+          const video = videoRef.current;
+          if (video) {
+            video.paused ? video.play() : video.pause();
+          }
+        }, "togglePlay"),
+        seekTo: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((time) => {
+          if (videoRef.current) videoRef.current.currentTime = time;
+        }, "seekTo"),
+        setVolume: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((volume) => {
+          if (videoRef.current) videoRef.current.volume = Math.max(0, Math.min(1, volume));
+        }, "setVolume"),
+        toggleMute: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+          if (videoRef.current) videoRef.current.muted = !videoRef.current.muted;
+        }, "toggleMute"),
+        enterFullscreen: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => videoRef.current?.requestFullscreen(), "enterFullscreen"),
+        exitFullscreen: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => document.exitFullscreen(), "exitFullscreen"),
+        get currentTime() {
+          return videoRef.current?.currentTime ?? 0;
+        },
+        get duration() {
+          return videoRef.current?.duration ?? 0;
+        },
+        get paused() {
+          return videoRef.current?.paused ?? true;
+        }
+      }),
+      []
+    );
+    const isMountedRef = react.useRef(true);
+    react.useEffect(() => {
+      isMountedRef.current = true;
+      return () => {
+        isMountedRef.current = false;
+        if (contentKeyRef.current) {
+          chunkXTBRWVIV_cjs.useMediaCacheStore.getState().releaseBlobUrl(contentKeyRef.current);
+          contentKeyRef.current = null;
+        }
+      };
+    }, []);
+    react.useEffect(() => {
+      if (contentKeyRef.current) {
+        const newKey = source.type === "blob" ? chunkXTBRWVIV_cjs.generateContentKey(source.data) : null;
+        if (newKey !== contentKeyRef.current) {
+          releaseBlobUrl(contentKeyRef.current);
+          contentKeyRef.current = null;
+        }
+      }
+      setHasError(false);
+      setIsLoading(true);
+      switch (source.type) {
+        case "stream": {
+          const streamSource = source;
+          const url = getOrCreateStreamUrl(
+            streamSource.sessionId,
+            streamSource.path,
+            streamSource.getStreamUrl
+          );
+          videoDebug.load(url, "stream");
+          setVideoUrl(url);
+          break;
+        }
+        case "blob": {
+          const blobSource = source;
+          const contentKey = chunkXTBRWVIV_cjs.generateContentKey(blobSource.data);
+          contentKeyRef.current = contentKey;
+          const url = getOrCreateBlobUrl(
+            contentKey,
+            blobSource.data,
+            blobSource.mimeType || "video/mp4"
+          );
+          videoDebug.load(url, "blob");
+          setVideoUrl(url);
+          break;
+        }
+        case "data-url": {
+          const dataUrlSource = source;
+          videoDebug.load(dataUrlSource.data.slice(0, 50) + "...", "data-url");
+          setVideoUrl(dataUrlSource.data);
+          break;
+        }
+        default:
+          videoDebug.error("Invalid video source type", { type: source.type });
+          setVideoUrl(null);
+          setHasError(true);
+          setErrorMessage("Invalid video source");
+      }
+    }, [source]);
+    const getSourceKey = react.useCallback(() => {
+      switch (source.type) {
+        case "stream":
+          return `stream:${source.sessionId}:${source.path}`;
+        case "blob":
+          return contentKeyRef.current ? `blob:${contentKeyRef.current}` : null;
+        case "data-url":
+          return `data:${source.data.slice(0, 50)}`;
+        default:
+          return null;
+      }
+    }, [source]);
+    const handleCanPlay = react.useCallback(() => {
+      const video = videoRef.current;
+      if (video) {
+        videoDebug.state("canplay", { duration: video.duration, buffered: video.buffered.length });
+        videoDebug.buffer(video.buffered, video.duration);
+        video.volume = savedSettings.volume;
+      }
+      setIsLoading(false);
+      const sourceKey = getSourceKey();
+      if (sourceKey && video) {
+        const cachedPosition = getVideoPosition(sourceKey);
+        if (cachedPosition && cachedPosition > 0) {
+          const duration = video.duration;
+          if (cachedPosition < duration - 1) {
+            videoDebug.debug(`Restoring position: ${cachedPosition}s`);
+            video.currentTime = cachedPosition;
+          }
+        }
+      }
+      onCanPlay?.();
+    }, [getSourceKey, onCanPlay, savedSettings.volume]);
+    const handleTimeUpdate = react.useCallback(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const sourceKey = getSourceKey();
+      if (sourceKey && video.currentTime > 0) {
+        const timeSinceLastSave = video.currentTime - lastSavedTimeRef.current;
+        if (timeSinceLastSave >= 5 || timeSinceLastSave < 0) {
+          saveVideoPosition(sourceKey, video.currentTime);
+          lastSavedTimeRef.current = video.currentTime;
+        }
+      }
+      onTimeUpdate?.(video.currentTime, video.duration);
+    }, [getSourceKey, onTimeUpdate]);
+    const handlePause = react.useCallback(() => {
+      const video = videoRef.current;
+      const sourceKey = getSourceKey();
+      if (sourceKey && video && video.currentTime > 0) {
+        saveVideoPosition(sourceKey, video.currentTime);
+        lastSavedTimeRef.current = video.currentTime;
+      }
+      onPause?.();
+    }, [getSourceKey, onPause]);
+    const handleProgress = react.useCallback(() => {
+      const video = videoRef.current;
+      if (!video || !onBufferProgress) return;
+      if (video.buffered.length > 0) {
+        const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+        const duration = video.duration;
+        if (duration > 0 && !isNaN(bufferedEnd)) {
+          onBufferProgress(bufferedEnd, duration);
+        }
+      }
+    }, [onBufferProgress]);
+    react.useEffect(() => {
+      if (!showPreloader || !isLoading) return;
+      const timeout = setTimeout(() => {
+        setIsLoading(false);
+      }, preloaderTimeout);
+      return () => clearTimeout(timeout);
+    }, [showPreloader, isLoading, preloaderTimeout]);
+    const handleContextMenu = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((e) => {
+      if (disableContextMenu) {
+        e.preventDefault();
+      }
+    }, "handleContextMenu");
+    const handleLoadedData = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+      setIsLoading(false);
+    }, "handleLoadedData");
+    const handleError = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+      const video = videoRef.current;
+      if (video) {
+        videoDebug.error("Video error", { code: video.error?.code, message: video.error?.message });
+      }
+      setIsLoading(false);
+      setHasError(true);
+      setErrorMessage("Failed to load video");
+      onError?.("Video playback error");
+    }, "handleError");
+    react.useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const handleLoadedMetadata = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.state("loadedmetadata", { duration: video.duration });
+      }, "handleLoadedMetadata");
+      const handleSeeking = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.event("seeking", { currentTime: video.currentTime });
+      }, "handleSeeking");
+      const handleSeeked = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.event("seeked", { currentTime: video.currentTime });
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleSeeked");
+      const handleWaiting = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.warn("WAITING - buffering...");
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleWaiting");
+      const handleStalled = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        videoDebug.warn("STALLED - network issue");
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleStalled");
+      video.addEventListener("loadedmetadata", handleLoadedMetadata);
+      video.addEventListener("seeking", handleSeeking);
+      video.addEventListener("seeked", handleSeeked);
+      video.addEventListener("waiting", handleWaiting);
+      video.addEventListener("stalled", handleStalled);
+      return () => {
+        video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        video.removeEventListener("seeking", handleSeeking);
+        video.removeEventListener("seeked", handleSeeked);
+        video.removeEventListener("waiting", handleWaiting);
+        video.removeEventListener("stalled", handleStalled);
+      };
+    }, [videoUrl]);
+    react.useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const handleVolumeChange = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        updateVolume(video.volume);
+      }, "handleVolumeChange");
+      video.addEventListener("volumechange", handleVolumeChange);
+      return () => video.removeEventListener("volumechange", handleVolumeChange);
+    }, [videoUrl, updateVolume]);
+    const isFillMode = aspectRatio === "fill";
+    const computedAspectRatio = aspectRatio === "auto" || aspectRatio === "fill" ? void 0 : aspectRatio;
+    const renderErrorFallback = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+      const fallbackProps = { error: errorMessage, retry };
+      if (typeof errorFallback === "function") {
+        return errorFallback(fallbackProps);
+      }
+      if (errorFallback) {
+        return errorFallback;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(DefaultErrorFallback2, { ...fallbackProps });
+    }, "renderErrorFallback");
+    if (!videoUrl || hasError) {
+      if (isFillMode) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn("relative w-full h-full overflow-hidden bg-black", className), children: renderErrorFallback() });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn("relative overflow-hidden bg-black", className), children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.AspectRatio, { ratio: computedAspectRatio, children: renderErrorFallback() }) });
+    }
+    const videoContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      showPreloader && isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.Preloader, { size: "lg", spinnerClassName: "text-white" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          ref: videoRef,
+          src: videoUrl,
+          className: lib.cn(
+            "w-full h-full object-contain",
+            isLoading && "opacity-0",
+            videoClassName
+          ),
+          autoPlay,
+          muted,
+          loop,
+          playsInline,
+          preload,
+          controls,
+          crossOrigin: "anonymous",
+          poster: source.poster,
+          onContextMenu: handleContextMenu,
+          onLoadStart,
+          onCanPlay: handleCanPlay,
+          onLoadedData: handleLoadedData,
+          onPlay,
+          onPause: handlePause,
+          onEnded,
+          onError: handleError,
+          onTimeUpdate: handleTimeUpdate,
+          onProgress: handleProgress
+        }
+      )
+    ] });
+    if (isFillMode) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn("relative w-full h-full overflow-hidden bg-black", className), children: videoContent });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn("relative overflow-hidden bg-black", className), children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.AspectRatio, { ratio: computedAspectRatio, children: videoContent }) });
+  }
+);
+StreamProvider.displayName = "StreamProvider";
+var VideoPlayerContext = react.createContext(null);
+function VideoPlayerProvider({
+  children,
+  getStreamUrl,
+  sessionId
+}) {
+  const value = react.useMemo(
+    () => ({ getStreamUrl, sessionId }),
+    [getStreamUrl, sessionId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(VideoPlayerContext.Provider, { value, children });
+}
+chunkWGEGR3DF_cjs.__name(VideoPlayerProvider, "VideoPlayerProvider");
+function useVideoPlayerContext() {
+  return react.useContext(VideoPlayerContext);
+}
+chunkWGEGR3DF_cjs.__name(useVideoPlayerContext, "useVideoPlayerContext");
+
+// src/tools/VideoPlayer/utils/resolvers.ts
+function resolvePlayerMode(source, mode = "auto") {
+  if (mode !== "auto") {
+    return mode;
+  }
+  switch (source.type) {
+    case "youtube":
+    case "vimeo":
+    case "hls":
+    case "dash":
+      return "vidstack";
+    case "stream":
+    case "blob":
+      return "streaming";
+    case "data-url":
+    case "url":
+    default:
+      return "native";
+  }
+}
+chunkWGEGR3DF_cjs.__name(resolvePlayerMode, "resolvePlayerMode");
+function isSimpleStreamSource(source) {
+  return source.type === "stream" && !("getStreamUrl" in source);
+}
+chunkWGEGR3DF_cjs.__name(isSimpleStreamSource, "isSimpleStreamSource");
+function resolveStreamSource(source, context) {
+  if (!context?.getStreamUrl) {
+    console.warn(
+      "VideoPlayer: Stream source requires getStreamUrl. Either provide it in source or wrap with VideoPlayerProvider."
+    );
+    return null;
+  }
+  const sessionId = source.sessionId || context.sessionId;
+  if (!sessionId) {
+    console.warn("VideoPlayer: Stream source requires sessionId.");
+    return null;
+  }
+  return {
+    type: "stream",
+    sessionId,
+    path: source.path,
+    getStreamUrl: context.getStreamUrl,
+    mimeType: source.mimeType,
+    title: source.title,
+    poster: source.poster
+  };
+}
+chunkWGEGR3DF_cjs.__name(resolveStreamSource, "resolveStreamSource");
+
+// src/tools/VideoPlayer/utils/fileSource.ts
+function resolveFileSource(options) {
+  const {
+    content,
+    path,
+    mimeType,
+    sessionId,
+    loadMethod,
+    getStreamUrl,
+    title,
+    poster
+  } = options;
+  const contentSize = content ? typeof content === "string" ? content.length : content.byteLength : 0;
+  const hasContent = contentSize > 0;
+  if (loadMethod === "http_stream" && !hasContent && sessionId && getStreamUrl) {
+    return {
+      type: "stream",
+      sessionId,
+      path,
+      getStreamUrl,
+      mimeType,
+      title,
+      poster
+    };
+  }
+  if (typeof content === "string" && hasContent) {
+    return {
+      type: "data-url",
+      data: content,
+      title,
+      poster
+    };
+  }
+  if (content instanceof ArrayBuffer && hasContent) {
+    return {
+      type: "blob",
+      data: content,
+      mimeType: mimeType || "video/mp4",
+      title,
+      poster
+    };
+  }
+  return null;
+}
+chunkWGEGR3DF_cjs.__name(resolveFileSource, "resolveFileSource");
+var VideoPlayer = react.forwardRef(
+  ({
+    source: rawSource,
+    mode = "auto",
+    aspectRatio = 16 / 9,
+    autoPlay = false,
+    muted = false,
+    loop = false,
+    playsInline = true,
+    controls = true,
+    preload = "metadata",
+    theme = "default",
+    showInfo = false,
+    className,
+    videoClassName,
+    disableContextMenu = false,
+    showPreloader = true,
+    preloaderTimeout = 5e3,
+    errorFallback,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onLoadStart,
+    onCanPlay,
+    onTimeUpdate
+  }, ref) => {
+    const context = useVideoPlayerContext();
+    const source = react.useMemo(() => {
+      if (isSimpleStreamSource(rawSource)) {
+        const resolved = resolveStreamSource(rawSource, context);
+        if (!resolved) {
+          return null;
+        }
+        return resolved;
+      }
+      return rawSource;
+    }, [rawSource, context]);
+    if (!source) {
+      const errorMessage = "Stream source requires VideoPlayerProvider with getStreamUrl and sessionId";
+      if (typeof errorFallback === "function") {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { aspectRatio: aspectRatio === "fill" ? void 0 : aspectRatio }, children: errorFallback({ error: errorMessage }) });
+      }
+      if (errorFallback) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { aspectRatio: aspectRatio === "fill" ? void 0 : aspectRatio }, children: errorFallback });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className,
+          style: {
+            aspectRatio: aspectRatio === "fill" ? void 0 : aspectRatio,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "black",
+            color: "white"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: errorMessage })
+        }
+      );
+    }
+    const resolvedMode = resolvePlayerMode(source, mode);
+    const commonProps = {
+      aspectRatio,
+      autoPlay,
+      muted,
+      loop,
+      playsInline,
+      controls,
+      preload,
+      className,
+      onPlay,
+      onPause,
+      onEnded,
+      onError,
+      onLoadStart,
+      onCanPlay,
+      onTimeUpdate
+    };
+    switch (resolvedMode) {
+      case "vidstack":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          VidstackProvider,
+          {
+            ref,
+            source,
+            theme,
+            showInfo,
+            errorFallback,
+            ...commonProps
+          }
+        );
+      case "streaming":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          StreamProvider,
+          {
+            ref,
+            source,
+            videoClassName,
+            disableContextMenu,
+            showPreloader,
+            preloaderTimeout,
+            errorFallback,
+            ...commonProps
+          }
+        );
+      case "native":
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          NativeProvider,
+          {
+            ref,
+            source,
+            videoClassName,
+            disableContextMenu,
+            showPreloader,
+            preloaderTimeout,
+            ...commonProps
+          }
+        );
+    }
+  }
+);
+VideoPlayer.displayName = "VideoPlayer";
+function VideoControls({ player, className }) {
+  const store = react$1.useMediaStore(player);
+  const remote = react$1.useMediaRemote();
+  const isPaused = store.paused;
+  const isMuted = store.muted;
+  const isFullscreen = store.fullscreen;
+  const currentTime = store.currentTime;
+  const duration = store.duration;
+  const volume = store.volume;
+  const formatTime = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((seconds) => {
+    if (!seconds || seconds < 0) return "0:00";
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${minutes}:${secs.toString().padStart(2, "0")}`;
+  }, "formatTime");
+  const handleProgressClick = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((e) => {
+    if (!duration) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percentage = clickX / rect.width;
+    const newTime = percentage * duration;
+    remote.seek(newTime);
+  }, "handleProgressClick");
+  const handleVolumeChange = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+    remote.changeVolume(percentage);
+    if (percentage > 0 && isMuted) {
+      remote.toggleMuted();
+    }
+  }, "handleVolumeChange");
+  const progress = duration > 0 ? currentTime / duration * 100 : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: lib.cn(
+        "absolute inset-0 flex flex-col justify-end transition-opacity duration-300",
+        "bg-gradient-to-t from-black/80 via-black/20 to-transparent",
+        "opacity-0 group-hover:opacity-100 focus-within:opacity-100",
+        "pointer-events-none group-hover:pointer-events-auto",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-2 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-1.5 bg-white/20 rounded-full cursor-pointer hover:h-2 transition-all group",
+            onClick: handleProgressClick,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full bg-primary rounded-full transition-all relative group-hover:bg-primary/90",
+                style: { width: `${progress}%` },
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity" })
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 px-4 pb-4 pointer-events-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => remote.togglePaused(),
+              className: "text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full",
+              children: isPaused ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "h-6 w-6" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white text-sm font-medium", children: [
+            formatTime(currentTime),
+            " / ",
+            formatTime(duration)
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 group/volume", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => remote.toggleMuted(),
+                className: "text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full",
+                children: isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "w-0 group-hover/volume:w-20 transition-all overflow-hidden",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "h-1.5 bg-white/20 rounded-full cursor-pointer hover:h-2 transition-all",
+                    onClick: handleVolumeChange,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "h-full bg-white rounded-full transition-all",
+                        style: { width: `${volume * 100}%` }
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => isFullscreen ? remote.exitFullscreen() : remote.enterFullscreen(),
+              className: "text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full",
+              children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { className: "h-5 w-5" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+chunkWGEGR3DF_cjs.__name(VideoControls, "VideoControls");
+function VideoErrorFallback({
+  error,
+  retry,
+  downloadUrl,
+  downloadFilename,
+  fileSize,
+  showRetry = true,
+  className,
+  icon,
+  title,
+  description
+}) {
+  const displayTitle = title || error || "Video cannot be previewed";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkF2N7P5XU_cjs.cn(
+        "absolute inset-0 flex flex-col items-center justify-center gap-4 bg-black/90 text-white p-6",
+        className
+      ),
+      children: [
+        icon || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileVideo, { className: "w-16 h-16 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium text-center", children: displayTitle }),
+        (description || fileSize) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground text-center", children: description || fileSize }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mt-2", children: [
+          showRetry && retry && /* @__PURE__ */ jsxRuntime.jsxs(
+            chunkF2N7P5XU_cjs.Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: retry,
+              className: "gap-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-4 h-4" }),
+                "Retry"
+              ]
+            }
+          ),
+          downloadUrl && /* @__PURE__ */ jsxRuntime.jsx(
+            chunkF2N7P5XU_cjs.DownloadButton,
+            {
+              url: downloadUrl,
+              filename: downloadFilename,
+              variant: "default",
+              size: "sm",
+              children: "Download to view"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+chunkWGEGR3DF_cjs.__name(VideoErrorFallback, "VideoErrorFallback");
+function createVideoErrorFallback(options) {
+  return (props, source) => /* @__PURE__ */ jsxRuntime.jsx(
+    VideoErrorFallback,
+    {
+      ...props,
+      downloadUrl: options.getDownloadUrl?.(source),
+      downloadFilename: options.getFilename?.(source),
+      fileSize: options.getFileSize?.(source),
+      showRetry: options.showRetry
+    }
+  );
+}
+chunkWGEGR3DF_cjs.__name(createVideoErrorFallback, "createVideoErrorFallback");
+
+exports.NativeProvider = NativeProvider;
+exports.StreamProvider = StreamProvider;
+exports.VideoControls = VideoControls;
+exports.VideoErrorFallback = VideoErrorFallback;
+exports.VideoPlayer = VideoPlayer;
+exports.VideoPlayerProvider = VideoPlayerProvider;
+exports.VidstackProvider = VidstackProvider;
+exports.createVideoErrorFallback = createVideoErrorFallback;
+exports.isSimpleStreamSource = isSimpleStreamSource;
+exports.resolveFileSource = resolveFileSource;
+exports.resolvePlayerMode = resolvePlayerMode;
+exports.resolveStreamSource = resolveStreamSource;
+exports.useVideoPlayerContext = useVideoPlayerContext;
+//# sourceMappingURL=chunk-47T5ECYV.cjs.map
+//# sourceMappingURL=chunk-47T5ECYV.cjs.map