softbuilders-react-video-player 1.1.72 → 1.1.73

package/dist/index.mjs

@@ -31,7 +31,14 @@ var __objRest = (source, exclude) => {
 };
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
-import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState15 } from "react";
+import {
+  forwardRef as forwardRef2,
+  memo,
+  useCallback as useCallback4,
+  useEffect as useEffect15,
+  useMemo,
+  useState as useState15
+} from "react";
 
 // src/components/VideoPlayerComponent/index.tsx
 import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState14 } from "react";
@@ -521,7 +528,7 @@ var VolumeSlider = ({
   const [volume, setVolume] = useState2(0);
   useEffect2(() => {
     const updateVolumeState = () => {
-      const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number(player == null ? void 0 : player.volume()) * 100;
+      const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number((player == null ? void 0 : player.volume()) || 0) * 100;
       setVolume(currentVolume);
     };
     updateVolumeState();
@@ -1609,7 +1616,6 @@ var VideoPlayerComponent = forwardRef(
     bottomRedBar = true,
     noteButtonClick
   }, ref) => {
-    var _a;
     const videoRef = useRef2(void 0);
     const playerRef = useRef2(void 0);
     const [isReady, setIsReady] = useState14(false);
@@ -1657,6 +1663,8 @@ var VideoPlayerComponent = forwardRef(
       }
       return () => {
         if (playerRef.current) {
+          playerRef.current.dispose();
+          playerRef.current = void 0;
           setTimeout(() => {
             if (bigPlayButtonRoot[id]) {
               bigPlayButtonRoot[id].unmount();
@@ -1744,16 +1752,19 @@ var VideoPlayerComponent = forwardRef(
     useEffect14(() => {
       return () => {
         if (playerRef.current) {
-          playerRef.current.dispose();
-          playerRef.current = void 0;
-          if (bigPlayButtonRoot[id]) {
-            bigPlayButtonRoot[id].unmount();
-            bigPlayButtonRoot[id] = void 0;
-          }
-          if (controlBarRoot[id]) {
-            controlBarRoot[id].unmount();
-            controlBarRoot[id] = void 0;
-          }
+          setTimeout(() => {
+            var _a;
+            if (bigPlayButtonRoot[id]) {
+              bigPlayButtonRoot[id].unmount();
+              bigPlayButtonRoot[id] = void 0;
+            }
+            if (controlBarRoot[id]) {
+              controlBarRoot[id].unmount();
+              controlBarRoot[id] = void 0;
+            }
+            (_a = playerRef.current) == null ? void 0 : _a.dispose();
+            playerRef.current = void 0;
+          }, 0);
         }
       };
     }, []);
@@ -1828,9 +1839,9 @@ var VideoPlayerComponent = forwardRef(
       const observer = new IntersectionObserver(
         (entries) => {
           entries.forEach((entry) => {
-            var _a2, _b;
+            var _a, _b;
             if (entry.isIntersecting === false) {
-              if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.paused()) === false) {
+              if (((_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.paused()) === false) {
                 try {
                   (_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
                   setIsPaused(true);
@@ -1858,20 +1869,20 @@ var VideoPlayerComponent = forwardRef(
     const [timeSeeker, setTimeSeeker] = useState14("0");
     useEffect14(() => {
       const updateTimeSeeker = () => {
-        var _a2, _b, _c, _d;
+        var _a;
         if (playerRef == null ? void 0 : playerRef.current) {
-          const currentTime = (_b = (_a2 = playerRef.current) == null ? void 0 : _a2.currentTime) == null ? void 0 : _b.call(_a2);
-          const duration2 = (_d = (_c = playerRef.current) == null ? void 0 : _c.duration) == null ? void 0 : _d.call(_c);
+          const currentTime = (_a = playerRef.current) == null ? void 0 : _a.currentTime();
+          const duration2 = playerRef.current.duration();
           if (duration2 && currentTime !== void 0) {
-            const value = `${currentTime / duration2 * 100}%`;
-            setTimeSeeker(value);
+            setTimeSeeker(`${currentTime / duration2 * 100}%`);
           } else {
             setTimeSeeker("0");
           }
         }
       };
-      updateTimeSeeker();
-    }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
+      const interval = setInterval(updateTimeSeeker, 500);
+      return () => clearInterval(interval);
+    }, [playerRef]);
     return /* @__PURE__ */ jsxs15(
       "div",
       {
@@ -1944,48 +1955,38 @@ var Component = forwardRef2(
     bottomRedBar,
     noteButtonClick
   }, ref) => {
-    options = __spreadProps(__spreadValues({}, options), {
-      responsive: true,
-      inactivityTimeout: 0,
-      fullscreen: {
-        navigationUI: "hide"
-      }
-    });
-    if (options.autoplay === void 0)
-      options.autoplay = DEFAULT_OPTIONS.autoplay;
-    if (options.controls === void 0)
-      options.controls = DEFAULT_OPTIONS.controls;
-    if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
-    if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
-    if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
-    if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
+    const mergedOptions = useMemo(
+      () => __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options), {
+        responsive: true,
+        inactivityTimeout: 0,
+        fullscreen: { navigationUI: "hide" }
+      }),
+      [options]
+    );
     const [tracks, setTracks] = useState15([]);
-    useEffect15(() => {
-    }, [isFocused]);
-    useEffect15(() => {
-      const getTracks = async () => {
-        const newTracks = [];
-        if (Array.isArray(options == null ? void 0 : options.tracks))
-          for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
-            let src = s.src;
-            if (s.memeType == "text/srt") {
-              src = await convertSRTtoVTT(s.src);
-            }
-            newTracks.push(__spreadProps(__spreadValues({}, s), {
-              src
-            }));
+    const getTracks = useCallback4(async () => {
+      const newTracks = [];
+      if (Array.isArray(mergedOptions.tracks)) {
+        for (const s of mergedOptions.tracks) {
+          let src = s.src;
+          if (s.memeType === "text/srt") {
+            src = await convertSRTtoVTT(s.src);
           }
-        setTracks(newTracks);
-      };
+          newTracks.push(__spreadProps(__spreadValues({}, s), { src }));
+        }
+      }
+      setTracks(newTracks);
+    }, [mergedOptions.tracks]);
+    useEffect15(() => {
       getTracks();
-    }, [options == null ? void 0 : options.tracks]);
-    const id = (Date.now() + Math.random() * 100).toString();
+    }, [getTracks]);
+    const id = useMemo(() => (Date.now() + Math.random() * 100).toString(), []);
     return /* @__PURE__ */ jsx37(
       VideoPlayerComponent_default,
       {
         id,
         chapters,
-        options: __spreadProps(__spreadValues({}, options), { tracks }),
+        options: __spreadProps(__spreadValues({}, mergedOptions), { tracks }),
         notes,
         poster: "",
         startTime,