unified-video-framework 1.4.371 → 1.4.373

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

@@ -13,18 +13,18 @@
 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;
@@ -48,11 +48,11 @@ export class GoogleAdsManager {
     this.video = video;
     this.adContainer = adContainer;
     this.config = config;
-    
+
     // Add focus handler to resume ads after click-through
     this.setupFocusHandler();
   }
-  
+
   /**
    * Setup focus handler to resume ads when window regains focus
    */
@@ -66,7 +66,7 @@ export class GoogleAdsManager {
         setTimeout(() => this.resumeAdPlayback(), 200);
       }
     });
-    
+
     // Also check visibility change (tab switch)
     document.addEventListener('visibilitychange', () => {
       if (!document.hidden && this.isAdPlaying) {
@@ -113,30 +113,30 @@ export class GoogleAdsManager {
    */
   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) {
@@ -150,17 +150,17 @@ export class GoogleAdsManager {
    */
   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 => {
@@ -169,7 +169,7 @@ export class GoogleAdsManager {
         adsRequest.setAdWillAutoPlay(true);
         adsRequest.setAdWillPlayMuted(false);
       }
-      
+
       // Request ads
       this.adsLoader.requestAds(adsRequest);
     } catch (error) {
@@ -194,16 +194,16 @@ export class GoogleAdsManager {
    */
   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;
     adsRenderingSettings.mute = false;  // ✅ Enable audio for ads
-    
+
     // Get the ads manager
     this.adsManager = event.getAdsManager(this.video, adsRenderingSettings);
-    
+
     // Extract cue points (ad break times) from VMAP/ad server
     try {
       const cuePoints = this.adsManager.getCuePoints();
@@ -215,9 +215,9 @@ export class GoogleAdsManager {
           if (time === -1) return -1;         // Post-roll (will be converted to video duration later)
           return time;                         // Mid-roll at specific time
         });
-        
+
         console.log('📍 Ad cue points detected (pre/mid/post):', allCuePoints);
-        
+
         // Notify callback with all cue points
         if (this.config.onAdCuePoints) {
           this.config.onAdCuePoints(allCuePoints);
@@ -226,10 +226,10 @@ export class GoogleAdsManager {
     } catch (error) {
       console.warn('Could not extract ad cue points:', error);
     }
-    
+
     // Setup ads manager event listeners
     this.setupAdsManagerListeners();
-    
+
     try {
       // Initialize ads manager
       this.adsManager.init(
@@ -237,12 +237,12 @@ export class GoogleAdsManager {
         this.video.clientHeight,
         google.ima.ViewMode.NORMAL
       );
-      
+
       // Start ads
       this.adsManager.start();
     } catch (error) {
       console.error('Error starting ads:', error);
-      this.video.play().catch(() => {});
+      this.video.play().catch(() => { });
     }
   }
 
@@ -251,7 +251,7 @@ export class GoogleAdsManager {
    */
   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,
@@ -259,21 +259,45 @@ export class GoogleAdsManager {
         console.log('Ad: Content paused');
         this.isAdPlaying = true;
         this.video.pause();
+
+        // Strict enforcement: Prevent video from playing during ads
+        const preventPlayDuringAd = (e: Event) => {
+          if (this.isAdPlaying) {
+            e.preventDefault();
+            this.video.pause();
+            console.warn('Blocked video play attempt during ad');
+          }
+        };
+
+        // Add play event listener to block any play attempts
+        this.video.addEventListener('play', preventPlayDuringAd);
+
+        // Store cleanup function to remove listener later
+        (this.video as any).__adPlayBlocker = preventPlayDuringAd;
+
         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;
+
+        // Remove play blocker
+        const preventPlayDuringAd = (this.video as any).__adPlayBlocker;
+        if (preventPlayDuringAd) {
+          this.video.removeEventListener('play', preventPlayDuringAd);
+          delete (this.video as any).__adPlayBlocker;
+        }
+
         this.config.onAdEnd?.();
-        this.video.play().catch(() => {});
+        this.video.play().catch(() => { });
       }
     );
-    
+
     // Ad started
     this.adsManager.addEventListener(
       google.ima.AdEvent.Type.STARTED,
@@ -285,19 +309,19 @@ export class GoogleAdsManager {
           skippable: ad.getSkipTimeOffset() !== -1,
           title: ad.getTitle(),
         });
-        
+
         // Sync ads mute state with video element
         this.isMuted = this.video.muted;
         console.log(`Ad started - video.muted=${this.video.muted}, isMuted=${this.isMuted}`);
-        
+
         // Check if video is actually muted and show unmute button only then
         if (this.isMuted) {
           this.showUnmuteButton();
         }
-        
+
       }
     );
-    
+
     // Ad completed
     this.adsManager.addEventListener(
       google.ima.AdEvent.Type.COMPLETE,
@@ -305,7 +329,7 @@ export class GoogleAdsManager {
         console.log('Ad completed');
       }
     );
-    
+
     // All ads completed
     this.adsManager.addEventListener(
       google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
@@ -314,13 +338,13 @@ export class GoogleAdsManager {
         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,
@@ -328,7 +352,7 @@ export class GoogleAdsManager {
         console.log('Ad skipped by user');
       }
     );
-    
+
     // Ad paused (by click-through)
     this.adsManager.addEventListener(
       google.ima.AdEvent.Type.PAUSED,
@@ -337,7 +361,7 @@ export class GoogleAdsManager {
         // Don't mark as not playing - keep isAdPlaying true so we can resume
       }
     );
-    
+
     // Ad playing (resume after pause)
     this.adsManager.addEventListener(
       google.ima.AdEvent.Type.PLAYING,
@@ -353,17 +377,17 @@ export class GoogleAdsManager {
   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(() => {});
+    this.video.play().catch(() => { });
   }
 
   /**
@@ -396,10 +420,12 @@ export class GoogleAdsManager {
   /**
    * Resize ads
    */
-  resize(width: number, height: number): void {
+  resize(width: number, height: number, viewMode?: any): void {
     const google = (window as any).google;
-    if (this.adsManager) {
-      this.adsManager.resize(width, height, google.ima.ViewMode.NORMAL);
+    if (this.adsManager && google && google.ima) {
+      // Use provided viewMode or default to NORMAL
+      const mode = viewMode || google.ima.ViewMode.NORMAL;
+      this.adsManager.resize(width, height, mode);
     }
   }
 
@@ -427,7 +453,7 @@ export class GoogleAdsManager {
     if (this.unmuteButton) {
       this.unmuteButton.remove();
     }
-    
+
     // Create unmute button (matching WebPlayer.ts style)
     this.unmuteButton = document.createElement('button');
     this.unmuteButton.id = 'ad-unmute-btn';
@@ -439,13 +465,13 @@ export class GoogleAdsManager {
       </svg>
       <span class="uvf-unmute-text">Tap to unmute</span>
     `;
-    
+
     // Click handler to unmute
     this.unmuteButton.addEventListener('click', (e) => {
       e.stopPropagation();
       this.toggleAdMute();
     });
-    
+
     // Add styles if not already added
     if (!document.getElementById('uvf-unmute-styles')) {
       const style = document.createElement('style');
@@ -517,33 +543,33 @@ export class GoogleAdsManager {
       `;
       document.head.appendChild(style);
     }
-    
+
     // Add to ad container
     this.adContainer.appendChild(this.unmuteButton);
     console.log('Unmute button displayed (matching player style)');
   }
-  
+
   /**
    * Toggle ad mute state
    */
   private toggleAdMute(): void {
     this.isMuted = !this.isMuted;
-    
+
     if (this.adsManager) {
       this.adsManager.setVolume(this.isMuted ? 0 : 1);
       console.log(`Ad ${this.isMuted ? 'muted' : 'unmuted'}`);
     }
-    
+
     // Sync mute state with video element
     this.video.muted = this.isMuted;
-    
+
     // Hide button if unmuted
     if (!this.isMuted && this.unmuteButton) {
       this.unmuteButton.remove();
       this.unmuteButton = null;
     }
   }
-  
+
   /**
    * Resume ad playback after click-through
    */
@@ -553,9 +579,9 @@ export class GoogleAdsManager {
       if (!this.adsManager || !this.isAdPlaying) {
         return;
       }
-      
+
       console.log('Attempting to resume ad playback...');
-      
+
       // Try multiple resume methods
       try {
         this.adsManager.resume();
@@ -563,7 +589,7 @@ export class GoogleAdsManager {
       } catch (e) {
         console.warn('resume() failed:', e);
       }
-      
+
       // Also try playing the video element directly
       if (this.video) {
         try {
@@ -584,7 +610,7 @@ export class GoogleAdsManager {
       console.error('Error resuming ad playback:', error);
     }
   }
-  
+
   /**
    * Hide unmute button
    */
@@ -600,17 +626,17 @@ export class GoogleAdsManager {
    */
   destroy(): void {
     this.hideUnmuteButton();
-    
+
     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/chapters/CreditsButtonController.ts

@@ -417,7 +417,7 @@ export class CreditsButtonController {
             backgroundColor: 'rgba(255, 255, 255, 0.9)',
             width: '0%',
             transition: 'width 1s linear',
-            borderRadius: '0 0 6px 6px'
+            borderRadius: '6px'
         });
 
         return progressBar;

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

@@ -1166,7 +1166,29 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
             (player as any).on('onBuffering', props.onBuffering);
           }
           if (props.onFullscreenChange && typeof (player as any).on === 'function') {
-            (player as any).on('onFullscreenChanged', props.onFullscreenChange);
+            (player as any).on('onFullscreenChanged', (isFullscreen: boolean) => {
+              // Resize Google Ads if active
+              if (adsManagerRef.current) {
+                const google = (window as any).google;
+                if (google && google.ima) {
+                  const container = containerRef.current;
+                  const width = isFullscreen 
+                    ? window.screen.width 
+                    : (container?.clientWidth || window.innerWidth);
+                  const height = isFullscreen 
+                    ? window.screen.height 
+                    : (container?.clientHeight || window.innerHeight);
+                  const viewMode = isFullscreen 
+                    ? google.ima.ViewMode.FULLSCREEN 
+                    : google.ima.ViewMode.NORMAL;
+                  
+                  adsManagerRef.current.resize(width, height, viewMode);
+                }
+              }
+              
+              // Call user's fullscreen callback
+              props.onFullscreenChange?.(isFullscreen);
+            });
           }
           if (props.onPictureInPictureChange && typeof (player as any).on === 'function') {
             (player as any).on('onPictureInPicturechange', props.onPictureInPictureChange);