suada-components 1.9.0 → 1.10.0

package/dist/components/{index-DKAGRUEW.esm.js → index-F6zEoSWf.esm.js}

@@ -81355,7 +81355,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-CmnnzZvk.esm.js'
+	      './YouTube-DKkYzN7-.esm.js'
 	    ).then(function (n) { return n.Y; }))
 	  },
 	  {
@@ -81364,7 +81364,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-BTHoyFWT.esm.js'
+	      './SoundCloud-LfWEBVy1.esm.js'
 	    ).then(function (n) { return n.S; }))
 	  },
 	  {
@@ -81373,7 +81373,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-CHlHIswX.esm.js'
+	      './Vimeo-CwlScNtK.esm.js'
 	    ).then(function (n) { return n.V; }))
 	  },
 	  {
@@ -81382,7 +81382,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-B9YP-rFr.esm.js'
+	      './Mux-C8-HithD.esm.js'
 	    ).then(function (n) { return n.M; }))
 	  },
 	  {
@@ -81391,7 +81391,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-D9Ak6ZJU.esm.js'
+	      './Facebook-NS80Vk6j.esm.js'
 	    ).then(function (n) { return n.F; }))
 	  },
 	  {
@@ -81400,7 +81400,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-DsfQCy3p.esm.js'
+	      './Streamable-BpcVhi4M.esm.js'
 	    ).then(function (n) { return n.S; }))
 	  },
 	  {
@@ -81409,7 +81409,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-D-eYyONb.esm.js'
+	      './Wistia-Cwl4fNWW.esm.js'
 	    ).then(function (n) { return n.W; }))
 	  },
 	  {
@@ -81418,7 +81418,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-D1BOr8hj.esm.js'
+	      './Twitch-BJ9aSIM2.esm.js'
 	    ).then(function (n) { return n.T; }))
 	  },
 	  {
@@ -81427,7 +81427,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-BmnymjR1.esm.js'
+	      './DailyMotion-COg3zgIZ.esm.js'
 	    ).then(function (n) { return n.D; }))
 	  },
 	  {
@@ -81436,7 +81436,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-BobSN3YI.esm.js'
+	      './Mixcloud-CO5MsWUJ.esm.js'
 	    ).then(function (n) { return n.M; }))
 	  },
 	  {
@@ -81445,7 +81445,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-C1csjpQH.esm.js'
+	      './Vidyard-Dc8NHJ7p.esm.js'
 	    ).then(function (n) { return n.V; }))
 	  },
 	  {
@@ -81454,7 +81454,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-DPaEN-dq.esm.js'
+	      './Kaltura-CmFIWSef.esm.js'
 	    ).then(function (n) { return n.K; }))
 	  },
 	  {
@@ -81466,7 +81466,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-wg9lyafD.esm.js'
+	      './FilePlayer-D-fc3B0E.esm.js'
 	    ).then(function (n) { return n.F; }))
 	  }
 	];
@@ -82287,7 +82287,7 @@ function requireReactPlayer () {
 	var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
 	const Preview = (0, import_utils.lazy)(() => import(
 	  /* webpackChunkName: 'reactPlayerPreview' */
-	  './Preview-XcTlhHT1.esm.js'
+	  './Preview-Clg3y6sj.esm.js'
 	).then(function (n) { return n.P; }));
 	const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
 	const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -88738,153 +88738,69 @@ var useEventListener = function useEventListener(eventName, handler, element, sh
   }, [eventName, element, shouldRun]);
 };
 
