unified-video-framework 1.4.161 → 1.4.163

package/packages/web/src/WebPlayer.ts

@@ -4329,138 +4329,6 @@ export class WebPlayer extends BasePlayer {
       @media screen and (max-width: 767px) {
         html, body {
           overflow-x: hidden;
-          background: #000;
-        }
-        
-        /* Mobile Portrait Layout - Centered Player with Top/Bottom Black Areas */
-        @media screen and (orientation: portrait) {
-          .uvf-responsive-container {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            height: 100dvh;
-            background: #000;
-            overflow: hidden;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-          }
-          
-          /* Top black area - 25% of viewport */
-          .uvf-responsive-container::before {
-            content: '';
-            flex: 0 0 25vh;
-            background: #000;
-            pointer-events: none;
-          }
-          
-          /* Bottom black area - 25% of viewport */
-          .uvf-responsive-container::after {
-            content: '';
-            flex: 0 0 25vh;
-            background: #000;
-            pointer-events: none;
-          }
-          
-          /* Centered video player wrapper - 50% of viewport */
-          .uvf-responsive-container .uvf-player-wrapper {
-            flex: 1;
-            width: 100vw;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #000;
-            position: relative;
-          }
-          
-          /* Video container fills player wrapper */
-          .uvf-responsive-container .uvf-video-container {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            background: #000;
-            border-radius: 0;
-            overflow: hidden;
-          }
-          
-          /* Video element fills container */
-          .uvf-responsive-container .uvf-video {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-            background: #000;
-          }
-          
-          /* All controls positioned inside video container */
-          .uvf-controls-bar {
-            position: absolute !important;
-            bottom: 0 !important;
-            left: 0 !important;
-            right: 0 !important;
-            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
-            padding: 12px 16px;
-            padding-bottom: calc(12px + var(--uvf-safe-area-bottom));
-            z-index: 1000;
-            /* Ensure hardware acceleration */
-            -webkit-transform: translate3d(0,0,0);
-            transform: translate3d(0,0,0);
-          }
-          
-          /* Progress section */
-          .uvf-progress-section {
-            width: 100%;
-            margin-bottom: 8px;
-          }
-          
-          /* Controls row alignment */
-          .uvf-controls-row {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            gap: 12px;
-          }
-          
-          /* Right controls */
-          .uvf-right-controls {
-            margin-left: auto;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-          }
-          
-          /* Center play button positioned within video */
-          .uvf-center-play-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 8;
-            pointer-events: none;
-          }
-          
-          .uvf-center-play-btn {
-            pointer-events: auto;
-          }
-          
-          /* Top controls within video */
-          .uvf-top-controls {
-            position: absolute;
-            top: calc(12px + var(--uvf-safe-area-top));
-            right: calc(16px + var(--uvf-safe-area-right));
-            z-index: 9;
-          }
-          
-          /* Title bar within video */
-          .uvf-title-bar {
-            position: absolute;
-            top: calc(12px + var(--uvf-safe-area-top));
-            left: calc(16px + var(--uvf-safe-area-left));
-            right: calc(80px + var(--uvf-safe-area-right));
-            z-index: 9;
-            padding: 8px 0;
-          }
         }
         
         .uvf-player-wrapper {
@@ -4484,37 +4352,6 @@ export class WebPlayer extends BasePlayer {
           transform: translateZ(0);
         }
         
-        /* Mobile controls optimization for touch */
-        .uvf-control-btn {
-          min-width: 44px;
-          min-height: 44px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 50%;
-          transition: all 0.2s ease;
-          background: rgba(255, 255, 255, 0.1);
-          backdrop-filter: blur(8px);
-        }
-        
-        .uvf-control-btn:active {
-          transform: scale(0.95);
-          background: rgba(255, 255, 255, 0.2);
-        }
-        
-        /* Play/pause button prominence */
-        .uvf-control-btn.play-pause {
-          background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
-          min-width: 52px;
-          min-height: 52px;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-        }
-        
-        .uvf-control-btn.play-pause:active {
-          transform: scale(0.92);
-          box-shadow: 0 1px 4px rgba(0,0,0,0.4);
-        }
-        
         /* Fix for controls being cut off by virtual keyboard */
         .uvf-controls-bar {
           position: absolute !important;
@@ -4561,61 +4398,244 @@ export class WebPlayer extends BasePlayer {
       }
       
       /* Enhanced Responsive Media Queries with UX Best Practices */
-      /* Mobile devices (portrait) - Enhanced UX with Safe Areas */
+      /* Mobile Portrait Layout - CENTERED PLAYER with TOP/BOTTOM BLACK AREAS */
       @media screen and (max-width: 767px) and (orientation: portrait) {
+        /* CENTERED LAYOUT: 25% top black + 50% player + 25% bottom black */
         .uvf-responsive-container {
+          display: flex;
+          flex-direction: column;
+          height: 100vh;
+          height: 100dvh;
+          background: #000;
+          overflow: hidden;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
           padding: 0;
-          width: 100vw !important;
-          height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
           margin: 0;
-          position: relative;
-          overflow: hidden;
         }
         
-        @supports (height: 100dvh) {
-          .uvf-responsive-container {
-            height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
-          }
+        /* TOP BLACK AREA - 25% of viewport - COMPLETELY EMPTY */
+        .uvf-responsive-container::before {
+          content: '';
+          flex: 0 0 25vh;
+          background: #000;
+          pointer-events: none;
         }
         
-        .uvf-responsive-container .uvf-player-wrapper {
-          width: 100vw !important;
-          height: 100% !important;
-          min-height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+        /* BOTTOM BLACK AREA - 25% of viewport - COMPLETELY EMPTY */
+        .uvf-responsive-container::after {
+          content: '';
+          flex: 0 0 25vh;
+          background: #000;
+          pointer-events: none;
         }
         
-        @supports (height: 100dvh) {
-          .uvf-responsive-container .uvf-player-wrapper {
-            min-height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
-          }
+        /* CENTERED VIDEO PLAYER WRAPPER - 50% of viewport */
+        .uvf-responsive-container .uvf-player-wrapper {
+          flex: 1; /* Takes remaining 50% */
+          width: 100vw;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #000;
+          position: relative;
+          overflow: hidden; /* CRITICAL: Ensure nothing extends beyond this area */
         }
         
+        /* Video container fills player wrapper */
         .uvf-responsive-container .uvf-video-container {
-          width: 100vw !important;
-          height: 100% !important;
-          aspect-ratio: unset !important;
-          min-height: inherit;
+          width: 100%;
+          height: 100%;
+          position: relative;
+          background: #000;
+          border-radius: 0;
+          overflow: hidden;
+        }
+        
+        /* Video element fills container */
+        .uvf-responsive-container .uvf-video {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          background: #000;
         }
         
-        /* Enhanced mobile controls bar with safe area padding - iOS Safari specific fixes */
+        /* CONTROLS STRICTLY CONTAINED WITHIN VIDEO AREA - NEVER EXTEND TO BLACK AREAS */
         .uvf-controls-bar {
           position: absolute !important;
-          bottom: 0 !important;
-          left: 0 !important;
-          right: 0 !important;
-          padding: 16px 12px;
-          padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px));
-          padding-left: calc(12px + var(--uvf-safe-area-left, 0px));
-          padding-right: calc(12px + var(--uvf-safe-area-right, 0px));
-          background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 80%, var(--uvf-overlay-transparent) 100%);
+          /* Keep controls INSIDE video container with margins from all edges */
+          bottom: 20px !important; /* 20px margin from video bottom */
+          left: 16px !important;   /* 16px margin from video left */
+          right: 16px !important;  /* 16px margin from video right */
+          top: auto !important;
+          background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
+          padding: 12px 16px;
+          border-radius: 12px;
+          z-index: 1000;
+          /* Ensure controls are visible and contained */
+          opacity: 1 !important;
+          visibility: visible !important;
+          display: flex !important;
+          flex-direction: column !important;
+          /* Hardware acceleration */
+          -webkit-transform: translate3d(0,0,0);
+          transform: translate3d(0,0,0);
+          /* CRITICAL: Prevent any overflow into black areas */
+          max-height: calc(100% - 40px); /* Leave 20px margin from top and bottom */
+          max-width: calc(100% - 32px);  /* Leave 16px margin from left and right */
           box-sizing: border-box;
-          z-index: 1000 !important;
-          /* iOS Safari specific fixes */
-          transform: translateZ(0);
-          -webkit-transform: translateZ(0);
-          will-change: transform;
-          /* Ensure proper stacking */
-          isolation: isolate;
+          /* Visual containment indicators */
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(10px);
+          contain: layout style paint; /* CSS containment */
+        }
+        
+        /* Force controls and all child elements to stay within video container */
+        .uvf-responsive-container .uvf-controls-bar {
+          opacity: 1 !important;
+          visibility: visible !important;
+          transform: translateY(0) !important;
+          pointer-events: auto !important;
+          /* Ensure no child elements extend beyond container */
+          contain: layout style paint;
+        }
+        
+        /* Ensure all child elements of controls stay within bounds */
+        .uvf-responsive-container .uvf-controls-bar * {
+          max-width: 100%;
+          box-sizing: border-box;
+        }
+        
+        /* Progress section contained within controls */
+        .uvf-progress-section {
+          width: 100%;
+          margin-bottom: 8px;
+          opacity: 1 !important;
+          visibility: visible !important;
+          display: block !important;
+        }
+        
+        /* Progress bar styling */
+        .uvf-progress-bar-wrapper {
+          opacity: 1 !important;
+          visibility: visible !important;
+        }
+        
+        .uvf-progress-bar {
+          height: 4px;
+          background: rgba(255, 255, 255, 0.3);
+          border-radius: 2px;
+        }
+        
+        .uvf-progress-filled {
+          background: var(--uvf-accent-1, #8B5CF6);
+          height: 100%;
+          border-radius: 2px;
+        }
+        
+        /* Controls row alignment - ensure visibility */
+        .uvf-controls-row {
+          width: 100%;
+          display: flex !important;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 12px;
+          opacity: 1 !important;
+          visibility: visible !important;
+          margin-top: 8px;
+        }
+        
+        /* Time display visibility */
+        .uvf-time-display {
+          color: #fff;
+          font-size: 12px;
+          font-weight: 500;
+          opacity: 1 !important;
+          visibility: visible !important;
+          display: block !important;
+        }
+        
+        /* Control buttons visibility */
+        .uvf-control-btn {
+          min-width: 44px;
+          min-height: 44px;
+          display: flex !important;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(8px);
+          color: #fff;
+          opacity: 1 !important;
+          visibility: visible !important;
+          transition: all 0.2s ease;
+        }
+        
+        .uvf-control-btn:active {
+          transform: scale(0.95);
+          background: rgba(255, 255, 255, 0.2);
+        }
+        
+        /* Play/pause button prominence */
+        .uvf-control-btn.play-pause {
+          background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
+          min-width: 52px;
+          min-height: 52px;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
+        
+        .uvf-control-btn.play-pause:active {
+          transform: scale(0.92);
+          box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+        }
+        
+        .uvf-control-btn svg {
+          fill: #fff;
+          opacity: 1;
+        }
+        
+        /* Right controls */
+        .uvf-right-controls {
+          margin-left: auto;
+          display: flex !important;
+          align-items: center;
+          gap: 8px;
+          opacity: 1 !important;
+          visibility: visible !important;
+        }
+        
+        /* Center play button positioned within video */
+        .uvf-center-play-container {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 8;
+          pointer-events: none;
+        }
+        
+        .uvf-center-play-btn {
+          pointer-events: auto;
+        }
+        
+        /* Top controls within video */
+        .uvf-top-controls {
+          position: absolute;
+          top: calc(12px + var(--uvf-safe-area-top));
+          right: calc(16px + var(--uvf-safe-area-right));
+          z-index: 9;
+        }
+        
+        /* Title bar within video */
+        .uvf-title-bar {
+          position: absolute;
+          top: calc(12px + var(--uvf-safe-area-top));
+          left: calc(16px + var(--uvf-safe-area-left));
+          right: calc(80px + var(--uvf-safe-area-right));
+          z-index: 9;
+          padding: 8px 0;
         }
         
         .uvf-progress-section {
@@ -4996,69 +5016,55 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
-      /* Mobile devices (landscape) - Fullscreen with controls inside video */
+      /* Mobile devices (landscape) - Optimized for fullscreen viewing with safe areas */
       @media screen and (max-width: 767px) and (orientation: landscape) {
         .uvf-responsive-container {
-          position: fixed;
-          top: 0;
-          left: 0;
           width: 100vw !important;
-          height: 100vh !important;
-          height: 100dvh !important;
-          background: #000;
-          z-index: 9999;
-          display: block; /* Override portrait flexbox */
+          height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
           margin: 0;
           padding: 0;
+          position: relative;
           overflow: hidden;
         }
         
-        /* Remove pseudo-elements in landscape */
-        .uvf-responsive-container::before,
-        .uvf-responsive-container::after {
-          display: none !important;
+        @supports (height: 100dvh) {
+          .uvf-responsive-container {
+            height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+          }
         }
         
         .uvf-responsive-container .uvf-player-wrapper {
           width: 100vw !important;
-          height: 100vh !important;
-          height: 100dvh !important;
-          position: relative;
-          display: block;
+          height: 100% !important;
+          min-height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
         }
         
-        .uvf-responsive-container .uvf-video-container {
-          width: 100vw !important;
-          height: 100vh !important;
-          height: 100dvh !important;
-          position: relative;
-          background: #000;
-          overflow: hidden;
+        @supports (height: 100dvh) {
+          .uvf-responsive-container .uvf-player-wrapper {
+            min-height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+          }
         }
         
-        .uvf-responsive-container .uvf-video {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-          background: #000;
+        .uvf-responsive-container .uvf-video-container {
+          width: 100vw !important;
+          height: 100% !important;
+          aspect-ratio: unset !important;
+          min-height: inherit;
         }
         
-        /* Compact controls for landscape - positioned inside video container */
+        /* Compact controls for landscape with safe area padding */
         .uvf-controls-bar {
-          position: absolute !important;
-          bottom: 0 !important;
-          left: 0 !important;
-          right: 0 !important;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
           padding: 10px 12px;
           padding-bottom: calc(10px + 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, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
+          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: 1000;
-          /* Ensure hardware acceleration */
-          -webkit-transform: translate3d(0,0,0);
-          transform: translate3d(0,0,0);
         }
         
         .uvf-progress-section {
@@ -5094,36 +5100,16 @@ export class WebPlayer extends BasePlayer {
           height: 22px;
         }
         
-        /* Compact top controls with safe area padding - inside video container */
+        /* Compact top controls with safe area padding */
         .uvf-top-controls {
-          position: absolute;
           top: calc(8px + var(--uvf-safe-area-top));
           right: calc(12px + var(--uvf-safe-area-right));
           gap: 6px;
-          z-index: 9;
-        }
-        
-        /* Center play button positioned within video container */
-        .uvf-center-play-container {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          z-index: 8;
-          pointer-events: none;
-        }
-        
-        .uvf-center-play-btn {
-          pointer-events: auto;
         }
         
         .uvf-title-bar {
-          position: absolute;
-          top: calc(8px + var(--uvf-safe-area-top));
-          left: calc(12px + var(--uvf-safe-area-left));
-          right: calc(80px + var(--uvf-safe-area-right));
-          z-index: 9;
-          padding: 8px 0;
+          padding: 8px 12px;
+          padding-top: calc(8px + var(--uvf-safe-area-top));
           padding-left: calc(12px + var(--uvf-safe-area-left));
           padding-right: calc(12px + var(--uvf-safe-area-right));
         }