unified-video-framework 1.4.135 → 1.4.137

package/packages/web/src/WebPlayer.ts

@@ -2402,6 +2402,87 @@ export class WebPlayer extends BasePlayer {
         transform: translateY(0);
       }
       
+      /* Accordion Styles */
+      .uvf-settings-accordion {
+        padding: 0;
+      }
+      
+      .uvf-accordion-item {
+        border-bottom: 1px solid rgba(255,255,255,0.08);
+      }
+      
+      .uvf-accordion-item:last-child {
+        border-bottom: none;
+      }
+      
+      .uvf-accordion-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 18px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-radius: 8px;
+        margin: 4px 8px;
+      }
+      
+      .uvf-accordion-header:hover {
+        background: rgba(255,255,255,0.08);
+        transform: translateX(2px);
+      }
+      
+      .uvf-accordion-title {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #fff;
+      }
+      
+      .uvf-accordion-icon {
+        font-size: 16px;
+        opacity: 0.8;
+      }
+      
+      .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;
+      }
+      
+      .uvf-accordion-arrow {
+        font-size: 12px;
+        color: rgba(255,255,255,0.6);
+        transition: transform 0.3s ease;
+      }
+      
+      .uvf-accordion-item.expanded .uvf-accordion-arrow {
+        transform: rotate(180deg);
+      }
+      
+      .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;
+      }
+      
+      .uvf-accordion-item.expanded .uvf-accordion-content {
+        max-height: 300px;
+        padding: 8px 18px 16px;
+      }
+      
+      .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);
@@ -5029,11 +5110,44 @@ export class WebPlayer extends BasePlayer {
     
     // Settings menu - dynamically populated
     const settingsMenu = document.getElementById('uvf-settings-menu');
+    this.debugLog('Settings menu element found:', !!settingsMenu);
+    this.debugLog('Settings button found:', !!settingsBtn);
+    
     settingsBtn?.addEventListener('click', (e) => {
       e.stopPropagation();
+      this.debugLog('Settings button clicked!');
+      this.debugLog('Settings menu before update:', settingsMenu?.innerHTML?.length || 0, 'characters');
+      
       // Update the menu content before showing it
       this.updateSettingsMenu();
+      
+      this.debugLog('Settings menu after update:', settingsMenu?.innerHTML?.length || 0, 'characters');
+      this.debugLog('Settings menu classes before toggle:', Array.from(settingsMenu?.classList || []).join(' '));
+      
       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');
+      }
+      
+      this.debugLog('Settings menu classes after toggle:', Array.from(settingsMenu?.classList || []).join(' '));
+      this.debugLog('Settings menu computed display:', window.getComputedStyle(settingsMenu || document.body).display);
+      this.debugLog('Settings menu computed visibility:', window.getComputedStyle(settingsMenu || document.body).visibility);
+      this.debugLog('Settings menu computed opacity:', window.getComputedStyle(settingsMenu || document.body).opacity);
     });
     
     // EPG button
@@ -6288,67 +6402,129 @@ export class WebPlayer extends BasePlayer {
    * Dynamically populate settings menu based on video capabilities
    */
   private updateSettingsMenu(): void {
+    this.debugLog('updateSettingsMenu called');
     const settingsMenu = document.getElementById('uvf-settings-menu');
-    if (!settingsMenu) return;
+    if (!settingsMenu) {
+      this.debugError('Settings menu element not found!');
+      return;
+    }
 
+    this.debugLog('Settings menu element found, updating content...');
     // Detect available qualities from video
     this.detectAvailableQualities();
     // Detect available subtitles
     this.detectAvailableSubtitles();
 
-    let menuHTML = '';
+    this.debugLog('Available qualities:', this.availableQualities);
+    this.debugLog('Available subtitles:', this.availableSubtitles);
+    this.debugLog('Settings config:', this.settingsConfig);
 
-    // Playback Speed Section (only if enabled in config)
+    // Generate accordion-style menu
+    this.generateAccordionMenu();
+  }
+  
+  /**
+   * Generate accordion-style settings menu
+   */
+  private generateAccordionMenu(): void {
+    const settingsMenu = document.getElementById('uvf-settings-menu');
+    if (!settingsMenu) return;
+
+    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">⚡</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">🎬</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">💬</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);
+    this.debugLog('Generated menu HTML content:', menuHTML.substring(0, 200) + (menuHTML.length > 200 ? '...' : ''));
+    
     settingsMenu.innerHTML = menuHTML;
+    this.debugLog('Settings menu HTML set successfully');
 
     // Add event listeners for settings options
     this.setupSettingsEventListeners();
+    this.debugLog('Settings event listeners setup complete');
   }
 
   /**
@@ -6428,18 +6604,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');
       });
     });
 
@@ -6448,7 +6639,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');
       });
     });
 
@@ -6457,10 +6648,53 @@ 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');
+    
+    // Close all other sections
+    const settingsMenu = document.getElementById('uvf-settings-menu');
+    if (settingsMenu) {
+      settingsMenu.querySelectorAll('.uvf-accordion-item.expanded').forEach(item => {
+        if (item !== accordionItem) {
+          item.classList.remove('expanded');
+        }
+      });
+    }
+    
+    // Toggle current section
+    if (isExpanded) {
+      accordionItem.classList.remove('expanded');
+    } else {
+      accordionItem.classList.add('expanded');
+    }
+  }
+  
+  /**
+   * Update accordion after user makes a selection
+   */
+  private updateAccordionAfterSelection(section: string): void {
+    // Close the accordion section after selection
+    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);
+  }
 
   /**
    * Update active states in settings menu