unified-video-framework 1.4.164 → 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,278 +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 !important; /* CRITICAL: Ensure nothing extends beyond this area */
-          /* STRICT CONTAINMENT - Force all child elements within bounds */
-          contain: layout style paint size !important;
-          isolation: isolate !important;
-          /* Create strict clipping boundary */
-          clip: rect(0, 100vw, 50vh, 0) !important;
+          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) !important; /* Leave 20px margin from top and bottom */
-          max-width: calc(100% - 32px) !important;  /* Leave 16px margin from left and right */
-          box-sizing: border-box !important;
-          /* Visual containment indicators */
-          border: 1px solid rgba(255, 255, 255, 0.1);
-          backdrop-filter: blur(10px);
-          /* STRICT CSS containment with size to prevent overflow */
-          contain: layout style paint size !important;
-          /* Absolute overflow prevention */
-          overflow: hidden !important;
-          /* Force clip to container bounds */
-          clip-path: inset(0) !important;
-        }
-        
-        /* 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;
-        }
-        
-        /* CRITICAL: Prevent ALL child elements from extending beyond controls container */
-        .uvf-responsive-container .uvf-controls-bar *,
-        .uvf-responsive-container .uvf-controls-bar *::before,
-        .uvf-responsive-container .uvf-controls-bar *::after {
-          max-width: 100% !important;
-          max-height: 100% !important;
-          overflow: hidden !important;
-          box-sizing: border-box !important;
-          position: relative !important;
-        }
-        
-        /* Ensure settings menu stays within video container bounds */
-        .uvf-responsive-container .uvf-settings-menu {
-          max-height: calc(50vh - 80px) !important; /* Video height minus controls margin */
-          max-width: calc(100vw - 64px) !important; /* Video width minus side margins */
-          overflow-y: auto !important;
-          position: absolute !important;
-          /* Keep menu within video boundaries */
-          bottom: 60px !important;
+          bottom: 0 !important;
+          left: 0 !important;
           right: 0 !important;
-          left: auto !important;
-          top: 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%;
+          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 {
@@ -6158,7 +5944,7 @@ export class WebPlayer extends BasePlayer {
       this.debugLog('Settings button NOT created - settings disabled');
     }
     
-    // EPG button (Electronic Program Guide) - Only show if EPG data is available
+    // EPG button (Electronic Program Guide)
     const epgBtn = document.createElement('button');
     epgBtn.className = 'uvf-control-btn';
     epgBtn.id = 'uvf-epg-btn';
@@ -6169,17 +5955,8 @@ export class WebPlayer extends BasePlayer {
       <rect x="19" y="3" width="2" height="2"/>
       <path d="M17 1v2h2V1h2v2h1c.55 0 1 .45 1 1v16c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h1V1h2v2h12z" fill="none" stroke="currentColor" stroke-width="0.5"/>
     </svg>`;
-    // CRITICAL: EPG button should ONLY be visible when EPG data is available
-    epgBtn.style.display = 'none !important'; // Force hidden - will only show when EPG data is loaded
-    
-    // Only add to controls if EPG functionality is enabled and data will be available
-    const epgConfig = (this.config as any).epg;
-    if (epgConfig && epgConfig.enabled) {
-      rightControls.appendChild(epgBtn);
-      this.debugLog('EPG button created but hidden - will show when EPG data is loaded');
-    } else {
-      this.debugLog('EPG button not created - EPG functionality disabled');
-    }
+    epgBtn.style.display = 'none'; // Initially hidden, will be shown when EPG data is available
+    rightControls.appendChild(epgBtn);
     
     // PiP button - only show on desktop/supported browsers
     const pipBtn = document.createElement('button');
@@ -6617,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';
@@ -6633,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();
         }
       }
       
@@ -6676,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')) {
@@ -7327,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) {
@@ -7337,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);
@@ -8551,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';
@@ -8563,6 +8366,8 @@ export class WebPlayer extends BasePlayer {
     });
     
     this.debugLog('Settings menu hidden via hideSettingsMenu()');
+    // Resume auto-hide if appropriate
+    this.scheduleHideControls();
   }
 
   /**
@@ -9143,9 +8948,8 @@ export class WebPlayer extends BasePlayer {
   public showEPGButton(): void {
     const epgBtn = document.getElementById('uvf-epg-btn');
     if (epgBtn) {
-      // Remove any forced display none and set to block
-      epgBtn.style.setProperty('display', 'block', 'important');
-      this.debugLog('EPG button shown with !important override');
+      epgBtn.style.display = 'block';
+      this.debugLog('EPG button shown');
     } else {
       this.debugLog('EPG button not found in DOM');
     }
@@ -9157,8 +8961,8 @@ export class WebPlayer extends BasePlayer {
   public hideEPGButton(): void {
     const epgBtn = document.getElementById('uvf-epg-btn');
     if (epgBtn) {
-      epgBtn.style.setProperty('display', 'none', 'important');
-      this.debugLog('EPG button hidden with !important');
+      epgBtn.style.display = 'none';
+      this.debugLog('EPG button hidden');
     }
   }
 
@@ -9183,30 +8987,7 @@ export class WebPlayer extends BasePlayer {
    */
   public isEPGButtonVisible(): boolean {
     const epgBtn = document.getElementById('uvf-epg-btn');
-    if (epgBtn) {
-      const isVisible = epgBtn.style.display !== 'none';
-      this.debugLog(`EPG button visibility check: ${isVisible}, display style: ${epgBtn.style.display}`);
-      return isVisible;
-    }
-    this.debugLog('EPG button visibility check: false (button not found in DOM)');
-    return false;
-  }
-
-  /**
-   * Debug method to log current EPG button state and configuration
-   */
-  public debugEPGState(): void {
-    const epgBtn = document.getElementById('uvf-epg-btn');
-    const epgConfig = (this.config as any).epg;
-    this.debugLog('=== EPG DEBUG STATE ===');
-    this.debugLog(`EPG Config Enabled: ${epgConfig?.enabled || false}`);
-    this.debugLog(`EPG Button Exists: ${!!epgBtn}`);
-    if (epgBtn) {
-      this.debugLog(`EPG Button Display Style: ${epgBtn.style.display}`);
-      this.debugLog(`EPG Button Computed Display: ${window.getComputedStyle(epgBtn).display}`);
-      this.debugLog(`EPG Button Visible: ${this.isEPGButtonVisible()}`);
-    }
-    this.debugLog('=====================');
+    return epgBtn ? epgBtn.style.display !== 'none' : false;
   }
 
   private async cleanup(): Promise<void> {