unified-video-framework 1.4.205 → 1.4.207

package/packages/web/src/WebPlayer.ts

@@ -384,9 +384,6 @@ 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', () => {
@@ -396,9 +393,6 @@ export class WebPlayer extends BasePlayer {
         try { this.video?.pause(); } catch (_) {}
       }
 
-      // Also hide overlay on playing event (more reliable)
-      this.hidePlayOverlay();
-
       // Stop buffering state
       this.setBuffering(false);
     });
@@ -456,15 +450,13 @@ export class WebPlayer extends BasePlayer {
         this.autoplayAttempted = true;
         this.attemptIntelligentAutoplay().then(success => {
           if (!success) {
-            this.debugWarn('❌ Intelligent autoplay failed, showing play overlay');
-            this.showPlayOverlay();
+            this.debugWarn('❌ Intelligent autoplay failed - will retry on user interaction');
             this.setupAutoplayRetry();
           } else {
             this.debugLog('✅ Intelligent autoplay succeeded');
           }
         }).catch(error => {
           this.debugError('Autoplay failed:', error);
-          this.showPlayOverlay();
           this.setupAutoplayRetry();
         });
       } else {
@@ -959,27 +951,26 @@ export class WebPlayer extends BasePlayer {
       }
     }
 
-    // Fall back to muted autoplay
-    if (this.autoplayCapabilities.canAutoplayMuted || hasActivation) {
-      this.video.muted = true;
-      this.debugLog('🔇 Attempting muted autoplay');
+    // Always try muted autoplay as fallback (browsers allow this)
+    // Ignore capability detection - it can give false negatives
+    this.video.muted = true;
+    this.debugLog('🔇 Attempting muted autoplay (always try this)');
 
-      try {
-        this.debugLog('▶️ Calling play() for muted autoplay...');
-        await this.play();
-        // Verify video is actually playing
-        this.debugLog(`📊 Play returned, video.paused=${this.video.paused}`);
-        if (!this.video.paused) {
-          this.debugLog('✅ Muted autoplay successful');
-          // Show YouTube-style unmute button instead of blocking overlay
-          this.showUnmuteButton();
-          return true;
-        } else {
-          this.debugLog('❌ Muted play() succeeded but video is paused');
-        }
-      } catch (error) {
-        this.debugLog('❌ Muted autoplay failed:', error);
+    try {
+      this.debugLog('▶️ Calling play() for muted autoplay...');
+      await this.play();
+      // Verify video is actually playing
+      this.debugLog(`📊 Play returned, video.paused=${this.video.paused}`);
+      if (!this.video.paused) {
+        this.debugLog('✅ Muted autoplay successful');
+        // Show YouTube-style unmute button instead of blocking overlay
+        this.showUnmuteButton();
+        return true;
+      } else {
+        this.debugLog('❌ Muted play() succeeded but video is paused');
       }
+    } catch (error) {
+      this.debugLog('❌ Muted autoplay failed:', error);
     }
 
     return false;
@@ -1029,160 +1020,6 @@ export class WebPlayer extends BasePlayer {
     this.debugLog('🎯 Autoplay retry armed - waiting for user interaction');
   }
 
-  private showPlayOverlay(): void {
-    // Don't show overlay if unmute button is already visible (video is autoplaying muted)
-    const unmuteBtn = document.getElementById('uvf-unmute-btn');
-    if (unmuteBtn) {
-      this.debugLog('Skipping play overlay - video is autoplaying muted with unmute button');
-      return;
-    }
-    
-    // Don't show overlay if video is already playing
-    if (this.video && !this.video.paused) {
-      this.debugLog('Skipping play overlay - video is already playing');
-      return;
-    }
-    
-    // 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);
-
-    // 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);
-        // 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) {
-        await handlePlayClick(e);
-      }
-    });
-
-    // Add enhanced styles with better visibility
-    const style = document.createElement('style');
-    style.textContent = `
-      .uvf-play-overlay {
-        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: 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 !important;
-        transform: scale(1.15) !important;
-        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4) !important;
-      }
-
-      .uvf-play-button svg {
-        width: 40px !important;
-        height: 40px !important;
-        margin-left: 4px !important;
-      }
-
-      .uvf-play-message {
-        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();
-    }
-  }
   
   /**
    * Show YouTube-style unmute button when video autoplays muted
@@ -1381,8 +1218,6 @@ export class WebPlayer extends BasePlayer {
         this.video.pause();
       }
 
-      // Hide the play overlay if it exists
-      this.hidePlayOverlay();
       // Hide unmute button when video starts playing with sound
       if (!this.video.muted) {
         this.hideUnmuteButton();