unified-video-framework 1.4.261 → 1.4.263

package/packages/web/src/WebPlayer.ts

@@ -179,13 +179,9 @@ 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 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);
+      console.log('Custom controls set to:', this.useCustomControls);
     }
     
     // Configure settings menu options
@@ -1119,20 +1115,11 @@ export class WebPlayer extends BasePlayer {
       if (this.video && metadata.thumbnail) {
         this.video.poster = metadata.thumbnail;
       }
-      
-      // Update metadata UI immediately with YouTube title and thumbnail
-      this.updateMetadataUI();
 
       // Create YouTube iframe player with custom controls integration
       await this.createYouTubePlayer(videoId);
       
-      // Force another metadata update after player creation
-      setTimeout(() => {
-        this.updateMetadataUI();
-      }, 1000);
-      
       this.debugLog('✅ YouTube video loaded successfully');
-      this.debugLog('YouTube video title:', metadata.title);
     } catch (error) {
       this.debugError('Failed to load YouTube video:', error);
       throw new Error(`YouTube video loading failed: ${error}`);
@@ -1188,7 +1175,7 @@ export class WebPlayer extends BasePlayer {
       width: '100%',
       height: '100%',
       playerVars: {
-        controls: this.config.youtubeNativeControls === true ? 1 : 0, // Native controls disabled by default for custom controls
+        controls: 0,        // Hide YouTube controls
         disablekb: 0,      // Allow keyboard controls
         fs: 0,             // Hide fullscreen button
         iv_load_policy: 3, // Hide annotations
@@ -1206,10 +1193,7 @@ export class WebPlayer extends BasePlayer {
       }
     });
 
-    // Track the initial controls state
-    this.currentYouTubeControlsState = this.config.youtubeNativeControls === true;
-    
-    this.debugLog('YouTube player created with controls:', this.currentYouTubeControlsState);
+    this.debugLog('YouTube player created');
   }
 
   private async loadYouTubeAPI(): Promise<void> {
@@ -1258,18 +1242,6 @@ 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 and controls visibility after player is ready
-      setTimeout(() => {
-        this.updateMetadataUI();
-        this.updateControlsVisibility();
-      }, 500);
     }
 
     // Start time tracking
@@ -1284,10 +1256,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:
@@ -1298,10 +1270,10 @@ export class WebPlayer extends BasePlayer {
         this.emit('onPause');
         break;
         
-       case window.YT.PlayerState.BUFFERING:
-         this.state.isBuffering = true;
-         this.updateYouTubeUI('buffering');
-         this.emit('onBuffering', true);
+      case window.YT.PlayerState.BUFFERING:
+        this.state.isBuffering = true;
+        this.updateYouTubeUI('buffering');
+        this.emit('onBuffering', true);
         break;
         
       case window.YT.PlayerState.ENDED:
@@ -1312,16 +1284,10 @@ export class WebPlayer extends BasePlayer {
         this.emit('onEnded');
         break;
         
-       case window.YT.PlayerState.CUED:
-         this.state.duration = this.youtubePlayer.getDuration();
-         this.updateYouTubeUI('cued');
-         
-         // Re-check Live status when video is cued
-         setTimeout(() => {
-           this.detectYouTubeLiveStatus();
-           this.updateControlsVisibility();
-         }, 500);
-         break;
+      case window.YT.PlayerState.CUED:
+        this.state.duration = this.youtubePlayer.getDuration();
+        this.updateYouTubeUI('cued');
+        break;
     }
   }
 
