unified-video-framework 1.4.450 → 1.4.451

package/packages/web/src/WebPlayer.ts

@@ -1733,34 +1733,70 @@ 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
+        overlay.style.cssText = `
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          z-index: 2;
+          pointer-events: auto;
+        `;
+
+        // 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
@@ -5450,14 +5486,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 +5547,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 +5617,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 +7006,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;