stormcloud-video-player 0.1.0

package/src/sdk/ima.ts

@@ -0,0 +1,369 @@
+import type { ImaController } from "../types";
+
+declare global {
+  interface Window {
+    google?: any;
+  }
+}
+
+export function createImaController(video: HTMLVideoElement): ImaController {
+  let adPlaying = false;
+  const listeners = new Map<string, Set<(payload?: any) => void>>();
+
+  function emit(event: string, payload?: any): void {
+    const set = listeners.get(event);
+    if (!set) return;
+    for (const fn of Array.from(set)) {
+      try {
+        fn(payload);
+      } catch {}
+    }
+  }
+
+  function ensureImaLoaded(): Promise<void> {
+    try {
+      const frameEl = window.frameElement as HTMLIFrameElement | null;
+      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) {
+          // eslint-disable-next-line no-console
+          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"]'
+    ) as HTMLScriptElement | null;
+    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: any | undefined;
+  let adsLoader: any | undefined;
+  let adDisplayContainer: any | undefined;
+  let adContainerEl: HTMLDivElement | undefined;
+  let lastAdTagUrl: string | undefined;
+  let retryAttempts = 0;
+  const maxRetries = 2;
+  const backoffBaseMs = 500;
+  let adsLoadedPromise: Promise<void> | undefined;
+  let adsLoadedResolve: (() => void) | undefined;
+  let adsLoadedReject: ((error: Error) => void) | undefined;
+
+  function makeAdsRequest(google: any, vastTagUrl: string) {
+    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.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: string) {
+      console.log("[IMA] Requesting ads:", vastTagUrl);
+
+      adsLoadedPromise = new Promise<void>((resolve, reject) => {
+        adsLoadedResolve = resolve;
+        adsLoadedReject = reject;
+
+        setTimeout(() => {
+          if (adsLoadedReject) {
+            adsLoadedReject(new Error("Ad request timeout"));
+            adsLoadedReject = undefined;
+            adsLoadedResolve = undefined;
+          }
+        }, 10000);
+      });
+
+      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.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: any) => {
+              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: any) => {
+                    console.error("[IMA] Ad error:", errorEvent.getError());
+                    try {
+                      adsManager?.destroy?.();
+                    } catch {}
+                    adPlaying = false;
+                    if (adContainerEl)
+                      adContainerEl.style.pointerEvents = "none";
+
+                    if (adsLoadedReject) {
+                      adsLoadedReject(new Error("Ad playback error"));
+                      adsLoadedReject = undefined;
+                      adsLoadedResolve = undefined;
+                    }
+
+                    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");
+                    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;
+                    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;
+                  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 = undefined;
+                  adsLoadedReject = undefined;
+                }
+              } catch (e) {
+                console.error("[IMA] Error setting up ads manager:", e);
+                adPlaying = false;
+                if (adContainerEl) adContainerEl.style.pointerEvents = "none";
+                video.play().catch(() => {});
+
+                if (adsLoadedReject) {
+                  adsLoadedReject(new Error("Failed to setup ads manager"));
+                  adsLoadedReject = undefined;
+                  adsLoadedResolve = undefined;
+                }
+                emit("ad_error");
+              }
+            },
+            false
+          );
+
+          adsLoader.addEventListener(
+            google.ima.AdErrorEvent.Type.AD_ERROR,
+            (adErrorEvent: any) => {
+              console.error("[IMA] Ads loader error:", adErrorEvent.getError());
+
+              if (adsLoadedReject) {
+                adsLoadedReject(new Error("Ads loader error"));
+                adsLoadedReject = undefined;
+                adsLoadedResolve = undefined;
+              }
+              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 as Error);
+          adsLoadedReject = undefined;
+          adsLoadedResolve = undefined;
+        }
+        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;
+      try {
+        adsManager?.stop?.();
+      } catch {}
+      video.play().catch(() => {});
+    },
+    destroy() {
+      try {
+        adsManager?.destroy?.();
+      } catch {}
+      adPlaying = false;
+      try {
+        adsLoader?.destroy?.();
+      } catch {}
+      if (adContainerEl?.parentElement) {
+        adContainerEl.parentElement.removeChild(adContainerEl);
+      }
+    },
+    isAdPlaying() {
+      return adPlaying;
+    },
+    on(event: string, listener: (payload?: any) => void) {
+      if (!listeners.has(event)) listeners.set(event, new Set());
+      listeners.get(event)!.add(listener);
+    },
+    off(event: string, listener: (payload?: any) => void) {
+      listeners.get(event)?.delete(listener);
+    },
+  };
+}

