unified-video-framework 1.4.373 → 1.4.374

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

@@ -166,10 +166,13 @@ export class GoogleAdsManager {
         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) {
@@ -199,7 +202,8 @@ export class GoogleAdsManager {
     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);
@@ -260,6 +264,15 @@ export class GoogleAdsManager {
         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) {
@@ -418,13 +431,26 @@ export class GoogleAdsManager {
   }
 
   /**
-   * Resize ads
+   * Resize ads - with enhanced fullscreen support
    */
   resize(width: number, height: number, viewMode?: any): void {
     const google = (window as any).google;
     if (this.adsManager && google && google.ima) {
-      // Use provided viewMode or default to NORMAL
       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);
     }
   }

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,27 +1197,56 @@ 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') {
+          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 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 
+                  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);
             });
@@ -1271,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);
@@ -1619,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 */}