unified-video-framework 1.4.195 → 1.4.197

package/packages/web/src/WebPlayer.ts

@@ -238,6 +238,10 @@ export class WebPlayer extends BasePlayer {
     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;
     }
@@ -938,6 +942,8 @@ export class WebPlayer extends BasePlayer {
       try {
         await this.play();
         this.debugLog('✅ Muted autoplay successful');
+        // Show YouTube-style unmute button instead of blocking overlay
+        this.showUnmuteButton();
         return true;
       } catch (error) {
         this.debugLog('❌ Muted autoplay failed');
@@ -1133,6 +1139,129 @@ export class WebPlayer extends BasePlayer {
     }
   }
   
+  /**
+   * 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';
+    unmuteBtn.setAttribute('aria-label', 'Tap to unmute');
+    unmuteBtn.innerHTML = `
+      <svg viewBox="0 0 24 24" class="uvf-unmute-icon">
+        <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+      </svg>
+      <span class="uvf-unmute-text">Tap to unmute</span>
+    `;
+    
+    // Click handler to unmute
+    unmuteBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (this.video) {
+        this.video.muted = false;
+        this.debugLog('🔊 Video unmuted by user');
+        this.hideUnmuteButton();
+      }
+    });
+    
+    // Add enhanced styles
+    const style = document.createElement('style');
+    style.textContent = `
+      .uvf-unmute-btn {
+        position: absolute !important;
+        bottom: 80px !important;
+        left: 20px !important;
+        z-index: 1000 !important;
+        display: flex !important;
+        align-items: center !important;
+        gap: 8px !important;
+        padding: 12px 16px !important;
+        background: rgba(0, 0, 0, 0.8) !important;
+        border: none !important;
+        border-radius: 4px !important;
+        color: white !important;
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        cursor: pointer !important;
+        transition: all 0.2s ease !important;
+        backdrop-filter: blur(10px) !important;
+        -webkit-backdrop-filter: blur(10px) !important;
+        animation: uvf-unmute-pulse 2s ease-in-out infinite !important;
+      }
+      
+      .uvf-unmute-btn:hover {
+        background: rgba(0, 0, 0, 0.9) !important;
+        transform: scale(1.05) !important;
+      }
+      
+      .uvf-unmute-btn:active {
+        transform: scale(0.95) !important;
+      }
+      
+      .uvf-unmute-icon {
+        width: 20px !important;
+        height: 20px !important;
+        fill: white !important;
+      }
+      
+      .uvf-unmute-text {
+        white-space: nowrap !important;
+      }
+      
+      @keyframes uvf-unmute-pulse {
+        0%, 100% {
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+        }
+        50% {
+          box-shadow: 0 2px 16px rgba(255, 255, 255, 0.2) !important;
+        }
+      }
+      
+      /* Mobile responsive */
+      @media (max-width: 767px) {
+        .uvf-unmute-btn {
+          bottom: 70px !important;
+          left: 50% !important;
+          transform: translateX(-50%) !important;
+          padding: 10px 14px !important;
+          font-size: 13px !important;
+        }
+        
+        .uvf-unmute-btn:hover {
+          transform: translateX(-50%) scale(1.05) !important;
+        }
+      }
+    `;
+    
+    // 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');
+    }
+  }
+  
+  /**
+   * Hide unmute button
+   */
+  private hideUnmuteButton(): void {
+    const unmuteBtn = document.getElementById('uvf-unmute-btn');
+    if (unmuteBtn) {
+      unmuteBtn.remove();
+      this.debugLog('Unmute button removed');
+    }
+  }
+  
   private updateTimeTooltip(e: MouseEvent): void {
     const progressBar = document.getElementById('uvf-progress-bar');
     const tooltip = document.getElementById('uvf-time-tooltip');
@@ -4112,18 +4241,6 @@ export class WebPlayer extends BasePlayer {
           height: 24px;
         }
         
-        .uvf-player-wrapper.uvf-fullscreen .uvf-top-btn {
-          width: 40px;
-          height: 40px;
-          min-width: 40px;
-          min-height: 40px;
-        }
-        
-        .uvf-player-wrapper.uvf-fullscreen .uvf-top-btn svg {
-          width: 20px;
-          height: 20px;
-        }
-        
         .uvf-player-wrapper.uvf-fullscreen .uvf-time-display {
           font-size: 14px;
           padding: 0 10px;
@@ -4223,12 +4340,29 @@ export class WebPlayer extends BasePlayer {
       }
       
       
-      /* Mobile portrait - hide skip buttons */
+      /* Mobile portrait - hide skip buttons, ensure top bar visible */
       @media screen and (max-width: 767px) and (orientation: portrait) {
         #uvf-skip-back,
         #uvf-skip-forward {
           display: none !important;
         }
+        
+        /* Ensure top bar and controls are visible */
+        .uvf-top-bar {
+          display: flex !important;
+          z-index: 10 !important;
+        }
+        
+        .uvf-top-controls {
+          display: flex !important;
+        }
+        
+        /* Show top bar when controls are visible or on hover */
+        .uvf-player-wrapper:hover .uvf-top-bar,
+        .uvf-player-wrapper.controls-visible .uvf-top-bar {
+          opacity: 1 !important;
+          transform: translateY(0) !important;
+        }
       }
       
       /* Mobile devices (landscape) - Optimized for fullscreen viewing with safe areas */
@@ -4326,18 +4460,6 @@ export class WebPlayer extends BasePlayer {
           gap: 6px !important;
         }
         
-        .uvf-top-btn {
-          width: 40px;
-          height: 40px;
-          min-width: 40px;
-          min-height: 40px;
-        }
-        
-        .uvf-top-btn svg {
-          width: 18px;
-          height: 18px;
-        }
-        
         /* Title bar within top bar - landscape */
         .uvf-top-bar .uvf-title-bar {
           padding: 0;
@@ -4423,19 +4545,6 @@ export class WebPlayer extends BasePlayer {
           height: 23px;
         }
         
-        /* Tablet top controls */
-        .uvf-top-btn {
-          width: 42px;
-          height: 42px;
-          min-width: 42px;
-          min-height: 42px;
-        }
-        
-        .uvf-top-btn svg {
-          width: 19px;
-          height: 19px;
-        }
-        
         /* Top bar for tablet */
         .uvf-top-bar {
           padding: 16px;
@@ -4574,23 +4683,6 @@ export class WebPlayer extends BasePlayer {
           height: 24px;
         }
         
-        /* Enhanced top controls */
-        .uvf-top-btn {
-          width: 40px;
-          height: 40px;
-          transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
-        }
-        
-        .uvf-top-btn:hover {
-          transform: scale(1.1);
-          background: var(--uvf-overlay-medium);
-        }
-        
-        .uvf-top-btn svg {
-          width: 20px;
-          height: 20px;
-        }
-        
         /* Top bar for desktop 1024px+ */
         .uvf-top-bar {
           padding: 20px;
@@ -4710,16 +4802,6 @@ export class WebPlayer extends BasePlayer {
           height: 28px;
         }
         
-        .uvf-top-btn {
-          width: 44px;
-          height: 44px;
-        }
-        
-        .uvf-top-btn svg {
-          width: 22px;
-          height: 22px;
-        }
-        
         .uvf-center-play-btn {
           width: clamp(64px, 10vw, 76px);
           height: clamp(64px, 10vw, 76px);
@@ -4760,8 +4842,7 @@ export class WebPlayer extends BasePlayer {
       /* High-DPI display optimizations */
       @media screen and (-webkit-min-device-pixel-ratio: 2), 
              screen and (min-resolution: 192dpi) {
-        .uvf-control-btn,
-        .uvf-top-btn {
+        .uvf-control-btn {
           image-rendering: -webkit-optimize-contrast;
           image-rendering: crisp-edges;
         }
@@ -4778,7 +4859,6 @@ export class WebPlayer extends BasePlayer {
       /* Reduced motion accessibility */
       @media (prefers-reduced-motion: reduce) {
         .uvf-control-btn,
-        .uvf-top-btn,
         .uvf-center-play-btn,
         .uvf-progress-handle,
         .uvf-volume-slider,
@@ -4787,7 +4867,6 @@ export class WebPlayer extends BasePlayer {
         }
         
         .uvf-control-btn:hover,
-        .uvf-top-btn:hover,
         .uvf-center-play-btn:hover {
           transform: none !important;
         }
@@ -4813,11 +4892,6 @@ export class WebPlayer extends BasePlayer {
           border-radius: 50%
         }
         
-        .uvf-top-btn {
-          min-width: 44px;
-          min-height: 44px;
-        }
-        
         .uvf-progress-bar {
           height: 3px;
         }
@@ -4836,22 +4910,21 @@ export class WebPlayer extends BasePlayer {
           background: var(--uvf-overlay-medium);
           transform: scale(0.95);
         }
-        
-        .uvf-top-btn:active {
-          background: var(--uvf-overlay-medium);
-          transform: scale(0.95);
-        }
       }
       
       /* Keyboard navigation and accessibility */
       .uvf-control-btn:focus-visible,
-      .uvf-top-btn:focus-visible,
       .uvf-center-play-btn:focus-visible {
         outline: 2px solid var(--uvf-primary-color, #007bff);
         outline-offset: 2px;
         background: var(--uvf-overlay-medium);
       }
       
+      .uvf-top-btn:focus-visible {
+        outline: 2px solid var(--uvf-primary-color, #007bff);
+        outline-offset: 2px;
+      }
+      
       .uvf-progress-bar-wrapper:focus-visible {
         outline: 2px solid var(--uvf-primary-color, #007bff);
         outline-offset: 2px;
@@ -4883,7 +4956,10 @@ export class WebPlayer extends BasePlayer {
       
       /* High contrast mode support */
       @media (prefers-contrast: high) {
-        .uvf-control-btn,
+        .uvf-control-btn {
+          border: 1px solid;
+        }
+        
         .uvf-top-btn {
           border: 1px solid;
         }
@@ -5670,6 +5746,8 @@ export class WebPlayer extends BasePlayer {
         } else {
           volumeIcon.style.display = 'block';
           muteIcon.style.display = 'none';
+          // Hide unmute button when video is unmuted
+          this.hideUnmuteButton();
         }
       }
     });
@@ -5846,6 +5924,17 @@ export class WebPlayer extends BasePlayer {
     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 = `
+        <svg viewBox="0 0 24 24">
+          <path d="M1 18h6v-2H1v2zm0-4h12v-2H1v2zm16.5 4.5c-1.25 0-2.45-.5-3.35-1.41L12 18.5l2.09 2.09c1.8 1.8 4.72 1.8 6.52 0 1.8-1.8 1.8-4.72 0-6.52L12 5.5 3.39 14.11c-1.8 1.8-1.8 4.72 0 6.52.9.9 2.1 1.41 3.35 1.41l6.76-6.76M12 7.91l6.89 6.89c.78.78.78 2.05 0 2.83-.78.78-2.05.78-2.83 0L12 13.57 7.94 17.63c-.78.78-2.05.78-2.83 0-.78-.78-.78-2.05 0-2.83L12 7.91z"/>
+        </svg>
+      `;
+      castBtn.setAttribute('title', 'AirPlay');
+      castBtn.setAttribute('aria-label', 'AirPlay');
+    }
+    
     castBtn?.addEventListener('click', () => this.onCastButtonClick());
     stopCastBtn?.addEventListener('click', () => this.stopCasting());
     shareBtn?.addEventListener('click', () => this.shareVideo());
@@ -8189,6 +8278,13 @@ export class WebPlayer extends BasePlayer {
   }
 
   private onCastButtonClick(): void {
+    // On iOS, use AirPlay instead of Google Cast
+    if (this.isIOSDevice()) {
+      this.showAirPlayPicker();
+      return;
+    }
+    
+    // Google Cast for non-iOS devices
     try {
       const castNs = (window as any).cast;
       if (this.isCasting && castNs && castNs.framework) {
@@ -8200,6 +8296,31 @@ export class WebPlayer extends BasePlayer {
     // Not casting yet
     this.initCast();
   }
+  
+  /**
+   * Show AirPlay picker for iOS devices
+   */
+  private showAirPlayPicker(): void {
+    if (!this.video) {
+      this.showNotification('Video not ready');
+      return;
+    }
+    
+    // Check if AirPlay is supported
+    const videoElement = this.video as any;
+    if (typeof videoElement.webkitShowPlaybackTargetPicker === 'function') {
+      try {
+        videoElement.webkitShowPlaybackTargetPicker();
+        this.debugLog('AirPlay picker shown');
+      } catch (error) {
+        this.debugWarn('Failed to show AirPlay picker:', (error as Error).message);
+        this.showNotification('AirPlay not available');
+      }
+    } else {
+      this.debugWarn('AirPlay not supported on this device');
+      this.showNotification('AirPlay not supported');
+    }
+  }
 
   private stopCasting(): void {
     try {