unified-video-framework 1.4.373 → 1.4.375

package/packages/web/src/WebPlayer.ts

@@ -3469,7 +3469,7 @@ export class WebPlayer extends BasePlayer {
         position: relative;
         width: 100%;
         background: #000;
-        overflow: hidden;
+        overflow: visible; /* Allow ads to render on top - changed from hidden */
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         /* Theme variables (can be overridden at runtime) */
         --uvf-accent-1: #ff0000;
@@ -5607,7 +5607,7 @@ export class WebPlayer extends BasePlayer {
           left: 0 !important;
           width: 100vw !important;
           height: 100vh !important;
-          z-index: 2147483647;
+          z-index: 2147483646; /* One below ad container (2147483647) */
           background: #000;
         }
         
@@ -5617,6 +5617,8 @@ export class WebPlayer extends BasePlayer {
           max-width: none !important;
           max-height: none !important;
           aspect-ratio: unset !important;
+          z-index: 1; /* Below everything else */
+          overflow: hidden; /* Keep overflow hidden for video clipping */
         }
         
         .uvf-player-wrapper.uvf-fullscreen .uvf-video {
@@ -5669,7 +5671,23 @@ export class WebPlayer extends BasePlayer {
         .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
         .uvf-player-wrapper.uvf-fullscreen .uvf-top-gradient,
         .uvf-player-wrapper.uvf-fullscreen .uvf-controls-gradient {
-          z-index: 2147483647; /* Maximum z-index value */
+          z-index: 2147483645; /* Below ads (2147483647), above video */
+        }
+
+        /* Ensure ad container is always on top in fullscreen */
+        .uvf-player-wrapper.uvf-fullscreen .uvf-ad-container {
+          position: fixed !important;
+          top: 0 !important;
+          left: 0 !important;
+          width: 100vw !important;
+          height: 100vh !important;
+          z-index: 2147483647 !important; /* Maximum - always on top */
+          pointer-events: auto;
+        }
+
+        /* Ensure video container doesn't block ads */
+        .uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
+          z-index: 1; /* Below everything */
         }
         
         .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {

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,53 @@ 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 and add to DOM
+  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;
+
+    // Temporarily add to container until player wrapper is ready
+    if (containerRef.current) {
+      containerRef.current.appendChild(adContainer);
+      console.log('✅ Ad container element created and added to DOM');
+    }
+
+    return () => {
+      // Cleanup: remove ad container on unmount
+      if (adContainer.parentElement) {
+        adContainer.parentElement.removeChild(adContainer);
+      }
+    };
+  }, [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 +1209,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);
             });
@@ -1199,26 +1272,43 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
             // Small delay to ensure ad container is properly mounted in DOM
             setTimeout(async () => {
               try {
+                // Ensure ad container exists
+                if (!adContainerRef.current) {
+                  console.error('❌ Ad container ref is null - cannot initialize ads');
+                  return;
+                }
+
                 const adContainer = adContainerRef.current;
                 const videoElement = (player as any).video || (player as any).getVideoElement?.();
-                
+
                 // Validate both elements exist and are in the DOM
                 if (!adContainer) {
-                  console.warn('Ad container element not found');
+                  console.error('❌ Ad container element not found');
                   return;
                 }
-                
+
                 if (!videoElement) {
-                  console.warn('Video element not found');
+                  console.error('❌ Video element not found');
                   return;
                 }
-                
+
                 if (!document.body.contains(adContainer)) {
-                  console.warn('Ad container not attached to DOM');
-                  return;
+                  console.warn('⚠️ Ad container not attached to DOM, attempting to attach...');
+                  // Try to add it to container if not in DOM
+                  if (containerRef.current) {
+                    containerRef.current.appendChild(adContainer);
+                    console.log('✅ Ad container attached to DOM');
+                  } else {
+                    console.error('❌ Cannot attach ad container - containerRef is null');
+                    return;
+                  }
                 }
-                
-                console.log('Initializing Google Ads...', { adContainer, videoElement });
+
+                console.log('✅ Initializing Google Ads...', {
+                  adContainer: adContainer.className,
+                  videoElement: videoElement.tagName,
+                  adContainerInDOM: document.body.contains(adContainer)
+                });
                 
                 const adsManager = new GoogleAdsManager(
                   videoElement,
@@ -1271,18 +1361,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 +1738,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 */}