unified-video-framework 1.4.165 → 1.4.167

package/packages/web/src/WebPlayer.ts

@@ -51,9 +51,6 @@ 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
@@ -4401,404 +4398,260 @@ export class WebPlayer extends BasePlayer {
       }
       
       /* Enhanced Responsive Media Queries with UX Best Practices */
-      /* Mobile devices (portrait) - Enhanced UX with Safe Areas */
+      /* Mobile devices (portrait) - Material You Design (25-50-25 Layout) */
       @media screen and (max-width: 767px) and (orientation: portrait) {
         .uvf-responsive-container {
           padding: 0;
           width: 100vw !important;
-          height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+          height: 100vh;
+          height: 100dvh;
           margin: 0;
-          position: relative;
+          position: fixed;
+          top: 0;
+          left: 0;
           overflow: hidden;
         }
         
-        @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: 100% !important;
-          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));
-          }
+          height: 100vh;
+          height: 100dvh;
+          position: fixed;
+          top: 0;
+          left: 0;
+          display: flex;
+          flex-direction: column;
+          background: #000;
+          overflow: hidden;
         }
         
+        /* Video container occupies middle 50% */
         .uvf-responsive-container .uvf-video-container {
-          width: 100vw !important;
-          height: 100% !important;
+          height: 50vh;
+          height: 50dvh;
+          width: 100vw;
+          position: relative;
+          margin-top: 25vh;
+          margin-top: 25dvh;
           aspect-ratio: unset !important;
-          min-height: inherit;
+          background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
+                      0 4px 16px rgba(0, 0, 0, 0.3),
+                      0 2px 8px rgba(0, 0, 0, 0.2);
         }
         
-        /* Enhanced mobile controls bar with safe area padding - iOS Safari specific fixes */
-        .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%);
-          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;
-        }
-        
-        .uvf-progress-section {
-          margin-bottom: 16px;
-        }
-        
-        /* Mobile-first responsive controls layout */
-        .uvf-controls-row {
-          gap: 8px;
-          flex-wrap: nowrap;
-          align-items: center;
-          justify-content: space-between;
-          position: relative;
+        .uvf-video {
           width: 100%;
+          height: 100%;
+          object-fit: contain;
         }
         
-        /* Left side controls group */
-        .uvf-left-controls {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          flex-shrink: 0;
-        }
-        
-        /* Center controls group */
-        .uvf-center-controls {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          flex: 1;
-          justify-content: center;
-        }
-        
-        /* Mobile control groups reordering */
-        .uvf-controls-row .uvf-control-btn.play-pause,
-        .uvf-controls-row #uvf-skip-back,
-        .uvf-controls-row #uvf-skip-forward {
-          order: 1;
-        }
-        
-        .uvf-controls-row .uvf-volume-control {
-          order: 2;
-        }
-        
-        .uvf-controls-row .uvf-time-display:not(.uvf-above-seekbar) {
-          order: 3;
-          margin-left: auto;
-          margin-right: 8px;
-        }
-        
-        .uvf-controls-row .uvf-right-controls {
-          order: 4;
-          margin-left: 0;
-        }
-        
-        /* Touch-friendly control sizing (minimum 44px touch target) */
-        .uvf-control-btn {
-          width: 44px;
-          height: 44px;
-          min-width: 44px;
-          min-height: 44px;
-          border-radius: 22px;
-          background: rgba(255,255,255,0.15);
-          backdrop-filter: blur(8px);
-        }
-        
-        .uvf-control-btn.play-pause {
-          width: 52px;
-          height: 52px;
-          min-width: 52px;
-          min-height: 52px;
-          border-radius: 26px;
-          background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
-          box-shadow: 0 4px 12px rgba(var(--uvf-accent-1), 0.3);
-        }
-        
-        .uvf-control-btn svg {
-          width: 20px;
-          height: 20px;
-        }
-        
-        .uvf-control-btn.play-pause svg {
-          width: 24px;
-          height: 24px;
-        }
-        
-        /* Skip buttons with clear visual hierarchy */
-        #uvf-skip-back,
-        #uvf-skip-forward {
-          background: rgba(255,255,255,0.12);
+        /* Top black section (25%) - Tap zone */
+        .uvf-player-wrapper::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 25vh;
+          height: 25dvh;
+          background: #000;
+          z-index: 1;
+          pointer-events: all;
+          touch-action: manipulation;
         }
         
