unified-video-framework 1.4.162 → 1.4.163

package/packages/web/src/WebPlayer.ts

@@ -4329,217 +4329,6 @@ export class WebPlayer extends BasePlayer {
       @media screen and (max-width: 767px) {
         html, body {
           overflow-x: hidden;
-          background: #000;
-        }
-        
-        /* Mobile Portrait Layout - Centered Player with Top/Bottom Black Areas */
-        @media screen and (orientation: portrait) {
-          .uvf-responsive-container {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            height: 100dvh;
-            background: #000;
-            overflow: hidden;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-          }
-          
-          /* Top black area - 25% of viewport */
-          .uvf-responsive-container::before {
-            content: '';
-            flex: 0 0 25vh;
-            background: #000;
-            pointer-events: none;
-          }
-          
-          /* Bottom black area - 25% of viewport */
-          .uvf-responsive-container::after {
-            content: '';
-            flex: 0 0 25vh;
-            background: #000;
-            pointer-events: none;
-          }
-          
-          /* Centered video player wrapper - 50% of viewport */
-          .uvf-responsive-container .uvf-player-wrapper {
-            flex: 1;
-            width: 100vw;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #000;
-            position: relative;
-          }
-          
-          /* Video container fills player wrapper */
-          .uvf-responsive-container .uvf-video-container {
-            width: 100%;
-            height: 100%;
-            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;
-          }
-          
-          /* All controls positioned inside video container */
-          .uvf-controls-bar {
-            position: absolute !important;
-            bottom: 0 !important;
-            left: 0 !important;
-            right: 0 !important;
-            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
-            padding: 12px 16px;
-            padding-bottom: calc(12px + var(--uvf-safe-area-bottom));
-            z-index: 1000;
-            /* Ensure controls are always visible */
-            opacity: 1 !important;
-            visibility: visible !important;
-            display: flex !important;
-            flex-direction: column !important;
-            /* Ensure hardware acceleration */
-            -webkit-transform: translate3d(0,0,0);
-            transform: translate3d(0,0,0);
-          }
-          
-          /* Force controls visibility on mobile portrait */
-          .uvf-responsive-container .uvf-controls-bar {
-            opacity: 1 !important;
-            visibility: visible !important;
-            transform: translateY(0) !important;
-            pointer-events: auto !important;
-          }
-          
-          /* Progress section - ensure visibility */
-          .uvf-progress-section {
-            width: 100%;
-            margin-bottom: 8px;
-            opacity: 1 !important;
-            visibility: visible !important;
-            display: block !important;
-          }
-          
-          /* Progress bar styling */
-          .uvf-progress-bar-wrapper {
-            opacity: 1 !important;
-            visibility: visible !important;
-          }
-          
-          .uvf-progress-bar {
-            height: 4px;
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 2px;
-          }
-          
-          .uvf-progress-filled {
-            background: var(--uvf-accent-1, #8B5CF6);
-            height: 100%;
-            border-radius: 2px;
-          }
-          
-          /* Controls row alignment - ensure visibility */
-          .uvf-controls-row {
-            width: 100%;
-            display: flex !important;
-            align-items: center;
-            justify-content: flex-start;
-            gap: 12px;
-            opacity: 1 !important;
-            visibility: visible !important;
-            margin-top: 8px;
-          }
-          
-          /* Time display visibility */
-          .uvf-time-display {
-            color: #fff;
-            font-size: 12px;
-            font-weight: 500;
-            opacity: 1 !important;
-            visibility: visible !important;
-            display: block !important;
-          }
-          
-          /* Control buttons visibility */
-          .uvf-control-btn {
-            opacity: 1 !important;
-            visibility: visible !important;
-            display: flex !important;
-            color: #fff;
-          }
-          
-          .uvf-control-btn svg {
-            fill: #fff;
-            opacity: 1;
-          }
-          
-          /* Right controls - ensure visibility */
-          .uvf-right-controls {
-            margin-left: auto;
-            display: flex !important;
-            align-items: center;
-            gap: 8px;
-            opacity: 1 !important;
-            visibility: visible !important;
-          }
-          
-          /* Force controls to be always visible in portrait mode */
-          .uvf-responsive-container .uvf-player-wrapper.uvf-controls-visible .uvf-controls-bar,
-          .uvf-responsive-container .uvf-player-wrapper:hover .uvf-controls-bar,
-          .uvf-responsive-container .uvf-controls-bar {
-            opacity: 1 !important;
-            transform: translateY(0) !important;
-            visibility: visible !important;
-            display: flex !important;
-            pointer-events: auto !important;
-          }
-          
-          /* Ensure all child elements are visible */
-          .uvf-responsive-container .uvf-controls-bar * {
-            opacity: 1 !important;
-            visibility: visible !important;
-          }
-          
-          /* Center play button positioned within video */
-          .uvf-center-play-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 8;
-            pointer-events: none;
-          }
-          
-          .uvf-center-play-btn {
-            pointer-events: auto;
-          }
-          
-          /* Top controls within video */
-          .uvf-top-controls {
-            position: absolute;
-            top: calc(12px + var(--uvf-safe-area-top));
-            right: calc(16px + var(--uvf-safe-area-right));
-            z-index: 9;
-          }
-          
-          /* Title bar within video */
-          .uvf-title-bar {
-            position: absolute;
-            top: calc(12px + var(--uvf-safe-area-top));
-            left: calc(16px + var(--uvf-safe-area-left));
-            right: calc(80px + var(--uvf-safe-area-right));
-            z-index: 9;
-            padding: 8px 0;
-          }
         }
         
         .uvf-player-wrapper {
@@ -4563,37 +4352,6 @@ export class WebPlayer extends BasePlayer {
           transform: translateZ(0);
         }
         
-        /* Mobile controls optimization for touch */
-        .uvf-control-btn {
-          min-width: 44px;
-          min-height: 44px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 50%;
-          transition: all 0.2s ease;
-          background: rgba(255, 255, 255, 0.1);
-          backdrop-filter: blur(8px);
-        }
-        
-        .uvf-control-btn:active {
-          transform: scale(0.95);
-          background: rgba(255, 255, 255, 0.2);
-        }
-        
-        /* Play/pause button prominence */
-        .uvf-control-btn.play-pause {
-          background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
-          min-width: 52px;
-          min-height: 52px;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-        }
-        
-        .uvf-control-btn.play-pause:active {
-          transform: scale(0.92);
-          box-shadow: 0 1px 4px rgba(0,0,0,0.4);
-        }
-        
         /* Fix for controls being cut off by virtual keyboard */
         .uvf-controls-bar {
           position: absolute !important;
@@ -4640,61 +4398,244 @@ export class WebPlayer extends BasePlayer {
       }
       
       /* Enhanced Responsive Media Queries with UX Best Practices */
-      /* Mobile devices (portrait) - Enhanced UX with Safe Areas */
+      /* Mobile Portrait Layout - CENTERED PLAYER with TOP/BOTTOM BLACK AREAS */
       @media screen and (max-width: 767px) and (orientation: portrait) {
+        /* CENTERED LAYOUT: 25% top black + 50% player + 25% bottom black */
         .uvf-responsive-container {
+          display: flex;
+          flex-direction: column;
+          height: 100vh;
+          height: 100dvh;
+          background: #000;
+          overflow: hidden;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
           padding: 0;
-          width: 100vw !important;
-          height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
           margin: 0;
-          position: relative;
-          overflow: hidden;
         }
         
-        @supports (height: 100dvh) {
-          .uvf-responsive-container {
-            height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
-          }
+        /* TOP BLACK AREA - 25% of viewport - COMPLETELY EMPTY */
+        .uvf-responsive-container::before {
+          content: '';
+          flex: 0 0 25vh;
+          background: #000;
+          pointer-events: none;
         }
         
-        .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));
+        /* BOTTOM BLACK AREA - 25% of viewport - COMPLETELY EMPTY */
+        .uvf-responsive-container::after {
+          content: '';
+          flex: 0 0 25vh;
+          background: #000;
+          pointer-events: none;
         }
         
-        @supports (height: 100dvh) {
-          .uvf-responsive-container .uvf-player-wrapper {
-            min-height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
-          }
+        /* CENTERED VIDEO PLAYER WRAPPER - 50% of viewport */
+        .uvf-responsive-container .uvf-player-wrapper {
+          flex: 1; /* Takes remaining 50% */
+          width: 100vw;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #000;
+          position: relative;
+          overflow: hidden; /* CRITICAL: Ensure nothing extends beyond this area */
         }
         
+        /* Video container fills player wrapper */
         .uvf-responsive-container .uvf-video-container {
-          width: 100vw !important;
-          height: 100% !important;
-          aspect-ratio: unset !important;
-          min-height: inherit;
+          width: 100%;
+          height: 100%;
+          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;
         }
         
-        /* Enhanced mobile controls bar with safe area padding - iOS Safari specific fixes */
+        /* CONTROLS STRICTLY CONTAINED WITHIN VIDEO AREA - NEVER EXTEND TO BLACK AREAS */
         .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%);
+          /* Keep controls INSIDE video container with margins from all edges */
+          bottom: 20px !important; /* 20px margin from video bottom */
+          left: 16px !important;   /* 16px margin from video left */
+          right: 16px !important;  /* 16px margin from video right */
+          top: auto !important;
+          background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
+          padding: 12px 16px;
+          border-radius: 12px;
+          z-index: 1000;
+          /* Ensure controls are visible and contained */
+          opacity: 1 !important;
+          visibility: visible !important;
+          display: flex !important;
+          flex-direction: column !important;
+          /* Hardware acceleration */
+          -webkit-transform: translate3d(0,0,0);
+          transform: translate3d(0,0,0);
+          /* CRITICAL: Prevent any overflow into black areas */
+          max-height: calc(100% - 40px); /* Leave 20px margin from top and bottom */
+          max-width: calc(100% - 32px);  /* Leave 16px margin from left and right */
           box-sizing: border-box;
-          z-index: 1000 !important;
-          /* iOS Safari specific fixes */
-          transform: translateZ(0);
-          -webkit-transform: translateZ(0);
-          will-change: transform;
-          /* Ensure proper stacking */
-          isolation: isolate;
+          /* Visual containment indicators */
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(10px);
+          contain: layout style paint; /* CSS containment */
+        }
+        
+        /* Force controls and all child elements to stay within video container */
+        .uvf-responsive-container .uvf-controls-bar {
+          opacity: 1 !important;
+          visibility: visible !important;
+          transform: translateY(0) !important;
+          pointer-events: auto !important;
+          /* Ensure no child elements extend beyond container */
+          contain: layout style paint;
+        }
+        
+        /* Ensure all child elements of controls stay within bounds */
+        .uvf-responsive-container .uvf-controls-bar * {
+          max-width: 100%;
+          box-sizing: border-box;
+        }
+        
+        /* Progress section contained within controls */
+        .uvf-progress-section {
+          width: 100%;
+          margin-bottom: 8px;
+          opacity: 1 !important;
+          visibility: visible !important;
+          display: block !important;
+        }
+        
+        /* Progress bar styling */
+        .uvf-progress-bar-wrapper {
+          opacity: 1 !important;
+          visibility: visible !important;
+        }
+        
+        .uvf-progress-bar {
+          height: 4px;
+          background: rgba(255, 255, 255, 0.3);
+          border-radius: 2px;
+        }
+        
+        .uvf-progress-filled {
+          background: var(--uvf-accent-1, #8B5CF6);
+          height: 100%;
+          border-radius: 2px;
+        }
+        
+        /* Controls row alignment - ensure visibility */
+        .uvf-controls-row {
+          width: 100%;
+          display: flex !important;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 12px;
+          opacity: 1 !important;
+          visibility: visible !important;
+          margin-top: 8px;
+        }
+        
+        /* Time display visibility */
+        .uvf-time-display {
+          color: #fff;
+          font-size: 12px;
+          font-weight: 500;
+          opacity: 1 !important;
+          visibility: visible !important;
+          display: block !important;
+        }
+        
+        /* Control buttons visibility */
+        .uvf-control-btn {
+          min-width: 44px;
+          min-height: 44px;
+          display: flex !important;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(8px);
+          color: #fff;
+          opacity: 1 !important;
+          visibility: visible !important;
+          transition: all 0.2s ease;
+        }
+        
+        .uvf-control-btn:active {
+          transform: scale(0.95);
+          background: rgba(255, 255, 255, 0.2);
+        }
+        
+        /* Play/pause button prominence */
+        .uvf-control-btn.play-pause {
+          background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
+          min-width: 52px;
+          min-height: 52px;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
+        
+        .uvf-control-btn.play-pause:active {
+          transform: scale(0.92);
+          box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+        }
+        
+        .uvf-control-btn svg {
+          fill: #fff;
+          opacity: 1;
+        }
+        
+        /* Right controls */
+        .uvf-right-controls {
+          margin-left: auto;
+          display: flex !important;
+          align-items: center;
+          gap: 8px;
+          opacity: 1 !important;
+          visibility: visible !important;
+        }
+        
+        /* Center play button positioned within video */
+        .uvf-center-play-container {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 8;
+          pointer-events: none;
+        }
+        
+        .uvf-center-play-btn {
+          pointer-events: auto;
+        }
+        
+        /* Top controls within video */
+        .uvf-top-controls {
+          position: absolute;
+          top: calc(12px + var(--uvf-safe-area-top));
+          right: calc(16px + var(--uvf-safe-area-right));
+          z-index: 9;
+        }
+        
+        /* Title bar within video */
+        .uvf-title-bar {
+          position: absolute;
+          top: calc(12px + var(--uvf-safe-area-top));
+          left: calc(16px + var(--uvf-safe-area-left));
+          right: calc(80px + var(--uvf-safe-area-right));
+          z-index: 9;
+          padding: 8px 0;
         }
         
         .uvf-progress-section {
@@ -5075,69 +5016,55 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
-      /* Mobile devices (landscape) - Fullscreen with controls inside video */
+      /* Mobile devices (landscape) - Optimized for fullscreen viewing with safe areas */
       @media screen and (max-width: 767px) and (orientation: landscape) {
         .uvf-responsive-container {
-          position: fixed;
-          top: 0;
-          left: 0;
           width: 100vw !important;
-          height: 100vh !important;
-          height: 100dvh !important;
-          background: #000;
-          z-index: 9999;
-          display: block; /* Override portrait flexbox */
+          height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
           margin: 0;
           padding: 0;
+          position: relative;
           overflow: hidden;
         }
         
-        /* Remove pseudo-elements in landscape */
-        .uvf-responsive-container::before,
-        .uvf-responsive-container::after {
-          display: none !important;
+        @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: 100vh !important;
-          height: 100dvh !important;
-          position: relative;
-          display: block;
+          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: 100vh !important;
-          height: 100dvh !important;
-          position: relative;
-          background: #000;
-          overflow: hidden;
-        }
-        
-        .uvf-responsive-container .uvf-video {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-          background: #000;
+          height: 100% !important;
+          aspect-ratio: unset !important;
+          min-height: inherit;
         }
         
-        /* Compact controls for landscape - positioned inside video container */
+        /* Compact controls for landscape with safe area padding */
         .uvf-controls-bar {
-          position: absolute !important;
-          bottom: 0 !important;
-          left: 0 !important;
-          right: 0 !important;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
           padding: 10px 12px;
           padding-bottom: calc(10px + var(--uvf-safe-area-bottom));
           padding-left: calc(12px + var(--uvf-safe-area-left));
           padding-right: calc(12px + var(--uvf-safe-area-right));
-          background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
+          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;
-          /* Ensure hardware acceleration */
-          -webkit-transform: translate3d(0,0,0);
-          transform: translate3d(0,0,0);
         }
         
         .uvf-progress-section {
@@ -5173,36 +5100,16 @@ export class WebPlayer extends BasePlayer {
           height: 22px;
         }
         
-        /* Compact top controls with safe area padding - inside video container */
+        /* Compact top controls with safe area padding */
         .uvf-top-controls {
-          position: absolute;
           top: calc(8px + var(--uvf-safe-area-top));
           right: calc(12px + var(--uvf-safe-area-right));
           gap: 6px;
-          z-index: 9;
-        }
-        
-        /* Center play button positioned within video container */
-        .uvf-center-play-container {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          z-index: 8;
-          pointer-events: none;
-        }
-        
-        .uvf-center-play-btn {
-          pointer-events: auto;
         }
         
         .uvf-title-bar {
-          position: absolute;
-          top: calc(8px + var(--uvf-safe-area-top));
-          left: calc(12px + var(--uvf-safe-area-left));
-          right: calc(80px + var(--uvf-safe-area-right));
-          z-index: 9;
-          padding: 8px 0;
+          padding: 8px 12px;
+          padding-top: calc(8px + var(--uvf-safe-area-top));
           padding-left: calc(12px + var(--uvf-safe-area-left));
           padding-right: calc(12px + var(--uvf-safe-area-right));
         }
@@ -5390,234 +5297,13 @@ export class WebPlayer extends BasePlayer {
       
       /* Large screens - Enhanced desktop experience */
       @media screen and (min-width: 1024px) {
-        /* Reset mobile portrait styles for desktop */
         .uvf-responsive-container {
-          display: block !important; /* Override mobile flexbox */
-          position: relative !important; /* Override mobile fixed */
-          height: auto !important; /* Override mobile viewport height */
-          background: transparent !important; /* Override mobile black background */
           padding: 10px;
         }
         
-        /* Remove mobile pseudo-elements on desktop */
-        .uvf-responsive-container::before,
-        .uvf-responsive-container::after {
-          display: none !important;
-        }
-        
-        /* Desktop player wrapper */
-        .uvf-responsive-container .uvf-player-wrapper {
-          width: 100% !important; /* Override mobile width */
-          height: auto !important; /* Override mobile height */
-          display: block !important; /* Override mobile flexbox */
-          position: relative !important;
-          max-width: none; /* Allow full width if needed */
-        }
-        
-        /* Desktop video container */
-        .uvf-responsive-container .uvf-video-container {
-          width: 100% !important;
-          height: auto !important;
-          position: relative;
-          aspect-ratio: 16/9; /* Maintain desktop aspect ratio */
-          background: #000;
-        }
-        
-        /* Desktop controls positioning */
         .uvf-controls-bar {
-          position: absolute !important;
-          bottom: 0 !important;
-          left: 0 !important;
-          right: 0 !important;
           padding: 20px;
           background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 60%, var(--uvf-overlay-transparent) 100%);
-          /* Reset mobile overrides for desktop */
-          opacity: 0; /* Default hidden state on desktop */
-          transform: translateY(10px); /* Default hidden position */
-          transition: all 0.3s ease;
-        }
-        
-        /* Desktop hover behavior */
-        .uvf-player-wrapper:hover .uvf-controls-bar,
-        .uvf-player-wrapper.controls-visible .uvf-controls-bar {
-          opacity: 1 !important;
-          transform: translateY(0) !important;
-        }
-        
-        /* Desktop progress section */
-        .uvf-progress-section {
-          margin-bottom: 15px;
-          width: 100%;
-        }
-        
-        /* Desktop controls row */
-        .uvf-controls-row {
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-          gap: 14px;
-          width: 100%;
-        }
-        
-        /* Desktop control buttons */
-        .uvf-control-btn {
-          width: 40px;
-          height: 40px;
-          min-width: 40px;
-          min-height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border: none;
-          border-radius: 50%;
-          background: rgba(255, 255, 255, 0.1);
-          color: #fff;
-          cursor: pointer;
-          transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
-          backdrop-filter: blur(8px);
-        }
-        
-        .uvf-control-btn:hover {
-          transform: scale(1.1);
-          background: rgba(255, 255, 255, 0.2);
-        }
-        
-        .uvf-control-btn.play-pause {
-          width: 50px;
-          height: 50px;
-          min-width: 50px;
-          min-height: 50px;
-          background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
-          box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-        }
-        
-        .uvf-control-btn.play-pause:hover {
-          transform: scale(1.08);
-          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-        }
-        
-        .uvf-control-btn svg {
-          width: 20px;
-          height: 20px;
-          fill: #fff;
-        }
-        
-        .uvf-control-btn.play-pause svg {
-          width: 24px;
-          height: 24px;
-        }
-        
-        /* Desktop right controls */
-        .uvf-right-controls {
-          margin-left: auto;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-        }
-        
-        /* Desktop time display */
-        .uvf-time-display {
-          color: #fff;
-          font-size: 14px;
-          font-weight: 500;
-          padding: 0 10px;
-        }
-        
-        /* Desktop volume control */
-        .uvf-volume-panel {
-          display: flex !important; /* Show volume slider on desktop */
-          align-items: center;
-          gap: 8px;
-        }
-        
-        .uvf-volume-slider {
-          width: 80px;
-          height: 4px;
-          background: rgba(255, 255, 255, 0.3);
-          border-radius: 2px;
-          cursor: pointer;
-        }
-        
-        /* Desktop settings and other controls */
-        .uvf-quality-badge {
-          display: block;
-          background: rgba(255, 255, 255, 0.1);
-          color: #fff;
-          padding: 4px 8px;
-          border-radius: 4px;
-          font-size: 11px;
-          font-weight: 500;
-        }
-        
-        /* Desktop progress bar */
-        .uvf-progress-bar {
-          height: 2px;
-          background: rgba(255, 255, 255, 0.2);
-          border-radius: 4px;
-          cursor: pointer;
-          transition: height 0.2s ease;
-        }
-        
-        .uvf-progress-bar-wrapper:hover .uvf-progress-bar {
-          height: 4px;
-        }
-        
-        .uvf-progress-filled {
-          background: var(--uvf-accent-1, #8B5CF6);
-          height: 100%;
-          border-radius: 4px;
-        }
-        
-        .uvf-progress-handle {
-          width: 12px;
-          height: 12px;
-          background: #fff;
-          border-radius: 50%;
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          cursor: grab;
-          opacity: 0;
-          transition: opacity 0.2s ease;
-        }
-        
-        .uvf-progress-bar-wrapper:hover .uvf-progress-handle {
-          opacity: 1;
-        }
-        
-        /* Desktop center play button */
-        .uvf-center-play-container {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          z-index: 8;
-        }
-        
-        .uvf-center-play-btn {
-          width: clamp(56px, 10vw, 72px);
-          height: clamp(56px, 10vw, 72px);
-          background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
-          border: none;
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          box-shadow: 0 4px 16px rgba(0,0,0,0.3);
-          transition: all 0.25s ease;
-        }
-        
-        .uvf-center-play-btn:hover {
-          transform: scale(1.1);
-          box-shadow: 0 6px 20px rgba(0,0,0,0.4);
-        }
-        
-        .uvf-center-play-btn svg {
-          width: clamp(24px, 4vw, 30px);
-          height: clamp(24px, 4vw, 30px);
-          fill: #fff;
-          margin-left: 2px;
         }
         
         .uvf-progress-section {
@@ -8765,27 +8451,8 @@ export class WebPlayer extends BasePlayer {
     // Speed options
     settingsMenu.querySelectorAll('.speed-option').forEach(option => {
       option.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        
         const speed = parseFloat((e.target as HTMLElement).dataset.speed || '1');
-        
-        // Update active state immediately
-        this.updateSettingsActiveStates('speed-option', e.target as HTMLElement);
-        
-        // Set the speed
         this.setPlaybackRateFromSettings(speed);
-        
-        // Update the accordion header text immediately
-        const speedLabel = speed === 1 ? 'Normal' : `${speed}x`;
-        const accordionCurrent = option.closest('.uvf-accordion-item')?.querySelector('.uvf-accordion-current');
-        if (accordionCurrent) {
-          accordionCurrent.textContent = speedLabel;
-        }
-        
-        this.debugLog(`Speed selected: ${speed}x`);
-        
-        // Update accordion after selection
         this.updateAccordionAfterSelection('speed');
       });
     });
@@ -8793,28 +8460,8 @@ export class WebPlayer extends BasePlayer {
     // Quality options
     settingsMenu.querySelectorAll('.quality-option').forEach(option => {
       option.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        
         const quality = (e.target as HTMLElement).dataset.quality || 'auto';
-        
-        // Update active state immediately
-        this.updateSettingsActiveStates('quality-option', e.target as HTMLElement);
-        
-        // Set the quality
         this.setQualityFromSettings(quality);
-        
-        // Update the accordion header text immediately
-        const qualityItem = this.availableQualities.find(q => q.value === quality);
-        const qualityLabel = qualityItem ? qualityItem.label : 'Auto';
-        const accordionCurrent = option.closest('.uvf-accordion-item')?.querySelector('.uvf-accordion-current');
-        if (accordionCurrent) {
-          accordionCurrent.textContent = qualityLabel;
-        }
-        
-        this.debugLog(`Quality selected: ${quality} (${qualityLabel})`);
-        
-        // Update accordion after selection
         this.updateAccordionAfterSelection('quality');
       });
     });
@@ -8822,28 +8469,8 @@ export class WebPlayer extends BasePlayer {
     // Subtitle options
     settingsMenu.querySelectorAll('.subtitle-option').forEach(option => {
       option.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        
         const subtitle = (e.target as HTMLElement).dataset.subtitle || 'off';
-        
-        // Update active state immediately
-        this.updateSettingsActiveStates('subtitle-option', e.target as HTMLElement);
-        
-        // Set the subtitle
         this.setSubtitle(subtitle);
-        
-        // Update the accordion header text immediately
-        const subtitleItem = this.availableSubtitles.find(s => s.value === subtitle);
-        const subtitleLabel = subtitleItem ? subtitleItem.label : 'Off';
-        const accordionCurrent = option.closest('.uvf-accordion-item')?.querySelector('.uvf-accordion-current');
-        if (accordionCurrent) {
-          accordionCurrent.textContent = subtitleLabel;
-        }
-        
-        this.debugLog(`Subtitle selected: ${subtitle} (${subtitleLabel})`);
-        
-        // Update accordion after selection
         this.updateAccordionAfterSelection('subtitles');
       });
     });
@@ -8899,25 +8526,13 @@ export class WebPlayer extends BasePlayer {
    * Update accordion after user makes a selection
    */
   private updateAccordionAfterSelection(section: string): void {
-    // Close the accordion section after selection
-    const settingsMenu = document.getElementById('uvf-settings-menu');
-    if (settingsMenu) {
-      settingsMenu.querySelectorAll('.uvf-accordion-item.expanded').forEach(item => {
-        item.classList.remove('expanded');
-      });
-    }
-    
-    // Update the current values and refresh the menu
+    // Just update the current values without closing
+    // User can manually close or it will close when they click outside
     setTimeout(() => {
       // Refresh the menu to update current values
       this.generateAccordionMenu();
       this.setupSettingsEventListeners();
-    }, 50);
-    
-    // Auto-hide the settings menu after selection (optional)
-    setTimeout(() => {
-      this.hideSettingsMenu();
-    }, 150);
+    }, 100);
   }
 
   /**