unified-video-framework 1.4.137 → 1.4.139

package/packages/web/src/WebPlayer.ts

@@ -2337,28 +2337,33 @@ export class WebPlayer extends BasePlayer {
         position: absolute;
         bottom: 50px;
         right: 0;
-        background: rgba(0,0,0,0.95);
+        background: rgba(0,0,0,0.92);
         backdrop-filter: blur(20px);
-        border: 1px solid rgba(255,255,255,0.1);
+        -webkit-backdrop-filter: blur(20px);
+        border: 1px solid rgba(255,255,255,0.15);
         border-radius: 12px;
-        padding: 10px 0;
-        min-width: 200px;
+        padding: 8px 0;
+        min-width: 220px;
+        max-width: 280px;
         max-height: 60vh;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
         overscroll-behavior: contain;
-        z-index: 1000; /* Ensure settings menu appears above other elements */
+        z-index: 9999;
+        box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 8px 25px rgba(0,0,0,0.3);
         /* Firefox */
         scrollbar-width: thin;
-        scrollbar-color: var(--uvf-firefox-scrollbar-color) transparent;
+        scrollbar-color: rgba(255,255,255,0.3) transparent;
         /* Avoid layout shift when scrollbar appears */
         scrollbar-gutter: stable both-edges;
         /* Space on the right so content doesn't hug the scrollbar */
-        padding-right: 6px;
+        padding-right: 8px;
+        /* Initial hidden state */
         opacity: 0;
         visibility: hidden;
-        transform: translateY(10px);
-        transition: all 0.3s ease;
+        transform: translateY(15px) scale(0.95);
+        pointer-events: none;
+        transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
       }
       
       /* WebKit-based browsers (Chrome, Edge, Safari) */
