unified-video-framework 1.4.262 → 1.4.264

package/packages/web/src/WebPlayer.ts

@@ -179,13 +179,14 @@ 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
+    // Priority: customControls > controls (for backward compatibility)
     if (config && config.customControls !== undefined) {
       this.useCustomControls = config.customControls;
-      console.log('Custom controls set via customControls 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 to:', this.useCustomControls);
+      console.log('Custom controls set via controls prop:', this.useCustomControls);
     }
     
     // Configure settings menu options
@@ -292,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);
     
@@ -1119,20 +1129,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}`);
@@ -1154,18 +1155,16 @@ export class WebPlayer extends BasePlayer {
       this.video.style.display = 'none';
     }
 
-    // Create iframe container with proper z-index based on controls configuration
+    // Create iframe container
     const iframeContainer = document.createElement('div');
     iframeContainer.id = `youtube-player-${videoId}`;
-    const useNativeControls = this.config.youtubeNativeControls === true;
     iframeContainer.style.cssText = `
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: ${useNativeControls ? '1' : '0'};
-      pointer-events: ${useNativeControls ? 'auto' : 'none'};
+      z-index: 1;
     `;
 
     // Remove existing YouTube player if any
@@ -1190,7 +1189,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
@@ -1208,10 +1207,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> {
@@ -1260,20 +1256,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();
-        // Ensure UI elements have correct z-index for YouTube integration
-        this.ensureUILayering();
-      }, 500);
     }
 
     // Start time tracking
@@ -1288,10 +1270,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:
@@ -1302,10 +1284,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:
@@ -1316,16 +1298,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;
     }
   }
 
@@ -1374,446 +1350,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);
-      }
-    }
-  }
-  
-  /**
-   * Ensure all UI elements have correct z-index for proper layering
-   */
-  private ensureUILayering(): void {
-    if (!this.youtubePlayer) return;
-    
-    const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container') as HTMLElement;
-    if (!videoContainer) return;
-    
-    // Ensure all custom UI elements are above the YouTube iframe
-    const uiElements = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator, .uvf-controls-bar');
-    uiElements.forEach(el => {
-      const element = el as HTMLElement;
-      element.style.zIndex = '2';
-      element.style.position = 'relative';
-    });
-    
-    this.debugLog('UI layering ensured for YouTube player');
-  }
-  
-  /**
-   * 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';
-        
-        // Lower YouTube wrapper z-index and pointer events appropriately
-        const videoId = this.source?.metadata?.videoId;
-        if (videoId) {
-          const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`) as HTMLElement;
-          if (ytWrapper) {
-            ytWrapper.style.zIndex = '1';
-            ytWrapper.style.pointerEvents = 'auto';
-            ytWrapper.style.position = 'absolute';
-          }
-        }
-        
-        // 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';
-        controlsContainerFallback.style.zIndex = '2';
-        
-        // Raise YouTube wrapper below UI and disable pointer events so UI is clickable
-        const videoId = this.source?.metadata?.videoId;
-        if (videoId) {
-          const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`) as HTMLElement;
-          if (ytWrapper) {
-            ytWrapper.style.zIndex = '0';
-            ytWrapper.style.pointerEvents = 'none';
-            ytWrapper.style.position = 'absolute';
-          }
-        }
-        
-        // Also show other control elements and ensure they are above the iframe
-        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 => {
-            const elh = el as HTMLElement;
-            elh.style.display = '';
-            elh.style.zIndex = '2';
-            elh.style.position = 'relative';
-          });
-        }
-        
-        // 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';
-      
-      // Lower YouTube wrapper z-index and enable pointer events
-      const videoId = this.source?.metadata?.videoId;
-      if (videoId) {
-        const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`) as HTMLElement;
-        if (ytWrapper) {
-          ytWrapper.style.zIndex = '1';
-          ytWrapper.style.pointerEvents = 'auto';
-          ytWrapper.style.position = 'absolute';
-        }
-      }
-      
-      // 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';
-      controlsContainer.style.zIndex = '2';
-      controlsContainer.style.position = 'relative';
-      
-      // Ensure YouTube iframe is behind controls and disable pointer events
-      const videoId = this.source?.metadata?.videoId;
-      if (videoId) {
-        const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`) as HTMLElement;
-        if (ytWrapper) {
-          ytWrapper.style.zIndex = '0';
-          ytWrapper.style.pointerEvents = 'none';
-          ytWrapper.style.position = 'absolute';
-        }
-      }
-      
-      // Ensure other UI elements are also above the iframe
-      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 => {
-          const elh = el as HTMLElement;
-          elh.style.zIndex = '2';
-          elh.style.position = 'relative';
-        });
-      }
-      
-      // 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: 0;
-      pointer-events: none;
-    `;
-    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);
@@ -1832,18 +1385,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
@@ -1852,13 +1403,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();
   }
 
 
@@ -2303,27 +1849,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);
@@ -4978,29 +4509,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 */
@@ -6728,6 +6237,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;
@@ -7161,7 +6689,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)
@@ -8518,27 +8046,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;
     }
     
@@ -8553,24 +8066,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 {