unified-video-framework 1.4.164 → 1.4.166

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
@@ -97,6 +100,20 @@ 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;
@@ -342,6 +359,35 @@ 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 {
@@ -434,6 +480,9 @@ 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,
@@ -2343,6 +2392,8 @@ 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 */
@@ -4398,278 +4449,417 @@ export class WebPlayer extends BasePlayer {
       }
       
       /* Enhanced Responsive Media Queries with UX Best Practices */
-      /* Mobile Portrait Layout - CENTERED PLAYER with TOP/BOTTOM BLACK AREAS */
+      
+      /* Material You Mobile Portrait Layout - 25% Black + 50% Video + 25% Black */
       @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;
+        /* Enable Material You mode with class flag */
+        .uvf-player-wrapper.uvf-material-you-mobile {
+          /* Full viewport height layout */
           height: 100vh;
           height: 100dvh;
-          background: #000;
-          overflow: hidden;
+          width: 100vw;
           position: fixed;
           top: 0;
           left: 0;
+          display: flex;
+          flex-direction: column;
+          background: #000;
+          overflow: hidden;
+        }
+        
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-video-container {
+          /* Video occupies middle 50% */
+          height: 50vh;
+          height: 50dvh;
           width: 100vw;
-          padding: 0;
-          margin: 0;
+          position: relative;
+          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);
         }
         
