unified-video-framework 1.4.155 → 1.4.157

package/packages/web/src/WebPlayer.ts

@@ -96,7 +96,23 @@ export class WebPlayer extends BasePlayer {
   
   // Progress bar tooltip state
   private showTimeTooltip: boolean = false;
-  
+
+  // Autoplay enhancement state
+  private autoplayCapabilities: {
+    canAutoplay: boolean;
+    canAutoplayMuted: boolean;
+    canAutoplayUnmuted: boolean;
+    lastCheck: number;
+  } = {
+    canAutoplay: false,
+    canAutoplayMuted: false,
+    canAutoplayUnmuted: false,
+    lastCheck: 0
+  };
+  private autoplayRetryPending: boolean = false;
+  private autoplayRetryAttempts: number = 0;
+  private maxAutoplayRetries: number = 3;
+
   // Chapter management
   private chapterManager: ChapterManager | null = null;
   private coreChapterManager: CoreChapterManager | null = null;
@@ -197,8 +213,9 @@ export class WebPlayer extends BasePlayer {
     this.video = document.createElement('video');
     this.video.className = 'uvf-video';
     this.video.controls = false; // We'll use custom controls
-    // For autoplay to work, video must be muted in most browsers
-    this.video.autoplay = this.config.autoPlay ?? false;
+    // Don't set autoplay attribute - we'll handle it programmatically with intelligent detection
+    this.video.autoplay = false;
+    // Start muted if autoplay is enabled (browser policy), but we'll try unmuted if supported
     this.video.muted = this.config.autoPlay ? true : (this.config.muted ?? false);
     this.video.loop = this.config.loop ?? false;
     this.video.playsInline = this.config.playsInline ?? true;
@@ -344,6 +361,9 @@ export class WebPlayer extends BasePlayer {
       this.state.isPlaying = true;
       this.state.isPaused = false;
       this.emit('onPlay');
+
+      // Hide play overlay when playback starts
+      this.hidePlayOverlay();
     });
 
     this.video.addEventListener('playing', () => {
@@ -352,6 +372,12 @@ export class WebPlayer extends BasePlayer {
         this._deferredPause = false;
         try { this.video?.pause(); } catch (_) {}
       }
+
+      // Also hide overlay on playing event (more reliable)
+      this.hidePlayOverlay();
+
+      // Stop buffering state
+      this.setBuffering(false);
     });
 
     this.video.addEventListener('pause', () => {
@@ -573,14 +599,20 @@ export class WebPlayer extends BasePlayer {
 
         // Start playback if autoPlay is enabled
         if (this.config.autoPlay) {
-          // Attempt autoplay, but handle gracefully if blocked
-          this.play().catch(error => {
-            if (this.isAutoplayRestrictionError(error)) {
-              this.debugWarn('HLS autoplay blocked, showing play overlay');
+          // Use intelligent autoplay with capability detection
+          this.attemptIntelligentAutoplay().then(success => {
+            if (!success) {
+              this.debugWarn('❌ Intelligent autoplay failed, showing play overlay');
               this.showPlayOverlay();
+              // Set up retry on user interaction
+              this.setupAutoplayRetry();
             } else {
-              this.debugError('HLS autoplay failed:', error);
+              this.debugLog('✅ Intelligent autoplay succeeded');
             }
+          }).catch(error => {
+            this.debugError('HLS autoplay failed:', error);
+            this.showPlayOverlay();
+            this.setupAutoplayRetry();
           });
         }
       });
@@ -746,10 +778,10 @@ export class WebPlayer extends BasePlayer {
 
   private isAutoplayRestrictionError(err: any): boolean {
     if (!err) return false;
-    
+
     const message = (err.message || '').toLowerCase();
     const name = (err.name || '').toLowerCase();
-    
+
     // Common autoplay restriction error patterns
     return (
       name === 'notallowederror' ||
@@ -762,121 +794,295 @@ export class WebPlayer extends BasePlayer {
     );
   }
 
+  /**
+   * Detect browser autoplay capabilities
+   * Tests both muted and unmuted autoplay support
+   */
+  private async detectAutoplayCapabilities(): Promise<void> {
+    // Cache for 5 minutes to avoid repeated checks
+    const now = Date.now();
+    if (this.autoplayCapabilities.lastCheck && (now - this.autoplayCapabilities.lastCheck) < 300000) {
+      return;
+    }
+
+    try {
+      // Create a temporary video element for testing
+      const testVideo = document.createElement('video');
+      testVideo.muted = true;
+      testVideo.playsInline = true;
+      testVideo.style.position = 'absolute';
+      testVideo.style.opacity = '0';
+      testVideo.style.pointerEvents = 'none';
+      testVideo.style.width = '1px';
+      testVideo.style.height = '1px';
+
+      // Use a minimal data URL video
+      testVideo.src = 'data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMQAAAAhmcmVlAAAA70D=';
+
+      document.body.appendChild(testVideo);
+
+      try {
+        // Test muted autoplay
+        await testVideo.play();
+        this.autoplayCapabilities.canAutoplayMuted = true;
+        this.autoplayCapabilities.canAutoplay = true;
+        this.debugLog('✅ Muted autoplay is supported');
+
+        // Test unmuted autoplay
+        testVideo.pause();
+        testVideo.currentTime = 0;
+        testVideo.muted = false;
+        testVideo.volume = 0.5;
+
+        try {
+          await testVideo.play();
+          this.autoplayCapabilities.canAutoplayUnmuted = true;
+          this.debugLog('✅ Unmuted autoplay is supported');
+        } catch (unmutedError) {
+          this.autoplayCapabilities.canAutoplayUnmuted = false;
+          this.debugLog('⚠️ Unmuted autoplay is blocked');
+        }
+
+        testVideo.pause();
+      } catch (error) {
+        this.autoplayCapabilities.canAutoplay = false;
+        this.autoplayCapabilities.canAutoplayMuted = false;
+        this.autoplayCapabilities.canAutoplayUnmuted = false;
+        this.debugLog('❌ All autoplay is blocked');
+      } finally {
+        document.body.removeChild(testVideo);
+      }
+
+      this.autoplayCapabilities.lastCheck = now;
+    } catch (error) {
+      this.debugError('Failed to detect autoplay capabilities:', error);
+      // Assume muted autoplay works as fallback
+      this.autoplayCapabilities.canAutoplayMuted = true;
+      this.autoplayCapabilities.canAutoplay = true;
+    }
+  }
+
+  /**
+   * Attempt intelligent autoplay based on detected capabilities
+   */
+  private async attemptIntelligentAutoplay(): Promise<boolean> {
+    if (!this.config.autoPlay || !this.video) return false;
+
+    // Detect capabilities first
+    await this.detectAutoplayCapabilities();
+
+    // Try unmuted autoplay if supported and not explicitly muted
+    if (this.autoplayCapabilities.canAutoplayUnmuted && !this.config.muted) {
+      this.video.muted = false;
+      this.video.volume = this.config.volume ?? 1.0;
+      this.debugLog('🔊 Attempting unmuted autoplay');
+
+      try {
+        await this.play();
+        this.debugLog('✅ Unmuted autoplay successful');
+        return true;
+      } catch (error) {
+        this.debugLog('⚠️ Unmuted autoplay failed, trying muted');
+      }
+    }
+
+    // Fall back to muted autoplay
+    if (this.autoplayCapabilities.canAutoplayMuted) {
+      this.video.muted = true;
+      this.debugLog('🔇 Attempting muted autoplay');
+
+      try {
+        await this.play();
+        this.debugLog('✅ Muted autoplay successful');
+        return true;
+      } catch (error) {
+        this.debugLog('❌ Muted autoplay failed');
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Set up intelligent autoplay retry on user interaction
+   */
+  private setupAutoplayRetry(): void {
+    if (!this.config.autoPlay || this.autoplayRetryAttempts >= this.maxAutoplayRetries) {
+      return;
+    }
+
+    const interactionEvents = ['click', 'mousedown', 'keydown', 'touchstart'];
+
+    const retryAutoplay = async () => {
+      if (this.autoplayRetryPending || this.state.isPlaying) {
+        return;
+      }
+
+      this.autoplayRetryPending = true;
+      this.autoplayRetryAttempts++;
+      this.debugLog(`🔄 Attempting autoplay retry #${this.autoplayRetryAttempts}`);
+
+      try {
+        const success = await this.attemptIntelligentAutoplay();
+        if (success) {
+          this.debugLog('✅ Autoplay retry successful');
+          this.autoplayRetryPending = false;
+          // Remove event listeners after success
+          interactionEvents.forEach(eventType => {
+            document.removeEventListener(eventType, retryAutoplay);
+          });
+        } else {
+          this.autoplayRetryPending = false;
+        }
+      } catch (error) {
+        this.autoplayRetryPending = false;
+        this.debugError('Autoplay retry failed:', error);
+      }
+    };
+
+    interactionEvents.forEach(eventType => {
+      document.addEventListener(eventType, retryAutoplay, { once: true, passive: true });
+    });
+
+    this.debugLog('🎯 Autoplay retry armed - waiting for user interaction');
+  }
+
   private showPlayOverlay(): void {
     // Remove existing overlay
     this.hidePlayOverlay();
-    
+
+    this.debugLog('📺 Showing play overlay due to autoplay restriction');
+
     const overlay = document.createElement('div');
     overlay.id = 'uvf-play-overlay';
     overlay.className = 'uvf-play-overlay';
-    
+
     const playButton = document.createElement('button');
     playButton.className = 'uvf-play-button';
+    playButton.setAttribute('aria-label', 'Play video');
     playButton.innerHTML = `
       <svg viewBox="0 0 24 24" fill="currentColor">
         <path d="M8 5v14l11-7z"/>
       </svg>
     `;
-    
+
     const message = document.createElement('div');
     message.className = 'uvf-play-message';
     message.textContent = 'Click to play';
-    
+
     overlay.appendChild(playButton);
     overlay.appendChild(message);
-    
-    // Add click handler
-    playButton.addEventListener('click', async (e) => {
+
+    // Enhanced click handler with better error handling
+    const handlePlayClick = async (e: Event) => {
+      e.preventDefault();
       e.stopPropagation();
       this.lastUserInteraction = Date.now();
-      
+      this.debugLog('▶️ User clicked play overlay');
+
       try {
+        // Ensure video is ready
+        if (!this.video) {
+          this.debugError('Video element not available');
+          return;
+        }
+
+        // Try to play
         await this.play();
+        this.debugLog('✅ Play successful after user click');
       } catch (error) {
-        this.debugError('Failed to play after user interaction:', error);
+        this.debugError('❌ Failed to play after user interaction:', error);
+        // Show error message on overlay
+        message.textContent = 'Unable to play. Please try again.';
+        message.style.color = '#ff6b6b';
       }
-    });
-    
+    };
+
+    // Add click handler to button
+    playButton.addEventListener('click', handlePlayClick);
+
     // Also allow clicking anywhere on overlay
     overlay.addEventListener('click', async (e) => {
       if (e.target === overlay) {
-        e.stopPropagation();
-        this.lastUserInteraction = Date.now();
-        
-        try {
-          await this.play();
-        } catch (error) {
-          this.debugError('Failed to play after user interaction:', error);
-        }
+        await handlePlayClick(e);
       }
     });
-    
-    // Add styles
+
+    // Add enhanced styles with better visibility
     const style = document.createElement('style');
     style.textContent = `
       .uvf-play-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.7);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        z-index: 1000;
-        cursor: pointer;
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        background: rgba(0, 0, 0, 0.85) !important;
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: center !important;
+        align-items: center !important;
+        z-index: 999999 !important;
+        cursor: pointer !important;
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
       }
-      
+
       .uvf-play-button {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 0.9);
-        border: none;
-        color: #000;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.3s ease;
-        margin-bottom: 16px;
+        width: 96px !important;
+        height: 96px !important;
+        border-radius: 50% !important;
+        background: rgba(255, 255, 255, 0.95) !important;
+        border: 3px solid rgba(255, 255, 255, 0.3) !important;
+        color: #000 !important;
+        cursor: pointer !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        transition: all 0.3s ease !important;
+        margin-bottom: 20px !important;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
       }
-      
+
       .uvf-play-button:hover {
-        background: #fff;
-        transform: scale(1.1);
+        background: #fff !important;
+        transform: scale(1.15) !important;
+        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4) !important;
       }
-      
+
       .uvf-play-button svg {
-        width: 32px;
-        height: 32px;
-        margin-left: 4px;
+        width: 40px !important;
+        height: 40px !important;
+        margin-left: 4px !important;
       }
-      
+
       .uvf-play-message {
-        color: white;
-        font-size: 16px;
-        font-weight: 500;
-        text-align: center;
-        opacity: 0.9;
+        color: white !important;
+        font-size: 18px !important;
+        font-weight: 600 !important;
+        text-align: center !important;
+        opacity: 0.95 !important;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
       }
     `;
-    
+
     // Add to page if not already added
     if (!document.getElementById('uvf-play-overlay-styles')) {
       style.id = 'uvf-play-overlay-styles';
       document.head.appendChild(style);
     }
-    
+
     // Add to player
     if (this.playerWrapper) {
       this.playerWrapper.appendChild(overlay);
+      this.debugLog('✅ Play overlay added to player wrapper');
+    } else {
+      this.debugError('❌ Cannot show play overlay - playerWrapper not found');
     }
   }
 
   private hidePlayOverlay(): void {
+    this.debugLog('🔇 Hiding play overlay');
     const overlay = document.getElementById('uvf-play-overlay');
     if (overlay) {
       overlay.remove();

package/packages/web/src/chapters/ChapterManager.ts

@@ -130,6 +130,9 @@ export class ChapterManager {
     const nextSegment = this.getNextContentSegment(currentSegment);
     const targetTime = nextSegment ? nextSegment.startTime : currentSegment.endTime;
 
+    // Store current playback state
+    const wasPlaying = !this.videoElement.paused;
+
     // Emit skip event
     this.emit('segmentSkipped', {
       fromSegment: currentSegment,
@@ -140,6 +143,19 @@ export class ChapterManager {
 
     // Seek to target time
     this.videoElement.currentTime = targetTime;
+
+    // Resume playback if video was playing before skip (better UX)
+    const shouldResumePlayback = this.config.userPreferences?.resumePlaybackAfterSkip !== false;
+    if (shouldResumePlayback && wasPlaying && this.videoElement.paused) {
+      // Use a small delay to ensure seeking is complete
+      setTimeout(() => {
+        if (!this.videoElement.paused) return; // Don't play if already playing
+        this.videoElement.play().catch(() => {
+          // Handle autoplay restrictions gracefully
+          console.warn('[ChapterManager] Could not resume playback after skip - user interaction may be required');
+        });
+      }, 50);
+    }
   }
 
   /**
@@ -153,6 +169,9 @@ export class ChapterManager {
 
     const fromSegment = this.currentSegment;
     
+    // Store current playback state
+    const wasPlaying = !this.videoElement.paused;
+    
     // Emit skip event
     if (fromSegment) {
       this.emit('segmentSkipped', {
@@ -165,6 +184,19 @@ export class ChapterManager {
 
     // Seek to segment start
     this.videoElement.currentTime = segment.startTime;
+
+    // Resume playback if video was playing before skip (better UX)
+    const shouldResumePlayback = this.config.userPreferences?.resumePlaybackAfterSkip !== false;
+    if (shouldResumePlayback && wasPlaying && this.videoElement.paused) {
+      // Use a small delay to ensure seeking is complete
+      setTimeout(() => {
+        if (!this.videoElement.paused) return; // Don't play if already playing
+        this.videoElement.play().catch(() => {
+          // Handle autoplay restrictions gracefully
+          console.warn('[ChapterManager] Could not resume playback after skip - user interaction may be required');
+        });
+      }, 50);
+    }
   }
 
   /**

package/packages/web/src/chapters/types/ChapterTypes.ts

@@ -119,6 +119,9 @@ export interface ChapterPreferences {
   
   /** Remember user choices */
   rememberChoices?: boolean;
+  
+  /** Resume playback after skip (default: true for better UX) */
+  resumePlaybackAfterSkip?: boolean;
 }
 
 /**
@@ -209,7 +212,8 @@ export const DEFAULT_CHAPTER_CONFIG: ChapterConfig = {
     autoSkipCredits: false,
     showSkipButtons: true,
     skipButtonTimeout: 5000,
-    rememberChoices: true
+    rememberChoices: true,
+    resumePlaybackAfterSkip: true
   }
 };
 

package/packages/web/src/react/WebPlayerView.tsx

@@ -161,6 +161,71 @@ export type WebPlayerViewProps = {
   onEPGCatchup?: (program: EPGProgram, channel: EPGProgramRow) => void | Promise<void>;
   onEPGProgramSelect?: (program: EPGProgram, channel: EPGProgramRow) => void;
   onEPGChannelSelect?: (channel: EPGProgramRow) => void;
+  
+  // Chapter & Skip Configuration
+  chapters?: {
+    enabled?: boolean;                    // Enable/disable chapters (default: false)
+    data?: {                             // Chapter data
+      videoId: string;
+      duration: number;
+      segments: Array<{
+        id: string;
+        type: 'intro' | 'recap' | 'content' | 'credits' | 'ad' | 'sponsor' | 'offensive';
+        startTime: number;
+        endTime: number;
+        title: string;
+        skipLabel?: string;               // Custom skip button text
+        description?: string;
+        thumbnail?: string;
+        autoSkip?: boolean;               // Enable auto-skip for this segment
+        autoSkipDelay?: number;           // Countdown delay in seconds
+        metadata?: Record<string, any>;
+      }>;
+    };
+    dataUrl?: string;                    // URL to fetch chapters from API
+    autoHide?: boolean;                  // Auto-hide skip button after showing (default: true)  
+    autoHideDelay?: number;             // Hide delay in milliseconds (default: 5000)
+    showChapterMarkers?: boolean;        // Show progress bar markers (default: true)
+    skipButtonPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'; // Default: 'bottom-right'
+    customStyles?: {                     // Custom styling for skip elements
+      skipButton?: {
+        backgroundColor?: string;
+        borderColor?: string;
+        textColor?: string;
+        fontSize?: string;
+        borderRadius?: string;
+        padding?: string;
+        fontWeight?: string;
+      };
+      progressMarkers?: {
+        intro?: string;                  // Color for intro markers
+        recap?: string;                  // Color for recap markers  
+        credits?: string;                // Color for credits markers
+        ad?: string;                     // Color for ad markers
+      };
+    };
+    userPreferences?: {                  // User skip preferences
+      autoSkipIntro?: boolean;          // Auto-skip intro segments (default: false)
+      autoSkipRecap?: boolean;          // Auto-skip recap segments (default: false)  
+      autoSkipCredits?: boolean;        // Auto-skip credits segments (default: false)
+      showSkipButtons?: boolean;        // Show skip buttons (default: true)
+      skipButtonTimeout?: number;       // Button timeout in milliseconds (default: 5000)
+      rememberChoices?: boolean;        // Remember user preferences (default: true)
+      resumePlaybackAfterSkip?: boolean; // Resume playback after skipping (default: true)
+    };
+  };
+
+  // Chapter Event Callbacks
+  onChapterChange?: (chapter: any) => void;                                    // Core chapter changed
+  onSegmentEntered?: (segment: any) => void;                                  // Segment entered  
+  onSegmentExited?: (segment: any) => void;                                   // Segment exited
+  onSegmentSkipped?: (segment: any) => void;                                  // Segment skipped
+  onChapterSegmentEntered?: (data: { segment: any; timestamp: number }) => void;  // Web-specific segment entered
+  onChapterSegmentSkipped?: (data: { fromSegment: any; toSegment?: any; timestamp: number }) => void; // Web-specific segment skipped
+  onChapterSkipButtonShown?: (data: { segment: any; position: string }) => void;   // Skip button shown
+  onChapterSkipButtonHidden?: (data: { segment: any; reason: string }) => void;    // Skip button hidden  
+  onChaptersLoaded?: (data: { segmentCount: number; chapters: any[] }) => void;    // Chapters loaded
+  onChaptersLoadError?: (data: { error: Error; url?: string }) => void;            // Chapters load error
 };
 
 export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
@@ -487,7 +552,27 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
         customControls: props.customControls,
         settings: props.settings,
         showFrameworkBranding: props.showFrameworkBranding,
-        watermark: watermarkConfig
+        watermark: watermarkConfig,
+        // Chapter configuration
+        chapters: props.chapters ? {
+          enabled: props.chapters.enabled ?? false,
+          data: props.chapters.data,
+          dataUrl: props.chapters.dataUrl,
+          autoHide: props.chapters.autoHide ?? true,
+          autoHideDelay: props.chapters.autoHideDelay ?? 5000,
+          showChapterMarkers: props.chapters.showChapterMarkers ?? true,
+          skipButtonPosition: props.chapters.skipButtonPosition ?? 'bottom-right',
+          customStyles: props.chapters.customStyles,
+          userPreferences: {
+            autoSkipIntro: props.chapters.userPreferences?.autoSkipIntro ?? false,
+            autoSkipRecap: props.chapters.userPreferences?.autoSkipRecap ?? false,
+            autoSkipCredits: props.chapters.userPreferences?.autoSkipCredits ?? false,
+            showSkipButtons: props.chapters.userPreferences?.showSkipButtons ?? true,
+            skipButtonTimeout: props.chapters.userPreferences?.skipButtonTimeout ?? 5000,
+            rememberChoices: props.chapters.userPreferences?.rememberChoices ?? true,
+            resumePlaybackAfterSkip: props.chapters.userPreferences?.resumePlaybackAfterSkip ?? true,
+          }
+        } : { enabled: false }
       };
 
       try {
@@ -523,6 +608,38 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
             });
           }
           
+          // Chapter event listeners
+          if (props.onChapterChange && typeof (player as any).on === 'function') {
+            (player as any).on('chapterchange', props.onChapterChange);
+          }
+          if (props.onSegmentEntered && typeof (player as any).on === 'function') {
+            (player as any).on('segmententered', props.onSegmentEntered);
+          }
+          if (props.onSegmentExited && typeof (player as any).on === 'function') {
+            (player as any).on('segmentexited', props.onSegmentExited);
+          }
+          if (props.onSegmentSkipped && typeof (player as any).on === 'function') {
+            (player as any).on('segmentskipped', props.onSegmentSkipped);
+          }
+          if (props.onChapterSegmentEntered && typeof (player as any).on === 'function') {
+            (player as any).on('chapterSegmentEntered', props.onChapterSegmentEntered);
+          }
+          if (props.onChapterSegmentSkipped && typeof (player as any).on === 'function') {
+            (player as any).on('chapterSegmentSkipped', props.onChapterSegmentSkipped);
+          }
+          if (props.onChapterSkipButtonShown && typeof (player as any).on === 'function') {
+            (player as any).on('chapterSkipButtonShown', props.onChapterSkipButtonShown);
+          }
+          if (props.onChapterSkipButtonHidden && typeof (player as any).on === 'function') {
+            (player as any).on('chapterSkipButtonHidden', props.onChapterSkipButtonHidden);
+          }
+          if (props.onChaptersLoaded && typeof (player as any).on === 'function') {
+            (player as any).on('chaptersLoaded', props.onChaptersLoaded);
+          }
+          if (props.onChaptersLoadError && typeof (player as any).on === 'function') {
+            (player as any).on('chaptersLoadError', props.onChaptersLoadError);
+          }
+          
           props.onReady?.(player);
         }
       } catch (err) {