unified-video-framework 1.4.372 → 1.4.374

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,26 +150,29 @@ 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 => {
           return new google.ima.CompanionAdSelectionSettings();
         });
-        adsRequest.setAdWillAutoPlay(true);
-        adsRequest.setAdWillPlayMuted(false);
       }
-      
+
+      // Chrome autoplay policy: ads must start muted for autoplay to work
+      // User can unmute after ad starts
+      adsRequest.setAdWillAutoPlay(true);
+      adsRequest.setAdWillPlayMuted(true); // Start muted for Chrome compatibility
+
       // Request ads
       this.adsLoader.requestAds(adsRequest);
     } catch (error) {
@@ -194,16 +197,17 @@ 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
-    
+    // Start muted for Chrome autoplay compatibility - user can unmute via button
+    adsRenderingSettings.mute = this.video.muted;
+
     // 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 +219,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 +230,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 +241,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 +255,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 +263,54 @@ export class GoogleAdsManager {
         console.log('Ad: Content paused');
         this.isAdPlaying = true;
         this.video.pause();
+
+        // Force ad container visibility and z-index
+        if (this.adContainer) {
+          this.adContainer.style.visibility = 'visible';
+          this.adContainer.style.opacity = '1';
+          this.adContainer.style.pointerEvents = 'auto';
+          this.adContainer.style.zIndex = '2147483647';
+          console.log('✅ Ad container visibility enforced');
+        }
+
+        // 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 +322,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 +342,7 @@ export class GoogleAdsManager {
         console.log('Ad completed');
       }
     );
-    
+
     // All ads completed
     this.adsManager.addEventListener(
       google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
@@ -314,13 +351,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 +365,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 +374,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 +390,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(() => { });
   }
 
   /**
@@ -394,12 +431,27 @@ export class GoogleAdsManager {
   }
 
   /**
-   * Resize ads
+   * Resize ads - with enhanced fullscreen support
    */
-  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) {
+      const mode = viewMode || google.ima.ViewMode.NORMAL;
+
+      console.log(`📐 Resizing ads: ${width}x${height}, ViewMode: ${mode === google.ima.ViewMode.FULLSCREEN ? 'FULLSCREEN' : 'NORMAL'}`);
+
+      // Force ad container dimensions in fullscreen
+      if (this.adContainer && mode === google.ima.ViewMode.FULLSCREEN) {
+        this.adContainer.style.position = 'fixed';
+        this.adContainer.style.top = '0';
+        this.adContainer.style.left = '0';
+        this.adContainer.style.width = `${width}px`;
+        this.adContainer.style.height = `${height}px`;
+        this.adContainer.style.zIndex = '2147483647';
+        console.log('✅ Ad container forced to fullscreen dimensions');
+      }
+
+      this.adsManager.resize(width, height, mode);
     }
   }
 
@@ -427,7 +479,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 +491,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 +569,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 +605,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 +615,7 @@ export class GoogleAdsManager {
       } catch (e) {
         console.warn('resume() failed:', e);
       }
