unified-video-framework 1.4.264 → 1.4.265

package/packages/web/src/WebPlayer.ts

@@ -1248,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;
@@ -1256,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
@@ -1263,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;
@@ -1270,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:
@@ -1350,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) {