@@ -1370,360 +1336,23 @@ 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);
-      
-      // Fallback: Try to get from oembed API
-      this.getYouTubeVideoTitleFromOEmbed();
-    }
-  }
-  
-  /**
-   * 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;
-      
-      // 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,
-        useNativeControls: this.useYouTubeNativeControls,
-        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.useYouTubeNativeControls = this.config.youtubeNativeControls === true;
-        
-        this.debugLog('YouTube Live detected via duration check:', {
-          duration,
-          isLive: this.isYouTubeLive,
-          useNativeControls: this.useYouTubeNativeControls
-        });
-      } catch (e) {
-        this.debugWarn('Could not check YouTube duration for Live detection:', e);
-      }
-    }
-  }
-  
-  /**
-   * Update controls visibility based on YouTube Live status and config
-   */
-  private updateControlsVisibility(): void {
-    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';
-      
-      // 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 and ensure YouTube native controls are disabled
-      controlsContainer.style.display = 'flex';
-      
-      // 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');
-    }
-  }
-  
-  /**
-   * Recreate YouTube player with native controls enabled
-   */
-  private recreateYouTubePlayerWithNativeControls(): 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 with native controls
-    this.youtubePlayer = new window.YT.Player(iframeContainer.id, {
-      videoId: videoId,
-      width: '100%',
-      height: '100%',
-      playerVars: {
-        autoplay: this.config.autoPlay ? 1 : 0,
-        controls: 1, // Enable native controls
-        modestbranding: 1,
-        rel: 0,
-        showinfo: 0,
-        iv_load_policy: 3,
-        playsinline: 1,
-        start: Math.floor(currentTime)
-      },
-      events: {
-        onReady: () => {
-          this.youtubePlayerReady = true;
-          this.debugLog('YouTube player with native controls ready');
-          this.emit('onReady');
-        },
-        onStateChange: (event: any) => this.onYouTubePlayerStateChange(event),
-        onError: (event: any) => this.onYouTubePlayerError(event)
-      }
-    });
-  }
-  
-  /**
-   * 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
-   */
-  public toggleYouTubeControls(useNative: boolean = !this.useYouTubeNativeControls): void {
-    if (!this.youtubePlayer) {
-      this.debugWarn('Cannot toggle YouTube controls - no YouTube player active');
-      return;
-    }
-    
-    this.useYouTubeNativeControls = useNative;
-    this.config.youtubeNativeControls = useNative; // Update config
-    this.updateControlsVisibility();
-    
-    this.debugLog('YouTube controls toggled:', {
-      useNative: this.useYouTubeNativeControls,
-      isLive: this.isYouTubeLive
-    });
-    
-    // Show notification
-    this.showNotification(
-      `YouTube Controls: ${this.useYouTubeNativeControls ? 'Native' : 'Custom'}`
-    );
-  }
-  
-  /**
-   * Fallback method to get title from YouTube oembed API
-   */
-  private async getYouTubeVideoTitleFromOEmbed(): Promise<void> {
-    if (!this.source?.metadata?.videoId) return;
-    
-    try {
-      const videoId = this.source.metadata.videoId;
-      const oembedUrl = `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`;
-      
-      const response = await fetch(oembedUrl);
-      if (response.ok) {
-        const data = await response.json();
-        if (data.title) {
-          this.debugLog('Got YouTube title from oembed API:', data.title);
-          
-          // Update source metadata
-          if (this.source && this.source.metadata) {
-            this.source.metadata.title = data.title;
-          }
-          
-          // Update UI
-          this.updateMetadataUI();
-        }
-      }
-    } catch (error) {
-      this.debugWarn('Could not get YouTube title from oembed API:', error);
-    }
-  }
-
   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) {
       clearInterval(this.youtubeTimeTrackingInterval);
     }
     
