unified-video-framework 1.4.163 → 1.4.165

package/packages/web/src/WebPlayer.ts

@@ -51,6 +51,9 @@ export class WebPlayer extends BasePlayer {
   private currentPlaybackRate = 1;
   private isDragging: boolean = false;
   
+  // Settings menu state guard to keep controls interactive while open
+  private isSettingsOpen: boolean = false;
+  
   // Settings configuration
   private settingsConfig = {
     enabled: true,        // Show settings button
@@ -4398,244 +4401,61 @@ export class WebPlayer extends BasePlayer {
       }
       
       /* Enhanced Responsive Media Queries with UX Best Practices */
-      /* Mobile Portrait Layout - CENTERED PLAYER with TOP/BOTTOM BLACK AREAS */
+      /* Mobile devices (portrait) - Enhanced UX with Safe 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;
         }
         
-        /* TOP BLACK AREA - 25% of viewport - COMPLETELY EMPTY */
-        .uvf-responsive-container::before {
-          content: '';
-          flex: 0 0 25vh;
-          background: #000;
-          pointer-events: none;
-        }
-        
-        /* 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 {
+            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 */
+          width: 100vw !important;
+          height: 100% !important;
+          min-height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
         }
         
-        /* Video container fills player wrapper */
-        .uvf-responsive-container .uvf-video-container {
-          width: 100%;
-          height: 100%;
-          position: relative;
-          background: #000;
-          border-radius: 0;
-          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));
+          }
         }
         
-        /* Video element fills container */
-        .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;
         }
         
-        /* CONTROLS STRICTLY CONTAINED WITHIN VIDEO AREA - NEVER EXTEND TO BLACK AREAS */
+        /* Enhanced mobile controls bar with safe area padding - iOS Safari specific fixes */
         .uvf-controls-bar {
           position: absolute !important;
-          /* 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;
-          /* 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%;
+          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%);
           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;
+          z-index: 1000 !important;
+          /* iOS Safari specific fixes */
+          transform: translateZ(0);
+          -webkit-transform: translateZ(0);
+          will-change: transform;
+          /* Ensure proper stacking */
+          isolation: isolate;
         }
         
         .uvf-progress-section {
@@ -6574,7 +6394,12 @@ export class WebPlayer extends BasePlayer {
       
       // Force visibility if menu is active, hide if not active
       if (settingsMenu) {
-        if (settingsMenu.classList.contains('active')) {
+        const activating = settingsMenu.classList.contains('active');
+        if (activating) {
+          this.isSettingsOpen = true;
+          // Keep controls visible and interactive while menu is open
+          this.showControls();
+          if (this.hideControlsTimeout) clearTimeout(this.hideControlsTimeout);
           settingsMenu.style.display = 'block';
           settingsMenu.style.visibility = 'visible';
           settingsMenu.style.opacity = '1';
@@ -6590,10 +6415,13 @@ export class WebPlayer extends BasePlayer {
           settingsMenu.style.padding = '10px 0';
           this.debugLog('Applied fallback styles to show menu');
         } else {
+          this.isSettingsOpen = false;
           settingsMenu.style.display = 'none';
           settingsMenu.style.visibility = 'hidden';
           settingsMenu.style.opacity = '0';
           this.debugLog('Applied fallback styles to hide menu');
+          // After closing, allow auto-hide again if playing
+          this.scheduleHideControls();
         }
       }
       
@@ -6633,6 +6461,19 @@ export class WebPlayer extends BasePlayer {
       }
     });
     
+    // Keep controls active while interacting with settings menu
+    if (settingsMenu) {
+      const keepAlive = () => {
+        if (!this.isSettingsOpen) return;
+        this.showControls();
+        if (this.hideControlsTimeout) clearTimeout(this.hideControlsTimeout);
+      };
+      settingsMenu.addEventListener('mouseenter', keepAlive);
+      settingsMenu.addEventListener('mousemove', keepAlive);
+      settingsMenu.addEventListener('touchstart', keepAlive, { passive: true } as any);
+      settingsMenu.addEventListener('touchmove', keepAlive, { passive: true } as any);
+    }
+    
     // Add Escape key handler for settings menu
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape' && settingsMenu?.classList.contains('active')) {
@@ -7284,6 +7125,8 @@ export class WebPlayer extends BasePlayer {
 
   private hideControls(): void {
     if (!this.state.isPlaying) return;
+    // Never hide controls while settings menu is open
+    if (this.isSettingsOpen) return;
     
     const wrapper = this.container?.querySelector('.uvf-player-wrapper');
     if (wrapper) {
@@ -7294,12 +7137,14 @@ export class WebPlayer extends BasePlayer {
 
   private scheduleHideControls(): void {
     if (!this.state.isPlaying) return;
+    // Do not schedule auto-hide while settings are open
+    if (this.isSettingsOpen) return;
     
     if (this.hideControlsTimeout) clearTimeout(this.hideControlsTimeout);
     // Use longer timeout in fullscreen for better UX
     const timeout = this.isFullscreen() ? 4000 : 3000;
     this.hideControlsTimeout = setTimeout(() => {
-      if (this.state.isPlaying && !this.controlsContainer?.matches(':hover')) {
+      if (this.state.isPlaying && !this.controlsContainer?.matches(':hover') && !this.isSettingsOpen) {
         this.hideControls();
       }
     }, timeout);
@@ -8508,6 +8353,7 @@ export class WebPlayer extends BasePlayer {
     if (!settingsMenu) return;
     
     settingsMenu.classList.remove('active');
+    this.isSettingsOpen = false;
     
     // Apply fallback styles to ensure menu is hidden
     settingsMenu.style.display = 'none';
@@ -8520,6 +8366,8 @@ export class WebPlayer extends BasePlayer {
     });
     
     this.debugLog('Settings menu hidden via hideSettingsMenu()');
+    // Resume auto-hide if appropriate
+    this.scheduleHideControls();
   }
 
   /**