unified-video-framework 1.4.260 → 1.4.262

package/packages/web/src/WebPlayer.ts

@@ -179,9 +179,13 @@ export class WebPlayer extends BasePlayer {
     console.log('WebPlayer.initialize called with config:', config);
     
     // Set useCustomControls based on config before calling parent initialize
+    // Check both customControls (specific) and controls (standard) options
     if (config && config.customControls !== undefined) {
       this.useCustomControls = config.customControls;
-      console.log('Custom controls set to:', this.useCustomControls);
+      console.log('Custom controls set via customControls to:', this.useCustomControls);
+    } else if (config && config.controls !== undefined) {
+      this.useCustomControls = config.controls;
+      console.log('Custom controls set via controls to:', this.useCustomControls);
     }
     
     // Configure settings menu options
@@ -1150,16 +1154,18 @@ export class WebPlayer extends BasePlayer {
       this.video.style.display = 'none';
     }
 
-    // Create iframe container
+    // Create iframe container with proper z-index based on controls configuration
     const iframeContainer = document.createElement('div');
     iframeContainer.id = `youtube-player-${videoId}`;
+    const useNativeControls = this.config.youtubeNativeControls === true;
     iframeContainer.style.cssText = `
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: 1;
+      z-index: ${useNativeControls ? '1' : '0'};
+      pointer-events: ${useNativeControls ? 'auto' : 'none'};
     `;
 
     // Remove existing YouTube player if any
@@ -1265,6 +1271,8 @@ export class WebPlayer extends BasePlayer {
       setTimeout(() => {
         this.updateMetadataUI();
         this.updateControlsVisibility();
+        // Ensure UI elements have correct z-index for YouTube integration
+        this.ensureUILayering();
       }, 500);
     }
 
@@ -1432,17 +1440,127 @@ export class WebPlayer extends BasePlayer {
     }
   }
   