-/**
- * Global Picture-in-Picture Manager
- * This module manages PiP state across component unmounts and route changes
- */
-var PictureInPictureManager = /** @class */function () {
-  function PictureInPictureManager() {
-    this.videoElement = null;
-    this.pipContainer = null;
-    this.currentVideoState = null;
-    this.onStateChange = null;
-    // Listen for PiP events globally
-    document.addEventListener('leavepictureinpicture', this.handlePiPExit.bind(this));
-    document.addEventListener('enterpictureinpicture', this.handlePiPEnter.bind(this));
-  }
-  /**
-   * Register a video element for PiP management
-   */
-  PictureInPictureManager.prototype.registerVideo = function (videoElement, url, onStateChange) {
-    this.videoElement = videoElement;
-    this.onStateChange = onStateChange || null;
-    // Store current video state
-    this.currentVideoState = {
-      url: url,
-      currentTime: videoElement.currentTime,
-      isPlaying: !videoElement.paused,
-      volume: videoElement.volume,
-      playbackRate: videoElement.playbackRate
-    };
-    // Add listeners to track state changes
-    videoElement.addEventListener('timeupdate', this.handleTimeUpdate.bind(this));
-    videoElement.addEventListener('play', this.handlePlayStateChange.bind(this));
-    videoElement.addEventListener('pause', this.handlePlayStateChange.bind(this));
-    videoElement.addEventListener('volumechange', this.handleVolumeChange.bind(this));
-    videoElement.addEventListener('ratechange', this.handleRateChange.bind(this));
-  };
-  /**
-   * Unregister the current video element
-   */
-  PictureInPictureManager.prototype.unregisterVideo = function () {
-    if (this.videoElement) {
-      this.videoElement.removeEventListener('timeupdate', this.handleTimeUpdate.bind(this));
-      this.videoElement.removeEventListener('play', this.handlePlayStateChange.bind(this));
-      this.videoElement.removeEventListener('pause', this.handlePlayStateChange.bind(this));
-      this.videoElement.removeEventListener('volumechange', this.handleVolumeChange.bind(this));
-      this.videoElement.removeEventListener('ratechange', this.handleRateChange.bind(this));
-    }
-    this.videoElement = null;
-    this.onStateChange = null;
-  };
-  /**
-   * Create a persistent video element for PiP
-   */
-  PictureInPictureManager.prototype.createPersistentVideo = function (originalVideo) {
-    var persistentVideo = originalVideo.cloneNode(true);
-    // Copy all relevant properties
-    persistentVideo.src = originalVideo.src;
-    persistentVideo.currentTime = originalVideo.currentTime;
-    persistentVideo.volume = originalVideo.volume;
-    persistentVideo.playbackRate = originalVideo.playbackRate;
-    persistentVideo.muted = originalVideo.muted;
-    // Set properties for PiP
-    persistentVideo.style.position = 'fixed';
-    persistentVideo.style.top = '-9999px';
-    persistentVideo.style.left = '-9999px';
-    persistentVideo.style.width = '1px';
-    persistentVideo.style.height = '1px';
-    persistentVideo.style.opacity = '0';
-    persistentVideo.style.pointerEvents = 'none';
-    return persistentVideo;
-  };
-  /**
-   * Enter picture-in-picture mode with persistence
-   */
-  PictureInPictureManager.prototype.enterPiP = function () {
-    return __awaiter(this, void 0, void 0, function () {
-      var persistentVideo_1, error_1;
+var PiPContext = /*#__PURE__*/createContext(undefined);
+var PiPProvider = function PiPProvider(_a) {
+  var children = _a.children;
+  var _b = useState(false),
+    isPiPActive = _b[0],
+    setIsPiPActive = _b[1];
+  var _c = useState(null),
+    pipVideoState = _c[0],
+    setPipVideoState = _c[1];
+  var videoElementRef = useRef(null);
+  var updateVideoState = useCallback(function (state) {
+    setPipVideoState(function (prev) {
+      return prev ? __assign(__assign({}, prev), state) : null;
+    });
+  }, []);
+  var registerVideoElement = useCallback(function (element) {
+    videoElementRef.current = element;
+  }, []);
+  var unregisterVideoElement = useCallback(function () {
+    videoElementRef.current = null;
+  }, []);
+  var enterPiP = useCallback(function (videoElement, videoState) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var error_1;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
-            if (!this.videoElement || !document.pictureInPictureEnabled) {
-              return [2 /*return*/];
+            if (!document.pictureInPictureEnabled) {
+              console.warn('Picture-in-Picture is not supported in this browser');
+              return [2 /*return*/, false];
+            }
+            if (document.pictureInPictureElement) {
+              console.warn('Another video is already in Picture-in-Picture mode');
+              return [2 /*return*/, false];
             }
             _a.label = 1;
           case 1:
-            _a.trys.push([1, 6,, 7]);
-            if (!document.pictureInPictureElement) return [3 /*break*/, 3];
-            return [4 /*yield*/, document.exitPictureInPicture()];
+            _a.trys.push([1, 5,, 6]);
+            // Store video state
+            setPipVideoState(videoState);
+            videoElementRef.current = videoElement;
+            if (!(videoElement.paused && videoState.isPlaying)) return [3 /*break*/, 3];
+            return [4 /*yield*/, videoElement.play()];
           case 2:
             _a.sent();
             _a.label = 3;
           case 3:
-            // Create a container if it doesn't exist
-            if (!this.pipContainer) {
-              this.pipContainer = document.createElement('div');
-              this.pipContainer.id = 'suada-pip-container';
-              this.pipContainer.style.position = 'fixed';
-              this.pipContainer.style.top = '-9999px';
-              this.pipContainer.style.left = '-9999px';
-              this.pipContainer.style.width = '1px';
-              this.pipContainer.style.height = '1px';
-              this.pipContainer.style.zIndex = '-1';
-              document.body.appendChild(this.pipContainer);
-            }
-            persistentVideo_1 = this.createPersistentVideo(this.videoElement);
-            this.pipContainer.appendChild(persistentVideo_1);
-            // Wait for video to load
-            return [4 /*yield*/, new Promise(function (resolve) {
-              if (persistentVideo_1.readyState >= 2) {
-                resolve();
-              } else {
-                persistentVideo_1.addEventListener('loadedmetadata', function () {
-                  return resolve();
-                }, {
-                  once: true
-                });
-              }
-            })
-            // Enter PiP mode
-            ];
+            return [4 /*yield*/, videoElement.requestPictureInPicture()];
           case 4:
-            // Wait for video to load
             _a.sent();
-            // Enter PiP mode
-            return [4 /*yield*/, persistentVideo_1.requestPictureInPicture()
-            // Update the reference to the persistent video
-            ];
+            return [2 /*return*/, true];
           case 5:
-            // Enter PiP mode
-            _a.sent();
-            // Update the reference to the persistent video
-            this.videoElement = persistentVideo_1;
-            return [3 /*break*/, 7];
-          case 6:
             error_1 = _a.sent();
             console.error('Failed to enter picture-in-picture:', error_1);
-            return [3 /*break*/, 7];
-          case 7:
+            return [2 /*return*/, false];
+          case 6:
             return [2 /*return*/];
         }
       });
     });
-  };
-  /**
-   * Exit picture-in-picture mode
-   */
-  PictureInPictureManager.prototype.exitPiP = function () {
-    return __awaiter(this, void 0, void 0, function () {
+  }, []);
+  var exitPiP = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
       var error_2;
       return __generator(this, function (_a) {
         switch (_a.label) {
@@ -88896,88 +88812,56 @@ var PictureInPictureManager = /** @class */function () {
             _a.sent();
             _a.label = 2;
           case 2:
-            return [3 /*break*/, 4];
+            return [2 /*return*/, true];
           case 3:
             error_2 = _a.sent();
             console.error('Failed to exit picture-in-picture:', error_2);
-            return [3 /*break*/, 4];
+            return [2 /*return*/, false];
           case 4:
             return [2 /*return*/];
         }
       });
     });
+  }, []);
+  // Listen for PiP events
+  useEffect(function () {
+    var handlePiPEnter = function handlePiPEnter() {
+      setIsPiPActive(true);
+    };
+    var handlePiPLeave = function handlePiPLeave() {
+      setIsPiPActive(false);
+      // Keep the video state for potential restoration
+      // but don't clear it immediately
+    };
+    document.addEventListener('enterpictureinpicture', handlePiPEnter);
+    document.addEventListener('leavepictureinpicture', handlePiPLeave);
+    return function () {
+      document.removeEventListener('enterpictureinpicture', handlePiPEnter);
+      document.removeEventListener('leavepictureinpicture', handlePiPLeave);
+    };
+  }, []);
+  var value = {
+    isPiPActive: isPiPActive,
+    pipVideoState: pipVideoState,
+    enterPiP: enterPiP,
+    exitPiP: exitPiP,
+    updateVideoState: updateVideoState,
+    registerVideoElement: registerVideoElement,
+    unregisterVideoElement: unregisterVideoElement
   };
