unified-video-framework 1.4.257 → 1.4.258

package/packages/web/src/WebPlayer.ts

@@ -1184,7 +1184,7 @@ export class WebPlayer extends BasePlayer {
       width: '100%',
       height: '100%',
       playerVars: {
-        controls: this.config.youtubeNativeControls !== false ? 1 : 0, // Native controls enabled by default
+        controls: this.config.youtubeNativeControls === true ? 1 : 0, // Native controls disabled by default for custom controls
         disablekb: 0,      // Allow keyboard controls
         fs: 0,             // Hide fullscreen button
         iv_load_policy: 3, // Hide annotations
@@ -1401,8 +1401,8 @@ export class WebPlayer extends BasePlayer {
       const videoData = this.youtubePlayer.getVideoData();
       this.isYouTubeLive = videoData?.isLive || false;
       
-      // Auto-enable native controls for all YouTube content by default, unless explicitly disabled
-      this.useYouTubeNativeControls = this.config.youtubeNativeControls !== false;
+      // Use custom controls by default, unless youtubeNativeControls is explicitly set to true
+      this.useYouTubeNativeControls = this.config.youtubeNativeControls === true;
       
       this.debugLog('YouTube Live status:', {
         isLive: this.isYouTubeLive,
@@ -1416,7 +1416,7 @@ export class WebPlayer extends BasePlayer {
       try {
         const duration = this.youtubePlayer.getDuration();
         this.isYouTubeLive = !duration || duration === 0;
-        this.useYouTubeNativeControls = this.config.youtubeNativeControls !== false;
+        this.useYouTubeNativeControls = this.config.youtubeNativeControls === true;
         
         this.debugLog('YouTube Live detected via duration check:', {
           duration,
@@ -1440,18 +1440,25 @@ export class WebPlayer extends BasePlayer {
       // Hide custom controls and show YouTube native controls
       controlsContainer.style.display = 'none';
       
-      // Re-create YouTube player with native controls if needed
-      if (!this.config.youtubeNativeControls) {
+      // 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) {
         this.recreateYouTubePlayerWithNativeControls();
       }
       
       this.debugLog('✅ YouTube native controls enabled', {
         isLive: this.isYouTubeLive,
-        reason: this.config.youtubeNativeControls !== false ? 'Default behavior (all YouTube content)' : 'Live stream detected'
+        reason: this.config.youtubeNativeControls === true ? 'Explicitly enabled in config' : 'Live stream detected'
       });
     } else {
-      // Show custom controls
+      // 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) {
+        this.recreateYouTubePlayerWithoutNativeControls();
+      }
+      
       this.debugLog('✅ Custom controls enabled for YouTube video');
     }
   }
@@ -1520,6 +1527,72 @@ export class WebPlayer extends BasePlayer {
     });
   }
   
+  /**
+   * Recreate YouTube player without native controls enabled
+   */
+  private recreateYouTubePlayerWithoutNativeControls(): void {
+    if (!this.source?.metadata?.videoId) return;
+    
+    const videoId = this.source.metadata.videoId;
+    const currentTime = this.youtubePlayer?.getCurrentTime() || 0;
+    
+    // Find the container
+    const container = this.playerWrapper || this.video?.parentElement;
+    if (!container) return;
+    
+    // Destroy current player
+    if (this.youtubePlayer) {
+      this.youtubePlayer.destroy();
+    }
+    
+    // Remove existing iframe container
+    const existingContainer = container.querySelector(`#youtube-player-${videoId}`);
+    if (existingContainer) {
+      existingContainer.remove();
+    }
+    
+    // Create new iframe container
+    const iframeContainer = document.createElement('div');
+    iframeContainer.id = `youtube-player-${videoId}`;
+    iframeContainer.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    `;
+    container.appendChild(iframeContainer);
+    
+    // Create new player without native controls
+    this.youtubePlayer = new window.YT.Player(iframeContainer.id, {
+      videoId: videoId,
+      width: '100%',
+      height: '100%',
+      playerVars: {
+        autoplay: this.config.autoPlay ? 1 : 0,
+        controls: 0, // Disable native controls
+        disablekb: 0,
+        fs: 0,
+        iv_load_policy: 3,
+        modestbranding: 1,
+        rel: 0,
+        showinfo: 0,
+        playsinline: 1,
+        start: Math.floor(currentTime)
+      },
+      events: {
+        onReady: () => {
+          this.youtubePlayerReady = true;
+          this.debugLog('YouTube player without native controls ready');
+          this.emit('onReady');
+        },
+        onStateChange: (event: any) => this.onYouTubePlayerStateChange(event),
+        onError: (event: any) => this.onYouTubePlayerError(event)
+      }
+    });
+  }
+  
   /**
    * Toggle between native and custom YouTube controls
    */