unified-video-framework 1.4.120 → 1.4.122

package/packages/web/src/WebPlayer.ts

@@ -113,7 +113,7 @@ export class WebPlayer extends BasePlayer {
     const videoContainer = document.createElement('div');
     videoContainer.className = 'uvf-video-container';
 
-    // Create video element
+    // Create video element with enhanced mobile optimization
     this.video = document.createElement('video');
     this.video.className = 'uvf-video';
     this.video.controls = false; // We'll use custom controls
@@ -123,6 +123,26 @@ export class WebPlayer extends BasePlayer {
     this.video.playsInline = this.config.playsInline ?? true;
     this.video.preload = this.config.preload ?? 'metadata';
     
+    // Enhanced mobile attributes
+    this.video.setAttribute('webkit-playsinline', 'true');
+    this.video.setAttribute('playsinline', 'true');
+    this.video.setAttribute('x-webkit-airplay', 'allow');
+    this.video.setAttribute('disablepictureinpicture', 'false');
+    
+    // Mobile-specific video attributes for better performance
+    this.video.style.objectFit = 'contain';
+    this.video.style.objectPosition = 'center';
+    this.video.style.backgroundColor = '#000';
+    
+    // Touch and interaction optimizations
+    this.video.style.touchAction = 'manipulation';
+    (this.video.style as any).webkitTouchCallout = 'none';
+    (this.video.style as any).webkitTapHighlightColor = 'transparent';
+    
+    // Hardware acceleration
+    this.video.style.transform = 'translateZ(0)';
+    this.video.style.willChange = 'transform';
+    
     if (this.config.crossOrigin) {
       this.video.crossOrigin = this.config.crossOrigin;
     }
@@ -1793,20 +1813,160 @@ 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 {
-        display: block;
-        max-width: 100%;
-        max-height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
         background: #000;
         object-fit: contain;
         object-position: center;
+        
+        /* Enhanced mobile optimization */
+        -webkit-playsinline: true;
+        playsinline: true;
+        
+        /* Prevent unwanted interactions on mobile */
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        
+        /* Smooth rendering and hardware acceleration */
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        will-change: transform;
+        
+        /* Touch action optimization */
+        touch-action: manipulation;
+        
+        /* Prevent context menu on long press */
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: transparent;
+        
+        /* Ensure consistent rendering across browsers */
+        image-rendering: -webkit-optimize-contrast;
+        image-rendering: crisp-edges;
+      }
+      
+      /* Enhanced mobile-specific video optimizations with safe areas */
+      @media screen and (max-width: 767px) {
+        .uvf-video {
+          /* Safe area considerations for video content */
+          margin-top: env(safe-area-inset-top, 0px);
+          margin-bottom: env(safe-area-inset-bottom, 0px);
+          margin-left: env(safe-area-inset-left, 0px);
+          margin-right: env(safe-area-inset-right, 0px);
+          
+          /* Adjust video area to account for safe zones */
+          max-height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
+          max-width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
+          
+          /* Enhanced object positioning for mobile */
+          object-position: center center;
+          
+          /* Prevent video stretching on mobile */
+          min-width: 0;
+          min-height: 0;
+          
+          /* Mobile-specific rendering optimizations */
+          -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+          
+          /* Optimize for mobile performance */
+          backface-visibility: hidden;
+          -webkit-backface-visibility: hidden;
+          
+          /* Prevent video from being affected by orientation changes */
+          -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+        }
+        
+        /* Portrait orientation specific adjustments */
+        @media (orientation: portrait) {
+          .uvf-video {
+            /* Ensure video doesn't get cut off in portrait */
+            max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px);
+          }
+        }
+        
+        /* Landscape orientation specific adjustments */
+        @media (orientation: landscape) {
+          .uvf-video {
+            /* Full height usage in landscape mode */
+            max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 80px);
+            max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
+          }
+        }
+        
+        /* High DPI display optimizations */
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+          .uvf-video {
+            /* Enhanced rendering for retina displays */
+            image-rendering: -webkit-optimize-contrast;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+          }
+        }
+        
+        /* iOS Safari specific video optimizations */
+        @supports (-webkit-appearance: none) {
+          .uvf-video {
+            /* iOS-specific video handling */
+            -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+            
+            /* Prevent iOS Safari video rendering issues */
+            -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+            
+            /* iOS safe area integration */
+            padding-top: env(safe-area-inset-top, 0px);
+            padding-bottom: env(safe-area-inset-bottom, 0px);
+            padding-left: env(safe-area-inset-left, 0px);
+            padding-right: env(safe-area-inset-right, 0px);
+            
+            /* Account for padding in dimensions */
+            box-sizing: border-box;
+            height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
+            width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
+          }
+        }
+        
+        /* Android Chrome specific optimizations */
+        @media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1) {
+          .uvf-video {
+            /* Android-specific optimizations */
+            -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+            
+            /* Handle Android navigation gestures */
+            margin-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
+          }
+        }
+      }
+      
+      /* Video fullscreen enhancements */
+      .uvf-player-wrapper.uvf-fullscreen .uvf-video {
+        /* Fullscreen-specific video optimizations */
+        width: 100vw !important;
+        height: 100vh !important;
+        max-width: 100vw;
+        max-height: 100vh;
+        
+        /* Account for safe areas in fullscreen */
+        padding-top: env(safe-area-inset-top, 0px);
+        padding-bottom: env(safe-area-inset-bottom, 0px);
+        padding-left: env(safe-area-inset-left, 0px);
+        padding-right: env(safe-area-inset-right, 0px);
+        box-sizing: border-box;
+        
+        /* Optimize fullscreen rendering */
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        will-change: transform;
       }
       
       .uvf-watermark-layer {
@@ -2966,158 +3126,70 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
-      /* Mobile-First Responsive Video Player Layout */
-      
-      /* Mobile devices (all orientations) - Base mobile styles */
-      @media screen and (max-width: 767px) {
-        /* Force full viewport usage with proper safe area handling */
+      /* 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) {
         .uvf-responsive-container {
-          position: fixed !important;
-          top: 0;
-          left: 0;
+          padding: 0;
           width: 100vw !important;
-          height: 100vh !important;
-          height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
+          height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
           margin: 0;
-          padding: 0;
+          position: relative;
           overflow: hidden;
-          z-index: 1000;
         }
         
-        /* Modern viewport support */
         @supports (height: 100dvh) {
           .uvf-responsive-container {
-            height: 100dvh !important;
-            height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
+            height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
           }
         }
         
-        /* Player wrapper fills container completely */
         .uvf-responsive-container .uvf-player-wrapper {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100% !important;
+          width: 100vw !important;
           height: 100% !important;
-          max-width: none;
-          max-height: none;
-          display: flex;
-          flex-direction: column;
+          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));
+          }
         }
         
