stormcloud-video-player 0.1.7 → 0.1.9

package/lib/index.js

@@ -80,6 +80,9 @@ function createImaController(video) {
           container.style.top = "0";
           container.style.right = "0";
           container.style.bottom = "0";
+          container.style.display = "flex";
+          container.style.alignItems = "center";
+          container.style.justifyContent = "center";
           container.style.pointerEvents = "none";
           container.style.zIndex = "2";
           video.parentElement?.appendChild(container);
@@ -122,6 +125,9 @@ function createImaController(video) {
           container.style.top = "0";
           container.style.right = "0";
           container.style.bottom = "0";
+          container.style.display = "flex";
+          container.style.alignItems = "center";
+          container.style.justifyContent = "center";
           container.style.pointerEvents = "none";
           container.style.zIndex = "2";
           if (!video.parentElement) {
@@ -328,6 +334,20 @@ function createImaController(video) {
     isAdPlaying() {
       return adPlaying;
     },
+    resize(width, height) {
+      if (!adsManager || !window.google?.ima) {
+        console.warn(
+          "[IMA] Cannot resize: No ads manager or IMA SDK available"
+        );
+        return;
+      }
+      try {
+        console.log(`[IMA] Resizing ads manager to ${width}x${height}`);
+        adsManager.resize(width, height, window.google.ima.ViewMode.NORMAL);
+      } catch (error) {
+        console.warn("[IMA] Error resizing ads manager:", error);
+      }
+    },
     on(event, listener) {
       if (!listeners.has(event)) listeners.set(event, /* @__PURE__ */ new Set());
       listeners.get(event).add(listener);
@@ -498,7 +518,9 @@ async function sendInitialTracking(licenseKey) {
       browserId,
       ...clientInfo
     };
-    const headers = { "Content-Type": "application/json" };
+    const headers = {
+      "Content-Type": "application/json"
+    };
     if (licenseKey) {
       headers["Authorization"] = `Bearer ${licenseKey}`;
     }
@@ -513,11 +535,7 @@ async function sendInitialTracking(licenseKey) {
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
-    const data = await response.json();
-    console.log(
-      "[StormcloudVideoPlayer] Initial tracking data sent successfully:",
-      data
-    );
+    await response.json();
   } catch (error) {
     console.error(
       "[StormcloudVideoPlayer] Error sending initial tracking data:",
@@ -533,7 +551,9 @@ async function sendHeartbeat(licenseKey) {
       browserId,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     };
-    const headers = { "Content-Type": "application/json" };
+    const headers = {
+      "Content-Type": "application/json"
+    };
     if (licenseKey) {
       headers["Authorization"] = `Bearer ${licenseKey}`;
     }
@@ -548,8 +568,7 @@ async function sendHeartbeat(licenseKey) {
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
-    const data = await response.json();
-    console.log("[StormcloudVideoPlayer] Heartbeat sent successfully:", data);
+    await response.json();
   } catch (error) {
     console.error("[StormcloudVideoPlayer] Error sending heartbeat:", error);
   }
@@ -568,7 +587,6 @@ var StormcloudVideoPlayer = class {
     this.showAds = false;
     this.config = config;
     this.video = config.videoElement;
-    this.adSchedule = config.adSchedule;
     this.ima = createImaController(this.video);
   }
   async load() {
@@ -874,70 +892,61 @@ var StormcloudVideoPlayer = class {
       const durationMs = marker.durationSeconds != null ? marker.durationSeconds * 1e3 : void 0;
       this.expectedAdBreakDurationMs = durationMs;
       this.currentAdBreakStartWallClockMs = Date.now();
-      const policy = this.adSchedule?.lateJoinPolicy ?? "play_remaining";
-      if (policy !== "skip_to_content") {
-        const isManifestMarker = this.isManifestBasedMarker(marker);
-        const forceImmediate = this.config.immediateManifestAds ?? true;
+      const isManifestMarker = this.isManifestBasedMarker(marker);
+      const forceImmediate = this.config.immediateManifestAds ?? true;
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] Ad start decision:", {
+          isManifestMarker,
+          forceImmediate,
+          hasPts: typeof marker.ptsSeconds === "number"
+        });
+      }
+      if (isManifestMarker && forceImmediate) {
         if (this.config.debugAdTiming) {
-          console.log("[StormcloudVideoPlayer] Ad start decision:", {
-            isManifestMarker,
-            forceImmediate,
-            hasPts: typeof marker.ptsSeconds === "number",
-            policy
+          console.log(
+            "[StormcloudVideoPlayer] Starting ad immediately (manifest-based)"
+          );
+        }
+        this.clearAdStartTimer();
+        this.handleAdStart(marker);
+      } else if (typeof marker.ptsSeconds === "number") {
+        const tol = this.config.driftToleranceMs ?? 1e3;
+        const nowMs = this.video.currentTime * 1e3;
+        const estCurrentPtsMs = nowMs - this.ptsDriftEmaMs;
+        const deltaMs = Math.floor(marker.ptsSeconds * 1e3 - estCurrentPtsMs);
+        if (this.config.debugAdTiming) {
+          console.log("[StormcloudVideoPlayer] PTS-based timing calculation:", {
+            nowMs,
+            estCurrentPtsMs,
+            markerPtsMs: marker.ptsSeconds * 1e3,
+            deltaMs,
+            tolerance: tol
           });
         }
-        if (isManifestMarker && forceImmediate) {
-          if (this.config.debugAdTiming) {
-            console.log(
-              "[StormcloudVideoPlayer] Starting ad immediately (manifest-based)"
-            );
-          }
-          this.clearAdStartTimer();
-          this.handleAdStart(marker);
-        } else if (typeof marker.ptsSeconds === "number") {
-          const tol = this.config.driftToleranceMs ?? 1e3;
-          const nowMs = this.video.currentTime * 1e3;
-          const estCurrentPtsMs = nowMs - this.ptsDriftEmaMs;
-          const deltaMs = Math.floor(
-            marker.ptsSeconds * 1e3 - estCurrentPtsMs
-          );
+        if (deltaMs > tol) {
           if (this.config.debugAdTiming) {
             console.log(
-              "[StormcloudVideoPlayer] PTS-based timing calculation:",
-              {
-                nowMs,
-                estCurrentPtsMs,
-                markerPtsMs: marker.ptsSeconds * 1e3,
-                deltaMs,
-                tolerance: tol
-              }
+              `[StormcloudVideoPlayer] Scheduling ad start in ${deltaMs}ms`
             );
           }
-          if (deltaMs > tol) {
-            if (this.config.debugAdTiming) {
-              console.log(
-                `[StormcloudVideoPlayer] Scheduling ad start in ${deltaMs}ms`
-              );
-            }
-            this.scheduleAdStartIn(deltaMs);
-          } else {
-            if (this.config.debugAdTiming) {
-              console.log(
-                "[StormcloudVideoPlayer] Starting ad immediately (within tolerance)"
-              );
-            }
-            this.clearAdStartTimer();
-            this.handleAdStart(marker);
-          }
+          this.scheduleAdStartIn(deltaMs);
         } else {
           if (this.config.debugAdTiming) {
             console.log(
-              "[StormcloudVideoPlayer] Starting ad immediately (fallback)"
+              "[StormcloudVideoPlayer] Starting ad immediately (within tolerance)"
             );
           }
           this.clearAdStartTimer();
           this.handleAdStart(marker);
         }
+      } else {
+        if (this.config.debugAdTiming) {
+          console.log(
+            "[StormcloudVideoPlayer] Starting ad immediately (fallback)"
+          );
+        }
+        this.clearAdStartTimer();
+        this.handleAdStart(marker);
       }
       if (this.expectedAdBreakDurationMs != null) {
         this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
@@ -957,12 +966,11 @@ var StormcloudVideoPlayer = class {
         this.scheduleAdStopCountdown(remainingMs);
       }
       if (!this.ima.isAdPlaying()) {
-        const policy = this.adSchedule?.lateJoinPolicy ?? "play_remaining";
         const scheduled = this.findCurrentOrNextBreak(
           this.video.currentTime * 1e3
         );
         const tags = this.selectVastTagsForBreak(scheduled) || (this.apiVastTagUrl ? [this.apiVastTagUrl] : void 0);
-        if (policy === "play_remaining" && tags && tags.length > 0) {
+        if (tags && tags.length > 0) {
           const first = tags[0];
           const rest = tags.slice(1);
           this.adPodQueue = rest;
@@ -1161,11 +1169,11 @@ var StormcloudVideoPlayer = class {
     });
     this.heartbeatInterval = window.setInterval(() => {
       this.sendHeartbeatIfNeeded();
-    }, 1e3);
+    }, 5e3);
   }
   sendHeartbeatIfNeeded() {
     const now = Date.now();
-    if (!this.lastHeartbeatTime || now - this.lastHeartbeatTime > 1e4) {
+    if (!this.lastHeartbeatTime || now - this.lastHeartbeatTime > 3e4) {
       this.lastHeartbeatTime = now;
       sendHeartbeat(this.config.licenseKey).catch((error) => {
         if (this.config.debugAdTiming) {
@@ -1212,9 +1220,6 @@ var StormcloudVideoPlayer = class {
       });
     }
   }
-  setAdSchedule(schedule) {
-    this.adSchedule = schedule;
-  }
   getCurrentAdIndex() {
     return this.currentAdIndex;
   }
@@ -1237,17 +1242,11 @@ var StormcloudVideoPlayer = class {
   shouldShowNativeControls() {
     return this.getStreamType() !== "hls";
   }
-  async loadAdScheduleFromUrl(url) {
-    const res = await fetch(url);
-    if (!res.ok) throw new Error(`Failed to fetch ad schedule: ${res.status}`);
-    const data = await res.json();
-    this.adSchedule = data;
-  }
-  async loadDefaultVastFromAiry(airyApiUrl, params) {
+  async loadDefaultVastFromAdstorm(adstormApiUrl, params) {
     const usp = new URLSearchParams(params || {});
-    const url = `${airyApiUrl}?${usp.toString()}`;
+    const url = `${adstormApiUrl}?${usp.toString()}`;
     const res = await fetch(url);
-    if (!res.ok) throw new Error(`Failed to fetch Airy ads: ${res.status}`);
+    if (!res.ok) throw new Error(`Failed to fetch adstorm ads: ${res.status}`);
     const data = await res.json();
     const tag = data?.adTagUrl || data?.vastTagUrl || data?.tagUrl;
     if (typeof tag === "string" && tag.length > 0) {
@@ -1310,7 +1309,7 @@ var StormcloudVideoPlayer = class {
     }
   }
   findCurrentOrNextBreak(nowMs) {
-    const schedule = this.adSchedule?.breaks || [];
+    const schedule = [];
     let candidate;
     for (const b of schedule) {
       const tol = this.config.driftToleranceMs ?? 1e3;
@@ -1321,7 +1320,7 @@ var StormcloudVideoPlayer = class {
     return candidate;
   }
   onTimeUpdate(currentTimeSec) {
-    if (!this.adSchedule || this.ima.isAdPlaying()) return;
+    if (this.ima.isAdPlaying()) return;
     const nowMs = currentTimeSec * 1e3;
     const breakToPlay = this.findBreakForTime(nowMs);
     if (breakToPlay) {
@@ -1333,10 +1332,8 @@ var StormcloudVideoPlayer = class {
     const endMs = adBreak.startTimeMs + durationMs;
     if (durationMs > 0 && nowMs > adBreak.startTimeMs && nowMs < endMs) {
       const remainingMs = endMs - nowMs;
-      const policy = this.adSchedule?.lateJoinPolicy ?? "play_remaining";
-      if (policy === "skip_to_content") return;
       const tags = this.selectVastTagsForBreak(adBreak) || (this.apiVastTagUrl ? [this.apiVastTagUrl] : void 0);
-      if (policy === "play_remaining" && tags && tags.length > 0) {
+      if (tags && tags.length > 0) {
         const first = tags[0];
         const rest = tags.slice(1);
         this.adPodQueue = rest;
@@ -1484,7 +1481,7 @@ var StormcloudVideoPlayer = class {
     return Math.max(0, this.expectedAdBreakDurationMs - elapsed);
   }
   findBreakForTime(nowMs) {
-    const schedule = this.adSchedule?.breaks || [];
+    const schedule = [];
     for (const b of schedule) {
       const end = (b.startTimeMs || 0) + (b.durationMs || 0);
       if (nowMs >= (b.startTimeMs || 0) && (b.durationMs ? nowMs < end : true)) {
@@ -1493,6 +1490,73 @@ var StormcloudVideoPlayer = class {
     }
     return void 0;
   }
+  toggleMute() {
+    this.video.muted = !this.video.muted;
+    if (this.config.debugAdTiming) {
+      console.log("[StormcloudVideoPlayer] Muted:", this.video.muted);
+    }
+  }
+  toggleFullscreen() {
+    return new Promise((resolve, reject) => {
+      if (!document.fullscreenElement) {
+        const container = this.video.parentElement;
+        if (!container) {
+          reject(new Error("No parent container found for fullscreen"));
+          return;
+        }
+        container.requestFullscreen().then(() => {
+          if (this.config.debugAdTiming) {
+            console.log("[StormcloudVideoPlayer] Entered fullscreen");
+          }
+          resolve();
+        }).catch((err) => {
+          if (this.config.debugAdTiming) {
+            console.error("[StormcloudVideoPlayer] Fullscreen error:", err);
+          }
+          reject(err);
+        });
+      } else {
+        document.exitFullscreen().then(() => {
+          if (this.config.debugAdTiming) {
+            console.log("[StormcloudVideoPlayer] Exited fullscreen");
+          }
+          resolve();
+        }).catch((err) => {
+          if (this.config.debugAdTiming) {
+            console.error(
+              "[StormcloudVideoPlayer] Exit fullscreen error:",
+              err
+            );
+          }
+          reject(err);
+        });
+      }
+    });
+  }
+  isMuted() {
+    return this.video.muted;
+  }
+  isFullscreen() {
+    return !!document.fullscreenElement;
+  }
+  get videoElement() {
+    return this.video;
+  }
+  resize() {
+    if (this.config.debugAdTiming) {
+      console.log("[StormcloudVideoPlayer] Resizing player");
+    }
+    if (this.ima && this.ima.isAdPlaying()) {
+      const width = this.video.clientWidth || 640;
+      const height = this.video.clientHeight || 360;
+      if (this.config.debugAdTiming) {
+        console.log(
+          `[StormcloudVideoPlayer] Resizing ads manager to ${width}x${height}`
+        );
+      }
+      this.ima.resize(width, height);
+    }
+  }
   destroy() {
     this.clearAdStartTimer();
     this.clearAdStopTimer();
@@ -1507,240 +1571,588 @@ var StormcloudVideoPlayer = class {
 };
 
 // src/ui/StormcloudVideoPlayer.tsx
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var StormcloudVideoPlayerComponent = (props) => {
-  const {
-    src,
-    autoplay,
-    muted,
-    lowLatencyMode,
-    allowNativeHls,
-    driftToleranceMs,
-    adSchedule,
-    immediateManifestAds,
-    debugAdTiming,
-    showCustomControls,
-    onVolumeToggle,
-    onFullscreenToggle,
-    onControlClick,
-    onReady,
-    wrapperClassName,
-    wrapperStyle,
-    className,
-    style,
-    controls,
-    playsInline,
-    preload,
-    poster,
-    children,
-    licenseKey,
-    ...restVideoAttrs
-  } = props;
-  const videoRef = useRef(null);
-  const playerRef = useRef(null);
-  const [adStatus, setAdStatus] = React.useState({ showAds: false, currentIndex: 0, totalAds: 0 });
-  const [shouldShowNativeControls, setShouldShowNativeControls] = React.useState(true);
-  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 = {
+var CRITICAL_PROPS = [
+  "src",
+  "allowNativeHls",
+  "licenseKey",
+  "lowLatencyMode",
+  "driftToleranceMs"
+];
+var StormcloudVideoPlayerComponent = React.memo(
+  (props) => {
+    const {
       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 (adSchedule !== void 0) cfg.adSchedule = adSchedule;
-    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 {
+      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 = useRef(null);
+    const playerRef = useRef(null);
+    const [adStatus, setAdStatus] = React.useState({ showAds: false, currentIndex: 0, totalAds: 0 });
+    const [shouldShowNativeControls, setShouldShowNativeControls] = React.useState(true);
+    const [isMuted, setIsMuted] = React.useState(false);
+    const [isFullscreen, setIsFullscreen] = React.useState(false);
+    const criticalPropsKey = useMemo(() => {
+      return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
+    }, [src, allowNativeHls, licenseKey, lowLatencyMode, driftToleranceMs]);
+    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;
       }
-      playerRef.current = null;
-    };
-  }, [
-    src,
-    autoplay,
-    muted,
-    lowLatencyMode,
-    allowNativeHls,
-    driftToleranceMs,
-    immediateManifestAds,
-    debugAdTiming,
-    showCustomControls,
-    onVolumeToggle,
-    onFullscreenToggle,
-    onControlClick,
-    onReady,
-    licenseKey
-  ]);
-  useEffect(() => {
-    if (!playerRef.current) return;
-    if (adSchedule) {
+      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]);
+    useEffect(() => {
+      if (!playerRef.current) return;
       try {
-        playerRef.current.setAdSchedule(adSchedule);
-      } catch {
-      }
-    }
-  }, [adSchedule]);
-  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;
-        });
+        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);
       }
-    };
-    const interval = setInterval(checkAdStatus, 500);
-    return () => clearInterval(interval);
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: wrapperClassName,
-      style: { position: "relative", overflow: "hidden", ...wrapperStyle },
-      children: [
-        /* @__PURE__ */ jsx(
-          "video",
-          {
-            ref: videoRef,
-            className,
-            style: { display: "block", width: "100%", height: "100%", ...style },
-            controls: shouldShowNativeControls && controls,
-            playsInline,
-            preload,
-            poster,
-            ...restVideoAttrs,
-            children
-          }
-        ),
-        adStatus.showAds && adStatus.totalAds > 0 && /* @__PURE__ */ 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
-            ]
-          }
-        ),
-        !shouldShowNativeControls && showCustomControls && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: "10px",
-              right: "10px",
-              display: "flex",
-              gap: "8px",
-              zIndex: 10
-            },
-            children: [
-              onVolumeToggle && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: onVolumeToggle,
-                  style: {
-                    backgroundColor: "rgba(0, 0, 0, 0.7)",
-                    color: "white",
-                    border: "1px solid rgba(255, 255, 255, 0.3)",
-                    borderRadius: "4px",
-                    padding: "8px",
-                    cursor: "pointer",
-                    fontSize: "14px"
-                  },
-                  title: "Toggle Volume",
-                  children: "\u{1F50A}"
-                }
-              ),
-              onFullscreenToggle && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: onFullscreenToggle,
-                  style: {
-                    backgroundColor: "rgba(0, 0, 0, 0.7)",
-                    color: "white",
-                    border: "1px solid rgba(255, 255, 255, 0.3)",
-                    borderRadius: "4px",
-                    padding: "8px",
-                    cursor: "pointer",
-                    fontSize: "14px"
-                  },
-                  title: "Toggle Fullscreen",
-                  children: "\u2922"
-                }
-              )
-            ]
-          }
-        ),
-        onControlClick && /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: onControlClick,
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              zIndex: 1,
-              cursor: "pointer"
+    }, [autoplay, muted]);
+    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, 500);
+      return () => clearInterval(interval);
+    }, []);
+    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);
+    }, []);
+    useEffect(() => {
+      if (!playerRef.current || !videoRef.current) return;
+      const updateStates = () => {
+        if (videoRef.current) {
+          setIsMuted(videoRef.current.muted);
+        }
+        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
+        );
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: wrapperClassName,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: isFullscreen ? "fixed" : "relative",
+          top: isFullscreen ? 0 : void 0,
+          left: isFullscreen ? 0 : void 0,
+          overflow: "hidden",
+          width: isFullscreen ? "100vw" : "100%",
+          height: isFullscreen ? "100vh" : "100%",
+          maxWidth: isFullscreen ? "100vw" : "100%",
+          maxHeight: isFullscreen ? "100vh" : "100%",
+          zIndex: isFullscreen ? 9999 : void 0,
+          backgroundColor: isFullscreen ? "#000" : void 0,
+          ...wrapperStyle
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              ref: videoRef,
+              className,
+              style: {
+                display: "block",
+                width: "100%",
+                height: "100%",
+                objectFit: isFullscreen ? "cover" : "contain",
+                backgroundColor: "#000",
+                ...style
+              },
+              controls: shouldShowNativeControls && controls && !showCustomControls,
+              playsInline,
+              preload,
+              poster,
+              ...restVideoAttrs,
+              children
+            }
+          ),
+          adStatus.showAds && adStatus.totalAds > 0 && /* @__PURE__ */ 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
+              ]
+            }
+          ),
+          showCustomControls && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: "10px",
+                right: "10px",
+                display: "flex",
+                gap: "8px",
+                zIndex: 10
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      if (onVolumeToggle) {
+                        onVolumeToggle();
+                      } else if (playerRef.current) {
+                        playerRef.current.toggleMute();
+                      }
+                    },
+                    onMouseEnter: (e) => {
+                      const target = e.currentTarget;
+                      target.style.transform = "translateY(-2px) scale(1.05)";
+                      target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                      target.style.background = "linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(60, 60, 60, 0.95) 100%)";
+                    },
+                    onMouseLeave: (e) => {
+                      const target = e.currentTarget;
+                      target.style.transform = "translateY(0) scale(1)";
+                      target.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
+                      target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)";
+                    },
+                    style: {
+                      background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)",
+                      color: "white",
+                      border: "1px solid rgba(255, 255, 255, 0.2)",
+                      borderRadius: "8px",
+                      padding: "10px",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      backdropFilter: "blur(10px)",
+                      boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+                    },
+                    title: isMuted ? "Unmute" : "Mute",
+                    children: isMuted ? /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        width: "18",
+                        height: "18",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: [
+                          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                            "linearGradient",
+                            {
+                              id: "volumeGradient",
+                              x1: "0%",
+                              y1: "0%",
+                              x2: "100%",
+                              y2: "100%",
+                              children: [
+                                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "1" }),
+                                /* @__PURE__ */ jsx(
+                                  "stop",
+                                  {
+                                    offset: "100%",
+                                    stopColor: "#e0e0e0",
+                                    stopOpacity: "0.9"
+                                  }
+                                )
+                              ]
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M3 8.5v7c0 .28.22.5.5.5H7l4.29 4.29c.63.63 1.71.18 1.71-.71V4.41c0-.89-1.08-1.34-1.71-.71L7 8H3.5c-.28 0-.5.22-.5.5z",
+                              fill: "url(#volumeGradient)",
+                              stroke: "rgba(255,255,255,0.3)",
+                              strokeWidth: "0.5"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M16.5 8.5l-1.41-1.41L12 10.18 8.91 7.09 7.5 8.5l3.09 3.09L7.5 14.68l1.41 1.41L12 13l3.09 3.09 1.41-1.41L13.41 12l3.09-3.5z",
+                              fill: "#ff4444",
+                              stroke: "rgba(255,255,255,0.5)",
+                              strokeWidth: "0.5"
+                            }
+                          )
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        width: "18",
+                        height: "18",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: [
+                          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                            "linearGradient",
+                            {
+                              id: "volumeGradient",
+                              x1: "0%",
+                              y1: "0%",
+                              x2: "100%",
+                              y2: "100%",
+                              children: [
+                                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "1" }),
+                                /* @__PURE__ */ jsx(
+                                  "stop",
+                                  {
+                                    offset: "100%",
+                                    stopColor: "#e0e0e0",
+                                    stopOpacity: "0.9"
+                                  }
+                                )
+                              ]
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M3 8.5v7c0 .28.22.5.5.5H7l4.29 4.29c.63.63 1.71.18 1.71-.71V4.41c0-.89-1.08-1.34-1.71-.71L7 8H3.5c-.28 0-.5.22-.5.5z",
+                              fill: "url(#volumeGradient)",
+                              stroke: "rgba(255,255,255,0.3)",
+                              strokeWidth: "0.5"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M15.5 12c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z",
+                              fill: "url(#volumeGradient)",
+                              opacity: "0.8"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M14 4.45v1.75c2.01.91 3.5 3.02 3.5 5.3 0 2.28-1.49 4.39-3.5 5.3v1.75c2.89-.86 5-3.54 5-7.05s-2.11-6.19-5-7.05z",
+                              fill: "url(#volumeGradient)",
+                              opacity: "0.6"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      if (onFullscreenToggle) {
+                        onFullscreenToggle();
+                      } else if (playerRef.current) {
+                        playerRef.current.toggleFullscreen().catch((err) => {
+                          console.error("Fullscreen error:", err);
+                        });
+                      }
+                    },
+                    onMouseEnter: (e) => {
+                      const target = e.currentTarget;
+                      target.style.transform = "translateY(-2px) scale(1.05)";
+                      target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                      target.style.background = "linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(60, 60, 60, 0.95) 100%)";
+                    },
+                    onMouseLeave: (e) => {
+                      const target = e.currentTarget;
+                      target.style.transform = "translateY(0) scale(1)";
+                      target.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
+                      target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)";
+                    },
+                    style: {
+                      background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)",
+                      color: "white",
+                      border: "1px solid rgba(255, 255, 255, 0.2)",
+                      borderRadius: "8px",
+                      padding: "10px",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      backdropFilter: "blur(10px)",
+                      boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+                    },
+                    title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
+                    children: isFullscreen ? /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        width: "20",
+                        height: "20",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M8 8h3v3l-1-1-2 2-1.5-1.5L8.5 8.5 8 8z",
+                              fill: "white",
+                              stroke: "rgba(255,255,255,0.8)",
+                              strokeWidth: "0.5"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M16 8h-3v3l1-1 2 2 1.5-1.5L15.5 8.5 16 8z",
+                              fill: "white",
+                              stroke: "rgba(255,255,255,0.8)",
+                              strokeWidth: "0.5"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M8 16h3v-3l-1 1-2-2-1.5 1.5L8.5 15.5 8 16z",
+                              fill: "white",
+                              stroke: "rgba(255,255,255,0.8)",
+                              strokeWidth: "0.5"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M16 16h-3v-3l1 1 2-2 1.5 1.5L15.5 15.5 16 16z",
+                              fill: "white",
+                              stroke: "rgba(255,255,255,0.8)",
+                              strokeWidth: "0.5"
+                            }
+                          )
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        width: "20",
+                        height: "20",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M3 3h6v2H5v4H3V3z",
+                              fill: "white",
+                              stroke: "rgba(255,255,255,0.8)",
+                              strokeWidth: "0.5"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M21 3h-6v2h4v4h2V3z",
+                              fill: "white",
+                              stroke: "rgba(255,255,255,0.8)",
+                              strokeWidth: "0.5"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M3 21v-6h2v4h4v2H3z",
+                              fill: "white",
+                              stroke: "rgba(255,255,255,0.8)",
+                              strokeWidth: "0.5"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M21 21h-6v-2h4v-4h2v6z",
+                              fill: "white",
+                              stroke: "rgba(255,255,255,0.8)",
+                              strokeWidth: "0.5"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          onControlClick && /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: onControlClick,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 1,
+                cursor: "pointer"
+              }
+            }
+          )
+        ]
+      }
+    );
+  },
+  (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;
+  }
+);
 export {
   StormcloudVideoPlayer,
   StormcloudVideoPlayerComponent,