suada-components 1.9.0 → 1.9.1

package/dist/components/{index-DKAGRUEW.esm.js → index-C4Mk2H3N.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-BUyvzJQw.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-BgnX8kOF.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-Cv0qx3aR.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-BZleoaJh.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-CDrTA2_L.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-DbRbUflP.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-PneZ48dn.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-CXOhay4a.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-D2n1NDDi.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-D9qk3D6i.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-YcZH6kkW.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-B0UZLr6g.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-BzkVMbQ8.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-DQLbQ8_C.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,247 +88738,6 @@ 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;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (!this.videoElement || !document.pictureInPictureEnabled) {
-              return [2 /*return*/];
-            }
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 6,, 7]);
-            if (!document.pictureInPictureElement) return [3 /*break*/, 3];
-            return [4 /*yield*/, document.exitPictureInPicture()];
-          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
-            ];
-          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
-            ];
-          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*/];
-        }
-      });
-    });
-  };
-  /**
-   * Exit picture-in-picture mode
-   */
-  PictureInPictureManager.prototype.exitPiP = function () {
-    return __awaiter(this, void 0, void 0, function () {
-      var error_2;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            _a.trys.push([0, 3,, 4]);
-            if (!document.pictureInPictureElement) return [3 /*break*/, 2];
-            return [4 /*yield*/, document.exitPictureInPicture()];
-          case 1:
-            _a.sent();
-            _a.label = 2;
-          case 2:
-            return [3 /*break*/, 4];
-          case 3:
-            error_2 = _a.sent();
-            console.error('Failed to exit picture-in-picture:', error_2);
-            return [3 /*break*/, 4];
-          case 4:
-            return [2 /*return*/];
-        }
-      });
-    });
-  };
-  /**
-   * 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();
-
 var count = 0;
 var defaultVideoState = {
   muted: false,
@@ -89063,8 +88822,6 @@ function usePlayerControls(_a) {
     };
     var handlePiPLeave = function handlePiPLeave() {
       setIsPiPActive(false);
-      // Also cleanup the PiP manager when PiP exits
-      pipManager.unregisterVideo();
     };
     document.addEventListener('fullscreenchange', handleFullscreenChange);
     document.addEventListener('enterpictureinpicture', handlePiPEnter);
@@ -89088,33 +88845,19 @@ function usePlayerControls(_a) {
   }, [url]); // 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 +89031,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) {
@@ -89322,33 +89056,21 @@ function usePlayerControls(_a) {
       return;
     }
     if (document.pictureInPictureElement) {
-      pipManager.exitPiP()["catch"](function (error) {
+      document.exitPictureInPicture()["catch"](function (error) {
         console.error('Failed to exit picture-in-picture:', error);
       });
     } 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) {
+          videoElement.requestPictureInPicture()["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) {
+        videoElement.requestPictureInPicture()["catch"](function (error) {
           console.error('Failed to enter picture-in-picture:', error);
         });
       }
@@ -89726,6 +89448,131 @@ var VideoPlayer = function VideoPlayer(_a) {
   });
 };
 
+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 (!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, 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:
+            return [4 /*yield*/, videoElement.requestPictureInPicture()];
+          case 4:
+            _a.sent();
+            return [2 /*return*/, true];
+          case 5:
+            error_1 = _a.sent();
+            console.error('Failed to enter picture-in-picture:', error_1);
+            return [2 /*return*/, false];
+          case 6:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, []);
+  var exitPiP = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var error_2;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 3,, 4]);
+            if (!document.pictureInPictureElement) return [3 /*break*/, 2];
+            return [4 /*yield*/, document.exitPictureInPicture()];
+          case 1:
+            _a.sent();
+            _a.label = 2;
+          case 2:
+            return [2 /*return*/, true];
+          case 3:
+            error_2 = _a.sent();
+            console.error('Failed to exit picture-in-picture:', error_2);
+            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
+  };
+  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 Whiteboard = dt.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  background-color: #ffffff;\n  padding: 20px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 75vh;\n  border: 1px solid #e7e9ed;\n  border-radius: 4px;\n  flex-direction: column;\n  padding: 40px;\n"], ["\n  background-color: #ffffff;\n  padding: 20px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 75vh;\n  border: 1px solid #e7e9ed;\n  border-radius: 4px;\n  flex-direction: column;\n  padding: 40px;\n"])));
 var CenteredText = dt.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  font-weight: 800;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: 20px;\n  font-family: 'Open Sans', sans-serif;\n  text-align: center;\n  gap: 8px;\n  margin-top: ", ";\n\n  h1 {\n    font-size: 18px;\n    font-weight: 800;\n  }\n\n  h4 {\n    color: #68707a;\n    font-size: 16px;\n    font-weight: 500;\n  }\n"], ["\n  font-weight: 800;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: 20px;\n  font-family: 'Open Sans', sans-serif;\n  text-align: center;\n  gap: 8px;\n  margin-top: ", ";\n\n  h1 {\n    font-size: 18px;\n    font-weight: 800;\n  }\n\n  h4 {\n    color: #68707a;\n    font-size: 16px;\n    font-weight: 500;\n  }\n"])), function (_a) {
   var marginTop = _a.marginTop;
@@ -95055,4 +94902,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-C4Mk2H3N.esm.js';
 import 'react';
 import 'react-dom';

package/dist/components/index.js

@@ -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.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}