+  /**
+   * Ensure all UI elements have correct z-index for proper layering
+   */
+  private ensureUILayering(): void {
+    if (!this.youtubePlayer) return;
+    
+    const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container') as HTMLElement;
+    if (!videoContainer) return;
+    
+    // Ensure all custom UI elements are above the YouTube iframe
+    const uiElements = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator, .uvf-controls-bar');
+    uiElements.forEach(el => {
+      const element = el as HTMLElement;
+      element.style.zIndex = '2';
+      element.style.position = 'relative';
+    });
+    
+    this.debugLog('UI layering ensured for YouTube player');
+  }
+  
   /**
    * Update controls visibility based on YouTube Live status and config
    */
   private updateControlsVisibility(): void {
-    const controlsContainer = document.getElementById('uvf-controls-container');
-    if (!controlsContainer) return;
+    const controlsContainer = document.getElementById('uvf-controls');
+    if (!controlsContainer) {
+      this.debugWarn('Controls container not found, looking for .uvf-controls-bar');
+      const controlsBar = this.playerWrapper?.querySelector('.uvf-controls-bar') as HTMLElement;
+      if (!controlsBar) {
+        this.debugWarn('Controls bar not found either, cannot update controls visibility');
+        return;
+      }
+      // Use the controls bar as fallback
+      const controlsContainerFallback = controlsBar;
+      
+      if (this.youtubePlayer && this.useYouTubeNativeControls) {
+        // Hide custom controls
+        controlsContainerFallback.style.display = 'none';
+        
+        // Lower YouTube wrapper z-index and pointer events appropriately
+        const videoId = this.source?.metadata?.videoId;
+        if (videoId) {
+          const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`) as HTMLElement;
+          if (ytWrapper) {
+            ytWrapper.style.zIndex = '1';
+            ytWrapper.style.pointerEvents = 'auto';
+            ytWrapper.style.position = 'absolute';
+          }
+        }
+        
+        // Also hide any other control elements
+        const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container') as HTMLElement;
+        if (videoContainer) {
+          const allControls = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator');
+          allControls.forEach(el => (el as HTMLElement).style.display = 'none');
+        }
+        
+        // Only recreate YouTube player if it doesn't currently have native controls
+        if (this.currentYouTubeControlsState !== true) {
+          this.recreateYouTubePlayerWithNativeControls();
+          this.currentYouTubeControlsState = true;
+        }
+        
+        this.debugLog('✅ YouTube native controls enabled', {
+          isLive: this.isYouTubeLive,
+          reason: this.config.youtubeNativeControls === true ? 'Explicitly enabled in config' : 'Live stream detected'
+        });
+      } else {
+        // Show custom controls
+        controlsContainerFallback.style.display = 'flex';
+        controlsContainerFallback.style.zIndex = '2';
+        
+        // Raise YouTube wrapper below UI and disable pointer events so UI is clickable
+        const videoId = this.source?.metadata?.videoId;
+        if (videoId) {
+          const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`) as HTMLElement;
+          if (ytWrapper) {
+            ytWrapper.style.zIndex = '0';
+            ytWrapper.style.pointerEvents = 'none';
+            ytWrapper.style.position = 'absolute';
+          }
+        }
+        
+        // Also show other control elements and ensure they are above the iframe
+        const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container') as HTMLElement;
+        if (videoContainer) {
+          const allControls = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator');
+          allControls.forEach(el => {
+            const elh = el as HTMLElement;
+            elh.style.display = '';
+            elh.style.zIndex = '2';
+            elh.style.position = 'relative';
+          });
+        }
+        
+        // Only recreate YouTube player if it currently has native controls
+        if (this.currentYouTubeControlsState !== false) {
+          this.recreateYouTubePlayerWithoutNativeControls();
+          this.currentYouTubeControlsState = false;
+        }
+        
+        this.debugLog('✅ Custom controls enabled for YouTube video');
+      }
+      return;
+    }
     
     if (this.youtubePlayer && this.useYouTubeNativeControls) {
       // Hide custom controls and show YouTube native controls
       controlsContainer.style.display = 'none';
       
+      // Lower YouTube wrapper z-index and enable pointer events
+      const videoId = this.source?.metadata?.videoId;
+      if (videoId) {
+        const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`) as HTMLElement;
+        if (ytWrapper) {
+          ytWrapper.style.zIndex = '1';
+          ytWrapper.style.pointerEvents = 'auto';
+          ytWrapper.style.position = 'absolute';
+        }
+      }
+      
       // Only recreate YouTube player if it doesn't currently have native controls
       if (this.currentYouTubeControlsState !== true) {
         this.recreateYouTubePlayerWithNativeControls();
@@ -1456,6 +1574,30 @@ export class WebPlayer extends BasePlayer {
     } else {
       // Show custom controls and ensure YouTube native controls are disabled
       controlsContainer.style.display = 'flex';
+      controlsContainer.style.zIndex = '2';
+      controlsContainer.style.position = 'relative';
+      
+      // Ensure YouTube iframe is behind controls and disable pointer events
+      const videoId = this.source?.metadata?.videoId;
+      if (videoId) {
+        const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`) as HTMLElement;
+        if (ytWrapper) {
+          ytWrapper.style.zIndex = '0';
+          ytWrapper.style.pointerEvents = 'none';
+          ytWrapper.style.position = 'absolute';
+        }
+      }
+      
+      // Ensure other UI elements are also above the iframe
+      const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container') as HTMLElement;
+      if (videoContainer) {
+        const allControls = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator');
+        allControls.forEach(el => {
+          const elh = el as HTMLElement;
+          elh.style.zIndex = '2';
+          elh.style.position = 'relative';
+        });
+      }
       
       // Only recreate YouTube player if it currently has native controls
       if (this.currentYouTubeControlsState !== false) {
@@ -1564,7 +1706,8 @@ export class WebPlayer extends BasePlayer {
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: 1;
+      z-index: 0;
+      pointer-events: none;
     `;
     container.appendChild(iframeContainer);