unified-video-framework 1.4.404 → 1.4.406

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

@@ -18,6 +18,13 @@ export interface GoogleAdsConfig {
   // If not provided, uses VMAP schedule from ad server
   midrollTimes?: number[];  // e.g., [30, 60, 120] = ads at 30s, 60s, 120s
 
+  // Periodic ad breaks (for live streams or automatic scheduling)
+  liveAdBreakMode?: 'periodic' | 'manual';  // 'periodic' = auto-schedule at intervals, 'manual' = use midrollTimes
+  periodicAdInterval?: number;  // Interval in seconds between ads (e.g., 30 = ad every 30 seconds)
+  syncToLiveEdge?: boolean;  // For live streams: sync back to live edge after ad
+  pauseStreamDuringAd?: boolean;  // Pause underlying stream during ad playback
+  liveEdgeOffset?: number;  // Seconds behind live edge to resume at (default: 3)
+
   // Companion ad containers
   companionAdSlots?: Array<{
     containerId: string;  // HTML element ID
@@ -34,16 +41,20 @@ export interface GoogleAdsConfig {
 }
 
 export class GoogleAdsManager {
-  protected video: HTMLVideoElement;
-  protected adContainer: HTMLElement;
-  protected config: GoogleAdsConfig;
+  private video: HTMLVideoElement;
+  private adContainer: HTMLElement;
+  private config: GoogleAdsConfig;
   private adsManager: any = null;
   private adsLoader: any = null;
   private adDisplayContainer: any = null;
   private isAdPlaying = false;
   private isMuted = true;
   private unmuteButton: HTMLElement | null = null;
-  private adSafetyTimeout: any = null;
+
+  // Periodic ad scheduling
+  private lastAdTime = 0;
+  private periodicAdCheckInterval: any = null;
+  private pendingAdRequest = false;
 
   constructor(video: HTMLVideoElement, adContainer: HTMLElement, config: GoogleAdsConfig) {
     this.video = video;
@@ -146,6 +157,59 @@ export class GoogleAdsManager {
     });
   }
 
+  /**
+   * Setup periodic ad breaks (for live streams or auto-scheduling)
+   */
+  setupPeriodicAds(): void {
+    // Only setup if periodic mode is enabled
+    if (this.config.liveAdBreakMode !== 'periodic' || !this.config.periodicAdInterval) {
+      return;
+    }
+
+    console.log(`📺 Setting up periodic ads: interval=${this.config.periodicAdInterval}s`);
+
+    // Check every second if we should trigger an ad
+    this.periodicAdCheckInterval = setInterval(() => {
+      // Skip if ad is already playing or pending
+      if (this.isAdPlaying || this.pendingAdRequest) {
+        return;
+      }
+
+      const currentTime = this.video.currentTime;
+      const interval = this.config.periodicAdInterval || 30;
+
+      // Check if enough time has passed since last ad
+      if (currentTime - this.lastAdTime >= interval && currentTime > 0) {
+        console.log(`⏰ Periodic ad triggered at ${currentTime.toFixed(1)}s (interval: ${interval}s)`);
+        this.triggerPeriodicAd();
+      }
+    }, 1000); // Check every second
+
+    console.log('✅ Periodic ad scheduling enabled');
+  }
+
+  /**
+   * Trigger a periodic ad break
+   */
+  private triggerPeriodicAd(): void {
+    if (this.pendingAdRequest || this.isAdPlaying) {
+      return;
+    }
+
+    this.pendingAdRequest = true;
+    this.lastAdTime = this.video.currentTime;
+
+    console.log('🎬 Triggering periodic ad break...');
+
+    // Pause video if configured
+    if (this.config.pauseStreamDuringAd && !this.video.paused) {
+      this.video.pause();
+    }
+
+    // Request a new ad
+    this.requestAds();
+  }
+
   /**
    * Request ads
    */
@@ -245,6 +309,9 @@ export class GoogleAdsManager {
 
       // Start ads
       this.adsManager.start();
+
+      // Setup periodic ad scheduling if enabled
+      this.setupPeriodicAds();
     } catch (error) {
       console.error('Error starting ads:', error);
       this.video.play().catch(() => { });
@@ -263,6 +330,7 @@ export class GoogleAdsManager {
       () => {
         console.log('Ad: Content paused');
         this.isAdPlaying = true;
+        this.pendingAdRequest = false; // Reset pending flag
         this.video.pause();
 
         // Force ad container visibility and z-index
@@ -289,14 +357,6 @@ export class GoogleAdsManager {
         // Store cleanup function to remove listener later
         (this.video as any).__adPlayBlocker = preventPlayDuringAd;
 
-        // ✅ Safety timeout: Force hide ad container after 120 seconds if ad gets stuck
-        this.adSafetyTimeout = setTimeout(() => {
-          if (this.isAdPlaying) {
-            console.warn('⚠️ Ad safety timeout triggered - forcing ad container to hide');
-            this.forceHideAdContainer();
-          }
-        }, 120000); // 120 seconds = 2 minutes max ad length
-
         this.config.onAdStart?.();
       }
     );
@@ -308,12 +368,6 @@ export class GoogleAdsManager {
         console.log('Ad: Content resume');
         this.isAdPlaying = false;
 
-        // ✅ Clear safety timeout
-        if (this.adSafetyTimeout) {
-          clearTimeout(this.adSafetyTimeout);
-          this.adSafetyTimeout = null;
-        }
-
         // Remove play blocker
         const preventPlayDuringAd = (this.video as any).__adPlayBlocker;
         if (preventPlayDuringAd) {
@@ -321,18 +375,6 @@ export class GoogleAdsManager {
           delete (this.video as any).__adPlayBlocker;
         }
 
-        // ✅ Hide ad container to show video again
-        if (this.adContainer) {
-          this.adContainer.style.visibility = 'hidden';
-          this.adContainer.style.opacity = '0';
-          this.adContainer.style.pointerEvents = 'none';
-          this.adContainer.style.zIndex = '1';
-          console.log('✅ Ad container hidden - video visible again');
-        }
-
-        // ✅ Ensure video element is visible and playing
-        this.restoreVideoVisibility();
-
         this.config.onAdEnd?.();
         this.video.play().catch(() => { });
       }
@@ -420,29 +462,11 @@ export class GoogleAdsManager {
 
     this.config.onAdError?.(error);
 
-    // ✅ Clear safety timeout
-    if (this.adSafetyTimeout) {
-      clearTimeout(this.adSafetyTimeout);
-      this.adSafetyTimeout = null;
-    }
-
     // Destroy ads manager on error
     if (this.adsManager) {
       this.adsManager.destroy();
     }
 
-    // ✅ Hide ad container on error
-    if (this.adContainer) {
-      this.adContainer.style.visibility = 'hidden';
-      this.adContainer.style.opacity = '0';
-      this.adContainer.style.pointerEvents = 'none';
-      this.adContainer.style.zIndex = '1';
-      console.log('✅ Ad container hidden after error - video visible again');
-    }
-
-    // ✅ Restore video visibility
-    this.restoreVideoVisibility();
-
     // Resume content playback
     this.isAdPlaying = false;
     this.video.play().catch(() => { });
@@ -692,99 +716,19 @@ export class GoogleAdsManager {
     }
   }
 
-  /**
-   * Restore video element visibility
-   */
-  private restoreVideoVisibility(): void {
-    console.log('🔍 Restoring video visibility...');
-
-    // Check current video state
-    console.log('Video element state:', {
-      paused: this.video.paused,
-      currentTime: this.video.currentTime,
-      readyState: this.video.readyState,
-      networkState: this.video.networkState,
-      videoWidth: this.video.videoWidth,
-      videoHeight: this.video.videoHeight,
-      display: getComputedStyle(this.video).display,
-      visibility: getComputedStyle(this.video).visibility,
-      opacity: getComputedStyle(this.video).opacity
-    });
-
-    // Force video element to be visible
-    this.video.style.display = 'block';
-    this.video.style.visibility = 'visible';
-    this.video.style.opacity = '1';
-    this.video.style.zIndex = '1';
-
-    // Ensure video is not hidden by any parent
-    let parent = this.video.parentElement;
-    while (parent && parent !== document.body) {
-      const styles = getComputedStyle(parent);
-      if (styles.display === 'none' || styles.visibility === 'hidden' || styles.opacity === '0') {
-        console.warn('⚠️ Parent element is hidden:', parent.className);
-      }
-      parent = parent.parentElement;
-    }
-
-    console.log('✅ Video element visibility restored');
-  }
-
-  /**
-   * Force hide ad container (safety mechanism)
-   */
-  private forceHideAdContainer(): void {
-    console.warn('🚨 Force hiding ad container and resuming video');
-
-    this.isAdPlaying = false;
-
-    // Clear safety timeout
-    if (this.adSafetyTimeout) {
-      clearTimeout(this.adSafetyTimeout);
-      this.adSafetyTimeout = null;
-    }
-
-    // Remove play blocker
-    const preventPlayDuringAd = (this.video as any).__adPlayBlocker;
-    if (preventPlayDuringAd) {
-      this.video.removeEventListener('play', preventPlayDuringAd);
-      delete (this.video as any).__adPlayBlocker;
-    }
-
-    // Hide ad container
-    if (this.adContainer) {
-      this.adContainer.style.visibility = 'hidden';
-      this.adContainer.style.opacity = '0';
-      this.adContainer.style.pointerEvents = 'none';
-      this.adContainer.style.zIndex = '1';
-      console.log('✅ Ad container force-hidden');
-    }
-
-    // Destroy stuck ads manager
-    if (this.adsManager) {
-      try {
-        this.adsManager.destroy();
-      } catch (e) {
-        console.warn('Failed to destroy ads manager:', e);
-      }
-    }
-
-    // ✅ Restore video visibility
-    this.restoreVideoVisibility();
-
-    // Resume video
-    this.video.play().catch(() => { });
-
-    // Notify callback
-    this.config.onAdEnd?.();
-  }
-
   /**
    * Cleanup
    */
   destroy(): void {
     this.hideUnmuteButton();
 
+    // Clear periodic ad interval
+    if (this.periodicAdCheckInterval) {
+      clearInterval(this.periodicAdCheckInterval);
+      this.periodicAdCheckInterval = null;
+      console.log('✅ Periodic ad scheduling stopped');
+    }
+
     if (this.adsManager) {
       this.adsManager.destroy();
       this.adsManager = null;
@@ -796,5 +740,6 @@ export class GoogleAdsManager {
     }
 
     this.isAdPlaying = false;
+    this.pendingAdRequest = false;
   }
 }

package/packages/web/src/react/WebPlayerView.tsx

@@ -4,7 +4,6 @@ import type { CSSProperties } from 'react';
 import type { VideoSource, SubtitleTrack, VideoMetadata, PlayerConfig } from '../../core/dist';
 import { WebPlayer } from '../WebPlayer';
 import { GoogleAdsManager } from '../ads/GoogleAdsManager';
-import { LiveStreamAdsManager } from '../ads/LiveStreamAdsManager';
 // EPG imports - conditionally loaded
 import type { EPGData, EPGConfig, EPGProgram, EPGProgramRow } from './types/EPGTypes';
 import type { VCManifest, VCProduct, VCEvent } from './types/VideoCommerceTypes';
@@ -407,34 +406,24 @@ export type WebPlayerViewProps = {
   // Google Ads Configuration
   googleAds?: {
     adTagUrl: string;                    // VAST/VMAP ad tag URL
-    midrollTimes?: number[];            // Mid-roll ad times in seconds [30, 60, 120] (VOD only)
+    midrollTimes?: number[];            // Mid-roll ad times in seconds [30, 60, 120]
+
+    // Periodic ad breaks (for live streams or automatic scheduling)
+    liveAdBreakMode?: 'periodic' | 'manual';  // 'periodic' = auto-schedule at intervals, 'manual' = use midrollTimes
+    periodicAdInterval?: number;        // Interval in seconds between ads (e.g., 30 = ad every 30 seconds)
+    syncToLiveEdge?: boolean;           // For live streams: sync back to live edge after ad
+    pauseStreamDuringAd?: boolean;      // Pause underlying stream during ad playback
+    liveEdgeOffset?: number;            // Seconds behind live edge to resume at (default: 3)
+
     companionAdSlots?: Array<{          // Companion ad containers
       containerId: string;
       width: number;
       height: number;
     }>;
-
-    // Live Stream Ad Options (NEW)
-    liveAdBreakMode?: 'metadata' | 'periodic' | 'manual' | 'hybrid';  // Live ad insertion mode
-    periodicAdInterval?: number;        // For periodic mode: ad every X seconds (default: 300)
-    syncToLiveEdge?: boolean;           // Jump to live edge after ad (default: false - DVR style)
-    liveEdgeOffset?: number;            // Seconds behind live edge (default: 3)
-    pauseStreamDuringAd?: boolean;      // Pause stream download during ad (default: true)
-
-    // Metadata Detection Config (for 'metadata' mode)
-    metadataConfig?: {
-      detectDateRange?: boolean;        // Detect #EXT-X-DATERANGE tags (default: true)
-      detectID3?: boolean;               // Detect ID3 timed metadata (default: true)
-      adClassNames?: string[];          // CLASS values to detect (default: ['com.google.ads', 'ads'])
-    };
-
-    // Callbacks
     onAdStart?: () => void;             // Called when ad starts
     onAdEnd?: () => void;               // Called when ad ends
     onAdError?: (error: any) => void;   // Called on ad error
     onAllAdsComplete?: () => void;      // Called when all ads complete
-    onLiveAdBreakDetected?: (metadata: any) => void;  // Called when live ad cue detected (metadata mode)
-    onAdBreakScheduled?: (scheduledTime: number) => void;  // Called when ad scheduled (periodic mode)
   };
   
   // Chapter Event Callbacks
@@ -1244,25 +1233,9 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
           
           // Initialize Google Ads if configured
           if (props.googleAds) {
-            // Wait for ad container to be properly mounted in DOM
-            const waitForAdContainer = () => {
-              return new Promise<void>((resolve) => {
-                const checkContainer = () => {
-                  if (adContainerRef.current && document.body.contains(adContainerRef.current)) {
-                    resolve();
-                  } else {
-                    setTimeout(checkContainer, 50);
-                  }
-                };
-                checkContainer();
-              });
-            };
-
+            // Small delay to ensure ad container is properly mounted in DOM
             setTimeout(async () => {
               try {
-                // Wait for ad container to be in DOM
-                await waitForAdContainer();
-
                 // Ensure ad container exists
                 if (!adContainerRef.current) {
                   console.error('❌ Ad container ref is null - cannot initialize ads');
@@ -1305,122 +1278,22 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                   return true;
                 };
 
-                // Determine if this is a live stream with live ad modes
-                const isLiveAdMode = props.googleAds.liveAdBreakMode &&
-                                     props.googleAds.liveAdBreakMode !== 'manual';
-
-                // Use LiveStreamAdsManager for live ad modes, otherwise use GoogleAdsManager
-                const adsManager = isLiveAdMode
-                  ? new LiveStreamAdsManager(
-                      videoElement,
-                      adContainer,
-                      {
-                        adTagUrl: props.googleAds.adTagUrl,
-                        midrollTimes: props.googleAds.midrollTimes,
-                        companionAdSlots: props.googleAds.companionAdSlots,
-
-                        // Live stream specific config
-                        liveAdBreakMode: props.googleAds.liveAdBreakMode,
-                        periodicAdInterval: props.googleAds.periodicAdInterval,
-                        syncToLiveEdge: props.googleAds.syncToLiveEdge,
-                        liveEdgeOffset: props.googleAds.liveEdgeOffset,
-                        pauseStreamDuringAd: props.googleAds.pauseStreamDuringAd,
-                        metadataConfig: props.googleAds.metadataConfig,
-
-                        onAdStart: () => {
-                          setIsAdPlaying(true);
-
-                          // Check if this is a pre-roll ad (video time near 0)
-                          if (videoElement.currentTime < 1) {
-                            console.log('🎬 Pre-roll ad starting - blocking video playback');
-                            isPrerollPlaying = true;
-                            hasPrerollAd = true;
-
-                            // Add playback blocker
-                            videoElement.addEventListener('play', blockVideoUntilPreroll);
-                          }
-
-                          // Notify player to block keyboard controls
-                          if (typeof (player as any).setAdPlaying === 'function') {
-                            (player as any).setAdPlaying(true);
-                          }
-                          props.googleAds?.onAdStart?.();
-                        },
-                        onLiveAdBreakDetected: props.googleAds.onLiveAdBreakDetected,
-                        onAdBreakScheduled: props.googleAds.onAdBreakScheduled,
-                        onAdEnd: () => {
-                          setIsAdPlaying(false);
-
-                          // Handle pre-roll completion
-                          if (isPrerollPlaying) {
-                            console.log('🎬 Pre-roll ad completed');
-                            isPrerollPlaying = false;
-
-                            // Remove playback blocker
-                            videoElement.removeEventListener('play', blockVideoUntilPreroll);
-
-                            // Reset video to beginning if it leaked any playback
-                            if (videoElement.currentTime > 0 && videoElement.currentTime < 10) {
-                              console.log(`⏮️ Resetting video to 0:00 (was at ${videoElement.currentTime.toFixed(2)}s)`);
-                              videoElement.currentTime = 0;
-                            }
-                          }
-
-                          // Notify player to unblock keyboard controls
-                          if (typeof (player as any).setAdPlaying === 'function') {
-                            (player as any).setAdPlaying(false);
-                          }
-                          props.googleAds?.onAdEnd?.();
-                        },
-                        onAdError: (error) => {
-                          setIsAdPlaying(false);
-                          isPrerollPlaying = false;
-
-                          // Remove blocker on error
-                          videoElement.removeEventListener('play', blockVideoUntilPreroll);
-
-                          // Notify player to unblock keyboard controls
-                          if (typeof (player as any).setAdPlaying === 'function') {
-                            (player as any).setAdPlaying(false);
-                          }
-                          props.googleAds?.onAdError?.(error);
-                        },
-                        onAllAdsComplete: () => {
-                          setIsAdPlaying(false);
-                          isPrerollPlaying = false;
-
-                          // Remove blocker when all ads complete
-                          videoElement.removeEventListener('play', blockVideoUntilPreroll);
-
-                          // Notify player to unblock keyboard controls
-                          if (typeof (player as any).setAdPlaying === 'function') {
-                            (player as any).setAdPlaying(false);
-                          }
-                          props.googleAds?.onAllAdsComplete?.();
-                        },
-                        onAdCuePoints: (cuePoints: number[]) => {
-                          // Check if there's a pre-roll (cue point at 0)
-                          if (cuePoints.includes(0)) {
-                            console.log('✅ Pre-roll ad detected in cue points');
-                            hasPrerollAd = true;
-                          }
-
-                          // Inject markers from VMAP cue points (if midrollTimes not provided)
-                          if (!props.googleAds?.midrollTimes || props.googleAds.midrollTimes.length === 0) {
-                            console.log('🔵 Using VMAP cue points for ad markers:', cuePoints);
-                            injectAdMarkersFromTimes(cuePoints);
-                          }
-                        },
-                      }
-                    )
-                  : new GoogleAdsManager(
-                      videoElement,
-                      adContainer,
-                      {
-                        adTagUrl: props.googleAds.adTagUrl,
-                        midrollTimes: props.googleAds.midrollTimes,
-                        companionAdSlots: props.googleAds.companionAdSlots,
-                        onAdStart: () => {
+                const adsManager = new GoogleAdsManager(
+                  videoElement,
+                  adContainer,
+                  {
+                    adTagUrl: props.googleAds.adTagUrl,
+                    midrollTimes: props.googleAds.midrollTimes,
+                    companionAdSlots: props.googleAds.companionAdSlots,
+
+                    // Periodic ad configuration
+                    liveAdBreakMode: props.googleAds.liveAdBreakMode,
+                    periodicAdInterval: props.googleAds.periodicAdInterval,
+                    syncToLiveEdge: props.googleAds.syncToLiveEdge,
+                    pauseStreamDuringAd: props.googleAds.pauseStreamDuringAd,
+                    liveEdgeOffset: props.googleAds.liveEdgeOffset,
+
+                    onAdStart: () => {
                       setIsAdPlaying(true);
 
                       // Check if this is a pre-roll ad (video time near 0)
@@ -1504,21 +1377,12 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                     },
                   }
                 );
-
-                // Initialize ads manager (different for live vs VOD)
-                if (isLiveAdMode) {
-                  // For LiveStreamAdsManager, pass HLS instance for metadata detection
-                  const hlsInstance = (player as any).hls || (player as any).getHlsInstance?.();
-                  await (adsManager as LiveStreamAdsManager).initializeLiveAds(hlsInstance);
-                  console.log('✅ Live Stream Ads initialized successfully');
-                } else {
-                  // For regular GoogleAdsManager
-                  await adsManager.initialize();
-                  console.log('✅ Google Ads initialized successfully');
-                }
-
+                
+                await adsManager.initialize();
                 adsManagerRef.current = adsManager;
 
+                console.log('✅ Google Ads initialized successfully');
+
                 // Move ad container into player wrapper for fullscreen support
                 const playerWrapper = containerRef.current?.querySelector('.uvf-player-wrapper');
                 if (playerWrapper && adContainerRef.current && adContainerRef.current.parentElement) {