unified-video-framework 1.4.456 → 1.4.458

package/packages/web/src/WebPlayer.ts

@@ -1743,22 +1743,30 @@ export class WebPlayer extends BasePlayer {
 
       // 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
+        // Custom controls mode - overlay doesn't cover controls area
         overlay.style.cssText = `
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
+          height: calc(100% - 120px);
           z-index: 2;
-          pointer-events: auto;
+          background: transparent;
+          pointer-events: none;
           cursor: pointer;
         `;
 
-        // Handle click to toggle play/pause
+        // Add click handler directly to the overlay since pointer-events is none
+        // This allows video clicks while controls remain interactive
         overlay.addEventListener('click', () => {
-          this.togglePlayPause();
+          if (this.youtubePlayer && this.youtubePlayerReady) {
+            const state = this.youtubePlayer.getPlayerState();
+            if (state === 1) { // Playing
+              this.youtubePlayer.pauseVideo();
+            } else {
+              this.youtubePlayer.playVideo();
+            }
+          }
         });
 
         // Handle double-click for fullscreen
@@ -1900,7 +1908,7 @@ export class WebPlayer extends BasePlayer {
       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.debugLog('[YouTube] Custom controls only mode - ensuring controls are visible');
       this.playerWrapper.classList.remove('youtube-native-controls-mode');
       this.playerWrapper.classList.add('youtube-custom-controls-mode');
       this.playerWrapper.classList.add('controls-visible');
@@ -1908,8 +1916,30 @@ export class WebPlayer extends BasePlayer {
       // Prevent auto-hide from interfering
       this.isYouTubeCustomControlsMode = true;
 
+      // Force show controls with explicit visibility
       this.showCustomControls();
-      this.debugLog('[YouTube] Auto-hide disabled for custom controls');
+
+      // Additionally, force controls visibility with inline styles for YouTube
+      const controlsBar = document.getElementById('uvf-controls') as HTMLElement;
+      if (controlsBar) {
+        controlsBar.style.display = 'flex';
+        controlsBar.style.visibility = 'visible';
+        controlsBar.style.opacity = '1';
+        controlsBar.style.pointerEvents = 'auto';
+        controlsBar.style.zIndex = '100';
+        controlsBar.style.position = 'absolute';  // Anchor to bottom of player wrapper
+      }
+
+      const topBar = document.querySelector('.uvf-top-bar') as HTMLElement;
+      if (topBar) {
+        topBar.style.display = 'flex';
+        topBar.style.visibility = 'visible';
+        topBar.style.opacity = '1';
+        topBar.style.pointerEvents = 'auto';
+        topBar.style.zIndex = '100';
+      }
+
+      this.debugLog('[YouTube] Custom controls forced visible, auto-hide disabled');
     } 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');
@@ -1917,6 +1947,48 @@ export class WebPlayer extends BasePlayer {
       this.hideCustomControls();
     }
 
+    // Debug: Log control visibility state after YouTube loads
+    setTimeout(() => {
+      const controlsBar = document.getElementById('uvf-controls');
+      const wrapper = this.playerWrapper;
+      const overlay = wrapper?.querySelector('.uvf-youtube-overlay') as HTMLElement;
+
+      if (this.config.debug) {
+        console.log('[YouTube Debug] Control visibility check:');
+        console.log('- youtubeNativeControls:', this.youtubeNativeControls);
+        console.log('- useCustomControls:', this.useCustomControls);
+        console.log('- isYouTubeCustomControlsMode:', this.isYouTubeCustomControlsMode);
+
+        if (wrapper) {
+          console.log('- Wrapper classes:', wrapper.className);
+        }
+
+        if (controlsBar) {
+          const rect = controlsBar.getBoundingClientRect();
+          const style = window.getComputedStyle(controlsBar);
+          console.log('- Controls bar:');
+          console.log('  - Display:', style.display);
+          console.log('  - Visibility:', style.visibility);
+          console.log('  - Opacity:', style.opacity);
+          console.log('  - Z-index:', style.zIndex);
+          console.log('  - Pointer-events:', style.pointerEvents);
+          console.log('  - Position:', style.position);
+          console.log('  - Dimensions:', { width: rect.width, height: rect.height });
+          console.log('  - Position:', { top: rect.top, left: rect.left, bottom: rect.bottom });
+        }
+
+        if (overlay) {
+          const overlayRect = overlay.getBoundingClientRect();
+          const overlayStyle = window.getComputedStyle(overlay);
+          console.log('- YouTube overlay:');
+          console.log('  - Height:', overlayStyle.height);
+          console.log('  - Pointer-events:', overlayStyle.pointerEvents);
+          console.log('  - Z-index:', overlayStyle.zIndex);
+          console.log('  - Bottom position:', overlayRect.bottom);
+        }
+      }
+    }, 500);
+
     // Set initial volume
     if (this.youtubePlayer) {
       const volume = this.config.volume ? this.config.volume * 100 : 100;
@@ -8916,6 +8988,44 @@ export class WebPlayer extends BasePlayer {
         cursor: default !important;
       }
 
+      /* Ensure YouTube overlay doesn't block controls in custom mode */
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-youtube-overlay {
+        height: calc(100% - 120px) !important;
+        pointer-events: none !important;
+      }
+
+      /* Ensure controls bar is positioned correctly and visible */
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-controls-bar {
+        position: absolute !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        z-index: 100 !important;
+        display: flex !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+        opacity: 1 !important;
+        transform: translateY(0) !important;
+      }
+
+      /* Ensure top bar is visible in YouTube custom mode */
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-top-bar {
+        position: relative !important;
+        z-index: 100 !important;
+        display: flex !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+        opacity: 1 !important;
+        transform: translateY(0) !important;
+      }
+
+      /* Force all control buttons to be interactive */
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-control-btn {
+        pointer-events: auto !important;
+        cursor: pointer !important;
+        z-index: 101 !important;
+      }
+
       /* Override any inline styles */
       .controls-disabled .uvf-controls-bar,
       .controls-disabled .uvf-top-bar,