unified-video-framework 1.4.451 → 1.4.452

package/packages/web/src/WebPlayer.ts

@@ -1743,6 +1743,8 @@ 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
         overlay.style.cssText = `
           position: absolute;
           top: 0;
@@ -1750,6 +1752,7 @@ export class WebPlayer extends BasePlayer {
           width: 100%;
           z-index: 2;
           pointer-events: auto;
+          cursor: pointer;
         `;
 
         // Handle click to toggle play/pause
@@ -1887,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
@@ -2062,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 {
@@ -8793,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,