unified-video-framework 1.4.216 → 1.4.218

package/packages/web/src/ads/AdsManager.ts

@@ -1,691 +0,0 @@
-/**
- * AdsManager - Core ads orchestration for Unified Video Framework
- * Handles ad breaks, Google IMA SDK integration, and custom ad formats
- * Author: Flicknexs Team
- */
-
-import {
-  AdsManagerConfig,
-  Ad,
-  AdBreak,
-  AdPlacement,
-  AdEventType,
-  AdEvent,
-  AdError,
-  AdType,
-  AdConfigRequest,
-  AdConfigResponse,
-  TrackEventRequest,
-} from './types';
-
-export class AdsManager {
-  private config: AdsManagerConfig;
-  private adContainer: HTMLElement;
-  private videoElement: HTMLVideoElement;
-  private currentAdBreak: AdBreak | null = null;
-  private currentAd: Ad | null = null;
-  private adBreaks: AdBreak[] = [];
-  private sessionId: string;
-  private contentStarted: boolean = false;
-  private adsCompleted: Set<string> = new Set();
-  
-  // Google IMA SDK properties
-  private imaSDKLoaded: boolean = false;
-  private adsLoader: any = null;
-  private adsManager: any = null;
-  private adDisplayContainer: any = null;
-  
-  // Event listeners
-  private eventListeners: Map<string, Function[]> = new Map();
-  
-  // State
-  private isAdPlaying: boolean = false;
-  private pauseAdShown: boolean = false;
-  private originalVideoSrc: string = '';
-
-  constructor(config: AdsManagerConfig) {
-    this.config = {
-      adsManagerUrl: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
-      debug: false,
-      maxAdsPerBreak: 3,
-      maxTotalAds: 10,
-      adTimeout: 5000,
-      retryOnError: true,
-      maxRetryAttempts: 3,
-      ...config,
-    };
-    
-    // Resolve container elements
-    this.adContainer = this.resolveElement(this.config.adContainer);
-    this.videoElement = this.resolveElement(this.config.videoElement) as HTMLVideoElement;
-    
-    // Generate session ID
-    this.sessionId = this.generateSessionId();
-    
-    // Store original video source
-    this.originalVideoSrc = this.videoElement.src || this.videoElement.currentSrc;
-    
-    // Initialize
-    this.init();
-  }
-  
-  // ============================================================================
-  // INITIALIZATION
-  // ============================================================================
-  
-  private async init(): Promise<void> {
-    try {
-      if (this.config.adsEnabled) {
-        await this.loadIMASDK();
-        this.setupAdContainer();
-        this.setupVideoListeners();
-        
-        if (this.config.apiEndpoint) {
-          await this.fetchAdConfiguration();
-        }
-        
-        this.log('AdsManager initialized successfully');
-      }
-    } catch (error) {
-      this.handleError({
-        code: 1000,
-        message: 'Failed to initialize AdsManager',
-        details: error,
-      });
-    }
-  }
-  
-  private async loadIMASDK(): Promise<void> {
-    return new Promise((resolve, reject) => {
-      // Check if already loaded
-      if (typeof (window as any).google !== 'undefined' && (window as any).google.ima) {
-        this.imaSDKLoaded = true;
-        this.initializeIMA();
-        resolve();
-        return;
-      }
-      
-      // Load IMA SDK
-      const script = document.createElement('script');
-      script.src = this.config.adsManagerUrl!;
-      script.async = true;
-      
-      script.onload = () => {
-        this.imaSDKLoaded = true;
-        this.initializeIMA();
-        this.log('Google IMA SDK loaded');
-        resolve();
-      };
-      
-      script.onerror = () => {
-        reject(new Error('Failed to load Google IMA SDK'));
-      };
-      
-      document.head.appendChild(script);
-    });
-  }
-  
-  private initializeIMA(): void {
-    const ima = (window as any).google.ima;
-    
-    // Create ad display container
-    this.adDisplayContainer = new ima.AdDisplayContainer(
-      this.adContainer,
-      this.videoElement
-    );
-    
-    // Create ads loader
-    this.adsLoader = new ima.AdsLoader(this.adDisplayContainer);
-    
-    // Attach event listeners
-    this.adsLoader.addEventListener(
-      ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
-      this.onAdsManagerLoaded.bind(this),
-      false
-    );
-    
-    this.adsLoader.addEventListener(
-      ima.AdErrorEvent.Type.AD_ERROR,
-      this.onAdError.bind(this),
-      false
-    );
-  }
-  
-  private setupAdContainer(): void {
-    // Style ad container
-    this.adContainer.style.position = 'absolute';
-    this.adContainer.style.top = '0';
-    this.adContainer.style.left = '0';
-    this.adContainer.style.width = '100%';
-    this.adContainer.style.height = '100%';
-    this.adContainer.style.zIndex = '1000';
-    this.adContainer.style.display = 'none';
-  }
-  
-  private setupVideoListeners(): void {
-    // Listen for video events to trigger ad breaks
-    this.videoElement.addEventListener('play', this.onVideoPlay.bind(this));
-    this.videoElement.addEventListener('pause', this.onVideoPause.bind(this));
-    this.videoElement.addEventListener('timeupdate', this.onVideoTimeUpdate.bind(this));
-    this.videoElement.addEventListener('ended', this.onVideoEnded.bind(this));
-  }
-  
-  // ============================================================================
-  // AD CONFIGURATION
-  // ============================================================================
-  
-  private async fetchAdConfiguration(): Promise<void> {
-    try {
-      const request: AdConfigRequest = {
-        contentId: this.getContentId(),
-        sessionId: this.sessionId,
-        placement: AdPlacement.PREROLL,
-        width: this.videoElement.clientWidth,
-        height: this.videoElement.clientHeight,
-        deviceType: this.detectDeviceType(),
-        browser: navigator.userAgent,
-        language: navigator.language,
-        referrer: document.referrer,
-        gdprConsent: this.config.gdprConsent,
-        coppa: this.config.coppa,
-      };
-      
-      const response = await fetch(
-        `${this.config.apiEndpoint}/config?${new URLSearchParams(request as any)}`,
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
-      );
-      
-      const data: AdConfigResponse = await response.json();
-      
-      if (data.status === 'success' && data.data) {
-        this.adBreaks = data.data.adBreaks;
-        this.log('Ad configuration fetched', data);
-        
-        // Trigger preroll if configured
-        if (this.config.preroll && this.adBreaks.some(ab => ab.type === AdPlacement.PREROLL)) {
-          this.requestPrerollAds();
-        }
-      } else if (data.status === 'no_ads') {
-        this.log('No ads available');
-      } else {
-        throw new Error(data.message || 'Failed to fetch ad configuration');
-      }
-    } catch (error) {
-      this.handleError({
-        code: 1001,
-        message: 'Failed to fetch ad configuration',
-        details: error,
-      });
-    }
-  }
-  
-  // ============================================================================
-  // AD REQUEST
-  // ============================================================================
-  
-  public requestPrerollAds(): void {
-    const prerollBreak = this.adBreaks.find(ab => ab.type === AdPlacement.PREROLL);
-    if (prerollBreak) {
-      this.requestAdBreak(prerollBreak);
-    }
-  }
-  
-  public requestMidrollAds(position: number): void {
-    const midrollBreak = this.adBreaks.find(
-      ab => ab.type === AdPlacement.MIDROLL && ab.position === position
-    );
-    if (midrollBreak) {
-      this.requestAdBreak(midrollBreak);
-    }
-  }
-  
-  public requestPostrollAds(): void {
-    const postrollBreak = this.adBreaks.find(ab => ab.type === AdPlacement.POSTROLL);
-    if (postrollBreak) {
-      this.requestAdBreak(postrollBreak);
-    }
-  }
-  
-  private requestAdBreak(adBreak: AdBreak): void {
-    this.currentAdBreak = adBreak;
-    
-    // Use first ad's VAST URL if available
-    const firstAd = adBreak.ads[0];
-    if (firstAd && firstAd.vastUrl) {
-      this.requestAdsFromVAST(firstAd.vastUrl);
-    } else if (firstAd && firstAd.videoUrl) {
-      // Custom ad without VAST
-      this.playCustomAd(firstAd);
-    }
-    
-    this.emit(AdEventType.AD_BREAK_READY, { adBreak });
-    if (this.config.onAdBreakReady) {
-      this.config.onAdBreakReady(adBreak);
-    }
-  }
-  
-  private requestAdsFromVAST(vastUrl: string): void {
-    const ima = (window as any).google.ima;
-    const adsRequest = new ima.AdsRequest();
-    adsRequest.adTagUrl = vastUrl;
-    adsRequest.linearAdSlotWidth = this.videoElement.clientWidth;
-    adsRequest.linearAdSlotHeight = this.videoElement.clientHeight;
-    adsRequest.nonLinearAdSlotWidth = this.videoElement.clientWidth;
-    adsRequest.nonLinearAdSlotHeight = this.videoElement.clientHeight / 3;
-    
-    this.adsLoader.requestAds(adsRequest);
-  }
-  
-  // ============================================================================
-  // IMA EVENT HANDLERS
-  // ============================================================================
-  
-  private onAdsManagerLoaded(adsManagerLoadedEvent: any): void {
-    const ima = (window as any).google.ima;
-    const adsRenderingSettings = new ima.AdsRenderingSettings();
-    adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
-    
-    this.adsManager = adsManagerLoadedEvent.getAdsManager(
-      this.videoElement,
-      adsRenderingSettings
-    );
-    
-    this.attachIMAEventListeners();
-    this.startAds();
-  }
-  
-  private attachIMAEventListeners(): void {
-    const ima = (window as any).google.ima;
-    
-    this.adsManager.addEventListener(ima.AdEvent.Type.LOADED, this.onAdLoaded.bind(this));
-    this.adsManager.addEventListener(ima.AdEvent.Type.STARTED, this.onAdStarted.bind(this));
-    this.adsManager.addEventListener(ima.AdEvent.Type.FIRST_QUARTILE, this.onAdQuartile.bind(this));
-    this.adsManager.addEventListener(ima.AdEvent.Type.MIDPOINT, this.onAdQuartile.bind(this));
-    this.adsManager.addEventListener(ima.AdEvent.Type.THIRD_QUARTILE, this.onAdQuartile.bind(this));
-    this.adsManager.addEventListener(ima.AdEvent.Type.COMPLETE, this.onAdComplete.bind(this));
-    this.adsManager.addEventListener(ima.AdEvent.Type.SKIPPED, this.onAdSkipped.bind(this));
-    this.adsManager.addEventListener(ima.AdEvent.Type.CLICKED, this.onAdClicked.bind(this));
-    this.adsManager.addEventListener(ima.AdErrorEvent.Type.AD_ERROR, this.onAdError.bind(this));
-  }
-  
-  private startAds(): void {
-    try {
-      this.adDisplayContainer.initialize();
-      
-      const width = this.videoElement.clientWidth;
-      const height = this.videoElement.clientHeight;
-      const viewMode = 'normal';
-      
-      this.adsManager.init(width, height, viewMode);
-      this.adsManager.start();
-      
-      this.isAdPlaying = true;
-      this.adContainer.style.display = 'block';
-      
-      if (this.currentAdBreak) {
-        this.emit(AdEventType.AD_BREAK_STARTED, { adBreak: this.currentAdBreak });
-        if (this.config.onAdBreakStarted) {
-          this.config.onAdBreakStarted(this.currentAdBreak);
-        }
-      }
-    } catch (error) {
-      this.handleError({
-        code: 1002,
-        message: 'Failed to start ads',
-        details: error,
-      });
-    }
-  }
-  
-  private onAdLoaded(adEvent: any): void {
-    this.log('Ad loaded', adEvent);
-    this.emit(AdEventType.LOADED, { ad: this.currentAd || undefined });
-  }
-  
-  private onAdStarted(adEvent: any): void {
-    const ad = adEvent.getAd();
-    this.currentAd = {
-      id: ad.getAdId(),
-      type: AdType.SKIPPABLE_IN_STREAM, // Determine from ad properties
-      metadata: {
-        id: ad.getAdId(),
-        title: ad.getTitle(),
-        description: ad.getDescription(),
-        advertiser: ad.getAdvertiserName(),
-        duration: ad.getDuration(),
-        skippable: ad.isSkippable(),
-        skipOffset: ad.getSkipTimeOffset(),
-      },
-    };
-    
-    this.log('Ad started', this.currentAd);
-    this.emit(AdEventType.STARTED, { ad: this.currentAd });
-    this.trackEvent(AdEventType.STARTED);
-    
-    if (this.config.onAdStarted) {
-      this.config.onAdStarted(this.currentAd);
-    }
-  }
-  
-  private onAdQuartile(adEvent: any): void {
-    const eventType = adEvent.type;
-    let quartileEvent: AdEventType;
-    
-    if (eventType.includes('FIRST_QUARTILE')) {
-      quartileEvent = AdEventType.FIRST_QUARTILE;
-    } else if (eventType.includes('MIDPOINT')) {
-      quartileEvent = AdEventType.MIDPOINT;
-    } else if (eventType.includes('THIRD_QUARTILE')) {
-      quartileEvent = AdEventType.THIRD_QUARTILE;
-    } else {
-      return;
-    }
-    
-    this.log(`Ad ${quartileEvent}`, this.currentAd);
-    this.emit(quartileEvent, { ad: this.currentAd || undefined });
-    this.trackEvent(quartileEvent);
-  }
-  
-  private onAdComplete(adEvent: any): void {
-    this.log('Ad completed', this.currentAd);
-    this.emit(AdEventType.COMPLETED, { ad: this.currentAd || undefined });
-    this.trackEvent(AdEventType.COMPLETED);
-    
-    if (this.config.onAdCompleted && this.currentAd) {
-      this.config.onAdCompleted(this.currentAd);
-    }
-    
-    this.endAdBreak();
-  }
-  
-  private onAdSkipped(adEvent: any): void {
-    this.log('Ad skipped', this.currentAd);
-    this.emit(AdEventType.SKIPPED, { ad: this.currentAd || undefined });
-    this.trackEvent(AdEventType.SKIPPED);
-    
-    if (this.config.onAdSkipped && this.currentAd) {
-      this.config.onAdSkipped(this.currentAd);
-    }
-    
-    this.endAdBreak();
-  }
-  
-  private onAdClicked(adEvent: any): void {
-    this.log('Ad clicked', this.currentAd);
-    this.emit(AdEventType.CLICKED, { ad: this.currentAd || undefined });
-    this.trackEvent(AdEventType.CLICKED);
-  }
-  
-  private onAdError(adErrorEvent: any): void {
-    const error = adErrorEvent.getError();
-    this.handleError({
-      code: error.getErrorCode(),
-      message: error.getMessage(),
-      ad: this.currentAd || undefined,
-      adBreak: this.currentAdBreak || undefined,
-      details: error,
-    });
-    
-    // Resume content on error
-    this.endAdBreak();
-  }
-  
-  private endAdBreak(): void {
-    this.isAdPlaying = false;
-    this.adContainer.style.display = 'none';
-    
-    if (this.currentAdBreak) {
-      this.emit(AdEventType.AD_BREAK_COMPLETED, { adBreak: this.currentAdBreak });
-      if (this.config.onAdBreakCompleted) {
-        this.config.onAdBreakCompleted(this.currentAdBreak);
-      }
-    }
-    
-    this.currentAd = null;
-    this.currentAdBreak = null;
-    
-    // Resume content
-    if (!this.contentStarted) {
-      this.videoElement.play();
-      this.contentStarted = true;
-    }
-  }
-  
-  // ============================================================================
-  // VIDEO EVENT HANDLERS
-  // ============================================================================
-  
-  private onVideoPlay(): void {
-    if (!this.contentStarted && this.config.preroll) {
-      this.videoElement.pause();
-      this.requestPrerollAds();
-    }
-  }
-  
-  private onVideoPause(): void {
-    // Trigger pause ads if configured
-    if (this.config.pauseAds && !this.pauseAdShown && !this.isAdPlaying) {
-      setTimeout(() => {
-        if (this.videoElement.paused) {
-          this.showPauseAd();
-        }
-      }, (this.config.pauseAds.triggers.minPauseDuration || 3) * 1000);
-    }
-  }
-  
-  private onVideoTimeUpdate(): void {
-    // Check for midroll ad breaks
-    const currentTime = this.videoElement.currentTime;
-    
-    this.adBreaks.forEach((adBreak) => {
-      if (adBreak.type === AdPlacement.MIDROLL) {
-        const position = typeof adBreak.position === 'number' ? adBreak.position : 0;
-        
-        if (
-          !this.adsCompleted.has(adBreak.id) &&
-          currentTime >= position &&
-          currentTime < position + 1
-        ) {
-          this.videoElement.pause();
-          this.requestAdBreak(adBreak);
-          this.adsCompleted.add(adBreak.id);
-        }
-      }
-    });
-  }
-  
-  private onVideoEnded(): void {
-    if (this.config.postroll) {
-      this.requestPostrollAds();
-    } else {
-      this.emit(AdEventType.ALL_ADS_COMPLETED, {});
-      if (this.config.onAllAdsCompleted) {
-        this.config.onAllAdsCompleted();
-      }
-    }
-  }
-  
-  // ============================================================================
-  // CUSTOM ADS
-  // ============================================================================
-  
-  private playCustomAd(ad: Ad): void {
-    // Implementation for custom ads (non-VAST)
-    // This would handle direct video URL playback
-    this.log('Playing custom ad', ad);
-    // TODO: Implement custom ad playback logic
-  }
-  
-  private showPauseAd(): void {
-    // Implementation for pause overlay ads
-    this.pauseAdShown = true;
-    this.log('Showing pause ad');
-    // TODO: Implement pause ad UI
-  }
-  
-  // ============================================================================
-  // EVENT TRACKING
-  // ============================================================================
-  
-  private async trackEvent(eventType: AdEventType): Promise<void> {
-    if (!this.config.apiEndpoint || !this.currentAd) return;
-    
-    try {
-      const request: TrackEventRequest = {
-        eventType,
-        adId: this.currentAd.id,
-        sessionId: this.sessionId,
-        contentId: this.getContentId(),
-        timestamp: new Date().toISOString(),
-        playerTime: this.videoElement.currentTime,
-      };
-      
-      await fetch(`${this.config.apiEndpoint}/track/event`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(request),
-      });
-      
-      this.log(`Tracked event: ${eventType}`);
-    } catch (error) {
-      this.log(`Failed to track event: ${eventType}`, error);
-    }
-  }
-  
-  // ============================================================================
-  // EVENT EMITTER
-  // ============================================================================
-  
-  public on(eventType: AdEventType | string, callback: Function): void {
-    if (!this.eventListeners.has(eventType)) {
-      this.eventListeners.set(eventType, []);
-    }
-    this.eventListeners.get(eventType)!.push(callback);
-  }
-  
-  public off(eventType: AdEventType | string, callback: Function): void {
-    const listeners = this.eventListeners.get(eventType);
-    if (listeners) {
-      const index = listeners.indexOf(callback);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    }
-  }
-  
-  private emit(eventType: AdEventType | string, data: Partial<AdEvent>): void {
-    const listeners = this.eventListeners.get(eventType);
-    if (listeners) {
-      const event: AdEvent = {
-        type: eventType as AdEventType,
-        timestamp: new Date().toISOString(),
-        playerTime: this.videoElement.currentTime,
-        ...data,
-      };
-      
-      listeners.forEach((callback) => callback(event));
-    }
-  }
-  
-  // ============================================================================
-  // ERROR HANDLING
-  // ============================================================================
-  
-  private handleError(error: AdError): void {
-    this.log('Ad error', error);
-    this.emit(AdEventType.AD_ERROR, { customData: error });
-    
-    if (this.config.onAdError) {
-      this.config.onAdError(error);
-    }
-  }
-  
-  // ============================================================================
-  // UTILITY METHODS
-  // ============================================================================
-  
-  private resolveElement(element: HTMLElement | string): HTMLElement {
-    if (typeof element === 'string') {
-      const el = document.querySelector(element);
-      if (!el) {
-        throw new Error(`Element not found: ${element}`);
-      }
-      return el as HTMLElement;
-    }
-    return element;
-  }
-  
-  private generateSessionId(): string {
-    return `ads-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  }
-  
-  private getContentId(): string {
-    // Extract from video source or use a default
-    return this.originalVideoSrc || 'unknown';
-  }
-  
-  private detectDeviceType(): 'desktop' | 'mobile' | 'tablet' | 'tv' {
-    const ua = navigator.userAgent;
-    if (/mobile/i.test(ua)) return 'mobile';
-    if (/tablet|ipad/i.test(ua)) return 'tablet';
-    if (/tv|smarttv/i.test(ua)) return 'tv';
-    return 'desktop';
-  }
-  
-  private log(message: string, ...args: any[]): void {
-    if (this.config.debug) {
-      console.log(`[AdsManager] ${message}`, ...args);
-    }
-  }
-  
-  // ============================================================================
-  // PUBLIC API
-  // ============================================================================
-  
-  public destroy(): void {
-    if (this.adsManager) {
-      this.adsManager.destroy();
-    }
-    
-    if (this.adsLoader) {
-      this.adsLoader.destroy();
-    }
-    
-    this.eventListeners.clear();
-    this.adBreaks = [];
-    this.adsCompleted.clear();
-    
-    this.log('AdsManager destroyed');
-  }
-  
-  public pause(): void {
-    if (this.adsManager && this.isAdPlaying) {
-      this.adsManager.pause();
-    }
-  }
-  
-  public resume(): void {
-    if (this.adsManager && this.isAdPlaying) {
-      this.adsManager.resume();
-    }
-  }
-  
-  public skip(): void {
-    if (this.adsManager && this.isAdPlaying) {
-      this.adsManager.skip();
-    }
-  }
-  
-  public resize(width: number, height: number): void {
-    if (this.adsManager) {
-      this.adsManager.resize(width, height, 'normal');
-    }
-  }
-}