-        #uvf-skip-back svg,
-        #uvf-skip-forward svg {
-          width: 22px;
-          height: 22px;
+        /* Bottom black section (25%) - Controls area */
+        .uvf-player-wrapper::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100vw;
+          height: 25vh;
+          height: 25dvh;
+          background: linear-gradient(to top, 
+            #000 0%, 
+            rgba(0, 0, 0, 0.98) 20%,
+            rgba(0, 0, 0, 0.95) 100%);
+          z-index: 1;
+          pointer-events: none;
         }
         
-        /* Mobile time display - compact but readable */
-        .uvf-time-display:not(.uvf-above-seekbar) {
-          font-size: 12px;
-          font-weight: 600;
-          padding: 0 6px;
-          text-align: center;
-          background: rgba(0,0,0,0.3);
-          border-radius: 12px;
-          text-shadow: 0 1px 3px rgba(0,0,0,0.8);
-          flex-shrink: 0;
+        /* Material surface container for controls */
+        .uvf-controls-bar {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: auto;
+          max-height: 25vh;
+          max-height: 25dvh;
+          padding: 16px 20px;
+          padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px));
+          background: transparent;
+          z-index: 2;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+          backdrop-filter: blur(24px);
+          -webkit-backdrop-filter: blur(24px);
         }
         
-        /* Above-seekbar time display for mobile */
-        .uvf-time-display.uvf-above-seekbar {
-          font-size: 12px !important;
-          font-weight: 500 !important;
-          padding: 3px 6px !important;
-          background: rgba(0,0,0,0.4) !important;
-          border-radius: 10px !important;
-          text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
-          backdrop-filter: blur(4px) !important;
-          border: 1px solid rgba(255,255,255,0.1) !important;
+        /* Material surface tint overlay */
+        .uvf-controls-bar::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: var(--uvf-surface-tint, rgba(255, 0, 0, 0.08));
+          border-radius: 28px 28px 0 0;
+          pointer-events: none;
+          z-index: -1;
         }
         
