unified-video-framework 1.4.405 → 1.4.407

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,26 +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 Options
-    liveAdBreakMode?: 'periodic' | 'manual';  // Live stream ad mode
-    periodicAdInterval?: number;              // Seconds between ads (default: 300)
-    syncToLiveEdge?: boolean;                 // Jump to live edge after ad (default: false)
-    liveEdgeOffset?: number;                  // Seconds behind live edge (default: 3)
-    pauseStreamDuringAd?: boolean;            // Pause stream during ad (default: true)
-
-    // 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
-    onAdBreakScheduled?: (scheduledTime: number) => void;  // Called when ad is scheduled (periodic mode)
   };
   
   // Chapter Event Callbacks
@@ -1281,82 +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,
-                        liveAdBreakMode: props.googleAds.liveAdBreakMode,
-                        periodicAdInterval: props.googleAds.periodicAdInterval,
-                        syncToLiveEdge: props.googleAds.syncToLiveEdge,
-                        liveEdgeOffset: props.googleAds.liveEdgeOffset,
-                        pauseStreamDuringAd: props.googleAds.pauseStreamDuringAd,
-                        onAdStart: () => {
-                          setIsAdPlaying(true);
-
-                          // Check if this is a pre-roll ad
-                          if (videoElement.currentTime < 1) {
-                            console.log('🎬 Pre-roll ad starting');
-                            isPrerollPlaying = true;
-                            hasPrerollAd = true;
-                            videoElement.addEventListener('play', blockVideoUntilPreroll);
-                          }
-
-                          if (typeof (player as any).setAdPlaying === 'function') {
-                            (player as any).setAdPlaying(true);
-                          }
-                          props.googleAds?.onAdStart?.();
-                        },
-                        onAdBreakScheduled: props.googleAds.onAdBreakScheduled,
-                        onAdEnd: () => {
-                          setIsAdPlaying(false);
-
-                          if (isPrerollPlaying) {
-                            console.log('✅ Pre-roll ad completed - unblocking video');
-                            isPrerollPlaying = false;
-                            videoElement.removeEventListener('play', blockVideoUntilPreroll);
-                            videoElement.play().catch(() => {});
-                          }
-
-                          if (typeof (player as any).setAdPlaying === 'function') {
-                            (player as any).setAdPlaying(false);
-                          }
-                          props.googleAds?.onAdEnd?.();
-                        },
-                        onAdError: (error) => {
-                          setIsAdPlaying(false);
-                          isPrerollPlaying = false;
-                          videoElement.removeEventListener('play', blockVideoUntilPreroll);
-                          if (typeof (player as any).setAdPlaying === 'function') {
-                            (player as any).setAdPlaying(false);
-                          }
-                          props.googleAds?.onAdError?.(error);
-                        },
-                        onAllAdsComplete: () => {
-                          setIsAdPlaying(false);
-                          isPrerollPlaying = false;
-                          videoElement.removeEventListener('play', blockVideoUntilPreroll);
-                          if (typeof (player as any).setAdPlaying === 'function') {
-                            (player as any).setAdPlaying(false);
-                          }
-                          props.googleAds?.onAllAdsComplete?.();
-                        },
-                      }
-                    )
-                  : 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)
@@ -1440,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 live edge 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) {

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

@@ -1,255 +0,0 @@
-/**
- * Live Stream Ads Manager
- * Extends GoogleAdsManager with periodic ad break support for live streams
- */
-
-import { GoogleAdsManager, GoogleAdsConfig } from './GoogleAdsManager';
-
-export interface LiveStreamAdsConfig extends GoogleAdsConfig {
-  liveAdBreakMode?: 'periodic' | 'manual';
-  periodicAdInterval?: number;  // Seconds between ads (default: 300)
-  syncToLiveEdge?: boolean;     // Jump to live edge after ad (default: false)
-  liveEdgeOffset?: number;      // Seconds behind live edge (default: 3)
-  pauseStreamDuringAd?: boolean; // Pause stream download during ads (default: true)
-
-  // Callbacks
-  onAdBreakScheduled?: (scheduledTime: number) => void;
-}
-
-export class LiveStreamAdsManager extends GoogleAdsManager {
-  private liveConfig: LiveStreamAdsConfig;
-  private isLiveStream = false;
-  private periodicAdTimer: any = null;
-  private lastAdBreakTime = 0;
-  private playbackStartTime = 0;
-  private streamStartTime = 0;
-  private hlsInstance: any = null;
-
-  constructor(video: HTMLVideoElement, adContainer: HTMLElement, config: LiveStreamAdsConfig) {
-    super(video, adContainer, config);
-    this.liveConfig = {
-      periodicAdInterval: 300,
-      syncToLiveEdge: false,
-      liveEdgeOffset: 3,
-      pauseStreamDuringAd: true,
-      ...config
-    };
-  }
-
-  /**
-   * Initialize live stream ads with periodic mode
-   */
-  async initializeLiveAds(hlsInstance?: any): Promise<void> {
-    // Initialize parent (Google IMA SDK)
-    await this.initialize();
-
-    this.isLiveStream = true;
-    this.hlsInstance = hlsInstance;
-    this.playbackStartTime = this.video.currentTime || 0;
-    this.streamStartTime = Date.now();
-
-    const mode = this.liveConfig.liveAdBreakMode || 'periodic';
-
-    console.log(`🔴 Live Stream Ads initialized`);
-    console.log(`   Mode: ${mode}`);
-    console.log(`   Periodic interval: ${this.liveConfig.periodicAdInterval}s`);
-
-    if (mode === 'periodic') {
-      this.setupPeriodicAdBreaks();
-    } else {
-      console.log('Manual mode - call triggerAdBreak() to show ads');
-    }
-  }
-
-  /**
-   * Setup periodic timer-based ad breaks
-   */
-  private setupPeriodicAdBreaks(): void {
-    const interval = this.liveConfig.periodicAdInterval || 300;
-    console.log(`⏰ Setting up periodic ad breaks every ${interval}s`);
-
-    let accumulatedPlaybackTime = 0;
-    let lastCheckTime = this.video.currentTime;
-
-    this.periodicAdTimer = setInterval(() => {
-      if (!this.video.paused && !this.isPlayingAd()) {
-        const currentTime = this.video.currentTime || 0;
-        const timeDelta = currentTime - lastCheckTime;
-
-        // Only accumulate if delta is reasonable (< 5 seconds)
-        if (timeDelta > 0 && timeDelta < 5) {
-          accumulatedPlaybackTime += timeDelta;
-        }
-
-        lastCheckTime = currentTime;
-
-        const timeSinceLastAd = accumulatedPlaybackTime - this.lastAdBreakTime;
-
-        if (timeSinceLastAd >= interval) {
-          console.log('⏰ Periodic ad break triggered');
-          console.log(`   Playback time: ${Math.floor(accumulatedPlaybackTime)}s`);
-          console.log(`   Time since last ad: ${Math.floor(timeSinceLastAd)}s`);
-
-          this.liveConfig.onAdBreakScheduled?.(accumulatedPlaybackTime);
-          this.triggerAdBreak();
-          this.lastAdBreakTime = accumulatedPlaybackTime;
-        }
-      }
-    }, 1000); // Check every second
-  }
-
-  /**
-   * Manually trigger an ad break
-   */
-  triggerAdBreak(): void {
-    if (!this.adsManager) {
-      console.error('❌ Ads manager not initialized');
-      return;
-    }
-
-    if (this.isPlayingAd()) {
-      console.warn('⚠️ Ad already playing, skipping trigger');
-      return;
-    }
-
-    console.log('🎬 Triggering ad break for live stream');
-
-    const currentTime = this.video.currentTime;
-    console.log(`📍 Stream position before ad: ${currentTime.toFixed(2)}s`);
-
-    // Pause stream download if configured
-    if (this.liveConfig.pauseStreamDuringAd) {
-      this.pauseStreamDownload();
-    }
-
-    // Store position for DVR-style resume
-    (this.video as any).__positionBeforeAd = currentTime;
-
-    // Request ads
-    this.adsManager.start();
-  }
-
-  /**
-   * Pause stream download during ad
-   */
-  private pauseStreamDownload(): void {
-    try {
-      if (this.hlsInstance && this.hlsInstance.stopLoad) {
-        console.log('⏸️ Pausing stream download during ad');
-        this.hlsInstance.stopLoad();
-      }
-    } catch (error) {
-      console.warn('Could not pause stream download:', error);
-    }
-  }
-
-  /**
-   * Resume stream download after ad
-   */
-  private resumeStreamDownload(): void {
-    try {
-      if (this.hlsInstance && this.hlsInstance.startLoad) {
-        console.log('▶️ Resuming stream download after ad');
-        this.hlsInstance.startLoad();
-      }
-    } catch (error) {
-      console.warn('Could not resume stream download:', error);
-    }
-  }
-
-  /**
-   * Override parent onAdEnd to add live stream logic
-   */
-  protected setupLiveEdgeResume(): void {
-    const originalOnAdEnd = this.liveConfig.onAdEnd;
-
-    this.liveConfig.onAdEnd = () => {
-      const positionBeforeAd = (this.video as any).__positionBeforeAd;
-
-      if (this.liveConfig.syncToLiveEdge) {
-        // Live edge sync mode - jump to live
-        console.log('📺 Ad ended, syncing to live edge (skipping content)');
-        this.resumeStreamDownload();
-        this.syncToLiveEdge();
-      } else {
-        // DVR mode - resume from pause point
-        console.log('📺 Ad ended, resuming from pause point (DVR-style)');
-        this.resumeFromPausePoint(positionBeforeAd);
-      }
-
-      // Call original callback
-      originalOnAdEnd?.();
-    };
-  }
-
-  /**
-   * Resume from paused position (DVR-style)
-   */
-  private resumeFromPausePoint(pausedTime: number): void {
-    setTimeout(() => {
-      try {
-        console.log(`⏯️ Resuming from paused position: ${pausedTime.toFixed(2)}s`);
-
-        // Resume stream downloading first
-        if (this.liveConfig.pauseStreamDuringAd) {
-          this.resumeStreamDownload();
-        }
-
-        // Resume from exact pause point
-        this.video.currentTime = pausedTime;
-
-        // Calculate how far behind live
-        if (this.hlsInstance && this.hlsInstance.liveSyncPosition !== undefined) {
-          const liveEdge = this.hlsInstance.liveSyncPosition;
-          const behindLive = liveEdge - pausedTime;
-          console.log(`   Behind live by: ${behindLive.toFixed(1)} seconds`);
-        }
-      } catch (error) {
-        console.error('❌ Error resuming from pause point:', error);
-      }
-    }, 100);
-  }
-
-  /**
-   * Sync to live edge
-   */
-  private syncToLiveEdge(): void {
-    setTimeout(() => {
-      try {
-        // Resume stream download
-        this.resumeStreamDownload();
-
-        // Get live edge position
-        let liveEdgePosition: number | undefined;
-
-        if (this.hlsInstance && this.hlsInstance.liveSyncPosition !== undefined) {
-          console.log(`📍 HLS.js live edge: ${this.hlsInstance.liveSyncPosition.toFixed(2)}s`);
-          liveEdgePosition = this.hlsInstance.liveSyncPosition;
-        }
-
-        if (liveEdgePosition !== undefined) {
-          const offset = this.liveConfig.liveEdgeOffset || 3;
-          const targetPosition = liveEdgePosition - offset;
-          console.log(`⏩ Syncing to live edge: ${targetPosition.toFixed(2)}s (offset: ${offset}s)`);
-          this.video.currentTime = targetPosition;
-        } else {
-          console.warn('⚠️ Could not determine live edge position');
-        }
-      } catch (error) {
-        console.error('❌ Error syncing to live edge:', error);
-      }
-    }, 100);
-  }
-
-  /**
-   * Cleanup
-   */
-  destroy(): void {
-    if (this.periodicAdTimer) {
-      clearInterval(this.periodicAdTimer);
-      this.periodicAdTimer = null;
-    }
-
-    super.destroy();
-  }
-}