unified-video-framework 1.4.119 → 1.4.120

package/packages/web/src/WebPlayer.ts

@@ -906,122 +906,26 @@ 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) {
-      throw new Error('Video element not available');
-    }
-    
-    if (!this.isPictureInPictureSupported()) {
-      throw new Error('Picture-in-Picture not supported on this device/browser');
-    }
+    if (!this.video) return;
 
     try {
-      // Standard PiP API (Chrome, Firefox, etc.)
-      if ('requestPictureInPicture' in this.video) {
+      if ((this.video as any).requestPictureInPicture) {
         await (this.video as any).requestPictureInPicture();
-        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;
+      } else {
+        throw new Error('Picture-in-Picture not supported');
       }
-      
-      throw new Error('No supported PiP API available');
     } catch (error) {
-      this.debugError('Failed to enter PiP:', (error as Error).message);
+      console.error('Failed to enter PiP:', error);
       throw error;
     }
   }
 
   async exitPictureInPicture(): Promise<void> {
     try {
-      // 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) {
+      if ((document as any).exitPictureInPicture) {
         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
@@ -1895,44 +1799,16 @@ export class WebPlayer extends BasePlayer {
       }
       
       .uvf-video {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        display: block;
         max-width: 100%;
         max-height: 100%;
-        width: auto;
-        height: auto;
+        width: 100%;
+        height: 100%;
         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 {
         position: absolute;
         top: 0;
@@ -3053,10 +2929,6 @@ 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 {
@@ -3066,23 +2938,6 @@ 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 {
@@ -3095,38 +2950,12 @@ 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 */
@@ -3135,127 +2964,160 @@ 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));
-          }
-        }
-      }
+      /* Mobile-First Responsive Video Player Layout */
       
-      /* 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 */
-      /* Mobile devices (portrait) - Enhanced UX with Safe Areas */
-      @media screen and (max-width: 767px) and (orientation: portrait) {
+      /* Mobile devices (all orientations) - Base mobile styles */
+      @media screen and (max-width: 767px) {
+        /* Force full viewport usage with proper safe area handling */
         .uvf-responsive-container {
-          padding: 0;
+          position: fixed !important;
+          top: 0;
+          left: 0;
           width: 100vw !important;
-          height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+          height: 100vh !important;
+          height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
           margin: 0;
-          position: relative;
+          padding: 0;
           overflow: hidden;
+          z-index: 1000;
         }
         
+        /* Modern viewport support */
         @supports (height: 100dvh) {
           .uvf-responsive-container {
-            height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+            height: 100dvh !important;
+            height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
           }
         }
         
+        /* Player wrapper fills container completely */
         .uvf-responsive-container .uvf-player-wrapper {
-          width: 100vw !important;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100% !important;
           height: 100% !important;
-          min-height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
-        }
-        
-        @supports (height: 100dvh) {
-          .uvf-responsive-container .uvf-player-wrapper {
-            min-height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
-          }
+          max-width: none;
+          max-height: none;
+          display: flex;
+          flex-direction: column;
         }
         
+        /* Video container optimized for mobile centering */
         .uvf-responsive-container .uvf-video-container {
-          width: 100vw !important;
+          position: relative;
+          width: 100% !important;
           height: 100% !important;
+          flex: 1;
           aspect-ratio: unset !important;
-          min-height: inherit;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #000;
+          overflow: hidden;
+        }
+        
+        /* Perfectly centered mobile video */
+        .uvf-responsive-container .uvf-video {
+          position: relative;
+          display: block;
+          width: 100%;
+          height: 100%;
+          max-width: 100%;
+          max-height: 100%;
+          object-fit: contain;
+          object-position: center center;
+          background: transparent;
         }
         
-        /* Enhanced mobile controls bar with safe area padding */
+        /* Mobile controls positioned with safe areas */
         .uvf-controls-bar {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          padding: 16px 12px;
-          padding-bottom: calc(16px + var(--uvf-safe-area-bottom));
-          padding-left: calc(12px + var(--uvf-safe-area-left));
-          padding-right: calc(12px + var(--uvf-safe-area-right));
-          background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 80%, var(--uvf-overlay-transparent) 100%);
+          position: absolute !important;
+          bottom: env(safe-area-inset-bottom, 0px);
+          left: env(safe-area-inset-left, 0px);
+          right: env(safe-area-inset-right, 0px);
+          width: auto;
+          padding: 16px;
+          padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+          padding-left: calc(16px + env(safe-area-inset-left, 0px));
+          padding-right: calc(16px + env(safe-area-inset-right, 0px));
+          background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
           box-sizing: border-box;
-          z-index: 1000;
+          z-index: 2000;
+          opacity: 1;
+          transform: none;
+        }
+        
+        /* Top controls with safe area */
+        .uvf-top-controls {
+          position: absolute !important;
+          top: calc(16px + env(safe-area-inset-top, 0px));
+          right: calc(16px + env(safe-area-inset-right, 0px));
+          z-index: 2000;
+        }
+        
+        /* Title bar with safe area */
+        .uvf-title-bar {
+          position: absolute !important;
+          top: calc(16px + env(safe-area-inset-top, 0px));
+          left: calc(16px + env(safe-area-inset-left, 0px));
+          right: calc(120px + env(safe-area-inset-right, 0px));
+          z-index: 2000;
         }
+      }
+      
+      /* Mobile Portrait - Optimized vertical layout */
+      @media screen and (max-width: 767px) and (orientation: portrait) {
         
         .uvf-progress-section {
           margin-bottom: 16px;
         }
         
-        /* Mobile-first responsive controls layout */
+        /* Mobile-optimized controls layout */
         .uvf-controls-row {
-          gap: 8px;
-          flex-wrap: nowrap;
+          display: flex;
           align-items: center;
           justify-content: space-between;
-          position: relative;
           width: 100%;
+          gap: 12px;
+          flex-wrap: nowrap;
+          position: relative;
+          min-height: 52px;
+        }
+        
+        /* Ensure controls are always visible */
+        .uvf-controls-row > * {
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+        }
+        
+        /* Control groups with proper flex behavior */
+        .uvf-left-controls {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          flex: 0 0 auto;
+        }
+        
+        .uvf-center-controls {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          flex: 1 1 auto;
+          justify-content: center;
+          min-width: 0;
+        }
+        
+        .uvf-right-controls {
+          display: flex !important;
+          align-items: center;
+          gap: 8px;
+          flex: 0 0 auto;
         }
         
         /* Left side controls group */
@@ -3383,26 +3245,68 @@ export class WebPlayer extends BasePlayer {
           display: none !important;
         }
         
-        /* Settings menu - hidden by default, accessible via menu */
+        /* Enhanced mobile settings menu */
         .uvf-settings-menu {
-          min-width: 160px;
-          bottom: 60px;
-          right: 12px;
+          position: fixed !important;
+          bottom: calc(80px + env(safe-area-inset-bottom, 0px));
+          right: calc(16px + env(safe-area-inset-right, 0px));
+          min-width: 200px;
+          max-width: 280px;
+          max-height: 60vh;
+          background: rgba(0,0,0,0.95);
+          backdrop-filter: blur(20px);
+          -webkit-backdrop-filter: blur(20px);
+          border: 1px solid rgba(255,255,255,0.2);
+          border-radius: 12px;
+          box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+          z-index: 3000;
+          overflow: hidden;
           font-size: 14px;
-          max-height: 50vh;
+          opacity: 0;
+          transform: translateY(10px) scale(0.95);
+          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+          pointer-events: none;
         }
         
+        .uvf-settings-menu.active {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+          pointer-events: auto;
+        }
+        
+        /* Touch-optimized settings options */
         .uvf-settings-option {
-          padding: 12px 16px;
-          font-size: 14px;
-          min-height: 44px;
+          padding: 16px 20px;
+          font-size: 16px;
+          min-height: 56px;
           display: flex;
           align-items: center;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          border: none;
+          background: transparent;
+          color: #fff;
+          width: 100%;
+          text-align: left;
         }
         
-        .uvf-settings-option:hover {
+        .uvf-settings-option:hover,
+        .uvf-settings-option:focus {
           background: rgba(255,255,255,0.15);
-          padding-left: 20px;
+        }
+        
+        .uvf-settings-option.active {
+          background: rgba(255,77,79,0.2);
+          color: #ff4d4f;
+        }
+        
+        /* Settings groups with proper spacing */
+        .uvf-settings-group {
+          border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        
+        .uvf-settings-group:last-child {
+          border-bottom: none;
         }
         
         /* Simplified settings - hide complex options */
@@ -3543,11 +3447,46 @@ export class WebPlayer extends BasePlayer {
           display: block;
         }
         
+        /* Ensure settings button is always visible and functional */
+        #uvf-settings-btn {
+          display: flex !important;
+          align-items: center;
+          justify-content: center;
+          width: 44px;
+          height: 44px;
+          min-width: 44px;
+          min-height: 44px;
+          background: rgba(255,255,255,0.15);
+          backdrop-filter: blur(8px);
+          border: 1px solid rgba(255,255,255,0.2);
+          border-radius: 22px;
+          transition: all 0.2s ease;
+        }
+        
+        #uvf-settings-btn:hover {
+          background: rgba(255,255,255,0.25);
+          transform: scale(1.05);
+        }
+        
+        #uvf-settings-btn svg {
+          width: 20px;
+          height: 20px;
+          fill: #fff;
+        }
+        
         /* Essential controls in right section - Settings, PiP, and Fullscreen only */
         .uvf-right-controls > *:not(#uvf-settings-btn):not(#uvf-fullscreen-btn):not(#uvf-pip-btn) {
           display: none;
         }
         
+        /* Make sure right controls are properly spaced */
+        .uvf-right-controls {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          flex-shrink: 0;
+        }
+        
         /* Hide skip buttons on small mobile devices to save space */
         @media screen and (max-width: 480px) {
           #uvf-skip-back,
@@ -4541,20 +4480,13 @@ export class WebPlayer extends BasePlayer {
     epgBtn.style.display = 'none'; // Initially hidden, will be shown when EPG data is available
     rightControls.appendChild(epgBtn);
     
-    // PiP button - conditionally add based on support
+    // PiP button
     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>';
-    
-    // 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');
-    }
+    rightControls.appendChild(pipBtn);
     
     // Fullscreen button
     const fullscreenBtn = document.createElement('button');
@@ -5823,49 +5755,15 @@ 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 (this.isPictureInPictureActive()) {
+      if ((document as any).pictureInPictureElement) {
         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) {
-      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');
-      }
+      console.error('PiP toggle failed:', error);
     }
   }