-        /* Video container optimized for mobile centering */
         .uvf-responsive-container .uvf-video-container {
-          position: relative;
-          width: 100% !important;
+          width: 100vw !important;
           height: 100% !important;
-          flex: 1;
           aspect-ratio: unset !important;
-          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;
+          min-height: inherit;
         }
         
-        /* Mobile controls positioned with safe areas */
+        /* Enhanced mobile controls bar with safe area padding */
         .uvf-controls-bar {
-          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);
+          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%);
           box-sizing: border-box;
-          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;
+          z-index: 1000;
         }
         
-        /* 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-optimized controls layout */
+        /* Mobile-first responsive controls layout */
         .uvf-controls-row {
-          display: flex;
+          gap: 8px;
+          flex-wrap: nowrap;
           align-items: center;
           justify-content: space-between;
-          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;
+          width: 100%;
         }
         
         /* Left side controls group */
@@ -3245,68 +3317,26 @@ export class WebPlayer extends BasePlayer {
           display: none !important;
         }
         
-        /* Enhanced mobile settings menu */
+        /* Settings menu - hidden by default, accessible via menu */
         .uvf-settings-menu {
-          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;
+          min-width: 160px;
+          bottom: 60px;
+          right: 12px;
           font-size: 14px;
-          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;
+          max-height: 50vh;
         }
         
-        /* Touch-optimized settings options */
         .uvf-settings-option {
-          padding: 16px 20px;
-          font-size: 16px;
-          min-height: 56px;
+          padding: 12px 16px;
+          font-size: 14px;
+          min-height: 44px;
           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:focus {
+        .uvf-settings-option:hover {
           background: rgba(255,255,255,0.15);
-        }
-        
-        .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;
+          padding-left: 20px;
         }
         
         /* Simplified settings - hide complex options */
@@ -3447,46 +3477,11 @@ 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,