unified-video-framework 1.4.166 → 1.4.168

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
@@ -100,20 +97,6 @@ export class WebPlayer extends BasePlayer {
   // Progress bar tooltip state
   private showTimeTooltip: boolean = false;
 
-  // Material You touch gesture state
-  private lastTapTime: number = 0;
-  private tapCount: number = 0;
-  private tapTimeout: NodeJS.Timeout | null = null;
-  private longPressTimer: NodeJS.Timeout | null = null;
-  private longPressActive: boolean = false;
-  private longPressStartTime: number = 0;
-  private originalPlaybackRate: number = 1;
-  
-  // Material You dynamic theming - matches existing theme
-  private dominantColor: string = '#ff0000'; // Primary accent from theme
-  private accentColor: string = '#ff4d4f'; // Secondary accent from theme
-  private surfaceTint: string = 'rgba(255, 0, 0, 0.08)'; // Surface tint for Material containers
-
   // Autoplay enhancement state
   private autoplayCapabilities: {
     canAutoplay: boolean;
@@ -359,35 +342,6 @@ export class WebPlayer extends BasePlayer {
 
     // Initialize metadata UI to hidden/empty by default
     this.updateMetadataUI();
-    
-    // Enable Material You mobile layout on mobile portrait devices
-    this.enableMaterialYouMobileIfNeeded();
-  }
-  
-  /**
-   * Enable Material You mobile layout if on mobile portrait device
-   */
-  private enableMaterialYouMobileIfNeeded(): void {
-    // Check if mobile and portrait
-    const isMobile = this.isMobileDevice();
-    const isPortrait = window.innerHeight > window.innerWidth;
-    
-    if (isMobile && isPortrait && this.playerWrapper) {
-      this.debugLog('Enabling Material You mobile layout');
-      this.playerWrapper.classList.add('uvf-material-you-mobile');
-      
-      // Listen for orientation changes
-      window.addEventListener('resize', () => {
-        const isNowPortrait = window.innerHeight > window.innerWidth;
-        if (this.playerWrapper) {
-          if (isMobile && isNowPortrait) {
-            this.playerWrapper.classList.add('uvf-material-you-mobile');
-          } else {
-            this.playerWrapper.classList.remove('uvf-material-you-mobile');
-          }
-        }
-      });
-    }
   }
 
   private setupVideoEventListeners(): void {
@@ -480,9 +434,6 @@ export class WebPlayer extends BasePlayer {
       // Update time display immediately when metadata loads
       this.updateTimeDisplay();
       
-      // Render chapter markers if enabled
-      this.renderChapterMarkersOnProgressBar();
-      
       this.emit('onLoadedMetadata', {
         duration: this.video.duration || 0,
         width: this.video.videoWidth || 0,
@@ -2392,8 +2343,6 @@ export class WebPlayer extends BasePlayer {
         --uvf-scrollbar-thumb-hover-start: rgba(255,0,0,0.5);
         --uvf-scrollbar-thumb-hover-end: rgba(255,0,0,0.6);
         --uvf-firefox-scrollbar-color: rgba(255,255,255,0.25);
-        /* Material You surface tint */
-        --uvf-surface-tint: rgba(255, 0, 0, 0.08);
       }
       
       /* Player focus styles for better UX */
@@ -4302,162 +4251,35 @@ 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;
+      /* Enhanced Responsive Media Queries with UX Best Practices */
+      /* 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: 100vh;
+          height: 100dvh;
+          margin: 0;
+          position: fixed;
+          top: 0;
+          left: 0;
           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;
+        .uvf-responsive-container .uvf-player-wrapper {
           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 */
-      
-      /* Material You Mobile Portrait Layout - 25% Black + 50% Video + 25% Black */
-      @media screen and (max-width: 767px) and (orientation: portrait) {
-        /* Enable Material You mode with class flag */
-        .uvf-player-wrapper.uvf-material-you-mobile {
-          /* Full viewport height layout */
           height: 100vh;
           height: 100dvh;
-          width: 100vw;
           position: fixed;
           top: 0;
           left: 0;
@@ -4467,8 +4289,8 @@ export class WebPlayer extends BasePlayer {
           overflow: hidden;
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-video-container {
-          /* Video occupies middle 50% */
+        /* Video container occupies middle 50% */
+        .uvf-responsive-container .uvf-video-container {
           height: 50vh;
           height: 50dvh;
           width: 100vw;
@@ -4476,22 +4298,20 @@ export class WebPlayer extends BasePlayer {
           margin-top: 25vh;
           margin-top: 25dvh;
           aspect-ratio: unset !important;
-          /* Match existing theme background */
           background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
-          /* Material Design elevation */
           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);
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-video {
+        .uvf-video {
           width: 100%;
           height: 100%;
           object-fit: contain;
         }
         
-        /* Top black section (25%) - Tap zone overlay */
-        .uvf-player-wrapper.uvf-material-you-mobile::before {
+        /* Top black section (25%) - Tap zone */
+        .uvf-player-wrapper::before {
           content: '';
           position: absolute;
           top: 0;
@@ -4505,8 +4325,8 @@ export class WebPlayer extends BasePlayer {
           touch-action: manipulation;
         }
         
-        /* Bottom black section (25%) - Surface container */
-        .uvf-player-wrapper.uvf-material-you-mobile::after {
+        /* Bottom black section (25%) - Controls area */
+        .uvf-player-wrapper::after {
           content: '';
           position: absolute;
           bottom: 0;
@@ -4523,7 +4343,7 @@ export class WebPlayer extends BasePlayer {
         }
         
         /* Material surface container for controls */
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-controls-bar {
+        .uvf-controls-bar {
           position: absolute;
           bottom: 0;
           left: 0;
@@ -4538,13 +4358,12 @@ export class WebPlayer extends BasePlayer {
           display: flex;
           flex-direction: column;
           justify-content: flex-end;
-          /* Material Design surface with tint */
           backdrop-filter: blur(24px);
           -webkit-backdrop-filter: blur(24px);
         }
         
         /* Material surface tint overlay */
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-controls-bar::before {
+        .uvf-controls-bar::before {
           content: '';
           position: absolute;
           inset: 0;
@@ -4555,87 +4374,53 @@ export class WebPlayer extends BasePlayer {
         }
         
         /* Progress bar with chapter markers */
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-section {
+        .uvf-progress-section {
           margin-bottom: 12px;
           position: relative;
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-bar-wrapper {
+        .uvf-progress-bar-wrapper {
           padding: 12px 0;
           position: relative;
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-bar {
+        .uvf-progress-bar {
           height: 4px;
           background: rgba(255, 255, 255, 0.2);
           border-radius: 4px;
           position: relative;
           overflow: visible;
-          /* Material elevation */
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-filled {
+        .uvf-progress-filled {
           background: var(--uvf-accent-1, #ff0000);
           box-shadow: 0 0 8px var(--uvf-accent-1, #ff0000);
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-handle {
+        .uvf-progress-handle {
           width: 20px;
           height: 20px;
           background: var(--uvf-accent-1, #ff0000);
-          /* Material Design state layer */
           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);
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-handle:active {
+        .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);
         }
         
-        /* Chapter markers on progress bar */
-        .uvf-chapter-marker {
-          position: absolute;
-          top: 0;
-          height: 100%;
-          width: 3px;
-          background: rgba(255, 255, 255, 0.4);
-          border-radius: 2px;
-          transform: translateX(-50%);
-          pointer-events: none;
-          z-index: 1;
-          transition: all 0.2s ease;
-        }
-        
-        .uvf-chapter-marker.intro {
-          background: #4CAF50;
-        }
-        
-        .uvf-chapter-marker.recap {
-          background: #FFC107;
-        }
-        
-        .uvf-chapter-marker.credits {
-          background: #9C27B0;
-        }
-        
-        .uvf-progress-bar-wrapper:hover .uvf-chapter-marker {
-          width: 4px;
-          opacity: 1;
-        }
-        
         /* Material Design control buttons */
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-control-btn {
+        .uvf-control-btn {
           width: 48px;
           height: 48px;
           min-width: 48px;
           min-height: 48px;
           background: rgba(255, 255, 255, 0.12);
           border-radius: 24px;
-          /* Material elevation level 1 */
           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);
@@ -4644,7 +4429,7 @@ export class WebPlayer extends BasePlayer {
         }
         
         /* Material ripple effect */
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-control-btn::before {
+        .uvf-control-btn::before {
           content: '';
           position: absolute;
           inset: 0;
@@ -4654,24 +4439,22 @@ export class WebPlayer extends BasePlayer {
           transition: opacity 0.2s ease;
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-control-btn:active::before {
+        .uvf-control-btn:active::before {
           opacity: 1;
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-control-btn:active {
-          /* Material elevation level 2 */
+        .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);
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-control-btn.play-pause {
+        .uvf-control-btn.play-pause {
           width: 56px;
           height: 56px;
           min-width: 56px;
           min-height: 56px;
           border-radius: 28px;
-          /* Material elevated button */
           background: linear-gradient(135deg, 
             var(--uvf-accent-1, #ff0000), 
             var(--uvf-accent-2, #ff4d4f));
@@ -4680,21 +4463,31 @@ export class WebPlayer extends BasePlayer {
                       0 0 0 0 var(--uvf-accent-1, #ff0000);
         }
         
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-control-btn.play-pause:active {
+        .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-control-btn svg {
+          width: 20px;
+          height: 20px;
+        }
+        
+        .uvf-control-btn.play-pause svg {
+          width: 24px;
+          height: 24px;
+        }
+        
         /* Controls row with Material spacing */
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-controls-row {
+        .uvf-controls-row {
           gap: 16px;
           padding: 0;
           align-items: center;
         }
         
         /* Time display with Material surface */
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-time-display {
+        .uvf-time-display {
           background: rgba(255, 255, 255, 0.1);
           backdrop-filter: blur(8px);
           border-radius: 16px;
@@ -4702,101 +4495,20 @@ export class WebPlayer extends BasePlayer {
           font-size: 13px;
           font-weight: 500;
           font-feature-settings: 'tnum';
-          /* Material elevation */
           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
         }
         
-        /* Double-tap overlay indicators */
-        .uvf-doubletap-indicator {
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 80px;
-          height: 80px;
-          background: rgba(255, 255, 255, 0.2);
-          backdrop-filter: blur(10px);
-          border-radius: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          pointer-events: none;
-          opacity: 0;
-          z-index: 100;
-          transition: opacity 0.3s ease;
-          /* Material elevation level 3 */
-          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
-                      0 6px 6px rgba(0, 0, 0, 0.23);
-        }
-        
-        .uvf-doubletap-indicator.left {
-          left: 15%;
-        }
-        
-        .uvf-doubletap-indicator.right {
-          right: 15%;
-        }
-        
-        .uvf-doubletap-indicator.active {
-          opacity: 1;
-          animation: doubletap-pulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        
-        @keyframes doubletap-pulse {
-          0% {
-            transform: translateY(-50%) scale(0.8);
-            opacity: 0;
-          }
-          50% {
-            transform: translateY(-50%) scale(1.1);
-            opacity: 1;
-          }
-          100% {
-            transform: translateY(-50%) scale(1);
-            opacity: 1;
-          }
-        }
-        
-        .uvf-doubletap-indicator svg {
-          width: 40px;
-          height: 40px;
-          fill: #fff;
-        }
-        
-        /* Long-press 2x speed indicator */
-        .uvf-longpress-indicator {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          background: rgba(0, 0, 0, 0.8);
-          backdrop-filter: blur(16px);
-          padding: 16px 24px;
-          border-radius: 24px;
-          color: #fff;
-          font-size: 18px;
-          font-weight: 600;
-          pointer-events: none;
-          opacity: 0;
-          z-index: 100;
-          transition: opacity 0.2s ease;
-          /* Material elevation level 4 */
-          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
-                      0 10px 10px rgba(0, 0, 0, 0.22);
-        }
-        
-        .uvf-longpress-indicator.active {
-          opacity: 1;
-        }
-        
-        /* Hide desktop elements in Material You mode */
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-top-controls,
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-title-bar,
-        .uvf-player-wrapper.uvf-material-you-mobile .uvf-volume-control {
+        /* Hide desktop elements */
+        .uvf-top-controls,
+        .uvf-title-bar,
+        .uvf-volume-control,
+        #uvf-skip-back,
+        #uvf-skip-forward {
           display: none !important;
         }
         
         /* Optimize settings button for Material You */
-        .uvf-player-wrapper.uvf-material-you-mobile #uvf-settings-btn {
+        #uvf-settings-btn {
           width: 48px !important;
           height: 48px !important;
           min-width: 48px !important;
@@ -4804,405 +4516,6 @@ export class WebPlayer extends BasePlayer {
           border-radius: 24px !important;
         }
       }
-      
-      /* Mobile devices (portrait) - Enhanced UX with Safe Areas */
-      @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));
-          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));
-          }
-        }
-        
-        .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));
-          }
-        }
-        
-        .uvf-responsive-container .uvf-video-container {
-          width: 100vw !important;
-          height: 100% !important;
-          aspect-ratio: unset !important;
-          min-height: inherit;
-        }
-        
-        /* 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;
-          width: 100%;
-        }
-        
-        /* 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);
-        }
-        
-        #uvf-skip-back svg,
-        #uvf-skip-forward svg {
-          width: 22px;
-          height: 22px;
-        }
-        
-        /* 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;
-        }
-        
-        /* 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;
-        }
-        
-        /* Simplified volume control for mobile */
-        .uvf-volume-control {
-          order: 3;
-          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;
-          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;
-        }
-        }
-        
-      /* 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-top-btn svg {
-          width: 20px;
-          height: 20px;
-        }
-        
-        /* 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-video-thumb {
-          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);
-        }
-        
-        .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);
-        }
-        
-        .uvf-center-play-btn svg {
-          width: clamp(28px, 5.2vw, 38px);
-          height: clamp(28px, 5.2vw, 38px);
-          margin-left: 4px;
-        }
-        
-        /* 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;
-        }
-        
-        /* 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-progress-handle {
-          width: 18px;
-          height: 18px;
-          background: #fff;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-        }
-        
-        .uvf-progress-bar-wrapper:active .uvf-progress-handle {
-          transform: translate(-50%, -50%) scale(1.2);
-        }
-        
-        /* Mobile accessibility improvements */
-        .uvf-control-btn,
-        .uvf-top-btn {
-          position: relative;
-          overflow: visible;
-        }
-        
-        /* Enhanced focus states for mobile */
-        .uvf-control-btn:focus,
-        .uvf-top-btn:focus {
-          outline: 2px solid var(--uvf-accent-1);
-          outline-offset: 2px;
-        }
-        
-        
-        /* 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);
-        }
-        
-        /* 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;
-        }
-        
-        /* Ensure settings button is always visible and properly sized on mobile */
-        #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;
         }
         
         #uvf-settings-btn svg {
@@ -6130,26 +5443,6 @@ export class WebPlayer extends BasePlayer {
     shortcutIndicator.className = 'uvf-shortcut-indicator';
     shortcutIndicator.id = 'uvf-shortcut-indicator';
     container.appendChild(shortcutIndicator);
-    
-    // Add Material You double-tap indicators
-    const doubleTapLeft = document.createElement('div');
-    doubleTapLeft.className = 'uvf-doubletap-indicator left';
-    doubleTapLeft.id = 'uvf-doubletap-left';
-    doubleTapLeft.innerHTML = '<svg viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg><div style="margin-top:4px;font-size:14px;font-weight:600;">-10s</div>';
-    container.appendChild(doubleTapLeft);
-    
-    const doubleTapRight = document.createElement('div');
-    doubleTapRight.className = 'uvf-doubletap-indicator right';
-    doubleTapRight.id = 'uvf-doubletap-right';
-    doubleTapRight.innerHTML = '<svg viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg><div style="margin-top:4px;font-size:14px;font-weight:600;">+10s</div>';
-    container.appendChild(doubleTapRight);
-    
-    // Add Material You long-press indicator
-    const longPressIndicator = document.createElement('div');
-    longPressIndicator.className = 'uvf-longpress-indicator';
-    longPressIndicator.id = 'uvf-longpress-indicator';
-    longPressIndicator.textContent = '2x';
-    container.appendChild(longPressIndicator);
 
     // Create controls bar
     const controlsBar = document.createElement('div');
@@ -6443,9 +5736,7 @@ export class WebPlayer extends BasePlayer {
     // Play/Pause
     centerPlay?.addEventListener('click', () => this.togglePlayPause());
     playPauseBtn?.addEventListener('click', () => this.togglePlayPause());
-    
-    // Material You touch gestures for mobile
-    this.setupMaterialYouGestures(wrapper);
+    this.video.addEventListener('click', () => this.togglePlayPause());
     
     // Update play/pause icons
     this.video.addEventListener('play', () => {
@@ -6820,12 +6111,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';
@@ -6841,13 +6127,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();
         }
       }
       
@@ -6887,19 +6170,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')) {
@@ -7411,267 +6681,6 @@ export class WebPlayer extends BasePlayer {
     }
   }
 
-  /**
-   * Setup Material You touch gestures for mobile
-   */
-  private setupMaterialYouGestures(wrapper: HTMLElement | null): void {
-    if (!wrapper || !this.video) return;
-    
-    const doubleTapLeft = document.getElementById('uvf-doubletap-left');
-    const doubleTapRight = document.getElementById('uvf-doubletap-right');
-    const longPressIndicator = document.getElementById('uvf-longpress-indicator');
-    
-    // Single tap, double tap, and long press handling
-    const videoElement = this.video;
-    const videoContainer = wrapper.querySelector('.uvf-video-container');
-    
-    if (!videoContainer) return;
-    
-    // Touch start for long-press detection
-    videoContainer.addEventListener('touchstart', (e: Event) => {
-      const touchEvent = e as TouchEvent;
-      const touch = touchEvent.touches[0];
-      
-      if (!touch || !videoElement) return;
-      
-      this.longPressStartTime = Date.now();
-      
-      // Start long-press timer
-      this.longPressTimer = setTimeout(() => {
-        this.longPressActive = true;
-        this.originalPlaybackRate = videoElement.playbackRate;
-        videoElement.playbackRate = 2.0;
-        
-        // Show indicator
-        if (longPressIndicator) {
-          longPressIndicator.classList.add('active');
-        }
-      }, 500); // 500ms for long press
-    }, { passive: true });
-    
-    // Touch end to handle tap/double-tap and stop long-press
-    videoContainer.addEventListener('touchend', (e: Event) => {
-      const touchEvent = e as TouchEvent;
-      const touch = touchEvent.changedTouches[0];
-      
-      if (!touch || !videoElement) return;
-      
-      // Clear long-press timer
-      if (this.longPressTimer) {
-        clearTimeout(this.longPressTimer);
-        this.longPressTimer = null;
-      }
-      
-      // If long-press was active, restore playback rate
-      if (this.longPressActive) {
-        videoElement.playbackRate = this.originalPlaybackRate;
-        this.longPressActive = false;
-        
-        if (longPressIndicator) {
-          longPressIndicator.classList.remove('active');
-        }
-        return; // Don't process as tap
-      }
-      
-      // Tap detection
-      const now = Date.now();
-      const timeSinceLastTap = now - this.lastTapTime;
-      
-      if (timeSinceLastTap < 300) { // Double tap detected (within 300ms)
-        // Clear single tap timeout
-        if (this.tapTimeout) {
-          clearTimeout(this.tapTimeout);
-          this.tapTimeout = null;
-        }
-        
-        // Determine if left or right side
-        const rect = videoContainer.getBoundingClientRect();
-        const x = touch.clientX - rect.left;
-        const isLeftSide = x < rect.width / 2;
-        
-        if (isLeftSide) {
-          // Skip backward 10s
-          this.seek(videoElement.currentTime - 10);
-          
-          // Show indicator
-          if (doubleTapLeft) {
-            doubleTapLeft.classList.add('active');
-            setTimeout(() => {
-              doubleTapLeft.classList.remove('active');
-            }, 400);
-          }
-        } else {
-          // Skip forward 10s
-          this.seek(videoElement.currentTime + 10);
-          
-          // Show indicator
-          if (doubleTapRight) {
-            doubleTapRight.classList.add('active');
-            setTimeout(() => {
-              doubleTapRight.classList.remove('active');
-            }, 400);
-          }
-        }
-        
-        this.tapCount = 0;
-        this.lastTapTime = 0;
-      } else {
-        // First tap
-        this.tapCount = 1;
-        this.lastTapTime = now;
-        
-        // Wait for potential second tap
-        this.tapTimeout = setTimeout(() => {
-          if (this.tapCount === 1) {
-            // Single tap - toggle overlay controls visibility
-            this.toggleControls();
-          }
-          this.tapCount = 0;
-        }, 300); // Wait 300ms for double tap
-      }
-    }, { passive: true });
-    
-    // Touch move/cancel to reset long-press
-    videoContainer.addEventListener('touchmove', () => {
-      if (this.longPressTimer) {
-        clearTimeout(this.longPressTimer);
-        this.longPressTimer = null;
-      }
-    }, { passive: true });
-    
-    videoContainer.addEventListener('touchcancel', () => {
-      if (this.longPressTimer) {
-        clearTimeout(this.longPressTimer);
-        this.longPressTimer = null;
-      }
-      
-      if (this.longPressActive && videoElement) {
-        videoElement.playbackRate = this.originalPlaybackRate;
-        this.longPressActive = false;
-        
-        if (longPressIndicator) {
-          longPressIndicator.classList.remove('active');
-        }
-      }
-    }, { passive: true });
-  }
-  
-  /**
-   * Toggle controls visibility
-   */
-  private toggleControls(): void {
-    const wrapper = this.container?.querySelector('.uvf-player-wrapper');
-    if (wrapper) {
-      if (wrapper.classList.contains('controls-visible')) {
-        this.hideControls();
-      } else {
-        this.showControls();
-        // Auto-hide after delay if playing
-        if (this.state.isPlaying) {
-          this.scheduleHideControls();
-        }
-      }
-    }
-  }
-  
-  /**
-   * Apply dynamic color theming based on video content (Material You)
-   * This can be enhanced to extract colors from video frames
-   */
-  private applyDynamicTheming(primaryColor?: string): void {
-    if (!this.playerWrapper) return;
-    
-    const color = primaryColor || this.dominantColor;
-    const rgb = this.hexToRgb(color);
-    
-    if (rgb) {
-      // Update CSS variables for Material You theming
-      this.playerWrapper.style.setProperty('--uvf-accent-1', color);
-      this.playerWrapper.style.setProperty('--uvf-accent-2', this.lightenColor(color, 10));
-      this.playerWrapper.style.setProperty('--uvf-surface-tint', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.08)`);
-      
-      this.debugLog(`Applied dynamic theming with color: ${color}`);
-    }
-  }
-  
-  /**
-   * Convert hex color to RGB
-   */
-  private hexToRgb(hex: string): { r: number, g: number, b: number } | null {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16)
-    } : null;
-  }
-  
-  /**
-   * Lighten a hex color by a percentage
-   */
-  private lightenColor(hex: string, percent: number): string {
-    const rgb = this.hexToRgb(hex);
-    if (!rgb) return hex;
-    
-    const amount = Math.floor(255 * (percent / 100));
-    const r = Math.min(255, rgb.r + amount);
-    const g = Math.min(255, rgb.g + amount);
-    const b = Math.min(255, rgb.b + amount);
-    
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-  }
-  
-  /**
-   * Render chapter markers on progress bar for Material You layout
-   */
-  private renderChapterMarkersOnProgressBar(): void {
-    if (!this.video || !this.chapterConfig.enabled || !this.chapterConfig.showChapterMarkers) {
-      return;
-    }
-    
-    const progressBar = document.querySelector('.uvf-progress-bar');
-    if (!progressBar) return;
-    
-    // Remove existing markers
-    const existingMarkers = progressBar.querySelectorAll('.uvf-chapter-marker');
-    existingMarkers.forEach(marker => marker.remove());
-    
-    // Get chapter data
-    const chapters = this.chapterConfig.data;
-    if (!chapters || !Array.isArray(chapters) || chapters.length === 0) {
-      return;
-    }
-    
-    const duration = this.video.duration;
-    if (!duration || duration === 0) return;
-    
-    // Create marker for each chapter
-    chapters.forEach((chapter: any) => {
-      if (!chapter.startTime && chapter.startTime !== 0) return;
-      
-      const marker = document.createElement('div');
-      marker.className = 'uvf-chapter-marker';
-      
-      // Add chapter type class if available
-      if (chapter.type) {
-        marker.classList.add(chapter.type.toLowerCase());
-      }
-      
-      // Position based on startTime
-      const percent = (chapter.startTime / duration) * 100;
-      marker.style.left = `${percent}%`;
-      
-      // Add title attribute for tooltip
-      if (chapter.title) {
-        marker.setAttribute('title', chapter.title);
-      }
-      
-      progressBar.appendChild(marker);
-    });
-    
-    this.debugLog(`Rendered ${chapters.length} chapter markers on progress bar`);
-  }
-  
   /**
    * Detect if user is on a mobile device
    */
@@ -7812,8 +6821,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) {
@@ -7824,14 +6831,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);
@@ -9040,7 +8045,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';
@@ -9053,8 +8057,6 @@ export class WebPlayer extends BasePlayer {
     });
     
     this.debugLog('Settings menu hidden via hideSettingsMenu()');
-    // Resume auto-hide if appropriate
-    this.scheduleHideControls();
   }
 
   /**