unified-video-framework 1.4.201 → 1.4.203

package/packages/web/src/WebPlayer.ts

@@ -365,6 +365,8 @@ export class WebPlayer extends BasePlayer {
     this.updateMetadataUI();
   }
 
+  private autoplayAttempted: boolean = false;
+
   private setupVideoEventListeners(): void {
     if (!this.video) return;
 
@@ -445,6 +447,24 @@ export class WebPlayer extends BasePlayer {
         this._deferredPause = false;
         try { this.video?.pause(); } catch (_) {}
       }
+
+      // Attempt autoplay once when video is ready to play
+      if (this.config.autoPlay && !this.autoplayAttempted) {
+        this.autoplayAttempted = true;
+        this.attemptIntelligentAutoplay().then(success => {
+          if (!success) {
+            this.debugWarn('❌ Intelligent autoplay failed, showing play overlay');
+            this.showPlayOverlay();
+            this.setupAutoplayRetry();
+          } else {
+            this.debugLog('✅ Intelligent autoplay succeeded');
+          }
+        }).catch(error => {
+          this.debugError('Autoplay failed:', error);
+          this.showPlayOverlay();
+          this.setupAutoplayRetry();
+        });
+      }
     });
 
     this.video.addEventListener('loadedmetadata', () => {
@@ -522,6 +542,9 @@ export class WebPlayer extends BasePlayer {
     this.source = source as any;
     this.subtitles = (source.subtitles || []) as any;
 
+    // Reset autoplay flag for new source
+    this.autoplayAttempted = false;
+
     // Clean up previous instances
     await this.cleanup();
 
@@ -617,25 +640,8 @@ export class WebPlayer extends BasePlayer {
 
         // Update settings menu with detected qualities
         this.updateSettingsMenu();
-
-        // Start playback if autoPlay is enabled
-        if (this.config.autoPlay) {
-          // Use intelligent autoplay with capability detection
-          this.attemptIntelligentAutoplay().then(success => {
-            if (!success) {
-              this.debugWarn('❌ Intelligent autoplay failed, showing play overlay');
-              this.showPlayOverlay();
-              // Set up retry on user interaction
-              this.setupAutoplayRetry();
-            } else {
-              this.debugLog('✅ Intelligent autoplay succeeded');
-            }
-          }).catch(error => {
-            this.debugError('HLS autoplay failed:', error);
-            this.showPlayOverlay();
-            this.setupAutoplayRetry();
-          });
-        }
+        
+        // Note: Autoplay is now handled in the 'canplay' event when video is ready
       });
 
       this.hls.on(window.Hls.Events.LEVEL_SWITCHED, (event: any, data: any) => {
@@ -3976,58 +3982,18 @@ export class WebPlayer extends BasePlayer {
         }
       }
 
-      // .uvf-top-btn {
-      //   width: 40px;
-      //   height: 40px;
-      //   background: rgba(255,255,255,0.1);
-      //   backdrop-filter: blur(10px);
-      //   border: 1px solid rgba(255,255,255,0.2);
-      //   border-radius: 50%;
-      //   cursor: pointer;
-      //   display: flex;
-      //   align-items: center;
-      //   justify-content: center;
-      //   transition: all 0.3s ease;
-      // }
-      
-      .uvf-top-btn:hover {
-        width: 40px;
-        height: 40px;
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255,255,255,0.2);
-        border-radius: 50%;
-        background: rgba(255,255,255,0.2);
-        transform: scale(1.1);
-        box-shadow: 0 0 20px rgba(255,255,255,0.3);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.3s ease;
-      }
 
-      .uvf-top-btn.cast-grey {
-        width: 40px;
-        height: 40px;
+      /* Cast button grey state when casting */
+      .uvf-control-btn.cast-grey {
         opacity: 0.6;
         filter: grayscale(0.6);
-        box-shadow: none;
-        background: rgba(255,255,255,0.08);
       }
-      .uvf-top-btn.cast-grey:hover {
-        width: 40px;
-        height: 40px;
+      
+      .uvf-control-btn.cast-grey:hover {
         transform: none;
-        background: rgba(255,255,255,0.12);
-        box-shadow: none;
+        opacity: 0.7;
       }
       
-      .uvf-top-btn svg {
-        width: 20px;
-        height: 20px;
-        fill: var(--uvf-icon-color);
-      }
-
       /* Pill-style button for prominent actions */
       .uvf-pill-btn {
         display: inline-flex;
@@ -4951,11 +4917,6 @@ export class WebPlayer extends BasePlayer {
         background: var(--uvf-overlay-medium);
       }
       
-      .uvf-top-btn:focus-visible {
-        outline: 2px solid var(--uvf-primary-color, #007bff);
-        outline-offset: 2px;
-      }
-      
       .uvf-progress-bar-wrapper:focus-visible {
         outline: 2px solid var(--uvf-primary-color, #007bff);
         outline-offset: 2px;
@@ -4991,10 +4952,6 @@ export class WebPlayer extends BasePlayer {
           border: 1px solid;
         }
         
-        // .uvf-top-btn {
-        //   border: 1px solid;
-        // }
-        
         .uvf-progress-bar {
           border: 1px solid;
         }
@@ -5186,22 +5143,22 @@ export class WebPlayer extends BasePlayer {
     const topControls = document.createElement('div');
     topControls.className = 'uvf-top-controls';
     topControls.innerHTML = `
-      <div class="uvf-top-btn" id="uvf-cast-btn" title="Cast" aria-label="Cast">
+      <button class="uvf-control-btn" id="uvf-cast-btn" title="Cast" aria-label="Cast">
         <svg viewBox="0 0 24 24">
           <path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
         </svg>
-      </div>
+      </button>
       <button class="uvf-pill-btn uvf-stop-cast-btn" id="uvf-stop-cast-btn" title="Stop Casting" aria-label="Stop Casting" style="display: none;">
         <svg viewBox="0 0 24 24" aria-hidden="true">
           <path d="M6 6h12v12H6z"/>
         </svg>
         <span>Stop Casting</span>
       </button>
-      <div class="uvf-top-btn" id="uvf-share-btn" title="Share" aria-label="Share">
+      <button class="uvf-control-btn" id="uvf-share-btn" title="Share" aria-label="Share">
         <svg viewBox="0 0 24 24">
           <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
         </svg>
-      </div>
+      </button>
     `;
     topBar.appendChild(topControls);