unified-video-framework 1.4.157 → 1.4.159

package/packages/web/dist/WebPlayer.js

@@ -140,7 +140,7 @@ export class WebPlayer extends BasePlayer {
         this.video.className = 'uvf-video';
         this.video.controls = false;
         this.video.autoplay = false;
-        this.video.muted = this.config.autoPlay ? true : (this.config.muted ?? false);
+        this.video.muted = this.config.muted ?? false;
         this.video.loop = this.config.loop ?? false;
         this.video.playsInline = this.config.playsInline ?? true;
         this.video.preload = this.config.preload ?? 'metadata';
@@ -660,14 +660,28 @@ export class WebPlayer extends BasePlayer {
             this.autoplayCapabilities.canAutoplay = true;
         }
     }
+    hasUserActivation() {
+        if (typeof navigator !== 'undefined' && navigator.userActivation) {
+            const hasActivation = navigator.userActivation.hasBeenActive;
+            this.debugLog(`🎯 User activation detected: ${hasActivation}`);
+            return hasActivation;
+        }
+        const hasInteracted = this.lastUserInteraction > 0 &&
+            (Date.now() - this.lastUserInteraction) < 5000;
+        this.debugLog(`🎯 Recent user interaction: ${hasInteracted}`);
+        return hasInteracted;
+    }
     async attemptIntelligentAutoplay() {
         if (!this.config.autoPlay || !this.video)
             return false;
         await this.detectAutoplayCapabilities();
-        if (this.autoplayCapabilities.canAutoplayUnmuted && !this.config.muted) {
+        const hasActivation = this.hasUserActivation();
+        const shouldTryUnmuted = (this.autoplayCapabilities.canAutoplayUnmuted || hasActivation)
+            && this.config.muted !== true;
+        if (shouldTryUnmuted) {
             this.video.muted = false;
             this.video.volume = this.config.volume ?? 1.0;
-            this.debugLog('🔊 Attempting unmuted autoplay');
+            this.debugLog(`🔊 Attempting unmuted autoplay (activation: ${hasActivation})`);
             try {
                 await this.play();
                 this.debugLog('✅ Unmuted autoplay successful');
@@ -677,7 +691,7 @@ export class WebPlayer extends BasePlayer {
                 this.debugLog('⚠️ Unmuted autoplay failed, trying muted');
             }
         }
-        if (this.autoplayCapabilities.canAutoplayMuted) {
+        if (this.autoplayCapabilities.canAutoplayMuted || hasActivation) {
             this.video.muted = true;
             this.debugLog('🔇 Attempting muted autoplay');
             try {
@@ -1036,47 +1050,96 @@ export class WebPlayer extends BasePlayer {
         if (!this.playerWrapper)
             return;
         try {
-            if (!document.fullscreenEnabled &&
-                !document.webkitFullscreenEnabled &&
-                !document.mozFullScreenEnabled &&
-                !document.msFullscreenEnabled) {
+            if (this.isIOSDevice() && this.video) {
+                this.debugLog('iOS device detected - using video element fullscreen');
+                try {
+                    if (this.video.webkitEnterFullscreen) {
+                        await this.video.webkitEnterFullscreen();
+                        this.playerWrapper.classList.add('uvf-fullscreen');
+                        this.emit('onFullscreenChanged', true);
+                        return;
+                    }
+                    else if (this.video.webkitRequestFullscreen) {
+                        await this.video.webkitRequestFullscreen();
+                        this.playerWrapper.classList.add('uvf-fullscreen');
+                        this.emit('onFullscreenChanged', true);
+                        return;
+                    }
+                }
+                catch (iosError) {
+                    this.debugWarn('iOS video fullscreen failed:', iosError.message);
+                }
+            }
+            if (!this.isFullscreenSupported()) {
                 this.debugWarn('Fullscreen not supported by browser');
+                if (this.isMobileDevice()) {
+                    this.showShortcutIndicator('Rotate device for fullscreen experience');
+                }
                 return;
             }
-            if (document.fullscreenElement ||
-                document.webkitFullscreenElement ||
-                document.mozFullScreenElement ||
-                document.msFullscreenElement) {
+            if (this.isFullscreen()) {
                 this.debugLog('Already in fullscreen mode');
                 return;
             }
             const element = this.playerWrapper;
+            let fullscreenSuccess = false;
             if (element.requestFullscreen) {
-                await element.requestFullscreen().catch(err => {
-                    this.debugWarn('Fullscreen request failed:', err.message);
-                });
+                try {
+                    await element.requestFullscreen();
+                    fullscreenSuccess = true;
+                }
+                catch (err) {
+                    this.debugWarn('Standard fullscreen request failed:', err.message);
+                }
             }
             else if (element.webkitRequestFullscreen) {
-                await element.webkitRequestFullscreen().catch((err) => {
+                try {
+                    await element.webkitRequestFullscreen();
+                    fullscreenSuccess = true;
+                }
+                catch (err) {
                     this.debugWarn('WebKit fullscreen request failed:', err.message);
-                });
+                }
             }
             else if (element.mozRequestFullScreen) {
-                await element.mozRequestFullScreen().catch((err) => {
+                try {
+                    await element.mozRequestFullScreen();
+                    fullscreenSuccess = true;
+                }
+                catch (err) {
                     this.debugWarn('Mozilla fullscreen request failed:', err.message);
-                });
+                }
             }
             else if (element.msRequestFullscreen) {
-                await element.msRequestFullscreen().catch((err) => {
+                try {
+                    await element.msRequestFullscreen();
+                    fullscreenSuccess = true;
+                }
+                catch (err) {
                     this.debugWarn('MS fullscreen request failed:', err.message);
-                });
+                }
+            }
+            if (fullscreenSuccess) {
+                this.playerWrapper.classList.add('uvf-fullscreen');
+                this.emit('onFullscreenChanged', true);
+                if (this.isAndroidDevice()) {
+                    setTimeout(() => {
+                        this.showShortcutIndicator('Rotate device to landscape for best experience');
+                    }, 1000);
+                }
             }
             else {
-                this.debugWarn('Fullscreen API not supported by this browser');
-                return;
+                this.debugWarn('All fullscreen methods failed');
+                if (this.isIOSDevice()) {
+                    this.showShortcutIndicator('Fullscreen not available - use device controls');
+                }
+                else if (this.isAndroidDevice()) {
+                    this.showShortcutIndicator('Try rotating device to landscape');
+                }
+                else {
+                    this.showShortcutIndicator('Fullscreen not supported in this browser');
+                }
             }
-            this.playerWrapper.classList.add('uvf-fullscreen');
-            this.emit('onFullscreenChanged', true);
         }
         catch (error) {
             this.debugWarn('Failed to enter fullscreen:', error.message);
@@ -1084,37 +1147,74 @@ export class WebPlayer extends BasePlayer {
     }
     async exitFullscreen() {
         try {
-            if (!document.fullscreenElement &&
-                !document.webkitFullscreenElement &&
-                !document.mozFullScreenElement &&
-                !document.msFullscreenElement) {
+            if (this.isIOSDevice() && this.video) {
+                try {
+                    if (this.video.webkitExitFullscreen) {
+                        await this.video.webkitExitFullscreen();
+                        if (this.playerWrapper) {
+                            this.playerWrapper.classList.remove('uvf-fullscreen');
+                        }
+                        this.emit('onFullscreenChanged', false);
+                        return;
+                    }
+                }
+                catch (iosError) {
+                    this.debugWarn('iOS video exit fullscreen failed:', iosError.message);
+                }
+            }
+            if (!this.isFullscreen()) {
                 this.debugLog('Not in fullscreen mode');
                 return;
             }
+            let exitSuccess = false;
             if (document.exitFullscreen) {
-                await document.exitFullscreen().catch(err => {
-                    this.debugWarn('Exit fullscreen failed:', err.message);
-                });
+                try {
+                    await document.exitFullscreen();
+                    exitSuccess = true;
+                }
+                catch (err) {
+                    this.debugWarn('Standard exit fullscreen failed:', err.message);
+                }
             }
             else if (document.webkitExitFullscreen) {
-                await document.webkitExitFullscreen().catch((err) => {
+                try {
+                    await document.webkitExitFullscreen();
+                    exitSuccess = true;
+                }
+                catch (err) {
                     this.debugWarn('WebKit exit fullscreen failed:', err.message);
-                });
+                }
             }
             else if (document.mozCancelFullScreen) {
-                await document.mozCancelFullScreen().catch((err) => {
+                try {
+                    await document.mozCancelFullScreen();
+                    exitSuccess = true;
+                }
+                catch (err) {
                     this.debugWarn('Mozilla exit fullscreen failed:', err.message);
-                });
+                }
             }
             else if (document.msExitFullscreen) {
-                await document.msExitFullscreen().catch((err) => {
+                try {
+                    await document.msExitFullscreen();
+                    exitSuccess = true;
+                }
+                catch (err) {
                     this.debugWarn('MS exit fullscreen failed:', err.message);
-                });
+                }
             }
-            if (this.playerWrapper) {
-                this.playerWrapper.classList.remove('uvf-fullscreen');
+            if (exitSuccess || !this.isFullscreen()) {
+                if (this.playerWrapper) {
+                    this.playerWrapper.classList.remove('uvf-fullscreen');
+                }
+                this.emit('onFullscreenChanged', false);
+            }
+            else {
+                this.debugWarn('All exit fullscreen methods failed');
+                if (this.playerWrapper) {
+                    this.playerWrapper.classList.remove('uvf-fullscreen');
+                }
             }
-            this.emit('onFullscreenChanged', false);
         }
         catch (error) {
             this.debugWarn('Failed to exit fullscreen:', error.message);
@@ -3683,7 +3783,7 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
-      /* iOS Safari specific fixes - address bar handling */
+      /* iOS Safari specific fixes - address bar handling and control positioning */
       @supports (-webkit-appearance: none) {
         .uvf-player-wrapper.uvf-fullscreen,
         .uvf-video-container.uvf-fullscreen {
@@ -3701,6 +3801,31 @@ export class WebPlayer extends BasePlayer {
           .uvf-player-wrapper {
             height: -webkit-fill-available;
             min-height: 100vh;
+            /* Fix for iOS Safari control overlay positioning */
+            position: relative;
+            overflow: hidden;
+          }
+          
+          /* iOS Safari specific fixes for control positioning */
+          .uvf-controls-bar {
+            position: absolute !important;
+            bottom: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            /* Ensure hardware acceleration */
+            -webkit-transform: translate3d(0,0,0);
+            transform: translate3d(0,0,0);
+            /* Prevent any webkit transforms that could cause positioning issues */
+            -webkit-perspective: 1000;
+            perspective: 1000;
+          }
+          
+          /* Ensure all control elements use hardware acceleration */
+          .uvf-control-btn,
+          .uvf-progress-bar,
+          .uvf-progress-section {
+            -webkit-transform: translateZ(0);
+            transform: translateZ(0);
           }
         }
       }
@@ -3761,14 +3886,45 @@ export class WebPlayer extends BasePlayer {
         
         /* Fix for controls being cut off by virtual keyboard */
         .uvf-controls-bar {
-          position: fixed !important;
-          bottom: var(--uvf-safe-area-bottom, 0) !important;
+          position: absolute !important;
+          bottom: 0 !important;
+          left: 0 !important;
+          right: 0 !important;
+          /* Remove fixed positioning that causes issues on iOS Safari */
+          z-index: 1000 !important;
+          transform: translateZ(0); /* Force hardware acceleration */
         }
         
         /* Ensure controls stay above virtual keyboards */
         @supports (bottom: env(keyboard-inset-height)) {
           .uvf-controls-bar {
-            bottom: max(var(--uvf-safe-area-bottom, 0), env(keyboard-inset-height, 0)) !important;
+            bottom: max(0px, env(keyboard-inset-height, 0)) !important;
+            padding-bottom: calc(16px + max(var(--uvf-safe-area-bottom, 0), env(keyboard-inset-height, 0))) !important;
+          }
+        }
+        
+        /* Hide PiP button on mobile - not supported on most mobile browsers */
+        #uvf-pip-btn {
+          display: none !important;
+        }
+        
+        /* Mobile fullscreen enhancements */
+        .uvf-player-wrapper.uvf-fullscreen {
+          /* Ensure fullscreen covers entire viewport on mobile */
+          position: fixed !important;
+          top: 0 !important;
+          left: 0 !important;
+          width: 100vw !important;
+          height: 100vh !important;
+          z-index: 2147483647 !important;
+          background: #000 !important;
+        }
+        
+        /* iOS Safari specific fullscreen fixes */
+        @supports (-webkit-appearance: none) {
+          .uvf-player-wrapper.uvf-fullscreen {
+            /* Use viewport units that work better with iOS Safari */
+            height: -webkit-fill-available !important;
           }
         }
       }
@@ -3810,19 +3966,25 @@ export class WebPlayer extends BasePlayer {
           min-height: inherit;
         }
         
-        /* Enhanced mobile controls bar with safe area padding */
+        /* Enhanced mobile controls bar with safe area padding - iOS Safari specific fixes */
         .uvf-controls-bar {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
+          position: absolute !important;
+          bottom: 0 !important;
+          left: 0 !important;
+          right: 0 !important;
           padding: 16px 12px;
-          padding-bottom: calc(16px + var(--uvf-safe-area-bottom));
-          padding-left: calc(12px + var(--uvf-safe-area-left));
-          padding-right: calc(12px + var(--uvf-safe-area-right));
+          padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px));
+          padding-left: calc(12px + var(--uvf-safe-area-left, 0px));
+          padding-right: calc(12px + var(--uvf-safe-area-right, 0px));
           background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 80%, var(--uvf-overlay-transparent) 100%);
           box-sizing: border-box;
-          z-index: 1000;
+          z-index: 1000 !important;
+          /* iOS Safari specific fixes */
+          transform: translateZ(0);
+          -webkit-transform: translateZ(0);
+          will-change: transform;
+          /* Ensure proper stacking */
+          isolation: isolate;
         }
         
         .uvf-progress-section {
@@ -5254,6 +5416,9 @@ export class WebPlayer extends BasePlayer {
         pipBtn.id = 'uvf-pip-btn';
         pipBtn.title = 'Picture-in-Picture';
         pipBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z" stroke="currentColor" stroke-width="0.5" fill="currentColor"/></svg>';
+        if (this.isMobileDevice() || !this.isPipSupported()) {
+            pipBtn.style.display = 'none';
+        }
         rightControls.appendChild(pipBtn);
         const fullscreenBtn = document.createElement('button');
         fullscreenBtn.className = 'uvf-control-btn';
@@ -5492,13 +5657,20 @@ export class WebPlayer extends BasePlayer {
         fullscreenBtn?.addEventListener('click', (event) => {
             const isBrave = this.isBraveBrowser();
             const isPrivate = this.isPrivateWindow();
+            const isIOS = this.isIOSDevice();
+            const isAndroid = this.isAndroidDevice();
+            const isMobile = this.isMobileDevice();
             this.debugLog('Fullscreen button clicked:', {
                 isBrave,
                 isPrivate,
+                isIOS,
+                isAndroid,
+                isMobile,
                 isFullscreen: this.isFullscreen(),
                 eventTrusted: event.isTrusted,
                 eventType: event.type,
-                timestamp: Date.now()
+                timestamp: Date.now(),
+                fullscreenSupported: this.isFullscreenSupported()
             });
             this.lastUserInteraction = Date.now();
             this.checkFullscreenPermissions();
@@ -5510,20 +5682,27 @@ export class WebPlayer extends BasePlayer {
             }
             else {
                 this.debugLog('Entering fullscreen via button');
-                if (isBrave && !isPrivate) {
-                    this.enterFullscreenWithBraveSupport().catch(err => {
-                        this.debugWarn('Brave fullscreen button failed:', err.message);
-                        this.showTemporaryMessage('Brave Browser: Please allow fullscreen in site settings');
-                    });
+                if (isIOS) {
+                    this.showShortcutIndicator('Using iOS video fullscreen');
                 }
-                else {
-                    this.enterFullscreen().catch(err => {
-                        this.debugWarn('Fullscreen button failed:', err.message);
-                        if (isBrave) {
-                            this.showTemporaryMessage('Try refreshing the page or check Brave shields settings');
-                        }
-                    });
+                else if (isAndroid) {
+                    this.showShortcutIndicator('Entering fullscreen - rotate to landscape');
                 }
+                this.enterFullscreen().catch(err => {
+                    this.debugWarn('Fullscreen button failed:', err.message);
+                    if (isIOS) {
+                        this.showTemporaryMessage('iOS: Use device rotation or video controls for fullscreen');
+                    }
+                    else if (isAndroid) {
+                        this.showTemporaryMessage('Android: Try rotating device to landscape mode');
+                    }
+                    else if (isBrave) {
+                        this.showTemporaryMessage('Brave Browser: Please allow fullscreen in site settings');
+                    }
+                    else {
+                        this.showTemporaryMessage('Fullscreen not supported in this browser');
+                    }
+                });
             }
         });
         const updateFullscreenIcon = () => {
@@ -6058,6 +6237,33 @@ export class WebPlayer extends BasePlayer {
             this.mute();
         }
     }
+    isMobileDevice() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        const mobileKeywords = ['android', 'iphone', 'ipad', 'ipod', 'blackberry', 'windows phone', 'mobile'];
+        const isMobileUserAgent = mobileKeywords.some(keyword => userAgent.includes(keyword));
+        const isSmallScreen = window.innerWidth <= 768;
+        const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        return isMobileUserAgent || (isSmallScreen && hasTouchScreen);
+    }
+    isPipSupported() {
+        return !!(document.pictureInPictureEnabled &&
+            HTMLVideoElement.prototype.requestPictureInPicture &&
+            typeof HTMLVideoElement.prototype.requestPictureInPicture === 'function');
+    }
+    isIOSDevice() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        return /iphone|ipad|ipod/.test(userAgent);
+    }
+    isAndroidDevice() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        return /android/.test(userAgent);
+    }
+    isFullscreenSupported() {
+        return !!(document.fullscreenEnabled ||
+            document.webkitFullscreenEnabled ||
+            document.mozFullScreenEnabled ||
+            document.msFullscreenEnabled);
+    }
     handleVolumeChange(e) {
         const slider = document.getElementById('uvf-volume-slider');
         if (!slider)