-  /**
-   * Check if currently in PiP mode
-   */
-  PictureInPictureManager.prototype.isPiPActive = function () {
-    return !!document.pictureInPictureElement;
-  };
-  /**
-   * Get current video state
-   */
-  PictureInPictureManager.prototype.getCurrentState = function () {
-    return this.currentVideoState;
-  };
-  /**
-   * Restore video state to a new video element
-   */
-  PictureInPictureManager.prototype.restoreStateToVideo = function (videoElement) {
-    if (!this.currentVideoState) return;
-    videoElement.currentTime = this.currentVideoState.currentTime;
-    videoElement.volume = this.currentVideoState.volume;
-    videoElement.playbackRate = this.currentVideoState.playbackRate;
-    if (this.currentVideoState.isPlaying) {
-      videoElement.play()["catch"](console.error);
-    }
-  };
-  PictureInPictureManager.prototype.handleTimeUpdate = function () {
-    if (this.videoElement && this.currentVideoState) {
-      this.currentVideoState.currentTime = this.videoElement.currentTime;
-      this.notifyStateChange();
-    }
-  };
-  PictureInPictureManager.prototype.handlePlayStateChange = function () {
-    if (this.videoElement && this.currentVideoState) {
-      this.currentVideoState.isPlaying = !this.videoElement.paused;
-      this.notifyStateChange();
-    }
-  };
-  PictureInPictureManager.prototype.handleVolumeChange = function () {
-    if (this.videoElement && this.currentVideoState) {
-      this.currentVideoState.volume = this.videoElement.volume;
-      this.notifyStateChange();
-    }
-  };
-  PictureInPictureManager.prototype.handleRateChange = function () {
-    if (this.videoElement && this.currentVideoState) {
-      this.currentVideoState.playbackRate = this.videoElement.playbackRate;
-      this.notifyStateChange();
-    }
-  };
-  PictureInPictureManager.prototype.handlePiPEnter = function () {
-    console.log('Entered picture-in-picture mode');
-  };
-  PictureInPictureManager.prototype.handlePiPExit = function () {
-    console.log('Exited picture-in-picture mode');
-    this.cleanup();
-  };
-  PictureInPictureManager.prototype.notifyStateChange = function () {
-    if (this.onStateChange && this.currentVideoState) {
-      this.onStateChange(this.currentVideoState);
-    }
-  };
-  PictureInPictureManager.prototype.cleanup = function () {
-    // Clean up the persistent container
-    if (this.pipContainer && this.pipContainer.parentNode) {
-      this.pipContainer.parentNode.removeChild(this.pipContainer);
-      this.pipContainer = null;
-    }
-  };
-  return PictureInPictureManager;
-}();
-// Create a singleton instance
-var pipManager = new PictureInPictureManager();
+  return jsxRuntimeExports.jsx(PiPContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+var usePiP = function usePiP() {
+  var context = useContext(PiPContext);
+  if (context === undefined) {
+    throw new Error('usePiP must be used within a PiPProvider');
+  }
+  return context;
+};
 
 var count = 0;
 var defaultVideoState = {
@@ -89010,26 +88894,30 @@ function usePlayerControls(_a) {
     isSubtitlesChecked = _e[0],
     setIsSubtitlesChecked = _e[1];
   var _f = useState(false),
-    isPiPActive = _f[0],
-    setIsPiPActive = _f[1];
+    isFullscreen = _f[0],
+    setIsFullscreen = _f[1];
   var _g = useState(false),
-    isFullscreen = _g[0],
-    setIsFullscreen = _g[1];
-  var _h = useState(false),
-    isControlsActive = _h[0],
-    setIsControlsActive = _h[1];
+    isControlsActive = _g[0],
+    setIsControlsActive = _g[1];
   var videoPlayerRef = useRef(null);
   var controlRef = useRef(null);
   var playerContainerRef = useRef(null);
-  var _j = useState([]),
-    subtitles = _j[0],
-    setSubtitles = _j[1];
-  var _k = useState(''),
-    currentSubtitle = _k[0],
-    setCurrentSubtitle = _k[1];
+  var _h = useState([]),
+    subtitles = _h[0],
+    setSubtitles = _h[1];
+  var _j = useState(''),
+    currentSubtitle = _j[0],
+    setCurrentSubtitle = _j[1];
   var lastSubtitleIndexRef = useRef(null);
   var lastPlaybackTimeRef = useRef(0);
   var lastCallTimeRef = useRef(Date.now());
+  // Use PiP context instead of local state
+  var _k = usePiP(),
+    isPiPActive = _k.isPiPActive,
+    enterPiP = _k.enterPiP,
+    exitPiP = _k.exitPiP,
+    registerVideoElement = _k.registerVideoElement,
+    unregisterVideoElement = _k.unregisterVideoElement;
   var muted = videoState.muted,
     volume = videoState.volume,
     prevVolume = videoState.prevVolume,
@@ -89059,12 +88947,21 @@ function usePlayerControls(_a) {
       setIsFullscreen(!!document.fullscreenElement);
     };
     var handlePiPEnter = function handlePiPEnter() {
-      setIsPiPActive(true);
+      var _a;
+      // Use context method to update global PiP state
+      var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
+      if (videoElement && videoElement instanceof HTMLVideoElement) {
+        enterPiP(videoElement, {
+          url: url,
+          currentTime: videoElement.currentTime,
+          isPlaying: isPlaying,
+          volume: videoState.volume,
+          muted: videoState.muted
+        });
+      }
     };
     var handlePiPLeave = function handlePiPLeave() {
-      setIsPiPActive(false);
-      // Also cleanup the PiP manager when PiP exits
-      pipManager.unregisterVideo();
+      exitPiP();
     };
     document.addEventListener('fullscreenchange', handleFullscreenChange);
     document.addEventListener('enterpictureinpicture', handlePiPEnter);
@@ -89074,6 +88971,8 @@ function usePlayerControls(_a) {
     if (videoElement && videoElement instanceof HTMLVideoElement) {
       videoElement.addEventListener('enterpictureinpicture', handlePiPEnter);
       videoElement.addEventListener('leavepictureinpicture', handlePiPLeave);
+      // Register video element with PiP context
+      registerVideoElement(videoElement);
     }
     return function () {
       document.removeEventListener('fullscreenchange', handleFullscreenChange);
@@ -89084,37 +88983,25 @@ function usePlayerControls(_a) {
         videoElement.removeEventListener('enterpictureinpicture', handlePiPEnter);
         videoElement.removeEventListener('leavepictureinpicture', handlePiPLeave);
       }
+      // Unregister video element from PiP context
+      unregisterVideoElement();
     };
-  }, [url]); // Re-run when URL changes to ensure proper cleanup and setup
+  }, [url, enterPiP, exitPiP, registerVideoElement, unregisterVideoElement, isPlaying, videoState.volume, videoState.muted]); // Re-run when URL changes to ensure proper cleanup and setup
   useEffect(function () {
     setStartPlayed(false);
-    // Check if there's an active PiP session and restore state
-    if (pipManager.isPiPActive()) {
-      var savedState_1 = pipManager.getCurrentState();
-      if (savedState_1 && savedState_1.url === url) {
-        setIsPiPActive(true);
-        // Restore video state from PiP manager
-        setVideoState(function (prev) {
-          var _a;
-          return __assign(__assign({}, prev), {
-            volume: savedState_1.volume,
-            playbackRate: savedState_1.playbackRate,
-            played: savedState_1.currentTime / (((_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getDuration()) || 1)
-          });
-        });
-        setIsPlaying(savedState_1.isPlaying);
-      }
-    }
-  }, [url, setIsPlaying]);
+  }, [url]);
   // Cleanup effect to handle component unmounting while in PiP mode
   useEffect(function () {
+    var currentVideoPlayerRef = videoPlayerRef.current;
     return function () {
-      // Unregister from PiP manager when component unmounts
-      pipManager.unregisterVideo();
       // Check if we're in PiP mode when component unmounts
       if (document.pictureInPictureElement) {
-        // The PiP manager will handle keeping the video alive
-        console.log('Component unmounting while in Picture-in-Picture mode - PiP will persist');
+        // Try to keep the video element alive by cloning it
+        var videoElement = currentVideoPlayerRef === null || currentVideoPlayerRef === void 0 ? void 0 : currentVideoPlayerRef.getInternalPlayer();
+        if (videoElement && videoElement instanceof HTMLVideoElement) {
+          // Create a warning for the user that PiP will exit
+          console.log('Component unmounting while in Picture-in-Picture mode');
+        }
       }
     };
   }, []);
