unified-video-framework 1.4.173 → 1.4.174

package/packages/web/src/WebPlayer.ts

@@ -4300,8 +4300,8 @@ export class WebPlayer extends BasePlayer {
           pointer-events: auto !important; /* Allow clicking on controls */
 
           /* Gradient mask */
-          -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
-          mask-image: linear-gradient(to top, black 80%, transparent 100%);
+          -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
+          mask-image: linear-gradient(to top, black 50%, transparent 100%);
           -webkit-mask-size: 100% 100%;
           mask-size: 100% 100%;
           -webkit-mask-repeat: no-repeat;
@@ -4321,8 +4321,7 @@ export class WebPlayer extends BasePlayer {
           content: '';
           position: absolute;
           inset: 0;
-          background: var(--uvf-surface-tint, rgba(255, 0, 0, 0.08));
-          border-radius: 28px 28px 0 0;
+          background: var(--uvf-surface-tint, rgba(0, 0, 0, 0.08));
           pointer-events: none;
           z-index: -1;
         }
@@ -5918,7 +5917,26 @@ export class WebPlayer extends BasePlayer {
     // Play/Pause
     centerPlay?.addEventListener('click', () => this.togglePlayPause());
     playPauseBtn?.addEventListener('click', () => this.togglePlayPause());
-    this.video.addEventListener('click', () => this.togglePlayPause());
+    
+    // Video click behavior - toggle controls on mobile, play/pause on desktop
+    this.video.addEventListener('click', (e) => {
+      if (this.isMobileDevice()) {
+        // Mobile: toggle controls visibility
+        e.stopPropagation();
+        const wrapper = this.container?.querySelector('.uvf-player-wrapper');
+        if (wrapper?.classList.contains('controls-visible')) {
+          this.hideControls();
+        } else {
+          this.showControls();
+          if (this.state.isPlaying) {
+            this.scheduleHideControls();
+          }
+        }
+      } else {
+        // Desktop: toggle play/pause
+        this.togglePlayPause();
+      }
+    });
     
     // Update play/pause icons
     this.video.addEventListener('play', () => {
@@ -8170,6 +8188,7 @@ export class WebPlayer extends BasePlayer {
     // Speed options
     settingsMenu.querySelectorAll('.speed-option').forEach(option => {
       option.addEventListener('click', (e) => {
+        e.stopPropagation();
         const speed = parseFloat((e.target as HTMLElement).dataset.speed || '1');
         this.setPlaybackRateFromSettings(speed);
         this.updateAccordionAfterSelection('speed');
@@ -8179,6 +8198,7 @@ export class WebPlayer extends BasePlayer {
     // Quality options
     settingsMenu.querySelectorAll('.quality-option').forEach(option => {
       option.addEventListener('click', (e) => {
+        e.stopPropagation();
         const quality = (e.target as HTMLElement).dataset.quality || 'auto';
         this.setQualityFromSettings(quality);
         this.updateAccordionAfterSelection('quality');
@@ -8188,6 +8208,7 @@ export class WebPlayer extends BasePlayer {
     // Subtitle options
     settingsMenu.querySelectorAll('.subtitle-option').forEach(option => {
       option.addEventListener('click', (e) => {
+        e.stopPropagation();
         const subtitle = (e.target as HTMLElement).dataset.subtitle || 'off';
         this.setSubtitle(subtitle);
         this.updateAccordionAfterSelection('subtitles');
@@ -8245,13 +8266,26 @@ 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
-    setTimeout(() => {
-      // Refresh the menu to update current values
-      this.generateAccordionMenu();
-      this.setupSettingsEventListeners();
-    }, 100);
+    // 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');
+      });
+    }
+    
+    // Auto-close settings menu on mobile after a short delay
+    if (this.isMobileDevice()) {
+      setTimeout(() => {
+        this.hideSettingsMenu();
+      }, 300);
+    } else {
+      // Desktop: just refresh the menu to update current values
+      setTimeout(() => {
+        this.generateAccordionMenu();
+        this.setupSettingsEventListeners();
+      }, 100);
+    }
   }
 
   /**