package/src/types.ts

@@ -0,0 +1,124 @@
+export type LateJoinPolicy = "play_remaining" | "skip_to_content";
+
+export interface AdBreak {
+  id?: string;
+  startTimeMs: number;
+  durationMs?: number;
+  vastTagUrl?: string;
+}
+
+export interface AdSchedule {
+  breaks: AdBreak[];
+  lateJoinPolicy?: LateJoinPolicy;
+}
+
+export interface StormcloudVideoPlayerConfig {
+  videoElement: HTMLVideoElement;
+  src: string;
+  autoplay?: boolean;
+  muted?: boolean;
+  allowNativeHls?: boolean;
+  adSchedule?: AdSchedule;
+  lowLatencyMode?: boolean;
+  driftToleranceMs?: number;
+  immediateManifestAds?: boolean;
+  debugAdTiming?: boolean;
+  adFailsafeTimeoutMs?: number;
+  showCustomControls?: boolean;
+  onVolumeToggle?: () => void;
+  onFullscreenToggle?: () => void;
+  onControlClick?: () => void;
+}
+
+export interface Scte35Marker {
+  type: "start" | "end" | "progress";
+  ptsSeconds?: number;
+  durationSeconds?: number;
+  raw?: unknown;
+}
+
+export interface Id3TagInfo {
+  key: string;
+  value: string | Uint8Array;
+  ptsSeconds?: number;
+}
+
+export interface ImaController {
+  initialize: () => void;
+  requestAds: (vastTagUrl: string) => Promise<void>;
+  play: () => Promise<void>;
+  stop: () => Promise<void>;
+  destroy: () => void;
+  isAdPlaying: () => boolean;
+  on: (event: string, listener: (payload?: any) => void) => void;
+  off: (event: string, listener: (payload?: any) => void) => void;
+}
+
+export interface ImaControllerOptions {
+  maxRetries?: number;
+  backoffBaseMs?: number;
+}
+
+export interface StormcloudApiResponse {
+  response: {
+    ima: {
+      "publisherdesk.ima": {
+        payload: string;
+      };
+    };
+    options: {
+      vast: {
+        cue_tones?: {
+          number_ads: number;
+        };
+        timer_vod?: {
+          interval: number;
+          number_ads: number;
+        };
+      };
+    };
+  };
+}
+
+export interface ClientInfo {
+  brand: string;
+  os: string;
+  model: string;
+  deviceType: "tv" | "mobile" | "tablet" | "desktop";
+  isSmartTV: boolean;
+  isAndroid: boolean;
+  isWebView: boolean;
+  isWebApp: boolean;
+  domain: string;
+  origin: string;
+  path: string;
+  userAgent: string;
+  vendor: string;
+  platform: string;
+  screen: {
+    width?: number;
+    height?: number;
+    availWidth?: number;
+    availHeight?: number;
+    orientation?: string;
+    pixelDepth?: number;
+  };
+  hardwareConcurrency: number;
+  deviceMemory: number | null;
+  maxTouchPoints: number;
+  language: string;
+  languages: string;
+  cookieEnabled: boolean;
+  doNotTrack: string;
+  referrer: string;
+  visibilityState: string;
+}
+
+export interface TrackingData extends ClientInfo {
+  browserId: string;
+}
+
+export interface HeartbeatData {
+  browserId: string;
+  timestamp: string;
+}