@@ -2399,65 +2404,87 @@ export class WebPlayer extends BasePlayer {
       .uvf-settings-menu.active {
         opacity: 1;
         visibility: visible;
-        transform: translateY(0);
+        transform: translateY(0) scale(1);
+        pointer-events: all;
       }
       
-      /* Accordion Styles */
+      /* Improved Accordion Styles */
       .uvf-settings-accordion {
-        padding: 0;
+        padding: 8px 0;
       }
       
       .uvf-accordion-item {
-        border-bottom: 1px solid rgba(255,255,255,0.08);
+        margin-bottom: 2px;
+        border-radius: 8px;
+        overflow: hidden;
+        background: rgba(255,255,255,0.03);
       }
       
       .uvf-accordion-item:last-child {
-        border-bottom: none;
+        margin-bottom: 0;
       }
       
       .uvf-accordion-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 14px 18px;
+        padding: 12px 16px;
         cursor: pointer;
         transition: all 0.2s ease;
-        border-radius: 8px;
-        margin: 4px 8px;
+        background: rgba(255,255,255,0.05);
+        border-bottom: 1px solid rgba(255,255,255,0.08);
       }
       
       .uvf-accordion-header:hover {
+        background: rgba(255,255,255,0.1);
+      }
+      
+      .uvf-accordion-item.expanded .uvf-accordion-header {
         background: rgba(255,255,255,0.08);
-        transform: translateX(2px);
+        border-bottom-color: rgba(255,255,255,0.12);
       }
       
       .uvf-accordion-title {
         display: flex;
         align-items: center;
-        gap: 10px;
-        font-size: 14px;
+        gap: 8px;
+        font-size: 13px;
         font-weight: 500;
         color: #fff;
+        flex: 1;
       }
       
       .uvf-accordion-icon {
-        font-size: 16px;
-        opacity: 0.8;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.9;
+        width: 16px;
+        height: 16px;
+      }
+      
+      .uvf-accordion-icon svg {
+        width: 14px;
+        height: 14px;
+        fill: currentColor;
       }
       
       .uvf-accordion-current {
-        font-size: 12px;
-        color: rgba(255,255,255,0.7);
-        background: rgba(255,255,255,0.1);
-        padding: 4px 8px;
-        border-radius: 12px;
-        font-weight: 500;
+        font-size: 11px;
+        color: var(--uvf-accent-1);
+        background: rgba(255,255,255,0.08);
+        padding: 2px 8px;
+        border-radius: 8px;
+        font-weight: 600;
+        margin-right: 8px;
       }
       
       .uvf-accordion-arrow {
-        font-size: 12px;
-        color: rgba(255,255,255,0.6);
-        transition: transform 0.3s ease;
+        font-size: 10px;
+        color: rgba(255,255,255,0.7);
+        transition: transform 0.25s ease;
+        width: 16px;
+        text-align: center;
       }
       
       .uvf-accordion-item.expanded .uvf-accordion-arrow {
@@ -2467,13 +2494,46 @@ export class WebPlayer extends BasePlayer {
       .uvf-accordion-content {
         max-height: 0;
         overflow: hidden;
-        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
-        padding: 0 18px;
+        transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        background: rgba(0,0,0,0.2);
       }
       
       .uvf-accordion-item.expanded .uvf-accordion-content {
-        max-height: 300px;
-        padding: 8px 18px 16px;
+        max-height: 250px;
+      }
+      
+      /* Settings options within accordion */
+      .uvf-accordion-content .uvf-settings-option {
+        color: #fff;
+        font-size: 13px;
+        padding: 10px 16px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-bottom: 1px solid rgba(255,255,255,0.05);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      
+      .uvf-accordion-content .uvf-settings-option:last-child {
+        border-bottom: none;
+      }
+      
+      .uvf-accordion-content .uvf-settings-option:hover {
+        background: rgba(255,255,255,0.06);
+        padding-left: 20px;
+      }
+      
+      .uvf-accordion-content .uvf-settings-option.active {
+        color: var(--uvf-accent-1);
+        background: rgba(255,255,255,0.08);
+        font-weight: 600;
+      }
+      
+      .uvf-accordion-content .uvf-settings-option.active::after {
+        content: '✓';
+        font-size: 12px;
+        opacity: 0.8;
       }
       
       .uvf-settings-empty {
@@ -4677,7 +4737,7 @@ export class WebPlayer extends BasePlayer {
       settingsMenu.id = 'uvf-settings-menu';
       // Initially empty - will be populated by updateSettingsMenu method
       settingsMenu.innerHTML = '';
-      settingsMenu.style.display = 'none';
+      // CSS handles initial hidden state
       settingsContainer.appendChild(settingsMenu);
       rightControls.appendChild(settingsContainer);
       
@@ -5126,22 +5186,29 @@ export class WebPlayer extends BasePlayer {
       
       settingsMenu?.classList.toggle('active');
       
-      // Force visibility if menu is not showing properly
-      if (settingsMenu && settingsMenu.classList.contains('active')) {
-        settingsMenu.style.display = 'block';
-        settingsMenu.style.visibility = 'visible';
-        settingsMenu.style.opacity = '1';
-        settingsMenu.style.transform = 'translateY(0)';
-        settingsMenu.style.zIndex = '9999';
-        settingsMenu.style.position = 'absolute';
-        settingsMenu.style.bottom = '50px';
-        settingsMenu.style.right = '0';
-        settingsMenu.style.background = 'rgba(0,0,0,0.9)';
-        settingsMenu.style.border = '1px solid rgba(255,255,255,0.2)';
-        settingsMenu.style.borderRadius = '8px';
-        settingsMenu.style.minWidth = '200px';
-        settingsMenu.style.padding = '10px 0';
-        this.debugLog('Applied fallback styles to force menu visibility');
+      // Force visibility if menu is active, hide if not active
+      if (settingsMenu) {
+        if (settingsMenu.classList.contains('active')) {
+          settingsMenu.style.display = 'block';
+          settingsMenu.style.visibility = 'visible';
+          settingsMenu.style.opacity = '1';
+          settingsMenu.style.transform = 'translateY(0)';
+          settingsMenu.style.zIndex = '9999';
+          settingsMenu.style.position = 'absolute';
+          settingsMenu.style.bottom = '50px';
+          settingsMenu.style.right = '0';
+          settingsMenu.style.background = 'rgba(0,0,0,0.9)';
+          settingsMenu.style.border = '1px solid rgba(255,255,255,0.2)';
+          settingsMenu.style.borderRadius = '8px';
+          settingsMenu.style.minWidth = '200px';
+          settingsMenu.style.padding = '10px 0';
+          this.debugLog('Applied fallback styles to show menu');
+        } else {
+          settingsMenu.style.display = 'none';
+          settingsMenu.style.visibility = 'hidden';
+          settingsMenu.style.opacity = '0';
+          this.debugLog('Applied fallback styles to hide menu');
+        }
       }
       
       this.debugLog('Settings menu classes after toggle:', Array.from(settingsMenu?.classList || []).join(' '));
@@ -5172,11 +5239,26 @@ export class WebPlayer extends BasePlayer {
     stopCastBtn?.addEventListener('click', () => this.stopCasting());
     shareBtn?.addEventListener('click', () => this.shareVideo());
     
-    // Hide settings menu when clicking outside
+    // Hide settings menu when clicking outside or pressing Escape
     document.addEventListener('click', (e) => {
       if (!(e.target as HTMLElement).closest('#uvf-settings-btn') && 
           !(e.target as HTMLElement).closest('#uvf-settings-menu')) {
         settingsMenu?.classList.remove('active');
+        // Also close any expanded accordions
+        settingsMenu?.querySelectorAll('.uvf-accordion-item.expanded').forEach(item => {
+          item.classList.remove('expanded');
+        });
+      }
+    });
+    
+    // Add Escape key handler for settings menu
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && settingsMenu?.classList.contains('active')) {
+        settingsMenu.classList.remove('active');
+        // Also close any expanded accordions
+        settingsMenu.querySelectorAll('.uvf-accordion-item.expanded').forEach(item => {
+          item.classList.remove('expanded');
+        });
       }
     });
   }
@@ -6439,7 +6521,11 @@ export class WebPlayer extends BasePlayer {
         <div class="uvf-accordion-item">
           <div class="uvf-accordion-header" data-section="speed">
             <div class="uvf-accordion-title">
-              <span class="uvf-accordion-icon">⚡</span>
+              <span class="uvf-accordion-icon">
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+                  <path d="M13,24l11-12L13,0V7.5C5.7,7.5,0,13.2,0,20.5C0,22.4,0.6,24.2,1.6,25.7C4.8,21.8,8.7,19.5,13,19.5V24z"/>
+                </svg>
+              </span>
               <span>Playback Speed</span>
             </div>
             <div class="uvf-accordion-current">${currentSpeedLabel}</div>
@@ -6467,7 +6553,11 @@ export class WebPlayer extends BasePlayer {
         <div class="uvf-accordion-item">
           <div class="uvf-accordion-header" data-section="quality">
             <div class="uvf-accordion-title">
-              <span class="uvf-accordion-icon">🎬</span>
+              <span class="uvf-accordion-icon">
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+                  <path d="M9,4v3h5V4h4V16H15v-3H9v3H5V4H9z M8,5H6v10h2V11h6v4h2V5h-2v4H8V5z"/>
+                </svg>
+              </span>
               <span>Quality</span>
             </div>
             <div class="uvf-accordion-current">${currentQualityLabel}</div>
@@ -6492,7 +6582,11 @@ export class WebPlayer extends BasePlayer {
         <div class="uvf-accordion-item">
           <div class="uvf-accordion-header" data-section="subtitles">
             <div class="uvf-accordion-title">
-              <span class="uvf-accordion-icon">💬</span>
+              <span class="uvf-accordion-icon">
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+                  <path d="M20,4H4C2.89,4 2,4.89 2,6V18C2,19.11 2.89,20 4,20H20C21.11,20 22,19.11 22,18V6C22,4.89 21.11,4 20,4M20,18H4V6H20V18M6,10H8V12H6V10M6,14H14V16H6V14M16,14H18V16H16V14M10,10H18V12H10V10Z"/>
+                </svg>
+              </span>
               <span>Subtitles</span>
             </div>
             <div class="uvf-accordion-current">${currentSubtitleLabel}</div>
@@ -6659,41 +6753,35 @@ export class WebPlayer extends BasePlayer {
   private toggleAccordionSection(accordionItem: Element, section: string): void {
     const isExpanded = accordionItem.classList.contains('expanded');
     
-    // Close all other sections
+    // If clicking the same section that's already expanded, just close it
+    if (isExpanded) {
+      accordionItem.classList.remove('expanded');
+      return;
+    }
+    
+    // Otherwise, close all sections and open the clicked one
     const settingsMenu = document.getElementById('uvf-settings-menu');
     if (settingsMenu) {
       settingsMenu.querySelectorAll('.uvf-accordion-item.expanded').forEach(item => {
-        if (item !== accordionItem) {
-          item.classList.remove('expanded');
-        }
+        item.classList.remove('expanded');
       });
     }
     
-    // Toggle current section
-    if (isExpanded) {
-      accordionItem.classList.remove('expanded');
-    } else {
-      accordionItem.classList.add('expanded');
-    }
+    // Open the clicked section
+    accordionItem.classList.add('expanded');
   }
   
   /**
    * Update accordion after user makes a selection
    */
   private updateAccordionAfterSelection(section: string): void {
-    // Close the accordion section after selection
+    // Just update the current values without closing
+    // User can manually close or it will close when they click outside
     setTimeout(() => {
-      const settingsMenu = document.getElementById('uvf-settings-menu');
-      const accordionItem = settingsMenu?.querySelector(`[data-section="${section}"]`)?.parentElement;
-      
-      if (accordionItem) {
-        accordionItem.classList.remove('expanded');
-      }
-      
       // Refresh the menu to update current values
       this.generateAccordionMenu();
       this.setupSettingsEventListeners();
-    }, 300);
+    }, 100);
   }
 
   /**