-     this.youtubeTimeTrackingInterval = setInterval(() => {
-       if (this.youtubePlayer && this.youtubePlayerReady) {
-         try {
-           const currentTime = this.youtubePlayer.getCurrentTime();
-           const duration = this.youtubePlayer.getDuration();
-           const buffered = this.youtubePlayer.getVideoLoadedFraction() * 100;
-           
-           this.state.currentTime = currentTime || 0;
-           this.state.duration = duration || 0;
-           this.state.bufferedPercentage = buffered || 0;
+    this.youtubeTimeTrackingInterval = setInterval(() => {
+      if (this.youtubePlayer && this.youtubePlayerReady) {
+        try {
+          const currentTime = this.youtubePlayer.getCurrentTime();
+          const duration = this.youtubePlayer.getDuration();
+          const buffered = this.youtubePlayer.getVideoLoadedFraction() * 100;
+          
+          this.state.currentTime = currentTime || 0;
+          this.state.duration = duration || 0;
+          this.state.bufferedPercentage = buffered || 0;
           
           // Update UI progress bar
           this.updateYouTubeProgressBar(currentTime, duration, buffered);
@@ -1742,18 +1371,16 @@ export class WebPlayer extends BasePlayer {
     
     const percent = (currentTime / duration) * 100;
     
-    // Update progress filled (only if not dragging)
+    // Update progress filled
     const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
     if (progressFilled && !this.isDragging) {
       progressFilled.style.width = percent + '%';
     }
     
-    // Update progress handle (only if not dragging)
+    // Update progress handle
     const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
     if (progressHandle && !this.isDragging) {
       progressHandle.style.left = percent + '%';
-      // Remove dragging class if it was set
-      progressHandle.classList.remove('dragging');
     }
     
     // Update buffered progress
@@ -1762,13 +1389,8 @@ export class WebPlayer extends BasePlayer {
       progressBuffered.style.width = buffered + '%';
     }
     
-    // Update time display with YouTube-specific times
-    const timeDisplay = document.getElementById('uvf-time-display');
-    if (timeDisplay) {
-      const currentTimeStr = this.formatTime(currentTime);
-      const durationStr = this.formatTime(duration);
-      timeDisplay.textContent = `${currentTimeStr} / ${durationStr}`;
-    }
+    // Update time display
+    this.updateTimeDisplay();
   }
 
 
@@ -2213,27 +1835,12 @@ export class WebPlayer extends BasePlayer {
   private updateTimeTooltip(e: MouseEvent): void {
     const progressBar = document.getElementById('uvf-progress-bar');
     const tooltip = document.getElementById('uvf-time-tooltip');
-    if (!progressBar || !tooltip) return;
-    
-    // Get duration from appropriate source
-    let duration = 0;
-    if (this.youtubePlayer && this.youtubePlayerReady) {
-      try {
-        duration = this.youtubePlayer.getDuration() || 0;
-      } catch (error) {
-        this.debugWarn('Error getting YouTube duration for tooltip:', error);
-        return;
-      }
-    } else if (this.video) {
-      duration = this.video.duration || 0;
-    }
-    
-    if (!duration || !isFinite(duration)) return;
+    if (!progressBar || !tooltip || !this.video) return;
     
     const rect = progressBar.getBoundingClientRect();
     const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
     const percent = (x / rect.width);
-    const time = percent * duration;
+    const time = percent * this.video.duration;
     
     // Update tooltip content and position
     tooltip.textContent = this.formatTime(time);
@@ -4888,29 +4495,7 @@ export class WebPlayer extends BasePlayer {
       }
       
       .uvf-accordion-item.expanded .uvf-accordion-content {
-        max-height: 350px;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-      
-      /* Special handling for quality accordion with many options */
-      .uvf-accordion-item.expanded .uvf-accordion-content[data-section="quality"] {
-        max-height: 400px;
-      }
-      
-      /* Scrollbar styling for accordion content */
-      .uvf-accordion-content::-webkit-scrollbar {
-        width: 4px;
-      }
-      .uvf-accordion-content::-webkit-scrollbar-track {
-        background: transparent;
-      }
-      .uvf-accordion-content::-webkit-scrollbar-thumb {
-        background: rgba(255,255,255,0.3);
-        border-radius: 2px;
-      }
-      .uvf-accordion-content::-webkit-scrollbar-thumb:hover {
-        background: rgba(255,255,255,0.5);
+        max-height: 250px;
       }
       
       /* Settings options within accordion */
@@ -7071,7 +6656,7 @@ export class WebPlayer extends BasePlayer {
     const qualityBadge = document.createElement('div');
     qualityBadge.className = 'uvf-quality-badge';
     qualityBadge.id = 'uvf-quality-badge';
-    qualityBadge.textContent = 'AUTO'; // Default to AUTO for better UX
+    qualityBadge.textContent = 'HD';
     rightControls.appendChild(qualityBadge);
     
     // Settings button with menu (show only if enabled)
@@ -8428,27 +8013,12 @@ export class WebPlayer extends BasePlayer {
     const progressBar = document.querySelector('.uvf-progress-bar') as HTMLElement;
     const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
     const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
-    if (!progressBar) return;
-    
-    // Get duration from appropriate source
-    let duration = 0;
-    if (this.youtubePlayer && this.youtubePlayerReady) {
-      try {
-        duration = this.youtubePlayer.getDuration() || 0;
-      } catch (error) {
-        this.debugWarn('Error getting YouTube duration for seeking:', error);
-        return;
-      }
-    } else if (this.video) {
-      duration = this.video.duration;
-    } else {
-      this.debugWarn('No video source available for seeking');
-      return;
-    }
+    if (!progressBar || !this.video) return;
     
+    const duration = this.video.duration;
     // Validate duration before calculating seek time
     if (!isFinite(duration) || isNaN(duration) || duration <= 0) {
-      this.debugWarn('Invalid video duration, cannot seek via progress bar:', duration);
+      this.debugWarn('Invalid video duration, cannot seek via progress bar');
       return;
     }
     
@@ -8463,24 +8033,21 @@ export class WebPlayer extends BasePlayer {
       return;
     }
     
-    this.debugLog('Seeking to position:', time, 'seconds (', Math.round(percent), '%)');
-    
     // Update UI immediately for responsive feedback
-    if (progressFilled && !this.isDragging) {
+    if (progressFilled) {
       progressFilled.style.width = percent + '%';
     }
-    if (progressHandle && !this.isDragging) {
+    if (progressHandle) {
       progressHandle.style.left = percent + '%';
-      progressHandle.classList.add('dragging');
+      // Add dragging class for visual feedback
+      if (this.isDragging) {
+        progressHandle.classList.add('dragging');
+      } else {
+        progressHandle.classList.remove('dragging');
+      }
     }
     
-    // Perform the actual seek
     this.seek(time);
-    
-    // For YouTube, provide immediate visual feedback since API might be delayed
-    if (this.youtubePlayer && this.youtubePlayerReady) {
-      this.emit('onSeeking');
-    }
   }
 
   private formatTime(seconds: number): string {