unified-video-framework 1.4.167 → 1.4.169

package/packages/web/src/WebPlayer.ts

@@ -4058,168 +4058,118 @@ export class WebPlayer extends BasePlayer {
         pointer-events: none;
       }
       
-      /* Fullscreen specific styles */
-      .uvf-player-wrapper.uvf-fullscreen {
-        position: fixed !important;
-        top: 0 !important;
-        left: 0 !important;
-        width: 100vw !important;
-        height: 100vh !important;
-        z-index: 2147483647;
-        background: #000;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
-        width: 100vw !important;
-        height: 100vh !important;
-        max-width: none !important;
-        max-height: none !important;
-        aspect-ratio: unset !important;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-video {
-        width: 100vw !important;
-        height: 100vh !important;
-      }
-      
-      /* Maintain consistent control sizing in fullscreen */
-      .uvf-player-wrapper.uvf-fullscreen .uvf-control-btn {
-        width: 40px;
-        height: 40px;
-        min-width: 40px;
-        min-height: 40px;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause {
-        width: 50px;
-        height: 50px;
-        min-width: 50px;
-        min-height: 50px;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-control-btn svg {
-        width: 20px;
-        height: 20px;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause svg {
-        width: 24px;
-        height: 24px;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-top-btn {
-        width: 40px;
-        height: 40px;
-        min-width: 40px;
-        min-height: 40px;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-top-btn svg {
-        width: 20px;
-        height: 20px;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-time-display {
-        font-size: 14px;
-        padding: 0 10px;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn {
-        width: 64px;
-        height: 64px;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn svg {
-        width: 28px;
-        height: 28px;
-      }
-      
-      /* Ensure overlays remain visible in fullscreen with consistent spacing */
-      .uvf-player-wrapper.uvf-fullscreen .uvf-title-bar,
-      .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
-      .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
-      .uvf-player-wrapper.uvf-fullscreen .uvf-top-gradient,
-      .uvf-player-wrapper.uvf-fullscreen .uvf-controls-gradient {
-        z-index: 2147483647; /* Maximum z-index value */
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
-        padding: 20px 30px; /* More generous padding in fullscreen */
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-controls-row {
-        gap: 15px; /* Consistent gap in fullscreen */
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-title-bar {
-        padding: 20px 30px;
-      }
-      
-      .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls {
-        top: 20px;
-        right: 30px;
-        gap: 10px;
-      }
-      
-      /* Fullscreen hover and visibility states */
-      .uvf-player-wrapper.uvf-fullscreen:hover .uvf-title-bar,
-      .uvf-player-wrapper.uvf-fullscreen:hover .uvf-top-controls,
-      .uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-title-bar,
-      .uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-top-controls {
-        opacity: 1;
-        transform: translateY(0);
-      }
-      
-      /* Fullscreen mobile responsive adjustments */
-      @media screen and (max-width: 767px) {
-        .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
-          padding: 15px 20px;
+      /* Fullscreen specific styles - DESKTOP AND LANDSCAPE ONLY */
+      /* Mobile portrait uses Material You layout in fullscreen */
+      @media not all and (max-width: 767px) and (orientation: portrait) {
+        .uvf-player-wrapper.uvf-fullscreen {
+          position: fixed !important;
+          top: 0 !important;
+          left: 0 !important;
+          width: 100vw !important;
+          height: 100vh !important;
+          z-index: 2147483647;
+          background: #000;
         }
         
-        .uvf-player-wrapper.uvf-fullscreen .uvf-title-bar {
-          padding: 15px 20px;
+        .uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
+          width: 100vw !important;
+          height: 100vh !important;
+          max-width: none !important;
+          max-height: none !important;
+          aspect-ratio: unset !important;
         }
         
-        .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls {
-          top: 15px;
-          right: 20px;
+        .uvf-player-wrapper.uvf-fullscreen .uvf-video {
+          width: 100vw !important;
+          height: 100vh !important;
         }
         
-        /* Mobile controls in fullscreen - slightly larger than normal mobile */
+        /* Maintain consistent control sizing in fullscreen - DESKTOP/LANDSCAPE ONLY */
         .uvf-player-wrapper.uvf-fullscreen .uvf-control-btn {
-          width: 36px;
-          height: 36px;
-          min-width: 36px;
-          min-height: 36px;
+          width: 40px;
+          height: 40px;
+          min-width: 40px;
+          min-height: 40px;
         }
         
         .uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause {
-          width: 44px;
-          height: 44px;
-          min-width: 44px;
-          min-height: 44px;
+          width: 50px;
+          height: 50px;
+          min-width: 50px;
+          min-height: 50px;
         }
         
         .uvf-player-wrapper.uvf-fullscreen .uvf-control-btn svg {
-          width: 18px;
-          height: 18px;
+          width: 20px;
+          height: 20px;
         }
         
         .uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause svg {
-          width: 22px;
-          height: 22px;
+          width: 24px;
+          height: 24px;
         }
         
         .uvf-player-wrapper.uvf-fullscreen .uvf-top-btn {
-          width: 36px;
-          height: 36px;
-          min-width: 36px;
-          min-height: 36px;
+          width: 40px;
+          height: 40px;
+          min-width: 40px;
+          min-height: 40px;
         }
         
         .uvf-player-wrapper.uvf-fullscreen .uvf-top-btn svg {
-          width: 18px;
-          height: 18px;
+          width: 20px;
+          height: 20px;
+        }
+        
+        .uvf-player-wrapper.uvf-fullscreen .uvf-time-display {
+          font-size: 14px;
+          padding: 0 10px;
+        }
+        
+        .uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn {
+          width: 64px;
+          height: 64px;
+        }
+        
+        .uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn svg {
+          width: 28px;
+          height: 28px;
+        }
+        
+        /* Ensure overlays remain visible in fullscreen with consistent spacing */
+        .uvf-player-wrapper.uvf-fullscreen .uvf-title-bar,
+        .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
+        .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
+        .uvf-player-wrapper.uvf-fullscreen .uvf-top-gradient,
+        .uvf-player-wrapper.uvf-fullscreen .uvf-controls-gradient {
+          z-index: 2147483647; /* Maximum z-index value */
+        }
+        
+        .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
+          padding: 20px 30px; /* More generous padding in fullscreen */
+        }
+        
+        .uvf-player-wrapper.uvf-fullscreen .uvf-controls-row {
+          gap: 15px; /* Consistent gap in fullscreen */
+        }
+        
+        .uvf-player-wrapper.uvf-fullscreen .uvf-title-bar {
+          padding: 20px 30px;
+        }
+        
+        .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls {
+          top: 20px;
+          right: 30px;
+          gap: 10px;
+        }
+        
+        /* Fullscreen hover and visibility states */
+        .uvf-player-wrapper.uvf-fullscreen:hover .uvf-title-bar,
+        .uvf-player-wrapper.uvf-fullscreen:hover .uvf-top-controls,
+        .uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-title-bar,
+        .uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-top-controls {
+          opacity: 1;
+          transform: translateY(0);
         }
       }
       
@@ -4251,151 +4201,15 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
-      /* iOS Safari specific fixes - address bar handling and control positioning */
+      /* iOS Safari specific fixes - fullscreen only */
       @supports (-webkit-appearance: none) {
         .uvf-player-wrapper.uvf-fullscreen,
         .uvf-video-container.uvf-fullscreen {
           height: -webkit-fill-available;
           min-height: -webkit-fill-available;
         }
-        
-        /* Handle iOS Safari's dynamic address bar */
-        @media screen and (max-width: 767px) {
-          .uvf-responsive-container {
-            height: -webkit-fill-available;
-            min-height: 100vh;
-          }
-          
-          .uvf-player-wrapper {
-            height: -webkit-fill-available;
-            min-height: 100vh;
-            /* Fix for iOS Safari control overlay positioning */
-            position: relative;
-            overflow: hidden;
-          }
-          
-          /* iOS Safari specific fixes for control positioning */
-          .uvf-controls-bar {
-            position: absolute !important;
-            bottom: 0 !important;
-            left: 0 !important;
-            right: 0 !important;
-            /* Ensure hardware acceleration */
-            -webkit-transform: translate3d(0,0,0);
-            transform: translate3d(0,0,0);
-            /* Prevent any webkit transforms that could cause positioning issues */
-            -webkit-perspective: 1000;
-            perspective: 1000;
-          }
-          
-          /* Ensure all control elements use hardware acceleration */
-          .uvf-control-btn,
-          .uvf-progress-bar,
-          .uvf-progress-section {
-            -webkit-transform: translateZ(0);
-            transform: translateZ(0);
-          }
-        }
       }
       
-      /* Android Chrome specific fixes */
-      @supports (display: -webkit-box) {
-        .uvf-responsive-container {
-          min-height: 100vh;
-        }
-        
-        /* Fix for Android Chrome's address bar behavior */
-        @media screen and (max-width: 767px) {
-          .uvf-video-container {
-            min-height: calc(100vh - 56px); /* Chrome mobile address bar height */
-          }
-        }
-      }
-      
-      /* Samsung Internet Browser fixes */
-      @media screen and (-webkit-min-device-pixel-ratio: 1) {
-        @media screen and (max-width: 767px) {
-          .uvf-responsive-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-          }
-        }
-      }
-      
-      /* Universal mobile fixes for all browsers */
-      @media screen and (max-width: 767px) {
-        html, body {
-          overflow-x: hidden;
-        }
-        
-        .uvf-player-wrapper {
-          /* Prevent scroll bounce on iOS */
-          -webkit-overflow-scrolling: touch;
-          overflow: hidden;
-          
-          /* Prevent zoom on double tap */
-          touch-action: manipulation;
-        }
-        
-        .uvf-video {
-          /* Prevent video from being selectable */
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          -ms-user-select: none;
-          user-select: none;
-          
-          /* Ensure hardware acceleration */
-          -webkit-transform: translateZ(0);
-          transform: translateZ(0);
-        }
-        
-        /* Fix for controls being cut off by virtual keyboard */
-        .uvf-controls-bar {
-          position: absolute !important;
-          bottom: 0 !important;
-          left: 0 !important;
-          right: 0 !important;
-          /* Remove fixed positioning that causes issues on iOS Safari */
-          z-index: 1000 !important;
-          transform: translateZ(0); /* Force hardware acceleration */
-        }
-        
-        /* Ensure controls stay above virtual keyboards */
-        @supports (bottom: env(keyboard-inset-height)) {
-          .uvf-controls-bar {
-            bottom: max(0px, env(keyboard-inset-height, 0)) !important;
-            padding-bottom: calc(16px + max(var(--uvf-safe-area-bottom, 0), env(keyboard-inset-height, 0))) !important;
-          }
-        }
-        
-        /* Hide PiP button on mobile - not supported on most mobile browsers */
-        #uvf-pip-btn {
-          display: none !important;
-        }
-        
-        /* Mobile fullscreen enhancements */
-        .uvf-player-wrapper.uvf-fullscreen {
-          /* Ensure fullscreen covers entire viewport on mobile */
-          position: fixed !important;
-          top: 0 !important;
-          left: 0 !important;
-          width: 100vw !important;
-          height: 100vh !important;
-          z-index: 2147483647 !important;
-          background: #000 !important;
-        }
-        
-        /* iOS Safari specific fullscreen fixes */
-        @supports (-webkit-appearance: none) {
-          .uvf-player-wrapper.uvf-fullscreen {
-            /* Use viewport units that work better with iOS Safari */
-            height: -webkit-fill-available !important;
-          }
-        }
-      }
       
       /* Enhanced Responsive Media Queries with UX Best Practices */
       /* Mobile devices (portrait) - Material You Design (25-50-25 Layout) */
@@ -4651,6 +4465,54 @@ export class WebPlayer extends BasePlayer {
           min-height: 48px !important;
           border-radius: 24px !important;
         }
+        
+        /* Fullscreen on mobile portrait - maintain Material You layout */
+        .uvf-player-wrapper.uvf-fullscreen,
+        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen {
+          position: fixed !important;
+          top: 0 !important;
+          left: 0 !important;
+          width: 100vw !important;
+          height: 100vh !important;
+          height: 100dvh !important;
+          z-index: 2147483647 !important;
+          display: flex !important;
+          flex-direction: column !important;
+          background: #000 !important;
+        }
+        
+        /* Video container in fullscreen - keep 50% middle */
+        .uvf-player-wrapper.uvf-fullscreen .uvf-video-container,
+        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
+          height: 50vh !important;
+          height: 50dvh !important;
+          width: 100vw !important;
+          margin-top: 25vh !important;
+          margin-top: 25dvh !important;
+          position: relative !important;
+        }
+        
+        /* Top and bottom black sections in fullscreen */
+        .uvf-player-wrapper.uvf-fullscreen::before {
+          height: 25vh !important;
+          height: 25dvh !important;
+        }
+        
+        .uvf-player-wrapper.uvf-fullscreen::after {
+          height: 25vh !important;
+          height: 25dvh !important;
+        }
+        
+        /* Controls stay in bottom 25% in fullscreen */
+        .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
+        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
+          position: absolute !important;
+          bottom: 0 !important;
+          max-height: 25vh !important;
+          max-height: 25dvh !important;
+          padding: 16px 20px !important;
+          padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px)) !important;
+        }
       }
         }