unified-video-framework 1.4.136 → 1.4.138

package/packages/web/src/WebPlayer.ts

@@ -2402,6 +2402,141 @@ export class WebPlayer extends BasePlayer {
         transform: translateY(0);
       }
       
+      /* Improved Accordion Styles */
+      .uvf-settings-accordion {
+        padding: 8px 0;
+      }
+      
+      .uvf-accordion-item {
+        margin-bottom: 2px;
+        border-radius: 8px;
+        overflow: hidden;
+        background: rgba(255,255,255,0.03);
+      }
+      
+      .uvf-accordion-item:last-child {
+        margin-bottom: 0;
+      }
+      
+      .uvf-accordion-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        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);
+        border-bottom-color: rgba(255,255,255,0.12);
+      }
+      
+      .uvf-accordion-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        font-weight: 500;
+        color: #fff;
+        flex: 1;
+      }
+      
+      .uvf-accordion-icon {
+        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: 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: 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 {
+        transform: rotate(180deg);
+      }
+      
+      .uvf-accordion-content {
+        max-height: 0;
+        overflow: hidden;
+        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: 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 {
+        padding: 20px;
+        text-align: center;
+        color: rgba(255,255,255,0.6);
+        font-size: 14px;
+      }
+      
       .uvf-settings-group {
         padding: 10px 0;
         border-bottom: 1px solid rgba(255,255,255,0.1);
@@ -5091,11 +5226,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');
+        });
       }
     });
   }