-        /* TOP BLACK AREA - 25% of viewport - COMPLETELY EMPTY */
-        .uvf-responsive-container::before {
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-video {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+        
+        /* Top black section (25%) - Tap zone overlay */
+        .uvf-player-wrapper.uvf-material-you-mobile::before {
           content: '';
-          flex: 0 0 25vh;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 25vh;
+          height: 25dvh;
           background: #000;
-          pointer-events: none;
+          z-index: 1;
+          pointer-events: all;
+          touch-action: manipulation;
         }
         
-        /* BOTTOM BLACK AREA - 25% of viewport - COMPLETELY EMPTY */
-        .uvf-responsive-container::after {
+        /* Bottom black section (25%) - Surface container */
+        .uvf-player-wrapper.uvf-material-you-mobile::after {
           content: '';
-          flex: 0 0 25vh;
-          background: #000;
+          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;
         }
         
-        /* CENTERED VIDEO PLAYER WRAPPER - 50% of viewport */
-        .uvf-responsive-container .uvf-player-wrapper {
-          flex: 1; /* Takes remaining 50% */
-          width: 100vw;
+        /* Material surface container for controls */
+        .uvf-player-wrapper.uvf-material-you-mobile .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;
-          align-items: center;
-          justify-content: center;
-          background: #000;
+          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 {
+          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;
+        }
+        
+        /* Progress bar with chapter markers */
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-section {
+          margin-bottom: 12px;
           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;
         }
         
-        /* Video container fills player wrapper */
-        .uvf-responsive-container .uvf-video-container {
-          width: 100%;
-          height: 100%;
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-bar-wrapper {
+          padding: 12px 0;
           position: relative;
-          background: #000;
-          border-radius: 0;
-          overflow: hidden;
         }
         
-        /* Video element fills container */
-        .uvf-responsive-container .uvf-video {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-          background: #000;
+        .uvf-player-wrapper.uvf-material-you-mobile .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);
         }
         
-        /* CONTROLS STRICTLY CONTAINED WITHIN VIDEO AREA - NEVER EXTEND TO BLACK AREAS */
-        .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;
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-filled {
+          background: var(--uvf-accent-1, #ff0000);
+          box-shadow: 0 0 8px var(--uvf-accent-1, #ff0000);
         }
         
-        /* 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;
-          right: 0 !important;
-          left: auto !important;
-          top: auto !important;
-          /* Ensure no child elements extend beyond container */
-          contain: layout style paint;
+        .uvf-player-wrapper.uvf-material-you-mobile .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);
         }
         
-        /* Ensure all child elements of controls stay within bounds */
-        .uvf-responsive-container .uvf-controls-bar * {
-          max-width: 100%;
-          box-sizing: border-box;
+        .uvf-player-wrapper.uvf-material-you-mobile .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);
         }
         
-        /* Progress section contained within controls */
-        .uvf-progress-section {
-          width: 100%;
-          margin-bottom: 8px;
-          opacity: 1 !important;
-          visibility: visible !important;
-          display: block !important;
+        /* 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;
         }
         
-        /* Progress bar styling */
-        .uvf-progress-bar-wrapper {
-          opacity: 1 !important;
-          visibility: visible !important;
+        .uvf-chapter-marker.intro {
+          background: #4CAF50;
         }
         
-        .uvf-progress-bar {
-          height: 4px;
-          background: rgba(255, 255, 255, 0.3);
-          border-radius: 2px;
+        .uvf-chapter-marker.recap {
+          background: #FFC107;
         }
         
-        .uvf-progress-filled {
-          background: var(--uvf-accent-1, #8B5CF6);
-          height: 100%;
-          border-radius: 2px;
+        .uvf-chapter-marker.credits {
+          background: #9C27B0;
         }
         
-        /* 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;
+        .uvf-progress-bar-wrapper:hover .uvf-chapter-marker {
+          width: 4px;
+          opacity: 1;
         }
         
-        /* Time display visibility */
-        .uvf-time-display {
-          color: #fff;
-          font-size: 12px;
-          font-weight: 500;
-          opacity: 1 !important;
-          visibility: visible !important;
-          display: block !important;
+        /* Material Design control buttons */
+        .uvf-player-wrapper.uvf-material-you-mobile .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);
+          position: relative;
+          overflow: hidden;
         }
         
-        /* Control buttons visibility */
-        .uvf-control-btn {
-          min-width: 44px;
-          min-height: 44px;
-          display: flex !important;
+        /* Material ripple effect */
+        .uvf-player-wrapper.uvf-material-you-mobile .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-player-wrapper.uvf-material-you-mobile .uvf-control-btn:active::before {
+          opacity: 1;
+        }
+        
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-control-btn:active {
+          /* Material elevation level 2 */
+          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 {
+          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));
+          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-player-wrapper.uvf-material-you-mobile .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);
+        }
+        
+        /* Controls row with Material spacing */
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-controls-row {
+          gap: 16px;
+          padding: 0;
           align-items: center;
-          justify-content: center;
-          border-radius: 50%;
+        }
+        
+        /* Time display with Material surface */
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-time-display {
           background: rgba(255, 255, 255, 0.1);
           backdrop-filter: blur(8px);
-          color: #fff;
-          opacity: 1 !important;
-          visibility: visible !important;
-          transition: all 0.2s ease;
+          border-radius: 16px;
+          padding: 6px 12px;
+          font-size: 13px;
+          font-weight: 500;
+          font-feature-settings: 'tnum';
+          /* Material elevation */
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
         }
         
-        .uvf-control-btn:active {
-          transform: scale(0.95);
+        /* 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);
         }
         
-        /* 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-doubletap-indicator.left {
+          left: 15%;
         }
         
-        .uvf-control-btn.play-pause:active {
-          transform: scale(0.92);
-          box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+        .uvf-doubletap-indicator.right {
+          right: 15%;
         }
         
-        .uvf-control-btn svg {
-          fill: #fff;
+        .uvf-doubletap-indicator.active {
           opacity: 1;
+          animation: doubletap-pulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
         
-        /* Right controls */
-        .uvf-right-controls {
-          margin-left: auto;
-          display: flex !important;
-          align-items: center;
-          gap: 8px;
-          opacity: 1 !important;
-          visibility: visible !important;
+        @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;
+          }
         }
         
-        /* Center play button positioned within video */
-        .uvf-center-play-container {
+        .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%);
-          z-index: 8;
+          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-center-play-btn {
-          pointer-events: auto;
+        .uvf-longpress-indicator.active {
+          opacity: 1;
         }
         
-        /* 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;
+        /* 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 {
+          display: none !important;
         }
         
-        /* 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;
+        /* Optimize settings button for Material You */
+        .uvf-player-wrapper.uvf-material-you-mobile #uvf-settings-btn {
+          width: 48px !important;
+          height: 48px !important;
+          min-width: 48px !important;
+          min-height: 48px !important;
+          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 {
@@ -5940,6 +6130,26 @@ 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');
@@ -6158,7 +6368,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 +6379,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');
@@ -6242,7 +6443,9 @@ export class WebPlayer extends BasePlayer {
     // Play/Pause
     centerPlay?.addEventListener('click', () => this.togglePlayPause());
     playPauseBtn?.addEventListener('click', () => this.togglePlayPause());
-    this.video.addEventListener('click', () => this.togglePlayPause());
+    
+    // Material You touch gestures for mobile
+    this.setupMaterialYouGestures(wrapper);
     
     // Update play/pause icons
     this.video.addEventListener('play', () => {
@@ -6617,7 +6820,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 +6841,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 +6887,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')) {
@@ -7187,6 +7411,267 @@ 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
    */
@@ -7327,6 +7812,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 +7824,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 +9040,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 +9053,8 @@ export class WebPlayer extends BasePlayer {
     });
     
     this.debugLog('Settings menu hidden via hideSettingsMenu()');
+    // Resume auto-hide if appropriate
+    this.scheduleHideControls();
   }
 
   /**
@@ -9143,9 +9635,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 +9648,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 +9674,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> {