unified-video-framework 1.4.259 → 1.4.261

package/packages/web/src/WebPlayer.ts

@@ -179,9 +179,13 @@ export class WebPlayer extends BasePlayer {
     console.log('WebPlayer.initialize called with config:', config);
     
     // Set useCustomControls based on config before calling parent initialize
+    // Check both customControls (specific) and controls (standard) options
     if (config && config.customControls !== undefined) {
       this.useCustomControls = config.customControls;
-      console.log('Custom controls set to:', this.useCustomControls);
+      console.log('Custom controls set via customControls to:', this.useCustomControls);
+    } else if (config && config.controls !== undefined) {
+      this.useCustomControls = config.controls;
+      console.log('Custom controls set via controls to:', this.useCustomControls);
     }
     
     // Configure settings menu options
@@ -1202,7 +1206,10 @@ export class WebPlayer extends BasePlayer {
       }
     });
 
-    this.debugLog('YouTube player created');
+    // Track the initial controls state
+    this.currentYouTubeControlsState = this.config.youtubeNativeControls === true;
+    
+    this.debugLog('YouTube player created with controls:', this.currentYouTubeControlsState);
   }
 
   private async loadYouTubeAPI(): Promise<void> {
@@ -1433,17 +1440,66 @@ export class WebPlayer extends BasePlayer {
    * Update controls visibility based on YouTube Live status and config
    */
   private updateControlsVisibility(): void {
-    const controlsContainer = document.getElementById('uvf-controls-container');
-    if (!controlsContainer) return;
+    const controlsContainer = document.getElementById('uvf-controls');
+    if (!controlsContainer) {
+      this.debugWarn('Controls container not found, looking for .uvf-controls-bar');
+      const controlsBar = this.playerWrapper?.querySelector('.uvf-controls-bar') as HTMLElement;
+      if (!controlsBar) {
+        this.debugWarn('Controls bar not found either, cannot update controls visibility');
+        return;
+      }
+      // Use the controls bar as fallback
+      const controlsContainerFallback = controlsBar;
+      
+      if (this.youtubePlayer && this.useYouTubeNativeControls) {
+        // Hide custom controls
+        controlsContainerFallback.style.display = 'none';
+        // Also hide any other control elements
+        const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container') as HTMLElement;
+        if (videoContainer) {
+          const allControls = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator');
+          allControls.forEach(el => (el as HTMLElement).style.display = 'none');
+        }
+        
+        // Only recreate YouTube player if it doesn't currently have native controls
+        if (this.currentYouTubeControlsState !== true) {
+          this.recreateYouTubePlayerWithNativeControls();
+          this.currentYouTubeControlsState = true;
+        }
+        
+        this.debugLog('✅ YouTube native controls enabled', {
+          isLive: this.isYouTubeLive,
+          reason: this.config.youtubeNativeControls === true ? 'Explicitly enabled in config' : 'Live stream detected'
+        });
+      } else {
+        // Show custom controls
+        controlsContainerFallback.style.display = 'flex';
+        // Also show other control elements
+        const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container') as HTMLElement;
+        if (videoContainer) {
+          const allControls = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator');
+          allControls.forEach(el => (el as HTMLElement).style.display = '');
+        }
+        
+        // Only recreate YouTube player if it currently has native controls
+        if (this.currentYouTubeControlsState !== false) {
+          this.recreateYouTubePlayerWithoutNativeControls();
+          this.currentYouTubeControlsState = false;
+        }
+        
+        this.debugLog('✅ Custom controls enabled for YouTube video');
+      }
+      return;
+    }
     
     if (this.youtubePlayer && this.useYouTubeNativeControls) {
       // Hide custom controls and show YouTube native controls
       controlsContainer.style.display = 'none';
       
-      // Re-create YouTube player with native controls if the current player doesn't have them
-      // This happens when the player was initially created with controls disabled
-      if (this.config.youtubeNativeControls === false) {
+      // Only recreate YouTube player if it doesn't currently have native controls
+      if (this.currentYouTubeControlsState !== true) {
         this.recreateYouTubePlayerWithNativeControls();
+        this.currentYouTubeControlsState = true;
       }
       
       this.debugLog('✅ YouTube native controls enabled', {
@@ -1454,9 +1510,10 @@ export class WebPlayer extends BasePlayer {
       // Show custom controls and ensure YouTube native controls are disabled
       controlsContainer.style.display = 'flex';
       
-      // Re-create YouTube player without native controls if needed
-      if (this.config.youtubeNativeControls === true) {
+      // Only recreate YouTube player if it currently has native controls
+      if (this.currentYouTubeControlsState !== false) {
         this.recreateYouTubePlayerWithoutNativeControls();
+        this.currentYouTubeControlsState = false;
       }
       
       this.debugLog('✅ Custom controls enabled for YouTube video');
@@ -1650,6 +1707,7 @@ export class WebPlayer extends BasePlayer {
   private youtubeTimeTrackingInterval: NodeJS.Timeout | null = null;
   private isYouTubeLive: boolean = false;
   private useYouTubeNativeControls: boolean = false;
+  private currentYouTubeControlsState: boolean | null = null; // Track current YouTube player controls state
 
   private startYouTubeTimeTracking(): void {
     if (this.youtubeTimeTrackingInterval) {