suada-components 1.8.0 → 1.9.0

package/dist/components/{index-XiB9Yp2-.js → index-DetZ05pw.js}

@@ -81375,7 +81375,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-JSWV2_hs.js'
+	      './YouTube-DC2uZ14c.js'
 	    ); }).then(function (n) { return n.YouTube; }))
 	  },
 	  {
@@ -81384,7 +81384,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-DHLHmaaB.js'
+	      './SoundCloud-CIWqB-QW.js'
 	    ); }).then(function (n) { return n.SoundCloud; }))
 	  },
 	  {
@@ -81393,7 +81393,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-DKpnTiZ8.js'
+	      './Vimeo-DrDJ5O9H.js'
 	    ); }).then(function (n) { return n.Vimeo; }))
 	  },
 	  {
@@ -81402,7 +81402,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-Bgsc5vvM.js'
+	      './Mux-Cosy8sFO.js'
 	    ); }).then(function (n) { return n.Mux; }))
 	  },
 	  {
@@ -81411,7 +81411,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-DS0ye_bL.js'
+	      './Facebook-42iqQU2G.js'
 	    ); }).then(function (n) { return n.Facebook; }))
 	  },
 	  {
@@ -81420,7 +81420,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-BDhbB3m3.js'
+	      './Streamable-9anYiQtU.js'
 	    ); }).then(function (n) { return n.Streamable; }))
 	  },
 	  {
@@ -81429,7 +81429,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-DKdMEz2a.js'
+	      './Wistia-fh9U2CA2.js'
 	    ); }).then(function (n) { return n.Wistia; }))
 	  },
 	  {
@@ -81438,7 +81438,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-ZG7WuoXD.js'
+	      './Twitch-Dud6e1Rv.js'
 	    ); }).then(function (n) { return n.Twitch; }))
 	  },
 	  {
@@ -81447,7 +81447,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-SZKPSpD1.js'
+	      './DailyMotion-B7yDPBbg.js'
 	    ); }).then(function (n) { return n.DailyMotion; }))
 	  },
 	  {
@@ -81456,7 +81456,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-C1z9BVJ8.js'
+	      './Mixcloud-sBbcL5rG.js'
 	    ); }).then(function (n) { return n.Mixcloud; }))
 	  },
 	  {
@@ -81465,7 +81465,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-CkSCnLg5.js'
+	      './Vidyard-BuOu85uS.js'
 	    ); }).then(function (n) { return n.Vidyard; }))
 	  },
 	  {
@@ -81474,7 +81474,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-DAMolg_c.js'
+	      './Kaltura-Ct6kwbgP.js'
 	    ); }).then(function (n) { return n.Kaltura; }))
 	  },
 	  {
@@ -81486,7 +81486,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-B4_DDZXQ.js'
+	      './FilePlayer-CAnHK0Cd.js'
 	    ); }).then(function (n) { return n.FilePlayer; }))
 	  }
 	];
@@ -82307,7 +82307,7 @@ function requireReactPlayer () {
 	var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
 	const Preview = (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	  /* webpackChunkName: 'reactPlayerPreview' */
-	  './Preview-CKXk6Axz.js'
+	  './Preview-DiVfo6aa.js'
 	); }).then(function (n) { return n.Preview; }));
 	const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
 	const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -88758,6 +88758,247 @@ 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,
@@ -88842,6 +89083,8 @@ 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);
@@ -88865,19 +89108,33 @@ function usePlayerControls(_a) {
   }, [url]); // Re-run when URL changes to ensure proper cleanup and setup
   React.useEffect(function () {
     setStartPlayed(false);
-  }, [url]);
+    // 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]);
   // Cleanup effect to handle component unmounting while in PiP mode
   React.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) {
-        // 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');
-        }
+        // The PiP manager will handle keeping the video alive
+        console.log('Component unmounting while in Picture-in-Picture mode - PiP will persist');
       }
     };
   }, []);
@@ -89051,9 +89308,18 @@ 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]);
+  }, [startTime, startPlayed, setLoading, url]);
   var handleFullScreen = function handleFullScreen() {
     var playerContainer = playerContainerRef.current;
     if (!playerContainer) {
@@ -89076,21 +89342,33 @@ function usePlayerControls(_a) {
       return;
     }
     if (document.pictureInPictureElement) {
-      document.exitPictureInPicture()["catch"](function (error) {
+      pipManager.exitPiP()["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 () {
-          videoElement.requestPictureInPicture()["catch"](function (error) {
+          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 {
-        videoElement.requestPictureInPicture()["catch"](function (error) {
+        pipManager.enterPiP()["catch"](function (error) {
           console.error('Failed to enter picture-in-picture:', error);
         });
       }

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-BTR541gv.esm.js';
+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';
 import 'react';
 import 'react-dom';

package/dist/icons/components/VideoPlayer/pipManager.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Global Picture-in-Picture Manager
+ * This module manages PiP state across component unmounts and route changes
+ */
+interface PiPVideoState {
+    url: string;
+    currentTime: number;
+    isPlaying: boolean;
+    volume: number;
+    playbackRate: number;
+}
+declare class PictureInPictureManager {
+    private videoElement;
+    private pipContainer;
+    private currentVideoState;
+    private onStateChange;
+    constructor();
+    /**
+     * Register a video element for PiP management
+     */
+    registerVideo(videoElement: HTMLVideoElement, url: string, onStateChange?: (state: PiPVideoState) => void): void;
+    /**
+     * Unregister the current video element
+     */
+    unregisterVideo(): void;
+    /**
+     * Create a persistent video element for PiP
+     */
+    private createPersistentVideo;
+    /**
+     * Enter picture-in-picture mode with persistence
+     */
+    enterPiP(): Promise<void>;
+    /**
+     * Exit picture-in-picture mode
+     */
+    exitPiP(): Promise<void>;
+    /**
+     * Check if currently in PiP mode
+     */
+    isPiPActive(): boolean;
+    /**
+     * Get current video state
+     */
+    getCurrentState(): PiPVideoState | null;
+    /**
+     * Restore video state to a new video element
+     */
+    restoreStateToVideo(videoElement: HTMLVideoElement): void;
+    private handleTimeUpdate;
+    private handlePlayStateChange;
+    private handleVolumeChange;
+    private handleRateChange;
+    private handlePiPEnter;
+    private handlePiPExit;
+    private notifyStateChange;
+    private cleanup;
+}
+export declare const pipManager: PictureInPictureManager;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "suada-components",
   "private": false,
-  "version": "1.8.0",
+  "version": "1.9.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",