unified-video-framework 1.4.264 → 1.4.266

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,41 @@ export class WebPlayer extends BasePlayer {
     
     this.emit('onReady');
   }
+  
+  /**
+   * Hide custom controls when YouTube is active
+   */
+  private hideCustomControls(): void {
+    // Apply youtube-mode class to wrapper which hides all custom controls via CSS
+    if (this.playerWrapper) {
+      this.playerWrapper.classList.add('youtube-mode');
+      this.debugLog('🎬 youtube-mode class applied - custom controls hidden');
+    }
+    
+    // Fallback: direct DOM manipulation if class approach doesn't work
+    setTimeout(() => {
+      const controlsBar = document.getElementById('uvf-controls');
+      const topBar = document.querySelector('.uvf-top-bar');
+      const centerPlay = document.getElementById('uvf-center-play');
+      
+      if (controlsBar) {
+        controlsBar.style.display = 'none';
+        controlsBar.style.visibility = 'hidden';
+        controlsBar.style.pointerEvents = 'none';
+      }
+      if (topBar) {
+        (topBar as HTMLElement).style.display = 'none';
+        (topBar as HTMLElement).style.visibility = 'hidden';
+        (topBar as HTMLElement).style.pointerEvents = 'none';
+      }
+      if (centerPlay) {
+        centerPlay.style.display = 'none';
+        centerPlay.style.visibility = 'hidden';
+      }
+      
+      this.debugLog('🎬 Fallback: Direct DOM manipulation applied');
+    }, 100);
+  }
 
   private onYouTubePlayerStateChange(event: any): void {
     const state = event.data;
@@ -1270,10 +1319,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 +1399,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) {
@@ -6246,6 +6354,17 @@ export class WebPlayer extends BasePlayer {
         display: flex !important;
       }
       
+      /* YouTube Mode - Hide all custom controls */
+      .uvf-player-wrapper.youtube-mode .uvf-controls-bar,
+      .uvf-player-wrapper.youtube-mode .uvf-top-bar,
+      .uvf-player-wrapper.youtube-mode .uvf-top-gradient,
+      .uvf-player-wrapper.youtube-mode .uvf-controls-gradient,
+      .uvf-player-wrapper.youtube-mode .uvf-center-play-container {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !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,