unified-video-framework 1.4.370 → 1.4.372

package/packages/web/src/WebPlayer.ts

@@ -3,10 +3,10 @@
  */
 
 import { BasePlayer } from '../../core/dist/BasePlayer';
-import { 
-  VideoSource, 
-  PlayerConfig, 
-  Quality, 
+import {
+  VideoSource,
+  PlayerConfig,
+  Quality,
   SubtitleTrack,
   PlayerError,
   ChapterManager as CoreChapterManager,
@@ -47,13 +47,13 @@ export class WebPlayer extends BasePlayer {
   private volumeHideTimeout: NodeJS.Timeout | null = null;
   private hideControlsTimeout: NodeJS.Timeout | null = null;
   private isVolumeSliding: boolean = false;
-  private availableQualities: Array<{value: string, label: string}> = [];
-  private availableSubtitles: Array<{value: string, label: string}> = [];
+  private availableQualities: Array<{ value: string, label: string }> = [];
+  private availableSubtitles: Array<{ value: string, label: string }> = [];
   private currentQuality = 'auto';
   private currentSubtitle = 'off';
   private currentPlaybackRate = 1;
   private isDragging: boolean = false;
-  
+
   // Settings configuration
   private settingsConfig = {
     enabled: true,        // Show settings button
@@ -73,14 +73,14 @@ export class WebPlayer extends BasePlayer {
   private previewGateHit: boolean = false;
   private paymentSuccessTime: number = 0;
   private paymentSuccessful: boolean = false;
-  
+
   // Security state to prevent paywall bypass
   private isPaywallActive: boolean = false;
   private authValidationInterval: any = null;
   private overlayRemovalAttempts: number = 0;
   private maxOverlayRemovalAttempts: number = 3;
   private lastSecurityCheck: number = 0;
-  
+
   // Cast state
   private castContext: any = null;
   private remotePlayer: any = null;
@@ -98,14 +98,14 @@ export class WebPlayer extends BasePlayer {
   private _deferredPause = false;
   private _lastToggleAt = 0;
   private _TOGGLE_DEBOUNCE_MS = 120;
-  
+
   // Fullscreen fallback tracking
   private hasTriedButtonFallback: boolean = false;
   private lastUserInteraction: number = 0;
-  
+
   // Progress bar tooltip state
   private showTimeTooltip: boolean = false;
-  
+
   // Advanced tap handling state
   private tapStartTime: number = 0;
   private tapStartX: number = 0;
@@ -118,10 +118,10 @@ export class WebPlayer extends BasePlayer {
   private longPressPlaybackRate: number = 1;
   private tapResetTimer: NodeJS.Timeout | null = null;
   private fastBackwardInterval: NodeJS.Timeout | null = null;
-  private handleSingleTap: () => void = () => {};
-  private handleDoubleTap: (tapX: number) => void = () => {};
-  private handleLongPress: (tapX: number) => void = () => {};
-  private handleLongPressEnd: () => void = () => {};
+  private handleSingleTap: () => void = () => { };
+  private handleDoubleTap: (tapX: number) => void = () => { };
+  private handleLongPress: (tapX: number) => void = () => { };
+  private handleLongPressEnd: () => void = () => { };
 
   // Autoplay enhancement state
   private autoplayCapabilities: {
@@ -130,11 +130,11 @@ export class WebPlayer extends BasePlayer {
     canAutoplayUnmuted: boolean;
     lastCheck: number;
   } = {
-    canAutoplay: false,
-    canAutoplayMuted: false,
-    canAutoplayUnmuted: false,
-    lastCheck: 0
-  };
+      canAutoplay: false,
+      canAutoplayMuted: false,
+      canAutoplayUnmuted: false,
+      lastCheck: 0
+    };
   private autoplayRetryPending: boolean = false;
   private autoplayRetryAttempts: number = 0;
   private maxAutoplayRetries: number = 3;
@@ -146,16 +146,16 @@ export class WebPlayer extends BasePlayer {
   private hasAppliedStartTime: boolean = false;
   private coreChapterManager: CoreChapterManager | null = null;
   private chapterConfig: ChapterConfig = { enabled: false };
-  
+
   // Quality filter
   private qualityFilter: any = null;
-  
+
   // Premium qualities configuration
   private premiumQualities: any = null;
-  
+
   // YouTube native controls configuration
   private youtubeNativeControls: boolean = true;
-  
+
   // Ad playing state (set by Google Ads Manager)
   private isAdPlaying: boolean = false;
 
@@ -190,7 +190,7 @@ export class WebPlayer extends BasePlayer {
   async initialize(container: HTMLElement | string, config?: any): Promise<void> {
     // Debug log the config being passed
     console.log('WebPlayer.initialize called with config:', config);
-    
+
     // Set useCustomControls based on controls and customControls config
     // Priority: customControls > controls
     if (config) {
@@ -204,7 +204,7 @@ export class WebPlayer extends BasePlayer {
         console.log('[WebPlayer] Controls set to:', this.useCustomControls);
       }
     }
-    
+
     // Configure settings menu options
     if (config && config.settings) {
       console.log('Settings config found:', config.settings);
@@ -218,7 +218,7 @@ export class WebPlayer extends BasePlayer {
     } else {
       console.log('No settings config found, using defaults:', this.settingsConfig);
     }
-    
+
     // Configure chapters if provided
     if (config && config.chapters) {
       console.log('Chapter config found:', config.chapters);
@@ -244,25 +244,25 @@ export class WebPlayer extends BasePlayer {
     } else {
       console.log('No chapter config found, chapters disabled');
     }
-    
+
     // Configure quality filter if provided
     if (config && config.qualityFilter) {
       console.log('Quality filter config found:', config.qualityFilter);
       this.qualityFilter = config.qualityFilter;
     }
-    
+
     // Configure premium qualities if provided
     if (config && config.premiumQualities) {
       console.log('Premium qualities config found:', config.premiumQualities);
       this.premiumQualities = config.premiumQualities;
     }
-    
+
     // Configure YouTube native controls if provided
     if (config && config.youtubeNativeControls !== undefined) {
       console.log('YouTube native controls config found:', config.youtubeNativeControls);
       this.youtubeNativeControls = config.youtubeNativeControls;
     }
-    
+
     // Call parent initialize
     await super.initialize(container, config);
   }
@@ -279,7 +279,7 @@ export class WebPlayer extends BasePlayer {
     const wrapper = document.createElement('div');
     wrapper.className = 'uvf-player-wrapper';
     this.playerWrapper = wrapper;
-    
+
     // Create video container
     const videoContainer = document.createElement('div');
     videoContainer.className = 'uvf-video-container';
@@ -296,11 +296,11 @@ export class WebPlayer extends BasePlayer {
     this.video.loop = this.config.loop ?? false;
     this.video.playsInline = this.config.playsInline ?? true;
     this.video.preload = this.config.preload ?? 'metadata';
-    
+
     // Enable AirPlay for iOS devices
     (this.video as any).webkitAllowsAirPlay = true;
     this.video.setAttribute('x-webkit-airplay', 'allow');
-    
+
     if (this.config.crossOrigin) {
       this.video.crossOrigin = this.config.crossOrigin;
     }
@@ -329,15 +329,15 @@ export class WebPlayer extends BasePlayer {
 
     // Always create custom controls
     this.createCustomControls(videoContainer);
-    
+
     // Apply controls-disabled class if controls={false}
     if (!this.useCustomControls) {
       wrapper.classList.add('controls-disabled');
     }
-    
+
     // Assemble the player
     wrapper.appendChild(videoContainer);
-    
+
     // Add to container
     this.container.innerHTML = '';
     this.container.appendChild(wrapper);
@@ -352,7 +352,7 @@ export class WebPlayer extends BasePlayer {
     this.setupWatermark();
     this.setupFullscreenListeners();
     this.setupUserInteractionTracking();
-    
+
     // Initialize chapter manager if enabled
     if (this.chapterConfig.enabled && this.video) {
       this.setupChapterManager();
@@ -365,58 +365,58 @@ export class WebPlayer extends BasePlayer {
         const { PaywallController } = await import('./paywall/PaywallController');
         this.paywallController = new (PaywallController as any)(pw, {
           getOverlayContainer: () => this.playerWrapper,
-          onResume: () => { 
-            try { 
+          onResume: () => {
+            try {
               this.debugLog('onResume callback triggered - payment/auth successful');
-              
+
               // Reset all security state after successful payment/auth
               this.previewGateHit = false;
               this.paymentSuccessTime = Date.now();
               this.paymentSuccessful = true;
               this.isPaywallActive = false;
               this.overlayRemovalAttempts = 0;
-              
+
               // Clear security monitoring immediately
               if (this.authValidationInterval) {
                 this.debugLog('Clearing security monitoring interval');
                 clearInterval(this.authValidationInterval);
                 this.authValidationInterval = null;
               }
-              
+
               // Force cleanup of any remaining overlays
               this.forceCleanupOverlays();
-              
+
               this.debugLog('Payment successful - all security restrictions lifted, resuming playback');
-              
+
               // Give a small delay to ensure overlay is properly closed before resuming
               setTimeout(() => {
-                this.play(); 
+                this.play();
               }, 150); // Slightly longer delay for complete cleanup
-            } catch(error) {
+            } catch (error) {
               this.debugError('Error in onResume callback:', error);
-            } 
+            }
           },
-          onShow: () => { 
+          onShow: () => {
             // Activate security monitoring when paywall is shown
             this.isPaywallActive = true;
             this.startOverlayMonitoring();
-            
+
             // Use safe pause method to avoid race conditions
-            try { this.requestPause(); } catch(_) {} 
+            try { this.requestPause(); } catch (_) { }
           },
           onClose: () => {
             this.debugLog('onClose callback triggered - paywall closing');
-            
+
             // Deactivate security monitoring when paywall is closed
             this.isPaywallActive = false;
-            
+
             // Clear monitoring interval
             if (this.authValidationInterval) {
               this.debugLog('Clearing security monitoring interval on close');
               clearInterval(this.authValidationInterval);
               this.authValidationInterval = null;
             }
-            
+
             // Reset overlay removal attempts counter
             this.overlayRemovalAttempts = 0;
           }
@@ -424,14 +424,14 @@ export class WebPlayer extends BasePlayer {
         // When free preview ends, open overlay
         this.on('onFreePreviewEnded' as any, () => {
           this.debugLog('onFreePreviewEnded event triggered, calling paywallController.openOverlay()');
-          try { 
-            this.paywallController?.openOverlay(); 
-          } catch(error) {
+          try {
+            this.paywallController?.openOverlay();
+          } catch (error) {
             this.debugError('Error calling paywallController.openOverlay():', error);
           }
         });
       }
-    } catch (_) {}
+    } catch (_) { }
 
     // Attempt to bind Cast context if available
     this.setupCastContextSafe();
@@ -451,7 +451,7 @@ export class WebPlayer extends BasePlayer {
         const lim = Number(this.config.freeDuration);
         const cur = (this.video?.currentTime || 0);
         if (!this.previewGateHit && cur >= lim) {
-          try { this.video?.pause(); } catch (_) {}
+          try { this.video?.pause(); } catch (_) { }
           this.showNotification('Free preview ended. Please rent to continue.');
           return;
         }
@@ -465,7 +465,7 @@ export class WebPlayer extends BasePlayer {
       // Handle deferred pause requests
       if (this._deferredPause) {
         this._deferredPause = false;
-        try { this.video?.pause(); } catch (_) {}
+        try { this.video?.pause(); } catch (_) { }
       }
 
       // Stop buffering state
@@ -540,11 +540,11 @@ export class WebPlayer extends BasePlayer {
 
       // Update time display when video is ready to play
       this.updateTimeDisplay();
-      
+
       // Handle deferred pause requests
       if (this._deferredPause) {
         this._deferredPause = false;
-        try { this.video?.pause(); } catch (_) {}
+        try { this.video?.pause(); } catch (_) { }
       }
 
       // Attempt autoplay once when video is ready to play
@@ -578,9 +578,9 @@ export class WebPlayer extends BasePlayer {
 
       // Apply startTime if configured and not yet applied
       if (this.config.startTime !== undefined &&
-          this.config.startTime > 0 &&
-          !this.hasAppliedStartTime &&
-          this.video.duration > 0) {
+        this.config.startTime > 0 &&
+        !this.hasAppliedStartTime &&
+        this.video.duration > 0) {
         const startTime = Math.min(this.config.startTime, this.video.duration);
         this.debugLog(`⏩ Seeking to startTime: ${startTime}s`);
         this.seek(startTime);
@@ -675,7 +675,7 @@ export class WebPlayer extends BasePlayer {
 
   private updateBufferProgress(): void {
     if (!this.video) return;
-    
+
     const buffered = this.video.buffered;
     if (buffered.length > 0) {
       const bufferedEnd = buffered.end(buffered.length - 1);
@@ -968,17 +968,17 @@ export class WebPlayer extends BasePlayer {
     }
 
     const url = source.url.toLowerCase();
-    
+
     // Check for YouTube URLs
     if (YouTubeExtractor.isYouTubeUrl(url)) {
       return 'youtube';
     }
-    
+
     if (url.includes('.m3u8')) return 'hls';
     if (url.includes('.mpd')) return 'dash';
     if (url.includes('.mp4')) return 'mp4';
     if (url.includes('.webm')) return 'webm';
-    
+
     return 'mp4'; // default
   }
 
@@ -1011,13 +1011,13 @@ export class WebPlayer extends BasePlayer {
 
         // Update settings menu with detected qualities
         this.updateSettingsMenu();
-        
+
         // Apply quality filter automatically if configured (for auto quality mode)
         if (this.qualityFilter || (this.premiumQualities && this.premiumQualities.enabled)) {
           this.debugLog('Applying quality filter on HLS manifest load');
           this.applyHLSQualityFilter();
         }
-        
+
         // Note: Autoplay is now handled in the 'canplay' event when video is ready
       });
 
@@ -1109,10 +1109,10 @@ export class WebPlayer extends BasePlayer {
           label: `${info.height}p`,
           index: index
         }));
-        
+
         // Update settings menu with detected qualities
         this.updateSettingsMenu();
-        
+
         // Apply quality filter automatically if configured (for auto quality mode)
         if (this.qualityFilter || (this.premiumQualities && this.premiumQualities.enabled)) {
           this.debugLog('Applying quality filter on DASH stream initialization');
@@ -1150,7 +1150,7 @@ export class WebPlayer extends BasePlayer {
   private async loadYouTube(url: string, source: any): Promise<void> {
     try {
       this.debugLog('Loading YouTube video:', url);
-      
+
       // Extract video ID and fetch metadata
       const videoId = YouTubeExtractor.extractVideoId(url);
       if (!videoId) {
@@ -1159,7 +1159,7 @@ export class WebPlayer extends BasePlayer {
 
       // Fetch YouTube metadata (title, thumbnail)
       const metadata = await YouTubeExtractor.getVideoMetadata(url);
-      
+
       // Store metadata for later use
       this.source = {
         url: source.url || url,
@@ -1182,7 +1182,7 @@ export class WebPlayer extends BasePlayer {
 
       // Create YouTube iframe player with custom controls integration
       await this.createYouTubePlayer(videoId);
-      
+
       this.debugLog('✅ YouTube video loaded successfully');
     } catch (error) {
       this.debugError('Failed to load YouTube video:', error);
@@ -1319,8 +1319,8 @@ export class WebPlayer extends BasePlayer {
 
       // Apply startTime if configured and not yet applied
       if (this.config.startTime !== undefined &&
-          this.config.startTime > 0 &&
-          !this.hasAppliedStartTime) {
+        this.config.startTime > 0 &&
+        !this.hasAppliedStartTime) {
         this.debugLog(`⏩ Seeking YouTube player to startTime: ${this.config.startTime}s`);
         this.youtubePlayer.seekTo(this.config.startTime, true);
         this.hasAppliedStartTime = true;
@@ -1347,7 +1347,7 @@ export class WebPlayer extends BasePlayer {
 
   private onYouTubePlayerStateChange(event: any): void {
     const state = event.data;
-    
+
     switch (state) {
       case window.YT.PlayerState.PLAYING:
         this.state.isPlaying = true;
@@ -1356,7 +1356,7 @@ export class WebPlayer extends BasePlayer {
         this.updateYouTubeUI('playing');
         this.emit('onPlay');
         break;
-        
+
       case window.YT.PlayerState.PAUSED:
         this.state.isPlaying = false;
         this.state.isPaused = true;
@@ -1364,13 +1364,13 @@ export class WebPlayer extends BasePlayer {
         this.updateYouTubeUI('paused');
         this.emit('onPause');
         break;
-        
+
       case window.YT.PlayerState.BUFFERING:
         this.state.isBuffering = true;
         this.updateYouTubeUI('buffering');
         this.emit('onBuffering', true);
         break;
-        
+
       case window.YT.PlayerState.ENDED:
         this.state.isPlaying = false;
         this.state.isPaused = true;
@@ -1389,7 +1389,7 @@ export class WebPlayer extends BasePlayer {
           }, 100);
         }
         break;
-        
+
       case window.YT.PlayerState.CUED:
         this.state.duration = this.youtubePlayer.getDuration();
         this.updateYouTubeUI('cued');
@@ -1401,7 +1401,7 @@ export class WebPlayer extends BasePlayer {
     const playIcon = document.getElementById('uvf-play-icon');
     const pauseIcon = document.getElementById('uvf-pause-icon');
     const centerPlay = document.getElementById('uvf-center-play');
-    
+
     if (state === 'playing' || state === 'buffering') {
       if (playIcon) playIcon.style.display = 'none';
       if (pauseIcon) pauseIcon.style.display = 'block';
@@ -1416,7 +1416,7 @@ export class WebPlayer extends BasePlayer {
   private onYouTubePlayerError(event: any): void {
     const errorCode = event.data;
     let errorMessage = 'YouTube player error';
-    
+
     switch (errorCode) {
       case 2:
         errorMessage = 'Invalid video ID';
@@ -1432,7 +1432,7 @@ export class WebPlayer extends BasePlayer {
         errorMessage = 'Video cannot be embedded';
         break;
     }
-    
+
     this.handleError({
       code: 'YOUTUBE_ERROR',
       message: errorMessage,
@@ -1441,7 +1441,7 @@ export class WebPlayer extends BasePlayer {
       details: { errorCode }
     });
   }
-  
+
   private hideCustomControls(): void {
     // Hide all custom control elements
     const controlsBar = document.getElementById('uvf-controls') as HTMLElement;
@@ -1451,7 +1451,7 @@ export class WebPlayer extends BasePlayer {
       controlsBar.style.opacity = '0';
       controlsBar.style.pointerEvents = 'none';
     }
-    
+
     const topBar = document.querySelector('.uvf-top-bar') as HTMLElement;
     if (topBar) {
       topBar.style.display = 'none';
@@ -1459,7 +1459,7 @@ export class WebPlayer extends BasePlayer {
       topBar.style.opacity = '0';
       topBar.style.pointerEvents = 'none';
     }
-    
+
     const centerPlayContainer = document.querySelector('.uvf-center-play-container') as HTMLElement;
     if (centerPlayContainer) {
       centerPlayContainer.style.display = 'none';
@@ -1475,21 +1475,21 @@ export class WebPlayer extends BasePlayer {
     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;
-          
+
           // Update UI progress bar
           this.updateYouTubeProgressBar(currentTime, duration, buffered);
-          
+
           this.emit('onTimeUpdate', this.state.currentTime);
           this.emit('onProgress', this.state.bufferedPercentage);
         } catch (error) {
@@ -1501,27 +1501,27 @@ export class WebPlayer extends BasePlayer {
 
   private updateYouTubeProgressBar(currentTime: number, duration: number, buffered: number): void {
     if (!duration || duration === 0) return;
-    
+
     const percent = (currentTime / duration) * 100;
-    
+
     // Update progress filled
     const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
     if (progressFilled && !this.isDragging) {
       progressFilled.style.width = percent + '%';
     }
-    
+
     // Update progress handle
     const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
     if (progressHandle && !this.isDragging) {
       progressHandle.style.left = percent + '%';
     }
-    
+
     // Update buffered progress
     const progressBuffered = document.getElementById('uvf-progress-buffered') as HTMLElement;
     if (progressBuffered) {
       progressBuffered.style.width = buffered + '%';
     }
-    
+
     // Update time display
     this.updateTimeDisplay();
   }
@@ -1550,7 +1550,7 @@ export class WebPlayer extends BasePlayer {
       track.kind = subtitle.kind || 'subtitles';
       track.label = subtitle.label;
       track.src = subtitle.url || '';
-      
+
       if (subtitle.default || index === 0) {
         track.default = true;
       }
@@ -1665,7 +1665,7 @@ export class WebPlayer extends BasePlayer {
 
     // Fallback: Check if user has interacted with the page
     const hasInteracted = this.lastUserInteraction > 0 &&
-                         (Date.now() - this.lastUserInteraction) < 5000;
+      (Date.now() - this.lastUserInteraction) < 5000;
 
     this.debugLog(`🎯 Recent user interaction: ${hasInteracted}`);
     return hasInteracted;
@@ -1694,7 +1694,7 @@ export class WebPlayer extends BasePlayer {
     // 1. Browser supports unmuted autoplay OR user has activated the page
     // 2. User hasn't explicitly set muted=true
     const shouldTryUnmuted = (this.autoplayCapabilities.canAutoplayUnmuted || hasActivation)
-                           && this.config.muted !== true;
+      && this.config.muted !== true;
 
     if (shouldTryUnmuted) {
       this.video.muted = false;
@@ -1788,16 +1788,16 @@ export class WebPlayer extends BasePlayer {
     this.debugLog('🎯 Autoplay retry armed - waiting for user interaction');
   }
 
-  
+
   /**
    * Show YouTube-style unmute button when video autoplays muted
    */
   private showUnmuteButton(): void {
     // Remove existing unmute button
     this.hideUnmuteButton();
-    
+
     this.debugLog('🔇 Showing unmute button - video autoplaying muted');
-    
+
     const unmuteBtn = document.createElement('button');
     unmuteBtn.id = 'uvf-unmute-btn';
     unmuteBtn.className = 'uvf-unmute-btn';
@@ -1808,7 +1808,7 @@ export class WebPlayer extends BasePlayer {
       </svg>
       <span class="uvf-unmute-text">Tap to unmute</span>
     `;
-    
+
     // Click handler to unmute
     unmuteBtn.addEventListener('click', (e) => {
       e.stopPropagation();
@@ -1816,7 +1816,7 @@ export class WebPlayer extends BasePlayer {
       this.debugLog('🔊 Video unmuted by user');
       this.hideUnmuteButton();
     });
-    
+
     // Add enhanced styles
     const style = document.createElement('style');
     style.textContent = `
@@ -1885,23 +1885,23 @@ export class WebPlayer extends BasePlayer {
         }
       }
     `;
-    
+
     // Add to page if not already added
     if (!document.getElementById('uvf-unmute-styles')) {
       style.id = 'uvf-unmute-styles';
       document.head.appendChild(style);
     }
-    
+
     // Add to player
     if (this.playerWrapper) {
       this.playerWrapper.appendChild(unmuteBtn);
       this.debugLog('✅ Unmute button added to player');
-      
+
       // Enable clicking anywhere on video to unmute
       this.setupClickToUnmute();
     }
   }
-  
+
   /**
    * Set up click anywhere on video to unmute when unmute button is visible
    */
@@ -1910,21 +1910,21 @@ export class WebPlayer extends BasePlayer {
     if (this.clickToUnmuteHandler) {
       this.playerWrapper?.removeEventListener('click', this.clickToUnmuteHandler, true);
     }
-    
+
     this.clickToUnmuteHandler = (e: MouseEvent) => {
       const unmuteBtn = document.getElementById('uvf-unmute-btn');
-      
+
       // Only handle if unmute button is visible (video is muted)
       if (!unmuteBtn || !this.video) return;
-      
+
       // Don't unmute if clicking on controls or buttons
       const target = e.target as HTMLElement;
-      if (target.closest('.uvf-controls-container') || 
-          target.closest('button') ||
-          target.closest('.uvf-settings-menu')) {
+      if (target.closest('.uvf-controls-container') ||
+        target.closest('button') ||
+        target.closest('.uvf-settings-menu')) {
         return;
       }
-      
+
       // Stop the event from triggering play/pause
       e.stopPropagation();
       e.preventDefault();
@@ -1933,54 +1933,54 @@ export class WebPlayer extends BasePlayer {
       this.unmute();
       this.debugLog('🔊 Video unmuted by clicking on player');
       this.hideUnmuteButton();
-      
+
       // Clean up the handler
       if (this.clickToUnmuteHandler) {
         this.playerWrapper?.removeEventListener('click', this.clickToUnmuteHandler, true);
         this.clickToUnmuteHandler = null;
       }
     };
-    
+
     // Use capture phase to intercept clicks before they reach the video element
     this.playerWrapper?.addEventListener('click', this.clickToUnmuteHandler, true);
     this.debugLog('👆 Click anywhere to unmute enabled');
   }
-  
+
   /**
    * Hide unmute button
    */
   private clickToUnmuteHandler: ((e: MouseEvent) => void) | null = null;
-  
+
   private hideUnmuteButton(): void {
     const unmuteBtn = document.getElementById('uvf-unmute-btn');
     if (unmuteBtn) {
       unmuteBtn.remove();
       this.debugLog('Unmute button removed');
     }
-    
+
     // Remove click to unmute handler when button is hidden
     if (this.clickToUnmuteHandler) {
       this.playerWrapper?.removeEventListener('click', this.clickToUnmuteHandler, true);
       this.clickToUnmuteHandler = null;
     }
   }
-  
+
   private updateTimeTooltip(e: MouseEvent): void {
     const progressBar = document.getElementById('uvf-progress-bar');
     const tooltip = document.getElementById('uvf-time-tooltip');
     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 * this.video.duration;
-    
+
     // Update tooltip content and position
     tooltip.textContent = this.formatTime(time);
     tooltip.style.left = `${x}px`;
     tooltip.classList.add('visible');
   }
-  
+
   private hideTimeTooltip(): void {
     const tooltip = document.getElementById('uvf-time-tooltip');
     if (tooltip) {
@@ -1991,17 +1991,17 @@ export class WebPlayer extends BasePlayer {
   private setupUserInteractionTracking(): void {
     // Track various user interactions to enable autoplay
     const interactionEvents = ['click', 'mousedown', 'keydown', 'touchstart'];
-    
+
     const updateLastInteraction = () => {
       this.lastUserInteraction = Date.now();
       this.debugLog('User interaction detected at:', this.lastUserInteraction);
     };
-    
+
     // Listen on document for global interactions
     interactionEvents.forEach(eventType => {
       document.addEventListener(eventType, updateLastInteraction, { passive: true });
     });
-    
+
     // Also listen on player wrapper for more specific interactions
     if (this.playerWrapper) {
       interactionEvents.forEach(eventType => {
@@ -2062,14 +2062,14 @@ export class WebPlayer extends BasePlayer {
         // Benign: pause() raced play(); ignore the error.
         return;
       }
-      
+
       // Check if this is an autoplay restriction error
       if (this.isAutoplayRestrictionError(err)) {
         this.debugWarn('Autoplay blocked by browser policy');
         // Throw error so intelligent autoplay can handle fallback
         throw err;
       }
-      
+
       this.handleError({
         code: 'PLAY_ERROR',
         message: `Failed to start playbook: ${err}`,
@@ -2108,7 +2108,7 @@ export class WebPlayer extends BasePlayer {
   public requestPause(): void {
     this._deferredPause = true;
     if (!this._playPromise && this.video && this.video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-      try { this.video.pause(); } catch (_) {}
+      try { this.video.pause(); } catch (_) { }
     }
   }
 
@@ -2120,16 +2120,16 @@ export class WebPlayer extends BasePlayer {
       this.debugWarn('Cannot set currentTime: video element not available');
       return false;
     }
-    
+
     // Validate the time value is finite
     if (!isFinite(time) || isNaN(time)) {
       this.debugWarn('Attempted to set invalid currentTime value:', time);
       return false;
     }
-    
+
     // Ensure time is non-negative
     const safeTime = Math.max(0, time);
-    
+
     // Additional validation: check if video duration is available and valid
     const duration = this.video.duration;
     if (isFinite(duration) && duration > 0) {
@@ -2164,13 +2164,13 @@ export class WebPlayer extends BasePlayer {
     }
 
     if (!this.video) return;
-    
+
     // Validate input time
     if (!isFinite(time) || isNaN(time)) {
       this.debugWarn('Invalid seek time:', time);
       return;
     }
-    
+
     // Security check: Prevent seeking beyond free preview limit
     const freeDuration = Number(this.config.freeDuration || 0);
     if (freeDuration > 0 && !this.paymentSuccessful) {
@@ -2183,7 +2183,7 @@ export class WebPlayer extends BasePlayer {
         return;
       }
     }
-    
+
     // Use safe setter with validated time
     this.safeSetCurrentTime(time);
   }
@@ -2259,7 +2259,7 @@ export class WebPlayer extends BasePlayer {
     } else if (this.dash) {
       this.dash.setQualityFor('video', index);
     }
-    
+
     this.currentQualityIndex = index;
     this.autoQuality = false;
   }
@@ -2454,7 +2454,7 @@ export class WebPlayer extends BasePlayer {
 
   setAutoQuality(enabled: boolean): void {
     this.autoQuality = enabled;
-    
+
     if (this.hls) {
       if (enabled) {
         // Apply quality filter constraints when enabling auto
@@ -2476,7 +2476,7 @@ export class WebPlayer extends BasePlayer {
           }
         }
       });
-      
+
       // Apply quality filter constraints when enabling auto
       if (enabled && (this.qualityFilter || (this.premiumQualities && this.premiumQualities.enabled))) {
         this.applyDASHQualityFilter();
@@ -2491,7 +2491,7 @@ export class WebPlayer extends BasePlayer {
       // iOS Safari special handling - use video element fullscreen
       if (this.isIOSDevice() && this.video) {
         this.debugLog('iOS device detected - using video element fullscreen');
-        
+
         try {
           // iOS Safari supports video fullscreen but not element fullscreen
           if ((this.video as any).webkitEnterFullscreen) {
@@ -2514,7 +2514,7 @@ export class WebPlayer extends BasePlayer {
           // Fall through to try standard fullscreen
         }
       }
-      
+
       // Check if fullscreen is supported for non-iOS devices
       if (!this.isFullscreenSupported()) {
         this.debugWarn('Fullscreen not supported by browser');
@@ -2524,19 +2524,19 @@ export class WebPlayer extends BasePlayer {
         }
         return;
       }
-      
+
       // Check if already in fullscreen
       if (this.isFullscreen()) {
         this.debugLog('Already in fullscreen mode');
         return;
       }
-      
+
       // Target the player wrapper to maintain custom controls
       const element = this.playerWrapper;
-      
+
       // Try different fullscreen APIs with better error handling
       let fullscreenSuccess = false;
-      
+
       if (element.requestFullscreen) {
         try {
           await element.requestFullscreen();
@@ -2566,17 +2566,17 @@ export class WebPlayer extends BasePlayer {
           this.debugWarn('MS fullscreen request failed:', (err as Error).message);
         }
       }
-      
+
       if (fullscreenSuccess) {
         // Add fullscreen class for styling
         this.playerWrapper.classList.add('uvf-fullscreen');
         this.emit('onFullscreenChanged', true);
-        
+
         // Lock to landscape orientation on mobile devices
         await this.lockOrientationLandscape();
       } else {
         this.debugWarn('All fullscreen methods failed');
-        
+
         // Provide helpful feedback based on device
         if (this.isIOSDevice()) {
           this.showShortcutIndicator('Fullscreen not available - use device controls');
@@ -2586,7 +2586,7 @@ export class WebPlayer extends BasePlayer {
           this.showShortcutIndicator('Fullscreen not supported in this browser');
         }
       }
-      
+
     } catch (error) {
       this.debugWarn('Failed to enter fullscreen:', (error as Error).message);
       // Don't re-throw the error to prevent breaking the user experience
@@ -2613,16 +2613,16 @@ export class WebPlayer extends BasePlayer {
           // Fall through to try standard methods
         }
       }
-      
+
       // Check if we're actually in fullscreen
       if (!this.isFullscreen()) {
         this.debugLog('Not in fullscreen mode');
         return;
       }
-      
+
       // Try different exit fullscreen methods
       let exitSuccess = false;
-      
+
       if (document.exitFullscreen) {
         try {
           await document.exitFullscreen();
@@ -2652,7 +2652,7 @@ export class WebPlayer extends BasePlayer {
           this.debugWarn('MS exit fullscreen failed:', (err as Error).message);
         }
       }
-      
+
       if (exitSuccess || !this.isFullscreen()) {
         // Remove fullscreen class
         if (this.playerWrapper) {
@@ -2668,7 +2668,7 @@ export class WebPlayer extends BasePlayer {
           this.playerWrapper.classList.remove('uvf-fullscreen');
         }
       }
-      
+
     } catch (error) {
       this.debugWarn('Failed to exit fullscreen:', (error as Error).message);
       // Don't re-throw the error to prevent breaking the user experience
@@ -2716,7 +2716,7 @@ export class WebPlayer extends BasePlayer {
    */
   showFullscreenTip(): void {
     this.showShortcutIndicator('💡 Double-click or use ⌨️ F key for fullscreen');
-    
+
     // Also show in debug log
     this.debugLog('Tip: Double-click the video area or press F key for fullscreen, or use the fullscreen button in controls');
   }
@@ -2735,7 +2735,7 @@ export class WebPlayer extends BasePlayer {
       // Check for Brave's specific properties
       (window as any).chrome && (window as any).chrome.app && (window as any).chrome.app.isInstalled === false
     );
-    
+
     this.debugLog('Browser detection - Is Brave:', isBrave, 'User Agent:', userAgent);
     return isBrave;
   }
@@ -2747,10 +2747,10 @@ export class WebPlayer extends BasePlayer {
     try {
       // Check if fullscreen is enabled
       const fullscreenEnabled = document.fullscreenEnabled ||
-                                 (document as any).webkitFullscreenEnabled ||
-                                 (document as any).mozFullScreenEnabled ||
-                                 (document as any).msFullscreenEnabled;
-      
+        (document as any).webkitFullscreenEnabled ||
+        (document as any).mozFullScreenEnabled ||
+        (document as any).msFullscreenEnabled;
+
       this.debugLog('Fullscreen permissions check:', {
         fullscreenEnabled,
         documentFullscreenEnabled: document.fullscreenEnabled,
@@ -2764,7 +2764,7 @@ export class WebPlayer extends BasePlayer {
         isBrave: this.isBraveBrowser(),
         isPrivate: this.isPrivateWindow()
       });
-      
+
       // Check permissions API if available
       if ('permissions' in navigator) {
         try {
@@ -2774,7 +2774,7 @@ export class WebPlayer extends BasePlayer {
           this.debugLog('Permissions API check failed:', (err as Error).message);
         }
       }
-      
+
     } catch (error) {
       this.debugWarn('Permission check failed:', (error as Error).message);
     }
@@ -2797,13 +2797,13 @@ export class WebPlayer extends BasePlayer {
           );
         }) as any;
       }
-      
+
       // Firefox detection
       if ('MozAppearance' in document.documentElement.style) {
         if (window.indexedDB === null) return true;
         if (window.indexedDB === undefined) return true;
       }
-      
+
       // Safari detection
       try {
         window.localStorage.setItem('test', '1');
@@ -2812,11 +2812,11 @@ export class WebPlayer extends BasePlayer {
       } catch {
         return true;
       }
-      
+
     } catch {
       return false;
     }
-    
+
     return false;
   }
 
@@ -2825,11 +2825,11 @@ export class WebPlayer extends BasePlayer {
    */
   triggerFullscreenButton(): void {
     const fullscreenBtn = document.getElementById('uvf-fullscreen-btn');
-    
+
     // Enhanced debugging for Brave browser
     const isBrave = this.isBraveBrowser();
     const isPrivate = this.isPrivateWindow();
-    
+
     this.debugLog('Fullscreen trigger attempt:', {
       buttonExists: !!fullscreenBtn,
       isBrave,
@@ -2839,24 +2839,24 @@ export class WebPlayer extends BasePlayer {
       lastUserInteraction: this.lastUserInteraction,
       timeSinceInteraction: Date.now() - this.lastUserInteraction
     });
-    
+
     // Run permissions check
     this.checkFullscreenPermissions();
-    
+
     if (fullscreenBtn) {
       this.debugLog('Triggering fullscreen button click');
-      
+
       // Special handling for Brave browser
       if (isBrave) {
         this.debugLog('Applying Brave browser specific fullscreen handling');
-        
+
         // For Brave, we need to ensure the gesture is absolutely fresh
         if (Date.now() - this.lastUserInteraction > 1000) {
           this.debugWarn('User gesture may be stale for Brave browser');
           this.showTemporaryMessage('Click the fullscreen button directly in Brave browser');
           return;
         }
-        
+
         // Request permissions first in Brave if needed
         this.requestFullscreenPermissionBrave().then(() => {
           this.performFullscreenButtonClick(fullscreenBtn);
@@ -2866,11 +2866,11 @@ export class WebPlayer extends BasePlayer {
       } else {
         this.performFullscreenButtonClick(fullscreenBtn);
       }
-      
+
     } else {
       this.debugWarn('Fullscreen button not found');
       this.showShortcutIndicator('Fullscreen Button Missing');
-      
+
       // Enhanced guidance for Brave
       if (isBrave) {
         this.showTemporaryMessage('Brave: Please use fullscreen button in controls');
@@ -2914,10 +2914,10 @@ export class WebPlayer extends BasePlayer {
         isTrusted: true
       } as any)
     ];
-    
+
     // Log each event dispatch
     this.debugLog('Dispatching mouse events:', events.length);
-    
+
     // Dispatch all events in sequence
     events.forEach((event, index) => {
       try {
@@ -2927,7 +2927,7 @@ export class WebPlayer extends BasePlayer {
         this.debugWarn(`Event ${index + 1} dispatch failed:`, (error as Error).message);
       }
     });
-    
+
     // Also try direct click method with enhanced error handling
     try {
       fullscreenBtn.click();
@@ -2935,7 +2935,7 @@ export class WebPlayer extends BasePlayer {
     } catch (error) {
       this.debugWarn('Direct button click failed:', (error as Error).message);
     }
-    
+
     // Focus the button to ensure gesture context
     try {
       fullscreenBtn.focus();
@@ -2943,7 +2943,7 @@ export class WebPlayer extends BasePlayer {
     } catch (error) {
       this.debugLog('Button focus failed:', (error as Error).message);
     }
-    
+
     // Show that we're attempting fullscreen via button
     this.showShortcutIndicator('Fullscreen');
   }
@@ -2973,35 +2973,35 @@ export class WebPlayer extends BasePlayer {
     }
 
     this.debugLog('Attempting Brave-specific fullscreen entry');
-    
+
     // First, check if we can request permissions
     await this.requestFullscreenPermissionBrave();
-    
+
     // Check current fullscreen state
-    if (document.fullscreenElement || 
-        (document as any).webkitFullscreenElement || 
-        (document as any).mozFullScreenElement || 
-        (document as any).msFullscreenElement) {
+    if (document.fullscreenElement ||
+      (document as any).webkitFullscreenElement ||
+      (document as any).mozFullScreenElement ||
+      (document as any).msFullscreenElement) {
       this.debugLog('Already in fullscreen mode');
       return;
     }
-    
+
     // Enhanced permission and capability checking for Brave
     const fullscreenEnabled = document.fullscreenEnabled ||
-                               (document as any).webkitFullscreenEnabled ||
-                               (document as any).mozFullScreenEnabled ||
-                               (document as any).msFullscreenEnabled;
-    
+      (document as any).webkitFullscreenEnabled ||
+      (document as any).mozFullScreenEnabled ||
+      (document as any).msFullscreenEnabled;
+
     if (!fullscreenEnabled) {
       throw new Error('Fullscreen not supported or disabled in Brave settings');
     }
-    
+
     // Check if the site has fullscreen blocked
     if ('permissions' in navigator) {
       try {
         const permission = await (navigator as any).permissions.query({ name: 'fullscreen' });
         this.debugLog('Brave fullscreen permission state:', permission.state);
-        
+
         if (permission.state === 'denied') {
           throw new Error('Fullscreen permission denied in Brave site settings');
         }
@@ -3009,10 +3009,10 @@ export class WebPlayer extends BasePlayer {
         this.debugLog('Permission check failed:', (permError as Error).message);
       }
     }
-    
+
     // Try multiple fullscreen methods with proper error handling
     let fullscreenError: Error | null = null;
-    
+
     try {
       // Try standard fullscreen API first
       if (this.playerWrapper.requestFullscreen) {
@@ -3039,22 +3039,22 @@ export class WebPlayer extends BasePlayer {
       else {
         throw new Error('No fullscreen API available');
       }
-      
+
       // If we get here, fullscreen was successful
       this.playerWrapper.classList.add('uvf-fullscreen');
       this.emit('onFullscreenChanged', true);
       this.debugLog('Brave fullscreen entry successful');
-      
+
     } catch (error) {
       fullscreenError = error as Error;
       this.debugWarn('Brave fullscreen attempt failed:', fullscreenError.message);
-      
+
       // Provide specific guidance for common Brave issues
-      if (fullscreenError.message.includes('denied') || 
-          fullscreenError.message.includes('not allowed')) {
+      if (fullscreenError.message.includes('denied') ||
+        fullscreenError.message.includes('not allowed')) {
         throw new Error('Brave Browser: Fullscreen blocked. Check site permissions in Settings > Site and Shields Settings');
-      } else if (fullscreenError.message.includes('gesture') || 
-                 fullscreenError.message.includes('user activation')) {
+      } else if (fullscreenError.message.includes('gesture') ||
+        fullscreenError.message.includes('user activation')) {
         throw new Error('Brave Browser: User interaction required. Click the fullscreen button directly');
       } else {
         throw new Error(`Brave Browser: ${fullscreenError.message}`);
@@ -3070,7 +3070,7 @@ export class WebPlayer extends BasePlayer {
     if (existingMsg) {
       existingMsg.remove();
     }
-    
+
     const msgDiv = document.createElement('div');
     msgDiv.id = 'uvf-temp-message';
     msgDiv.textContent = message;
@@ -3087,9 +3087,9 @@ export class WebPlayer extends BasePlayer {
       z-index: 10001;
       pointer-events: none;
     `;
-    
+
     document.body.appendChild(msgDiv);
-    
+
     setTimeout(() => {
       if (msgDiv.parentElement) {
         msgDiv.remove();
@@ -3106,27 +3106,27 @@ export class WebPlayer extends BasePlayer {
     }
 
     // Check if fullscreen is supported
-    if (!document.fullscreenEnabled && 
-        !(document as any).webkitFullscreenEnabled && 
-        !(document as any).mozFullScreenEnabled && 
-        !(document as any).msFullscreenEnabled) {
+    if (!document.fullscreenEnabled &&
+      !(document as any).webkitFullscreenEnabled &&
+      !(document as any).mozFullScreenEnabled &&
+      !(document as any).msFullscreenEnabled) {
       throw new Error('Fullscreen not supported by browser');
     }
-    
+
     // Check if already in fullscreen
-    if (document.fullscreenElement || 
-        (document as any).webkitFullscreenElement || 
-        (document as any).mozFullScreenElement || 
-        (document as any).msFullscreenElement) {
+    if (document.fullscreenElement ||
+      (document as any).webkitFullscreenElement ||
+      (document as any).mozFullScreenElement ||
+      (document as any).msFullscreenElement) {
       this.debugLog('Already in fullscreen mode');
       return;
     }
-    
+
     this.debugLog('Attempting synchronous fullscreen');
-    
+
     // Target the player wrapper to maintain custom controls
     const element = this.playerWrapper;
-    
+
     // Call fullscreen API synchronously (no await) to preserve user gesture
     if (element.requestFullscreen) {
       element.requestFullscreen().then(() => {
@@ -3165,23 +3165,23 @@ export class WebPlayer extends BasePlayer {
 
     try {
       // Check if fullscreen is supported
-      if (!document.fullscreenEnabled && 
-          !(document as any).webkitFullscreenEnabled && 
-          !(document as any).mozFullScreenEnabled && 
-          !(document as any).msFullscreenEnabled) {
+      if (!document.fullscreenEnabled &&
+        !(document as any).webkitFullscreenEnabled &&
+        !(document as any).mozFullScreenEnabled &&
+        !(document as any).msFullscreenEnabled) {
         this.debugWarn('Fullscreen not supported by browser');
         return false;
       }
-      
+
       // Check if already in fullscreen
-      if (document.fullscreenElement || 
-          (document as any).webkitFullscreenElement || 
-          (document as any).mozFullScreenElement || 
-          (document as any).msFullscreenElement) {
+      if (document.fullscreenElement ||
+        (document as any).webkitFullscreenElement ||
+        (document as any).mozFullScreenElement ||
+        (document as any).msFullscreenElement) {
         this.debugLog('Already in fullscreen mode');
         return false;
       }
-      
+
       // Check if this is within a reasonable time of user interaction
       const timeSinceInteraction = Date.now() - this.lastUserInteraction;
       this.debugLog('Attempting fullscreen within user gesture context', {
@@ -3189,10 +3189,10 @@ export class WebPlayer extends BasePlayer {
         timeSinceInteraction,
         isTrusted: event.isTrusted
       });
-      
+
       // Target the player wrapper to maintain custom controls
       const element = this.playerWrapper;
-      
+
       // Try fullscreen immediately while in the event context
       if (element.requestFullscreen) {
         await element.requestFullscreen();
@@ -3206,13 +3206,13 @@ export class WebPlayer extends BasePlayer {
         this.debugWarn('Fullscreen API not supported by this browser');
         return false;
       }
-      
+
       // Add fullscreen class for styling
       this.playerWrapper.classList.add('uvf-fullscreen');
       this.emit('onFullscreenChanged', true);
       this.debugLog('Successfully entered fullscreen');
       return true;
-      
+
     } catch (error) {
       this.debugWarn('Failed to enter fullscreen:', (error as Error).message);
       return false;
@@ -3241,7 +3241,7 @@ export class WebPlayer extends BasePlayer {
         <button class="uvf-instruction-close" onclick="this.parentElement.parentElement.remove()">Got it</button>
       </div>
     `;
-    
+
     overlay.style.cssText = `
       position: absolute;
       top: 0;
@@ -3257,7 +3257,7 @@ export class WebPlayer extends BasePlayer {
       color: white;
       text-align: center;
     `;
-    
+
     const content = overlay.querySelector('.uvf-fullscreen-instruction-content') as HTMLElement;
     if (content) {
       content.style.cssText = `
@@ -3270,7 +3270,7 @@ export class WebPlayer extends BasePlayer {
         animation: fadeIn 0.3s ease-out;
       `;
     }
-    
+
     const icon = overlay.querySelector('.uvf-fullscreen-icon') as HTMLElement;
     if (icon) {
       icon.style.cssText = `
@@ -3278,7 +3278,7 @@ export class WebPlayer extends BasePlayer {
         margin-bottom: 16px;
       `;
     }
-    
+
     const title = overlay.querySelector('h3') as HTMLElement;
     if (title) {
       title.style.cssText = `
@@ -3287,7 +3287,7 @@ export class WebPlayer extends BasePlayer {
         font-weight: 600;
       `;
     }
-    
+
     const text = overlay.querySelector('p') as HTMLElement;
     if (text) {
       text.style.cssText = `
@@ -3296,7 +3296,7 @@ export class WebPlayer extends BasePlayer {
         opacity: 0.9;
       `;
     }
-    
+
     const pointer = overlay.querySelector('.uvf-fullscreen-pointer') as HTMLElement;
     if (pointer) {
       pointer.style.cssText = `
@@ -3305,7 +3305,7 @@ export class WebPlayer extends BasePlayer {
         margin-bottom: 24px;
       `;
     }
-    
+
     const button = overlay.querySelector('.uvf-instruction-close') as HTMLElement;
     if (button) {
       button.style.cssText = `
@@ -3319,18 +3319,18 @@ export class WebPlayer extends BasePlayer {
         cursor: pointer;
         transition: all 0.2s ease;
       `;
-      
+
       button.addEventListener('mouseenter', () => {
         button.style.transform = 'scale(1.05)';
         button.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)';
       });
-      
+
       button.addEventListener('mouseleave', () => {
         button.style.transform = 'scale(1)';
         button.style.boxShadow = 'none';
       });
     }
-    
+
     // Add CSS animation
     if (!document.getElementById('uvf-fullscreen-animation-styles')) {
       const style = document.createElement('style');
@@ -3343,24 +3343,24 @@ export class WebPlayer extends BasePlayer {
       `;
       document.head.appendChild(style);
     }
-    
+
     // Add to player wrapper
     if (this.playerWrapper) {
       this.playerWrapper.appendChild(overlay);
     }
-    
+
     // Auto-remove after 5 seconds
     setTimeout(() => {
       if (overlay.parentElement) {
         overlay.remove();
       }
     }, 5000);
-    
+
     // Also highlight the fullscreen button if it exists
     const fullscreenBtn = document.getElementById('uvf-fullscreen-btn');
     if (fullscreenBtn) {
       fullscreenBtn.style.animation = 'pulse 2s infinite';
-      
+
       // Add pulse animation if not already added
       if (!document.getElementById('uvf-pulse-animation-styles')) {
         const style = document.createElement('style');
@@ -3374,13 +3374,13 @@ export class WebPlayer extends BasePlayer {
         `;
         document.head.appendChild(style);
       }
-      
+
       // Remove pulse after 3 seconds
       setTimeout(() => {
         fullscreenBtn.style.animation = '';
       }, 3000);
     }
-    
+
     this.debugLog('Showing fullscreen instructions overlay');
   }
 
@@ -3393,22 +3393,22 @@ export class WebPlayer extends BasePlayer {
       return true;
     } catch (error) {
       const errorMessage = (error as Error).message;
-      
-      if (errorMessage.includes('user gesture') || 
-          errorMessage.includes('user activation') || 
-          errorMessage.includes('Permissions check failed')) {
-        
+
+      if (errorMessage.includes('user gesture') ||
+        errorMessage.includes('user activation') ||
+        errorMessage.includes('Permissions check failed')) {
+
         // Try using the fullscreen button as a last resort
         const fullscreenBtn = document.getElementById('uvf-fullscreen-btn');
         if (fullscreenBtn && !this.hasTriedButtonFallback) {
           this.hasTriedButtonFallback = true;
           this.debugLog('Attempting fullscreen via button as fallback');
-          
+
           // Reset flag after a short delay
           setTimeout(() => {
             this.hasTriedButtonFallback = false;
           }, 1000);
-          
+
           // Try clicking the button programmatically
           const clickEvent = new MouseEvent('click', {
             bubbles: true,
@@ -3433,7 +3433,7 @@ export class WebPlayer extends BasePlayer {
 
   protected applySubtitleTrack(track: any): void {
     if (!this.video) return;
-    
+
     const tracks = this.video.textTracks;
     for (let i = 0; i < tracks.length; i++) {
       const textTrack = tracks[i];
@@ -3447,7 +3447,7 @@ export class WebPlayer extends BasePlayer {
 
   protected removeSubtitles(): void {
     if (!this.video) return;
-    
+
     const tracks = this.video.textTracks;
     for (let i = 0; i < tracks.length; i++) {
       tracks[i].mode = 'hidden';
@@ -3456,7 +3456,7 @@ export class WebPlayer extends BasePlayer {
 
   private injectStyles(): void {
     if (document.getElementById('uvf-player-styles')) return;
-    
+
     const style = document.createElement('style');
     style.id = 'uvf-player-styles';
     style.textContent = this.getPlayerStyles();
@@ -3633,6 +3633,12 @@ export class WebPlayer extends BasePlayer {
         to { transform: rotate(360deg); }
       }
       
+      /* Hide center play button when loading is active */
+      .uvf-loading-container.active ~ .uvf-center-play-container {
+        opacity: 0;
+        pointer-events: none;
+      }
+      
       /* Center Play Button Container */
       .uvf-center-play-container {
         position: absolute;
@@ -6680,17 +6686,17 @@ export class WebPlayer extends BasePlayer {
    * Creates framework branding logo
    * Only creates branding if showFrameworkBranding is not explicitly set to false
    */
-    private createFrameworkBranding(container: HTMLElement): void {
-        // Double-check configuration (defensive programming)
-        if ((this.config as any).showFrameworkBranding === false) {
-            this.debugLog('Framework branding disabled by configuration');
-            return;
-        }
-        const brandingContainer = document.createElement('div');
-        brandingContainer.className = 'uvf-framework-branding';
-        brandingContainer.setAttribute('title', 'Powered by flicknexs');
-        
-        const logoSvg = `
+  private createFrameworkBranding(container: HTMLElement): void {
+    // Double-check configuration (defensive programming)
+    if ((this.config as any).showFrameworkBranding === false) {
+      this.debugLog('Framework branding disabled by configuration');
+      return;
+    }
+    const brandingContainer = document.createElement('div');
+    brandingContainer.className = 'uvf-framework-branding';
+    brandingContainer.setAttribute('title', 'Powered by flicknexs');
+
+    const logoSvg = `
             <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" id="Layer_1" viewBox="0 0 180 29" class="uvf-logo-svg">
                 <defs>
                     <style>.cls-1{fill:#0d5ef8;}.cls-2{fill:#ff0366;opacity:0.94;}.cls-3{fill:#fff;}</style>
@@ -6710,35 +6716,35 @@ export class WebPlayer extends BasePlayer {
                 <path class="cls-3" d="M17.5,8.84l-2.33.74c-1.12.36-2,.63-2.63.82-.92.28-1.78.52-2.58.74s-1.61.41-2.41.59C8.22,13.68,9,16.3,9.72,19.6s1.37,6.23,1.79,8.8a18.88,18.88,0,0,0,2-.44,14.36,14.36,0,0,0,1.8-.64c-.08-1-.2-2-.34-3.2s-.31-2.38-.5-3.69c.55-.16,1.14-.3,1.76-.43s1.31-.26,2.07-.38q-.2-1.15-.39-1.92a8.8,8.8,0,0,0-.5-1.42,16.83,16.83,0,0,0-1.74.38,14.8,14.8,0,0,0-1.73.6c-.1-.59-.2-1.18-.32-1.78s-.24-1.18-.37-1.76L15,13.26l3-.82a8.59,8.59,0,0,0,0-1,6.88,6.88,0,0,0-.08-.83q-.09-.54-.21-1a6.18,6.18,0,0,0-.29-.78Z"/>
             </svg>
         `;
-        
-        brandingContainer.innerHTML = logoSvg;
-        
-        // Add click handler to redirect to flicknexs.com
-        brandingContainer.addEventListener('click', (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            
-            // Open flicknexs.com in a new tab/window
-            const link = document.createElement('a');
-            link.href = 'https://flicknexs.com/';
-            link.target = '_blank';
-            link.rel = 'noopener noreferrer';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            
-            // Emit analytics event
-            this.emit('frameworkBrandingClick', {
-                timestamp: Date.now(),
-                url: 'https://flicknexs.com/',
-                userAgent: navigator.userAgent
-            });
-        });
-        
-        container.appendChild(brandingContainer);
-        
-        this.debugLog('Framework branding added');
-    }
+
+    brandingContainer.innerHTML = logoSvg;
+
+    // Add click handler to redirect to flicknexs.com
+    brandingContainer.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      // Open flicknexs.com in a new tab/window
+      const link = document.createElement('a');
+      link.href = 'https://flicknexs.com/';
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      // Emit analytics event
+      this.emit('frameworkBrandingClick', {
+        timestamp: Date.now(),
+        url: 'https://flicknexs.com/',
+        userAgent: navigator.userAgent
+      });
+    });
+
+    container.appendChild(brandingContainer);
+
+    this.debugLog('Framework branding added');
+  }
 
   /**
    * Create navigation buttons (back/close) based on configuration
@@ -6756,16 +6762,16 @@ export class WebPlayer extends BasePlayer {
       backBtn.id = 'uvf-back-btn';
       backBtn.title = backButton.title || 'Back';
       backBtn.setAttribute('aria-label', backButton.ariaLabel || 'Go back');
-      
+
       // Get icon based on config
       const backIcon = this.getNavigationIcon(backButton.icon || 'arrow', backButton.customIcon);
       backBtn.innerHTML = backIcon;
-      
+
       // Add click handler
       backBtn.addEventListener('click', async (e) => {
         e.preventDefault();
         e.stopPropagation();
-        
+
         if (backButton.onClick) {
           await backButton.onClick();
         } else if (backButton.href) {
@@ -6778,10 +6784,10 @@ export class WebPlayer extends BasePlayer {
           // Default: go back in history
           window.history.back();
         }
-        
+
         this.emit('navigationBackClicked');
       });
-      
+
       container.appendChild(backBtn);
     }
 
@@ -6792,16 +6798,16 @@ export class WebPlayer extends BasePlayer {
       closeBtn.id = 'uvf-close-btn';
       closeBtn.title = closeButton.title || 'Close';
       closeBtn.setAttribute('aria-label', closeButton.ariaLabel || 'Close player');
-      
+
       // Get icon based on config
       const closeIcon = this.getNavigationIcon(closeButton.icon || 'x', closeButton.customIcon);
       closeBtn.innerHTML = closeIcon;
-      
+
       // Add click handler
       closeBtn.addEventListener('click', async (e) => {
         e.preventDefault();
         e.stopPropagation();
-        
+
         if (closeButton.onClick) {
           await closeButton.onClick();
         } else {
@@ -6809,7 +6815,7 @@ export class WebPlayer extends BasePlayer {
           if (closeButton.exitFullscreen && this.isFullscreen()) {
             await this.exitFullscreen();
           }
-          
+
           if (closeButton.closeModal) {
             // Hide player or remove from DOM
             const playerWrapper = this.container?.querySelector('.uvf-player-wrapper') as HTMLElement;
@@ -6818,10 +6824,10 @@ export class WebPlayer extends BasePlayer {
             }
           }
         }
-        
+
         this.emit('navigationCloseClicked');
       });
-      
+
       container.appendChild(closeBtn);
     }
   }
@@ -6843,22 +6849,22 @@ export class WebPlayer extends BasePlayer {
         return `<svg viewBox="0 0 24 24">
           <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z" fill="currentColor"/>
         </svg>`;
-      
+
       case 'chevron':
         return `<svg viewBox="0 0 24 24">
           <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="currentColor"/>
         </svg>`;
-      
+
       case 'x':
         return `<svg viewBox="0 0 24 24">
           <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
         </svg>`;
-      
+
       case 'close':
         return `<svg viewBox="0 0 24 24">
           <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="currentColor"/>
         </svg>`;
-      
+
       default:
         return `<svg viewBox="0 0 24 24">
           <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z" fill="currentColor"/>
@@ -6875,21 +6881,21 @@ export class WebPlayer extends BasePlayer {
     const controlsGradient = document.createElement('div');
     controlsGradient.className = 'uvf-controls-gradient';
     container.appendChild(controlsGradient);
-    
+
     // Combined top bar: navigation buttons → title → controls
     const topBar = document.createElement('div');
     topBar.className = 'uvf-top-bar';
-    
+
     // Left side container for navigation + title
     const leftSide = document.createElement('div');
     leftSide.className = 'uvf-left-side';
-    
+
     // Navigation buttons (back/close)
     const navigationControls = document.createElement('div');
     navigationControls.className = 'uvf-navigation-controls';
     this.createNavigationButtons(navigationControls);
     leftSide.appendChild(navigationControls);
-    
+
     // Title bar (after navigation buttons)
     const titleBar = document.createElement('div');
     titleBar.className = 'uvf-title-bar';
@@ -6902,9 +6908,9 @@ export class WebPlayer extends BasePlayer {
       </div>
     `;
     leftSide.appendChild(titleBar);
-    
+
     topBar.appendChild(leftSide);
-    
+
     // Top controls (right side - Cast and Share buttons)
     const topControls = document.createElement('div');
     topControls.className = 'uvf-top-controls';
@@ -6927,12 +6933,12 @@ export class WebPlayer extends BasePlayer {
       </button>
     `;
     topBar.appendChild(topControls);
-    
+
     container.appendChild(topBar);
 
-    // Add loading spinner
+    // Add loading spinner (show by default until video is ready)
     const loadingContainer = document.createElement('div');
-    loadingContainer.className = 'uvf-loading-container';
+    loadingContainer.className = 'uvf-loading-container active'; // Start with active class
     loadingContainer.id = 'uvf-loading';
     loadingContainer.innerHTML = '<div class="uvf-loading-spinner"></div>';
     container.appendChild(loadingContainer);
@@ -6940,15 +6946,15 @@ export class WebPlayer extends BasePlayer {
     // Add center play button container for proper responsive centering
     const centerPlayContainer = document.createElement('div');
     centerPlayContainer.className = 'uvf-center-play-container';
-    
+
     const centerPlayBtn = document.createElement('div');
     centerPlayBtn.className = 'uvf-center-play-btn uvf-pulse';
     centerPlayBtn.id = 'uvf-center-play';
     centerPlayBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" stroke="currentColor" stroke-width="0.5" fill="currentColor"/></svg>';
-    
+
     centerPlayContainer.appendChild(centerPlayBtn);
     container.appendChild(centerPlayContainer);
-    
+
     // Add shortcut indicator
     const shortcutIndicator = document.createElement('div');
     shortcutIndicator.className = 'uvf-shortcut-indicator';
@@ -6959,11 +6965,11 @@ export class WebPlayer extends BasePlayer {
     const controlsBar = document.createElement('div');
     controlsBar.className = 'uvf-controls-bar';
     controlsBar.id = 'uvf-controls';
-    
+
     // Time and branding section above seekbar
     const aboveSeekbarSection = document.createElement('div');
     aboveSeekbarSection.className = 'uvf-above-seekbar-section';
-    
+
     // Time display (moved to above seekbar)
     const timeDisplay = document.createElement('div');
     timeDisplay.className = 'uvf-time-display uvf-above-seekbar';
@@ -6975,11 +6981,11 @@ export class WebPlayer extends BasePlayer {
     if ((this.config as any).showFrameworkBranding !== false) {
       this.createFrameworkBranding(aboveSeekbarSection);
     }
-    
+
     // Progress section
     const progressSection = document.createElement('div');
     progressSection.className = 'uvf-progress-section';
-    
+
     const progressBar = document.createElement('div');
     progressBar.className = 'uvf-progress-bar-wrapper';
     progressBar.id = 'uvf-progress-bar';
@@ -6992,11 +6998,11 @@ export class WebPlayer extends BasePlayer {
       <div class="uvf-time-tooltip" id="uvf-time-tooltip">00:00</div>
     `;
     progressSection.appendChild(progressBar);
-    
+
     // Controls row
     const controlsRow = document.createElement('div');
     controlsRow.className = 'uvf-controls-row';
-    
+
     // Play/Pause button
     const playPauseBtn = document.createElement('button');
     playPauseBtn.className = 'uvf-control-btn play-pause';
@@ -7010,7 +7016,7 @@ export class WebPlayer extends BasePlayer {
       </svg>
     `;
     controlsRow.appendChild(playPauseBtn);
-    
+
     // Skip buttons with consistent icons
     const skipBackBtn = document.createElement('button');
     skipBackBtn.className = 'uvf-control-btn';
@@ -7019,7 +7025,7 @@ export class WebPlayer extends BasePlayer {
     skipBackBtn.setAttribute('aria-label', 'Skip backward 10 seconds');
     skipBackBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" stroke="currentColor" stroke-width="0.5" fill="currentColor"/></svg>';
     controlsRow.appendChild(skipBackBtn);
-    
+
     const skipForwardBtn = document.createElement('button');
     skipForwardBtn.className = 'uvf-control-btn';
     skipForwardBtn.id = 'uvf-skip-forward';
@@ -7027,7 +7033,7 @@ export class WebPlayer extends BasePlayer {
     skipForwardBtn.setAttribute('aria-label', 'Skip forward 10 seconds');
     skipForwardBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" stroke="currentColor" stroke-width="0.5" fill="currentColor"/></svg>';
     controlsRow.appendChild(skipForwardBtn);
-    
+
     // Volume control
     const volumeControl = document.createElement('div');
     volumeControl.className = 'uvf-volume-control';
@@ -7048,23 +7054,23 @@ export class WebPlayer extends BasePlayer {
       </div>
     `;
     controlsRow.appendChild(volumeControl);
-    
+
     // Right controls
     const rightControls = document.createElement('div');
     rightControls.className = 'uvf-right-controls';
-    
+
     // Quality badge
     const qualityBadge = document.createElement('div');
     qualityBadge.className = 'uvf-quality-badge';
     qualityBadge.id = 'uvf-quality-badge';
     qualityBadge.textContent = 'HD';
     rightControls.appendChild(qualityBadge);
-    
+
     // Settings button with menu (show only if enabled)
     this.debugLog('Settings config check:', this.settingsConfig);
     this.debugLog('Settings enabled:', this.settingsConfig.enabled);
     this.debugLog('Custom controls enabled:', this.useCustomControls);
-    
+
     if (this.settingsConfig.enabled) {
       this.debugLog('Creating settings button...');
       const settingsContainer = document.createElement('div');
@@ -7073,7 +7079,7 @@ export class WebPlayer extends BasePlayer {
       settingsContainer.style.display = 'flex';
       settingsContainer.style.alignItems = 'center';
       settingsContainer.style.justifyContent = 'center';
-      
+
       const settingsBtn = document.createElement('button');
       settingsBtn.className = 'uvf-control-btn';
       settingsBtn.id = 'uvf-settings-btn';
@@ -7081,7 +7087,7 @@ export class WebPlayer extends BasePlayer {
       settingsBtn.setAttribute('aria-label', 'Settings');
       settingsBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>';
       settingsContainer.appendChild(settingsBtn);
-      
+
       // Settings menu - will be populated dynamically based on video capabilities and configuration
       const settingsMenu = document.createElement('div');
       settingsMenu.className = 'uvf-settings-menu';
@@ -7091,9 +7097,9 @@ export class WebPlayer extends BasePlayer {
       // CSS handles initial hidden state
       settingsContainer.appendChild(settingsMenu);
       rightControls.appendChild(settingsContainer);
-      
+
       this.debugLog('Settings button created and added to controls');
-      
+
       // Add debugging for settings button visibility
       setTimeout(() => {
         const createdBtn = document.getElementById('uvf-settings-btn');
@@ -7107,10 +7113,10 @@ export class WebPlayer extends BasePlayer {
           this.debugLog('- Height:', computedStyle.height);
           this.debugLog('- Position:', computedStyle.position);
           this.debugLog('- Z-index:', computedStyle.zIndex);
-          
+
           const rect = createdBtn.getBoundingClientRect();
           this.debugLog('- Bounding rect:', { width: rect.width, height: rect.height, top: rect.top, left: rect.left });
-          
+
           // Check parent containers
           const settingsContainer = createdBtn.closest('.uvf-settings-container');
           if (settingsContainer) {
@@ -7120,7 +7126,7 @@ export class WebPlayer extends BasePlayer {
             this.debugLog('Settings container visibility:', containerStyle.visibility);
             this.debugLog('Settings container rect:', { width: containerRect.width, height: containerRect.height, top: containerRect.top, left: containerRect.left });
           }
-          
+
           const rightControls = createdBtn.closest('.uvf-right-controls');
           if (rightControls) {
             const parentStyle = window.getComputedStyle(rightControls);
@@ -7132,7 +7138,7 @@ export class WebPlayer extends BasePlayer {
         } else {
           this.debugError('Settings button NOT found after creation!');
         }
-        
+
         // Fallback: Force settings button visibility if it's not rendering properly
         setTimeout(() => {
           const btn = document.getElementById('uvf-settings-btn');
@@ -7152,7 +7158,7 @@ export class WebPlayer extends BasePlayer {
               btn.style.border = '1px solid rgba(255,255,255,0.1)';
               btn.style.position = 'relative';
               btn.style.zIndex = '10';
-              
+
               // Also fix the container
               const container = btn.parentElement;
               if (container) {
@@ -7162,7 +7168,7 @@ export class WebPlayer extends BasePlayer {
                 container.style.minWidth = '44px';
                 container.style.minHeight = '44px';
               }
-              
+
               this.debugLog('Fallback styles applied to settings button');
             }
           }
@@ -7171,7 +7177,7 @@ export class WebPlayer extends BasePlayer {
     } else {
       this.debugLog('Settings button NOT created - settings disabled');
     }
-    
+
     // EPG button (Electronic Program Guide)
     const epgBtn = document.createElement('button');
     epgBtn.className = 'uvf-control-btn';
@@ -7185,42 +7191,42 @@ export class WebPlayer extends BasePlayer {
     </svg>`;
     epgBtn.style.display = 'none'; // Initially hidden, will be shown when EPG data is available
     rightControls.appendChild(epgBtn);
-    
+
     // PiP button - only show on desktop/supported browsers
     const pipBtn = document.createElement('button');
     pipBtn.className = 'uvf-control-btn';
     pipBtn.id = 'uvf-pip-btn';
     pipBtn.title = 'Picture-in-Picture';
     pipBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z" stroke="currentColor" stroke-width="0.5" fill="currentColor"/></svg>';
-    
+
     // Hide PiP button on mobile devices and browsers that don't support it
     if (this.isMobileDevice() || !this.isPipSupported()) {
       pipBtn.style.display = 'none';
     }
-    
+
     rightControls.appendChild(pipBtn);
-    
+
     // Fullscreen button
     const fullscreenBtn = document.createElement('button');
     fullscreenBtn.className = 'uvf-control-btn';
     fullscreenBtn.id = 'uvf-fullscreen-btn';
     fullscreenBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" stroke="currentColor" stroke-width="0.5" fill="currentColor"/></svg>';
     rightControls.appendChild(fullscreenBtn);
-    
+
     controlsRow.appendChild(rightControls);
-    
+
     // Assemble controls bar
     controlsBar.appendChild(aboveSeekbarSection);
     controlsBar.appendChild(progressSection);
     controlsBar.appendChild(controlsRow);
     container.appendChild(controlsBar);
-    
+
     this.controlsContainer = controlsBar;
   }
 
   private setupControlsEventListeners(): void {
     if (!this.useCustomControls || !this.video) return;
-    
+
     const wrapper = this.container?.querySelector('.uvf-player-wrapper') as HTMLElement;
     const centerPlay = document.getElementById('uvf-center-play');
     const playPauseBtn = document.getElementById('uvf-play-pause');
@@ -7232,25 +7238,25 @@ export class WebPlayer extends BasePlayer {
     const progressBar = document.getElementById('uvf-progress-bar');
     const fullscreenBtn = document.getElementById('uvf-fullscreen-btn');
     const settingsBtn = document.getElementById('uvf-settings-btn');
-    
+
     // Get the event target (video element or YouTube player)
     const getEventTarget = () => this.youtubePlayer && this.youtubePlayerReady ? this.youtubePlayer : this.video;
-    
+
     // Disable right-click context menu
     this.video.addEventListener('contextmenu', (e) => {
       e.preventDefault();
       return false;
     });
-    
+
     wrapper?.addEventListener('contextmenu', (e) => {
       e.preventDefault();
       return false;
     });
-    
+
     // Play/Pause
     centerPlay?.addEventListener('click', () => this.togglePlayPause());
     playPauseBtn?.addEventListener('click', () => this.togglePlayPause());
-    
+
     // Video click behavior will be handled by the comprehensive tap system below
     // Desktop click for play/pause
     if (!this.isMobileDevice()) {
@@ -7258,20 +7264,20 @@ export class WebPlayer extends BasePlayer {
         this.togglePlayPause();
       });
     }
-    
+
     // Update play/pause icons
     this.video.addEventListener('play', () => {
       const playIcon = document.getElementById('uvf-play-icon');
       const pauseIcon = document.getElementById('uvf-pause-icon');
       if (playIcon) playIcon.style.display = 'none';
       if (pauseIcon) pauseIcon.style.display = 'block';
-      
+
       // Hide center play button when playing
       if (centerPlay) {
         centerPlay.classList.add('hidden');
         this.debugLog('Center play button hidden - video playing');
       }
-      
+
       // Schedule hide controls
       setTimeout(() => {
         if (this.state.isPlaying) {
@@ -7279,13 +7285,13 @@ export class WebPlayer extends BasePlayer {
         }
       }, 1000);
     });
-    
+
     this.video.addEventListener('pause', () => {
       const playIcon = document.getElementById('uvf-play-icon');
       const pauseIcon = document.getElementById('uvf-pause-icon');
       if (playIcon) playIcon.style.display = 'block';
       if (pauseIcon) pauseIcon.style.display = 'none';
-      
+
       // Show center play button when paused
       if (centerPlay) {
         centerPlay.classList.remove('hidden');
@@ -7293,7 +7299,7 @@ export class WebPlayer extends BasePlayer {
       }
       this.showControls();
     });
-    
+
     // Ensure center play button is visible initially when video is paused/stopped
     this.video.addEventListener('loadeddata', () => {
       if (centerPlay && (this.video?.paused || this.video?.ended)) {
@@ -7301,14 +7307,14 @@ export class WebPlayer extends BasePlayer {
         this.debugLog('Center play button shown - video loaded and paused');
       }
     });
-    
+
     this.video.addEventListener('ended', () => {
       if (centerPlay) {
         centerPlay.classList.remove('hidden');
         this.debugLog('Center play button shown - video ended');
       }
     });
-    
+
     // Skip buttons with null safety - works with both video and YouTube
     skipBackBtn?.addEventListener('click', () => {
       const currentTime = this.getCurrentTime();
@@ -7326,19 +7332,19 @@ export class WebPlayer extends BasePlayer {
         this.showShortcutIndicator('+10s');
       }
     });
-    
+
     // Volume control
     volumeBtn?.addEventListener('click', (e) => {
       e.stopPropagation();
       this.toggleMuteAction();
     });
-    
+
     // Volume panel interactions
     volumeBtn?.addEventListener('mouseenter', () => {
       if (this.volumeHideTimeout) clearTimeout(this.volumeHideTimeout);
       volumePanel?.classList.add('active');
     });
-    
+
     volumeBtn?.addEventListener('mouseleave', () => {
       this.volumeHideTimeout = setTimeout(() => {
         if (!volumePanel?.matches(':hover')) {
@@ -7346,12 +7352,12 @@ export class WebPlayer extends BasePlayer {
         }
       }, 800);
     });
-    
+
     volumePanel?.addEventListener('mouseenter', () => {
       if (this.volumeHideTimeout) clearTimeout(this.volumeHideTimeout);
       volumePanel.classList.add('active');
     });
-    
+
     volumePanel?.addEventListener('mouseleave', () => {
       if (!this.isVolumeSliding) {
         setTimeout(() => {
@@ -7361,7 +7367,7 @@ export class WebPlayer extends BasePlayer {
         }, 1500);
       }
     });
-    
+
     // Volume slider
     volumeSlider?.addEventListener('mousedown', (e) => {
       e.stopPropagation();
@@ -7369,43 +7375,43 @@ export class WebPlayer extends BasePlayer {
       volumePanel?.classList.add('active');
       this.handleVolumeChange(e as MouseEvent);
     });
-    
+
     volumeSlider?.addEventListener('click', (e) => {
       e.stopPropagation();
       this.handleVolumeChange(e as MouseEvent);
     });
-    
-    
+
+
     // Progress bar interactions
     progressBar?.addEventListener('click', (e) => {
       this.seekToPosition(e as MouseEvent);
     });
-    
+
     progressBar?.addEventListener('mousedown', (e) => {
       this.isDragging = true;
       this.showTimeTooltip = true;
       this.seekToPosition(e as MouseEvent);
       this.updateTimeTooltip(e as MouseEvent);
     });
-    
+
     // Hover tooltip functionality
     progressBar?.addEventListener('mouseenter', () => {
       this.showTimeTooltip = true;
     });
-    
+
     progressBar?.addEventListener('mouseleave', () => {
       if (!this.isDragging) {
         this.showTimeTooltip = false;
         this.hideTimeTooltip();
       }
     });
-    
+
     progressBar?.addEventListener('mousemove', (e) => {
       if (this.showTimeTooltip) {
         this.updateTimeTooltip(e as MouseEvent);
       }
     });
-    
+
     // Touch support for mobile devices
     progressBar?.addEventListener('touchstart', (e) => {
       e.preventDefault(); // Prevent scrolling
@@ -7417,7 +7423,7 @@ export class WebPlayer extends BasePlayer {
       });
       this.seekToPosition(mouseEvent);
     }, { passive: false });
-    
+
     // Global mouse and touch events for enhanced dragging
     document.addEventListener('mousemove', (e) => {
       if (this.isVolumeSliding) {
@@ -7429,7 +7435,7 @@ export class WebPlayer extends BasePlayer {
         this.updateTimeTooltip(e);
       }
     });
-    
+
     document.addEventListener('touchmove', (e) => {
       if (this.isDragging && progressBar) {
         e.preventDefault(); // Prevent scrolling
@@ -7441,7 +7447,7 @@ export class WebPlayer extends BasePlayer {
         this.seekToPosition(mouseEvent);
       }
     }, { passive: false });
-    
+
     document.addEventListener('mouseup', () => {
       if (this.isVolumeSliding) {
         this.isVolumeSliding = false;
@@ -7451,7 +7457,7 @@ export class WebPlayer extends BasePlayer {
           }
         }, 2000);
       }
-      
+
       if (this.isDragging) {
         this.isDragging = false;
         // Remove dragging class from handle
@@ -7464,7 +7470,7 @@ export class WebPlayer extends BasePlayer {
         }
       }
     });
-    
+
     document.addEventListener('touchend', () => {
       if (this.isDragging) {
         this.isDragging = false;
@@ -7476,26 +7482,26 @@ export class WebPlayer extends BasePlayer {
         this.hideTimeTooltip();
       }
     });
-    
+
     // Update progress bar
     this.video.addEventListener('timeupdate', () => {
       const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
       const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
-      
+
       if (this.video && progressFilled) {
         const percent = (this.video.currentTime / this.video.duration) * 100;
         progressFilled.style.width = percent + '%';
-        
+
         // Update handle position (only when not dragging)
         if (progressHandle && !this.isDragging) {
           progressHandle.style.left = percent + '%';
         }
       }
-      
+
       // Update time display using the dedicated method
       this.updateTimeDisplay();
     });
-    
+
     // Update buffered progress
     this.video.addEventListener('progress', () => {
       const progressBuffered = document.getElementById('uvf-progress-buffered') as HTMLElement;
@@ -7504,7 +7510,7 @@ export class WebPlayer extends BasePlayer {
         progressBuffered.style.width = buffered + '%';
       }
     });
-    
+
     // Update volume display
     this.video.addEventListener('volumechange', () => {
       const volumeFill = document.getElementById('uvf-volume-fill') as HTMLElement;
@@ -7533,7 +7539,7 @@ export class WebPlayer extends BasePlayer {
         }
       }
     });
-    
+
     // Fullscreen button with enhanced cross-platform support
     fullscreenBtn?.addEventListener('click', (event) => {
       // Enhanced debugging for all platforms
@@ -7542,7 +7548,7 @@ export class WebPlayer extends BasePlayer {
       const isIOS = this.isIOSDevice();
       const isAndroid = this.isAndroidDevice();
       const isMobile = this.isMobileDevice();
-      
+
       this.debugLog('Fullscreen button clicked:', {
         isBrave,
         isPrivate,
@@ -7555,13 +7561,13 @@ export class WebPlayer extends BasePlayer {
         timestamp: Date.now(),
         fullscreenSupported: this.isFullscreenSupported()
       });
-      
+
       // Update user interaction timestamp
       this.lastUserInteraction = Date.now();
-      
+
       // Run permissions check before attempting fullscreen
       this.checkFullscreenPermissions();
-      
+
       if (this.isFullscreen()) {
         this.debugLog('Exiting fullscreen via button');
         this.exitFullscreen().catch(err => {
@@ -7569,18 +7575,18 @@ export class WebPlayer extends BasePlayer {
         });
       } else {
         this.debugLog('Entering fullscreen via button');
-        
+
         // iOS Safari special message
         if (isIOS) {
           this.showShortcutIndicator('Using iOS video fullscreen');
         } else if (isAndroid) {
           this.showShortcutIndicator('Entering fullscreen - rotate to landscape');
         }
-        
+
         // Use enhanced cross-platform fullscreen method
         this.enterFullscreen().catch(err => {
           this.debugWarn('Fullscreen button failed:', err.message);
-          
+
           // Platform-specific error messages
           if (isIOS) {
             this.showTemporaryMessage('iOS: Use device rotation or video controls for fullscreen');
@@ -7594,69 +7600,70 @@ export class WebPlayer extends BasePlayer {
         });
       }
     });
-    
+
     // Update fullscreen button icon based on state
     const updateFullscreenIcon = () => {
       const fullscreenBtn = document.getElementById('uvf-fullscreen-btn');
       if (fullscreenBtn) {
-        fullscreenBtn.innerHTML = this.isFullscreen() 
+        fullscreenBtn.innerHTML = this.isFullscreen()
           ? '<svg viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>'
           : '<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
       }
     };
-    
+
     // Listen for fullscreen state changes to update icon
     this.on('onFullscreenChanged', updateFullscreenIcon);
-    
+
     // Loading states
     this.video.addEventListener('waiting', () => {
       const loading = document.getElementById('uvf-loading');
       if (loading) loading.classList.add('active');
     });
-    
+
     this.video.addEventListener('canplay', () => {
       const loading = document.getElementById('uvf-loading');
       if (loading) loading.classList.remove('active');
       // Update settings menu when video is ready
       this.updateSettingsMenu();
+      this.debugLog('📡 canplay event fired - video ready to play');
     });
 
     this.video.addEventListener('loadedmetadata', () => {
       // Update settings menu when metadata is loaded
       this.updateSettingsMenu();
     });
-    
+
     // Note: Enhanced mouse movement and control visibility handled in setupFullscreenListeners()
-    
+
     this.controlsContainer?.addEventListener('mouseenter', () => {
       if (this.hideControlsTimeout) clearTimeout(this.hideControlsTimeout);
     });
-    
+
     this.controlsContainer?.addEventListener('mouseleave', () => {
       if (this.state.isPlaying) {
         this.scheduleHideControls();
       }
     });
-    
-    
+
+
     // Settings menu - dynamically populated
     const settingsMenu = document.getElementById('uvf-settings-menu');
     this.debugLog('Settings menu element found:', !!settingsMenu);
     this.debugLog('Settings button found:', !!settingsBtn);
-    
+
     settingsBtn?.addEventListener('click', (e) => {
       e.stopPropagation();
       this.debugLog('Settings button clicked!');
       this.debugLog('Settings menu before update:', settingsMenu?.innerHTML?.length || 0, 'characters');
-      
+
       // Update the menu content before showing it
       this.updateSettingsMenu();
-      
+
       this.debugLog('Settings menu after update:', settingsMenu?.innerHTML?.length || 0, 'characters');
       this.debugLog('Settings menu classes before toggle:', Array.from(settingsMenu?.classList || []).join(' '));
-      
+
       settingsMenu?.classList.toggle('active');
-      
+
       // Force visibility if menu is active, hide if not active
       if (settingsMenu) {
         if (settingsMenu.classList.contains('active')) {
@@ -7681,13 +7688,13 @@ export class WebPlayer extends BasePlayer {
           this.debugLog('Applied fallback styles to hide menu');
         }
       }
-      
+
       this.debugLog('Settings menu classes after toggle:', Array.from(settingsMenu?.classList || []).join(' '));
       this.debugLog('Settings menu computed display:', window.getComputedStyle(settingsMenu || document.body).display);
       this.debugLog('Settings menu computed visibility:', window.getComputedStyle(settingsMenu || document.body).visibility);
       this.debugLog('Settings menu computed opacity:', window.getComputedStyle(settingsMenu || document.body).opacity);
     });
-    
+
     // EPG button
     const epgBtn = document.getElementById('uvf-epg-btn');
     epgBtn?.addEventListener('click', (e) => {
@@ -7696,16 +7703,16 @@ export class WebPlayer extends BasePlayer {
       // Trigger custom event for EPG toggle
       this.emit('epgToggle', {});
     });
-    
+
     // PiP button
     const pipBtn = document.getElementById('uvf-pip-btn');
     pipBtn?.addEventListener('click', () => this.togglePiP());
-    
+
     // Top control buttons
     const castBtn = document.getElementById('uvf-cast-btn');
     const stopCastBtn = document.getElementById('uvf-stop-cast-btn');
     const shareBtn = document.getElementById('uvf-share-btn');
-    
+
     // Update cast button icon and functionality for iOS (AirPlay)
     if (this.isIOSDevice() && castBtn) {
       castBtn.innerHTML = `
@@ -7716,19 +7723,19 @@ export class WebPlayer extends BasePlayer {
       castBtn.setAttribute('title', 'AirPlay');
       castBtn.setAttribute('aria-label', 'AirPlay');
     }
-    
+
     castBtn?.addEventListener('click', () => this.onCastButtonClick());
     stopCastBtn?.addEventListener('click', () => this.stopCasting());
     shareBtn?.addEventListener('click', () => this.shareVideo());
-    
+
     // Hide settings menu when clicking outside or pressing Escape
     document.addEventListener('click', (e) => {
-      if (!(e.target as HTMLElement).closest('#uvf-settings-btn') && 
-          !(e.target as HTMLElement).closest('#uvf-settings-menu')) {
+      if (!(e.target as HTMLElement).closest('#uvf-settings-btn') &&
+        !(e.target as HTMLElement).closest('#uvf-settings-menu')) {
         this.hideSettingsMenu();
       }
     });
-    
+
     // Add Escape key handler for settings menu
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape' && settingsMenu?.classList.contains('active')) {
@@ -7736,7 +7743,7 @@ export class WebPlayer extends BasePlayer {
       }
     });
   }
-  
+
   protected setupKeyboardShortcuts(): void {
     // Add keyboard event listener to both document and player wrapper for better coverage
     const handleKeydown = (e: KeyboardEvent) => {
@@ -7745,23 +7752,23 @@ export class WebPlayer extends BasePlayer {
       if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
         return;
       }
-      
+
       // Block all keyboard controls during ads (Google IMA handles ad controls)
       if (this.isAdPlaying) {
         this.debugLog('Keyboard blocked: Ad is playing');
         e.preventDefault();
         return;
       }
-      
+
       // Debug logging
       this.debugLog('Keyboard event:', e.key, 'target:', target.tagName);
-      
+
       let shortcutText = '';
-      
+
       // Update interaction timestamp
       this.lastUserInteraction = Date.now();
-      
-      switch(e.key) {
+
+      switch (e.key) {
         case ' ':
         case 'Spacebar': // For older browsers
         case 'k':
@@ -7772,13 +7779,13 @@ export class WebPlayer extends BasePlayer {
             videoPaused: this.video?.paused,
             videoExists: !!this.video
           });
-          
+
           // Determine what action we're about to take based on current video state
           const willPlay = this.video?.paused || false;
           this.debugLog('Will perform action:', willPlay ? 'PLAY' : 'PAUSE');
-          
+
           this.togglePlayPause();
-          
+
           // Show the action we're taking, not the current state
           shortcutText = willPlay ? 'Play' : 'Pause';
           this.debugLog('Showing icon:', shortcutText);
@@ -7844,7 +7851,7 @@ export class WebPlayer extends BasePlayer {
           break;
         case 'f':
           e.preventDefault();
-          
+
           if (!document.fullscreenElement) {
             // Always use the fullscreen button for maximum reliability
             this.triggerFullscreenButton();
@@ -7888,26 +7895,26 @@ export class WebPlayer extends BasePlayer {
           }
           break;
       }
-      
+
       if (shortcutText) {
         this.debugLog('Showing shortcut indicator:', shortcutText);
         this.showShortcutIndicator(shortcutText);
       }
     };
-    
+
     // Add event listeners to multiple targets for better coverage
     document.addEventListener('keydown', handleKeydown, { capture: true });
-    
+
     // Also add to the player wrapper if it exists
     if (this.playerWrapper) {
       this.playerWrapper.addEventListener('keydown', handleKeydown);
       this.playerWrapper.setAttribute('tabindex', '0'); // Make it focusable
-      
+
       // Add visual feedback when player is focused for better UX
       this.playerWrapper.addEventListener('focus', () => {
         this.debugLog('Player focused - keyboard shortcuts available');
       });
-      
+
       // Auto-focus the player when clicked to enable keyboard shortcuts
       this.playerWrapper.addEventListener('click', (e) => {
         // Don't focus if clicking on a control button
@@ -7918,17 +7925,17 @@ export class WebPlayer extends BasePlayer {
           this.lastUserInteraction = Date.now();
         }
       });
-      
+
       // Also focus on any interaction with the video area
       this.playerWrapper.addEventListener('mousedown', () => {
         this.playerWrapper?.focus();
         this.lastUserInteraction = Date.now();
       });
-      
+
       // Advanced tap handling system for mobile
       this.setupAdvancedTapHandling();
     }
-    
+
     // Add to the video element
     if (this.video) {
       this.video.addEventListener('keydown', handleKeydown);
@@ -7937,25 +7944,25 @@ export class WebPlayer extends BasePlayer {
 
   protected setupWatermark(): void {
     if (!this.watermarkCanvas) return;
-    
+
     // Get watermark configuration
     const watermarkConfig = (this.config as any).watermark;
-    
+
     // Check if watermark is disabled or not configured
     if (!watermarkConfig || watermarkConfig.enabled === false) {
       this.debugLog('Watermark disabled or not configured');
       return;
     }
-    
+
     // If watermark config exists but enabled is not explicitly set, default to disabled
     if (watermarkConfig.enabled !== true) {
       this.debugLog('Watermark not explicitly enabled');
       return;
     }
-    
+
     const ctx = this.watermarkCanvas.getContext('2d');
     if (!ctx) return;
-    
+
     // Default configuration values
     const config = {
       text: watermarkConfig.text || 'PREMIUM',
@@ -7971,31 +7978,31 @@ export class WebPlayer extends BasePlayer {
         gradientColors: watermarkConfig.style?.gradientColors || ['#ff0000', '#ff4d4f']
       }
     };
-    
+
     this.debugLog('Watermark configuration:', config);
-    
+
     const renderWatermark = () => {
       const container = this.watermarkCanvas!.parentElement;
       if (!container) return;
-      
+
       this.watermarkCanvas!.width = container.offsetWidth;
       this.watermarkCanvas!.height = container.offsetHeight;
-      
+
       ctx.clearRect(0, 0, this.watermarkCanvas!.width, this.watermarkCanvas!.height);
-      
+
       // Build watermark text
       let text = config.text;
       if (config.showTime) {
         const timeStr = new Date().toLocaleTimeString();
         text += ` • ${timeStr}`;
       }
-      
+
       // Set up styling
       ctx.save();
       ctx.globalAlpha = config.style.opacity;
       ctx.font = `${config.style.fontSize}px ${config.style.fontFamily}`;
       ctx.textAlign = 'left';
-      
+
       // Set fill style
       if (config.style.color) {
         // Use solid color
@@ -8005,7 +8012,7 @@ export class WebPlayer extends BasePlayer {
         const wrapper = this.playerWrapper as HTMLElement | null;
         let c1 = config.style.gradientColors[0];
         let c2 = config.style.gradientColors[1];
-        
+
         // Try to get theme colors if using defaults
         if (!watermarkConfig.style?.gradientColors) {
           try {
@@ -8016,18 +8023,18 @@ export class WebPlayer extends BasePlayer {
               if (v1) c1 = v1;
               if (v2) c2 = v2;
             }
-          } catch (_) {}
+          } catch (_) { }
         }
-        
+
         const gradient = ctx.createLinearGradient(0, 0, 200, 0);
         gradient.addColorStop(0, c1);
         gradient.addColorStop(1, c2);
         ctx.fillStyle = gradient;
       }
-      
+
       // Calculate position
       let x: number, y: number;
-      
+
       if (config.randomPosition) {
         // Random position (default behavior)
         x = 20 + Math.random() * Math.max(0, this.watermarkCanvas!.width - 200);
@@ -8036,7 +8043,7 @@ export class WebPlayer extends BasePlayer {
         // Fixed or calculated position
         const posX = config.position.x;
         const posY = config.position.y;
-        
+
         // Calculate X position
         if (typeof posX === 'number') {
           x = posX;
@@ -8060,7 +8067,7 @@ export class WebPlayer extends BasePlayer {
               x = 20; // default left
           }
         }
-        
+
         // Calculate Y position
         if (typeof posY === 'number') {
           y = posY;
@@ -8083,18 +8090,18 @@ export class WebPlayer extends BasePlayer {
           }
         }
       }
-      
+
       // Render the watermark
       ctx.fillText(text, x, y);
       ctx.restore();
-      
+
       this.debugLog('Watermark rendered:', { text, x, y });
     };
-    
+
     // Set up interval with configured frequency
     setInterval(renderWatermark, config.updateInterval);
     renderWatermark(); // Render immediately
-    
+
     this.debugLog('Watermark setup complete with update interval:', config.updateInterval + 'ms');
   }
 
@@ -8109,12 +8116,12 @@ export class WebPlayer extends BasePlayer {
           import('./paywall/PaywallController').then((m: any) => {
             this.paywallController = new m.PaywallController(config, {
               getOverlayContainer: () => this.playerWrapper,
-              onResume: (accessInfo?: any) => { 
-                try { 
+              onResume: (accessInfo?: any) => {
+                try {
                   // Reset preview gate after successful auth/payment
                   this.previewGateHit = false;
                   this.paymentSuccessTime = Date.now();
-                  
+
                   // Check if access was granted via email auth
                   if (accessInfo && (accessInfo.accessGranted || accessInfo.paymentSuccessful)) {
                     this.paymentSuccessful = true;
@@ -8123,22 +8130,22 @@ export class WebPlayer extends BasePlayer {
                     this.paymentSuccessful = true;
                     this.debugLog('Payment successful (via setPaywallConfig) - preview gate permanently disabled, resuming playback');
                   }
-                  
-                  this.play(); 
-                } catch(_) {} 
+
+                  this.play();
+                } catch (_) { }
               },
               onShow: () => {
                 // Use safe pause method to avoid race conditions
-                try { this.requestPause(); } catch(_) {}
+                try { this.requestPause(); } catch (_) { }
               },
               onClose: () => {
                 // Resume video if auth was successful
               }
             });
-          }).catch(() => {});
+          }).catch(() => { });
         }
       }
-    } catch (_) {}
+    } catch (_) { }
   }
 
   private togglePlayPause(): void {
@@ -8148,12 +8155,12 @@ export class WebPlayer extends BasePlayer {
       youtubePlayerReady: this.youtubePlayerReady,
       playerState: this.state
     });
-    
+
     // Handle YouTube player
     if (this.youtubePlayer && this.youtubePlayerReady) {
       const playerState = this.youtubePlayer.getPlayerState();
       this.debugLog('YouTube player state:', playerState);
-      
+
       if (playerState === window.YT.PlayerState.PLAYING) {
         this.debugLog('YouTube video is playing, calling pause()');
         this.pause();
@@ -8163,13 +8170,13 @@ export class WebPlayer extends BasePlayer {
       }
       return;
     }
-    
+
     // Handle regular video element
     if (!this.video) {
       this.debugError('No video element or YouTube player available for toggle');
       return;
     }
-    
+
     if (this.video.paused) {
       this.debugLog('Video is paused, calling play()');
       this.play();
@@ -8185,25 +8192,25 @@ export class WebPlayer extends BasePlayer {
       const lim = Number(this.config.freeDuration || 0);
       if (!(lim > 0)) return;
       if (this.previewGateHit && !fromSeek) return;
-      
+
       // Don't trigger gate if payment was successful for this session
       if (this.paymentSuccessful) {
         this.debugLog('Skipping preview gate - payment was successful, access granted permanently for this session');
         return;
       }
-      
+
       // Don't trigger gate if payment was successful recently (within 5 seconds)
       const timeSincePayment = Date.now() - this.paymentSuccessTime;
       if (this.paymentSuccessTime > 0 && timeSincePayment < 5000) {
         this.debugLog('Skipping preview gate - recent payment success:', timeSincePayment + 'ms ago');
         return;
       }
-      
+
       if (current >= lim - 0.01 && !this.previewGateHit) {
         this.previewGateHit = true;
         this.showNotification('Free preview ended.');
         this.emit('onFreePreviewEnded');
-        
+
         // Trigger paywall controller which will handle auth/payment flow
         this.debugLog('Free preview gate hit, paywallController exists:', !!this.paywallController);
         if (this.paywallController) {
@@ -8219,18 +8226,18 @@ export class WebPlayer extends BasePlayer {
             if (this.remotePlayer && this.remotePlayer.isPaused === false) {
               this.remoteController.playOrPause();
             }
-          } catch (_) {}
+          } catch (_) { }
         } else if (this.video) {
-          try { 
+          try {
             // Use deferred pause to avoid race conditions
-            this.requestPause(); 
+            this.requestPause();
             if (fromSeek || ((this.video.currentTime || 0) > lim)) {
               this.safeSetCurrentTime(lim - 0.1);
             }
-          } catch (_) {}
+          } catch (_) { }
         }
       }
-    } catch (_) {}
+    } catch (_) { }
   }
 
   // Public runtime controls for free preview
@@ -8247,7 +8254,7 @@ export class WebPlayer extends BasePlayer {
         const cur = this.video ? (this.video.currentTime || 0) : 0;
         this.enforceFreePreviewGate(cur, true);
       }
-    } catch (_) {}
+    } catch (_) { }
   }
   public resetFreePreviewGate(): void {
     // Only reset if payment hasn't been successful
@@ -8255,7 +8262,7 @@ export class WebPlayer extends BasePlayer {
       this.previewGateHit = false;
     }
   }
-  
+
   public resetPaymentStatus(): void {
     this.paymentSuccessful = false;
     this.paymentSuccessTime = 0;
@@ -8265,7 +8272,7 @@ export class WebPlayer extends BasePlayer {
 
   private toggleMuteAction(): void {
     if (this.isCasting && this.remoteController) {
-      try { this.remoteController.muteOrUnmute(); } catch (_) {}
+      try { this.remoteController.muteOrUnmute(); } catch (_) { }
       return;
     }
     if (this.video?.muted) {
@@ -8284,7 +8291,7 @@ export class WebPlayer extends BasePlayer {
     const isMobileUserAgent = mobileKeywords.some(keyword => userAgent.includes(keyword));
     const isSmallScreen = window.innerWidth <= 768;
     const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-    
+
     return isMobileUserAgent || (isSmallScreen && hasTouchScreen);
   }
 
@@ -8391,21 +8398,21 @@ export class WebPlayer extends BasePlayer {
   private handleVolumeChange(e: MouseEvent): void {
     const slider = document.getElementById('uvf-volume-slider');
     if (!slider) return;
-    
+
     const rect = slider.getBoundingClientRect();
     const x = e.clientX - rect.left;
     const width = rect.width;
     const percent = Math.max(0, Math.min(1, x / width));
-    
+
     if (this.isCasting && this.remoteController && this.remotePlayer) {
       try {
         if (this.remotePlayer.isMuted) {
-          try { this.remoteController.muteOrUnmute(); } catch (_) {}
+          try { this.remoteController.muteOrUnmute(); } catch (_) { }
           this.remotePlayer.isMuted = false;
         }
         this.remotePlayer.volumeLevel = percent;
         this.remoteController.setVolumeLevel();
-      } catch (_) {}
+      } catch (_) { }
       this.updateVolumeUIFromRemote();
     } else if (this.video) {
       this.setVolume(percent);
@@ -8418,25 +8425,25 @@ export class WebPlayer extends BasePlayer {
     const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
     const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
     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');
       return;
     }
-    
+
     const rect = progressBar.getBoundingClientRect();
     const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
     const percent = (x / rect.width) * 100;
     const time = (percent / 100) * duration;
-    
+
     // Validate calculated time
     if (!isFinite(time) || isNaN(time)) {
       this.debugWarn('Calculated seek time is invalid:', time);
       return;
     }
-    
+
     // Update UI immediately for responsive feedback
     if (progressFilled) {
       progressFilled.style.width = percent + '%';
@@ -8450,17 +8457,17 @@ export class WebPlayer extends BasePlayer {
         progressHandle.classList.remove('dragging');
       }
     }
-    
+
     this.seek(time);
   }
 
   private formatTime(seconds: number): string {
     if (!seconds || isNaN(seconds)) return '00:00';
-    
+
     const hours = Math.floor(seconds / 3600);
     const minutes = Math.floor((seconds % 3600) / 60);
     const secs = Math.floor(seconds % 60);
-    
+
     if (hours > 0) {
       return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
     } else {
@@ -8471,10 +8478,10 @@ export class WebPlayer extends BasePlayer {
   private updateTimeDisplay(): void {
     const timeDisplay = document.getElementById('uvf-time-display');
     if (!timeDisplay) return;
-    
+
     let current = 0;
     let duration = 0;
-    
+
     // Get time from YouTube player if available
     if (this.youtubePlayer && this.youtubePlayerReady) {
       try {
@@ -8487,7 +8494,7 @@ export class WebPlayer extends BasePlayer {
       current = this.video.currentTime || 0;
       duration = this.video.duration || 0;
     }
-    
+
     const currentFormatted = this.formatTime(current);
     const durationFormatted = this.formatTime(duration);
     timeDisplay.textContent = `${currentFormatted} / ${durationFormatted}`;
@@ -8505,7 +8512,7 @@ export class WebPlayer extends BasePlayer {
 
   private hideControls(): void {
     if (!this.state.isPlaying) return;
-    
+
     const wrapper = this.container?.querySelector('.uvf-player-wrapper');
     if (wrapper) {
       wrapper.classList.remove('controls-visible');
@@ -8515,7 +8522,7 @@ export class WebPlayer extends BasePlayer {
 
   private scheduleHideControls(): void {
     if (!this.state.isPlaying) return;
-    
+
     if (this.hideControlsTimeout) clearTimeout(this.hideControlsTimeout);
     // Use longer timeout in fullscreen for better UX
     const timeout = this.isFullscreen() ? 4000 : 3000;
@@ -8542,7 +8549,7 @@ export class WebPlayer extends BasePlayer {
     const TAP_MOVEMENT_THRESHOLD = 10; // pixels
     const SKIP_SECONDS = 10;
     const FAST_PLAYBACK_RATE = 2;
-    
+
     // Track if we're currently in a double-tap window
     let inDoubleTapWindow = false;
 
@@ -8663,7 +8670,7 @@ export class WebPlayer extends BasePlayer {
       this.debugLog('Single tap detected - toggling controls');
       const wrapper = this.container?.querySelector('.uvf-player-wrapper');
       const areControlsVisible = wrapper?.classList.contains('controls-visible');
-      
+
       if (areControlsVisible) {
         // Hide controls and top UI elements
         this.hideControls();
@@ -8672,7 +8679,7 @@ export class WebPlayer extends BasePlayer {
         // Show controls and top UI elements
         this.showControls();
         this.debugLog('Single tap: showing controls');
-        
+
         // Schedule auto-hide if video is playing
         if (this.state.isPlaying) {
           this.scheduleHideControls();
@@ -8692,7 +8699,7 @@ export class WebPlayer extends BasePlayer {
 
       const currentTime = this.video.currentTime;
       const duration = this.video.duration;
-      
+
       // Validate current time and duration before calculating new time
       if (!isFinite(currentTime) || isNaN(currentTime) || !isFinite(duration) || isNaN(duration)) {
         this.debugWarn('Invalid video time values, skipping double-tap action');
@@ -8788,19 +8795,19 @@ export class WebPlayer extends BasePlayer {
       this.fastBackwardInterval = null;
     }
   }
-  
+
   private isFullscreen(): boolean {
     return !!(document.fullscreenElement ||
-              (document as any).webkitFullscreenElement ||
-              (document as any).mozFullScreenElement ||
-              (document as any).msFullscreenElement);
+      (document as any).webkitFullscreenElement ||
+      (document as any).mozFullScreenElement ||
+      (document as any).msFullscreenElement);
   }
-  
+
   private setupFullscreenListeners(): void {
     // Handle fullscreen changes from browser/keyboard shortcuts
     const handleFullscreenChange = () => {
       const isFullscreen = this.isFullscreen();
-      
+
       if (this.playerWrapper) {
         if (isFullscreen) {
           this.playerWrapper.classList.add('uvf-fullscreen');
@@ -8808,36 +8815,36 @@ export class WebPlayer extends BasePlayer {
           this.playerWrapper.classList.remove('uvf-fullscreen');
         }
       }
-      
+
       // Show controls when entering/exiting fullscreen
       this.showControls();
       if (isFullscreen && this.state.isPlaying) {
         this.scheduleHideControls();
       }
-      
+
       this.emit('onFullscreenChanged', isFullscreen);
     };
-    
+
     // Listen for fullscreen change events (all browser prefixes)
     document.addEventListener('fullscreenchange', handleFullscreenChange);
     document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
     document.addEventListener('mozfullscreenchange', handleFullscreenChange);
     document.addEventListener('MSFullscreenChange', handleFullscreenChange);
-    
+
     // Enhanced mouse/touch movement detection for control visibility
     let lastMouseMoveTime = 0;
     let mouseInactivityTimeout: any = null;
-    
+
     const handleMouseMovement = () => {
       const now = Date.now();
       lastMouseMoveTime = now;
-      
+
       // Show controls immediately on mouse movement
       this.showControls();
-      
+
       // Clear existing inactivity timeout
       clearTimeout(mouseInactivityTimeout);
-      
+
       // Set new inactivity timeout
       if (this.state.isPlaying) {
         const timeout = this.isFullscreen() ? 4000 : 3000;
@@ -8849,7 +8856,7 @@ export class WebPlayer extends BasePlayer {
         }, timeout);
       }
     };
-    
+
     // Touch movement detection for mobile - only for actual dragging/scrolling
     // Note: Don't handle touchstart here as it conflicts with advanced tap handling
     const handleTouchMovement = () => {
@@ -8859,7 +8866,7 @@ export class WebPlayer extends BasePlayer {
         this.scheduleHideControls();
       }
     };
-    
+
     // Add event listeners to the player wrapper
     if (this.playerWrapper) {
       this.playerWrapper.addEventListener('mousemove', handleMouseMovement, { passive: true });
@@ -8869,9 +8876,9 @@ export class WebPlayer extends BasePlayer {
       this.playerWrapper.addEventListener('touchmove', handleTouchMovement, { passive: true });
     }
   }
-  
 
-  
+
+
   private showShortcutIndicator(text: string): void {
     const el = document.getElementById('uvf-shortcut-indicator');
     this.debugLog('showShortcutIndicator called with:', text, 'element found:', !!el);
@@ -8891,7 +8898,7 @@ export class WebPlayer extends BasePlayer {
         el.innerHTML = `<div class="uvf-ki uvf-ki-icon">${svg}</div>`;
         resetAnim();
       };
-      const setSkip = (dir: 'fwd'|'back', num: number) => {
+      const setSkip = (dir: 'fwd' | 'back', num: number) => {
         el.classList.add('uvf-ki-icon');
         const svg = dir === 'fwd'
           ? `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.01 19c-3.31 0-6-2.69-6-6s2.69-6 6-6V5l5 5-5 5V9c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4h2c0 3.31-2.69 6-6 6z"/></svg>`
@@ -8955,14 +8962,14 @@ export class WebPlayer extends BasePlayer {
       // auto-hide after animation
       clearTimeout(this._kiTo);
       this._kiTo = setTimeout(() => {
-        try { el.classList.remove('active'); } catch (_) {}
+        try { el.classList.remove('active'); } catch (_) { }
       }, 1000);
     } catch (err) {
       try {
         (el as HTMLElement).textContent = String(text || '');
         el.classList.add('active');
         setTimeout(() => el.classList.remove('active'), 1000);
-      } catch(_) {}
+      } catch (_) { }
     }
   }
 
@@ -9070,7 +9077,7 @@ export class WebPlayer extends BasePlayer {
       };
 
       this.coreChapterManager = new CoreChapterManager(coreChapterConfig);
-      
+
       // Initialize the core chapter manager
       this.coreChapterManager.initialize();
 
@@ -9177,7 +9184,7 @@ export class WebPlayer extends BasePlayer {
     if (!this.chapterManager) {
       throw new Error('Chapter manager not initialized. Enable chapters in config first.');
     }
-    
+
     try {
       await this.chapterManager.loadChapters(chapters);
       this.debugLog('Chapters loaded successfully');
@@ -9194,7 +9201,7 @@ export class WebPlayer extends BasePlayer {
     if (!this.chapterManager) {
       throw new Error('Chapter manager not initialized. Enable chapters in config first.');
     }
-    
+
     try {
       await this.chapterManager.loadChaptersFromUrl(url);
       this.debugLog('Chapters loaded from URL successfully');
@@ -9211,7 +9218,7 @@ export class WebPlayer extends BasePlayer {
     if (!this.chapterManager || !this.video) {
       return null;
     }
-    
+
     return this.chapterManager.getCurrentSegment(this.video.currentTime);
   }
 
@@ -9223,7 +9230,7 @@ export class WebPlayer extends BasePlayer {
       this.debugWarn('Cannot skip segment: chapter manager not initialized');
       return;
     }
-    
+
     this.chapterManager.skipToSegment(segmentId);
   }
 
@@ -9234,7 +9241,7 @@ export class WebPlayer extends BasePlayer {
     if (!this.chapterManager) {
       return [];
     }
-    
+
     return this.chapterManager.getSegments();
   }
 
@@ -9243,7 +9250,7 @@ export class WebPlayer extends BasePlayer {
    */
   public updateChapterConfig(newConfig: Partial<ChapterConfig>): void {
     this.chapterConfig = { ...this.chapterConfig, ...newConfig };
-    
+
     if (this.chapterManager) {
       this.chapterManager.updateConfig(this.chapterConfig);
     }
@@ -9370,7 +9377,7 @@ export class WebPlayer extends BasePlayer {
       if (iconColor) wrapper.style.setProperty('--uvf-icon-color', iconColor);
       if (textPrimary) wrapper.style.setProperty('--uvf-text-primary', textPrimary);
       if (textSecondary) wrapper.style.setProperty('--uvf-text-secondary', textSecondary);
-      
+
       // Set overlay colors for gradient backgrounds
       if (overlayStrong) wrapper.style.setProperty('--uvf-overlay-strong', overlayStrong);
       if (overlayMedium) wrapper.style.setProperty('--uvf-overlay-medium', overlayMedium);
@@ -9406,7 +9413,7 @@ export class WebPlayer extends BasePlayer {
           return { r: Math.round(nums[0]), g: Math.round(nums[1]), b: Math.round(nums[2]) };
         }
       }
-    } catch (_) {}
+    } catch (_) { }
     return null;
   }
 
@@ -9431,26 +9438,26 @@ export class WebPlayer extends BasePlayer {
     const a = Math.max(0, Math.min(1, alpha));
     return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a})`;
   }
-  
+
   private changeVolume(delta: number): void {
     if (this.isCasting && this.remoteController && this.remotePlayer) {
       const cur = this.remotePlayer.volumeLevel || 0;
       const next = Math.max(0, Math.min(1, cur + delta));
       try {
         if (this.remotePlayer.isMuted) {
-          try { this.remoteController.muteOrUnmute(); } catch (_) {}
+          try { this.remoteController.muteOrUnmute(); } catch (_) { }
           this.remotePlayer.isMuted = false;
         }
         this.remotePlayer.volumeLevel = next;
         this.remoteController.setVolumeLevel();
-      } catch (_) {}
+      } catch (_) { }
       this.updateVolumeUIFromRemote();
       return;
     }
     if (!this.video) return;
     this.video.volume = Math.max(0, Math.min(1, this.video.volume + delta));
   }
-  
+
   private setSpeed(speed: number): void {
     // Handle YouTube player
     if (this.youtubePlayer && this.youtubePlayerReady) {
@@ -9462,7 +9469,7 @@ export class WebPlayer extends BasePlayer {
     } else if (this.video) {
       this.video.playbackRate = speed;
     }
-    
+
     // Update UI
     document.querySelectorAll('.speed-option').forEach(option => {
       option.classList.remove('active');
@@ -9471,7 +9478,7 @@ export class WebPlayer extends BasePlayer {
       }
     });
   }
-  
+
   private setQualityByLabel(quality: string): void {
     // Handle YouTube player
     if (this.youtubePlayer && this.youtubePlayerReady) {
@@ -9486,9 +9493,9 @@ export class WebPlayer extends BasePlayer {
       });
       return;
     }
-    
+
     const qualityBadge = document.getElementById('uvf-quality-badge');
-    
+
     // Update UI
     document.querySelectorAll('.quality-option').forEach(option => {
       option.classList.remove('active');
@@ -9496,7 +9503,7 @@ export class WebPlayer extends BasePlayer {
         option.classList.add('active');
       }
     });
-    
+
     // Update badge
     if (qualityBadge) {
       if (quality === 'auto') {
@@ -9505,7 +9512,7 @@ export class WebPlayer extends BasePlayer {
         qualityBadge.textContent = quality + 'p';
       }
     }
-    
+
     // If we have actual quality levels from HLS/DASH, apply them
     if (quality !== 'auto' && this.qualities.length > 0) {
       const qualityLevel = this.qualities.find(q => q.label === quality + 'p');
@@ -9517,7 +9524,7 @@ export class WebPlayer extends BasePlayer {
       this.setAutoQuality(true);
     }
   }
-  
+
   private async togglePiP(): Promise<void> {
     try {
       if ((document as any).pictureInPictureElement) {
@@ -9529,14 +9536,14 @@ export class WebPlayer extends BasePlayer {
       console.error('PiP toggle failed:', error);
     }
   }
-  
+
   private setupCastContextSafe(): void {
     try {
       const castNs = (window as any).cast;
       if (castNs && castNs.framework) {
         this.setupCastContext();
       }
-    } catch (_) {}
+    } catch (_) { }
   }
 
   private setupCastContext(): void {
@@ -9549,14 +9556,14 @@ export class WebPlayer extends BasePlayer {
       try {
         const autoJoin = chromeNs?.cast?.AutoJoinPolicy?.ORIGIN_SCOPED;
         if (autoJoin) options.autoJoinPolicy = autoJoin;
-      } catch (_) {}
+      } catch (_) { }
       this.castContext.setOptions(options);
       this.castContext.addEventListener(
         castNs.framework.CastContextEventType.SESSION_STATE_CHANGED,
         (ev: any) => {
           const state = ev.sessionState;
           if (state === castNs.framework.SessionState.SESSION_STARTED ||
-              state === castNs.framework.SessionState.SESSION_RESUMED) {
+            state === castNs.framework.SessionState.SESSION_RESUMED) {
             this.enableCastRemoteControl();
           } else if (state === castNs.framework.SessionState.SESSION_ENDED) {
             this.disableCastRemoteControl();
@@ -9580,7 +9587,7 @@ export class WebPlayer extends BasePlayer {
         this._bindRemotePlayerEvents();
       }
       this.isCasting = true;
-      try { this.video?.pause(); } catch (_) {}
+      try { this.video?.pause(); } catch (_) { }
       this._syncUIFromRemote();
       this._syncCastButtons();
     } catch (err) {
@@ -9703,7 +9710,7 @@ export class WebPlayer extends BasePlayer {
           const sess = castNs?.framework?.CastContext?.getInstance()?.getCurrentSession?.();
           const dev = sess && sess.getCastDevice ? sess.getCastDevice() : null;
           if (dev && dev.friendlyName) title += ` (${dev.friendlyName})`;
-        } catch (_) {}
+        } catch (_) { }
         castBtn.setAttribute('title', title);
         castBtn.setAttribute('aria-label', title);
       } else {
@@ -9742,7 +9749,7 @@ export class WebPlayer extends BasePlayer {
     // Generate accordion-style menu
     this.generateAccordionMenu();
   }
-  
+
   /**
    * Generate accordion-style settings menu
    */
@@ -9786,7 +9793,7 @@ export class WebPlayer extends BasePlayer {
     if (this.settingsConfig.quality && this.availableQualities.length > 0) {
       const currentQuality = this.availableQualities.find(q => q.value === this.currentQuality);
       const currentQualityLabel = currentQuality ? currentQuality.label : 'Auto';
-      
+
       menuHTML += `
         <div class="uvf-accordion-item">
           <div class="uvf-accordion-header" data-section="quality">
@@ -9802,13 +9809,13 @@ export class WebPlayer extends BasePlayer {
             <div class="uvf-accordion-arrow">▼</div>
           </div>
           <div class="uvf-accordion-content" data-section="quality">`;
-      
+
       this.availableQualities.forEach(quality => {
         const isActive = quality.value === this.currentQuality ? 'active' : '';
         const isPremium = this.isQualityPremium(quality);
         const isLocked = isPremium && !this.isPremiumUser();
         const qualityHeight = (quality as any).height || 0;
-        
+
         if (isLocked) {
           const premiumLabel = this.premiumQualities?.premiumLabel || '🔒 Premium';
           menuHTML += `<div class="uvf-settings-option quality-option premium-locked ${isActive}" data-quality="${quality.value}" data-quality-height="${qualityHeight}" data-quality-label="${quality.label}">${quality.label} <span style="margin-left: 4px; opacity: 0.7; font-size: 11px;">${premiumLabel}</span></div>`;
@@ -9816,7 +9823,7 @@ export class WebPlayer extends BasePlayer {
           menuHTML += `<div class="uvf-settings-option quality-option ${isActive}" data-quality="${quality.value}">${quality.label}</div>`;
         }
       });
-      
+
       menuHTML += `</div></div>`;
     }
 
@@ -9824,7 +9831,7 @@ export class WebPlayer extends BasePlayer {
     if (this.settingsConfig.subtitles && this.availableSubtitles.length > 0) {
       const currentSubtitle = this.availableSubtitles.find(s => s.value === this.currentSubtitle);
       const currentSubtitleLabel = currentSubtitle ? currentSubtitle.label : 'Off';
-      
+
       menuHTML += `
         <div class="uvf-accordion-item">
           <div class="uvf-accordion-header" data-section="subtitles">
@@ -9840,18 +9847,18 @@ export class WebPlayer extends BasePlayer {
             <div class="uvf-accordion-arrow">▼</div>
           </div>
           <div class="uvf-accordion-content" data-section="subtitles">`;
-      
+
       this.availableSubtitles.forEach(subtitle => {
         const isActive = subtitle.value === this.currentSubtitle ? 'active' : '';
         menuHTML += `<div class="uvf-settings-option subtitle-option ${isActive}" data-subtitle="${subtitle.value}">${subtitle.label}</div>`;
       });
-      
+
       menuHTML += `</div></div>`;
     }
-    
+
     // Close accordion container
     menuHTML += '</div>';
-    
+
     // If no sections are enabled or available, show a message
     if (menuHTML === '<div class="uvf-settings-accordion"></div>') {
       menuHTML = '<div class="uvf-settings-accordion"><div class="uvf-settings-empty">No settings available</div></div>';
@@ -9859,7 +9866,7 @@ export class WebPlayer extends BasePlayer {
 
     this.debugLog('Generated menu HTML length:', menuHTML.length);
     this.debugLog('Generated menu HTML content:', menuHTML.substring(0, 200) + (menuHTML.length > 200 ? '...' : ''));
-    
+
     settingsMenu.innerHTML = menuHTML;
     this.debugLog('Settings menu HTML set successfully');
 
@@ -9906,7 +9913,7 @@ export class WebPlayer extends BasePlayer {
       // Native video - add common resolutions based on current resolution
       const height = this.video.videoHeight;
       const commonQualities = [2160, 1440, 1080, 720, 480, 360];
-      
+
       commonQualities.forEach(quality => {
         if (quality <= height) {
           detectedQualities.push({
@@ -9917,46 +9924,46 @@ export class WebPlayer extends BasePlayer {
         }
       });
     }
-    
+
     // Apply quality filter if configured
     if (this.qualityFilter) {
       detectedQualities = this.applyQualityFilter(detectedQualities);
     }
-    
+
     // Add filtered qualities to available list
     this.availableQualities.push(...detectedQualities);
   }
-  
+
   /**
    * Apply quality filter to detected qualities
    */
   private applyQualityFilter(qualities: Array<{ value: string; label: string; height?: number }>): Array<{ value: string; label: string; height?: number }> {
     let filtered = [...qualities];
     const filter = this.qualityFilter;
-    
+
     // Filter by allowed heights
     if (filter.allowedHeights && filter.allowedHeights.length > 0) {
       filtered = filtered.filter(q => q.height && filter.allowedHeights.includes(q.height));
     }
-    
+
     // Filter by allowed labels
     if (filter.allowedLabels && filter.allowedLabels.length > 0) {
       filtered = filtered.filter(q => filter.allowedLabels.includes(q.label));
     }
-    
+
     // Filter by minimum height
     if (filter.minHeight !== undefined) {
       filtered = filtered.filter(q => q.height && q.height >= filter.minHeight);
     }
-    
+
     // Filter by maximum height
     if (filter.maxHeight !== undefined) {
       filtered = filtered.filter(q => q.height && q.height <= filter.maxHeight);
     }
-    
+
     return filtered;
   }
-  
+
   /**
    * Set quality filter (can be called at runtime)
    */
@@ -9967,7 +9974,7 @@ export class WebPlayer extends BasePlayer {
       this.updateSettingsMenu();
     }
   }
-  
+
   /**
    * Set ad playing state (called by Google Ads Manager)
    */
@@ -9975,14 +9982,14 @@ export class WebPlayer extends BasePlayer {
     this.isAdPlaying = isPlaying;
     this.debugLog('Ad playing state:', isPlaying);
   }
-  
+
   /**
    * Check if ad is currently playing
    */
   public isAdCurrentlyPlaying(): boolean {
     return this.isAdPlaying;
   }
-  
+
   /**
    * Check if a quality level is premium
    */
@@ -9990,61 +9997,61 @@ export class WebPlayer extends BasePlayer {
     if (!this.premiumQualities || !this.premiumQualities.enabled) {
       return false;
     }
-    
+
     const config = this.premiumQualities;
     const height = quality.height || 0;
     const label = quality.label || '';
-    
+
     // Check by specific heights
     if (config.requiredHeights && config.requiredHeights.length > 0) {
       if (config.requiredHeights.includes(height)) return true;
     }
-    
+
     // Check by specific labels
     if (config.requiredLabels && config.requiredLabels.length > 0) {
       if (config.requiredLabels.includes(label)) return true;
     }
-    
+
     // Check by minimum height threshold
     if (config.minPremiumHeight !== undefined) {
       if (height >= config.minPremiumHeight) return true;
     }
-    
+
     return false;
   }
-  
+
   /**
    * Check if current user is premium
    */
   private isPremiumUser(): boolean {
     return this.premiumQualities?.isPremiumUser === true;
   }
-  
+
   /**
    * Handle click on locked premium quality
    */
   private handlePremiumQualityClick(element: HTMLElement): void {
     const height = parseInt(element.dataset.qualityHeight || '0');
     const label = element.dataset.qualityLabel || '';
-    
+
     this.debugLog(`Premium quality clicked: ${label} (${height}p)`);
-    
+
     // Call custom callback if provided
     if (this.premiumQualities?.onPremiumQualityClick) {
       this.premiumQualities.onPremiumQualityClick({ height, label });
     }
-    
+
     // Show notification
     const message = this.premiumQualities?.premiumLabel || 'Premium';
     this.showNotification(`${label} requires ${message.replace('🔒 ', '')}`);
-    
+
     // Redirect to unlock URL if provided
     if (this.premiumQualities?.unlockUrl) {
       setTimeout(() => {
         window.location.href = this.premiumQualities.unlockUrl;
       }, 1500);
     }
-    
+
     // Close settings menu
     this.hideSettingsMenu();
   }
@@ -10101,10 +10108,10 @@ export class WebPlayer extends BasePlayer {
       header.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
-        
+
         const accordionItem = header.parentElement;
         const section = header.getAttribute('data-section');
-        
+
         if (accordionItem && section) {
           this.toggleAccordionSection(accordionItem, section);
         }
@@ -10127,13 +10134,13 @@ export class WebPlayer extends BasePlayer {
         e.stopPropagation();
         const target = e.target as HTMLElement;
         const quality = target.dataset.quality || 'auto';
-        
+
         // Check if this is a locked premium quality
         if (target.classList.contains('premium-locked')) {
           this.handlePremiumQualityClick(target);
           return;
         }
-        
+
         this.setQualityFromSettings(quality);
         this.updateAccordionAfterSelection('quality');
       });
@@ -10149,19 +10156,19 @@ export class WebPlayer extends BasePlayer {
       });
     });
   }
-  
+
   /**
    * Toggle accordion section
    */
   private toggleAccordionSection(accordionItem: Element, section: string): void {
     const isExpanded = accordionItem.classList.contains('expanded');
-    
+
     // If clicking the same section that's already expanded, just close it
     if (isExpanded) {
       accordionItem.classList.remove('expanded');
       return;
     }
-    
+
     // Otherwise, close all sections and open the clicked one
     const settingsMenu = document.getElementById('uvf-settings-menu');
     if (settingsMenu) {
@@ -10169,30 +10176,30 @@ export class WebPlayer extends BasePlayer {
         item.classList.remove('expanded');
       });
     }
-    
+
     // Open the clicked section
     accordionItem.classList.add('expanded');
   }
-  
+
   /**
    * Hide settings menu with proper styling
    */
   private hideSettingsMenu(): void {
     const settingsMenu = document.getElementById('uvf-settings-menu');
     if (!settingsMenu) return;
-    
+
     settingsMenu.classList.remove('active');
-    
+
     // Apply fallback styles to ensure menu is hidden
     settingsMenu.style.display = 'none';
     settingsMenu.style.visibility = 'hidden';
     settingsMenu.style.opacity = '0';
-    
+
     // Also close any expanded accordions
     settingsMenu.querySelectorAll('.uvf-accordion-item.expanded').forEach(item => {
       item.classList.remove('expanded');
     });
-    
+
     this.debugLog('Settings menu hidden via hideSettingsMenu()');
   }
 
@@ -10207,7 +10214,7 @@ export class WebPlayer extends BasePlayer {
         item.classList.remove('expanded');
       });
     }
-    
+
     // Close settings menu after selection on all devices
     setTimeout(() => {
       this.hideSettingsMenu();
@@ -10246,7 +10253,7 @@ export class WebPlayer extends BasePlayer {
    */
   private setQualityFromSettings(quality: string): void {
     this.currentQuality = quality;
-    
+
     if (quality === 'auto') {
       // Enable auto quality with filter consideration
       if (this.hls) {
@@ -10267,7 +10274,7 @@ export class WebPlayer extends BasePlayer {
     } else {
       // Set specific quality
       const qualityIndex = parseInt(quality);
-      
+
       if (this.hls && !isNaN(qualityIndex) && this.hls.levels[qualityIndex]) {
         this.hls.currentLevel = qualityIndex;
       } else if (this.dash && !isNaN(qualityIndex)) {
@@ -10275,38 +10282,38 @@ export class WebPlayer extends BasePlayer {
         this.dash.setQualityFor('video', qualityIndex);
       }
     }
-    
+
     this.debugLog(`Quality set to ${quality}`);
   }
-  
+
   /**
    * Apply quality filter to HLS auto quality selection
    */
   private applyHLSQualityFilter(): void {
     if (!this.hls || !this.hls.levels) return;
-    
+
     const allowedLevels: number[] = [];
-    
+
     this.hls.levels.forEach((level: any, index: number) => {
       let allowed = true;
-      
+
       // Apply quality filter if exists
       if (this.qualityFilter) {
         const filter = this.qualityFilter;
-        
+
         if (filter.allowedHeights && filter.allowedHeights.length > 0) {
           allowed = allowed && filter.allowedHeights.includes(level.height);
         }
-        
+
         if (filter.minHeight !== undefined) {
           allowed = allowed && level.height >= filter.minHeight;
         }
-        
+
         if (filter.maxHeight !== undefined) {
           allowed = allowed && level.height <= filter.maxHeight;
         }
       }
-      
+
       // Apply premium quality restrictions for non-premium users
       if (this.premiumQualities && this.premiumQualities.enabled && !this.isPremiumUser()) {
         const isPremium = this.isQualityPremium({ height: level.height, label: `${level.height}p` });
@@ -10314,24 +10321,24 @@ export class WebPlayer extends BasePlayer {
           allowed = false;  // Exclude premium qualities for non-premium users
         }
       }
-      
+
       if (allowed) {
         allowedLevels.push(index);
       }
     });
-    
+
     // Set max and min auto level based on filter and premium restrictions
     if (allowedLevels.length > 0) {
       // Set the maximum level cap
       this.hls.autoLevelCapping = Math.max(...allowedLevels);
-      
+
       // Enable auto quality
       this.hls.currentLevel = -1;
-      
+
       // For minimum level, we need to use a different approach
       // Monitor level changes and prevent switching below minimum
       const minLevel = Math.min(...allowedLevels);
-      
+
       // Set up level switching listener to enforce minimum
       const enforceLevelConstraints = () => {
         if (this.hls && this.hls.currentLevel !== -1 && this.hls.currentLevel < minLevel) {
@@ -10339,52 +10346,52 @@ export class WebPlayer extends BasePlayer {
           this.hls.currentLevel = minLevel;
         }
       };
-      
+
       // Remove old listener if exists
       if (this.hls.listeners('hlsLevelSwitching').length > 0) {
         this.hls.off('hlsLevelSwitching', enforceLevelConstraints);
       }
-      
+
       // Add listener to enforce constraints
       this.hls.on('hlsLevelSwitching', enforceLevelConstraints);
-      
+
       this.debugLog(`Auto quality limited to levels: ${allowedLevels.join(', ')} (min: ${minLevel}, max: ${Math.max(...allowedLevels)})`);
     } else {
       // No allowed levels - just use auto
       this.hls.currentLevel = -1;
     }
   }
-  
+
   /**
    * Apply quality filter to DASH auto quality selection
    */
   private applyDASHQualityFilter(): void {
     if (!this.dash) return;
-    
+
     try {
       const videoQualities = this.dash.getBitrateInfoListFor('video');
       const allowedIndices: number[] = [];
-      
+
       videoQualities.forEach((quality: any, index: number) => {
         let allowed = true;
-        
+
         // Apply quality filter if exists
         if (this.qualityFilter) {
           const filter = this.qualityFilter;
-          
+
           if (filter.allowedHeights && filter.allowedHeights.length > 0) {
             allowed = allowed && filter.allowedHeights.includes(quality.height);
           }
-          
+
           if (filter.minHeight !== undefined) {
             allowed = allowed && quality.height >= filter.minHeight;
           }
-          
+
           if (filter.maxHeight !== undefined) {
             allowed = allowed && quality.height <= filter.maxHeight;
           }
         }
-        
+
         // Apply premium quality restrictions for non-premium users
         if (this.premiumQualities && this.premiumQualities.enabled && !this.isPremiumUser()) {
           const isPremium = this.isQualityPremium({ height: quality.height, label: `${quality.height}p` });
@@ -10392,12 +10399,12 @@ export class WebPlayer extends BasePlayer {
             allowed = false;  // Exclude premium qualities for non-premium users
           }
         }
-        
+
         if (allowed) {
           allowedIndices.push(index);
         }
       });
-      
+
       // Set quality bounds for DASH
       if (allowedIndices.length > 0) {
         const settings = {
@@ -10422,7 +10429,7 @@ export class WebPlayer extends BasePlayer {
    */
   private setSubtitle(subtitle: string): void {
     this.currentSubtitle = subtitle;
-    
+
     if (this.youtubePlayer && this.youtubePlayerReady) {
       // YouTube subtitles - limited control
       if (subtitle === 'off') {
@@ -10441,7 +10448,7 @@ export class WebPlayer extends BasePlayer {
       this.showShortcutIndicator('Subtitle language selection not available for YouTube');
       return;
     }
-    
+
     if (subtitle === 'off') {
       // Disable all subtitles
       if (this.video?.textTracks) {
@@ -10467,7 +10474,7 @@ export class WebPlayer extends BasePlayer {
         });
       }
     }
-    
+
     this.debugLog(`Subtitle set to ${subtitle}`);
   }
 
@@ -10485,11 +10492,11 @@ export class WebPlayer extends BasePlayer {
         if (tid) ids = [tid];
       }
       if (typeof media.setActiveTracks === 'function') {
-        media.setActiveTracks(ids, () => {}, () => {});
+        media.setActiveTracks(ids, () => { }, () => { });
       } else if (typeof media.setActiveTrackIds === 'function') {
         media.setActiveTrackIds(ids);
       }
-    } catch (_) {}
+    } catch (_) { }
   }
 
   private onCastButtonClick(): void {
@@ -10498,20 +10505,20 @@ export class WebPlayer extends BasePlayer {
       this.showAirPlayPicker();
       return;
     }
-    
+
     // Google Cast for non-iOS devices
     try {
       const castNs = (window as any).cast;
       if (this.isCasting && castNs && castNs.framework) {
         const ctx = castNs.framework.CastContext.getInstance();
-        ctx.requestSession().catch(() => {});
+        ctx.requestSession().catch(() => { });
         return;
       }
-    } catch (_) {}
+    } catch (_) { }
     // Not casting yet
     this.initCast();
   }
-  
+
   /**
    * Show AirPlay picker for iOS devices
    */
@@ -10520,7 +10527,7 @@ export class WebPlayer extends BasePlayer {
       this.showNotification('Video not ready');
       return;
     }
-    
+
     // Check if AirPlay is supported
     const videoElement = this.video as any;
     if (typeof videoElement.webkitShowPlaybackTargetPicker === 'function') {
@@ -10544,7 +10551,7 @@ export class WebPlayer extends BasePlayer {
       const ctx = castNs.framework.CastContext.getInstance();
       const sess = ctx.getCurrentSession && ctx.getCurrentSession();
       if (sess) {
-        try { sess.endSession(true); } catch (_) {}
+        try { sess.endSession(true); } catch (_) { }
         this.disableCastRemoteControl();
         this.showNotification('Stopped casting');
       } else {
@@ -10583,9 +10590,9 @@ export class WebPlayer extends BasePlayer {
       const url = this.source?.url || this.video?.src || '';
       const u = (url || '').toLowerCase();
       const contentType = u.includes('.m3u8') ? 'application/x-mpegurl'
-                        : u.includes('.mpd')  ? 'application/dash+xml'
-                        : u.includes('.webm') ? 'video/webm'
-                        : 'video/mp4';
+        : u.includes('.mpd') ? 'application/dash+xml'
+          : u.includes('.webm') ? 'video/webm'
+            : 'video/mp4';
 
       const chromeNs = (window as any).chrome;
       const mediaInfo = new chromeNs.cast.media.MediaInfo(url, contentType);
@@ -10594,7 +10601,7 @@ export class WebPlayer extends BasePlayer {
         const md = new chromeNs.cast.media.GenericMediaMetadata();
         md.title = this.source?.metadata?.title || (this.video?.currentSrc ? this.video!.currentSrc.split('/').slice(-1)[0] : 'Web Player');
         mediaInfo.metadata = md;
-      } catch (_) {}
+      } catch (_) { }
 
       // Subtitle tracks -> Cast tracks mapping
       const castTracks: any[] = [];
@@ -10610,7 +10617,7 @@ export class WebPlayer extends BasePlayer {
         let nextId = 1;
         for (let i = 0; i < this.subtitles.length; i++) {
           const t = this.subtitles[i];
-          const key = t.label || t.language || `Track ${i+1}`;
+          const key = t.label || t.language || `Track ${i + 1}`;
           try {
             const track = new chromeNs.cast.media.Track(nextId, chromeNs.cast.media.TrackType.TEXT);
             track.trackContentId = t.url;
@@ -10622,7 +10629,7 @@ export class WebPlayer extends BasePlayer {
             castTracks.push(track);
             this._castTrackIdByKey[key] = nextId;
             nextId++;
-          } catch (_) {}
+          } catch (_) { }
         }
       }
       if (castTracks.length > 0) {
@@ -10635,12 +10642,12 @@ export class WebPlayer extends BasePlayer {
           style.edgeColor = '#000000FF';
           style.fontScale = 1.0;
           mediaInfo.textTrackStyle = style;
-        } catch (_) {}
+        } catch (_) { }
       }
 
       const request = new chromeNs.cast.media.LoadRequest(mediaInfo);
       request.autoplay = true;
-      try { request.currentTime = Math.max(0, Math.floor(this.video?.currentTime || 0)); } catch (_) {}
+      try { request.currentTime = Math.max(0, Math.floor(this.video?.currentTime || 0)); } catch (_) { }
       // Determine selected subtitle key from currentSubtitleIndex
       const currentIdx = this.currentSubtitleIndex;
       this.selectedSubtitleKey = (currentIdx >= 0 && this.subtitles[currentIdx]) ? (this.subtitles[currentIdx].label || this.subtitles[currentIdx].language) : 'off';
@@ -10657,7 +10664,7 @@ export class WebPlayer extends BasePlayer {
       this.showNotification('Cast failed');
     }
   }
-  
+
   private async shareVideo(): Promise<void> {
     // Get share configuration
     const shareConfig = this.config.share;
@@ -10705,7 +10712,7 @@ export class WebPlayer extends BasePlayer {
       this.showNotification('Share failed');
     }
   }
-  
+
   /**
    * Check if text is truncated and needs tooltip
    */
@@ -10727,9 +10734,9 @@ export class WebPlayer extends BasePlayer {
     const tooltip = document.createElement('div');
     tooltip.className = 'uvf-text-tooltip';
     tooltip.textContent = text;
-    
+
     element.appendChild(tooltip);
-    
+
     // Show tooltip with delay
     setTimeout(() => {
       tooltip.classList.add('show');
@@ -10765,11 +10772,11 @@ export class WebPlayer extends BasePlayer {
           this.showTextTooltip(titleElement, titleText);
         }
       });
-      
+
       titleElement.addEventListener('mouseleave', () => {
         this.hideTextTooltip(titleElement);
       });
-      
+
       // Touch support for mobile
       titleElement.addEventListener('touchstart', () => {
         const titleText = (this.source?.metadata?.title || '').toString().trim();
@@ -10790,11 +10797,11 @@ export class WebPlayer extends BasePlayer {
           this.showTextTooltip(descElement, descText);
         }
       });
-      
+
       descElement.addEventListener('mouseleave', () => {
         this.hideTextTooltip(descElement);
       });
-      
+
       // Touch support for mobile
       descElement.addEventListener('touchstart', () => {
         const descText = (this.source?.metadata?.description || '').toString().trim();
@@ -10817,7 +10824,7 @@ export class WebPlayer extends BasePlayer {
     if (words.length <= maxWords) {
       return { truncated: text, needsTooltip: false };
     }
-    
+
     const truncated = words.slice(0, maxWords).join(' ') + '...';
     return { truncated, needsTooltip: true };
   }
@@ -10828,10 +10835,10 @@ export class WebPlayer extends BasePlayer {
   private applySmartTextDisplay(titleEl: HTMLElement | null, descEl: HTMLElement | null, titleText: string, descText: string): void {
     const isDesktop = window.innerWidth >= 1024;
     const isMobile = window.innerWidth < 768;
-    
+
     if (titleEl && titleText) {
       const wordCount = titleText.split(' ').length;
-      
+
       if (isDesktop && wordCount > 8 && wordCount <= 15) {
         // Use multiline for moderately long titles on desktop
         titleEl.classList.add('multiline');
@@ -10847,10 +10854,10 @@ export class WebPlayer extends BasePlayer {
         titleEl.classList.remove('multiline');
       }
     }
-    
+
     if (descEl && descText) {
       const wordCount = descText.split(' ').length;
-      
+
       if (isDesktop && wordCount > 15 && wordCount <= 25) {
         // Use multiline for moderately long descriptions on desktop
         descEl.classList.add('multiline');
@@ -10906,7 +10913,7 @@ export class WebPlayer extends BasePlayer {
       setTimeout(() => {
         this.setupTextTooltips();
       }, 100); // Small delay to ensure elements are rendered
-      
+
     } catch (_) { /* ignore */ }
   }
 
@@ -10921,26 +10928,26 @@ export class WebPlayer extends BasePlayer {
   private canPlayVideo(): boolean {
     const freeDuration = Number(this.config.freeDuration || 0);
     const currentTime = this.video?.currentTime || 0;
-    
+
     // Always allow if no free duration limit is set
     if (freeDuration <= 0) return true;
-    
+
     // Allow if payment was successful
     if (this.paymentSuccessful) return true;
-    
+
     // Allow if within free preview duration
     if (currentTime < freeDuration) return true;
-    
+
     // Check if paywall controller indicates user is authenticated
-    if (this.paywallController && 
-        typeof this.paywallController.isAuthenticated === 'function') {
+    if (this.paywallController &&
+      typeof this.paywallController.isAuthenticated === 'function') {
       const isAuth = this.paywallController.isAuthenticated();
       if (isAuth) {
         this.paymentSuccessful = true;
         return true;
       }
     }
-    
+
     return false;
   }
 
@@ -10949,17 +10956,17 @@ export class WebPlayer extends BasePlayer {
    */
   private enforcePaywallSecurity(): void {
     this.debugLog('Enforcing paywall security');
-    
+
     // Pause video immediately
     try {
       if (this.video && !this.video.paused) {
         this.video.pause();
       }
-    } catch (_) {}
-    
+    } catch (_) { }
+
     // Activate paywall state
     this.isPaywallActive = true;
-    
+
     // Show paywall overlay
     if (this.paywallController) {
       try {
@@ -10968,7 +10975,7 @@ export class WebPlayer extends BasePlayer {
         this.debugError('Error showing paywall overlay:', error);
       }
     }
-    
+
     // Start monitoring for overlay tampering
     this.startOverlayMonitoring();
   }
@@ -10978,15 +10985,15 @@ export class WebPlayer extends BasePlayer {
    */
   private startOverlayMonitoring(): void {
     if (!this.playerWrapper || this.paymentSuccessful) return;
-    
+
     // Clear existing monitor
     if (this.authValidationInterval) {
       clearInterval(this.authValidationInterval);
       this.authValidationInterval = null;
     }
-    
+
     this.debugLog('Starting overlay monitoring - payment successful:', this.paymentSuccessful, 'paywall active:', this.isPaywallActive);
-    
+
     // Monitor every 1000ms (less aggressive than before)
     this.authValidationInterval = setInterval(() => {
       // First check: stop monitoring if payment successful or paywall inactive
@@ -10998,7 +11005,7 @@ export class WebPlayer extends BasePlayer {
         }
         return;
       }
-      
+
       // Double-check payment success before enforcing security
       if (this.paymentSuccessful) {
         this.debugLog('Payment successful detected during monitoring, stopping');
@@ -11008,20 +11015,20 @@ export class WebPlayer extends BasePlayer {
         }
         return;
       }
-      
+
       // Check for overlay presence
       const paywallOverlays = this.playerWrapper!.querySelectorAll('.uvf-paywall-overlay, .uvf-auth-overlay');
       const visibleOverlays = Array.from(paywallOverlays).filter(overlay => {
         const element = overlay as HTMLElement;
-        return element.style.display !== 'none' && 
-               element.offsetParent !== null && 
-               window.getComputedStyle(element).visibility !== 'hidden';
+        return element.style.display !== 'none' &&
+          element.offsetParent !== null &&
+          window.getComputedStyle(element).visibility !== 'hidden';
       });
-      
+
       if (visibleOverlays.length === 0) {
         this.overlayRemovalAttempts++;
         this.debugWarn(`Overlay removal attempt detected (${this.overlayRemovalAttempts}/${this.maxOverlayRemovalAttempts})`);
-        
+
         // Final check before taking action - ensure payment wasn't just completed
         if (this.paymentSuccessful) {
           this.debugLog('Payment successful detected, ignoring overlay removal');
@@ -11031,7 +11038,7 @@ export class WebPlayer extends BasePlayer {
           }
           return;
         }
-        
+
         if (this.overlayRemovalAttempts >= this.maxOverlayRemovalAttempts) {
           this.handleSecurityViolation();
         } else {
@@ -11039,7 +11046,7 @@ export class WebPlayer extends BasePlayer {
           this.enforcePaywallSecurity();
         }
       }
-      
+
       // Additional check: ensure video is paused if not authenticated
       if (this.video && !this.video.paused && !this.paymentSuccessful) {
         this.debugWarn('Unauthorized playback detected, pausing video');
@@ -11049,7 +11056,7 @@ export class WebPlayer extends BasePlayer {
           if (freeDuration > 0 && isFinite(freeDuration)) {
             this.safeSetCurrentTime(freeDuration - 1);
           }
-        } catch (_) {}
+        } catch (_) { }
       }
     }, 1000);
   }
@@ -11059,7 +11066,7 @@ export class WebPlayer extends BasePlayer {
    */
   private handleSecurityViolation(): void {
     this.debugError('Security violation detected - disabling video');
-    
+
     // Disable video completely
     if (this.video) {
       this.video.pause();
@@ -11067,10 +11074,10 @@ export class WebPlayer extends BasePlayer {
       this.video.src = ''; // Clear video source
       this.video.style.display = 'none';
     }
-    
+
     // Show security violation message
     this.showSecurityViolationMessage();
-    
+
     // Clear monitoring interval
     if (this.authValidationInterval) {
       clearInterval(this.authValidationInterval);
@@ -11082,10 +11089,10 @@ export class WebPlayer extends BasePlayer {
    */
   private showSecurityViolationMessage(): void {
     if (!this.playerWrapper) return;
-    
+
     // Clear existing content
     this.playerWrapper.innerHTML = '';
-    
+
     // Create security violation overlay
     const securityOverlay = document.createElement('div');
     securityOverlay.style.cssText = `
@@ -11101,7 +11108,7 @@ export class WebPlayer extends BasePlayer {
       text-align: center;
       padding: 40px;
     `;
-    
+
     const messageContainer = document.createElement('div');
     messageContainer.innerHTML = `
       <div style="font-size: 24px; font-weight: bold; margin-bottom: 16px; color: #ff6b6b;">
@@ -11124,7 +11131,7 @@ export class WebPlayer extends BasePlayer {
         ">Reload Page</button>
       </div>
     `;
-    
+
     securityOverlay.appendChild(messageContainer);
     this.playerWrapper.appendChild(securityOverlay);
   }
@@ -11134,25 +11141,25 @@ export class WebPlayer extends BasePlayer {
    */
   private forceCleanupOverlays(): void {
     this.debugLog('Force cleanup of overlays called');
-    
+
     if (!this.playerWrapper) return;
-    
+
     // Find and remove all overlay elements
     const overlays = this.playerWrapper.querySelectorAll('.uvf-paywall-overlay, .uvf-auth-overlay');
     overlays.forEach((overlay: Element) => {
       const htmlOverlay = overlay as HTMLElement;
       this.debugLog('Removing overlay:', htmlOverlay.className);
-      
+
       // Hide immediately
       htmlOverlay.style.display = 'none';
       htmlOverlay.classList.remove('active');
-      
+
       // Remove from DOM
       if (htmlOverlay.parentNode) {
         htmlOverlay.parentNode.removeChild(htmlOverlay);
       }
     });
-    
+
     // Also tell paywall controller to clean up
     if (this.paywallController && typeof this.paywallController.destroyOverlays === 'function') {
       this.debugLog('Calling paywallController.destroyOverlays()');