-      
+
       // Also try playing the video element directly
       if (this.video) {
         try {
@@ -584,7 +636,7 @@ export class GoogleAdsManager {
       console.error('Error resuming ad playback:', error);
     }
   }
-  
+
   /**
    * Hide unmute button
    */
@@ -600,17 +652,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

@@ -531,9 +531,41 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
 
   // Google Ads state
   const adsManagerRef = useRef<GoogleAdsManager | null>(null);
-  const adContainerRef = useRef<HTMLDivElement>(null);
+  const adContainerRef = useRef<HTMLDivElement | null>(null);
   const [isAdPlaying, setIsAdPlaying] = useState(false);
-  
+
+  // Create ad container element programmatically
+  useEffect(() => {
+    if (!props.googleAds || adContainerRef.current) return;
+
+    const adContainer = document.createElement('div');
+    adContainer.className = 'uvf-ad-container';
+    adContainer.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 999999999;
+      pointer-events: none;
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 0.2s ease, visibility 0.2s ease;
+    `;
+
+    adContainerRef.current = adContainer;
+    console.log('✅ Ad container element created');
+  }, [props.googleAds]);
+
+  // Update ad container visibility when isAdPlaying changes
+  useEffect(() => {
+    if (!adContainerRef.current) return;
+
+    adContainerRef.current.style.pointerEvents = isAdPlaying ? 'auto' : 'none';
+    adContainerRef.current.style.visibility = isAdPlaying ? 'visible' : 'hidden';
+    adContainerRef.current.style.opacity = isAdPlaying ? '1' : '0';
+  }, [isAdPlaying]);
+
   /**
    * Generate ad chapter segments from googleAds cue points
    * Handles pre-roll (0), mid-rolls, and post-roll (-1)
@@ -1165,8 +1197,59 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
           if (props.onBuffering && typeof (player as any).on === 'function') {
             (player as any).on('onBuffering', props.onBuffering);
           }
-          if (props.onFullscreenChange && typeof (player as any).on === 'function') {
-            (player as any).on('onFullscreenChanged', props.onFullscreenChange);
+          if (typeof (player as any).on === 'function') {
+            (player as any).on('onFullscreenChanged', (isFullscreen: boolean) => {
+              console.log(`🔄 Fullscreen changed: ${isFullscreen}`);
+
+              // Force ad container positioning for fullscreen
+              if (adContainerRef.current) {
+                const adContainer = adContainerRef.current;
+
+                if (isFullscreen) {
+                  // Fullscreen: use fixed positioning
+                  adContainer.style.position = 'fixed';
+                  adContainer.style.top = '0';
+                  adContainer.style.left = '0';
+                  adContainer.style.width = '100vw';
+                  adContainer.style.height = '100vh';
+                  adContainer.style.zIndex = '2147483647';
+                  console.log('✅ Ad container: fullscreen positioning applied');
+                } else {
+                  // Normal: use absolute positioning
+                  adContainer.style.position = 'absolute';
+                  adContainer.style.top = '0';
+                  adContainer.style.left = '0';
+                  adContainer.style.right = '0';
+                  adContainer.style.bottom = '0';
+                  adContainer.style.width = '';
+                  adContainer.style.height = '';
+                  adContainer.style.zIndex = '999999999';
+                  console.log('✅ Ad container: normal positioning restored');
+                }
+              }
+
+              // Resize Google Ads if active
+              if (adsManagerRef.current) {
+                const google = (window as any).google;
+                if (google && google.ima) {
+                  const width = isFullscreen
+                    ? window.screen.width
+                    : (containerRef.current?.clientWidth || window.innerWidth);
+                  const height = isFullscreen
+                    ? window.screen.height
+                    : (containerRef.current?.clientHeight || window.innerHeight);
+                  const viewMode = isFullscreen
+                    ? google.ima.ViewMode.FULLSCREEN
+                    : google.ima.ViewMode.NORMAL;
+
+                  adsManagerRef.current.resize(width, height, viewMode);
+                  console.log(`✅ Ads resized: ${width}x${height}, ViewMode: ${viewMode === google.ima.ViewMode.FULLSCREEN ? 'FULLSCREEN' : 'NORMAL'}`);
+                }
+              }
+
+              // Call user's fullscreen callback
+              props.onFullscreenChange?.(isFullscreen);
+            });
           }
           if (props.onPictureInPictureChange && typeof (player as any).on === 'function') {
             (player as any).on('onPictureInPicturechange', props.onPictureInPictureChange);
@@ -1249,18 +1332,47 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                 
                 await adsManager.initialize();
                 adsManagerRef.current = adsManager;
-                
+
                 console.log('Google Ads initialized successfully');
-                
-                // Initialize ad display container on first play
+
+                // Inject ad container into player wrapper (not as sibling)
+                const playerWrapper = containerRef.current?.querySelector('.uvf-player-wrapper');
+                if (playerWrapper && adContainerRef.current) {
+                  // Move ad container INSIDE player wrapper so it inherits fullscreen context
+                  playerWrapper.appendChild(adContainerRef.current);
+                  console.log('✅ Ad container injected into player wrapper');
+                }
+
+                // Initialize ad display container on first user interaction
+                // Chrome requires this to be called on a user gesture
+                let adContainerInitialized = false;
+
+                const initAdsOnUserGesture = () => {
+                  if (!adContainerInitialized && adsManagerRef.current) {
+                    console.log('Initializing ad container on user gesture');
+                    try {
+                      adsManagerRef.current.initAdDisplayContainer();
+                      adContainerInitialized = true;
+                    } catch (err) {
+                      console.warn('Ad container init error:', err);
+                    }
+                  }
+                };
+
                 const handleFirstPlay = () => {
-                  if (adsManagerRef.current) {
-                    adsManagerRef.current.initAdDisplayContainer();
+                  initAdsOnUserGesture();
+                  if (adsManagerRef.current && adContainerInitialized) {
                     adsManagerRef.current.requestAds();
                   }
                   videoElement.removeEventListener('play', handleFirstPlay);
+                  videoElement.removeEventListener('click', initAdsOnUserGesture);
+                  adContainerRef.current?.removeEventListener('click', initAdsOnUserGesture);
                 };
+
+                // Listen for both play and click events to ensure we catch user gesture
                 videoElement.addEventListener('play', handleFirstPlay, { once: true });
+                videoElement.addEventListener('click', initAdsOnUserGesture, { once: true });
+                adContainerRef.current?.addEventListener('click', initAdsOnUserGesture, { once: true });
               } catch (adsError) {
                 console.error('Failed to initialize Google Ads:', adsError);
                 props.googleAds?.onAdError?.(adsError);
@@ -1597,29 +1709,13 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
       }}
     >
       {/* Video Player */}
-      <div 
-        ref={containerRef} 
+      <div
+        ref={containerRef}
         className={`uvf-responsive-container ${props.className || ''}`}
         style={responsiveStyle}
       />
-      
-      {/* Google Ads Container - positioned over the video player and controls */}
-      {props.googleAds && (
-        <div 
-          ref={adContainerRef}
-          className="uvf-ad-container"
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 2147483647, // Maximum z-index - ads must be on top of everything
-            pointerEvents: isAdPlaying ? 'auto' : 'none', // Allow interaction only when ad is playing
-            display: isAdPlaying ? 'block' : 'none', // Hide container when no ad
-          }}
-        />
-      )}
+
+      {/* Ad container will be programmatically injected into player wrapper */}
 
 
       {/* EPG Overlay - Full-screen glassmorphic overlay */}