-        /* Simplified volume control for mobile */
-        .uvf-volume-control {
-          order: 3;
+        /* Progress bar with chapter markers */
+        .uvf-progress-section {
+          margin-bottom: 12px;
           position: relative;
         }
         
-        /* Hide volume panel on mobile - use device controls */
-        .uvf-volume-panel {
-          display: none;
-        }
-        
-        /* Mobile volume button as simple mute toggle */
-        .uvf-volume-control .uvf-control-btn {
-          width: 44px;
-          height: 44px;
-        }
-        
-        /* Compact right controls for mobile */
-        .uvf-right-controls {
-          gap: 6px;
-          display: flex;
-          align-items: center;
-          flex-shrink: 0;
+        .uvf-progress-bar-wrapper {
+          padding: 12px 0;
           position: relative;
-          z-index: 10;
-        }
-        
-        /* Ensure settings container is visible */
-        .uvf-right-controls > div[style*="position: relative"],
-        .uvf-settings-container {
-          display: flex !important;
-          position: relative !important;
-          align-items: center !important;
-          justify-content: center !important;
-          min-width: 44px !important;
-          min-height: 44px !important;
-        }
-        
-        /* Remove quality badge completely - not essential */
-        .uvf-quality-badge {
-          display: none !important;
-        }
-        
-        /* Settings menu - hidden by default, accessible via menu */
-        .uvf-settings-menu {
-          min-width: 160px;
-          bottom: 60px;
-          right: 12px;
-          font-size: 14px;
-          max-height: 50vh;
         }
         
-        .uvf-settings-option {
-          padding: 12px 16px;
-          font-size: 14px;
-          min-height: 44px;
-          display: flex;
-          align-items: center;
-        }
-        
-        .uvf-settings-option:hover {
-          background: rgba(255,255,255,0.15);
-          padding-left: 20px;
-        }
-        
-        /* Simplified settings - hide complex options */
-        .uvf-settings-group:first-child .uvf-settings-option[data-speed="0.5"],
-        .uvf-settings-group:first-child .uvf-settings-option[data-speed="0.75"],
-        .uvf-settings-group:first-child .uvf-settings-option[data-speed="2"] {
-          display: none;
-        }
+        .uvf-progress-bar {
+          height: 4px;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 4px;
+          position: relative;
+          overflow: visible;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         }
         
-      /* Enhanced top controls for mobile with safe area support */
-      .uvf-top-controls {
-        position: absolute;
-        top: calc(12px + var(--uvf-safe-area-top));
-        right: calc(12px + var(--uvf-safe-area-right));
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        z-index: 10;
-      }
-        
-        /* Touch-friendly top buttons */
-        .uvf-top-btn {
-          width: 44px;
-          height: 44px;
-          min-width: 44px;
-          min-height: 44px;
-          background: rgba(0,0,0,0.7);
-          backdrop-filter: blur(10px);
-          border: 1px solid rgba(255,255,255,0.2);
+        .uvf-progress-filled {
+          background: var(--uvf-accent-1, #ff0000);
+          box-shadow: 0 0 8px var(--uvf-accent-1, #ff0000);
         }
         
-        .uvf-top-btn svg {
+        .uvf-progress-handle {
           width: 20px;
           height: 20px;
+          background: var(--uvf-accent-1, #ff0000);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
+                      0 0 0 0 var(--uvf-accent-1, #ff0000);
+          transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         
-        /* Share button - keep visible on all devices */
-        #uvf-share-btn {
-          display: flex;
-        }
-        
-        /* Enhanced title bar for mobile with safe area support */
-        .uvf-title-bar {
-          padding: 12px;
-          padding-top: calc(12px + var(--uvf-safe-area-top));
-          padding-left: calc(12px + var(--uvf-safe-area-left));
-          padding-right: calc(12px + var(--uvf-safe-area-right));
-        }
-        
-        .uvf-video-title {
-          font-size: 16px;
-          font-weight: 700;
-          line-height: 1.2;
-        }
-        
-        .uvf-video-subtitle {
-          font-size: 12px;
-          margin-top: 4px;
-          opacity: 0.8;
+        .uvf-progress-handle:active {
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
+                      0 0 0 12px rgba(255, 0, 0, 0.15);
+          transform: translate(-50%, -50%) scale(1.2);
         }
         
-        .uvf-video-thumb {
+        /* Material Design control buttons */
+        .uvf-control-btn {
           width: 48px;
           height: 48px;
-          border-radius: 6px;
-        }
-        
-        /* Touch-optimized center play button - uses same themed style as desktop */
-        .uvf-center-play-btn {
-          width: clamp(72px, 18vw, 96px);
-          height: clamp(72px, 18vw, 96px);
-          background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
-          border: 0;
-          box-shadow: 0 10px 30px var(--uvf-accent-1-20);
+          min-width: 48px;
+          min-height: 48px;
+          background: rgba(255, 255, 255, 0.12);
+          border-radius: 24px;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
+                      0 1px 2px rgba(0, 0, 0, 0.24);
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          overflow: hidden;
         }
         
-        .uvf-center-play-btn:hover {
-          transform: scale(1.06);
-          filter: saturate(1.08) brightness(1.05);
-          box-shadow: 0 14px 36px var(--uvf-accent-1-20);
+        /* Material ripple effect */
+        .uvf-control-btn::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: inherit;
+          opacity: 0;
+          transition: opacity 0.2s ease;
         }
         
-        .uvf-center-play-btn svg {
-          width: clamp(28px, 5.2vw, 38px);
-          height: clamp(28px, 5.2vw, 38px);
-          margin-left: 4px;
+        .uvf-control-btn:active::before {
+          opacity: 1;
         }
         
-        /* Enhanced progress bar for touch */
-        .uvf-progress-bar {
-          height: 3px;
-          margin-bottom: 12px;
-          border-radius: 4px;
-          background: rgba(255,255,255,0.15);
-          position: relative;
+        .uvf-control-btn:active {
+          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
+                      0 3px 6px rgba(0, 0, 0, 0.23);
+          transform: scale(0.95);
         }
         
-        /* Larger touch target for progress bar */
-        .uvf-progress-bar-wrapper::before {
-          content: '';
-          position: absolute;
-          top: -10px;
-          left: 0;
-          right: 0;
-          bottom: -10px;
-          z-index: 1;
+        .uvf-control-btn.play-pause {
+          width: 56px;
+          height: 56px;
+          min-width: 56px;
+          min-height: 56px;
+          border-radius: 28px;
+          background: linear-gradient(135deg, 
+            var(--uvf-accent-1, #ff0000), 
+            var(--uvf-accent-2, #ff4d4f));
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
+                      0 2px 4px rgba(0, 0, 0, 0.15),
+                      0 0 0 0 var(--uvf-accent-1, #ff0000);
         }
         
-        .uvf-progress-handle {
-          width: 18px;
-          height: 18px;
-          background: #fff;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        .uvf-control-btn.play-pause:active {
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25),
+                      0 4px 8px rgba(0, 0, 0, 0.20),
+                      0 0 0 8px rgba(255, 0, 0, 0.12);
         }
         
-        .uvf-progress-bar-wrapper:active .uvf-progress-handle {
-          transform: translate(-50%, -50%) scale(1.2);
+        .uvf-control-btn svg {
+          width: 20px;
+          height: 20px;
         }
         
-        /* Mobile accessibility improvements */
-        .uvf-control-btn,
-        .uvf-top-btn {
-          position: relative;
-          overflow: visible;
+        .uvf-control-btn.play-pause svg {
+          width: 24px;
+          height: 24px;
         }
         
-        /* Enhanced focus states for mobile */
-        .uvf-control-btn:focus,
-        .uvf-top-btn:focus {
-          outline: 2px solid var(--uvf-accent-1);
-          outline-offset: 2px;
+        /* Controls row with Material spacing */
+        .uvf-controls-row {
+          gap: 16px;
+          padding: 0;
+          align-items: center;
         }
         
-        
-        /* Show PiP on all devices - modern mobile browsers support it well */
-        #uvf-pip-btn {
-          display: block;
-          background: rgba(255,255,255,0.12);
-          border: 1px solid rgba(255,255,255,0.1);
+        /* Time display with Material surface */
+        .uvf-time-display {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(8px);
+          border-radius: 16px;
+          padding: 6px 12px;
+          font-size: 13px;
+          font-weight: 500;
+          font-feature-settings: 'tnum';
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
         }
         
-        /* 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;
+        /* Hide desktop elements */
+        .uvf-top-controls,
+        .uvf-title-bar,
+        .uvf-volume-control,
+        #uvf-skip-back,
+        #uvf-skip-forward {
+          display: none !important;
         }
         
-        /* Ensure settings button is always visible and properly sized on mobile */
+        /* Optimize settings button for Material You */
         #uvf-settings-btn {
-          display: flex !important;
-          width: 44px !important;
-          height: 44px !important;
-          min-width: 44px !important;
-          min-height: 44px !important;
-          backdrop-filter: blur(8px) !important;
-          border-radius: 22px !important;
-          align-items: center !important;
-          justify-content: center !important;
+          width: 48px !important;
+          height: 48px !important;
+          min-width: 48px !important;
+          min-height: 48px !important;
+          border-radius: 24px !important;
+        }
+      }
         }
         
         #uvf-settings-btn svg {
@@ -6394,12 +6247,7 @@ export class WebPlayer extends BasePlayer {
       
       // Force visibility if menu is active, hide if not active
       if (settingsMenu) {
-        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);
+        if (settingsMenu.classList.contains('active')) {
           settingsMenu.style.display = 'block';
           settingsMenu.style.visibility = 'visible';
           settingsMenu.style.opacity = '1';
@@ -6415,13 +6263,10 @@ 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();
         }
       }
       
@@ -6461,19 +6306,6 @@ 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')) {
@@ -7125,8 +6957,6 @@ 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) {
@@ -7137,14 +6967,12 @@ 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') && !this.isSettingsOpen) {
+      if (this.state.isPlaying && !this.controlsContainer?.matches(':hover')) {
         this.hideControls();
       }
     }, timeout);
@@ -8353,7 +8181,6 @@ 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';
@@ -8366,8 +8193,6 @@ export class WebPlayer extends BasePlayer {
     });
     
     this.debugLog('Settings menu hidden via hideSettingsMenu()');
-    // Resume auto-hide if appropriate
-    this.scheduleHideControls();
   }
 
   /**