unified-video-framework 1.4.119 → 1.4.120

package/packages/web/dist/WebPlayer.js

@@ -739,87 +739,26 @@ export class WebPlayer extends BasePlayer {
             this.debugWarn('Failed to exit fullscreen:', error.message);
         }
     }
-    isPictureInPictureSupported() {
-        if (!this.video)
-            return false;
-        const hasStandardPiP = 'requestPictureInPicture' in this.video &&
-            'pictureInPictureEnabled' in document;
-        const hasSafariPiP = 'webkitSupportsPresentationMode' in this.video &&
-            typeof this.video.webkitSupportsPresentationMode === 'function' &&
-            this.video.webkitSupportsPresentationMode('picture-in-picture');
-        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);
-        const iosSupport = isIOS && isSafari && hasSafariPiP;
-        const androidChromeSupport = isAndroid && isChrome && hasStandardPiP;
-        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;
-    }
-    isMobileDevice() {
-        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() {
-        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 {
-            if ('requestPictureInPicture' in this.video) {
+            if (this.video.requestPictureInPicture) {
                 await this.video.requestPictureInPicture();
-                this.debugLog('PiP entered using standard API');
-                return;
             }
-            if ('webkitSetPresentationMode' in this.video) {
-                this.video.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.message);
+            console.error('Failed to enter PiP:', error);
             throw error;
         }
     }
     async exitPictureInPicture() {
         try {
-            const inStandardPiP = document.pictureInPictureElement;
-            const inWebkitPiP = this.video &&
-                'webkitPresentationMode' in this.video &&
-                this.video.webkitPresentationMode === 'picture-in-picture';
-            if (!inStandardPiP && !inWebkitPiP) {
-                this.debugLog('Not currently in PiP mode');
-                return;
-            }
-            if (inStandardPiP && 'exitPictureInPicture' in document) {
+            if (document.exitPictureInPicture) {
                 await document.exitPictureInPicture();
-                this.debugLog('PiP exited using standard API');
-                return;
-            }
-            if (inWebkitPiP && this.video && 'webkitSetPresentationMode' in this.video) {
-                this.video.webkitSetPresentationMode('inline');
-                this.debugLog('PiP exited using WebKit API');
-                return;
             }
         }
         catch (error) {
@@ -1529,44 +1468,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;
@@ -2687,10 +2598,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 {
@@ -2700,23 +2607,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 {
@@ -2729,38 +2619,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 */
@@ -2769,127 +2633,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));
-          }
-        }
-      }
-      
-      /* 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;
-          }
-        }
-      }
+      /* Mobile-First Responsive Video Player Layout */
       
-      /* 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 */
@@ -3017,26 +2914,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 */
@@ -3177,11 +3116,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,
@@ -4136,13 +4110,7 @@ export class WebPlayer extends BasePlayer {
         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>';
-        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);
         const fullscreenBtn = document.createElement('button');
         fullscreenBtn.className = 'uvf-control-btn';
         fullscreenBtn.id = 'uvf-fullscreen-btn';
@@ -5255,41 +5223,17 @@ export class WebPlayer extends BasePlayer {
             this.setAutoQuality(true);
         }
     }
-    isPictureInPictureActive() {
-        const inStandardPiP = !!document.pictureInPictureElement;
-        const inWebkitPiP = !!(this.video &&
-            'webkitPresentationMode' in this.video &&
-            this.video.webkitPresentationMode === 'picture-in-picture');
-        return inStandardPiP || inWebkitPiP;
-    }
     async togglePiP() {
-        if (!this.isPictureInPictureSupported()) {
-            this.showShortcutIndicator('PiP not supported');
-            this.debugWarn('PiP not supported on this device/browser');
-            return;
-        }
         try {
-            if (this.isPictureInPictureActive()) {
+            if (document.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.message;
-            this.showShortcutIndicator(`PiP Error: ${errorMessage}`);
-            this.debugError('PiP toggle failed:', errorMessage);
-            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);
         }
     }
     setupCastContextSafe() {