unified-video-framework 1.4.261 → 1.4.262

package/packages/web/src/WebPlayer.ts

@@ -1154,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
@@ -1269,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);
     }
 
@@ -1436,6 +1440,26 @@ 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
    */
@@ -1454,6 +1478,18 @@ export class WebPlayer extends BasePlayer {
       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) {
@@ -1474,11 +1510,29 @@ export class WebPlayer extends BasePlayer {
       } else {
         // Show custom controls
         controlsContainerFallback.style.display = 'flex';
-        // Also show other control elements
+        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 => (el as HTMLElement).style.display = '');
+          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
@@ -1496,6 +1550,17 @@ export class WebPlayer extends BasePlayer {
       // 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();
@@ -1509,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) {
@@ -1617,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);