unified-video-framework 1.4.263 → 1.4.265

package/packages/web/src/WebPlayer.ts

@@ -179,9 +179,14 @@ export class WebPlayer extends BasePlayer {
     console.log('WebPlayer.initialize called with config:', config);
     
     // Set useCustomControls based on config before calling parent initialize
+    // Priority: customControls > controls (for backward compatibility)
     if (config && config.customControls !== undefined) {
       this.useCustomControls = config.customControls;
-      console.log('Custom controls set to:', this.useCustomControls);
+      console.log('Custom controls set via customControls:', this.useCustomControls);
+    } else if (config && config.controls !== undefined) {
+      // Use 'controls' prop if customControls is not defined
+      this.useCustomControls = config.controls;
+      console.log('Custom controls set via controls prop:', this.useCustomControls);
     }
     
     // Configure settings menu options
@@ -288,9 +293,18 @@ export class WebPlayer extends BasePlayer {
     // Create custom controls if enabled
     if (this.useCustomControls) {
       this.createCustomControls(videoContainer);
+    } else {
+      // Hide controls if disabled
+      this.debugLog('Controls disabled - not creating custom controls UI');
     }
 
 
+    // Apply controls-disabled class if controls are disabled
+    if (!this.useCustomControls) {
+      wrapper.classList.add('controls-disabled');
+      this.debugLog('🚫 controls-disabled class applied to player wrapper');
+    }
+    
     // Assemble the player
     wrapper.appendChild(videoContainer);
     
@@ -1234,6 +1248,9 @@ export class WebPlayer extends BasePlayer {
     this.youtubePlayerReady = true;
     this.debugLog('YouTube player ready');
     
+    // Hide custom controls immediately for YouTube
+    this.hideCustomControls();
+    
     // Set initial volume
     if (this.youtubePlayer) {
       const volume = this.config.volume ? this.config.volume * 100 : 100;
@@ -1242,6 +1259,17 @@ export class WebPlayer extends BasePlayer {
       if (this.config.muted) {
         this.youtubePlayer.mute();
       }
+      
+      // Detect if YouTube video is Live and handle controls
+      this.detectYouTubeLiveStatus();
+      
+      // Try to get video title from YouTube API
+      this.getYouTubeVideoTitle();
+      
+      // Update metadata UI after player is ready
+      setTimeout(() => {
+        this.updateMetadataUI();
+      }, 500);
     }
 
     // Start time tracking
@@ -1249,6 +1277,36 @@ export class WebPlayer extends BasePlayer {
     
     this.emit('onReady');
   }
+  
+  /**
+   * Hide custom controls when YouTube is active
+   */
+  private hideCustomControls(): void {
+    const controlsBar = document.getElementById('uvf-controls');
+    const topBar = document.querySelector('.uvf-top-bar');
+    const topGradient = document.querySelector('.uvf-top-gradient');
+    const controlsGradient = document.querySelector('.uvf-controls-gradient');
+    
+    if (controlsBar) {
+      controlsBar.style.display = 'none !important';
+      controlsBar.style.visibility = 'hidden';
+      controlsBar.style.pointerEvents = 'none';
+    }
+    if (topBar) {
+      (topBar as HTMLElement).style.display = 'none';
+      (topBar as HTMLElement).style.visibility = 'hidden';
+    }
+    if (topGradient) {
+      (topGradient as HTMLElement).style.display = 'none';
+      (topGradient as HTMLElement).style.visibility = 'hidden';
+    }
+    if (controlsGradient) {
+      (controlsGradient as HTMLElement).style.display = 'none';
+      (controlsGradient as HTMLElement).style.visibility = 'hidden';
+    }
+    
+    this.debugLog('🎬 Custom controls hidden for YouTube player');
+  }
 
   private onYouTubePlayerStateChange(event: any): void {
     const state = event.data;
@@ -1256,10 +1314,10 @@ export class WebPlayer extends BasePlayer {
     switch (state) {
       case window.YT.PlayerState.PLAYING:
         this.state.isPlaying = true;
-        this.state.isPaused = false;
-        this.state.isBuffering = false;
-        this.updateYouTubeUI('playing');
-        this.emit('onPlay');
+         this.state.isPaused = false;
+         this.state.isBuffering = false;
+         this.updateYouTubeUI('playing');
+         this.emit('onPlay');
         break;
         
       case window.YT.PlayerState.PAUSED:
@@ -1336,7 +1394,66 @@ export class WebPlayer extends BasePlayer {
     });
   }
 
+  /**
+   * Get YouTube video title from the player API
+   */
+  private getYouTubeVideoTitle(): void {
+    if (!this.youtubePlayer || !this.youtubePlayerReady) return;
+    
+    try {
+      // Try to get video data from YouTube player
+      const videoData = this.youtubePlayer.getVideoData();
+      if (videoData && videoData.title) {
+        this.debugLog('Got YouTube title from player API:', videoData.title);
+        
+        // Update source metadata with the correct title
+        if (this.source && this.source.metadata) {
+          this.source.metadata.title = videoData.title;
+        }
+        
+        // Update UI immediately
+        this.updateMetadataUI();
+      }
+    } catch (error) {
+      this.debugWarn('Could not get YouTube video title from API:', error);
+    }
+  }
+  
+  /**
+   * Detect if YouTube video is Live
+   */
+  private detectYouTubeLiveStatus(): void {
+    if (!this.youtubePlayer || !this.youtubePlayerReady) return;
+    
+    try {
+      const videoData = this.youtubePlayer.getVideoData();
+      this.isYouTubeLive = videoData?.isLive || false;
+      
+      this.debugLog('YouTube Live status:', {
+        isLive: this.isYouTubeLive,
+        videoId: videoData?.video_id
+      });
+      
+    } catch (error) {
+      this.debugWarn('Could not detect YouTube Live status:', error);
+      // Fallback: check duration - Live videos typically have duration = 0
+      try {
+        const duration = this.youtubePlayer.getDuration();
+        this.isYouTubeLive = !duration || duration === 0;
+        
+        this.debugLog('YouTube Live detected via duration check:', {
+          duration,
+          isLive: this.isYouTubeLive
+        });
+      } catch (e) {
+        this.debugWarn('Could not check YouTube duration for Live detection:', e);
+      }
+    }
+  }
+
   private youtubeTimeTrackingInterval: NodeJS.Timeout | null = null;
+  private isYouTubeLive: boolean = false;
+  private useYouTubeNativeControls: boolean = false;
 
   private startYouTubeTimeTracking(): void {
     if (this.youtubeTimeTrackingInterval) {
@@ -6223,6 +6340,25 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
+      /* Controls visibility */
+      .uvf-controls-bar {
+        display: flex !important;
+      }
+      
+      .uvf-top-bar {
+        display: flex !important;
+      }
+      
+      /* Hide all controls if controls prop is false */
+      .uvf-player-wrapper.controls-disabled .uvf-controls-bar,
+      .uvf-player-wrapper.controls-disabled .uvf-top-bar,
+      .uvf-player-wrapper.controls-disabled .uvf-top-gradient,
+      .uvf-player-wrapper.controls-disabled .uvf-controls-gradient {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+      
       /* Hide YouTube UI elements */
       iframe[src*="youtube.com"] {
         pointer-events: auto !important;