unified-video-framework 1.4.161 → 1.4.162

package/packages/web/src/WebPlayer.ts

@@ -4402,32 +4402,111 @@ export class WebPlayer extends BasePlayer {
             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);
           }
           
-          /* Progress section */
+          /* 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 */
+          /* Controls row alignment - ensure visibility */
           .uvf-controls-row {
             width: 100%;
-            display: flex;
+            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;
           }
           
-          /* Right controls */
+          .uvf-control-btn svg {
+            fill: #fff;
+            opacity: 1;
+          }
+          
+          /* Right controls - ensure visibility */
           .uvf-right-controls {
             margin-left: auto;
-            display: flex;
+            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 */
@@ -5311,13 +5390,234 @@ 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 {
@@ -8465,8 +8765,27 @@ 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');
       });
     });
@@ -8474,8 +8793,28 @@ 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');
       });
     });
@@ -8483,8 +8822,28 @@ 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');
       });
     });
@@ -8540,13 +8899,25 @@ export class WebPlayer extends BasePlayer {
    * Update accordion after user makes a selection
    */
   private updateAccordionAfterSelection(section: string): void {
-    // Just update the current values without closing
-    // User can manually close or it will close when they click outside
+    // 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
     setTimeout(() => {
       // Refresh the menu to update current values
       this.generateAccordionMenu();
       this.setupSettingsEventListeners();
-    }, 100);
+    }, 50);
+    
+    // Auto-hide the settings menu after selection (optional)
+    setTimeout(() => {
+      this.hideSettingsMenu();
+    }, 150);
   }
 
   /**