unified-video-framework 1.4.390 → 1.4.391

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

@@ -26,6 +26,7 @@ export interface GoogleAdsConfig {
   }>;
 
   // Callbacks
+  onPrerollAdsReady?: (hasPreroll: boolean) => void;  // Called when pre-roll status is determined
   onAdStart?: () => void;
   onAdEnd?: () => void;
   onAdError?: (error: any) => void;
@@ -222,13 +223,32 @@ export class GoogleAdsManager {
 
         console.log('📍 Ad cue points detected (pre/mid/post):', allCuePoints);
 
+        // Check for pre-roll ad (cue point at time 0)
+        const hasPreroll = allCuePoints.includes(0);
+        console.log(`🎬 Pre-roll ad detected: ${hasPreroll}`);
+
+        // Notify pre-roll callback immediately
+        if (this.config.onPrerollAdsReady) {
+          this.config.onPrerollAdsReady(hasPreroll);
+        }
+
         // Notify callback with all cue points
         if (this.config.onAdCuePoints) {
           this.config.onAdCuePoints(allCuePoints);
         }
+      } else {
+        // No cue points = no pre-roll
+        console.log('📍 No ad cue points - no pre-roll ads');
+        if (this.config.onPrerollAdsReady) {
+          this.config.onPrerollAdsReady(false);
+        }
       }
     } catch (error) {
       console.warn('Could not extract ad cue points:', error);
+      // Assume no pre-roll on error
+      if (this.config.onPrerollAdsReady) {
+        this.config.onPrerollAdsReady(false);
+      }
     }
 
     // Setup ads manager event listeners
@@ -391,6 +411,11 @@ export class GoogleAdsManager {
     const error = event.getError?.();
     console.error('Ad error:', error?.getMessage?.() || error);
 
+    // Notify pre-roll callback on error (no ads available)
+    if (this.config.onPrerollAdsReady) {
+      this.config.onPrerollAdsReady(false);
+    }
+
     this.config.onAdError?.(error);
 
     // Destroy ads manager on error

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

@@ -533,19 +533,6 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
   const adsManagerRef = useRef<GoogleAdsManager | null>(null);
   const adContainerRef = useRef<HTMLDivElement | null>(null);
   const [isAdPlaying, setIsAdPlaying] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Control loading spinner for pre-roll ads
-  useEffect(() => {
-    const loadingElement = document.getElementById('uvf-loading');
-    if (loadingElement) {
-      if (isLoading) {
-        loadingElement.classList.add('active');
-      } else {
-        loadingElement.classList.remove('active');
-      }
-    }
-  }, [isLoading]);
 
   /**
    * Generate ad chapter segments from googleAds cue points
@@ -1274,17 +1261,15 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                     adTagUrl: props.googleAds.adTagUrl,
                     midrollTimes: props.googleAds.midrollTimes,
                     companionAdSlots: props.googleAds.companionAdSlots,
-                    onAdStart: () => {
-                      // Clear the fallback timeout since a pre-roll ad is actually starting
-                      if (prerollFallbackTimeout) {
-                        clearTimeout(prerollFallbackTimeout);
-                        prerollFallbackTimeout = null;
-                        console.log('✅ Pre-roll ad started, fallback timeout cleared');
-                      }
-
-                      // Hide loading since ad is now playing
-                      setIsLoading(false);
+                    onPrerollAdsReady: (hasPreroll: boolean) => {
+                      console.log(`🎬 Pre-roll status: ${hasPreroll ? 'EXISTS' : 'NONE'}`);
 
+                      // Notify player to unblock playback
+                      if (typeof (player as any).onPrerollAdsResolved === 'function') {
+                        (player as any).onPrerollAdsResolved(hasPreroll);
+                      }
+                    },
+                    onAdStart: () => {
                       setIsAdPlaying(true);
                       // Notify player to block keyboard controls
                       if (typeof (player as any).setAdPlaying === 'function') {
@@ -1301,15 +1286,6 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                       props.googleAds?.onAdEnd?.();
                     },
                     onAdError: (error) => {
-                      // Clear the fallback timeout on ad error
-                      if (prerollFallbackTimeout) {
-                        clearTimeout(prerollFallbackTimeout);
-                        prerollFallbackTimeout = null;
-                      }
-
-                      // Hide loading on error
-                      setIsLoading(false);
-
                       setIsAdPlaying(false);
                       // Notify player to unblock keyboard controls
                       if (typeof (player as any).setAdPlaying === 'function') {
@@ -1351,7 +1327,6 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                 // Initialize ad display container on first user interaction
                 // Chrome requires this to be called on a user gesture
                 let adContainerInitialized = false;
-                let prerollFallbackTimeout: NodeJS.Timeout | null = null;
 
                 const initAdsOnUserGesture = () => {
                   if (!adContainerInitialized && adsManagerRef.current) {
@@ -1366,25 +1341,33 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                 };
 
                 const handleFirstPlay = () => {
+                  console.log('🎬 handleFirstPlay triggered');
+
                   initAdsOnUserGesture();
-                  if (adsManagerRef.current && adContainerInitialized) {
-                    // Show loading while pre-roll ads are being fetched and prepared
-                    console.log('⏳ Loading pre-roll ads...');
-                    setIsLoading(true);
-                    videoElement.pause();
-
-                    // Safety mechanism: If no pre-roll ad starts within 2 seconds, hide loading and resume video
-                    // This handles cases where only mid-roll or post-roll ads are configured
-                    prerollFallbackTimeout = setTimeout(() => {
-                      if (!adsManagerRef.current?.isPlayingAd()) {
-                        console.log('⏩ No pre-roll ad detected, resuming normal playback');
-                        setIsLoading(false);
-                        videoElement.play().catch(() => {});
-                      }
-                    }, 2000);
 
-                    adsManagerRef.current.requestAds();
+                  if (adsManagerRef.current && adContainerInitialized) {
+                    // Check if player supports pre-roll blocking
+                    if (typeof (player as any).waitForPrerollAds === 'function') {
+                      console.log('⏳ Blocking play, waiting for pre-roll ads...');
+
+                      // Block playback until ads are ready
+                      (player as any).waitForPrerollAds(() => {
+                        console.log('✅ Pre-roll resolved, resuming playback');
+                        videoElement.play().catch(err => {
+                          console.error('Error playing after ads resolved:', err);
+                        });
+                      });
+
+                      // Request ads (async - will trigger onPrerollAdsReady callback)
+                      adsManagerRef.current.requestAds();
+                    } else {
+                      // Fallback: legacy behavior if method not available
+                      console.warn('⚠️ waitForPrerollAds not available, using legacy flow');
+                      adsManagerRef.current.requestAds();
+                    }
                   }
+
+                  // Remove listeners
                   videoElement.removeEventListener('play', handleFirstPlay);
                   videoElement.removeEventListener('click', initAdsOnUserGesture);
                   adContainerRef.current?.removeEventListener('click', initAdsOnUserGesture);