stormcloud-video-player 0.1.0

package/src/player/StormcloudVideoPlayer.ts

@@ -0,0 +1,1124 @@
+import Hls from "hls.js";
+import type {
+  StormcloudVideoPlayerConfig,
+  Scte35Marker,
+  Id3TagInfo,
+  ImaController,
+  AdBreak,
+  AdSchedule,
+  StormcloudApiResponse,
+} from "../types";
+import { createImaController } from "../sdk/ima";
+import { sendInitialTracking, sendHeartbeat } from "../utils/tracking";
+
+export class StormcloudVideoPlayer {
+  private readonly video: HTMLVideoElement;
+  private readonly config: StormcloudVideoPlayerConfig;
+  private hls?: Hls;
+  private ima: ImaController;
+  private attached = false;
+  private adSchedule: AdSchedule | undefined;
+  private inAdBreak = false;
+  private currentAdBreakStartWallClockMs: number | undefined;
+  private expectedAdBreakDurationMs: number | undefined;
+  private adStopTimerId: number | undefined;
+  private adStartTimerId: number | undefined;
+  private adFailsafeTimerId: number | undefined;
+  private ptsDriftEmaMs = 0;
+  private adPodQueue: string[] = [];
+  private apiVastTagUrl: string | undefined;
+  private vastConfig:
+    | StormcloudApiResponse["response"]["options"]["vast"]
+    | undefined;
+  private lastHeartbeatTime: number = 0;
+  private heartbeatInterval: number | undefined;
+  private currentAdIndex: number = 0;
+  private totalAdsInBreak: number = 0;
+  private showAds: boolean = false;
+
+  constructor(config: StormcloudVideoPlayerConfig) {
+    this.config = config;
+    this.video = config.videoElement;
+    this.adSchedule = config.adSchedule;
+    this.ima = createImaController(this.video);
+  }
+
+  async load(): Promise<void> {
+    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 Hls({
+      enableWorker: true,
+      backBufferLength: 30,
+      liveDurationInfinity: true,
+      lowLatencyMode: !!this.config.lowLatencyMode,
+      maxLiveSyncPlaybackRate: this.config.lowLatencyMode ? 1.5 : 1.0,
+      ...(this.config.lowLatencyMode ? { liveSyncDuration: 2 } : {}),
+    });
+
+    this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+      this.hls?.loadSource(this.config.src);
+    });
+
+    this.hls.on(Hls.Events.MANIFEST_PARSED, async () => {
+      if (this.config.autoplay) {
+        await this.video.play().catch(() => {});
+      }
+    });
+
+    this.hls.on(Hls.Events.FRAG_PARSING_METADATA, (_evt, data: any) => {
+      const id3Tags: Id3TagInfo[] = (data?.samples || []).map((s: any) => ({
+        key: "ID3",
+        value: s?.data,
+        ptsSeconds: s?.pts,
+      }));
+      id3Tags.forEach((tag) => this.onId3Tag(tag));
+    });
+
+    this.hls.on(Hls.Events.FRAG_CHANGED, (_evt, data: any) => {
+      const frag = data?.frag;
+      const tagList: any[] | undefined = 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: Scte35Marker = {
+            type: "start",
+            ...(durationSeconds !== undefined ? { durationSeconds } : {}),
+            raw: { tag, value },
+          } as Scte35Marker;
+          this.onScte35Marker(marker);
+        } else if (tag.includes("EXT-X-CUE-OUT-CONT")) {
+          const prog = this.parseCueOutCont(value);
+          const marker: Scte35Marker = {
+            type: "progress",
+            ...(prog?.duration !== undefined
+              ? { durationSeconds: prog.duration }
+              : {}),
+            ...(prog?.elapsed !== undefined
+              ? { ptsSeconds: prog.elapsed }
+              : {}),
+            raw: { tag, value },
+          } as Scte35Marker;
+          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"] !== undefined;
+          const hasScteIn =
+            "SCTE35-IN" in attrs || attrs["SCTE35-IN"] !== undefined;
+          const klass = String(attrs["CLASS"] ?? "");
+          const duration = this.toNumber(attrs["DURATION"]);
+
+          if (hasScteOut || /com\.apple\.hls\.cue/i.test(klass)) {
+            const marker: Scte35Marker = {
+              type: "start",
+              ...(duration !== undefined ? { durationSeconds: duration } : {}),
+              raw: { tag, value, attrs },
+            } as Scte35Marker;
+            this.onScte35Marker(marker);
+          }
+          if (hasScteIn) {
+            this.onScte35Marker({ type: "end", raw: { tag, value, attrs } });
+          }
+        }
+      }
+    });
+
+    this.hls.on(Hls.Events.ERROR, (_evt, data) => {
+      if (data?.fatal) {
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            this.hls?.startLoad();
+            break;
+          case Hls.ErrorTypes.MEDIA_ERROR:
+            this.hls?.recoverMediaError();
+            break;
+          default:
+            this.destroy();
+            break;
+        }
+      }
+    });
+
+    this.hls.attachMedia(this.video);
+  }
+
+  private attach(): void {
+    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);
+    });
+  }
+
+  private shouldUseNativeHls(): boolean {
+    const canNative = this.video.canPlayType("application/vnd.apple.mpegURL");
+    return !!(this.config.allowNativeHls && canNative);
+  }
+
+  private onId3Tag(tag: Id3TagInfo): void {
+    if (typeof tag.ptsSeconds === "number") {
+      this.updatePtsDrift(tag.ptsSeconds);
+    }
+    const marker = this.parseScte35FromId3(tag);
+    if (marker) {
+      this.onScte35Marker(marker);
+    }
+  }
+
+  private parseScte35FromId3(tag: Id3TagInfo): Scte35Marker | undefined {
+    const text = this.decodeId3ValueToText(tag.value);
+    if (!text) return undefined;
+
+    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: Scte35Marker = {
+        type: "start",
+        ...(tag.ptsSeconds !== undefined ? { ptsSeconds: tag.ptsSeconds } : {}),
+        ...(dur !== undefined ? { durationSeconds: dur } : {}),
+        raw: { id3: text },
+      } as Scte35Marker;
+      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: Scte35Marker = {
+        type: "progress",
+        ...(tag.ptsSeconds !== undefined ? { ptsSeconds: tag.ptsSeconds } : {}),
+        ...(cont?.duration !== undefined
+          ? { durationSeconds: cont.duration }
+          : {}),
+        raw: { id3: text },
+      } as Scte35Marker;
+      return marker;
+    }
+
+    const cueInMatch = text.match(/EXT-X-CUE-IN\b/i) || text.match(/CUE-IN\b/i);
+    if (cueInMatch) {
+      const marker: Scte35Marker = {
+        type: "end",
+        ...(tag.ptsSeconds !== undefined ? { ptsSeconds: tag.ptsSeconds } : {}),
+        raw: { id3: text },
+      } as Scte35Marker;
+      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"] !== undefined;
+      const hasScteIn =
+        "SCTE35-IN" in attrs || attrs["SCTE35-IN"] !== undefined;
+      const klass = String(attrs["CLASS"] ?? "");
+      const duration = this.toNumber(attrs["DURATION"]);
+      if (hasScteOut || /com\.apple\.hls\.cue/i.test(klass)) {
+        const marker: Scte35Marker = {
+          type: "start",
+          ...(tag.ptsSeconds !== undefined
+            ? { ptsSeconds: tag.ptsSeconds }
+            : {}),
+          ...(duration !== undefined ? { durationSeconds: duration } : {}),
+          raw: { id3: text, attrs },
+        } as Scte35Marker;
+        return marker;
+      }
+      if (hasScteIn) {
+        const marker: Scte35Marker = {
+          type: "end",
+          ...(tag.ptsSeconds !== undefined
+            ? { ptsSeconds: tag.ptsSeconds }
+            : {}),
+          raw: { id3: text, attrs },
+        } as Scte35Marker;
+        return marker;
+      }
+    }
+
+    if (/SCTE35-OUT/i.test(text)) {
+      const marker: Scte35Marker = {
+        type: "start",
+        ...(tag.ptsSeconds !== undefined ? { ptsSeconds: tag.ptsSeconds } : {}),
+        raw: { id3: text },
+      } as Scte35Marker;
+      return marker;
+    }
+    if (/SCTE35-IN/i.test(text)) {
+      const marker: Scte35Marker = {
+        type: "end",
+        ...(tag.ptsSeconds !== undefined ? { ptsSeconds: tag.ptsSeconds } : {}),
+        raw: { id3: text },
+      } as Scte35Marker;
+      return marker;
+    }
+
+    if (tag.value instanceof Uint8Array) {
+      const bin = this.parseScte35Binary(tag.value);
+      if (bin) return bin;
+    }
+
+    return undefined;
+  }
+
+  private decodeId3ValueToText(value: string | Uint8Array): string | undefined {
+    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 undefined;
+    }
+  }
+
+  private onScte35Marker(marker: Scte35Marker): void {
+    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 * 1000
+          : undefined;
+      this.expectedAdBreakDurationMs = durationMs;
+      this.currentAdBreakStartWallClockMs = Date.now();
+
+      const policy = this.adSchedule?.lateJoinPolicy ?? "play_remaining";
+      if (policy !== "skip_to_content") {
+        const isManifestMarker = this.isManifestBasedMarker(marker);
+        const forceImmediate = this.config.immediateManifestAds ?? true; // Default to true for better UX
+
+        if (this.config.debugAdTiming) {
+          console.log("[StormcloudVideoPlayer] Ad start decision:", {
+            isManifestMarker,
+            forceImmediate,
+            hasPts: typeof marker.ptsSeconds === "number",
+            policy,
+          });
+        }
+
+        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 ?? 1000;
+          const nowMs = this.video.currentTime * 1000;
+          const estCurrentPtsMs = nowMs - this.ptsDriftEmaMs;
+          const deltaMs = Math.floor(
+            marker.ptsSeconds * 1000 - estCurrentPtsMs
+          );
+
+          if (this.config.debugAdTiming) {
+            console.log(
+              "[StormcloudVideoPlayer] PTS-based timing calculation:",
+              {
+                nowMs,
+                estCurrentPtsMs,
+                markerPtsMs: marker.ptsSeconds * 1000,
+                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 * 1000;
+      }
+      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 policy = this.adSchedule?.lateJoinPolicy ?? "play_remaining";
+        const scheduled = this.findCurrentOrNextBreak(
+          this.video.currentTime * 1000
+        );
+        const tags =
+          this.selectVastTagsForBreak(scheduled) ||
+          (this.apiVastTagUrl ? [this.apiVastTagUrl] : undefined);
+        if (policy === "play_remaining" && tags && tags.length > 0) {
+          const first = tags[0] as string;
+          const rest = tags.slice(1);
+          this.adPodQueue = rest;
+          this.playSingleAd(first).catch(() => {});
+        }
+      }
+      return;
+    }
+    if (marker.type === "end") {
+      this.inAdBreak = false;
+      this.expectedAdBreakDurationMs = undefined;
+      this.currentAdBreakStartWallClockMs = undefined;
+      this.clearAdStartTimer();
+      this.clearAdStopTimer();
+      if (this.ima.isAdPlaying()) {
+        this.ima.stop().catch(() => {});
+      }
+      return;
+    }
+  }
+
+  private parseCueOutDuration(value: string): number | undefined {
+    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) ? undefined : d;
+    }
+    return undefined;
+  }
+
+  private parseCueOutCont(
+    value: string
+  ): { elapsed?: number; duration?: number } | undefined {
+    const elapsedMatch = value.match(/Elapsed\s*=\s*([0-9.]+)/i);
+    const durationMatch = value.match(/Duration\s*=\s*([0-9.]+)/i);
+    const res: { elapsed?: number; duration?: number } = {};
+    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 undefined;
+  }
+
+  private parseAttributeList(value: string): Record<string, string> {
+    const attrs: Record<string, string> = {};
+    const regex = /([A-Z0-9-]+)=(("[^"]*")|([^",]*))(?:,|$)/gi;
+    let match: RegExpExecArray | null;
+    while ((match = regex.exec(value)) !== null) {
+      const key: string = (match[1] ?? "") as string;
+      let rawVal: string = (match[3] ?? match[4] ?? "") as string;
+      if (rawVal.startsWith('"') && rawVal.endsWith('"')) {
+        rawVal = rawVal.slice(1, -1);
+      }
+      if (key) {
+        attrs[key] = rawVal;
+      }
+    }
+    return attrs;
+  }
+
+  private toNumber(val: unknown): number | undefined {
+    if (val == null) return undefined;
+    const n = typeof val === "string" ? parseFloat(val) : Number(val);
+    return Number.isNaN(n) ? undefined : n;
+  }
+
+  private isManifestBasedMarker(marker: Scte35Marker): boolean {
+    const raw = marker.raw as any;
+    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;
+  }
+
+  private parseScte35Binary(data: Uint8Array): Scte35Marker | undefined {
+    class BitReader {
+      private bytePos = 0;
+      private bitPos = 0; // 0..7
+      constructor(private readonly buf: Uint8Array) {}
+      readBits(numBits: number): number {
+        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) & 0xff;
+          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: number): void {
+        this.readBits(n);
+      }
+    }
+
+    const r = new BitReader(data);
+    const tableId = r.readBits(8);
+    if (tableId !== 0xfc) return undefined;
+    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 undefined;
+    }
+    r.readBits(32);
+    const cancel = r.readBits(1) === 1;
+    r.readBits(7);
+    if (cancel) return undefined;
+    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: number | undefined = undefined;
+    if (durationFlag) {
+      r.readBits(6);
+      r.readBits(1);
+      const high = r.readBits(1);
+      const low = r.readBits(32);
+      const durationTicks = high * 0x100000000 + low;
+      durationSeconds = durationTicks / 90000;
+    }
+    r.readBits(16);
+    r.readBits(8);
+    r.readBits(8);
+
+    if (outOfNetwork) {
+      const marker: Scte35Marker = {
+        type: "start",
+        ...(durationSeconds !== undefined ? { durationSeconds } : {}),
+        raw: { splice_command_type: 5 },
+      } as Scte35Marker;
+      return marker;
+    }
+    return undefined;
+  }
+
+  private initializeTracking(): void {
+    sendInitialTracking().catch((error) => {
+      if (this.config.debugAdTiming) {
+        console.warn(
+          "[StormcloudVideoPlayer] Failed to send initial tracking:",
+          error
+        );
+      }
+    });
+
+    this.heartbeatInterval = window.setInterval(() => {
+      this.sendHeartbeatIfNeeded();
+    }, 1000);
+  }
+
+  private sendHeartbeatIfNeeded(): void {
+    const now = Date.now();
+    if (!this.lastHeartbeatTime || now - this.lastHeartbeatTime > 10000) {
+      this.lastHeartbeatTime = now;
+      sendHeartbeat().catch((error) => {
+        if (this.config.debugAdTiming) {
+          console.warn(
+            "[StormcloudVideoPlayer] Failed to send heartbeat:",
+            error
+          );
+        }
+      });
+    }
+  }
+
+  private async fetchAdConfiguration(): Promise<void> {
+    const apiUrl =
+      "https://stormcloud.co/api-stormcloud-dev/stormcloud/ads/web";
+
+    if (this.config.debugAdTiming) {
+      console.log(
+        "[StormcloudVideoPlayer] Fetching ad configuration from:",
+        apiUrl
+      );
+    }
+
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ad configuration: ${response.status}`);
+    }
+
+    const data: StormcloudApiResponse = 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,
+      });
+    }
+  }
+
+  setAdSchedule(schedule: AdSchedule | undefined): void {
+    this.adSchedule = schedule;
+  }
+
+  getCurrentAdIndex(): number {
+    return this.currentAdIndex;
+  }
+
+  getTotalAdsInBreak(): number {
+    return this.totalAdsInBreak;
+  }
+
+  isAdPlaying(): boolean {
+    return this.inAdBreak && this.ima.isAdPlaying();
+  }
+
+  isShowingAds(): boolean {
+    return this.showAds;
+  }
+
+  getStreamType(): "hls" | "other" {
+    const url = this.config.src.toLowerCase();
+    if (
+      url.includes(".m3u8") ||
+      url.includes("/hls/") ||
+      url.includes("application/vnd.apple.mpegurl")
+    ) {
+      return "hls";
+    }
+    return "other";
+  }
+
+  shouldShowNativeControls(): boolean {
+    return this.getStreamType() !== "hls";
+  }
+
+  async loadAdScheduleFromUrl(url: string): Promise<void> {
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`Failed to fetch ad schedule: ${res.status}`);
+    const data = await res.json();
+    this.adSchedule = data as AdSchedule;
+  }
+
+  async loadDefaultVastFromAiry(
+    airyApiUrl: string,
+    params?: Record<string, string>
+  ): Promise<void> {
+    const usp = new URLSearchParams(params || {});
+    const url = `${airyApiUrl}?${usp.toString()}`;
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`Failed to fetch Airy 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;
+    }
+  }
+
+  private async handleAdStart(_marker: Scte35Marker): Promise<void> {
+    const scheduled = this.findCurrentOrNextBreak(
+      this.video.currentTime * 1000
+    );
+    const tags = this.selectVastTagsForBreak(scheduled);
+
+    let vastTagUrl: string | undefined;
+    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] as string;
+      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);
+    }
+  }
+
+  private findCurrentOrNextBreak(nowMs: number): AdBreak | undefined {
+    const schedule = this.adSchedule?.breaks || [];
+    let candidate: AdBreak | undefined;
+    for (const b of schedule) {
+      const tol = this.config.driftToleranceMs ?? 1000;
+      if (
+        b.startTimeMs <= nowMs + tol &&
+        (candidate == null || b.startTimeMs > (candidate.startTimeMs || 0))
+      ) {
+        candidate = b;
+      }
+    }
+    return candidate;
+  }
+
+  private onTimeUpdate(currentTimeSec: number): void {
+    if (!this.adSchedule || this.ima.isAdPlaying()) return;
+    const nowMs = currentTimeSec * 1000;
+    const breakToPlay = this.findBreakForTime(nowMs);
+    if (breakToPlay) {
+      this.handleMidAdJoin(breakToPlay, nowMs);
+    }
+  }
+
+  private async handleMidAdJoin(
+    adBreak: AdBreak,
+    nowMs: number
+  ): Promise<void> {
+    const durationMs = adBreak.durationMs ?? 0;
+    const endMs = adBreak.startTimeMs + durationMs;
+    if (durationMs > 0 && nowMs > adBreak.startTimeMs && nowMs < endMs) {
+      const remainingMs = endMs - nowMs;
+      const policy = this.adSchedule?.lateJoinPolicy ?? "play_remaining";
+      if (policy === "skip_to_content") return;
+      const tags =
+        this.selectVastTagsForBreak(adBreak) ||
+        (this.apiVastTagUrl ? [this.apiVastTagUrl] : undefined);
+      if (policy === "play_remaining" && tags && tags.length > 0) {
+        const first = tags[0] as string;
+        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);
+      }
+    }
+  }
+
+  private scheduleAdStopCountdown(remainingMs: number): void {
+    this.clearAdStopTimer();
+    const ms = Math.max(0, Math.floor(remainingMs));
+    if (ms === 0) {
+      this.ensureAdStoppedByTimer();
+      return;
+    }
+    this.adStopTimerId = window.setTimeout(() => {
+      this.ensureAdStoppedByTimer();
+    }, ms) as unknown as number;
+  }
+
+  private clearAdStopTimer(): void {
+    if (this.adStopTimerId != null) {
+      clearTimeout(this.adStopTimerId);
+      this.adStopTimerId = undefined;
+    }
+  }
+
+  private ensureAdStoppedByTimer(): void {
+    if (!this.inAdBreak) return;
+    this.inAdBreak = false;
+    this.expectedAdBreakDurationMs = undefined;
+    this.currentAdBreakStartWallClockMs = undefined;
+    this.adStopTimerId = undefined;
+    if (this.ima.isAdPlaying()) {
+      this.ima.stop().catch(() => {});
+    }
+  }
+
+  private scheduleAdStartIn(delayMs: number): void {
+    this.clearAdStartTimer();
+    const ms = Math.max(0, Math.floor(delayMs));
+    if (ms === 0) {
+      this.handleAdStart({ type: "start" } as Scte35Marker).catch(() => {});
+      return;
+    }
+    this.adStartTimerId = window.setTimeout(() => {
+      this.handleAdStart({ type: "start" } as Scte35Marker).catch(() => {});
+    }, ms) as unknown as number;
+  }
+
+  private clearAdStartTimer(): void {
+    if (this.adStartTimerId != null) {
+      clearTimeout(this.adStartTimerId);
+      this.adStartTimerId = undefined;
+    }
+  }
+
+  private updatePtsDrift(ptsSecondsSample: number): void {
+    const sampleMs = (this.video.currentTime - ptsSecondsSample) * 1000;
+    if (!Number.isFinite(sampleMs) || Math.abs(sampleMs) > 60000) return;
+    const alpha = 0.1;
+    this.ptsDriftEmaMs = this.ptsDriftEmaMs * (1 - alpha) + sampleMs * alpha;
+  }
+
+  private async playSingleAd(vastTagUrl: string): Promise<void> {
+    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();
+    }
+  }
+
+  private handleAdFailure(): void {
+    if (this.config.debugAdTiming) {
+      console.log(
+        "[StormcloudVideoPlayer] Handling ad failure - resuming content"
+      );
+    }
+
+    this.inAdBreak = false;
+    this.expectedAdBreakDurationMs = undefined;
+    this.currentAdBreakStartWallClockMs = undefined;
+    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"
+          );
+        }
+      });
+    }
+  }
+
+  private startAdFailsafeTimer(): void {
+    this.clearAdFailsafeTimer();
+
+    const failsafeMs = this.config.adFailsafeTimeoutMs ?? 10000;
+
+    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) as unknown as number;
+  }
+
+  private clearAdFailsafeTimer(): void {
+    if (this.adFailsafeTimerId != null) {
+      clearTimeout(this.adFailsafeTimerId);
+      this.adFailsafeTimerId = undefined;
+    }
+  }
+
+  private selectVastTagsForBreak(b?: AdBreak): string[] | undefined {
+    if (!b || !b.vastTagUrl) return undefined;
+    if (b.vastTagUrl.includes(",")) {
+      return b.vastTagUrl
+        .split(",")
+        .map((s) => s.trim())
+        .filter((s) => s.length > 0);
+    }
+    return [b.vastTagUrl];
+  }
+
+  private getRemainingAdMs(): number {
+    if (
+      this.expectedAdBreakDurationMs == null ||
+      this.currentAdBreakStartWallClockMs == null
+    )
+      return 0;
+    const elapsed = Date.now() - this.currentAdBreakStartWallClockMs;
+    return Math.max(0, this.expectedAdBreakDurationMs - elapsed);
+  }
+
+  private findBreakForTime(nowMs: number): AdBreak | undefined {
+    const schedule = this.adSchedule?.breaks || [];
+    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 undefined;
+  }
+
+  destroy(): void {
+    this.clearAdStartTimer();
+    this.clearAdStopTimer();
+    this.clearAdFailsafeTimer();
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
+      this.heartbeatInterval = undefined;
+    }
+    this.hls?.destroy();
+    this.ima?.destroy();
+  }
+}