stormcloud-video-player 0.2.0 → 0.2.1

package/lib/index.cjs

@@ -36,11 +36,12 @@ __export(index_exports, {
   IS_SAFARI: () => IS_SAFARI,
   SUPPORTS_DASH: () => SUPPORTS_DASH,
   SUPPORTS_HLS: () => SUPPORTS_HLS,
+  StormcloudPlayer: () => StormcloudPlayer_default,
   StormcloudVideoPlayer: () => StormcloudVideoPlayer,
   StormcloudVideoPlayerComponent: () => StormcloudVideoPlayerComponent,
   canPlay: () => canPlay,
   createStormcloudPlayer: () => createStormcloudPlayer,
-  default: () => StormcloudPlayer_default,
+  default: () => StormcloudVideoPlayerComponent,
   getBrowserID: () => getBrowserID,
   getClientInfo: () => getClientInfo,
   isMediaStream: () => isMediaStream,
@@ -56,8 +57,8 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/StormcloudPlayer.tsx
-var import_react5 = __toESM(require("react"), 1);
+// src/ui/StormcloudVideoPlayer.tsx
+var import_react = __toESM(require("react"), 1);
 
 // src/player/StormcloudVideoPlayer.ts
 var import_hls = __toESM(require("hls.js"), 1);
@@ -1690,1185 +1691,301 @@ var StormcloudVideoPlayer = class {
   }
 };
 
-// src/props.ts
-var noop = () => {
-};
-var defaultProps = {
-  playing: false,
-  loop: false,
-  controls: true,
-  volume: 1,
-  muted: false,
-  playbackRate: 1,
-  width: "100%",
-  height: "auto",
-  style: {},
-  progressInterval: 1e3,
-  playsInline: false,
-  autoplay: false,
-  preload: "metadata",
-  poster: "",
-  className: "",
-  wrapperClassName: "",
-  wrapperStyle: {},
-  allowNativeHls: false,
-  lowLatencyMode: false,
-  driftToleranceMs: 1e3,
-  immediateManifestAds: true,
-  debugAdTiming: false,
-  showCustomControls: false,
-  licenseKey: "",
-  adFailsafeTimeoutMs: 1e4,
-  onStart: noop,
-  onPlay: noop,
-  onPause: noop,
-  onBuffer: noop,
-  onBufferEnd: noop,
-  onEnded: noop,
-  onError: noop,
-  onDuration: noop,
-  onSeek: noop,
-  onProgress: noop,
-  onVolumeToggle: noop,
-  onFullscreenToggle: noop,
-  onControlClick: noop
-};
-
-// src/utils.ts
-var import_react = require("react");
-var lazy = import_react.lazy;
-var omit = (object, keys) => {
-  const result = { ...object };
-  keys.forEach((key) => {
-    delete result[key];
-  });
-  return result;
-};
-var isMediaStream = (url) => {
-  return typeof window !== "undefined" && window.MediaStream && url instanceof window.MediaStream;
-};
-var supportsWebKitPresentationMode = () => {
-  if (typeof window === "undefined") return false;
-  const video = document.createElement("video");
-  return "webkitSupportsPresentationMode" in video;
-};
-var randomString = () => {
-  return Math.random().toString(36).substr(2, 9);
-};
-var parseQuery = (url) => {
-  const query = {};
-  const params = new URLSearchParams(url.split("?")[1] || "");
-  params.forEach((value, key) => {
-    query[key] = value;
-  });
-  return query;
-};
-var merge = (target, ...sources) => {
-  if (!sources.length) return target;
-  const source = sources.shift();
-  if (isObject(target) && isObject(source)) {
-    for (const key in source) {
-      if (isObject(source[key])) {
-        if (!target[key]) Object.assign(target, { [key]: {} });
-        merge(target[key], source[key]);
-      } else {
-        Object.assign(target, { [key]: source[key] });
-      }
-    }
-  }
-  return merge(target, ...sources);
-};
-var isObject = (item) => {
-  return item && typeof item === "object" && !Array.isArray(item);
-};
-var IS_BROWSER = typeof window !== "undefined" && window.document;
-var IS_GLOBAL = typeof globalThis !== "undefined" && globalThis.window && globalThis.window.document;
-var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(navigator.userAgent);
-var IS_SAFARI = IS_BROWSER && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-var SUPPORTS_HLS = () => {
-  if (!IS_BROWSER) return false;
-  const video = document.createElement("video");
-  return Boolean(video.canPlayType("application/vnd.apple.mpegurl"));
-};
-var SUPPORTS_DASH = () => {
-  if (!IS_BROWSER) return false;
-  const video = document.createElement("video");
-  return Boolean(video.canPlayType("application/dash+xml"));
-};
-
-// src/patterns.ts
-var HLS_EXTENSIONS = /\.(m3u8)($|\?)/i;
-var HLS_PATHS = /\/hls\//i;
-var DASH_EXTENSIONS = /\.(mpd)($|\?)/i;
-var VIDEO_EXTENSIONS = /\.(mp4|webm|ogg|avi|mov|wmv|flv|mkv)($|\?)/i;
-var AUDIO_EXTENSIONS = /\.(mp3|wav|ogg|aac|wma|flac|m4a)($|\?)/i;
-var canPlay = {
-  hls: (url) => {
-    if (!url || typeof url !== "string") return false;
-    return HLS_EXTENSIONS.test(url) || HLS_PATHS.test(url);
-  },
-  dash: (url) => {
-    if (!url || typeof url !== "string") return false;
-    return DASH_EXTENSIONS.test(url);
-  },
-  video: (url) => {
-    if (!url || typeof url !== "string") return false;
-    return VIDEO_EXTENSIONS.test(url);
-  },
-  audio: (url) => {
-    if (!url || typeof url !== "string") return false;
-    return AUDIO_EXTENSIONS.test(url);
-  },
-  file: (url) => {
-    if (!url || typeof url !== "string") return false;
-    return VIDEO_EXTENSIONS.test(url) || AUDIO_EXTENSIONS.test(url);
-  }
-};
-
-// src/players/HlsPlayer.tsx
-var import_react2 = require("react");
-var HlsPlayer = class extends import_react2.Component {
-  constructor() {
-    super(...arguments);
-    this.player = null;
-    this.mounted = false;
-    this.load = async () => {
-      if (!this.props.videoElement || !this.props.src) return;
-      try {
-        if (this.player) {
-          this.player.destroy();
-          this.player = null;
-        }
-        const config = {
-          src: this.props.src,
-          videoElement: this.props.videoElement
-        };
-        if (this.props.autoplay !== void 0)
-          config.autoplay = this.props.autoplay;
-        if (this.props.muted !== void 0) config.muted = this.props.muted;
-        if (this.props.lowLatencyMode !== void 0)
-          config.lowLatencyMode = this.props.lowLatencyMode;
-        if (this.props.allowNativeHls !== void 0)
-          config.allowNativeHls = this.props.allowNativeHls;
-        if (this.props.driftToleranceMs !== void 0)
-          config.driftToleranceMs = this.props.driftToleranceMs;
-        if (this.props.immediateManifestAds !== void 0)
-          config.immediateManifestAds = this.props.immediateManifestAds;
-        if (this.props.debugAdTiming !== void 0)
-          config.debugAdTiming = this.props.debugAdTiming;
-        if (this.props.showCustomControls !== void 0)
-          config.showCustomControls = this.props.showCustomControls;
-        if (this.props.onVolumeToggle !== void 0)
-          config.onVolumeToggle = this.props.onVolumeToggle;
-        if (this.props.onFullscreenToggle !== void 0)
-          config.onFullscreenToggle = this.props.onFullscreenToggle;
-        if (this.props.onControlClick !== void 0)
-          config.onControlClick = this.props.onControlClick;
-        if (this.props.licenseKey !== void 0)
-          config.licenseKey = this.props.licenseKey;
-        if (this.props.adFailsafeTimeoutMs !== void 0)
-          config.adFailsafeTimeoutMs = this.props.adFailsafeTimeoutMs;
-        this.player = new StormcloudVideoPlayer(config);
-        this.props.onMount?.(this);
-        await this.player.load();
-        if (this.mounted) {
-          this.props.onReady?.();
-        }
-      } catch (error) {
-        if (this.mounted) {
-          this.props.onError?.(error);
-        }
-      }
+// src/ui/StormcloudVideoPlayer.tsx
+var import_fa = require("react-icons/fa");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CRITICAL_PROPS = [
+  "src",
+  "allowNativeHls",
+  "licenseKey",
+  "lowLatencyMode",
+  "driftToleranceMs"
+];
+var StormcloudVideoPlayerComponent = import_react.default.memo(
+  (props) => {
+    const {
+      src,
+      autoplay,
+      muted,
+      lowLatencyMode,
+      allowNativeHls,
+      driftToleranceMs,
+      immediateManifestAds,
+      debugAdTiming,
+      showCustomControls,
+      onVolumeToggle,
+      onFullscreenToggle,
+      onControlClick,
+      onReady,
+      wrapperClassName,
+      wrapperStyle,
+      className,
+      style,
+      controls,
+      playsInline,
+      preload,
+      poster,
+      children,
+      licenseKey,
+      ...restVideoAttrs
+    } = props;
+    const videoRef = (0, import_react.useRef)(null);
+    const playerRef = (0, import_react.useRef)(null);
+    const [adStatus, setAdStatus] = import_react.default.useState({ showAds: false, currentIndex: 0, totalAds: 0 });
+    const [shouldShowNativeControls, setShouldShowNativeControls] = import_react.default.useState(true);
+    const [isMuted, setIsMuted] = import_react.default.useState(false);
+    const [isFullscreen, setIsFullscreen] = import_react.default.useState(false);
+    const [isPlaying, setIsPlaying] = import_react.default.useState(false);
+    const [currentTime, setCurrentTime] = import_react.default.useState(0);
+    const [duration, setDuration] = import_react.default.useState(0);
+    const [volume, setVolume] = import_react.default.useState(1);
+    const [playbackRate, setPlaybackRate] = import_react.default.useState(1);
+    const [showVolumeSlider, setShowVolumeSlider] = import_react.default.useState(false);
+    const [showSpeedMenu, setShowSpeedMenu] = import_react.default.useState(false);
+    const [isLoading, setIsLoading] = import_react.default.useState(true);
+    const [isBuffering, setIsBuffering] = import_react.default.useState(false);
+    const [showCenterPlay, setShowCenterPlay] = import_react.default.useState(false);
+    const formatTime = (seconds) => {
+      if (!isFinite(seconds)) return "0:00:00";
+      const hours = Math.floor(seconds / 3600);
+      const minutes = Math.floor(seconds % 3600 / 60);
+      const remainingSeconds = Math.floor(seconds % 60);
+      return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
     };
-    this.play = () => {
-      if (this.props.videoElement) {
-        this.props.videoElement.play();
-        this.props.onPlay?.();
+    const handlePlayPause = () => {
+      if (videoRef.current) {
+        if (videoRef.current.paused) {
+          videoRef.current.play();
+          setShowCenterPlay(false);
+        } else {
+          videoRef.current.pause();
+          setShowCenterPlay(true);
+        }
       }
     };
-    this.pause = () => {
-      if (this.props.videoElement) {
-        this.props.videoElement.pause();
-        this.props.onPause?.();
+    const handleCenterPlayClick = () => {
+      if (videoRef.current && videoRef.current.paused) {
+        videoRef.current.play();
+        setShowCenterPlay(false);
       }
     };
-    this.stop = () => {
-      this.pause();
-      if (this.props.videoElement) {
-        this.props.videoElement.currentTime = 0;
-      }
-    };
-    this.seekTo = (seconds, keepPlaying) => {
-      if (this.props.videoElement) {
-        this.props.videoElement.currentTime = seconds;
-        if (!keepPlaying) {
-          this.pause();
+    const handleTimelineSeek = (e) => {
+      if (videoRef.current && duration > 0 && isFinite(duration)) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const clickX = e.clientX - rect.left;
+        const progress = Math.max(0, Math.min(1, clickX / rect.width));
+        const newTime = progress * duration;
+        if (isFinite(newTime) && newTime >= 0 && newTime <= duration) {
+          videoRef.current.currentTime = newTime;
         }
       }
     };
-    this.setVolume = (volume) => {
-      if (this.props.videoElement) {
-        this.props.videoElement.volume = Math.max(0, Math.min(1, volume));
-      }
-    };
-    this.mute = () => {
-      if (this.props.videoElement) {
-        this.props.videoElement.muted = true;
-      }
-    };
-    this.unmute = () => {
-      if (this.props.videoElement) {
-        this.props.videoElement.muted = false;
-      }
-    };
-    this.setPlaybackRate = (rate) => {
-      if (this.props.videoElement && rate > 0) {
-        this.props.videoElement.playbackRate = rate;
+    const handleVolumeChange = (newVolume) => {
+      if (videoRef.current && isFinite(newVolume)) {
+        const clampedVolume = Math.max(0, Math.min(1, newVolume));
+        videoRef.current.volume = clampedVolume;
+        videoRef.current.muted = clampedVolume === 0;
       }
     };
-    this.getDuration = () => {
-      if (this.props.videoElement && isFinite(this.props.videoElement.duration)) {
-        return this.props.videoElement.duration;
+    const handlePlaybackRateChange = (rate) => {
+      if (videoRef.current && isFinite(rate) && rate > 0) {
+        videoRef.current.playbackRate = rate;
       }
-      return null;
+      setShowSpeedMenu(false);
     };
-    this.getCurrentTime = () => {
-      if (this.props.videoElement && isFinite(this.props.videoElement.currentTime)) {
-        return this.props.videoElement.currentTime;
+    const isHlsStream = src?.toLowerCase().includes(".m3u8") || src?.toLowerCase().includes("/hls/");
+    const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
+    const criticalPropsKey = (0, import_react.useMemo)(() => {
+      return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
+    }, [src, allowNativeHls, licenseKey, lowLatencyMode, driftToleranceMs]);
+    (0, import_react.useEffect)(() => {
+      if (typeof window === "undefined") return;
+      const el = videoRef.current;
+      if (!el || !src) return;
+      if (playerRef.current) {
+        try {
+          playerRef.current.destroy();
+        } catch {
+        }
+        playerRef.current = null;
       }
-      return null;
-    };
-    this.getSecondsLoaded = () => {
-      if (this.props.videoElement && this.props.videoElement.buffered.length > 0) {
-        return this.props.videoElement.buffered.end(
-          this.props.videoElement.buffered.length - 1
+      const cfg = {
+        src,
+        videoElement: el
+      };
+      if (autoplay !== void 0) cfg.autoplay = autoplay;
+      if (muted !== void 0) cfg.muted = muted;
+      if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
+      if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
+      if (driftToleranceMs !== void 0)
+        cfg.driftToleranceMs = driftToleranceMs;
+      if (immediateManifestAds !== void 0)
+        cfg.immediateManifestAds = immediateManifestAds;
+      if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
+      if (showCustomControls !== void 0)
+        cfg.showCustomControls = showCustomControls;
+      if (onVolumeToggle !== void 0) cfg.onVolumeToggle = onVolumeToggle;
+      if (onFullscreenToggle !== void 0)
+        cfg.onFullscreenToggle = onFullscreenToggle;
+      if (onControlClick !== void 0) cfg.onControlClick = onControlClick;
+      if (licenseKey !== void 0) cfg.licenseKey = licenseKey;
+      const player = new StormcloudVideoPlayer(cfg);
+      playerRef.current = player;
+      player.load().then(() => {
+        const showNative = player.shouldShowNativeControls();
+        setShouldShowNativeControls(showNative);
+        onReady?.(player);
+      }).catch((error) => {
+        console.error(
+          "StormcloudVideoPlayer: Failed to load player:",
+          error
         );
-      }
-      return null;
-    };
-    this.getInternalPlayer = (key = "player") => {
-      if (key === "player") return this.player;
-      if (key === "video") return this.props.videoElement;
-      if (key === "hls" && this.player) return this.player.hls;
-      return null;
-    };
-  }
-  componentDidMount() {
-    this.mounted = true;
-    this.load();
-  }
-  componentWillUnmount() {
-    this.mounted = false;
-    if (this.player) {
-      this.player.destroy();
-      this.player = null;
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.src !== this.props.src) {
-      this.load();
-    }
-  }
-  render() {
-    return null;
-  }
-};
-HlsPlayer.displayName = "HlsPlayer";
-HlsPlayer.canPlay = canPlay.hls;
-
-// src/players/FilePlayer.tsx
-var import_react3 = require("react");
-var FilePlayer = class extends import_react3.Component {
-  constructor() {
-    super(...arguments);
-    this.mounted = false;
-    this.ready = false;
-    this.load = () => {
-      if (!this.props.videoElement || !this.props.src) return;
-      const video = this.props.videoElement;
-      const handleLoadedMetadata = () => {
-        if (this.mounted && !this.ready) {
-          this.ready = true;
-          this.props.onReady?.();
+        onReady?.(player);
+      });
+      return () => {
+        try {
+          player.destroy();
+        } catch {
         }
+        playerRef.current = null;
       };
-      const handlePlay = () => {
-        if (this.mounted) {
-          this.props.onPlay?.();
+    }, [criticalPropsKey]);
+    (0, import_react.useEffect)(() => {
+      if (!playerRef.current) return;
+      try {
+        if (autoplay !== void 0 && playerRef.current.videoElement) {
+          playerRef.current.videoElement.autoplay = autoplay;
         }
-      };
-      const handlePause = () => {
-        if (this.mounted) {
-          this.props.onPause?.();
+        if (muted !== void 0 && playerRef.current.videoElement) {
+          playerRef.current.videoElement.muted = muted;
         }
-      };
-      const handleEnded = () => {
-        if (this.mounted) {
-          this.props.onEnded?.();
+      } catch (error) {
+        console.warn("Failed to update player properties:", error);
+      }
+    }, [autoplay, muted]);
+    (0, import_react.useEffect)(() => {
+      if (!playerRef.current) return;
+      const checkAdStatus = () => {
+        if (playerRef.current) {
+          const showAds = playerRef.current.isShowingAds();
+          const currentIndex = playerRef.current.getCurrentAdIndex();
+          const totalAds = playerRef.current.getTotalAdsInBreak();
+          setAdStatus((prev) => {
+            if (prev.showAds !== showAds || prev.currentIndex !== currentIndex || prev.totalAds !== totalAds) {
+              return { showAds, currentIndex, totalAds };
+            }
+            return prev;
+          });
         }
       };
-      const handleError = (error) => {
-        if (this.mounted) {
-          this.props.onError?.(error);
+      const interval = setInterval(checkAdStatus, 100);
+      return () => clearInterval(interval);
+    }, []);
+    (0, import_react.useEffect)(() => {
+      if (typeof window === "undefined" || !playerRef.current) return;
+      const handleResize = () => {
+        if (playerRef.current && videoRef.current) {
+          if (typeof playerRef.current.resize === "function") {
+            playerRef.current.resize();
+          }
         }
       };
-      const handleLoadedData = () => {
-        if (this.mounted) {
-          this.props.onLoaded?.();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    (0, import_react.useEffect)(() => {
+      if (!playerRef.current || !videoRef.current) return;
+      const updateStates = () => {
+        if (playerRef.current && videoRef.current) {
+          setIsMuted(playerRef.current.isMuted());
+          setIsPlaying(!videoRef.current.paused);
+          const currentTimeValue = videoRef.current.currentTime;
+          setCurrentTime(isFinite(currentTimeValue) ? currentTimeValue : 0);
+          const durationValue = videoRef.current.duration;
+          setDuration(isFinite(durationValue) ? durationValue : 0);
+          const volumeValue = videoRef.current.volume;
+          setVolume(
+            isFinite(volumeValue) ? Math.max(0, Math.min(1, volumeValue)) : 1
+          );
+          const rateValue = videoRef.current.playbackRate;
+          setPlaybackRate(
+            isFinite(rateValue) && rateValue > 0 ? rateValue : 1
+          );
         }
+        setIsFullscreen(
+          document.fullscreenElement === videoRef.current?.parentElement
+        );
       };
-      video.addEventListener("loadedmetadata", handleLoadedMetadata);
-      video.addEventListener("play", handlePlay);
-      video.addEventListener("pause", handlePause);
-      video.addEventListener("ended", handleEnded);
-      video.addEventListener("error", handleError);
-      video.addEventListener("loadeddata", handleLoadedData);
-      video.src = this.props.src;
-      if (this.props.autoplay !== void 0) video.autoplay = this.props.autoplay;
-      if (this.props.muted !== void 0) video.muted = this.props.muted;
-      if (this.props.loop !== void 0) video.loop = this.props.loop;
-      if (this.props.controls !== void 0) video.controls = this.props.controls;
-      if (this.props.playsInline !== void 0)
-        video.playsInline = this.props.playsInline;
-      if (this.props.preload !== void 0)
-        video.preload = this.props.preload;
-      if (this.props.poster !== void 0) video.poster = this.props.poster;
-      this.props.onMount?.(this);
+      const interval = setInterval(updateStates, 200);
+      const handleFullscreenChange = () => {
+        setIsFullscreen(
+          document.fullscreenElement === videoRef.current?.parentElement
+        );
+      };
+      document.addEventListener("fullscreenchange", handleFullscreenChange);
       return () => {
-        video.removeEventListener("loadedmetadata", handleLoadedMetadata);
-        video.removeEventListener("play", handlePlay);
-        video.removeEventListener("pause", handlePause);
-        video.removeEventListener("ended", handleEnded);
-        video.removeEventListener("error", handleError);
-        video.removeEventListener("loadeddata", handleLoadedData);
+        clearInterval(interval);
+        document.removeEventListener(
+          "fullscreenchange",
+          handleFullscreenChange
+        );
       };
-    };
-    this.play = () => {
-      if (this.props.videoElement) {
-        this.props.videoElement.play();
-      }
-    };
-    this.pause = () => {
-      if (this.props.videoElement) {
-        this.props.videoElement.pause();
-      }
-    };
-    this.stop = () => {
-      this.pause();
-      if (this.props.videoElement) {
-        this.props.videoElement.currentTime = 0;
-      }
-    };
-    this.seekTo = (seconds, keepPlaying) => {
-      if (this.props.videoElement) {
-        this.props.videoElement.currentTime = seconds;
-        if (!keepPlaying) {
-          this.pause();
-        }
-      }
-    };
-    this.setVolume = (volume) => {
-      if (this.props.videoElement) {
-        this.props.videoElement.volume = Math.max(0, Math.min(1, volume));
-      }
-    };
-    this.mute = () => {
-      if (this.props.videoElement) {
-        this.props.videoElement.muted = true;
-      }
-    };
-    this.unmute = () => {
-      if (this.props.videoElement) {
-        this.props.videoElement.muted = false;
-      }
-    };
-    this.setPlaybackRate = (rate) => {
-      if (this.props.videoElement && rate > 0) {
-        this.props.videoElement.playbackRate = rate;
-      }
-    };
-    this.setLoop = (loop) => {
-      if (this.props.videoElement) {
-        this.props.videoElement.loop = loop;
-      }
-    };
-    this.getDuration = () => {
-      if (this.props.videoElement && isFinite(this.props.videoElement.duration)) {
-        return this.props.videoElement.duration;
-      }
-      return null;
-    };
-    this.getCurrentTime = () => {
-      if (this.props.videoElement && isFinite(this.props.videoElement.currentTime)) {
-        return this.props.videoElement.currentTime;
-      }
-      return null;
-    };
-    this.getSecondsLoaded = () => {
-      if (this.props.videoElement && this.props.videoElement.buffered.length > 0) {
-        return this.props.videoElement.buffered.end(
-          this.props.videoElement.buffered.length - 1
-        );
-      }
-      return null;
-    };
-    this.getInternalPlayer = (key = "player") => {
-      if (key === "video") return this.props.videoElement;
-      return null;
-    };
-    this.enablePIP = async () => {
-      if (this.props.videoElement && "requestPictureInPicture" in this.props.videoElement) {
-        try {
-          await this.props.videoElement.requestPictureInPicture();
-        } catch (error) {
-          console.warn("Picture-in-Picture failed:", error);
-        }
-      }
-    };
-    this.disablePIP = async () => {
-      if (document.pictureInPictureElement) {
-        try {
-          await document.exitPictureInPicture();
-        } catch (error) {
-          console.warn("Exit Picture-in-Picture failed:", error);
-        }
-      }
-    };
-  }
-  componentDidMount() {
-    this.mounted = true;
-    this.load();
-  }
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.src !== this.props.src) {
-      this.load();
-    }
-  }
-  render() {
-    return null;
-  }
-};
-FilePlayer.displayName = "FilePlayer";
-FilePlayer.canPlay = canPlay.file;
-
-// src/players/index.ts
-var players = [
-  {
-    key: "hls",
-    name: "HLS Player",
-    canPlay: canPlay.hls,
-    lazyPlayer: lazy(() => Promise.resolve({ default: HlsPlayer }))
-  },
-  {
-    key: "file",
-    name: "File Player",
-    canPlay: canPlay.file,
-    canEnablePIP: (url) => {
-      return canPlay.file(url) && (document.pictureInPictureEnabled || typeof document.webkitSupportsPresentationMode === "function");
-    },
-    lazyPlayer: lazy(() => Promise.resolve({ default: FilePlayer }))
-  }
-];
-var players_default = players;
-
-// src/Player.tsx
-var import_react4 = __toESM(require("react"), 1);
-var SEEK_ON_PLAY_EXPIRY = 5e3;
-var Player = class extends import_react4.Component {
-  constructor() {
-    super(...arguments);
-    this.mounted = false;
-    this.isReady = false;
-    this.isPlaying = false;
-    this.isLoading = true;
-    this.loadOnReady = null;
-    this.startOnPlay = true;
-    this.seekOnPlay = null;
-    this.onDurationCalled = false;
-    this.handlePlayerMount = (player) => {
-      if (this.player) {
-        this.progress();
-        return;
-      }
-      this.player = player;
-      this.player.load(this.props.src);
-      this.progress();
-    };
-    this.getInternalPlayer = (key) => {
-      if (!this.player) return null;
-      return this.player.getInternalPlayer(key);
-    };
-    this.progress = () => {
-      if (this.props.src && this.player && this.isReady) {
-        const playedSeconds = this.getCurrentTime() || 0;
-        const loadedSeconds = this.getSecondsLoaded();
-        const duration = this.getDuration();
-        if (duration) {
-          const progress = {
-            playedSeconds,
-            played: playedSeconds / duration,
-            loaded: 0,
-            loadedSeconds: 0
-          };
-          if (loadedSeconds !== null) {
-            progress.loadedSeconds = loadedSeconds;
-            progress.loaded = loadedSeconds / duration;
-          }
-          if (progress.playedSeconds !== this.prevPlayed || progress.loadedSeconds !== this.prevLoaded) {
-            this.props.onProgress?.(progress);
-          }
-          this.prevPlayed = progress.playedSeconds;
-          this.prevLoaded = progress.loadedSeconds;
+    }, []);
+    (0, import_react.useEffect)(() => {
+      if (!videoRef.current) return;
+      const handleLoadedMetadata = () => {
+        if (videoRef.current) {
+          const video2 = videoRef.current;
+          void video2.offsetHeight;
         }
-      }
-      this.progressTimeout = window.setTimeout(
-        this.progress,
-        this.props.progressInterval || 1e3
-      );
-    };
-    this.handleReady = () => {
-      if (!this.mounted) return;
-      this.isReady = true;
-      this.isLoading = false;
-      const { onReady, playing, volume, muted } = this.props;
-      onReady();
-      if (!muted && volume !== null) {
-        this.player.setVolume(volume);
-      }
-      if (this.loadOnReady) {
-        this.player.load(this.loadOnReady, true);
-        this.loadOnReady = null;
-      } else if (playing) {
-        this.player.play();
-      }
-      this.handleDurationCheck();
-    };
-    this.handlePlay = () => {
-      this.isPlaying = true;
-      this.isLoading = false;
-      const { onStart, onPlay, playbackRate } = this.props;
-      if (this.startOnPlay) {
-        if (this.player.setPlaybackRate && playbackRate !== 1) {
-          this.player.setPlaybackRate(playbackRate);
+      };
+      const handleLoadStart = () => {
+        setIsLoading(true);
+        setIsBuffering(false);
+      };
+      const handleCanPlay = () => {
+        setIsLoading(false);
+        setIsBuffering(false);
+      };
+      const handleWaiting = () => {
+        setIsBuffering(true);
+      };
+      const handlePlaying = () => {
+        setIsLoading(false);
+        setIsBuffering(false);
+        setShowCenterPlay(false);
+      };
+      const handlePause = () => {
+        if (playerRef.current && !playerRef.current.isShowingAds()) {
+          setShowCenterPlay(true);
+        } else {
+          setShowCenterPlay(false);
         }
-        onStart?.();
-        this.startOnPlay = false;
+      };
+      const handleEnded = () => {
+        setShowCenterPlay(true);
+      };
+      const video = videoRef.current;
+      video.addEventListener("loadstart", handleLoadStart);
+      video.addEventListener("loadedmetadata", handleLoadedMetadata);
+      video.addEventListener("loadeddata", handleLoadedMetadata);
+      video.addEventListener("canplay", handleCanPlay);
+      video.addEventListener("waiting", handleWaiting);
+      video.addEventListener("playing", handlePlaying);
+      video.addEventListener("pause", handlePause);
+      video.addEventListener("ended", handleEnded);
+      if (video.paused) {
+        setShowCenterPlay(true);
       }
-      onPlay?.();
-      if (this.seekOnPlay) {
-        this.seekTo(this.seekOnPlay);
-        this.seekOnPlay = null;
-      }
-      this.handleDurationCheck();
-    };
-    this.handlePause = (e) => {
-      this.isPlaying = false;
-      if (!this.isLoading) {
-        this.props.onPause?.(e);
-      }
-    };
-    this.handleEnded = () => {
-      const { activePlayer, loop, onEnded } = this.props;
-      if (activePlayer.loopOnEnded && loop) {
-        this.seekTo(0);
-      }
-      if (!loop) {
-        this.isPlaying = false;
-        onEnded?.();
-      }
-    };
-    this.handleError = (...args) => {
-      this.isLoading = false;
-      this.props.onError?.(args[0], args[1], args[2], args[3]);
-    };
-    this.handleDurationCheck = () => {
-      clearTimeout(this.durationCheckTimeout);
-      const duration = this.getDuration();
-      if (duration) {
-        if (!this.onDurationCalled) {
-          this.props.onDuration?.(duration);
-          this.onDurationCalled = true;
-        }
-      } else {
-        this.durationCheckTimeout = window.setTimeout(
-          this.handleDurationCheck,
-          100
-        );
-      }
-    };
-    this.handleLoaded = () => {
-      this.isLoading = false;
-    };
-  }
-  componentDidMount() {
-    this.mounted = true;
-  }
-  componentWillUnmount() {
-    clearTimeout(this.progressTimeout);
-    clearTimeout(this.durationCheckTimeout);
-    this.mounted = false;
-  }
-  componentDidUpdate(prevProps) {
-    if (!this.player) return;
-    const { src, playing, volume, muted, playbackRate, loop, activePlayer } = this.props;
-    if (prevProps.src !== src) {
-      if (this.isLoading && !activePlayer.forceLoad && !isMediaStream(src)) {
-        console.warn(
-          `StormcloudPlayer: the attempt to load ${src} is being deferred until the player has loaded`
-        );
-        this.loadOnReady = src || null;
-        return;
-      }
-      this.isLoading = true;
-      this.startOnPlay = true;
-      this.onDurationCalled = false;
-      this.player.load(src, this.isReady);
-    }
-    if (!prevProps.playing && playing && !this.isPlaying) {
-      this.player.play();
-    }
-    if (prevProps.playing && !playing && this.isPlaying) {
-      this.player.pause();
-    }
-    if (prevProps.volume !== volume && volume !== null) {
-      this.player.setVolume(volume);
-    }
-    if (prevProps.muted !== muted) {
-      if (muted) {
-        this.player.mute();
-      } else {
-        this.player.unmute();
-        if (volume !== null) {
-          setTimeout(() => this.player.setVolume(volume));
-        }
-      }
-    }
-    if (prevProps.playbackRate !== playbackRate && this.player.setPlaybackRate) {
-      this.player.setPlaybackRate(playbackRate);
-    }
-    if (prevProps.loop !== loop && this.player.setLoop) {
-      this.player.setLoop(loop);
-    }
-  }
-  getDuration() {
-    if (!this.isReady) return null;
-    return this.player.getDuration();
-  }
-  getCurrentTime() {
-    if (!this.isReady) return null;
-    return this.player.getCurrentTime();
-  }
-  getSecondsLoaded() {
-    if (!this.isReady) return null;
-    return this.player.getSecondsLoaded();
-  }
-  seekTo(amount, type, keepPlaying) {
-    if (!this.isReady) {
-      if (amount !== 0) {
-        this.seekOnPlay = amount;
-        setTimeout(() => {
-          this.seekOnPlay = null;
-        }, SEEK_ON_PLAY_EXPIRY);
-      }
-      return;
-    }
-    const isFraction = !type ? amount > 0 && amount < 1 : type === "fraction";
-    if (isFraction) {
-      const duration = this.player.getDuration();
-      if (!duration) {
-        console.warn(
-          "StormcloudPlayer: could not seek using fraction \u2013 duration not yet available"
-        );
-        return;
-      }
-      this.player.seekTo(duration * amount, keepPlaying);
-      return;
-    }
-    this.player.seekTo(amount, keepPlaying);
-  }
-  render() {
-    const Player2 = this.props.activePlayer;
-    if (!Player2) {
-      return null;
-    }
-    return import_react4.default.createElement(Player2, {
-      ...this.props,
-      onMount: this.handlePlayerMount,
-      onReady: this.handleReady,
-      onPlay: this.handlePlay,
-      onPause: this.handlePause,
-      onEnded: this.handleEnded,
-      onLoaded: this.handleLoaded,
-      onError: this.handleError
-    });
-  }
-};
-Player.displayName = "Player";
-Player.defaultProps = defaultProps;
-
-// src/StormcloudPlayer.tsx
-var IS_BROWSER2 = typeof window !== "undefined" && window.document;
-var IS_GLOBAL2 = typeof globalThis !== "undefined" && globalThis.window && globalThis.window.document;
-var UniversalSuspense = IS_BROWSER2 || IS_GLOBAL2 ? import_react5.Suspense : () => null;
-var SUPPORTED_PROPS = [
-  "src",
-  "playing",
-  "loop",
-  "controls",
-  "volume",
-  "muted",
-  "playbackRate",
-  "width",
-  "height",
-  "style",
-  "progressInterval",
-  "playsInline",
-  "autoplay",
-  "preload",
-  "poster",
-  "className",
-  "wrapperClassName",
-  "wrapperStyle",
-  "allowNativeHls",
-  "lowLatencyMode",
-  "driftToleranceMs",
-  "immediateManifestAds",
-  "debugAdTiming",
-  "showCustomControls",
-  "licenseKey",
-  "adFailsafeTimeoutMs",
-  "onReady",
-  "onStart",
-  "onPlay",
-  "onPause",
-  "onBuffer",
-  "onBufferEnd",
-  "onEnded",
-  "onError",
-  "onDuration",
-  "onSeek",
-  "onProgress",
-  "onVolumeToggle",
-  "onFullscreenToggle",
-  "onControlClick"
-];
-var customPlayers = [];
-var createStormcloudPlayer = (playerList, fallback) => {
-  var _a;
-  return _a = class extends import_react5.Component {
-    constructor() {
-      super(...arguments);
-      this.state = {
-        showPreview: false
-      };
-      this.references = {
-        wrapper: (wrapper) => {
-          this.wrapper = wrapper;
-        },
-        player: (player) => {
-          this.player = player;
-        }
-      };
-      this.getActivePlayer = (src) => {
-        if (!src) return null;
-        for (const player of [...customPlayers, ...playerList]) {
-          if (player.canPlay(src)) {
-            return player;
-          }
-        }
-        if (fallback) {
-          return fallback;
-        }
-        return null;
-      };
-      this.getAttributes = (src) => {
-        return omit(this.props, SUPPORTED_PROPS);
-      };
-      this.handleReady = () => {
-        this.props.onReady?.(this);
-      };
-      this.seekTo = (fraction, type, keepPlaying) => {
-        if (!this.player) return null;
-        this.player.seekTo(fraction, type, keepPlaying);
-      };
-      this.getCurrentTime = () => {
-        if (!this.player) return null;
-        return this.player.getCurrentTime();
-      };
-      this.getSecondsLoaded = () => {
-        if (!this.player) return null;
-        return this.player.getSecondsLoaded();
-      };
-      this.getDuration = () => {
-        if (!this.player) return null;
-        return this.player.getDuration();
-      };
-      this.getInternalPlayer = (key = "player") => {
-        if (!this.player) return null;
-        return this.player.getInternalPlayer(key);
-      };
-      this.renderActivePlayer = (src) => {
-        if (!src) return null;
-        const activePlayer = this.getActivePlayer(src);
-        if (!activePlayer) return null;
-        return import_react5.default.createElement(Player, {
-          ...this.props,
-          key: activePlayer.key,
-          ref: this.references.player,
-          activePlayer: activePlayer.lazyPlayer || activePlayer,
-          onReady: this.handleReady
-        });
-      };
-    }
-    render() {
-      const {
-        src,
-        style,
-        width,
-        height,
-        fallback: fallbackElement,
-        wrapper: Wrapper
-      } = this.props;
-      const attributes = this.getAttributes(src);
-      const wrapperRef = typeof Wrapper === "string" ? this.references.wrapper : void 0;
-      return import_react5.default.createElement(
-        Wrapper,
-        {
-          ref: wrapperRef,
-          style: { ...style, width, height },
-          ...attributes
-        },
-        import_react5.default.createElement(
-          UniversalSuspense,
-          { fallback: fallbackElement },
-          this.renderActivePlayer(src)
-        )
-      );
-    }
-  }, _a.displayName = "StormcloudPlayer", _a.defaultProps = {
-    ...defaultProps,
-    fallback: null,
-    wrapper: "div"
-  }, _a.addCustomPlayer = (player) => {
-    customPlayers.push(player);
-  }, _a.removeCustomPlayers = () => {
-    customPlayers.length = 0;
-  }, _a.canPlay = (src) => {
-    for (const Player2 of [...customPlayers, ...playerList]) {
-      if (Player2.canPlay(src)) {
-        return true;
-      }
-    }
-    return false;
-  }, _a.canEnablePIP = (src) => {
-    for (const Player2 of [...customPlayers, ...playerList]) {
-      if (Player2.canEnablePIP && Player2.canEnablePIP(src)) {
-        return true;
-      }
-    }
-    return false;
-  }, _a;
-};
-var StormcloudPlayer = createStormcloudPlayer(
-  players_default,
-  players_default[players_default.length - 1]
-);
-var StormcloudPlayer_default = StormcloudPlayer;
-
-// src/ui/StormcloudVideoPlayer.tsx
-var import_react6 = __toESM(require("react"), 1);
-var import_fa = require("react-icons/fa");
-var import_jsx_runtime = require("react/jsx-runtime");
-var CRITICAL_PROPS = [
-  "src",
-  "allowNativeHls",
-  "licenseKey",
-  "lowLatencyMode",
-  "driftToleranceMs"
-];
-var StormcloudVideoPlayerComponent = import_react6.default.memo(
-  (props) => {
-    const {
-      src,
-      autoplay,
-      muted,
-      lowLatencyMode,
-      allowNativeHls,
-      driftToleranceMs,
-      immediateManifestAds,
-      debugAdTiming,
-      showCustomControls,
-      onVolumeToggle,
-      onFullscreenToggle,
-      onControlClick,
-      onReady,
-      wrapperClassName,
-      wrapperStyle,
-      className,
-      style,
-      controls,
-      playsInline,
-      preload,
-      poster,
-      children,
-      licenseKey,
-      ...restVideoAttrs
-    } = props;
-    const videoRef = (0, import_react6.useRef)(null);
-    const playerRef = (0, import_react6.useRef)(null);
-    const [adStatus, setAdStatus] = import_react6.default.useState({ showAds: false, currentIndex: 0, totalAds: 0 });
-    const [shouldShowNativeControls, setShouldShowNativeControls] = import_react6.default.useState(true);
-    const [isMuted, setIsMuted] = import_react6.default.useState(false);
-    const [isFullscreen, setIsFullscreen] = import_react6.default.useState(false);
-    const [isPlaying, setIsPlaying] = import_react6.default.useState(false);
-    const [currentTime, setCurrentTime] = import_react6.default.useState(0);
-    const [duration, setDuration] = import_react6.default.useState(0);
-    const [volume, setVolume] = import_react6.default.useState(1);
-    const [playbackRate, setPlaybackRate] = import_react6.default.useState(1);
-    const [showVolumeSlider, setShowVolumeSlider] = import_react6.default.useState(false);
-    const [showSpeedMenu, setShowSpeedMenu] = import_react6.default.useState(false);
-    const [isLoading, setIsLoading] = import_react6.default.useState(true);
-    const [isBuffering, setIsBuffering] = import_react6.default.useState(false);
-    const [showCenterPlay, setShowCenterPlay] = import_react6.default.useState(false);
-    const formatTime = (seconds) => {
-      if (!isFinite(seconds)) return "0:00:00";
-      const hours = Math.floor(seconds / 3600);
-      const minutes = Math.floor(seconds % 3600 / 60);
-      const remainingSeconds = Math.floor(seconds % 60);
-      return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
-    };
-    const handlePlayPause = () => {
-      if (videoRef.current) {
-        if (videoRef.current.paused) {
-          videoRef.current.play();
-          setShowCenterPlay(false);
-        } else {
-          videoRef.current.pause();
-          setShowCenterPlay(true);
-        }
-      }
-    };
-    const handleCenterPlayClick = () => {
-      if (videoRef.current && videoRef.current.paused) {
-        videoRef.current.play();
-        setShowCenterPlay(false);
-      }
-    };
-    const handleTimelineSeek = (e) => {
-      if (videoRef.current && duration > 0 && isFinite(duration)) {
-        const rect = e.currentTarget.getBoundingClientRect();
-        const clickX = e.clientX - rect.left;
-        const progress = Math.max(0, Math.min(1, clickX / rect.width));
-        const newTime = progress * duration;
-        if (isFinite(newTime) && newTime >= 0 && newTime <= duration) {
-          videoRef.current.currentTime = newTime;
-        }
-      }
-    };
-    const handleVolumeChange = (newVolume) => {
-      if (videoRef.current && isFinite(newVolume)) {
-        const clampedVolume = Math.max(0, Math.min(1, newVolume));
-        videoRef.current.volume = clampedVolume;
-        videoRef.current.muted = clampedVolume === 0;
-      }
-    };
-    const handlePlaybackRateChange = (rate) => {
-      if (videoRef.current && isFinite(rate) && rate > 0) {
-        videoRef.current.playbackRate = rate;
-      }
-      setShowSpeedMenu(false);
-    };
-    const isHlsStream = src?.toLowerCase().includes(".m3u8") || src?.toLowerCase().includes("/hls/");
-    const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
-    const criticalPropsKey = (0, import_react6.useMemo)(() => {
-      return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
-    }, [src, allowNativeHls, licenseKey, lowLatencyMode, driftToleranceMs]);
-    (0, import_react6.useEffect)(() => {
-      if (typeof window === "undefined") return;
-      const el = videoRef.current;
-      if (!el || !src) return;
-      if (playerRef.current) {
-        try {
-          playerRef.current.destroy();
-        } catch {
-        }
-        playerRef.current = null;
-      }
-      const cfg = {
-        src,
-        videoElement: el
-      };
-      if (autoplay !== void 0) cfg.autoplay = autoplay;
-      if (muted !== void 0) cfg.muted = muted;
-      if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
-      if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
-      if (driftToleranceMs !== void 0)
-        cfg.driftToleranceMs = driftToleranceMs;
-      if (immediateManifestAds !== void 0)
-        cfg.immediateManifestAds = immediateManifestAds;
-      if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
-      if (showCustomControls !== void 0)
-        cfg.showCustomControls = showCustomControls;
-      if (onVolumeToggle !== void 0) cfg.onVolumeToggle = onVolumeToggle;
-      if (onFullscreenToggle !== void 0)
-        cfg.onFullscreenToggle = onFullscreenToggle;
-      if (onControlClick !== void 0) cfg.onControlClick = onControlClick;
-      if (licenseKey !== void 0) cfg.licenseKey = licenseKey;
-      const player = new StormcloudVideoPlayer(cfg);
-      playerRef.current = player;
-      player.load().then(() => {
-        const showNative = player.shouldShowNativeControls();
-        setShouldShowNativeControls(showNative);
-        onReady?.(player);
-      }).catch(() => {
-      });
-      return () => {
-        try {
-          player.destroy();
-        } catch {
-        }
-        playerRef.current = null;
-      };
-    }, [criticalPropsKey]);
-    (0, import_react6.useEffect)(() => {
-      if (!playerRef.current) return;
-      try {
-        if (autoplay !== void 0 && playerRef.current.videoElement) {
-          playerRef.current.videoElement.autoplay = autoplay;
-        }
-        if (muted !== void 0 && playerRef.current.videoElement) {
-          playerRef.current.videoElement.muted = muted;
-        }
-      } catch (error) {
-        console.warn("Failed to update player properties:", error);
-      }
-    }, [autoplay, muted]);
-    (0, import_react6.useEffect)(() => {
-      if (!playerRef.current) return;
-      const checkAdStatus = () => {
-        if (playerRef.current) {
-          const showAds = playerRef.current.isShowingAds();
-          const currentIndex = playerRef.current.getCurrentAdIndex();
-          const totalAds = playerRef.current.getTotalAdsInBreak();
-          setAdStatus((prev) => {
-            if (prev.showAds !== showAds || prev.currentIndex !== currentIndex || prev.totalAds !== totalAds) {
-              return { showAds, currentIndex, totalAds };
-            }
-            return prev;
-          });
-        }
-      };
-      const interval = setInterval(checkAdStatus, 100);
-      return () => clearInterval(interval);
-    }, []);
-    (0, import_react6.useEffect)(() => {
-      if (typeof window === "undefined" || !playerRef.current) return;
-      const handleResize = () => {
-        if (playerRef.current && videoRef.current) {
-          if (typeof playerRef.current.resize === "function") {
-            playerRef.current.resize();
-          }
-        }
-      };
-      window.addEventListener("resize", handleResize);
-      return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    (0, import_react6.useEffect)(() => {
-      if (!playerRef.current || !videoRef.current) return;
-      const updateStates = () => {
-        if (playerRef.current && videoRef.current) {
-          setIsMuted(playerRef.current.isMuted());
-          setIsPlaying(!videoRef.current.paused);
-          const currentTimeValue = videoRef.current.currentTime;
-          setCurrentTime(isFinite(currentTimeValue) ? currentTimeValue : 0);
-          const durationValue = videoRef.current.duration;
-          setDuration(isFinite(durationValue) ? durationValue : 0);
-          const volumeValue = videoRef.current.volume;
-          setVolume(
-            isFinite(volumeValue) ? Math.max(0, Math.min(1, volumeValue)) : 1
-          );
-          const rateValue = videoRef.current.playbackRate;
-          setPlaybackRate(
-            isFinite(rateValue) && rateValue > 0 ? rateValue : 1
-          );
-        }
-        setIsFullscreen(
-          document.fullscreenElement === videoRef.current?.parentElement
-        );
-      };
-      const interval = setInterval(updateStates, 200);
-      const handleFullscreenChange = () => {
-        setIsFullscreen(
-          document.fullscreenElement === videoRef.current?.parentElement
-        );
-      };
-      document.addEventListener("fullscreenchange", handleFullscreenChange);
-      return () => {
-        clearInterval(interval);
-        document.removeEventListener(
-          "fullscreenchange",
-          handleFullscreenChange
-        );
-      };
-    }, []);
-    (0, import_react6.useEffect)(() => {
-      if (!videoRef.current) return;
-      const handleLoadedMetadata = () => {
-        if (videoRef.current) {
-          const video2 = videoRef.current;
-          void video2.offsetHeight;
-        }
-      };
-      const handleLoadStart = () => {
-        setIsLoading(true);
-        setIsBuffering(false);
-      };
-      const handleCanPlay = () => {
-        setIsLoading(false);
-        setIsBuffering(false);
-      };
-      const handleWaiting = () => {
-        setIsBuffering(true);
-      };
-      const handlePlaying = () => {
-        setIsLoading(false);
-        setIsBuffering(false);
-        setShowCenterPlay(false);
-      };
-      const handlePause = () => {
-        if (playerRef.current && !playerRef.current.isShowingAds()) {
-          setShowCenterPlay(true);
-        } else {
-          setShowCenterPlay(false);
-        }
-      };
-      const handleEnded = () => {
-        setShowCenterPlay(true);
-      };
-      const video = videoRef.current;
-      video.addEventListener("loadstart", handleLoadStart);
-      video.addEventListener("loadedmetadata", handleLoadedMetadata);
-      video.addEventListener("loadeddata", handleLoadedMetadata);
-      video.addEventListener("canplay", handleCanPlay);
-      video.addEventListener("waiting", handleWaiting);
-      video.addEventListener("playing", handlePlaying);
-      video.addEventListener("pause", handlePause);
-      video.addEventListener("ended", handleEnded);
-      if (video.paused) {
-        setShowCenterPlay(true);
-      }
-      return () => {
-        video.removeEventListener("loadstart", handleLoadStart);
-        video.removeEventListener("loadedmetadata", handleLoadedMetadata);
-        video.removeEventListener("loadeddata", handleLoadedMetadata);
-        video.removeEventListener("canplay", handleCanPlay);
-        video.removeEventListener("waiting", handleWaiting);
-        video.removeEventListener("playing", handlePlaying);
-        video.removeEventListener("pause", handlePause);
-        video.removeEventListener("ended", handleEnded);
+      return () => {
+        video.removeEventListener("loadstart", handleLoadStart);
+        video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        video.removeEventListener("loadeddata", handleLoadedMetadata);
+        video.removeEventListener("canplay", handleCanPlay);
+        video.removeEventListener("waiting", handleWaiting);
+        video.removeEventListener("playing", handlePlaying);
+        video.removeEventListener("pause", handlePause);
+        video.removeEventListener("ended", handleEnded);
       };
     }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -3769,48 +2886,939 @@ var StormcloudVideoPlayerComponent = import_react6.default.memo(
             )
           ]
         }
-      )
-    ] });
-  },
-  (prevProps, nextProps) => {
-    for (const prop of CRITICAL_PROPS) {
-      if (prevProps[prop] !== nextProps[prop]) {
-        return false;
+      )
+    ] });
+  },
+  (prevProps, nextProps) => {
+    for (const prop of CRITICAL_PROPS) {
+      if (prevProps[prop] !== nextProps[prop]) {
+        return false;
+      }
+    }
+    const uiProps = [
+      "autoplay",
+      "muted",
+      "controls",
+      "showCustomControls",
+      "className",
+      "style",
+      "wrapperClassName",
+      "wrapperStyle",
+      "playsInline",
+      "preload",
+      "poster",
+      "children"
+    ];
+    for (const prop of uiProps) {
+      if (prevProps[prop] !== nextProps[prop]) {
+        return false;
+      }
+    }
+    const callbackProps = [
+      "onReady",
+      "onVolumeToggle",
+      "onFullscreenToggle",
+      "onControlClick"
+    ];
+    for (const prop of callbackProps) {
+      if (prevProps[prop] !== nextProps[prop]) {
+        return false;
+      }
+    }
+    return true;
+  }
+);
+
+// src/StormcloudPlayer.tsx
+var import_react6 = __toESM(require("react"), 1);
+
+// src/props.ts
+var noop = () => {
+};
+var defaultProps = {
+  playing: false,
+  loop: false,
+  controls: true,
+  volume: 1,
+  muted: false,
+  playbackRate: 1,
+  width: "100%",
+  height: "auto",
+  style: {},
+  progressInterval: 1e3,
+  playsInline: false,
+  autoplay: false,
+  preload: "metadata",
+  poster: "",
+  className: "",
+  wrapperClassName: "",
+  wrapperStyle: {},
+  allowNativeHls: false,
+  lowLatencyMode: false,
+  driftToleranceMs: 1e3,
+  immediateManifestAds: true,
+  debugAdTiming: false,
+  showCustomControls: false,
+  licenseKey: "",
+  adFailsafeTimeoutMs: 1e4,
+  onStart: noop,
+  onPlay: noop,
+  onPause: noop,
+  onBuffer: noop,
+  onBufferEnd: noop,
+  onEnded: noop,
+  onError: noop,
+  onDuration: noop,
+  onSeek: noop,
+  onProgress: noop,
+  onVolumeToggle: noop,
+  onFullscreenToggle: noop,
+  onControlClick: noop
+};
+
+// src/utils.ts
+var import_react2 = require("react");
+var lazy = import_react2.lazy;
+var omit = (object, keys) => {
+  const result = { ...object };
+  keys.forEach((key) => {
+    delete result[key];
+  });
+  return result;
+};
+var isMediaStream = (url) => {
+  return typeof window !== "undefined" && window.MediaStream && url instanceof window.MediaStream;
+};
+var supportsWebKitPresentationMode = () => {
+  if (typeof window === "undefined") return false;
+  const video = document.createElement("video");
+  return "webkitSupportsPresentationMode" in video;
+};
+var randomString = () => {
+  return Math.random().toString(36).substr(2, 9);
+};
+var parseQuery = (url) => {
+  const query = {};
+  const params = new URLSearchParams(url.split("?")[1] || "");
+  params.forEach((value, key) => {
+    query[key] = value;
+  });
+  return query;
+};
+var merge = (target, ...sources) => {
+  if (!sources.length) return target;
+  const source = sources.shift();
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        merge(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+  return merge(target, ...sources);
+};
+var isObject = (item) => {
+  return item && typeof item === "object" && !Array.isArray(item);
+};
+var IS_BROWSER = typeof window !== "undefined" && window.document;
+var IS_GLOBAL = typeof globalThis !== "undefined" && globalThis.window && globalThis.window.document;
+var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(navigator.userAgent);
+var IS_SAFARI = IS_BROWSER && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+var SUPPORTS_HLS = () => {
+  if (!IS_BROWSER) return false;
+  const video = document.createElement("video");
+  return Boolean(video.canPlayType("application/vnd.apple.mpegurl"));
+};
+var SUPPORTS_DASH = () => {
+  if (!IS_BROWSER) return false;
+  const video = document.createElement("video");
+  return Boolean(video.canPlayType("application/dash+xml"));
+};
+
+// src/patterns.ts
+var HLS_EXTENSIONS = /\.(m3u8)($|\?)/i;
+var HLS_PATHS = /\/hls\//i;
+var DASH_EXTENSIONS = /\.(mpd)($|\?)/i;
+var VIDEO_EXTENSIONS = /\.(mp4|webm|ogg|avi|mov|wmv|flv|mkv)($|\?)/i;
+var AUDIO_EXTENSIONS = /\.(mp3|wav|ogg|aac|wma|flac|m4a)($|\?)/i;
+var canPlay = {
+  hls: (url) => {
+    if (!url || typeof url !== "string") return false;
+    return HLS_EXTENSIONS.test(url) || HLS_PATHS.test(url);
+  },
+  dash: (url) => {
+    if (!url || typeof url !== "string") return false;
+    return DASH_EXTENSIONS.test(url);
+  },
+  video: (url) => {
+    if (!url || typeof url !== "string") return false;
+    return VIDEO_EXTENSIONS.test(url);
+  },
+  audio: (url) => {
+    if (!url || typeof url !== "string") return false;
+    return AUDIO_EXTENSIONS.test(url);
+  },
+  file: (url) => {
+    if (!url || typeof url !== "string") return false;
+    return VIDEO_EXTENSIONS.test(url) || AUDIO_EXTENSIONS.test(url);
+  }
+};
+
+// src/players/HlsPlayer.tsx
+var import_react3 = require("react");
+var HlsPlayer = class extends import_react3.Component {
+  constructor() {
+    super(...arguments);
+    this.player = null;
+    this.mounted = false;
+    this.load = async () => {
+      if (!this.props.videoElement || !this.props.src) return;
+      try {
+        if (this.player) {
+          this.player.destroy();
+          this.player = null;
+        }
+        const config = {
+          src: this.props.src,
+          videoElement: this.props.videoElement
+        };
+        if (this.props.autoplay !== void 0)
+          config.autoplay = this.props.autoplay;
+        if (this.props.muted !== void 0) config.muted = this.props.muted;
+        if (this.props.lowLatencyMode !== void 0)
+          config.lowLatencyMode = this.props.lowLatencyMode;
+        if (this.props.allowNativeHls !== void 0)
+          config.allowNativeHls = this.props.allowNativeHls;
+        if (this.props.driftToleranceMs !== void 0)
+          config.driftToleranceMs = this.props.driftToleranceMs;
+        if (this.props.immediateManifestAds !== void 0)
+          config.immediateManifestAds = this.props.immediateManifestAds;
+        if (this.props.debugAdTiming !== void 0)
+          config.debugAdTiming = this.props.debugAdTiming;
+        if (this.props.showCustomControls !== void 0)
+          config.showCustomControls = this.props.showCustomControls;
+        if (this.props.onVolumeToggle !== void 0)
+          config.onVolumeToggle = this.props.onVolumeToggle;
+        if (this.props.onFullscreenToggle !== void 0)
+          config.onFullscreenToggle = this.props.onFullscreenToggle;
+        if (this.props.onControlClick !== void 0)
+          config.onControlClick = this.props.onControlClick;
+        if (this.props.licenseKey !== void 0)
+          config.licenseKey = this.props.licenseKey;
+        if (this.props.adFailsafeTimeoutMs !== void 0)
+          config.adFailsafeTimeoutMs = this.props.adFailsafeTimeoutMs;
+        this.player = new StormcloudVideoPlayer(config);
+        this.props.onMount?.(this);
+        await this.player.load();
+        if (this.mounted) {
+          this.props.onReady?.();
+        }
+      } catch (error) {
+        if (this.mounted) {
+          this.props.onError?.(error);
+        }
+      }
+    };
+    this.play = () => {
+      if (this.props.videoElement) {
+        this.props.videoElement.play();
+        this.props.onPlay?.();
+      }
+    };
+    this.pause = () => {
+      if (this.props.videoElement) {
+        this.props.videoElement.pause();
+        this.props.onPause?.();
+      }
+    };
+    this.stop = () => {
+      this.pause();
+      if (this.props.videoElement) {
+        this.props.videoElement.currentTime = 0;
+      }
+    };
+    this.seekTo = (seconds, keepPlaying) => {
+      if (this.props.videoElement) {
+        this.props.videoElement.currentTime = seconds;
+        if (!keepPlaying) {
+          this.pause();
+        }
+      }
+    };
+    this.setVolume = (volume) => {
+      if (this.props.videoElement) {
+        this.props.videoElement.volume = Math.max(0, Math.min(1, volume));
+      }
+    };
+    this.mute = () => {
+      if (this.props.videoElement) {
+        this.props.videoElement.muted = true;
+      }
+    };
+    this.unmute = () => {
+      if (this.props.videoElement) {
+        this.props.videoElement.muted = false;
+      }
+    };
+    this.setPlaybackRate = (rate) => {
+      if (this.props.videoElement && rate > 0) {
+        this.props.videoElement.playbackRate = rate;
+      }
+    };
+    this.getDuration = () => {
+      if (this.props.videoElement && isFinite(this.props.videoElement.duration)) {
+        return this.props.videoElement.duration;
+      }
+      return null;
+    };
+    this.getCurrentTime = () => {
+      if (this.props.videoElement && isFinite(this.props.videoElement.currentTime)) {
+        return this.props.videoElement.currentTime;
+      }
+      return null;
+    };
+    this.getSecondsLoaded = () => {
+      if (this.props.videoElement && this.props.videoElement.buffered.length > 0) {
+        return this.props.videoElement.buffered.end(
+          this.props.videoElement.buffered.length - 1
+        );
+      }
+      return null;
+    };
+    this.getInternalPlayer = (key = "player") => {
+      if (key === "player") return this.player;
+      if (key === "video") return this.props.videoElement;
+      if (key === "hls" && this.player) return this.player.hls;
+      return null;
+    };
+  }
+  componentDidMount() {
+    this.mounted = true;
+    this.load();
+  }
+  componentWillUnmount() {
+    this.mounted = false;
+    if (this.player) {
+      this.player.destroy();
+      this.player = null;
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.src !== this.props.src) {
+      this.load();
+    }
+  }
+  render() {
+    return null;
+  }
+};
+HlsPlayer.displayName = "HlsPlayer";
+HlsPlayer.canPlay = canPlay.hls;
+
+// src/players/FilePlayer.tsx
+var import_react4 = require("react");
+var FilePlayer = class extends import_react4.Component {
+  constructor() {
+    super(...arguments);
+    this.mounted = false;
+    this.ready = false;
+    this.load = () => {
+      if (!this.props.videoElement || !this.props.src) return;
+      const video = this.props.videoElement;
+      const handleLoadedMetadata = () => {
+        if (this.mounted && !this.ready) {
+          this.ready = true;
+          this.props.onReady?.();
+        }
+      };
+      const handlePlay = () => {
+        if (this.mounted) {
+          this.props.onPlay?.();
+        }
+      };
+      const handlePause = () => {
+        if (this.mounted) {
+          this.props.onPause?.();
+        }
+      };
+      const handleEnded = () => {
+        if (this.mounted) {
+          this.props.onEnded?.();
+        }
+      };
+      const handleError = (error) => {
+        if (this.mounted) {
+          this.props.onError?.(error);
+        }
+      };
+      const handleLoadedData = () => {
+        if (this.mounted) {
+          this.props.onLoaded?.();
+        }
+      };
+      video.addEventListener("loadedmetadata", handleLoadedMetadata);
+      video.addEventListener("play", handlePlay);
+      video.addEventListener("pause", handlePause);
+      video.addEventListener("ended", handleEnded);
+      video.addEventListener("error", handleError);
+      video.addEventListener("loadeddata", handleLoadedData);
+      video.src = this.props.src;
+      if (this.props.autoplay !== void 0) video.autoplay = this.props.autoplay;
+      if (this.props.muted !== void 0) video.muted = this.props.muted;
+      if (this.props.loop !== void 0) video.loop = this.props.loop;
+      if (this.props.controls !== void 0) video.controls = this.props.controls;
+      if (this.props.playsInline !== void 0)
+        video.playsInline = this.props.playsInline;
+      if (this.props.preload !== void 0)
+        video.preload = this.props.preload;
+      if (this.props.poster !== void 0) video.poster = this.props.poster;
+      this.props.onMount?.(this);
+      return () => {
+        video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        video.removeEventListener("play", handlePlay);
+        video.removeEventListener("pause", handlePause);
+        video.removeEventListener("ended", handleEnded);
+        video.removeEventListener("error", handleError);
+        video.removeEventListener("loadeddata", handleLoadedData);
+      };
+    };
+    this.play = () => {
+      if (this.props.videoElement) {
+        this.props.videoElement.play();
+      }
+    };
+    this.pause = () => {
+      if (this.props.videoElement) {
+        this.props.videoElement.pause();
+      }
+    };
+    this.stop = () => {
+      this.pause();
+      if (this.props.videoElement) {
+        this.props.videoElement.currentTime = 0;
+      }
+    };
+    this.seekTo = (seconds, keepPlaying) => {
+      if (this.props.videoElement) {
+        this.props.videoElement.currentTime = seconds;
+        if (!keepPlaying) {
+          this.pause();
+        }
+      }
+    };
+    this.setVolume = (volume) => {
+      if (this.props.videoElement) {
+        this.props.videoElement.volume = Math.max(0, Math.min(1, volume));
+      }
+    };
+    this.mute = () => {
+      if (this.props.videoElement) {
+        this.props.videoElement.muted = true;
+      }
+    };
+    this.unmute = () => {
+      if (this.props.videoElement) {
+        this.props.videoElement.muted = false;
+      }
+    };
+    this.setPlaybackRate = (rate) => {
+      if (this.props.videoElement && rate > 0) {
+        this.props.videoElement.playbackRate = rate;
+      }
+    };
+    this.setLoop = (loop) => {
+      if (this.props.videoElement) {
+        this.props.videoElement.loop = loop;
+      }
+    };
+    this.getDuration = () => {
+      if (this.props.videoElement && isFinite(this.props.videoElement.duration)) {
+        return this.props.videoElement.duration;
+      }
+      return null;
+    };
+    this.getCurrentTime = () => {
+      if (this.props.videoElement && isFinite(this.props.videoElement.currentTime)) {
+        return this.props.videoElement.currentTime;
+      }
+      return null;
+    };
+    this.getSecondsLoaded = () => {
+      if (this.props.videoElement && this.props.videoElement.buffered.length > 0) {
+        return this.props.videoElement.buffered.end(
+          this.props.videoElement.buffered.length - 1
+        );
+      }
+      return null;
+    };
+    this.getInternalPlayer = (key = "player") => {
+      if (key === "video") return this.props.videoElement;
+      return null;
+    };
+    this.enablePIP = async () => {
+      if (this.props.videoElement && "requestPictureInPicture" in this.props.videoElement) {
+        try {
+          await this.props.videoElement.requestPictureInPicture();
+        } catch (error) {
+          console.warn("Picture-in-Picture failed:", error);
+        }
+      }
+    };
+    this.disablePIP = async () => {
+      if (document.pictureInPictureElement) {
+        try {
+          await document.exitPictureInPicture();
+        } catch (error) {
+          console.warn("Exit Picture-in-Picture failed:", error);
+        }
+      }
+    };
+  }
+  componentDidMount() {
+    this.mounted = true;
+    this.load();
+  }
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.src !== this.props.src) {
+      this.load();
+    }
+  }
+  render() {
+    return null;
+  }
+};
+FilePlayer.displayName = "FilePlayer";
+FilePlayer.canPlay = canPlay.file;
+
+// src/players/index.ts
+var players = [
+  {
+    key: "hls",
+    name: "HLS Player",
+    canPlay: canPlay.hls,
+    lazyPlayer: lazy(() => Promise.resolve({ default: HlsPlayer }))
+  },
+  {
+    key: "file",
+    name: "File Player",
+    canPlay: canPlay.file,
+    canEnablePIP: (url) => {
+      return canPlay.file(url) && (document.pictureInPictureEnabled || typeof document.webkitSupportsPresentationMode === "function");
+    },
+    lazyPlayer: lazy(() => Promise.resolve({ default: FilePlayer }))
+  }
+];
+var players_default = players;
+
+// src/Player.tsx
+var import_react5 = __toESM(require("react"), 1);
+var SEEK_ON_PLAY_EXPIRY = 5e3;
+var Player = class extends import_react5.Component {
+  constructor() {
+    super(...arguments);
+    this.mounted = false;
+    this.isReady = false;
+    this.isPlaying = false;
+    this.isLoading = true;
+    this.loadOnReady = null;
+    this.startOnPlay = true;
+    this.seekOnPlay = null;
+    this.onDurationCalled = false;
+    this.handlePlayerMount = (player) => {
+      if (this.player) {
+        this.progress();
+        return;
+      }
+      this.player = player;
+      this.player.load(this.props.src);
+      this.progress();
+    };
+    this.getInternalPlayer = (key) => {
+      if (!this.player) return null;
+      return this.player.getInternalPlayer(key);
+    };
+    this.progress = () => {
+      if (this.props.src && this.player && this.isReady) {
+        const playedSeconds = this.getCurrentTime() || 0;
+        const loadedSeconds = this.getSecondsLoaded();
+        const duration = this.getDuration();
+        if (duration) {
+          const progress = {
+            playedSeconds,
+            played: playedSeconds / duration,
+            loaded: 0,
+            loadedSeconds: 0
+          };
+          if (loadedSeconds !== null) {
+            progress.loadedSeconds = loadedSeconds;
+            progress.loaded = loadedSeconds / duration;
+          }
+          if (progress.playedSeconds !== this.prevPlayed || progress.loadedSeconds !== this.prevLoaded) {
+            this.props.onProgress?.(progress);
+          }
+          this.prevPlayed = progress.playedSeconds;
+          this.prevLoaded = progress.loadedSeconds;
+        }
+      }
+      this.progressTimeout = window.setTimeout(
+        this.progress,
+        this.props.progressInterval || 1e3
+      );
+    };
+    this.handleReady = () => {
+      if (!this.mounted) return;
+      this.isReady = true;
+      this.isLoading = false;
+      const { onReady, playing, volume, muted } = this.props;
+      onReady();
+      if (!muted && volume !== null) {
+        this.player.setVolume(volume);
+      }
+      if (this.loadOnReady) {
+        this.player.load(this.loadOnReady, true);
+        this.loadOnReady = null;
+      } else if (playing) {
+        this.player.play();
+      }
+      this.handleDurationCheck();
+    };
+    this.handlePlay = () => {
+      this.isPlaying = true;
+      this.isLoading = false;
+      const { onStart, onPlay, playbackRate } = this.props;
+      if (this.startOnPlay) {
+        if (this.player.setPlaybackRate && playbackRate !== 1) {
+          this.player.setPlaybackRate(playbackRate);
+        }
+        onStart?.();
+        this.startOnPlay = false;
+      }
+      onPlay?.();
+      if (this.seekOnPlay) {
+        this.seekTo(this.seekOnPlay);
+        this.seekOnPlay = null;
+      }
+      this.handleDurationCheck();
+    };
+    this.handlePause = (e) => {
+      this.isPlaying = false;
+      if (!this.isLoading) {
+        this.props.onPause?.(e);
+      }
+    };
+    this.handleEnded = () => {
+      const { activePlayer, loop, onEnded } = this.props;
+      if (activePlayer.loopOnEnded && loop) {
+        this.seekTo(0);
+      }
+      if (!loop) {
+        this.isPlaying = false;
+        onEnded?.();
+      }
+    };
+    this.handleError = (...args) => {
+      this.isLoading = false;
+      this.props.onError?.(args[0], args[1], args[2], args[3]);
+    };
+    this.handleDurationCheck = () => {
+      clearTimeout(this.durationCheckTimeout);
+      const duration = this.getDuration();
+      if (duration) {
+        if (!this.onDurationCalled) {
+          this.props.onDuration?.(duration);
+          this.onDurationCalled = true;
+        }
+      } else {
+        this.durationCheckTimeout = window.setTimeout(
+          this.handleDurationCheck,
+          100
+        );
+      }
+    };
+    this.handleLoaded = () => {
+      this.isLoading = false;
+    };
+  }
+  componentDidMount() {
+    this.mounted = true;
+  }
+  componentWillUnmount() {
+    clearTimeout(this.progressTimeout);
+    clearTimeout(this.durationCheckTimeout);
+    this.mounted = false;
+  }
+  componentDidUpdate(prevProps) {
+    if (!this.player) return;
+    const { src, playing, volume, muted, playbackRate, loop, activePlayer } = this.props;
+    if (prevProps.src !== src) {
+      if (this.isLoading && !activePlayer.forceLoad && !isMediaStream(src)) {
+        console.warn(
+          `StormcloudPlayer: the attempt to load ${src} is being deferred until the player has loaded`
+        );
+        this.loadOnReady = src || null;
+        return;
+      }
+      this.isLoading = true;
+      this.startOnPlay = true;
+      this.onDurationCalled = false;
+      this.player.load(src, this.isReady);
+    }
+    if (!prevProps.playing && playing && !this.isPlaying) {
+      this.player.play();
+    }
+    if (prevProps.playing && !playing && this.isPlaying) {
+      this.player.pause();
+    }
+    if (prevProps.volume !== volume && volume !== null) {
+      this.player.setVolume(volume);
+    }
+    if (prevProps.muted !== muted) {
+      if (muted) {
+        this.player.mute();
+      } else {
+        this.player.unmute();
+        if (volume !== null) {
+          setTimeout(() => this.player.setVolume(volume));
+        }
       }
     }
-    const uiProps = [
-      "autoplay",
-      "muted",
-      "controls",
-      "showCustomControls",
-      "className",
-      "style",
-      "wrapperClassName",
-      "wrapperStyle",
-      "playsInline",
-      "preload",
-      "poster",
-      "children"
-    ];
-    for (const prop of uiProps) {
-      if (prevProps[prop] !== nextProps[prop]) {
-        return false;
+    if (prevProps.playbackRate !== playbackRate && this.player.setPlaybackRate) {
+      this.player.setPlaybackRate(playbackRate);
+    }
+    if (prevProps.loop !== loop && this.player.setLoop) {
+      this.player.setLoop(loop);
+    }
+  }
+  getDuration() {
+    if (!this.isReady) return null;
+    return this.player.getDuration();
+  }
+  getCurrentTime() {
+    if (!this.isReady) return null;
+    return this.player.getCurrentTime();
+  }
+  getSecondsLoaded() {
+    if (!this.isReady) return null;
+    return this.player.getSecondsLoaded();
+  }
+  seekTo(amount, type, keepPlaying) {
+    if (!this.isReady) {
+      if (amount !== 0) {
+        this.seekOnPlay = amount;
+        setTimeout(() => {
+          this.seekOnPlay = null;
+        }, SEEK_ON_PLAY_EXPIRY);
       }
+      return;
     }
-    const callbackProps = [
-      "onReady",
-      "onVolumeToggle",
-      "onFullscreenToggle",
-      "onControlClick"
-    ];
-    for (const prop of callbackProps) {
-      if (prevProps[prop] !== nextProps[prop]) {
-        return false;
+    const isFraction = !type ? amount > 0 && amount < 1 : type === "fraction";
+    if (isFraction) {
+      const duration = this.player.getDuration();
+      if (!duration) {
+        console.warn(
+          "StormcloudPlayer: could not seek using fraction \u2013 duration not yet available"
+        );
+        return;
       }
+      this.player.seekTo(duration * amount, keepPlaying);
+      return;
     }
-    return true;
+    this.player.seekTo(amount, keepPlaying);
+  }
+  render() {
+    const Player2 = this.props.activePlayer;
+    if (!Player2) {
+      return null;
+    }
+    return import_react5.default.createElement(Player2, {
+      ...this.props,
+      onMount: this.handlePlayerMount,
+      onReady: this.handleReady,
+      onPlay: this.handlePlay,
+      onPause: this.handlePause,
+      onEnded: this.handleEnded,
+      onLoaded: this.handleLoaded,
+      onError: this.handleError
+    });
   }
+};
+Player.displayName = "Player";
+Player.defaultProps = defaultProps;
+
+// src/StormcloudPlayer.tsx
+var IS_BROWSER2 = typeof window !== "undefined" && window.document;
+var IS_GLOBAL2 = typeof globalThis !== "undefined" && globalThis.window && globalThis.window.document;
+var UniversalSuspense = IS_BROWSER2 || IS_GLOBAL2 ? import_react6.Suspense : () => null;
+var SUPPORTED_PROPS = [
+  "src",
+  "playing",
+  "loop",
+  "controls",
+  "volume",
+  "muted",
+  "playbackRate",
+  "width",
+  "height",
+  "style",
+  "progressInterval",
+  "playsInline",
+  "autoplay",
+  "preload",
+  "poster",
+  "className",
+  "wrapperClassName",
+  "wrapperStyle",
+  "allowNativeHls",
+  "lowLatencyMode",
+  "driftToleranceMs",
+  "immediateManifestAds",
+  "debugAdTiming",
+  "showCustomControls",
+  "licenseKey",
+  "adFailsafeTimeoutMs",
+  "onReady",
+  "onStart",
+  "onPlay",
+  "onPause",
+  "onBuffer",
+  "onBufferEnd",
+  "onEnded",
+  "onError",
+  "onDuration",
+  "onSeek",
+  "onProgress",
+  "onVolumeToggle",
+  "onFullscreenToggle",
+  "onControlClick"
+];
+var customPlayers = [];
+var createStormcloudPlayer = (playerList, fallback) => {
+  var _a;
+  return _a = class extends import_react6.Component {
+    constructor() {
+      super(...arguments);
+      this.state = {
+        showPreview: false
+      };
+      this.references = {
+        wrapper: (wrapper) => {
+          this.wrapper = wrapper;
+        },
+        player: (player) => {
+          this.player = player;
+        }
+      };
+      this.getActivePlayer = (src) => {
+        if (!src) return null;
+        for (const player of [...customPlayers, ...playerList]) {
+          if (player.canPlay(src)) {
+            return player;
+          }
+        }
+        if (fallback) {
+          return fallback;
+        }
+        return null;
+      };
+      this.getAttributes = (src) => {
+        return omit(this.props, SUPPORTED_PROPS);
+      };
+      this.handleReady = () => {
+        this.props.onReady?.(this);
+      };
+      this.seekTo = (fraction, type, keepPlaying) => {
+        if (!this.player) return null;
+        this.player.seekTo(fraction, type, keepPlaying);
+      };
+      this.getCurrentTime = () => {
+        if (!this.player) return null;
+        return this.player.getCurrentTime();
+      };
+      this.getSecondsLoaded = () => {
+        if (!this.player) return null;
+        return this.player.getSecondsLoaded();
+      };
+      this.getDuration = () => {
+        if (!this.player) return null;
+        return this.player.getDuration();
+      };
+      this.getInternalPlayer = (key = "player") => {
+        if (!this.player) return null;
+        return this.player.getInternalPlayer(key);
+      };
+      this.renderActivePlayer = (src) => {
+        if (!src) return null;
+        const activePlayer = this.getActivePlayer(src);
+        if (!activePlayer) return null;
+        return import_react6.default.createElement(Player, {
+          ...this.props,
+          key: activePlayer.key,
+          ref: this.references.player,
+          activePlayer: activePlayer.lazyPlayer || activePlayer,
+          onReady: this.handleReady
+        });
+      };
+    }
+    render() {
+      const {
+        src,
+        style,
+        width,
+        height,
+        fallback: fallbackElement,
+        wrapper: Wrapper
+      } = this.props;
+      const attributes = this.getAttributes(src);
+      const wrapperRef = typeof Wrapper === "string" ? this.references.wrapper : void 0;
+      return import_react6.default.createElement(
+        Wrapper,
+        {
+          ref: wrapperRef,
+          style: { ...style, width, height },
+          ...attributes
+        },
+        import_react6.default.createElement(
+          UniversalSuspense,
+          { fallback: fallbackElement },
+          this.renderActivePlayer(src)
+        )
+      );
+    }
+  }, _a.displayName = "StormcloudPlayer", _a.defaultProps = {
+    ...defaultProps,
+    fallback: null,
+    wrapper: "div"
+  }, _a.addCustomPlayer = (player) => {
+    customPlayers.push(player);
+  }, _a.removeCustomPlayers = () => {
+    customPlayers.length = 0;
+  }, _a.canPlay = (src) => {
+    for (const Player2 of [...customPlayers, ...playerList]) {
+      if (Player2.canPlay(src)) {
+        return true;
+      }
+    }
+    return false;
+  }, _a.canEnablePIP = (src) => {
+    for (const Player2 of [...customPlayers, ...playerList]) {
+      if (Player2.canEnablePIP && Player2.canEnablePIP(src)) {
+        return true;
+      }
+    }
+    return false;
+  }, _a;
+};
+var StormcloudPlayer = createStormcloudPlayer(
+  players_default,
+  players_default[players_default.length - 1]
 );
+var StormcloudPlayer_default = StormcloudPlayer;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   IS_BROWSER,
@@ -3819,6 +3827,7 @@ var StormcloudVideoPlayerComponent = import_react6.default.memo(
   IS_SAFARI,
   SUPPORTS_DASH,
   SUPPORTS_HLS,
+  StormcloudPlayer,
   StormcloudVideoPlayer,
   StormcloudVideoPlayerComponent,
   canPlay,