unified-video-framework 1.4.450 → 1.4.452

package/packages/web/src/WebPlayer.ts

@@ -1733,34 +1733,73 @@ export class WebPlayer extends BasePlayer {
 
     container.appendChild(iframeContainer);
 
-    // Create transparent overlay to block YouTube's native controls (when custom controls are enabled)
-    if (!this.youtubeNativeControls) {
+    // Create transparent overlay for YouTube videos
+    // When youtubeNativeControls=false: blocks YouTube controls and handles play/pause
+    // When youtubeNativeControls=true with customControls=true: allows hover detection for our controls
+    if (!this.youtubeNativeControls || this.useCustomControls) {
       const overlay = document.createElement('div');
       overlay.className = 'uvf-youtube-overlay';
-      // Styles are handled in CSS, just set essentials here
-      overlay.style.cssText = `
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 2;
-      `;
 
-      // Handle click to toggle play/pause
-      overlay.addEventListener('click', () => {
-        this.togglePlayPause();
+      // Different behavior based on mode
+      if (!this.youtubeNativeControls) {
+        // Full blocking mode - block all YouTube controls
+        // Note: Don't set height inline - let CSS class .uvf-youtube-overlay handle it
+        // CSS sets height: calc(100% - 60px) normally, and 100% when not hovered
+        overlay.style.cssText = `
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          z-index: 2;
+          pointer-events: auto;
+          cursor: pointer;
+        `;
+
+        // Handle click to toggle play/pause
+        overlay.addEventListener('click', () => {
+          this.togglePlayPause();
+        });
+
+        // Handle double-click for fullscreen
+        overlay.addEventListener('dblclick', () => {
+          if (this.isFullscreen()) {
+            this.exitFullscreen();
+          } else {
+            this.enterFullscreen();
+          }
+        });
+      } else {
+        // Hybrid mode - transparent overlay just for hover detection, allow YouTube controls through
+        overlay.style.cssText = `
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 2;
+          pointer-events: none;
+        `;
+      }
+
+      // Always add mousemove listener for hover detection
+      overlay.addEventListener('mouseenter', () => {
+        this.playerWrapper?.classList.add('controls-visible');
       });
 
-      // Handle double-click for fullscreen
-      overlay.addEventListener('dblclick', () => {
-        if (this.isFullscreen()) {
-          this.exitFullscreen();
-        } else {
-          this.enterFullscreen();
-        }
+      overlay.addEventListener('mouseleave', () => {
+        this.playerWrapper?.classList.remove('controls-visible');
       });
 
       container.appendChild(overlay);
+
+      // Also add listeners to the container for fallback hover detection
+      container.addEventListener('mouseenter', () => {
+        this.playerWrapper?.classList.add('controls-visible');
+      });
+
+      container.addEventListener('mouseleave', () => {
+        this.playerWrapper?.classList.remove('controls-visible');
+      });
     }
 
     // Load YouTube IFrame API if not loaded
@@ -1851,6 +1890,17 @@ export class WebPlayer extends BasePlayer {
       this.hideCustomControls();
     } else if (this.youtubeNativeControls && this.useCustomControls) {
       this.debugLog('[YouTube] Hybrid mode - both YouTube native controls and custom controls enabled');
+    } else if (!this.youtubeNativeControls && this.useCustomControls && this.playerWrapper) {
+      // Custom controls only mode - ensure custom controls are visible
+      this.debugLog('[YouTube] Custom controls only mode - showing custom controls, hiding YouTube native controls');
+      this.playerWrapper.classList.remove('youtube-native-controls-mode');
+      this.playerWrapper.classList.add('youtube-custom-controls-mode');
+      this.showCustomControls();
+    } else if (!this.youtubeNativeControls && !this.useCustomControls && this.playerWrapper) {
+      // No controls mode - both YouTube native and custom controls are hidden
+      this.debugLog('[YouTube] No controls mode - all controls hidden');
+      this.playerWrapper.classList.add('youtube-native-controls-mode');
+      this.hideCustomControls();
     }
 
     // Set initial volume
@@ -2026,6 +2076,33 @@ export class WebPlayer extends BasePlayer {
     }
   }
 
+  private showCustomControls(): void {
+    // Show all custom control elements for YouTube videos when custom controls are enabled
+    const controlsBar = document.getElementById('uvf-controls') as HTMLElement;
+    if (controlsBar) {
+      controlsBar.style.display = '';
+      controlsBar.style.visibility = '';
+      controlsBar.style.opacity = '';
+      controlsBar.style.pointerEvents = '';
+    }
+
+    const topBar = document.querySelector('.uvf-top-bar') as HTMLElement;
+    if (topBar) {
+      topBar.style.display = '';
+      topBar.style.visibility = '';
+      topBar.style.opacity = '';
+      topBar.style.pointerEvents = '';
+    }
+
+    const centerPlayContainer = document.querySelector('.uvf-center-play-container') as HTMLElement;
+    if (centerPlayContainer) {
+      centerPlayContainer.style.display = '';
+      centerPlayContainer.style.visibility = '';
+      centerPlayContainer.style.opacity = '';
+      centerPlayContainer.style.pointerEvents = '';
+    }
+  }
+
   private youtubeTimeTrackingInterval: NodeJS.Timeout | null = null;
 
   private startYouTubeTimeTracking(): void {
@@ -5450,14 +5527,14 @@ export class WebPlayer extends BasePlayer {
         top: 0;
         height: 120px;
         background: linear-gradient(to bottom, var(--uvf-overlay-medium), var(--uvf-overlay-transparent));
-        z-index: 6;
+        z-index: 96;
       }
-      
+
       .uvf-controls-gradient {
         bottom: 0;
         height: 150px;
         background: linear-gradient(to top, var(--uvf-overlay-strong), var(--uvf-overlay-transparent));
-        z-index: 9;
+        z-index: 97;
       }
       
       .uvf-player-wrapper:hover .uvf-top-gradient,
@@ -5511,7 +5588,7 @@ export class WebPlayer extends BasePlayer {
         align-items: center;
         justify-content: center;
         pointer-events: none;
-        z-index: 8;
+        z-index: 99;
       }
       
       /* Center Play Button */
@@ -5581,7 +5658,7 @@ export class WebPlayer extends BasePlayer {
         left: 0;
         right: 0;
         padding: 20px;
-        z-index: 10;
+        z-index: 100;
         opacity: 0;
         transform: translateY(10px);
         transition: all 0.3s ease;
@@ -6970,7 +7047,7 @@ export class WebPlayer extends BasePlayer {
         left: 0;
         right: 0;
         padding: 20px;
-        z-index: 7;
+        z-index: 98;
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
@@ -8757,7 +8834,26 @@ export class WebPlayer extends BasePlayer {
         opacity: 0 !important;
         pointer-events: none !important;
       }
-      
+
+      /* YouTube custom controls mode - show our custom controls for YouTube videos */
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-controls-bar {
+        display: flex !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-top-bar {
+        display: flex !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-center-play-container {
+        display: flex !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+      }
+
       /* Override any inline styles */
       .controls-disabled .uvf-controls-bar,
       .controls-disabled .uvf-top-bar,