@@ -89288,18 +89175,9 @@ function usePlayerControls(_a) {
     if (videoPlayerRef.current && !startPlayed) {
       videoPlayerRef.current.seekTo(startTime);
       setStartPlayed(true);
-      // Register video with PiP manager when it's ready
-      var videoElement = videoPlayerRef.current.getInternalPlayer();
-      if (videoElement && videoElement instanceof HTMLVideoElement) {
-        // Restore state if there was a previous PiP session
-        var savedState = pipManager.getCurrentState();
-        if (savedState && savedState.url === url && pipManager.isPiPActive()) {
-          pipManager.restoreStateToVideo(videoElement);
-        }
-      }
     }
     setLoading(false);
-  }, [startTime, startPlayed, setLoading, url]);
+  }, [startTime, startPlayed, setLoading]);
   var handleFullScreen = function handleFullScreen() {
     var playerContainer = playerContainerRef.current;
     if (!playerContainer) {
@@ -89321,37 +89199,19 @@ function usePlayerControls(_a) {
       console.warn('Picture-in-Picture is not supported in this browser');
       return;
     }
-    if (document.pictureInPictureElement) {
-      pipManager.exitPiP()["catch"](function (error) {
-        console.error('Failed to exit picture-in-picture:', error);
-      });
+    if (isPiPActive) {
+      // Exit PiP using context method
+      exitPiP();
     } else {
-      // Register the video with the PiP manager
-      pipManager.registerVideo(videoElement, url, function (state) {
-        // Update local state when PiP video state changes
-        setVideoState(function (prev) {
-          return __assign(__assign({}, prev), {
-            played: state.currentTime / duration,
-            volume: state.volume,
-            playbackRate: state.playbackRate
-          });
-        });
-        setIsPlaying(state.isPlaying);
-      });
-      // Ensure the video is playing before entering PiP mode
-      if (videoElement.paused && isPlaying) {
-        videoElement.play().then(function () {
-          pipManager.enterPiP()["catch"](function (error) {
-            console.error('Failed to enter picture-in-picture:', error);
-          });
-        })["catch"](function (error) {
-          console.error('Failed to play video before PiP:', error);
-        });
-      } else {
-        pipManager.enterPiP()["catch"](function (error) {
-          console.error('Failed to enter picture-in-picture:', error);
-        });
-      }
+      // Enter PiP using context method
+      var pipVideoState = {
+        url: url,
+        currentTime: videoElement.currentTime,
+        isPlaying: isPlaying,
+        volume: videoState.volume,
+        muted: videoState.muted
+      };
+      enterPiP(videoElement, pipVideoState);
     }
   };
   var handleKeyDown = useCallback(function (event) {
@@ -95055,4 +94915,4 @@ var RangeSlider = function RangeSlider(_a) {
   });
 };
 
-export { AudioPlayer as A, Button$1 as B, CourseCard as C, DropDown as D, GridActionMenu as G, Loader as L, NavigationBar as N, PhoneCountryCode as P, RadioButton as R, SearchInput as S, TranslationProvider as T, Uploader as U, VideoPlayer as V, requirePatterns as a, ThemeProvider as b, CustomSwitcher as c, DatePicker as d, Checkbox as e, Pagination as f, getDefaultExportFromCjs as g, Breadcrumb as h, Tile as i, ColorPicker as j, Badge as k, TooltipHeight as l, CustomTooltip as m, SplashScreen as n, ColumnNavigation as o, StatusIndicator as p, TabPanel as q, requireUtils as r, TabNavigation as s, activeTabClassName as t, DrawerTips as u, RangeSlider as v };
+export { AudioPlayer as A, Button$1 as B, CourseCard as C, DropDown as D, GridActionMenu as G, Loader as L, NavigationBar as N, PhoneCountryCode as P, RadioButton as R, SearchInput as S, TranslationProvider as T, Uploader as U, VideoPlayer as V, requirePatterns as a, ThemeProvider as b, CustomSwitcher as c, DatePicker as d, Checkbox as e, Pagination as f, getDefaultExportFromCjs as g, Breadcrumb as h, Tile as i, ColorPicker as j, Badge as k, TooltipHeight as l, CustomTooltip as m, PiPProvider as n, SplashScreen as o, ColumnNavigation as p, StatusIndicator as q, requireUtils as r, TabPanel as s, TabNavigation as t, usePiP as u, activeTabClassName as v, DrawerTips as w, RangeSlider as x };

package/dist/components/index.d.ts

@@ -19,6 +19,8 @@ export { Badge } from './Badge';
 export { TooltipHeight } from './Tooltip';
 export { CustomTooltip } from './Tooltip';
 export { VideoPlayer } from './VideoPlayer';
+export { PiPProvider } from './VideoPlayer/PiPContext';
+export { usePiP } from './VideoPlayer/usePiP';
 export { SplashScreen } from './SplashScreen';
 export { AudioPlayer } from './AudioPlayer';
 export { ColumnNavigation } from './ColumnNavigation';

package/dist/components/index.esm.js

@@ -1,3 +1,3 @@
-export { A as AudioPlayer, k as Badge, h as Breadcrumb, B as Button, e as Checkbox, j as ColorPicker, o as ColumnNavigation, C as CourseCard, c as CustomSwitcher, m as CustomTooltip, d as DatePicker, u as DrawerTips, D as DropDown, G as GridActionMenu, L as Loader, N as NavigationBar, f as Pagination, P as PhoneCountryCode, R as RadioButton, v as RangeSlider, S as SearchInput, n as SplashScreen, p as StatusIndicator, s as TabNavigation, q as TabPanel, b as ThemeProvider, i as Tile, l as TooltipHeight, T as TranslationProvider, U as Uploader, V as VideoPlayer, t as activeTabClassName } from './index-DKAGRUEW.esm.js';
+export { A as AudioPlayer, k as Badge, h as Breadcrumb, B as Button, e as Checkbox, j as ColorPicker, p as ColumnNavigation, C as CourseCard, c as CustomSwitcher, m as CustomTooltip, d as DatePicker, w as DrawerTips, D as DropDown, G as GridActionMenu, L as Loader, N as NavigationBar, f as Pagination, P as PhoneCountryCode, n as PiPProvider, R as RadioButton, x as RangeSlider, S as SearchInput, o as SplashScreen, q as StatusIndicator, t as TabNavigation, s as TabPanel, b as ThemeProvider, i as Tile, l as TooltipHeight, T as TranslationProvider, U as Uploader, V as VideoPlayer, v as activeTabClassName, u as usePiP } from './index-F6zEoSWf.esm.js';
 import 'react';
 import 'react-dom';