unified-video-framework 1.4.455 → 1.4.457

package/packages/web/src/WebPlayer.ts

@@ -216,6 +216,9 @@ export class WebPlayer extends BasePlayer {
   private currentThumbnailUrl: string | null = null;
   private thumbnailPreviewEnabled: boolean = false;
 
+  // YouTube custom controls mode tracking
+  private isYouTubeCustomControlsMode: boolean = false;
+
   // Debug logging helper
   private debugLog(message: string, ...args: any[]): void {
     if (this.config.debug) {
@@ -1646,6 +1649,9 @@ export class WebPlayer extends BasePlayer {
 
   private async loadYouTube(url: string, source: any): Promise<void> {
     try {
+      // Reset YouTube custom controls mode flag when loading new video
+      this.isYouTubeCustomControlsMode = false;
+
       this.debugLog('Loading YouTube video:', url);
 
       // Extract video ID and fetch metadata
@@ -1737,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
@@ -1894,11 +1908,38 @@ 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');
+
+      // Prevent auto-hide from interfering
+      this.isYouTubeCustomControlsMode = true;
+
+      // Force show controls with explicit visibility
       this.showCustomControls();
+
+      // 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 = 'relative';  // Ensure proper stacking context
+      }
+
+      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');
@@ -1906,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;
@@ -8863,6 +8946,86 @@ export class WebPlayer extends BasePlayer {
         transform: scale(1) !important;
       }
 
+      /* Force YouTube custom controls visible even with no-cursor class */
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor .uvf-controls-bar,
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-controls-bar {
+        display: flex !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+        opacity: 1 !important;
+        transform: translateY(0) !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor .uvf-top-bar,
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-top-bar {
+        display: flex !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+        opacity: 1 !important;
+        transform: translateY(0) !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor .uvf-top-gradient,
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-top-gradient {
+        opacity: 1 !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor .uvf-controls-gradient,
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-controls-gradient {
+        opacity: 1 !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor .uvf-center-play-container,
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-center-play-container {
+        display: flex !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+        opacity: 1 !important;
+        transform: scale(1) !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor {
+        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: relative !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,
@@ -10755,6 +10918,11 @@ export class WebPlayer extends BasePlayer {
   private hideControls(): void {
     if (!this.state.isPlaying) return;
 
+    // Don't hide controls in YouTube custom mode
+    if (this.isYouTubeCustomControlsMode) {
+      return;
+    }
+
     const wrapper = this.container?.querySelector('.uvf-player-wrapper');
     if (wrapper) {
       wrapper.classList.remove('controls-visible');
@@ -10765,6 +10933,11 @@ export class WebPlayer extends BasePlayer {
   private scheduleHideControls(): void {
     if (!this.state.isPlaying) return;
 
+    // Don't auto-hide in YouTube custom controls mode
+    if (this.isYouTubeCustomControlsMode) {
+      return;
+    }
+
     if (this.hideControlsTimeout) clearTimeout(this.hideControlsTimeout);
     // Use longer timeout in fullscreen for better UX
     const timeout = this.isFullscreen() ? 4000 : 3000;