unified-video-framework 1.4.217 → 1.4.219

package/packages/web/dist/react/examples/google-ads-example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-ads-example.js","sourceRoot":"","sources":["../../../src/react/examples/google-ads-example.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,358 @@
+/**
+ * Google IMA Ads Manager
+ * Supports ALL Google ad types:
+ * - Pre-roll (before video)
+ * - Mid-roll (during video)
+ * - Post-roll (after video)
+ * - Overlay ads (non-linear)
+ * - Companion ads (sidebar/banner)
+ * - Bumper ads (short 6s ads)
+ * - Skippable & non-skippable ads
+ */
+
+export interface GoogleAdsConfig {
+  // Ad tag URL (VAST/VMAP)
+  adTagUrl: string;
+  
+  // Optional: Specific ad break times (for mid-rolls)
+  // If not provided, uses VMAP schedule from ad server
+  midrollTimes?: number[];  // e.g., [30, 60, 120] = ads at 30s, 60s, 120s
+  
+  // Companion ad containers
+  companionAdSlots?: Array<{
+    containerId: string;  // HTML element ID
+    width: number;
+    height: number;
+  }>;
+  
+  // Callbacks
+  onAdStart?: () => void;
+  onAdEnd?: () => void;
+  onAdError?: (error: any) => void;
+  onAllAdsComplete?: () => void;
+}
+
+export class GoogleAdsManager {
+  private video: HTMLVideoElement;
+  private adContainer: HTMLElement;
+  private config: GoogleAdsConfig;
+  private adsManager: any = null;
+  private adsLoader: any = null;
+  private adDisplayContainer: any = null;
+  private isAdPlaying = false;
+
+  constructor(video: HTMLVideoElement, adContainer: HTMLElement, config: GoogleAdsConfig) {
+    this.video = video;
+    this.adContainer = adContainer;
+    this.config = config;
+  }
+
+  /**
+   * Initialize ads system
+   */
+  async initialize(): Promise<void> {
+    try {
+      await this.loadIMASDK();
+      this.setupAdsLoader();
+    } catch (error) {
+      console.error('Failed to initialize Google Ads:', error);
+      this.config.onAdError?.(error);
+    }
+  }
+
+  /**
+   * Load Google IMA SDK
+   */
+  private loadIMASDK(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if ((window as any).google?.ima) {
+        resolve();
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = 'https://imasdk.googleapis.com/js/sdkloader/ima3.js';
+      script.async = true;
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error('Failed to load Google IMA SDK'));
+      document.head.appendChild(script);
+    });
+  }
+
+  /**
+   * Setup ads loader
+   */
+  private setupAdsLoader(): void {
+    const google = (window as any).google;
+    
+    // Create ad display container
+    this.adDisplayContainer = new google.ima.AdDisplayContainer(
+      this.adContainer,
+      this.video
+    );
+    
+    // Create ads loader
+    this.adsLoader = new google.ima.AdsLoader(this.adDisplayContainer);
+    
+    // Register for ads loaded event
+    this.adsLoader.addEventListener(
+      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+      (event: any) => this.onAdsManagerLoaded(event),
+      false
+    );
+    
+    // Register for error event
+    this.adsLoader.addEventListener(
+      google.ima.AdErrorEvent.Type.AD_ERROR,
+      (event: any) => this.onAdError(event),
+      false
+    );
+    
+    // Signal when video content completes (for post-rolls)
+    this.video.addEventListener('ended', () => {
+      if (!this.isAdPlaying) {
+        this.adsLoader?.contentComplete();
+      }
+    });
+  }
+
+  /**
+   * Request ads
+   */
+  requestAds(): void {
+    const google = (window as any).google;
+    
+    try {
+      const adsRequest = new google.ima.AdsRequest();
+      adsRequest.adTagUrl = this.config.adTagUrl;
+      
+      // Set video dimensions
+      adsRequest.linearAdSlotWidth = this.video.clientWidth;
+      adsRequest.linearAdSlotHeight = this.video.clientHeight;
+      adsRequest.nonLinearAdSlotWidth = this.video.clientWidth;
+      adsRequest.nonLinearAdSlotHeight = Math.floor(this.video.clientHeight / 3);
+      
+      // Set companion ad slots if provided
+      if (this.config.companionAdSlots && this.config.companionAdSlots.length > 0) {
+        const companionAdSlots = this.config.companionAdSlots.map(slot => {
+          return new google.ima.CompanionAdSelectionSettings();
+        });
+        adsRequest.setAdWillAutoPlay(true);
+        adsRequest.setAdWillPlayMuted(false);
+      }
+      
+      // Request ads
+      this.adsLoader.requestAds(adsRequest);
+    } catch (error) {
+      console.error('Error requesting ads:', error);
+      this.config.onAdError?.(error);
+    }
+  }
+
+  /**
+   * Initialize ad display container (must be called on user gesture)
+   */
+  initAdDisplayContainer(): void {
+    try {
+      this.adDisplayContainer?.initialize();
+    } catch (error) {
+      console.warn('Ad display container already initialized');
+    }
+  }
+
+  /**
+   * Handle ads manager loaded
+   */
+  private onAdsManagerLoaded(event: any): void {
+    const google = (window as any).google;
+    
+    // Setup ads rendering settings
+    const adsRenderingSettings = new google.ima.AdsRenderingSettings();
+    adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
+    adsRenderingSettings.enablePreloading = true;
+    
+    // Get the ads manager
+    this.adsManager = event.getAdsManager(this.video, adsRenderingSettings);
+    
+    // Setup ads manager event listeners
+    this.setupAdsManagerListeners();
+    
+    try {
+      // Initialize ads manager
+      this.adsManager.init(
+        this.video.clientWidth,
+        this.video.clientHeight,
+        google.ima.ViewMode.NORMAL
+      );
+      
+      // Start ads
+      this.adsManager.start();
+    } catch (error) {
+      console.error('Error starting ads:', error);
+      this.video.play().catch(() => {});
+    }
+  }
+
+  /**
+   * Setup ads manager event listeners
+   */
+  private setupAdsManagerListeners(): void {
+    const google = (window as any).google;
+    
+    // Content pause - ad is about to play
+    this.adsManager.addEventListener(
+      google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
+      () => {
+        console.log('Ad: Content paused');
+        this.isAdPlaying = true;
+        this.video.pause();
+        this.config.onAdStart?.();
+      }
+    );
+    
+    // Content resume - ad finished
+    this.adsManager.addEventListener(
+      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
+      () => {
+        console.log('Ad: Content resume');
+        this.isAdPlaying = false;
+        this.config.onAdEnd?.();
+        this.video.play().catch(() => {});
+      }
+    );
+    
+    // Ad started
+    this.adsManager.addEventListener(
+      google.ima.AdEvent.Type.STARTED,
+      (event: any) => {
+        const ad = event.getAd();
+        console.log('Ad started:', {
+          type: ad.isLinear() ? 'Linear (video)' : 'Non-linear (overlay)',
+          duration: ad.getDuration(),
+          skippable: ad.getSkipTimeOffset() !== -1,
+          title: ad.getTitle(),
+        });
+      }
+    );
+    
+    // Ad completed
+    this.adsManager.addEventListener(
+      google.ima.AdEvent.Type.COMPLETE,
+      () => {
+        console.log('Ad completed');
+      }
+    );
+    
+    // All ads completed
+    this.adsManager.addEventListener(
+      google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
+      () => {
+        console.log('All ads completed');
+        this.config.onAllAdsComplete?.();
+      }
+    );
+    
+    // Ad error
+    this.adsManager.addEventListener(
+      google.ima.AdErrorEvent.Type.AD_ERROR,
+      (event: any) => this.onAdError(event)
+    );
+    
+    // Ad skipped
+    this.adsManager.addEventListener(
+      google.ima.AdEvent.Type.SKIPPED,
+      () => {
+        console.log('Ad skipped by user');
+      }
+    );
+  }
+
+  /**
+   * Handle ad error
+   */
+  private onAdError(event: any): void {
+    const error = event.getError?.();
+    console.error('Ad error:', error?.getMessage?.() || error);
+    
+    this.config.onAdError?.(error);
+    
+    // Destroy ads manager on error
+    if (this.adsManager) {
+      this.adsManager.destroy();
+    }
+    
+    // Resume content playback
+    this.isAdPlaying = false;
+    this.video.play().catch(() => {});
+  }
+
+  /**
+   * Pause ad
+   */
+  pause(): void {
+    if (this.adsManager && this.isAdPlaying) {
+      this.adsManager.pause();
+    }
+  }
+
+  /**
+   * Resume ad
+   */
+  resume(): void {
+    if (this.adsManager && this.isAdPlaying) {
+      this.adsManager.resume();
+    }
+  }
+
+  /**
+   * Skip ad (if skippable)
+   */
+  skip(): void {
+    if (this.adsManager) {
+      this.adsManager.skip();
+    }
+  }
+
+  /**
+   * Resize ads
+   */
+  resize(width: number, height: number): void {
+    const google = (window as any).google;
+    if (this.adsManager) {
+      this.adsManager.resize(width, height, google.ima.ViewMode.NORMAL);
+    }
+  }
+
+  /**
+   * Set volume
+   */
+  setVolume(volume: number): void {
+    if (this.adsManager) {
+      this.adsManager.setVolume(volume);
+    }
+  }
+
+  /**
+   * Check if ad is currently playing
+   */
+  isPlayingAd(): boolean {
+    return this.isAdPlaying;
+  }
+
+  /**
+   * Cleanup
+   */
+  destroy(): void {
+    if (this.adsManager) {
+      this.adsManager.destroy();
+      this.adsManager = null;
+    }
+    
+    if (this.adsLoader) {
+      this.adsLoader.destroy();
+      this.adsLoader = null;
+    }
+    
+    this.isAdPlaying = false;
+  }
+}

package/packages/web/src/index.ts

@@ -14,8 +14,5 @@ export { SecureVideoPlayer } from './SecureVideoPlayer';
 // Export EPG (Electronic Program Guide) components
 export * from './react/EPG';
 
-// Export Ads module (Google Ads Integration)
-export * from './ads/index';
-
 // Version
 export const VERSION = '1.0.0';