@@ -6338,53 +6488,113 @@ export class WebPlayer extends BasePlayer {
     this.debugLog('Available subtitles:', this.availableSubtitles);
     this.debugLog('Settings config:', this.settingsConfig);
 
-    let menuHTML = '';
+    // Generate accordion-style menu
+    this.generateAccordionMenu();
+  }
+  
+  /**
+   * Generate accordion-style settings menu
+   */
+  private generateAccordionMenu(): void {
+    const settingsMenu = document.getElementById('uvf-settings-menu');
+    if (!settingsMenu) return;
 
-    // Playback Speed Section (only if enabled in config)
+    let menuHTML = '<div class="uvf-settings-accordion">';
+
+    // Playback Speed Accordion Section (only if enabled in config)
     if (this.settingsConfig.speed) {
+      const currentSpeedLabel = this.currentPlaybackRate === 1 ? 'Normal' : `${this.currentPlaybackRate}x`;
       menuHTML += `
-        <div class="uvf-settings-group">
-          <div class="uvf-settings-label">Playback Speed</div>
-          <div class="uvf-settings-option speed-option" data-speed="0.25">0.25x</div>
-          <div class="uvf-settings-option speed-option" data-speed="0.5">0.5x</div>
-          <div class="uvf-settings-option speed-option" data-speed="0.75">0.75x</div>
-          <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 1 ? 'active' : ''}" data-speed="1">Normal</div>
-          <div class="uvf-settings-option speed-option" data-speed="1.25">1.25x</div>
-          <div class="uvf-settings-option speed-option" data-speed="1.5">1.5x</div>
-          <div class="uvf-settings-option speed-option" data-speed="1.75">1.75x</div>
-          <div class="uvf-settings-option speed-option" data-speed="2">2x</div>
+        <div class="uvf-accordion-item">
+          <div class="uvf-accordion-header" data-section="speed">
+            <div class="uvf-accordion-title">
+              <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>
+            <div class="uvf-accordion-arrow">▼</div>
+          </div>
+          <div class="uvf-accordion-content" data-section="speed">
+            <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 0.25 ? 'active' : ''}" data-speed="0.25">0.25x</div>
+            <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 0.5 ? 'active' : ''}" data-speed="0.5">0.5x</div>
+            <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 0.75 ? 'active' : ''}" data-speed="0.75">0.75x</div>
+            <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 1 ? 'active' : ''}" data-speed="1">Normal</div>
+            <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 1.25 ? 'active' : ''}" data-speed="1.25">1.25x</div>
+            <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 1.5 ? 'active' : ''}" data-speed="1.5">1.5x</div>
+            <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 1.75 ? 'active' : ''}" data-speed="1.75">1.75x</div>
+            <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 2 ? 'active' : ''}" data-speed="2">2x</div>
+          </div>
         </div>`;
     }
 
-    // Quality Section (only if enabled in config and qualities detected)
+    // Quality Accordion Section (only if enabled in config and qualities detected)
     if (this.settingsConfig.quality && this.availableQualities.length > 0) {
-      menuHTML += `<div class="uvf-settings-group">
-        <div class="uvf-settings-label">Quality</div>`;
+      const currentQuality = this.availableQualities.find(q => q.value === this.currentQuality);
+      const currentQualityLabel = currentQuality ? currentQuality.label : 'Auto';
+      
+      menuHTML += `
+        <div class="uvf-accordion-item">
+          <div class="uvf-accordion-header" data-section="quality">
+            <div class="uvf-accordion-title">
+              <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>
+            <div class="uvf-accordion-arrow">▼</div>
+          </div>
+          <div class="uvf-accordion-content" data-section="quality">`;
       
       this.availableQualities.forEach(quality => {
         const isActive = quality.value === this.currentQuality ? 'active' : '';
         menuHTML += `<div class="uvf-settings-option quality-option ${isActive}" data-quality="${quality.value}">${quality.label}</div>`;
       });
       
-      menuHTML += `</div>`;
+      menuHTML += `</div></div>`;
     }
 
-    // Subtitles Section (only if enabled in config and subtitles available)
+    // Subtitles Accordion Section (only if enabled in config and subtitles available)
     if (this.settingsConfig.subtitles && this.availableSubtitles.length > 0) {
-      menuHTML += `<div class="uvf-settings-group">
-        <div class="uvf-settings-label">Subtitles/Captions</div>`;
+      const currentSubtitle = this.availableSubtitles.find(s => s.value === this.currentSubtitle);
+      const currentSubtitleLabel = currentSubtitle ? currentSubtitle.label : 'Off';
+      
+      menuHTML += `
+        <div class="uvf-accordion-item">
+          <div class="uvf-accordion-header" data-section="subtitles">
+            <div class="uvf-accordion-title">
+              <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>
+            <div class="uvf-accordion-arrow">▼</div>
+          </div>
+          <div class="uvf-accordion-content" data-section="subtitles">`;
       
       this.availableSubtitles.forEach(subtitle => {
         const isActive = subtitle.value === this.currentSubtitle ? 'active' : '';
         menuHTML += `<div class="uvf-settings-option subtitle-option ${isActive}" data-subtitle="${subtitle.value}">${subtitle.label}</div>`;
       });
       
-      menuHTML += `</div>`;
+      menuHTML += `</div></div>`;
     }
     
+    // Close accordion container
+    menuHTML += '</div>';
+    
     // If no sections are enabled or available, show a message
-    if (!menuHTML.trim()) {
-      menuHTML = '<div class="uvf-settings-group"><div class="uvf-settings-label">No settings available</div></div>';
+    if (menuHTML === '<div class="uvf-settings-accordion"></div>') {
+      menuHTML = '<div class="uvf-settings-accordion"><div class="uvf-settings-empty">No settings available</div></div>';
     }
 
     this.debugLog('Generated menu HTML length:', menuHTML.length);
@@ -6475,18 +6685,33 @@ export class WebPlayer extends BasePlayer {
   }
 
   /**
-   * Setup event listeners for settings menu options
+   * Setup event listeners for accordion-style settings menu
    */
   private setupSettingsEventListeners(): void {
     const settingsMenu = document.getElementById('uvf-settings-menu');
     if (!settingsMenu) return;
 
+    // Accordion header click handlers
+    settingsMenu.querySelectorAll('.uvf-accordion-header').forEach(header => {
+      header.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const accordionItem = header.parentElement;
+        const section = header.getAttribute('data-section');
+        
+        if (accordionItem && section) {
+          this.toggleAccordionSection(accordionItem, section);
+        }
+      });
+    });
+
     // Speed options
     settingsMenu.querySelectorAll('.speed-option').forEach(option => {
       option.addEventListener('click', (e) => {
         const speed = parseFloat((e.target as HTMLElement).dataset.speed || '1');
         this.setPlaybackRateFromSettings(speed);
-        this.updateSettingsActiveStates('speed-option', e.target as HTMLElement);
+        this.updateAccordionAfterSelection('speed');
       });
     });
 
@@ -6495,7 +6720,7 @@ export class WebPlayer extends BasePlayer {
       option.addEventListener('click', (e) => {
         const quality = (e.target as HTMLElement).dataset.quality || 'auto';
         this.setQualityFromSettings(quality);
-        this.updateSettingsActiveStates('quality-option', e.target as HTMLElement);
+        this.updateAccordionAfterSelection('quality');
       });
     });
 
@@ -6504,10 +6729,47 @@ export class WebPlayer extends BasePlayer {
       option.addEventListener('click', (e) => {
         const subtitle = (e.target as HTMLElement).dataset.subtitle || 'off';
         this.setSubtitle(subtitle);
-        this.updateSettingsActiveStates('subtitle-option', e.target as HTMLElement);
+        this.updateAccordionAfterSelection('subtitles');
       });
     });
   }
+  
+  /**
+   * Toggle accordion section
+   */
+  private toggleAccordionSection(accordionItem: Element, section: string): void {
+    const isExpanded = accordionItem.classList.contains('expanded');
+    
+    // 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 => {
+        item.classList.remove('expanded');
+      });
+    }
+    
+    // Open the clicked section
+    accordionItem.classList.add('expanded');
+  }
+  
+  /**
+   * 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
+    setTimeout(() => {
+      // Refresh the menu to update current values
+      this.generateAccordionMenu();
+      this.setupSettingsEventListeners();
+    }, 100);
+  }
 
   /**
    * Update active states in settings menu