stormcloud-video-player 0.1.12 → 0.2.0

package/lib/index.cjs

@@ -30,15 +30,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  IS_BROWSER: () => IS_BROWSER,
+  IS_GLOBAL: () => IS_GLOBAL,
+  IS_IOS: () => IS_IOS,
+  IS_SAFARI: () => IS_SAFARI,
+  SUPPORTS_DASH: () => SUPPORTS_DASH,
+  SUPPORTS_HLS: () => SUPPORTS_HLS,
   StormcloudVideoPlayer: () => StormcloudVideoPlayer,
   StormcloudVideoPlayerComponent: () => StormcloudVideoPlayerComponent,
+  canPlay: () => canPlay,
+  createStormcloudPlayer: () => createStormcloudPlayer,
+  default: () => StormcloudPlayer_default,
   getBrowserID: () => getBrowserID,
   getClientInfo: () => getClientInfo,
+  isMediaStream: () => isMediaStream,
+  lazy: () => lazy,
+  merge: () => merge,
+  omit: () => omit,
+  parseQuery: () => parseQuery,
+  players: () => players_default,
+  randomString: () => randomString,
   sendHeartbeat: () => sendHeartbeat,
-  sendInitialTracking: () => sendInitialTracking
+  sendInitialTracking: () => sendInitialTracking,
+  supportsWebKitPresentationMode: () => supportsWebKitPresentationMode
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/StormcloudPlayer.tsx
+var import_react5 = __toESM(require("react"), 1);
+
 // src/player/StormcloudVideoPlayer.ts
 var import_hls = __toESM(require("hls.js"), 1);
 
@@ -1133,7 +1153,6 @@ var StormcloudVideoPlayer = class {
   }
   parseScte35Binary(data) {
     class BitReader {
-      // 0..7
       constructor(buf) {
         this.buf = buf;
         this.bytePos = 0;
@@ -1671,8 +1690,896 @@ 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);
+        }
+      }
+    };
+    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_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?.();
+        }
+      };
+      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_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;
+        }
+      }
+      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));
+        }
+      }
+    }
+    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_react = __toESM(require("react"), 1);
+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 = [
@@ -1682,7 +2589,7 @@ var CRITICAL_PROPS = [
   "lowLatencyMode",
   "driftToleranceMs"
 ];
-var StormcloudVideoPlayerComponent = import_react.default.memo(
+var StormcloudVideoPlayerComponent = import_react6.default.memo(
   (props) => {
     const {
       src,
@@ -1710,22 +2617,22 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
       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 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);
@@ -1776,10 +2683,10 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
     };
     const isHlsStream = src?.toLowerCase().includes(".m3u8") || src?.toLowerCase().includes("/hls/");
     const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
-    const criticalPropsKey = (0, import_react.useMemo)(() => {
+    const criticalPropsKey = (0, import_react6.useMemo)(() => {
       return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
     }, [src, allowNativeHls, licenseKey, lowLatencyMode, driftToleranceMs]);
-    (0, import_react.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (typeof window === "undefined") return;
       const el = videoRef.current;
       if (!el || !src) return;
@@ -1826,7 +2733,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
         playerRef.current = null;
       };
     }, [criticalPropsKey]);
-    (0, import_react.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (!playerRef.current) return;
       try {
         if (autoplay !== void 0 && playerRef.current.videoElement) {
@@ -1839,7 +2746,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
         console.warn("Failed to update player properties:", error);
       }
     }, [autoplay, muted]);
-    (0, import_react.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (!playerRef.current) return;
       const checkAdStatus = () => {
         if (playerRef.current) {
@@ -1854,10 +2761,10 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
           });
         }
       };
-      const interval = setInterval(checkAdStatus, 500);
+      const interval = setInterval(checkAdStatus, 100);
       return () => clearInterval(interval);
     }, []);
-    (0, import_react.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (typeof window === "undefined" || !playerRef.current) return;
       const handleResize = () => {
         if (playerRef.current && videoRef.current) {
@@ -1869,7 +2776,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
       window.addEventListener("resize", handleResize);
       return () => window.removeEventListener("resize", handleResize);
     }, []);
-    (0, import_react.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (!playerRef.current || !videoRef.current) return;
       const updateStates = () => {
         if (playerRef.current && videoRef.current) {
@@ -1907,7 +2814,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
         );
       };
     }, []);
-    (0, import_react.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (!videoRef.current) return;
       const handleLoadedMetadata = () => {
         if (videoRef.current) {
@@ -1932,7 +2839,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
         setShowCenterPlay(false);
       };
       const handlePause = () => {
-        setShowCenterPlay(true);
+        if (playerRef.current && !playerRef.current.isShowingAds()) {
+          setShowCenterPlay(true);
+        } else {
+          setShowCenterPlay(false);
+        }
       };
       const handleEnded = () => {
         setShowCenterPlay(true);
@@ -2097,7 +3008,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
                 )
               }
             ),
-            showCenterPlay && !isLoading && !isBuffering && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            showCenterPlay && !isLoading && !isBuffering && !adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
                 onClick: handleCenterPlayClick,
@@ -2148,29 +3059,6 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
                 )
               }
             ),
-            adStatus.showAds && adStatus.totalAds > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: "10px",
-                  right: "10px",
-                  backgroundColor: "rgba(0, 0, 0, 0.7)",
-                  color: "white",
-                  padding: "4px 8px",
-                  borderRadius: "4px",
-                  fontSize: "12px",
-                  fontFamily: "Arial, sans-serif",
-                  zIndex: 10
-                },
-                children: [
-                  "Ad ",
-                  adStatus.currentIndex,
-                  "/",
-                  adStatus.totalAds
-                ]
-              }
-            ),
             shouldShowEnhancedControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "div",
               {
@@ -2925,11 +3813,27 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
 );
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  IS_BROWSER,
+  IS_GLOBAL,
+  IS_IOS,
+  IS_SAFARI,
+  SUPPORTS_DASH,
+  SUPPORTS_HLS,
   StormcloudVideoPlayer,
   StormcloudVideoPlayerComponent,
+  canPlay,
+  createStormcloudPlayer,
   getBrowserID,
   getClientInfo,
+  isMediaStream,
+  lazy,
+  merge,
+  omit,
+  parseQuery,
+  players,
+  randomString,
   sendHeartbeat,
-  sendInitialTracking
+  sendInitialTracking,
+  supportsWebKitPresentationMode
 });
 //# sourceMappingURL=index.cjs.map