unified-video-framework 1.4.118 → 1.4.119

package/packages/web/src/WebPlayer.ts

@@ -906,26 +906,122 @@ export class WebPlayer extends BasePlayer {
     }
   }
 
+  /**
+   * Checks if Picture-in-Picture is supported on the current device/browser
+   */
+  isPictureInPictureSupported(): boolean {
+    if (!this.video) return false;
+    
+    // Check standard PiP API support
+    const hasStandardPiP = 'requestPictureInPicture' in this.video && 
+                           'pictureInPictureEnabled' in document;
+    
+    // Check for Safari/WebKit PiP support
+    const hasSafariPiP = 'webkitSupportsPresentationMode' in this.video &&
+                         typeof (this.video as any).webkitSupportsPresentationMode === 'function' &&
+                         (this.video as any).webkitSupportsPresentationMode('picture-in-picture');
+    
+    // Mobile browser detection for PiP support
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isIOS = /iphone|ipad|ipod/.test(userAgent);
+    const isAndroid = /android/.test(userAgent);
+    const isChrome = /chrome/.test(userAgent) && !/edge/.test(userAgent);
+    const isSafari = /safari/.test(userAgent) && !/chrome/.test(userAgent);
+    const isFirefox = /firefox/.test(userAgent);
+    
+    // iOS Safari supports PiP from iOS 14+ (with video element)
+    const iosSupport = isIOS && isSafari && hasSafariPiP;
+    
+    // Android Chrome supports PiP from Chrome 70+
+    const androidChromeSupport = isAndroid && isChrome && hasStandardPiP;
+    
+    // Firefox mobile doesn't support PiP yet
+    const firefoxSupport = isFirefox && hasStandardPiP && !this.isMobileDevice();
+    
+    this.debugLog('PiP Support Detection:', {
+      hasStandardPiP,
+      hasSafariPiP,
+      isIOS,
+      isAndroid,
+      isChrome,
+      isSafari,
+      isFirefox,
+      iosSupport,
+      androidChromeSupport,
+      firefoxSupport,
+      overall: hasStandardPiP || iosSupport || androidChromeSupport || firefoxSupport
+    });
+    
+    return hasStandardPiP || iosSupport || androidChromeSupport || firefoxSupport;
+  }
+  
+  /**
+   * Detects if running on a mobile device
+   */
+  private isMobileDevice(): boolean {
+    const userAgent = navigator.userAgent.toLowerCase();
+    return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(userAgent) ||
+           (!!(navigator.maxTouchPoints && navigator.maxTouchPoints > 2) && /macintosh/.test(userAgent));
+  }
+
   async enterPictureInPicture(): Promise<void> {
-    if (!this.video) return;
+    if (!this.video) {
+      throw new Error('Video element not available');
+    }
+    
+    if (!this.isPictureInPictureSupported()) {
+      throw new Error('Picture-in-Picture not supported on this device/browser');
+    }
 
     try {
-      if ((this.video as any).requestPictureInPicture) {
+      // Standard PiP API (Chrome, Firefox, etc.)
+      if ('requestPictureInPicture' in this.video) {
         await (this.video as any).requestPictureInPicture();
-      } else {
-        throw new Error('Picture-in-Picture not supported');
+        this.debugLog('PiP entered using standard API');
+        return;
       }
+      
+      // Safari/WebKit PiP API
+      if ('webkitSetPresentationMode' in this.video) {
+        (this.video as any).webkitSetPresentationMode('picture-in-picture');
+        this.debugLog('PiP entered using WebKit API');
+        return;
+      }
+      
+      throw new Error('No supported PiP API available');
     } catch (error) {
-      console.error('Failed to enter PiP:', error);
+      this.debugError('Failed to enter PiP:', (error as Error).message);
       throw error;
     }
   }
 
   async exitPictureInPicture(): Promise<void> {
     try {
-      if ((document as any).exitPictureInPicture) {
+      // Check if currently in PiP mode
+      const inStandardPiP = (document as any).pictureInPictureElement;
+      const inWebkitPiP = this.video && 
+                          'webkitPresentationMode' in this.video && 
+                          (this.video as any).webkitPresentationMode === 'picture-in-picture';
+      
+      if (!inStandardPiP && !inWebkitPiP) {
+        this.debugLog('Not currently in PiP mode');
+        return;
+      }
+      
+      // Standard PiP exit
+      if (inStandardPiP && 'exitPictureInPicture' in document) {
         await (document as any).exitPictureInPicture();
+        this.debugLog('PiP exited using standard API');
+        return;
+      }
+      
+      // Safari/WebKit PiP exit
+      if (inWebkitPiP && this.video && 'webkitSetPresentationMode' in this.video) {
+        (this.video as any).webkitSetPresentationMode('inline');
+        this.debugLog('PiP exited using WebKit API');
+        return;
       }
+      
     } catch (error) {
       this.debugWarn('Failed to exit PiP:', (error as Error).message);
       // Don't re-throw the error to prevent breaking the user experience
@@ -1793,16 +1889,48 @@ export class WebPlayer extends BasePlayer {
         aspect-ratio: 16 / 9;
         background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
         overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
       
       .uvf-video {
         position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
         background: #000;
         object-fit: contain;
+        /* Ensure proper centering and scaling */
+        object-position: center;
+      }
+      
+      /* Mobile-specific video centering improvements */
+      @media screen and (max-width: 767px) {
+        .uvf-video {
+          /* Force full width/height on mobile for better centering */
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          transform: none;
+          object-fit: contain;
+          object-position: center;
+        }
+        
+        .uvf-video-container {
+          /* Remove aspect ratio constraint on mobile for full height usage */
+          aspect-ratio: unset;
+          min-height: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
       
       .uvf-watermark-layer {
@@ -2925,6 +3053,10 @@ export class WebPlayer extends BasePlayer {
       @media screen and (max-width: 767px) {
         html, body {
           overflow-x: hidden;
+          /* Prevent iOS Safari address bar bounce */
+          position: fixed;
+          height: 100%;
+          width: 100%;
         }
         
         .uvf-player-wrapper {
@@ -2934,6 +3066,23 @@ export class WebPlayer extends BasePlayer {
           
           /* Prevent zoom on double tap */
           touch-action: manipulation;
+          
+          /* Ensure full viewport usage */
+          position: relative;
+          width: 100vw;
+          height: 100vh;
+          
+          /* iOS Safari fix for viewport height */
+          min-height: -webkit-fill-available;
+        }
+        
+        .uvf-video-container {
+          /* Full viewport container */
+          width: 100vw;
+          height: 100vh;
+          min-height: -webkit-fill-available;
+          position: relative;
+          overflow: hidden;
         }
         
         .uvf-video {
@@ -2946,12 +3095,38 @@ export class WebPlayer extends BasePlayer {
           /* Ensure hardware acceleration */
           -webkit-transform: translateZ(0);
           transform: translateZ(0);
+          
+          /* Full viewport video with proper centering */
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          object-position: center center;
         }
         
         /* Fix for controls being cut off by virtual keyboard */
         .uvf-controls-bar {
           position: fixed !important;
           bottom: var(--uvf-safe-area-bottom, 0) !important;
+          left: var(--uvf-safe-area-left, 0) !important;
+          right: var(--uvf-safe-area-right, 0) !important;
+          width: auto !important;
+          z-index: 9999;
+        }
+        
+        /* Top controls safe area positioning */
+        .uvf-top-controls {
+          position: fixed !important;
+          top: var(--uvf-safe-area-top, 10px) !important;
+          right: var(--uvf-safe-area-right, 10px) !important;
+          z-index: 9999;
+        }
+        
+        .uvf-title-bar {
+          position: fixed !important;
+          top: var(--uvf-safe-area-top, 10px) !important;
+          left: var(--uvf-safe-area-left, 10px) !important;
+          right: calc(120px + var(--uvf-safe-area-right, 10px)) !important; /* Leave space for top controls */
+          z-index: 9999;
         }
         
         /* Ensure controls stay above virtual keyboards */
@@ -2960,6 +3135,61 @@ export class WebPlayer extends BasePlayer {
             bottom: max(var(--uvf-safe-area-bottom, 0), env(keyboard-inset-height, 0)) !important;
           }
         }
+        
+        /* Enhanced safe area support for newer devices */
+        @supports (padding: max(0px)) {
+          .uvf-controls-bar {
+            padding-bottom: max(16px, calc(16px + var(--uvf-safe-area-bottom, 0)));
+            padding-left: max(12px, calc(12px + var(--uvf-safe-area-left, 0)));
+            padding-right: max(12px, calc(12px + var(--uvf-safe-area-right, 0)));
+          }
+          
+          .uvf-top-controls {
+            top: max(10px, calc(10px + var(--uvf-safe-area-top, 0))) !important;
+            right: max(10px, calc(10px + var(--uvf-safe-area-right, 0))) !important;
+          }
+          
+          .uvf-title-bar {
+            top: max(10px, calc(10px + var(--uvf-safe-area-top, 0))) !important;
+            left: max(10px, calc(10px + var(--uvf-safe-area-left, 0))) !important;
+          }
+        }
+      }
+      
+      /* Specific fixes for iPhone X series and newer with notches */
+      @media screen and (max-width: 767px) and (orientation: portrait) {
+        @supports (top: env(safe-area-inset-top)) {
+          .uvf-responsive-container,
+          .uvf-player-wrapper,
+          .uvf-video-container {
+            height: 100vh;
+            height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+          }
+        }
+      }
+      
+      /* Landscape orientation fixes for mobile */
+      @media screen and (max-width: 767px) and (orientation: landscape) {
+        html, body {
+          height: 100vh;
+          overflow: hidden;
+        }
+        
+        .uvf-responsive-container,
+        .uvf-player-wrapper,
+        .uvf-video-container {
+          height: 100vh;
+          width: 100vw;
+        }
+        
+        @supports (height: 100dvh) {
+          .uvf-responsive-container,
+          .uvf-player-wrapper,
+          .uvf-video-container {
+            height: 100dvh;
+            width: 100dvw;
+          }
+        }
       }
       
       /* Enhanced Responsive Media Queries with UX Best Practices */
@@ -4311,13 +4541,20 @@ export class WebPlayer extends BasePlayer {
     epgBtn.style.display = 'none'; // Initially hidden, will be shown when EPG data is available
     rightControls.appendChild(epgBtn);
     
-    // PiP button
+    // PiP button - conditionally add based on support
     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"/></svg>';
-    rightControls.appendChild(pipBtn);
+    
+    // Only show PiP button if supported
+    if (this.isPictureInPictureSupported()) {
+      rightControls.appendChild(pipBtn);
+      this.debugLog('PiP button added - support detected');
+    } else {
+      this.debugLog('PiP button not added - no support detected');
+    }
     
     // Fullscreen button
     const fullscreenBtn = document.createElement('button');
@@ -5586,15 +5823,49 @@ export class WebPlayer extends BasePlayer {
     }
   }
   
+  /**
+   * Checks if currently in Picture-in-Picture mode
+   */
+  isPictureInPictureActive(): boolean {
+    // Check standard PiP
+    const inStandardPiP = !!(document as any).pictureInPictureElement;
+    
+    // Check Safari/WebKit PiP
+    const inWebkitPiP = !!(this.video && 
+                          'webkitPresentationMode' in this.video && 
+                          (this.video as any).webkitPresentationMode === 'picture-in-picture');
+    
+    return inStandardPiP || inWebkitPiP;
+  }
+  
   private async togglePiP(): Promise<void> {
+    if (!this.isPictureInPictureSupported()) {
+      this.showShortcutIndicator('PiP not supported');
+      this.debugWarn('PiP not supported on this device/browser');
+      return;
+    }
+    
     try {
-      if ((document as any).pictureInPictureElement) {
+      if (this.isPictureInPictureActive()) {
         await this.exitPictureInPicture();
+        this.showShortcutIndicator('Exit PiP');
+        this.debugLog('PiP deactivated');
       } else {
         await this.enterPictureInPicture();
+        this.showShortcutIndicator('Enter PiP');
+        this.debugLog('PiP activated');
       }
     } catch (error) {
-      console.error('PiP toggle failed:', error);
+      const errorMessage = (error as Error).message;
+      this.showShortcutIndicator(`PiP Error: ${errorMessage}`);
+      this.debugError('PiP toggle failed:', errorMessage);
+      
+      // Show user-friendly message for common errors
+      if (errorMessage.includes('not supported')) {
+        this.showShortcutIndicator('PiP not supported');
+      } else if (errorMessage.includes('user gesture')) {
+        this.showShortcutIndicator('PiP requires user interaction');
+      }
     }
   }