unified-video-framework 1.4.117 → 1.4.119

package/packages/web/dist/WebPlayer.js

@@ -739,26 +739,87 @@ export class WebPlayer extends BasePlayer {
             this.debugWarn('Failed to exit fullscreen:', error.message);
         }
     }
-    async enterPictureInPicture() {
+    isPictureInPictureSupported() {
         if (!this.video)
-            return;
+            return false;
+        const hasStandardPiP = 'requestPictureInPicture' in this.video &&
+            'pictureInPictureEnabled' in document;
+        const hasSafariPiP = 'webkitSupportsPresentationMode' in this.video &&
+            typeof this.video.webkitSupportsPresentationMode === 'function' &&
+            this.video.webkitSupportsPresentationMode('picture-in-picture');
+        const userAgent = navigator.userAgent.toLowerCase();
+        const isIOS = /iphone|ipad|ipod/.test(userAgent);
+        const isAndroid = /android/.test(userAgent);
+        const isChrome = /chrome/.test(userAgent) && !/edge/.test(userAgent);
+        const isSafari = /safari/.test(userAgent) && !/chrome/.test(userAgent);
+        const isFirefox = /firefox/.test(userAgent);
+        const iosSupport = isIOS && isSafari && hasSafariPiP;
+        const androidChromeSupport = isAndroid && isChrome && hasStandardPiP;
+        const firefoxSupport = isFirefox && hasStandardPiP && !this.isMobileDevice();
+        this.debugLog('PiP Support Detection:', {
+            hasStandardPiP,
+            hasSafariPiP,
+            isIOS,
+            isAndroid,
+            isChrome,
+            isSafari,
+            isFirefox,
+            iosSupport,
+            androidChromeSupport,
+            firefoxSupport,
+            overall: hasStandardPiP || iosSupport || androidChromeSupport || firefoxSupport
+        });
+        return hasStandardPiP || iosSupport || androidChromeSupport || firefoxSupport;
+    }
+    isMobileDevice() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(userAgent) ||
+            (!!(navigator.maxTouchPoints && navigator.maxTouchPoints > 2) && /macintosh/.test(userAgent));
+    }
+    async enterPictureInPicture() {
+        if (!this.video) {
+            throw new Error('Video element not available');
+        }
+        if (!this.isPictureInPictureSupported()) {
+            throw new Error('Picture-in-Picture not supported on this device/browser');
+        }
         try {
-            if (this.video.requestPictureInPicture) {
+            if ('requestPictureInPicture' in this.video) {
                 await this.video.requestPictureInPicture();
+                this.debugLog('PiP entered using standard API');
+                return;
             }
-            else {
-                throw new Error('Picture-in-Picture not supported');
+            if ('webkitSetPresentationMode' in this.video) {
+                this.video.webkitSetPresentationMode('picture-in-picture');
+                this.debugLog('PiP entered using WebKit API');
+                return;
             }
+            throw new Error('No supported PiP API available');
         }
         catch (error) {
-            console.error('Failed to enter PiP:', error);
+            this.debugError('Failed to enter PiP:', error.message);
             throw error;
         }
     }
     async exitPictureInPicture() {
         try {
-            if (document.exitPictureInPicture) {
+            const inStandardPiP = document.pictureInPictureElement;
+            const inWebkitPiP = this.video &&
+                'webkitPresentationMode' in this.video &&
+                this.video.webkitPresentationMode === 'picture-in-picture';
+            if (!inStandardPiP && !inWebkitPiP) {
+                this.debugLog('Not currently in PiP mode');
+                return;
+            }
+            if (inStandardPiP && 'exitPictureInPicture' in document) {
                 await document.exitPictureInPicture();
+                this.debugLog('PiP exited using standard API');
+                return;
+            }
+            if (inWebkitPiP && this.video && 'webkitSetPresentationMode' in this.video) {
+                this.video.webkitSetPresentationMode('inline');
+                this.debugLog('PiP exited using WebKit API');
+                return;
             }
         }
         catch (error) {
@@ -1459,19 +1520,51 @@ export class WebPlayer extends BasePlayer {
       .uvf-video-container {
         position: relative;
         width: 100%;
-        // aspect-ratio: 16 / 9;
+        aspect-ratio: 16 / 9;
         background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
         overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
       
       .uvf-video {
         position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
         background: #000;
         object-fit: contain;
+        /* Ensure proper centering and scaling */
+        object-position: center;
+      }
+      
+      /* Mobile-specific video centering improvements */
+      @media screen and (max-width: 767px) {
+        .uvf-video {
+          /* Force full width/height on mobile for better centering */
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          transform: none;
+          object-fit: contain;
+          object-position: center;
+        }
+        
+        .uvf-video-container {
+          /* Remove aspect ratio constraint on mobile for full height usage */
+          aspect-ratio: unset;
+          min-height: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
       
       .uvf-watermark-layer {
@@ -1658,6 +1751,7 @@ export class WebPlayer extends BasePlayer {
         width: 100%;
         position: relative;
         cursor: pointer;
+        padding: 16px 0;
         overflow: visible;
       }
       
@@ -1771,105 +1865,10 @@ export class WebPlayer extends BasePlayer {
       
       /* Mobile responsive design with enhanced touch targets */
       @media (max-width: 768px) {
-        .uvf-player-wrapper {
-          position: relative;
-          width: 100% !important;
-          height: auto !important;
-          min-height: 200px;
+        .uvf-progress-bar-wrapper {
+          padding: 20px 0; /* Larger touch area */
         }
         
-        .uvf-video-container {
-          width: 100% !important;
-          height: auto !important;
-          aspect-ratio: 16/9;
-          position: relative;
-        }
-        
-        .uvf-video {
-          width: 100% !important;
-          height: 100% !important;
-          object-fit: contain;
-        }
-        
-        /* Fix controls bar positioning */
-        .uvf-controls-bar {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          padding: 8px 12px !important;
-          padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
-          background: linear-gradient(to top, 
-            rgba(0,0,0,0.9) 0%, 
-            rgba(0,0,0,0.7) 70%, 
-            transparent 100%) !important;
-          z-index: 1000;
-        }
-        
-        /* Ensure controls are properly sized */
-        .uvf-controls-row {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          flex-wrap: nowrap;
-          min-height: 44px; /* Minimum touch target size */
-        }
-        
-        /* Touch-friendly button sizes */
-        .uvf-control-btn {
-          width: 44px !important;
-          height: 44px !important;
-          min-width: 44px !important;
-          min-height: 44px !important;
-          border-radius: 22px !important;
-        }
-        
-        .uvf-control-btn.play-pause {
-          width: 52px !important;
-          height: 52px !important;
-          min-width: 52px !important;
-          min-height: 52px !important;
-        }
-        
-        /* Progress bar adjustments */
-        .uvf-progress-section {
-          margin-bottom: 12px !important;
-          padding: 0 8px;
-        }
-        
-        .uvf-progress-bar {
-          height: 4px !important;
-          margin-bottom: 8px;
-        }
-        
-        /* Time display adjustments */
-        .uvf-time-display {
-          font-size: 12px !important;
-          min-width: 90px !important;
-          padding: 4px 8px !important;
-          background: rgba(0,0,0,0.5);
-          border-radius: 12px;
-          margin: 0 4px;
-        }
-        
-        /* Right controls spacing */
-        .uvf-right-controls {
-          gap: 6px !important;
-          margin-left: auto;
-        }
-        
-        /* Hide non-essential elements on mobile */
-        .uvf-quality-badge {
-          display: none !important;
-        }
-        
-        /* Ensure settings menu is accessible */
-        .uvf-settings-menu {
-          bottom: 60px !important;
-          right: 12px !important;
-          max-height: 60vh !important;
-          min-width: 160px !important;
-        }
         .uvf-progress-bar {
           height: 3px; /* Slightly thicker on mobile */
         }
@@ -1877,31 +1876,7 @@ export class WebPlayer extends BasePlayer {
         .uvf-progress-bar-wrapper:hover .uvf-progress-bar {
           height: 5px;
         }
-      }
-
-      /* Mobile Landscape */
-      @media screen and (max-width: 767px) and (orientation: landscape) {
-        .uvf-controls-bar {
-          padding: 6px 10px !important;
-          padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
-        }
-        
-        .uvf-control-btn {
-          width: 40px !important;
-          height: 40px !important;
-          min-width: 40px !important;
-          min-height: 40px !important;
-        }
         
-        .uvf-control-btn.play-pause {
-          width: 46px !important;
-          height: 46px !important;
-        }
-        
-        .uvf-time-display {
-          font-size: 11px !important;
-          min-width: 80px !important;
-        }
       }
       
       /* Controls Row */
@@ -2631,28 +2606,276 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
+      /* Safe Area Variables - Support for modern mobile devices */
+      :root {
+        /* iOS Safe Area Fallbacks */
+        --uvf-safe-area-top: env(safe-area-inset-top, 0px);
+        --uvf-safe-area-right: env(safe-area-inset-right, 0px);
+        --uvf-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+        --uvf-safe-area-left: env(safe-area-inset-left, 0px);
+        
+        /* Dynamic Viewport Support */
+        --uvf-dvh: 1dvh;
+        --uvf-svh: 1svh;
+        --uvf-lvh: 1lvh;
+      }
+      
+      /* Cross-Browser Mobile Viewport Fixes */
+      
+      /* Modern browsers with dynamic viewport support */
+      @supports (height: 100dvh) {
+        .uvf-player-wrapper,
+        .uvf-video-container {
+          height: 100dvh;
+        }
+        
+        .uvf-responsive-container {
+          height: 100dvh;
+        }
+      }
+      
+      /* iOS Safari specific fixes - address bar handling */
+      @supports (-webkit-appearance: none) {
+        .uvf-player-wrapper.uvf-fullscreen,
+        .uvf-video-container.uvf-fullscreen {
+          height: -webkit-fill-available;
+          min-height: -webkit-fill-available;
+        }
+        
+        /* Handle iOS Safari's dynamic address bar */
+        @media screen and (max-width: 767px) {
+          .uvf-responsive-container {
+            height: -webkit-fill-available;
+            min-height: 100vh;
+          }
+          
+          .uvf-player-wrapper {
+            height: -webkit-fill-available;
+            min-height: 100vh;
+          }
+        }
+      }
+      
+      /* Android Chrome specific fixes */
+      @supports (display: -webkit-box) {
+        .uvf-responsive-container {
+          min-height: 100vh;
+        }
+        
+        /* Fix for Android Chrome's address bar behavior */
+        @media screen and (max-width: 767px) {
+          .uvf-video-container {
+            min-height: calc(100vh - 56px); /* Chrome mobile address bar height */
+          }
+        }
+      }
+      
+      /* Samsung Internet Browser fixes */
+      @media screen and (-webkit-min-device-pixel-ratio: 1) {
+        @media screen and (max-width: 767px) {
+          .uvf-responsive-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+          }
+        }
+      }
+      
+      /* Universal mobile fixes for all browsers */
+      @media screen and (max-width: 767px) {
+        html, body {
+          overflow-x: hidden;
+          /* Prevent iOS Safari address bar bounce */
+          position: fixed;
+          height: 100%;
+          width: 100%;
+        }
+        
+        .uvf-player-wrapper {
+          /* Prevent scroll bounce on iOS */
+          -webkit-overflow-scrolling: touch;
+          overflow: hidden;
+          
+          /* Prevent zoom on double tap */
+          touch-action: manipulation;
+          
+          /* Ensure full viewport usage */
+          position: relative;
+          width: 100vw;
+          height: 100vh;
+          
+          /* iOS Safari fix for viewport height */
+          min-height: -webkit-fill-available;
+        }
+        
+        .uvf-video-container {
+          /* Full viewport container */
+          width: 100vw;
+          height: 100vh;
+          min-height: -webkit-fill-available;
+          position: relative;
+          overflow: hidden;
+        }
+        
+        .uvf-video {
+          /* Prevent video from being selectable */
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          user-select: none;
+          
+          /* Ensure hardware acceleration */
+          -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+          
+          /* Full viewport video with proper centering */
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          object-position: center center;
+        }
+        
+        /* Fix for controls being cut off by virtual keyboard */
+        .uvf-controls-bar {
+          position: fixed !important;
+          bottom: var(--uvf-safe-area-bottom, 0) !important;
+          left: var(--uvf-safe-area-left, 0) !important;
+          right: var(--uvf-safe-area-right, 0) !important;
+          width: auto !important;
+          z-index: 9999;
+        }
+        
+        /* Top controls safe area positioning */
+        .uvf-top-controls {
+          position: fixed !important;
+          top: var(--uvf-safe-area-top, 10px) !important;
+          right: var(--uvf-safe-area-right, 10px) !important;
+          z-index: 9999;
+        }
+        
+        .uvf-title-bar {
+          position: fixed !important;
+          top: var(--uvf-safe-area-top, 10px) !important;
+          left: var(--uvf-safe-area-left, 10px) !important;
+          right: calc(120px + var(--uvf-safe-area-right, 10px)) !important; /* Leave space for top controls */
+          z-index: 9999;
+        }
+        
+        /* 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;
+          }
+        }
+        
+        /* Enhanced safe area support for newer devices */
+        @supports (padding: max(0px)) {
+          .uvf-controls-bar {
+            padding-bottom: max(16px, calc(16px + var(--uvf-safe-area-bottom, 0)));
+            padding-left: max(12px, calc(12px + var(--uvf-safe-area-left, 0)));
+            padding-right: max(12px, calc(12px + var(--uvf-safe-area-right, 0)));
+          }
+          
+          .uvf-top-controls {
+            top: max(10px, calc(10px + var(--uvf-safe-area-top, 0))) !important;
+            right: max(10px, calc(10px + var(--uvf-safe-area-right, 0))) !important;
+          }
+          
+          .uvf-title-bar {
+            top: max(10px, calc(10px + var(--uvf-safe-area-top, 0))) !important;
+            left: max(10px, calc(10px + var(--uvf-safe-area-left, 0))) !important;
+          }
+        }
+      }
+      
+      /* Specific fixes for iPhone X series and newer with notches */
+      @media screen and (max-width: 767px) and (orientation: portrait) {
+        @supports (top: env(safe-area-inset-top)) {
+          .uvf-responsive-container,
+          .uvf-player-wrapper,
+          .uvf-video-container {
+            height: 100vh;
+            height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+          }
+        }
+      }
+      
+      /* Landscape orientation fixes for mobile */
+      @media screen and (max-width: 767px) and (orientation: landscape) {
+        html, body {
+          height: 100vh;
+          overflow: hidden;
+        }
+        
+        .uvf-responsive-container,
+        .uvf-player-wrapper,
+        .uvf-video-container {
+          height: 100vh;
+          width: 100vw;
+        }
+        
+        @supports (height: 100dvh) {
+          .uvf-responsive-container,
+          .uvf-player-wrapper,
+          .uvf-video-container {
+            height: 100dvh;
+            width: 100dvw;
+          }
+        }
+      }
+      
       /* Enhanced Responsive Media Queries with UX Best Practices */
-      /* Mobile devices (portrait) - Enhanced UX */
+      /* Mobile devices (portrait) - Enhanced UX with Safe Areas */
       @media screen and (max-width: 767px) and (orientation: portrait) {
         .uvf-responsive-container {
           padding: 0;
           width: 100vw !important;
+          height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
           margin: 0;
+          position: relative;
+          overflow: hidden;
+        }
+        
+        @supports (height: 100dvh) {
+          .uvf-responsive-container {
+            height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+          }
         }
         
         .uvf-responsive-container .uvf-player-wrapper {
           width: 100vw !important;
+          height: 100% !important;
+          min-height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+        }
+        
+        @supports (height: 100dvh) {
+          .uvf-responsive-container .uvf-player-wrapper {
+            min-height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+          }
         }
         
         .uvf-responsive-container .uvf-video-container {
           width: 100vw !important;
-          // aspect-ratio: unset !important;
+          height: 100% !important;
+          aspect-ratio: unset !important;
+          min-height: inherit;
         }
         
-        /* Enhanced mobile controls bar with better spacing */
+        /* Enhanced mobile controls bar with safe area padding */
         .uvf-controls-bar {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
           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));
           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;
         }
         
         .uvf-progress-section {
@@ -2824,11 +3047,11 @@ export class WebPlayer extends BasePlayer {
         }
         }
         
-      /* Enhanced top controls for mobile with proper alignment */
+      /* Enhanced top controls for mobile with safe area support */
       .uvf-top-controls {
         position: absolute;
-        top: 12px;
-        right: 12px;
+        top: calc(12px + var(--uvf-safe-area-top));
+        right: calc(12px + var(--uvf-safe-area-right));
         display: flex;
         align-items: center;
         gap: 8px;
@@ -2856,9 +3079,12 @@ export class WebPlayer extends BasePlayer {
           display: flex;
         }
         
-        /* Enhanced title bar for mobile */
+        /* Enhanced title bar for mobile with safe area support */
         .uvf-title-bar {
           padding: 12px;
+          padding-top: calc(12px + var(--uvf-safe-area-top));
+          padding-left: calc(12px + var(--uvf-safe-area-left));
+          padding-right: calc(12px + var(--uvf-safe-area-right));
         }
         
         .uvf-video-title {
@@ -2985,30 +3211,55 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
-      /* Mobile devices (landscape) - Optimized for fullscreen viewing */
+      /* Mobile devices (landscape) - Optimized for fullscreen viewing with safe areas */
       @media screen and (max-width: 767px) and (orientation: landscape) {
         .uvf-responsive-container {
           width: 100vw !important;
-          height: 100vh !important;
+          height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
           margin: 0;
           padding: 0;
+          position: relative;
+          overflow: hidden;
+        }
+        
+        @supports (height: 100dvh) {
+          .uvf-responsive-container {
+            height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+          }
         }
         
         .uvf-responsive-container .uvf-player-wrapper {
           width: 100vw !important;
-          height: 100vh !important;
+          height: 100% !important;
+          min-height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+        }
+        
+        @supports (height: 100dvh) {
+          .uvf-responsive-container .uvf-player-wrapper {
+            min-height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
+          }
         }
         
         .uvf-responsive-container .uvf-video-container {
           width: 100vw !important;
-          height: 100vh !important;
+          height: 100% !important;
           aspect-ratio: unset !important;
+          min-height: inherit;
         }
         
-        /* Compact controls for landscape */
+        /* Compact controls for landscape with safe area padding */
         .uvf-controls-bar {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
           padding: 10px 12px;
+          padding-bottom: calc(10px + var(--uvf-safe-area-bottom));
+          padding-left: calc(12px + var(--uvf-safe-area-left));
+          padding-right: calc(12px + var(--uvf-safe-area-right));
           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;
         }
         
         .uvf-progress-section {
@@ -3044,13 +3295,20 @@ export class WebPlayer extends BasePlayer {
           height: 22px;
         }
         
-        /* Compact top controls */
+        /* Compact top controls with safe area padding */
         .uvf-top-controls {
-          top: 8px;
-          right: 12px;
+          top: calc(8px + var(--uvf-safe-area-top));
+          right: calc(12px + var(--uvf-safe-area-right));
           gap: 6px;
         }
         
+        .uvf-title-bar {
+          padding: 8px 12px;
+          padding-top: calc(8px + var(--uvf-safe-area-top));
+          padding-left: calc(12px + var(--uvf-safe-area-left));
+          padding-right: calc(12px + var(--uvf-safe-area-right));
+        }
+        
         .uvf-top-btn {
           width: 40px;
           height: 40px;
@@ -3097,17 +3355,7 @@ export class WebPlayer extends BasePlayer {
           height: 16px;
         }
       }
-      @media (max-width: 768px) {
-        .uvf-video-container {
-          aspect-ratio: auto !important;
-          height: 100% !important;
-        }
-        .uvf-controls-bar {
-          bottom: 0 !important;
-          padding-bottom: 10px !important;
-        }
-      }
-
+      
       /* Tablet devices - Enhanced UX with desktop features */
       @media screen and (min-width: 768px) and (max-width: 1023px) {
         .uvf-controls-bar {
@@ -3888,7 +4136,13 @@ 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"/></svg>';
-        rightControls.appendChild(pipBtn);
+        if (this.isPictureInPictureSupported()) {
+            rightControls.appendChild(pipBtn);
+            this.debugLog('PiP button added - support detected');
+        }
+        else {
+            this.debugLog('PiP button not added - no support detected');
+        }
         const fullscreenBtn = document.createElement('button');
         fullscreenBtn.className = 'uvf-control-btn';
         fullscreenBtn.id = 'uvf-fullscreen-btn';
@@ -5001,17 +5255,41 @@ export class WebPlayer extends BasePlayer {
             this.setAutoQuality(true);
         }
     }
+    isPictureInPictureActive() {
+        const inStandardPiP = !!document.pictureInPictureElement;
+        const inWebkitPiP = !!(this.video &&
+            'webkitPresentationMode' in this.video &&
+            this.video.webkitPresentationMode === 'picture-in-picture');
+        return inStandardPiP || inWebkitPiP;
+    }
     async togglePiP() {
+        if (!this.isPictureInPictureSupported()) {
+            this.showShortcutIndicator('PiP not supported');
+            this.debugWarn('PiP not supported on this device/browser');
+            return;
+        }
         try {
-            if (document.pictureInPictureElement) {
+            if (this.isPictureInPictureActive()) {
                 await this.exitPictureInPicture();
+                this.showShortcutIndicator('Exit PiP');
+                this.debugLog('PiP deactivated');
             }
             else {
                 await this.enterPictureInPicture();
+                this.showShortcutIndicator('Enter PiP');
+                this.debugLog('PiP activated');
             }
         }
         catch (error) {
-            console.error('PiP toggle failed:', error);
+            const errorMessage = error.message;
+            this.showShortcutIndicator(`PiP Error: ${errorMessage}`);
+            this.debugError('PiP toggle failed:', errorMessage);
+            if (errorMessage.includes('not supported')) {
+                this.showShortcutIndicator('PiP not supported');
+            }
+            else if (errorMessage.includes('user gesture')) {
+                this.showShortcutIndicator('PiP requires user interaction');
+            }
         }
     }
     setupCastContextSafe() {