stormcloud-video-player 0.1.13 → 0.2.0

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -0,0 +1,2905 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/StormcloudVideoPlayer.tsx
+var StormcloudVideoPlayer_exports = {};
+__export(StormcloudVideoPlayer_exports, {
+  StormcloudVideoPlayerComponent: () => StormcloudVideoPlayerComponent
+});
+module.exports = __toCommonJS(StormcloudVideoPlayer_exports);
+var import_react = __toESM(require("react"), 1);
+
+// src/player/StormcloudVideoPlayer.ts
+var import_hls = __toESM(require("hls.js"), 1);
+
+// src/sdk/ima.ts
+function createImaController(video) {
+  let adPlaying = false;
+  let originalMutedState = false;
+  const listeners = /* @__PURE__ */ new Map();
+  function emit(event, payload) {
+    const set = listeners.get(event);
+    if (!set) return;
+    for (const fn of Array.from(set)) {
+      try {
+        fn(payload);
+      } catch {
+      }
+    }
+  }
+  function ensureImaLoaded() {
+    try {
+      const frameEl = window.frameElement;
+      const sandboxAttr = frameEl?.getAttribute?.("sandbox") || "";
+      if (sandboxAttr) {
+        const tokens = new Set(
+          sandboxAttr.split(/\s+/).map((t) => t.trim()).filter((t) => t.length > 0)
+        );
+        const allowsScripts = tokens.has("allow-scripts");
+        if (!allowsScripts) {
+          console.error(
+            "StormcloudVideoPlayer: The host page is inside a sandboxed iframe without 'allow-scripts'. Google IMA cannot run ads within sandboxed frames. Remove the sandbox attribute or include 'allow-scripts allow-same-origin'."
+          );
+        }
+      }
+    } catch {
+    }
+    if (typeof window !== "undefined" && window.google?.ima)
+      return Promise.resolve();
+    const existing = document.querySelector(
+      'script[data-ima="true"]'
+    );
+    if (existing) {
+      return new Promise(
+        (resolve) => existing.addEventListener("load", () => resolve())
+      );
+    }
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js";
+      script.async = true;
+      script.defer = true;
+      script.setAttribute("data-ima", "true");
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error("IMA SDK load failed"));
+      document.head.appendChild(script);
+    });
+  }
+  let adsManager;
+  let adsLoader;
+  let adDisplayContainer;
+  let adContainerEl;
+  let lastAdTagUrl;
+  let retryAttempts = 0;
+  const maxRetries = 2;
+  const backoffBaseMs = 500;
+  let adsLoadedPromise;
+  let adsLoadedResolve;
+  let adsLoadedReject;
+  function makeAdsRequest(google, vastTagUrl) {
+    const adsRequest = new google.ima.AdsRequest();
+    adsRequest.adTagUrl = vastTagUrl;
+    adsLoader.requestAds(adsRequest);
+  }
+  return {
+    initialize() {
+      ensureImaLoaded().then(() => {
+        const google = window.google;
+        if (!adDisplayContainer) {
+          const container = document.createElement("div");
+          container.style.position = "absolute";
+          container.style.left = "0";
+          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);
+          adContainerEl = container;
+          adDisplayContainer = new google.ima.AdDisplayContainer(
+            container,
+            video
+          );
+          try {
+            adDisplayContainer.initialize?.();
+          } catch {
+          }
+        }
+      }).catch(() => {
+      });
+    },
+    async requestAds(vastTagUrl) {
+      console.log("[IMA] Requesting ads:", vastTagUrl);
+      adsLoadedPromise = new Promise((resolve, reject) => {
+        adsLoadedResolve = resolve;
+        adsLoadedReject = reject;
+        setTimeout(() => {
+          if (adsLoadedReject) {
+            adsLoadedReject(new Error("Ad request timeout"));
+            adsLoadedReject = void 0;
+            adsLoadedResolve = void 0;
+          }
+        }, 1e4);
+      });
+      try {
+        await ensureImaLoaded();
+        const google = window.google;
+        lastAdTagUrl = vastTagUrl;
+        retryAttempts = 0;
+        if (!adDisplayContainer) {
+          console.log("[IMA] Creating ad display container");
+          const container = document.createElement("div");
+          container.style.position = "absolute";
+          container.style.left = "0";
+          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) {
+            throw new Error("Video element has no parent for ad container");
+          }
+          video.parentElement.appendChild(container);
+          adContainerEl = container;
+          adDisplayContainer = new google.ima.AdDisplayContainer(
+            container,
+            video
+          );
+          try {
+            adDisplayContainer.initialize();
+            console.log("[IMA] Ad display container initialized");
+          } catch (error) {
+            console.warn(
+              "[IMA] Failed to initialize ad display container:",
+              error
+            );
+          }
+        }
+        if (!adsLoader) {
+          console.log("[IMA] Creating ads loader");
+          const adsLoaderCls = new google.ima.AdsLoader(adDisplayContainer);
+          adsLoader = adsLoaderCls;
+          adsLoader.addEventListener(
+            google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+            (evt) => {
+              console.log("[IMA] Ads manager loaded");
+              try {
+                adsManager = evt.getAdsManager(video);
+                const AdEvent = google.ima.AdEvent.Type;
+                const AdErrorEvent = google.ima.AdErrorEvent.Type;
+                adsManager.addEventListener(
+                  AdErrorEvent.AD_ERROR,
+                  (errorEvent) => {
+                    console.error("[IMA] Ad error:", errorEvent.getError());
+                    try {
+                      adsManager?.destroy?.();
+                    } catch {
+                    }
+                    adPlaying = false;
+                    video.muted = originalMutedState;
+                    if (adContainerEl)
+                      adContainerEl.style.pointerEvents = "none";
+                    if (adsLoadedReject) {
+                      adsLoadedReject(new Error("Ad playback error"));
+                      adsLoadedReject = void 0;
+                      adsLoadedResolve = void 0;
+                    }
+                    if (lastAdTagUrl && retryAttempts < maxRetries) {
+                      const delay = backoffBaseMs * Math.pow(2, retryAttempts++);
+                      console.log(
+                        `[IMA] Retrying ad request in ${delay}ms (attempt ${retryAttempts})`
+                      );
+                      window.setTimeout(() => {
+                        try {
+                          makeAdsRequest(google, lastAdTagUrl);
+                        } catch {
+                        }
+                      }, delay);
+                    } else {
+                      console.log(
+                        "[IMA] Max retries reached, emitting ad_error"
+                      );
+                      emit("ad_error");
+                      video.play().catch(() => {
+                      });
+                    }
+                  }
+                );
+                adsManager.addEventListener(
+                  AdEvent.CONTENT_PAUSE_REQUESTED,
+                  () => {
+                    console.log("[IMA] Content pause requested");
+                    originalMutedState = video.muted;
+                    video.muted = true;
+                    video.pause();
+                    adPlaying = true;
+                    if (adContainerEl)
+                      adContainerEl.style.pointerEvents = "auto";
+                    emit("content_pause");
+                  }
+                );
+                adsManager.addEventListener(
+                  AdEvent.CONTENT_RESUME_REQUESTED,
+                  () => {
+                    console.log("[IMA] Content resume requested");
+                    adPlaying = false;
+                    video.muted = originalMutedState;
+                    if (adContainerEl)
+                      adContainerEl.style.pointerEvents = "none";
+                    video.play().catch(() => {
+                    });
+                    emit("content_resume");
+                  }
+                );
+                adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
+                  console.log("[IMA] All ads completed");
+                  adPlaying = false;
+                  video.muted = originalMutedState;
+                  if (adContainerEl) adContainerEl.style.pointerEvents = "none";
+                  video.play().catch(() => {
+                  });
+                  emit("all_ads_completed");
+                });
+                console.log("[IMA] Ads manager event listeners attached");
+                if (adsLoadedResolve) {
+                  adsLoadedResolve();
+                  adsLoadedResolve = void 0;
+                  adsLoadedReject = void 0;
+                }
+              } catch (e) {
+                console.error("[IMA] Error setting up ads manager:", e);
+                adPlaying = false;
+                video.muted = originalMutedState;
+                if (adContainerEl) adContainerEl.style.pointerEvents = "none";
+                video.play().catch(() => {
+                });
+                if (adsLoadedReject) {
+                  adsLoadedReject(new Error("Failed to setup ads manager"));
+                  adsLoadedReject = void 0;
+                  adsLoadedResolve = void 0;
+                }
+                emit("ad_error");
+              }
+            },
+            false
+          );
+          adsLoader.addEventListener(
+            google.ima.AdErrorEvent.Type.AD_ERROR,
+            (adErrorEvent) => {
+              console.error("[IMA] Ads loader error:", adErrorEvent.getError());
+              if (adsLoadedReject) {
+                adsLoadedReject(new Error("Ads loader error"));
+                adsLoadedReject = void 0;
+                adsLoadedResolve = void 0;
+              }
+              emit("ad_error");
+            },
+            false
+          );
+        }
+        console.log("[IMA] Making ads request");
+        makeAdsRequest(google, vastTagUrl);
+        return adsLoadedPromise;
+      } catch (error) {
+        console.error("[IMA] Failed to request ads:", error);
+        if (adsLoadedReject) {
+          adsLoadedReject(error);
+          adsLoadedReject = void 0;
+          adsLoadedResolve = void 0;
+        }
+        return Promise.reject(error);
+      }
+    },
+    async play() {
+      if (!window.google?.ima || !adDisplayContainer) {
+        console.warn(
+          "[IMA] Cannot play ad: IMA SDK or ad container not available"
+        );
+        return Promise.reject(new Error("IMA SDK not available"));
+      }
+      if (!adsManager) {
+        console.warn("[IMA] Cannot play ad: No ads manager available");
+        return Promise.reject(new Error("No ads manager"));
+      }
+      try {
+        const width = video.clientWidth || 640;
+        const height = video.clientHeight || 360;
+        console.log(`[IMA] Initializing ads manager (${width}x${height})`);
+        adsManager.init(width, height, window.google.ima.ViewMode.NORMAL);
+        console.log("[IMA] Pausing video for ad playback");
+        video.pause();
+        adPlaying = true;
+        console.log("[IMA] Starting ad playback");
+        adsManager.start();
+        return Promise.resolve();
+      } catch (error) {
+        console.error("[IMA] Error starting ad playback:", error);
+        adPlaying = false;
+        video.play().catch(() => {
+        });
+        return Promise.reject(error);
+      }
+    },
+    async stop() {
+      adPlaying = false;
+      video.muted = originalMutedState;
+      try {
+        adsManager?.stop?.();
+      } catch {
+      }
+      video.play().catch(() => {
+      });
+    },
+    destroy() {
+      try {
+        adsManager?.destroy?.();
+      } catch {
+      }
+      adPlaying = false;
+      video.muted = originalMutedState;
+      try {
+        adsLoader?.destroy?.();
+      } catch {
+      }
+      if (adContainerEl?.parentElement) {
+        adContainerEl.parentElement.removeChild(adContainerEl);
+      }
+    },
+    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);
+    },
+    off(event, listener) {
+      listeners.get(event)?.delete(listener);
+    },
+    updateOriginalMutedState(muted) {
+      originalMutedState = muted;
+    },
+    getOriginalMutedState() {
+      return originalMutedState;
+    },
+    setAdVolume(volume) {
+      if (adsManager && adPlaying) {
+        try {
+          adsManager.setVolume(Math.max(0, Math.min(1, volume)));
+        } catch (error) {
+          console.warn("[IMA] Failed to set ad volume:", error);
+        }
+      }
+    },
+    getAdVolume() {
+      if (adsManager && adPlaying) {
+        try {
+          return adsManager.getVolume();
+        } catch (error) {
+          console.warn("[IMA] Failed to get ad volume:", error);
+          return 1;
+        }
+      }
+      return 1;
+    }
+  };
+}
+
+// src/utils/tracking.ts
+function getClientInfo() {
+  const ua = navigator.userAgent;
+  const platform = navigator.platform;
+  const vendor = navigator.vendor || "";
+  const maxTouchPoints = navigator.maxTouchPoints || 0;
+  const memory = navigator.deviceMemory || null;
+  const hardwareConcurrency = navigator.hardwareConcurrency || 1;
+  const screenInfo = {
+    width: screen?.width,
+    height: screen?.height,
+    availWidth: screen?.availWidth,
+    availHeight: screen?.availHeight,
+    orientation: screen?.orientation?.type || "",
+    pixelDepth: screen?.pixelDepth
+  };
+  let deviceType = "desktop";
+  let brand = "Unknown";
+  let os = "Unknown";
+  let model = "";
+  let isSmartTV = false;
+  let isAndroid = false;
+  let isWebView = false;
+  let isWebApp = false;
+  if (ua.includes("Web0S")) {
+    brand = "LG";
+    os = "webOS";
+    isSmartTV = true;
+    deviceType = "tv";
+    const webosMatch = ua.match(/Web0S\/([^\s]+)/);
+    model = webosMatch ? `webOS ${webosMatch[1]}` : "webOS TV";
+  } else if (ua.includes("Tizen")) {
+    brand = "Samsung";
+    os = "Tizen";
+    isSmartTV = true;
+    deviceType = "tv";
+    const tizenMatch = ua.match(/Tizen\/([^\s]+)/);
+    const tvMatch = ua.match(/(?:Smart-TV|SMART-TV|TV)/i) ? "Smart TV" : "";
+    model = tizenMatch ? `Tizen ${tizenMatch[1]} ${tvMatch}`.trim() : "Tizen TV";
+  } else if (ua.includes("Philips")) {
+    brand = "Philips";
+    os = "Saphi";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (ua.includes("Sharp") || ua.includes("AQUOS")) {
+    brand = "Sharp";
+    os = "Android TV";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (ua.includes("Android") && (ua.includes("Sony") || vendor.includes("Sony"))) {
+    brand = "Sony";
+    os = "Android TV";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (ua.includes("Android") && (ua.includes("NetCast") || ua.includes("LG"))) {
+    brand = "LG";
+    os = "Android TV";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (ua.includes(" Roku") || ua.includes("Roku/")) {
+    brand = "Roku";
+    os = "Roku OS";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (ua.includes("AppleTV")) {
+    brand = "Apple";
+    os = "tvOS";
+    isSmartTV = true;
+    deviceType = "tv";
+  }
+  if (ua.includes("Android")) {
+    isAndroid = true;
+    os = "Android";
+    deviceType = /Mobile/.test(ua) ? "mobile" : "tablet";
+    if (ua.includes("Android") && (maxTouchPoints === 0 || ua.includes("Google TV") || ua.includes("XiaoMi"))) {
+      deviceType = "tv";
+      isSmartTV = true;
+      brand = brand === "Unknown" ? "Android TV" : brand;
+    }
+    const androidModelMatch = ua.match(/\(([^)]*Android[^)]*)\)/);
+    if (androidModelMatch && androidModelMatch[1]) {
+      model = androidModelMatch[1];
+    }
+  }
+  if (/iPad|iPhone|iPod/.test(ua)) {
+    os = "iOS";
+    deviceType = "mobile";
+    brand = "Apple";
+    if (navigator.maxTouchPoints > 1 && /iPad/.test(ua)) {
+      deviceType = "tablet";
+    }
+  }
+  if (!isAndroid && !isSmartTV && !/Mobile/.test(ua)) {
+    if (ua.includes("Windows")) {
+      os = "Windows";
+      deviceType = "desktop";
+    } else if (ua.includes("Mac") && !/iPhone/.test(ua)) {
+      os = "macOS";
+      deviceType = "desktop";
+      if (maxTouchPoints > 1) deviceType = "tablet";
+    } else if (ua.includes("Linux")) {
+      os = "Linux";
+      deviceType = "desktop";
+    }
+  }
+  if (brand === "Unknown") {
+    if (vendor.includes("Google") || ua.includes("Chrome")) brand = "Google";
+    if (vendor.includes("Apple")) brand = "Apple";
+    if (vendor.includes("Samsung") || ua.includes("SM-")) brand = "Samsung";
+  }
+  isWebView = /wv|WebView|Linux; U;/.test(ua);
+  if (window?.outerHeight === 0 && window?.outerWidth === 0) {
+    isWebView = true;
+  }
+  isWebApp = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true || window.screen?.orientation?.angle !== void 0;
+  return {
+    brand,
+    os,
+    model: model || ua.substring(0, 50) + "...",
+    deviceType,
+    isSmartTV,
+    isAndroid,
+    isWebView,
+    isWebApp,
+    domain: window.location.hostname,
+    origin: window.location.origin,
+    path: window.location.pathname,
+    userAgent: ua,
+    vendor,
+    platform,
+    screen: screenInfo,
+    hardwareConcurrency,
+    deviceMemory: memory,
+    maxTouchPoints,
+    language: navigator.language,
+    languages: navigator.languages?.join(",") || "",
+    cookieEnabled: navigator.cookieEnabled,
+    doNotTrack: navigator.doNotTrack || "",
+    referrer: document.referrer,
+    visibilityState: document.visibilityState
+  };
+}
+async function getBrowserID(clientInfo) {
+  const fingerprintString = JSON.stringify(clientInfo);
+  const hashBuffer = await crypto.subtle.digest(
+    "SHA-256",
+    new TextEncoder().encode(fingerprintString)
+  );
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+  return hashHex;
+}
+async function sendInitialTracking(licenseKey) {
+  try {
+    const clientInfo = getClientInfo();
+    const browserId = await getBrowserID(clientInfo);
+    const trackingData = {
+      browserId,
+      ...clientInfo
+    };
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (licenseKey) {
+      headers["Authorization"] = `Bearer ${licenseKey}`;
+    }
+    const response = await fetch(
+      "https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/track",
+      {
+        method: "POST",
+        headers,
+        body: JSON.stringify(trackingData)
+      }
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    await response.json();
+  } catch (error) {
+    console.error(
+      "[StormcloudVideoPlayer] Error sending initial tracking data:",
+      error
+    );
+  }
+}
+async function sendHeartbeat(licenseKey) {
+  try {
+    const clientInfo = getClientInfo();
+    const browserId = await getBrowserID(clientInfo);
+    const heartbeatData = {
+      browserId,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (licenseKey) {
+      headers["Authorization"] = `Bearer ${licenseKey}`;
+    }
+    const response = await fetch(
+      "https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/heartbeat",
+      {
+        method: "POST",
+        headers,
+        body: JSON.stringify(heartbeatData)
+      }
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    await response.json();
+  } catch (error) {
+    console.error("[StormcloudVideoPlayer] Error sending heartbeat:", error);
+  }
+}
+
+// src/player/StormcloudVideoPlayer.ts
+var StormcloudVideoPlayer = class {
+  constructor(config) {
+    this.attached = false;
+    this.inAdBreak = false;
+    this.ptsDriftEmaMs = 0;
+    this.adPodQueue = [];
+    this.lastHeartbeatTime = 0;
+    this.currentAdIndex = 0;
+    this.totalAdsInBreak = 0;
+    this.showAds = false;
+    this.config = config;
+    this.video = config.videoElement;
+    this.ima = createImaController(this.video);
+  }
+  async load() {
+    if (!this.attached) {
+      this.attach();
+    }
+    try {
+      await this.fetchAdConfiguration();
+    } catch (error) {
+      if (this.config.debugAdTiming) {
+        console.warn(
+          "[StormcloudVideoPlayer] Failed to fetch ad configuration:",
+          error
+        );
+      }
+    }
+    this.initializeTracking();
+    if (this.shouldUseNativeHls()) {
+      this.video.src = this.config.src;
+      if (this.config.autoplay) {
+        await this.video.play().catch(() => {
+        });
+      }
+      return;
+    }
+    this.hls = new import_hls.default({
+      enableWorker: true,
+      backBufferLength: 30,
+      liveDurationInfinity: true,
+      lowLatencyMode: !!this.config.lowLatencyMode,
+      maxLiveSyncPlaybackRate: this.config.lowLatencyMode ? 1.5 : 1,
+      ...this.config.lowLatencyMode ? { liveSyncDuration: 2 } : {}
+    });
+    this.hls.on(import_hls.default.Events.MEDIA_ATTACHED, () => {
+      this.hls?.loadSource(this.config.src);
+    });
+    this.hls.on(import_hls.default.Events.MANIFEST_PARSED, async () => {
+      if (this.config.autoplay) {
+        await this.video.play().catch(() => {
+        });
+      }
+    });
+    this.hls.on(import_hls.default.Events.FRAG_PARSING_METADATA, (_evt, data) => {
+      const id3Tags = (data?.samples || []).map((s) => ({
+        key: "ID3",
+        value: s?.data,
+        ptsSeconds: s?.pts
+      }));
+      id3Tags.forEach((tag) => this.onId3Tag(tag));
+    });
+    this.hls.on(import_hls.default.Events.FRAG_CHANGED, (_evt, data) => {
+      const frag = data?.frag;
+      const tagList = frag?.tagList;
+      if (!Array.isArray(tagList)) return;
+      for (const entry of tagList) {
+        let tag = "";
+        let value = "";
+        if (Array.isArray(entry)) {
+          tag = String(entry[0] ?? "");
+          value = String(entry[1] ?? "");
+        } else if (typeof entry === "string") {
+          const idx = entry.indexOf(":");
+          if (idx >= 0) {
+            tag = entry.substring(0, idx);
+            value = entry.substring(idx + 1);
+          } else {
+            tag = entry;
+            value = "";
+          }
+        }
+        if (!tag) continue;
+        if (tag.includes("EXT-X-CUE-OUT")) {
+          const durationSeconds = this.parseCueOutDuration(value);
+          const marker = {
+            type: "start",
+            ...durationSeconds !== void 0 ? { durationSeconds } : {},
+            raw: { tag, value }
+          };
+          this.onScte35Marker(marker);
+        } else if (tag.includes("EXT-X-CUE-OUT-CONT")) {
+          const prog = this.parseCueOutCont(value);
+          const marker = {
+            type: "progress",
+            ...prog?.duration !== void 0 ? { durationSeconds: prog.duration } : {},
+            ...prog?.elapsed !== void 0 ? { ptsSeconds: prog.elapsed } : {},
+            raw: { tag, value }
+          };
+          this.onScte35Marker(marker);
+        } else if (tag.includes("EXT-X-CUE-IN")) {
+          this.onScte35Marker({ type: "end", raw: { tag, value } });
+        } else if (tag.includes("EXT-X-DATERANGE")) {
+          const attrs = this.parseAttributeList(value);
+          const hasScteOut = "SCTE35-OUT" in attrs || attrs["SCTE35-OUT"] !== void 0;
+          const hasScteIn = "SCTE35-IN" in attrs || attrs["SCTE35-IN"] !== void 0;
+          const klass = String(attrs["CLASS"] ?? "");
+          const duration = this.toNumber(attrs["DURATION"]);
+          if (hasScteOut || /com\.apple\.hls\.cue/i.test(klass)) {
+            const marker = {
+              type: "start",
+              ...duration !== void 0 ? { durationSeconds: duration } : {},
+              raw: { tag, value, attrs }
+            };
+            this.onScte35Marker(marker);
+          }
+          if (hasScteIn) {
+            this.onScte35Marker({ type: "end", raw: { tag, value, attrs } });
+          }
+        }
+      }
+    });
+    this.hls.on(import_hls.default.Events.ERROR, (_evt, data) => {
+      if (data?.fatal) {
+        switch (data.type) {
+          case import_hls.default.ErrorTypes.NETWORK_ERROR:
+            this.hls?.startLoad();
+            break;
+          case import_hls.default.ErrorTypes.MEDIA_ERROR:
+            this.hls?.recoverMediaError();
+            break;
+          default:
+            this.destroy();
+            break;
+        }
+      }
+    });
+    this.hls.attachMedia(this.video);
+  }
+  attach() {
+    if (this.attached) return;
+    this.attached = true;
+    this.video.autoplay = !!this.config.autoplay;
+    this.video.muted = !!this.config.muted;
+    this.ima.initialize();
+    this.ima.on("all_ads_completed", () => {
+      if (!this.inAdBreak) return;
+      const remaining = this.getRemainingAdMs();
+      if (remaining > 500 && this.adPodQueue.length > 0) {
+        const next = this.adPodQueue.shift();
+        this.currentAdIndex++;
+        this.playSingleAd(next).catch(() => {
+        });
+      } else {
+        this.currentAdIndex = 0;
+        this.totalAdsInBreak = 0;
+        this.showAds = false;
+      }
+    });
+    this.ima.on("ad_error", () => {
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] IMA ad_error event received");
+      }
+      if (!this.inAdBreak) return;
+      const remaining = this.getRemainingAdMs();
+      if (remaining > 500 && this.adPodQueue.length > 0) {
+        const next = this.adPodQueue.shift();
+        this.currentAdIndex++;
+        this.playSingleAd(next).catch(() => {
+        });
+      } else {
+        this.handleAdFailure();
+      }
+    });
+    this.ima.on("content_pause", () => {
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] IMA content_pause event received");
+      }
+      this.clearAdFailsafeTimer();
+    });
+    this.ima.on("content_resume", () => {
+      if (this.config.debugAdTiming) {
+        console.log(
+          "[StormcloudVideoPlayer] IMA content_resume event received"
+        );
+      }
+      this.clearAdFailsafeTimer();
+    });
+    this.video.addEventListener("timeupdate", () => {
+      this.onTimeUpdate(this.video.currentTime);
+    });
+  }
+  shouldUseNativeHls() {
+    const streamType = this.getStreamType();
+    if (streamType === "other") {
+      return true;
+    }
+    const canNative = this.video.canPlayType("application/vnd.apple.mpegURL");
+    return !!(this.config.allowNativeHls && canNative);
+  }
+  onId3Tag(tag) {
+    if (typeof tag.ptsSeconds === "number") {
+      this.updatePtsDrift(tag.ptsSeconds);
+    }
+    const marker = this.parseScte35FromId3(tag);
+    if (marker) {
+      this.onScte35Marker(marker);
+    }
+  }
+  parseScte35FromId3(tag) {
+    const text = this.decodeId3ValueToText(tag.value);
+    if (!text) return void 0;
+    const cueOutMatch = text.match(/EXT-X-CUE-OUT(?::([^\r\n]*))?/i) || text.match(/CUE-OUT(?::([^\r\n]*))?/i);
+    if (cueOutMatch) {
+      const arg = (cueOutMatch[1] ?? "").trim();
+      const dur = this.parseCueOutDuration(arg);
+      const marker = {
+        type: "start",
+        ...tag.ptsSeconds !== void 0 ? { ptsSeconds: tag.ptsSeconds } : {},
+        ...dur !== void 0 ? { durationSeconds: dur } : {},
+        raw: { id3: text }
+      };
+      return marker;
+    }
+    const cueOutContMatch = text.match(/EXT-X-CUE-OUT-CONT:([^\r\n]*)/i);
+    if (cueOutContMatch) {
+      const arg = (cueOutContMatch[1] ?? "").trim();
+      const cont = this.parseCueOutCont(arg);
+      const marker = {
+        type: "progress",
+        ...tag.ptsSeconds !== void 0 ? { ptsSeconds: tag.ptsSeconds } : {},
+        ...cont?.duration !== void 0 ? { durationSeconds: cont.duration } : {},
+        raw: { id3: text }
+      };
+      return marker;
+    }
+    const cueInMatch = text.match(/EXT-X-CUE-IN\b/i) || text.match(/CUE-IN\b/i);
+    if (cueInMatch) {
+      const marker = {
+        type: "end",
+        ...tag.ptsSeconds !== void 0 ? { ptsSeconds: tag.ptsSeconds } : {},
+        raw: { id3: text }
+      };
+      return marker;
+    }
+    const daterangeMatch = text.match(/EXT-X-DATERANGE:([^\r\n]*)/i);
+    if (daterangeMatch) {
+      const attrs = this.parseAttributeList(daterangeMatch[1] ?? "");
+      const hasScteOut = "SCTE35-OUT" in attrs || attrs["SCTE35-OUT"] !== void 0;
+      const hasScteIn = "SCTE35-IN" in attrs || attrs["SCTE35-IN"] !== void 0;
+      const klass = String(attrs["CLASS"] ?? "");
+      const duration = this.toNumber(attrs["DURATION"]);
+      if (hasScteOut || /com\.apple\.hls\.cue/i.test(klass)) {
+        const marker = {
+          type: "start",
+          ...tag.ptsSeconds !== void 0 ? { ptsSeconds: tag.ptsSeconds } : {},
+          ...duration !== void 0 ? { durationSeconds: duration } : {},
+          raw: { id3: text, attrs }
+        };
+        return marker;
+      }
+      if (hasScteIn) {
+        const marker = {
+          type: "end",
+          ...tag.ptsSeconds !== void 0 ? { ptsSeconds: tag.ptsSeconds } : {},
+          raw: { id3: text, attrs }
+        };
+        return marker;
+      }
+    }
+    if (/SCTE35-OUT/i.test(text)) {
+      const marker = {
+        type: "start",
+        ...tag.ptsSeconds !== void 0 ? { ptsSeconds: tag.ptsSeconds } : {},
+        raw: { id3: text }
+      };
+      return marker;
+    }
+    if (/SCTE35-IN/i.test(text)) {
+      const marker = {
+        type: "end",
+        ...tag.ptsSeconds !== void 0 ? { ptsSeconds: tag.ptsSeconds } : {},
+        raw: { id3: text }
+      };
+      return marker;
+    }
+    if (tag.value instanceof Uint8Array) {
+      const bin = this.parseScte35Binary(tag.value);
+      if (bin) return bin;
+    }
+    return void 0;
+  }
+  decodeId3ValueToText(value) {
+    try {
+      if (typeof value === "string") return value;
+      const decoder = new TextDecoder("utf-8", { fatal: false });
+      const text = decoder.decode(value);
+      if (text && /[\x20-\x7E]/.test(text)) return text;
+      let out = "";
+      for (let i = 0; i < value.length; i++)
+        out += String.fromCharCode(value[i]);
+      return out;
+    } catch {
+      return void 0;
+    }
+  }
+  onScte35Marker(marker) {
+    if (this.config.debugAdTiming) {
+      console.log("[StormcloudVideoPlayer] SCTE-35 marker detected:", {
+        type: marker.type,
+        ptsSeconds: marker.ptsSeconds,
+        durationSeconds: marker.durationSeconds,
+        currentTime: this.video.currentTime,
+        raw: marker.raw
+      });
+    }
+    if (marker.type === "start") {
+      this.inAdBreak = true;
+      const durationMs = marker.durationSeconds != null ? marker.durationSeconds * 1e3 : void 0;
+      this.expectedAdBreakDurationMs = durationMs;
+      this.currentAdBreakStartWallClockMs = Date.now();
+      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] 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 (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);
+        }
+      } 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);
+      }
+      return;
+    }
+    if (marker.type === "progress" && this.inAdBreak) {
+      if (marker.durationSeconds != null) {
+        this.expectedAdBreakDurationMs = marker.durationSeconds * 1e3;
+      }
+      if (this.expectedAdBreakDurationMs != null && this.currentAdBreakStartWallClockMs != null) {
+        const elapsedMs = Date.now() - this.currentAdBreakStartWallClockMs;
+        const remainingMs = Math.max(
+          0,
+          this.expectedAdBreakDurationMs - elapsedMs
+        );
+        this.scheduleAdStopCountdown(remainingMs);
+      }
+      if (!this.ima.isAdPlaying()) {
+        const scheduled = this.findCurrentOrNextBreak(
+          this.video.currentTime * 1e3
+        );
+        const tags = this.selectVastTagsForBreak(scheduled) || (this.apiVastTagUrl ? [this.apiVastTagUrl] : void 0);
+        if (tags && tags.length > 0) {
+          const first = tags[0];
+          const rest = tags.slice(1);
+          this.adPodQueue = rest;
+          this.playSingleAd(first).catch(() => {
+          });
+        }
+      }
+      return;
+    }
+    if (marker.type === "end") {
+      this.inAdBreak = false;
+      this.expectedAdBreakDurationMs = void 0;
+      this.currentAdBreakStartWallClockMs = void 0;
+      this.clearAdStartTimer();
+      this.clearAdStopTimer();
+      if (this.ima.isAdPlaying()) {
+        this.ima.stop().catch(() => {
+        });
+      }
+      return;
+    }
+  }
+  parseCueOutDuration(value) {
+    const num = parseFloat(value.trim());
+    if (!Number.isNaN(num)) return num;
+    const match = value.match(/(?:^|[,\s])DURATION\s*=\s*([0-9.]+)/i) || value.match(/Duration\s*=\s*([0-9.]+)/i);
+    if (match && match[1] != null) {
+      const dStr = match[1];
+      const d = parseFloat(dStr);
+      return Number.isNaN(d) ? void 0 : d;
+    }
+    return void 0;
+  }
+  parseCueOutCont(value) {
+    const elapsedMatch = value.match(/Elapsed\s*=\s*([0-9.]+)/i);
+    const durationMatch = value.match(/Duration\s*=\s*([0-9.]+)/i);
+    const res = {};
+    if (elapsedMatch && elapsedMatch[1] != null) {
+      const e = parseFloat(elapsedMatch[1]);
+      if (!Number.isNaN(e)) res.elapsed = e;
+    }
+    if (durationMatch && durationMatch[1] != null) {
+      const d = parseFloat(durationMatch[1]);
+      if (!Number.isNaN(d)) res.duration = d;
+    }
+    if ("elapsed" in res || "duration" in res) return res;
+    return void 0;
+  }
+  parseAttributeList(value) {
+    const attrs = {};
+    const regex = /([A-Z0-9-]+)=(("[^"]*")|([^",]*))(?:,|$)/gi;
+    let match;
+    while ((match = regex.exec(value)) !== null) {
+      const key = match[1] ?? "";
+      let rawVal = match[3] ?? match[4] ?? "";
+      if (rawVal.startsWith('"') && rawVal.endsWith('"')) {
+        rawVal = rawVal.slice(1, -1);
+      }
+      if (key) {
+        attrs[key] = rawVal;
+      }
+    }
+    return attrs;
+  }
+  toNumber(val) {
+    if (val == null) return void 0;
+    const n = typeof val === "string" ? parseFloat(val) : Number(val);
+    return Number.isNaN(n) ? void 0 : n;
+  }
+  isManifestBasedMarker(marker) {
+    const raw = marker.raw;
+    if (!raw) return false;
+    if (raw.tag) {
+      const tag = String(raw.tag);
+      return tag.includes("EXT-X-CUE-OUT") || tag.includes("EXT-X-CUE-IN") || tag.includes("EXT-X-DATERANGE");
+    }
+    if (raw.id3) return false;
+    if (raw.splice_command_type) return false;
+    return false;
+  }
+  parseScte35Binary(data) {
+    class BitReader {
+      constructor(buf) {
+        this.buf = buf;
+        this.bytePos = 0;
+        this.bitPos = 0;
+      }
+      readBits(numBits) {
+        let result = 0;
+        while (numBits > 0) {
+          if (this.bytePos >= this.buf.length) return result;
+          const remainingInByte = 8 - this.bitPos;
+          const toRead = Math.min(numBits, remainingInByte);
+          const currentByte = this.buf[this.bytePos];
+          const shift = remainingInByte - toRead;
+          const mask = (1 << toRead) - 1 & 255;
+          const bits = currentByte >> shift & mask;
+          result = result << toRead | bits;
+          this.bitPos += toRead;
+          if (this.bitPos >= 8) {
+            this.bitPos = 0;
+            this.bytePos += 1;
+          }
+          numBits -= toRead;
+        }
+        return result >>> 0;
+      }
+      skipBits(n) {
+        this.readBits(n);
+      }
+    }
+    const r = new BitReader(data);
+    const tableId = r.readBits(8);
+    if (tableId !== 252) return void 0;
+    r.readBits(1);
+    r.readBits(1);
+    r.readBits(2);
+    const sectionLength = r.readBits(12);
+    r.readBits(8);
+    r.readBits(1);
+    r.readBits(6);
+    const ptsAdjHigh = r.readBits(1);
+    const ptsAdjLow = r.readBits(32);
+    void ptsAdjHigh;
+    void ptsAdjLow;
+    r.readBits(8);
+    r.readBits(12);
+    const spliceCommandLength = r.readBits(12);
+    const spliceCommandType = r.readBits(8);
+    if (spliceCommandType !== 5) {
+      return void 0;
+    }
+    r.readBits(32);
+    const cancel = r.readBits(1) === 1;
+    r.readBits(7);
+    if (cancel) return void 0;
+    const outOfNetwork = r.readBits(1) === 1;
+    const programSpliceFlag = r.readBits(1) === 1;
+    const durationFlag = r.readBits(1) === 1;
+    const spliceImmediateFlag = r.readBits(1) === 1;
+    r.readBits(4);
+    if (programSpliceFlag && !spliceImmediateFlag) {
+      const timeSpecifiedFlag = r.readBits(1) === 1;
+      if (timeSpecifiedFlag) {
+        r.readBits(6);
+        r.readBits(33);
+      } else {
+        r.readBits(7);
+      }
+    } else if (!programSpliceFlag) {
+      const componentCount = r.readBits(8);
+      for (let i = 0; i < componentCount; i++) {
+        r.readBits(8);
+        if (!spliceImmediateFlag) {
+          const timeSpecifiedFlag = r.readBits(1) === 1;
+          if (timeSpecifiedFlag) {
+            r.readBits(6);
+            r.readBits(33);
+          } else {
+            r.readBits(7);
+          }
+        }
+      }
+    }
+    let durationSeconds = void 0;
+    if (durationFlag) {
+      r.readBits(6);
+      r.readBits(1);
+      const high = r.readBits(1);
+      const low = r.readBits(32);
+      const durationTicks = high * 4294967296 + low;
+      durationSeconds = durationTicks / 9e4;
+    }
+    r.readBits(16);
+    r.readBits(8);
+    r.readBits(8);
+    if (outOfNetwork) {
+      const marker = {
+        type: "start",
+        ...durationSeconds !== void 0 ? { durationSeconds } : {},
+        raw: { splice_command_type: 5 }
+      };
+      return marker;
+    }
+    return void 0;
+  }
+  initializeTracking() {
+    sendInitialTracking(this.config.licenseKey).catch((error) => {
+      if (this.config.debugAdTiming) {
+        console.warn(
+          "[StormcloudVideoPlayer] Failed to send initial tracking:",
+          error
+        );
+      }
+    });
+    this.heartbeatInterval = window.setInterval(() => {
+      this.sendHeartbeatIfNeeded();
+    }, 5e3);
+  }
+  sendHeartbeatIfNeeded() {
+    const now = Date.now();
+    if (!this.lastHeartbeatTime || now - this.lastHeartbeatTime > 3e4) {
+      this.lastHeartbeatTime = now;
+      sendHeartbeat(this.config.licenseKey).catch((error) => {
+        if (this.config.debugAdTiming) {
+          console.warn(
+            "[StormcloudVideoPlayer] Failed to send heartbeat:",
+            error
+          );
+        }
+      });
+    }
+  }
+  async fetchAdConfiguration() {
+    const apiUrl = "https://adstorm.co/api-adstorm-dev/adstorm/ads/web";
+    if (this.config.debugAdTiming) {
+      console.log(
+        "[StormcloudVideoPlayer] Fetching ad configuration from:",
+        apiUrl
+      );
+    }
+    const headers = {};
+    if (this.config.licenseKey) {
+      headers["Authorization"] = `Bearer ${this.config.licenseKey}`;
+    }
+    const response = await fetch(apiUrl, { headers });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ad configuration: ${response.status}`);
+    }
+    const data = await response.json();
+    const imaPayload = data.response?.ima?.["publisherdesk.ima"]?.payload;
+    if (imaPayload) {
+      this.apiVastTagUrl = decodeURIComponent(imaPayload);
+      if (this.config.debugAdTiming) {
+        console.log(
+          "[StormcloudVideoPlayer] Extracted VAST tag URL:",
+          this.apiVastTagUrl
+        );
+      }
+    }
+    this.vastConfig = data.response?.options?.vast;
+    if (this.config.debugAdTiming) {
+      console.log("[StormcloudVideoPlayer] Ad configuration loaded:", {
+        vastTagUrl: this.apiVastTagUrl,
+        vastConfig: this.vastConfig
+      });
+    }
+  }
+  getCurrentAdIndex() {
+    return this.currentAdIndex;
+  }
+  getTotalAdsInBreak() {
+    return this.totalAdsInBreak;
+  }
+  isAdPlaying() {
+    return this.inAdBreak && this.ima.isAdPlaying();
+  }
+  isShowingAds() {
+    return this.showAds;
+  }
+  getStreamType() {
+    const url = this.config.src.toLowerCase();
+    if (url.includes(".m3u8") || url.includes("/hls/") || url.includes("application/vnd.apple.mpegurl")) {
+      return "hls";
+    }
+    return "other";
+  }
+  shouldShowNativeControls() {
+    const streamType = this.getStreamType();
+    if (streamType === "other") {
+      return !(this.config.showCustomControls ?? false);
+    }
+    return !!(this.config.allowNativeHls && !(this.config.showCustomControls ?? false));
+  }
+  async loadDefaultVastFromAdstorm(adstormApiUrl, params) {
+    const usp = new URLSearchParams(params || {});
+    const url = `${adstormApiUrl}?${usp.toString()}`;
+    const res = await fetch(url);
+    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) {
+      this.apiVastTagUrl = tag;
+    }
+  }
+  async handleAdStart(_marker) {
+    const scheduled = this.findCurrentOrNextBreak(
+      this.video.currentTime * 1e3
+    );
+    const tags = this.selectVastTagsForBreak(scheduled);
+    let vastTagUrl;
+    let adsNumber = 1;
+    if (this.apiVastTagUrl) {
+      vastTagUrl = this.apiVastTagUrl;
+      if (this.vastConfig) {
+        const isHls = this.config.src.includes(".m3u8") || this.config.src.includes("hls");
+        if (isHls && this.vastConfig.cue_tones?.number_ads) {
+          adsNumber = this.vastConfig.cue_tones.number_ads;
+        } else if (!isHls && this.vastConfig.timer_vod?.number_ads) {
+          adsNumber = this.vastConfig.timer_vod.number_ads;
+        }
+      }
+      this.adPodQueue = new Array(adsNumber - 1).fill(vastTagUrl);
+      this.currentAdIndex = 0;
+      this.totalAdsInBreak = adsNumber;
+      if (this.config.debugAdTiming) {
+        console.log(
+          `[StormcloudVideoPlayer] Using API VAST tag with ${adsNumber} ads:`,
+          vastTagUrl
+        );
+      }
+    } else if (tags && tags.length > 0) {
+      vastTagUrl = tags[0];
+      const rest = tags.slice(1);
+      this.adPodQueue = rest;
+      this.currentAdIndex = 0;
+      this.totalAdsInBreak = tags.length;
+      if (this.config.debugAdTiming) {
+        console.log(
+          "[StormcloudVideoPlayer] Using scheduled VAST tag:",
+          vastTagUrl
+        );
+      }
+    } else {
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] No VAST tag available for ad");
+      }
+      return;
+    }
+    if (vastTagUrl) {
+      this.showAds = true;
+      this.currentAdIndex++;
+      await this.playSingleAd(vastTagUrl);
+    }
+    if (this.expectedAdBreakDurationMs == null && scheduled?.durationMs != null) {
+      this.expectedAdBreakDurationMs = scheduled.durationMs;
+      this.currentAdBreakStartWallClockMs = this.currentAdBreakStartWallClockMs ?? Date.now();
+      this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
+    }
+  }
+  findCurrentOrNextBreak(nowMs) {
+    const schedule = [];
+    let candidate;
+    for (const b of schedule) {
+      const tol = this.config.driftToleranceMs ?? 1e3;
+      if (b.startTimeMs <= nowMs + tol && (candidate == null || b.startTimeMs > (candidate.startTimeMs || 0))) {
+        candidate = b;
+      }
+    }
+    return candidate;
+  }
+  onTimeUpdate(currentTimeSec) {
+    if (this.ima.isAdPlaying()) return;
+    const nowMs = currentTimeSec * 1e3;
+    const breakToPlay = this.findBreakForTime(nowMs);
+    if (breakToPlay) {
+      this.handleMidAdJoin(breakToPlay, nowMs);
+    }
+  }
+  async handleMidAdJoin(adBreak, nowMs) {
+    const durationMs = adBreak.durationMs ?? 0;
+    const endMs = adBreak.startTimeMs + durationMs;
+    if (durationMs > 0 && nowMs > adBreak.startTimeMs && nowMs < endMs) {
+      const remainingMs = endMs - nowMs;
+      const tags = this.selectVastTagsForBreak(adBreak) || (this.apiVastTagUrl ? [this.apiVastTagUrl] : void 0);
+      if (tags && tags.length > 0) {
+        const first = tags[0];
+        const rest = tags.slice(1);
+        this.adPodQueue = rest;
+        await this.playSingleAd(first);
+        this.inAdBreak = true;
+        this.expectedAdBreakDurationMs = remainingMs;
+        this.currentAdBreakStartWallClockMs = Date.now();
+        this.scheduleAdStopCountdown(remainingMs);
+      }
+    }
+  }
+  scheduleAdStopCountdown(remainingMs) {
+    this.clearAdStopTimer();
+    const ms = Math.max(0, Math.floor(remainingMs));
+    if (ms === 0) {
+      this.ensureAdStoppedByTimer();
+      return;
+    }
+    this.adStopTimerId = window.setTimeout(() => {
+      this.ensureAdStoppedByTimer();
+    }, ms);
+  }
+  clearAdStopTimer() {
+    if (this.adStopTimerId != null) {
+      clearTimeout(this.adStopTimerId);
+      this.adStopTimerId = void 0;
+    }
+  }
+  ensureAdStoppedByTimer() {
+    if (!this.inAdBreak) return;
+    this.inAdBreak = false;
+    this.expectedAdBreakDurationMs = void 0;
+    this.currentAdBreakStartWallClockMs = void 0;
+    this.adStopTimerId = void 0;
+    if (this.ima.isAdPlaying()) {
+      this.ima.stop().catch(() => {
+      });
+    }
+  }
+  scheduleAdStartIn(delayMs) {
+    this.clearAdStartTimer();
+    const ms = Math.max(0, Math.floor(delayMs));
+    if (ms === 0) {
+      this.handleAdStart({ type: "start" }).catch(() => {
+      });
+      return;
+    }
+    this.adStartTimerId = window.setTimeout(() => {
+      this.handleAdStart({ type: "start" }).catch(() => {
+      });
+    }, ms);
+  }
+  clearAdStartTimer() {
+    if (this.adStartTimerId != null) {
+      clearTimeout(this.adStartTimerId);
+      this.adStartTimerId = void 0;
+    }
+  }
+  updatePtsDrift(ptsSecondsSample) {
+    const sampleMs = (this.video.currentTime - ptsSecondsSample) * 1e3;
+    if (!Number.isFinite(sampleMs) || Math.abs(sampleMs) > 6e4) return;
+    const alpha = 0.1;
+    this.ptsDriftEmaMs = this.ptsDriftEmaMs * (1 - alpha) + sampleMs * alpha;
+  }
+  async playSingleAd(vastTagUrl) {
+    if (this.config.debugAdTiming) {
+      console.log("[StormcloudVideoPlayer] Attempting to play ad:", vastTagUrl);
+    }
+    this.startAdFailsafeTimer();
+    try {
+      await this.ima.requestAds(vastTagUrl);
+      await this.ima.play();
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] Ad playback started successfully");
+      }
+    } catch (error) {
+      if (this.config.debugAdTiming) {
+        console.error("[StormcloudVideoPlayer] Ad playback failed:", error);
+      }
+      this.handleAdFailure();
+    }
+  }
+  handleAdFailure() {
+    if (this.config.debugAdTiming) {
+      console.log(
+        "[StormcloudVideoPlayer] Handling ad failure - resuming content"
+      );
+    }
+    this.inAdBreak = false;
+    this.expectedAdBreakDurationMs = void 0;
+    this.currentAdBreakStartWallClockMs = void 0;
+    this.clearAdStartTimer();
+    this.clearAdStopTimer();
+    this.clearAdFailsafeTimer();
+    this.adPodQueue = [];
+    this.showAds = false;
+    this.currentAdIndex = 0;
+    this.totalAdsInBreak = 0;
+    if (this.video.paused) {
+      this.video.play().catch(() => {
+        if (this.config.debugAdTiming) {
+          console.error(
+            "[StormcloudVideoPlayer] Failed to resume video after ad failure"
+          );
+        }
+      });
+    }
+  }
+  startAdFailsafeTimer() {
+    this.clearAdFailsafeTimer();
+    const failsafeMs = this.config.adFailsafeTimeoutMs ?? 1e4;
+    if (this.config.debugAdTiming) {
+      console.log(
+        `[StormcloudVideoPlayer] Starting failsafe timer (${failsafeMs}ms)`
+      );
+    }
+    this.adFailsafeTimerId = window.setTimeout(() => {
+      if (this.video.paused) {
+        if (this.config.debugAdTiming) {
+          console.warn(
+            "[StormcloudVideoPlayer] Failsafe timer triggered - forcing video resume"
+          );
+        }
+        this.handleAdFailure();
+      }
+    }, failsafeMs);
+  }
+  clearAdFailsafeTimer() {
+    if (this.adFailsafeTimerId != null) {
+      clearTimeout(this.adFailsafeTimerId);
+      this.adFailsafeTimerId = void 0;
+    }
+  }
+  selectVastTagsForBreak(b) {
+    if (!b || !b.vastTagUrl) return void 0;
+    if (b.vastTagUrl.includes(",")) {
+      return b.vastTagUrl.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+    }
+    return [b.vastTagUrl];
+  }
+  getRemainingAdMs() {
+    if (this.expectedAdBreakDurationMs == null || this.currentAdBreakStartWallClockMs == null)
+      return 0;
+    const elapsed = Date.now() - this.currentAdBreakStartWallClockMs;
+    return Math.max(0, this.expectedAdBreakDurationMs - elapsed);
+  }
+  findBreakForTime(nowMs) {
+    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)) {
+        return b;
+      }
+    }
+    return void 0;
+  }
+  toggleMute() {
+    if (this.ima.isAdPlaying()) {
+      const currentPerceptualState = this.isMuted();
+      const newMutedState = !currentPerceptualState;
+      this.ima.updateOriginalMutedState(newMutedState);
+      this.ima.setAdVolume(newMutedState ? 0 : 1);
+      if (this.config.debugAdTiming) {
+        console.log(
+          "[StormcloudVideoPlayer] Mute toggle during ad - immediately applied:",
+          newMutedState
+        );
+      }
+    } else {
+      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() {
+    if (this.ima.isAdPlaying()) {
+      const adVolume = this.ima.getAdVolume();
+      return adVolume === 0;
+    }
+    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();
+    this.clearAdFailsafeTimer();
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
+      this.heartbeatInterval = void 0;
+    }
+    this.hls?.destroy();
+    this.ima?.destroy();
+  }
+};
+
+// 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")}`;
+    };
+    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_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;
+      }
+      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_react.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_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 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();
+          }
+        }
+      };
+      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
+        );
+      };
+      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_react.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 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+              @keyframes spin {
+                from {
+                  transform: rotate(0deg);
+                }
+                to {
+                  transform: rotate(360deg);
+                }
+              }
+              
+              .stormcloud-video-wrapper:fullscreen {
+                border-radius: 0 !important;
+                box-shadow: none !important;
+                width: 100vw !important;
+                height: 100vh !important;
+                max-width: 100vw !important;
+                max-height: 100vh !important;
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
+                z-index: 999999 !important;
+                background: #000 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+              }
+              
+              .stormcloud-video-wrapper:has(*:fullscreen) {
+                border-radius: 0 !important;
+                box-shadow: none !important;
+                width: 100vw !important;
+                height: 100vh !important;
+                max-width: 100vw !important;
+                max-height: 100vh !important;
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
+                z-index: 999999 !important;
+                background: #000 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+              }
+              
+              *:fullscreen {
+                width: 100vw !important;
+                height: 100vh !important;
+                max-width: 100vw !important;
+                max-height: 100vh !important;
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
+                z-index: 999999 !important;
+                background: #000 !important;
+              }
+            ` }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: `stormcloud-video-wrapper ${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" : "auto",
+            minHeight: isFullscreen ? "100vh" : "auto",
+            maxWidth: isFullscreen ? "100vw" : "100%",
+            maxHeight: isFullscreen ? "100vh" : "none",
+            zIndex: isFullscreen ? 999999 : void 0,
+            backgroundColor: isFullscreen ? "#000" : void 0,
+            borderRadius: isFullscreen ? 0 : void 0,
+            boxShadow: isFullscreen ? "none" : void 0,
+            ...wrapperStyle
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "video",
+              {
+                ref: videoRef,
+                className,
+                style: {
+                  display: "block",
+                  width: "100%",
+                  height: isFullscreen ? "100%" : "auto",
+                  maxWidth: "100%",
+                  maxHeight: isFullscreen ? "100%" : "none",
+                  objectFit: isFullscreen ? "cover" : "contain",
+                  backgroundColor: "#000",
+                  aspectRatio: isFullscreen ? "unset" : void 0,
+                  ...style
+                },
+                controls: shouldShowNativeControls && controls && !showCustomControls,
+                playsInline,
+                preload,
+                poster,
+                ...restVideoAttrs,
+                children
+              }
+            ),
+            (isLoading || isBuffering) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  zIndex: 20,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.6) 100%)",
+                  width: "80px",
+                  height: "80px",
+                  borderRadius: "50%",
+                  backdropFilter: "blur(20px)",
+                  boxShadow: "0 12px 40px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1)"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_fa.FaSpinner,
+                  {
+                    size: 28,
+                    color: "white",
+                    style: {
+                      animation: "spin 1s linear infinite",
+                      filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8))"
+                    }
+                  }
+                )
+              }
+            ),
+            showCenterPlay && !isLoading && !isBuffering && !adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                onClick: handleCenterPlayClick,
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  zIndex: 15,
+                  cursor: "pointer",
+                  background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)",
+                  borderRadius: "50%",
+                  width: "100px",
+                  height: "100px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backdropFilter: "blur(20px)",
+                  border: "3px solid rgba(255, 255, 255, 0.8)",
+                  boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)",
+                  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+                },
+                onMouseEnter: (e) => {
+                  const target = e.currentTarget;
+                  target.style.transform = "translate(-50%, -50%) scale(1.1)";
+                  target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
+                  target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
+                  target.style.borderColor = "rgba(255, 255, 255, 0.9)";
+                },
+                onMouseLeave: (e) => {
+                  const target = e.currentTarget;
+                  target.style.transform = "translate(-50%, -50%) scale(1)";
+                  target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
+                  target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
+                  target.style.borderColor = "rgba(255, 255, 255, 0.8)";
+                },
+                title: "Play",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_fa.FaPlay,
+                  {
+                    size: 36,
+                    color: "white",
+                    style: {
+                      marginLeft: "6px",
+                      filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))"
+                    }
+                  }
+                )
+              }
+            ),
+            shouldShowEnhancedControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  background: "linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%)",
+                  padding: "20px 16px 16px",
+                  zIndex: 10
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        width: "100%",
+                        height: "8px",
+                        background: "linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%)",
+                        borderRadius: "8px",
+                        marginBottom: "16px",
+                        cursor: "pointer",
+                        position: "relative",
+                        backdropFilter: "blur(5px)",
+                        border: "1px solid rgba(255, 255, 255, 0.1)",
+                        boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.2)"
+                      },
+                      onClick: handleTimelineSeek,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "div",
+                          {
+                            style: {
+                              height: "100%",
+                              background: "linear-gradient(90deg, rgba(139, 92, 246, 0.9) 0%, rgba(59, 130, 246, 0.8) 50%, rgba(34, 197, 94, 0.9) 100%)",
+                              borderRadius: "8px",
+                              width: `${duration > 0 ? currentTime / duration * 100 : 0}%`,
+                              transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                              boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              top: "-6px",
+                              right: `${duration > 0 ? 100 - currentTime / duration * 100 : 100}%`,
+                              width: "20px",
+                              height: "20px",
+                              background: "linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.9) 100%)",
+                              borderRadius: "50%",
+                              border: "3px solid rgba(139, 92, 246, 0.8)",
+                              boxShadow: "0 4px 16px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+                              transform: "translateX(50%)",
+                              transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        color: "white"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "12px"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "button",
+                                {
+                                  onClick: handlePlayPause,
+                                  style: {
+                                    background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)",
+                                    backdropFilter: "blur(10px)",
+                                    border: "1px solid rgba(255, 255, 255, 0.2)",
+                                    color: "#ffffff",
+                                    cursor: "pointer",
+                                    padding: "12px",
+                                    borderRadius: "12px",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                                    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
+                                    minWidth: "48px",
+                                    minHeight: "48px"
+                                  },
+                                  onMouseEnter: (e) => {
+                                    const target = e.target;
+                                    target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%)";
+                                    target.style.transform = "translateY(-2px) scale(1.05)";
+                                    target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
+                                  },
+                                  onMouseLeave: (e) => {
+                                    const target = e.target;
+                                    target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
+                                    target.style.transform = "translateY(0) scale(1)";
+                                    target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                                  },
+                                  title: isPlaying ? "Pause" : "Play",
+                                  children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    import_fa.FaPause,
+                                    {
+                                      size: 20,
+                                      style: { filter: "drop-shadow(0 0 0 transparent)" }
+                                    }
+                                  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    import_fa.FaPlay,
+                                    {
+                                      size: 20,
+                                      style: { filter: "drop-shadow(0 0 0 transparent)" }
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "div",
+                                {
+                                  style: {
+                                    position: "relative",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    padding: "8px",
+                                    margin: "-8px"
+                                  },
+                                  onMouseEnter: () => setShowVolumeSlider(true),
+                                  onMouseLeave: () => setShowVolumeSlider(false),
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "button",
+                                      {
+                                        onClick: () => {
+                                          if (onVolumeToggle) {
+                                            onVolumeToggle();
+                                          } else if (playerRef.current) {
+                                            playerRef.current.toggleMute();
+                                          }
+                                        },
+                                        style: {
+                                          background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
+                                          backdropFilter: "blur(8px)",
+                                          border: "1px solid rgba(255, 255, 255, 0.15)",
+                                          color: isMuted ? "#ff6b6b" : "#ffffff",
+                                          cursor: "pointer",
+                                          padding: "10px",
+                                          borderRadius: "10px",
+                                          display: "flex",
+                                          alignItems: "center",
+                                          justifyContent: "center",
+                                          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                                          boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                                          minWidth: "40px",
+                                          minHeight: "40px"
+                                        },
+                                        onMouseEnter: (e) => {
+                                          const target = e.target;
+                                          target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
+                                          target.style.transform = "translateY(-1px) scale(1.03)";
+                                          target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                                        },
+                                        onMouseLeave: (e) => {
+                                          const target = e.target;
+                                          target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
+                                          target.style.transform = "translateY(0) scale(1)";
+                                          target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
+                                        },
+                                        title: isMuted ? "Unmute" : "Mute",
+                                        children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          import_fa.FaVolumeMute,
+                                          {
+                                            size: 16,
+                                            style: {
+                                              filter: "drop-shadow(0 0 0 transparent)"
+                                            }
+                                          }
+                                        ) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          import_fa.FaVolumeDown,
+                                          {
+                                            size: 16,
+                                            style: {
+                                              filter: "drop-shadow(0 0 0 transparent)"
+                                            }
+                                          }
+                                        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          import_fa.FaVolumeUp,
+                                          {
+                                            size: 16,
+                                            style: {
+                                              filter: "drop-shadow(0 0 0 transparent)"
+                                            }
+                                          }
+                                        )
+                                      }
+                                    ),
+                                    showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                        "div",
+                                        {
+                                          style: {
+                                            position: "absolute",
+                                            bottom: "100%",
+                                            left: "50%",
+                                            transform: "translateX(-50%)",
+                                            width: "60px",
+                                            height: "20px",
+                                            marginBottom: "-16px",
+                                            zIndex: 9
+                                          },
+                                          onMouseEnter: () => setShowVolumeSlider(true),
+                                          onMouseLeave: () => setShowVolumeSlider(false)
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                        "div",
+                                        {
+                                          style: {
+                                            position: "absolute",
+                                            bottom: "100%",
+                                            left: "50%",
+                                            transform: "translateX(-50%)",
+                                            marginBottom: "4px",
+                                            background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(20, 20, 20, 0.9) 100%)",
+                                            backdropFilter: "blur(15px)",
+                                            padding: "16px 12px",
+                                            borderRadius: "12px",
+                                            border: "1px solid rgba(255, 255, 255, 0.1)",
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            alignItems: "center",
+                                            height: "130px",
+                                            boxShadow: "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                                            zIndex: 10
+                                          },
+                                          onMouseEnter: () => setShowVolumeSlider(true),
+                                          onMouseLeave: () => setShowVolumeSlider(false),
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                            "input",
+                                            {
+                                              type: "range",
+                                              min: "0",
+                                              max: "1",
+                                              step: "0.01",
+                                              value: isMuted ? 0 : volume,
+                                              onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
+                                              style: {
+                                                writingMode: "bt-lr",
+                                                WebkitAppearance: "slider-vertical",
+                                                width: "6px",
+                                                height: "90px",
+                                                background: "linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%)",
+                                                borderRadius: "3px",
+                                                outline: "none",
+                                                cursor: "pointer"
+                                              }
+                                            }
+                                          )
+                                        }
+                                      )
+                                    ] })
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: "14px",
+                                    fontFamily: "monospace",
+                                    color: "rgba(255, 255, 255, 0.9)"
+                                  },
+                                  children: [
+                                    formatTime(currentTime),
+                                    " / ",
+                                    formatTime(duration)
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "12px"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "button",
+                                  {
+                                    onClick: () => setShowSpeedMenu(!showSpeedMenu),
+                                    style: {
+                                      background: "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)",
+                                      backdropFilter: "blur(8px)",
+                                      border: "1px solid rgba(255, 255, 255, 0.12)",
+                                      color: "#ffffff",
+                                      cursor: "pointer",
+                                      padding: "8px 14px",
+                                      borderRadius: "8px",
+                                      fontSize: "13px",
+                                      fontFamily: "monospace",
+                                      fontWeight: "600",
+                                      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                                      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)",
+                                      minWidth: "50px"
+                                    },
+                                    onMouseEnter: (e) => {
+                                      const target = e.target;
+                                      target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%)";
+                                      target.style.transform = "translateY(-1px) scale(1.02)";
+                                      target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
+                                    },
+                                    onMouseLeave: (e) => {
+                                      const target = e.target;
+                                      target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
+                                      target.style.transform = "translateY(0) scale(1)";
+                                      target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
+                                    },
+                                    title: "Playback Speed",
+                                    children: [
+                                      playbackRate,
+                                      "x"
+                                    ]
+                                  }
+                                ),
+                                showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "div",
+                                  {
+                                    style: {
+                                      position: "absolute",
+                                      bottom: "100%",
+                                      right: 0,
+                                      marginBottom: "12px",
+                                      background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
+                                      backdropFilter: "blur(20px)",
+                                      borderRadius: "12px",
+                                      border: "1px solid rgba(255, 255, 255, 0.1)",
+                                      overflow: "hidden",
+                                      minWidth: "90px",
+                                      boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
+                                    },
+                                    children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
+                                      (speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                        "button",
+                                        {
+                                          onClick: () => handlePlaybackRateChange(speed),
+                                          style: {
+                                            display: "block",
+                                            width: "100%",
+                                            padding: "10px 16px",
+                                            background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
+                                            border: "none",
+                                            color: "white",
+                                            cursor: "pointer",
+                                            fontSize: "13px",
+                                            fontFamily: "monospace",
+                                            fontWeight: "600",
+                                            textAlign: "center",
+                                            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                                            borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
+                                          },
+                                          onMouseEnter: (e) => {
+                                            if (playbackRate !== speed) {
+                                              e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
+                                            }
+                                          },
+                                          onMouseLeave: (e) => {
+                                            if (playbackRate !== speed) {
+                                              e.target.style.background = "transparent";
+                                            }
+                                          },
+                                          children: [
+                                            speed,
+                                            "x"
+                                          ]
+                                        },
+                                        speed
+                                      )
+                                    )
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "button",
+                                {
+                                  onClick: () => {
+                                    if (onFullscreenToggle) {
+                                      onFullscreenToggle();
+                                    } else if (playerRef.current) {
+                                      playerRef.current.toggleFullscreen().catch((err) => {
+                                        console.error("Fullscreen error:", err);
+                                      });
+                                    }
+                                  },
+                                  style: {
+                                    background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
+                                    backdropFilter: "blur(8px)",
+                                    border: "1px solid rgba(255, 255, 255, 0.15)",
+                                    color: "#ffffff",
+                                    cursor: "pointer",
+                                    padding: "10px",
+                                    borderRadius: "10px",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                                    boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                                    minWidth: "40px",
+                                    minHeight: "40px"
+                                  },
+                                  onMouseEnter: (e) => {
+                                    const target = e.target;
+                                    target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
+                                    target.style.transform = "translateY(-1px) scale(1.03)";
+                                    target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                                  },
+                                  onMouseLeave: (e) => {
+                                    const target = e.target;
+                                    target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
+                                    target.style.transform = "translateY(0) scale(1)";
+                                    target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
+                                  },
+                                  title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
+                                  children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    import_fa.FaCompress,
+                                    {
+                                      size: 16,
+                                      style: { filter: "drop-shadow(0 0 0 transparent)" }
+                                    }
+                                  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    import_fa.FaExpand,
+                                    {
+                                      size: 16,
+                                      style: { filter: "drop-shadow(0 0 0 transparent)" }
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) }) : showCustomControls && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: "10px",
+                  right: "10px",
+                  display: "flex",
+                  gap: "8px",
+                  zIndex: 10
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        padding: "8px",
+                        margin: "-8px"
+                      },
+                      onMouseEnter: () => setShowVolumeSlider(true),
+                      onMouseLeave: () => setShowVolumeSlider(false),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "button",
+                          {
+                            onClick: () => {
+                              if (onVolumeToggle) {
+                                onVolumeToggle();
+                              } else if (playerRef.current) {
+                                playerRef.current.toggleMute();
+                              }
+                            },
+                            onMouseEnter: (e) => {
+                              const target = e.currentTarget;
+                              target.style.transform = "translateY(-3px) scale(1.08)";
+                              target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
+                              target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
+                            },
+                            onMouseLeave: (e) => {
+                              const target = e.currentTarget;
+                              target.style.transform = "translateY(0) scale(1)";
+                              target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                              target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
+                            },
+                            style: {
+                              background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
+                              color: isMuted ? "#ff6b6b" : "#ffffff",
+                              border: "none",
+                              borderRadius: "16px",
+                              padding: "10px",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              backdropFilter: "blur(20px)",
+                              boxShadow: "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
+                              transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+                              minWidth: "44px",
+                              minHeight: "44px"
+                            },
+                            title: isMuted ? "Unmute" : "Mute",
+                            children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_fa.FaVolumeMute,
+                              {
+                                size: 16,
+                                style: {
+                                  filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
+                                  color: "#ffffff"
+                                }
+                              }
+                            ) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_fa.FaVolumeDown,
+                              {
+                                size: 16,
+                                style: {
+                                  filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
+                                  color: "#ffffff"
+                                }
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_fa.FaVolumeUp,
+                              {
+                                size: 16,
+                                style: {
+                                  filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
+                                  color: "#ffffff"
+                                }
+                              }
+                            )
+                          }
+                        ),
+                        showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                position: "absolute",
+                                bottom: "100%",
+                                left: "50%",
+                                transform: "translateX(-50%)",
+                                width: "60px",
+                                height: "20px",
+                                marginBottom: "-16px",
+                                zIndex: 9
+                              },
+                              onMouseEnter: () => setShowVolumeSlider(true),
+                              onMouseLeave: () => setShowVolumeSlider(false)
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                position: "absolute",
+                                bottom: "100%",
+                                left: "50%",
+                                transform: "translateX(-50%)",
+                                marginBottom: "4px",
+                                background: "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%)",
+                                backdropFilter: "blur(20px)",
+                                padding: "16px 12px",
+                                borderRadius: "12px",
+                                border: "2px solid rgba(255, 255, 255, 0.6)",
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                height: "130px",
+                                boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
+                                zIndex: 10
+                              },
+                              onMouseEnter: () => setShowVolumeSlider(true),
+                              onMouseLeave: () => setShowVolumeSlider(false),
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "input",
+                                {
+                                  type: "range",
+                                  min: "0",
+                                  max: "1",
+                                  step: "0.01",
+                                  value: isMuted ? 0 : volume,
+                                  onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
+                                  style: {
+                                    writingMode: "bt-lr",
+                                    WebkitAppearance: "slider-vertical",
+                                    width: "6px",
+                                    height: "90px",
+                                    background: "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%)",
+                                    borderRadius: "3px",
+                                    outline: "none",
+                                    cursor: "pointer",
+                                    border: "1px solid rgba(255, 255, 255, 0.3)"
+                                  }
+                                }
+                              )
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.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(-3px) scale(1.08)";
+                        target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
+                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
+                      },
+                      onMouseLeave: (e) => {
+                        const target = e.currentTarget;
+                        target.style.transform = "translateY(0) scale(1)";
+                        target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
+                      },
+                      style: {
+                        background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
+                        color: "#ffffff",
+                        border: "none",
+                        borderRadius: "16px",
+                        padding: "10px",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        backdropFilter: "blur(20px)",
+                        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
+                        transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+                        minWidth: "44px",
+                        minHeight: "44px"
+                      },
+                      title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
+                      children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_fa.FaCompress,
+                        {
+                          size: 16,
+                          style: {
+                            filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
+                            color: "#ffffff"
+                          }
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_fa.FaExpand,
+                        {
+                          size: 16,
+                          style: {
+                            filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
+                            color: "#ffffff"
+                          }
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            onControlClick && /* @__PURE__ */ (0, import_jsx_runtime.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;
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StormcloudVideoPlayerComponent
+});
+//# sourceMappingURL=StormcloudVideoPlayer.cjs.map