softbuilders-react-video-player 1.1.54 → 1.1.56

package/dist/index.mjs

@@ -31,10 +31,10 @@ var __objRest = (source, exclude) => {
 };
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
-import { memo, useEffect as useEffect15, useState as useState14 } from "react";
+import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState14 } from "react";
 
 // src/components/VideoPlayerComponent/index.tsx
-import { useEffect as useEffect14, useRef as useRef2, useState as useState13 } from "react";
+import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState13 } from "react";
 import ReactDOM from "react-dom/client";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
@@ -1452,68 +1452,156 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
     }
   }
 };
-var VideoPlayerComponent = ({
-  id,
-  options,
-  notes,
-  chapters,
-  startTime = 0,
-  handleSaveNoteAction,
-  poster,
-  onPlay,
-  onPause,
-  disableNote
-}) => {
-  var _a;
-  const videoRef = useRef2(void 0);
-  const playerRef = useRef2(void 0);
-  const [isReady, setIsReady] = useState13(false);
-  const [isPaused, setIsPaused] = useState13(!options.autoplay);
-  const [duration, setDuration] = useState13(1);
-  const [opacity, setOpacity] = useState13("0");
-  const [isControlBarPresent, setIsControlBarPresent] = useState13(true);
-  const [bgColor, setBgColor] = useState13("transparent");
-  const [isQualityMenuOpen, setIsQualityMenuOpen] = useState13(false);
-  const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState13(false);
-  const [isHovered, setIsHovered] = useState13(false);
-  const onReady = (player) => {
-    if (playerRef) {
-      playerRef.current = player;
-      setIsReady(true);
-      player == null ? void 0 : player.currentTime(startTime);
-      player.on("waiting", () => {
-      });
-      player.on("dispose", () => {
-        videojs.log("player will dispose");
-        setIsReady(false);
-      });
-      player.on("loadedmetadata", () => {
-        const d = player.duration() || 0;
-        setDuration(d);
-      });
-    }
-  };
-  useEffect14(() => {
-    if (!playerRef.current) {
-      const videoElement = document.createElement("video-js");
-      videoElement.setAttribute("playsinline", "true");
-      videoElement.classList.add("vjs-big-play-centered");
-      if (poster) {
-        videoElement.setAttribute("poster", poster);
+var VideoPlayerComponent = forwardRef(
+  ({
+    id,
+    options,
+    notes,
+    chapters,
+    startTime = 0,
+    handleSaveNoteAction,
+    poster,
+    onPlay,
+    onPause,
+    disableNote,
+    childRef
+  }) => {
+    var _a;
+    const videoRef = useRef2(void 0);
+    const playerRef = useRef2(void 0);
+    const [isReady, setIsReady] = useState13(false);
+    const [isPaused, setIsPaused] = useState13(!options.autoplay);
+    const [duration, setDuration] = useState13(1);
+    const [opacity, setOpacity] = useState13("0");
+    const [isControlBarPresent, setIsControlBarPresent] = useState13(true);
+    const [bgColor, setBgColor] = useState13("transparent");
+    const [isQualityMenuOpen, setIsQualityMenuOpen] = useState13(false);
+    const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState13(false);
+    const [isHovered, setIsHovered] = useState13(false);
+    const onReady = (player) => {
+      if (playerRef) {
+        playerRef.current = player;
+        setIsReady(true);
+        player == null ? void 0 : player.currentTime(startTime);
+        player.on("waiting", () => {
+        });
+        player.on("dispose", () => {
+          videojs.log("player will dispose");
+          setIsReady(false);
+        });
+        player.on("loadedmetadata", () => {
+          const d = player.duration() || 0;
+          setDuration(d);
+        });
       }
-      videoRef.current.appendChild(videoElement);
-      videoElement.style.width = "100%";
-      videoElement.style.height = "100%";
-      videoElement.style.objectFit = "cover";
-      playerRef.current = videojs(videoElement, options, () => {
-        onReady(playerRef.current);
-      });
-    }
-    return () => {
+    };
+    useEffect14(() => {
+      if (!playerRef.current) {
+        const videoElement = document.createElement("video-js");
+        videoElement.setAttribute("playsinline", "true");
+        videoElement.classList.add("vjs-big-play-centered");
+        if (poster) {
+          videoElement.setAttribute("poster", poster);
+        }
+        videoRef.current.appendChild(videoElement);
+        videoElement.style.width = "100%";
+        videoElement.style.height = "100%";
+        videoElement.style.objectFit = "cover";
+        playerRef.current = videojs(videoElement, options, () => {
+          onReady(playerRef.current);
+        });
+      }
+      return () => {
+        if (playerRef.current) {
+          playerRef.current.dispose();
+          playerRef.current = void 0;
+          setTimeout(() => {
+            if (bigPlayButtonRoot[id]) {
+              bigPlayButtonRoot[id].unmount();
+              bigPlayButtonRoot[id] = void 0;
+            }
+            if (controlBarRoot[id]) {
+              controlBarRoot[id].unmount();
+              controlBarRoot[id] = void 0;
+            }
+          }, 0);
+        }
+      };
+    }, [options, poster]);
+    useEffect14(() => {
+      if (playerRef.current && isReady) {
+        const currentTime = playerRef.current.currentTime() || 0;
+        if (isPaused) {
+          if (onPause) onPause(currentTime);
+        } else {
+          if (onPlay) onPlay(currentTime);
+        }
+      }
+    }, [isPaused, isReady]);
+    useEffect14(() => {
+      if (isReady) {
+        const controlBarTimeout = setTimeout(() => {
+          renderControlBar(
+            id,
+            playerRef.current,
+            isPaused,
+            setIsPaused,
+            duration,
+            notes,
+            chapters,
+            5,
+            handleSaveNoteAction,
+            opacity,
+            (e) => {
+              handlePlayerClick(e, true);
+            },
+            bgColor,
+            setIsQualityMenuOpen,
+            setIsSubtitleMenuOpen,
+            disableNote
+          );
+        }, 500);
+        return () => clearTimeout(controlBarTimeout);
+      }
+    }, [
+      id,
+      playerRef,
+      isPaused,
+      setIsPaused,
+      notes,
+      chapters,
+      isReady,
+      handleSaveNoteAction,
+      duration,
+      opacity
+    ]);
+    useEffect14(() => {
+      if (isReady) {
+        const playButtonTimeout = setTimeout(() => {
+          renderBigPlayButton(
+            id,
+            playerRef.current,
+            isPaused,
+            setIsPaused,
+            opacity
+          );
+        }, 500);
+        return () => clearTimeout(playButtonTimeout);
+      }
+    }, [id, isPaused, isReady, opacity]);
+    useEffect14(() => {
       if (playerRef.current) {
-        playerRef.current.dispose();
-        playerRef.current = void 0;
-        setTimeout(() => {
+        const intervalId = setInterval(() => {
+          if (playerRef.current) setIsPaused(playerRef.current.paused());
+        }, 500);
+        return () => clearInterval(intervalId);
+      }
+    }, []);
+    useEffect14(() => {
+      return () => {
+        if (playerRef.current) {
+          playerRef.current.dispose();
+          playerRef.current = void 0;
           if (bigPlayButtonRoot[id]) {
             bigPlayButtonRoot[id].unmount();
             bigPlayButtonRoot[id] = void 0;
@@ -1522,234 +1610,151 @@ var VideoPlayerComponent = ({
             controlBarRoot[id].unmount();
             controlBarRoot[id] = void 0;
           }
-        }, 0);
-      }
-    };
-  }, [options, poster]);
-  useEffect14(() => {
-    if (playerRef.current && isReady) {
-      const currentTime = playerRef.current.currentTime() || 0;
-      if (isPaused) {
-        if (onPause) onPause(currentTime);
-      } else {
-        if (onPlay) onPlay(currentTime);
-      }
-    }
-  }, [isPaused, isReady]);
-  useEffect14(() => {
-    if (isReady) {
-      const controlBarTimeout = setTimeout(() => {
-        renderControlBar(
-          id,
-          playerRef.current,
-          isPaused,
-          setIsPaused,
-          duration,
-          notes,
-          chapters,
-          5,
-          handleSaveNoteAction,
-          opacity,
-          (e) => {
-            handlePlayerClick(e, true);
-          },
-          bgColor,
-          setIsQualityMenuOpen,
-          setIsSubtitleMenuOpen,
-          disableNote
-        );
-      }, 500);
-      return () => clearTimeout(controlBarTimeout);
-    }
-  }, [
-    id,
-    playerRef,
-    isPaused,
-    setIsPaused,
-    notes,
-    chapters,
-    isReady,
-    handleSaveNoteAction,
-    duration,
-    opacity
-  ]);
-  useEffect14(() => {
-    if (isReady) {
-      const playButtonTimeout = setTimeout(() => {
-        renderBigPlayButton(
-          id,
-          playerRef.current,
-          isPaused,
-          setIsPaused,
-          opacity
-        );
-      }, 500);
-      return () => clearTimeout(playButtonTimeout);
-    }
-  }, [id, isPaused, isReady, opacity]);
-  useEffect14(() => {
-    if (playerRef.current) {
-      const intervalId = setInterval(() => {
-        if (playerRef.current) setIsPaused(playerRef.current.paused());
-      }, 500);
-      return () => clearInterval(intervalId);
-    }
-  }, []);
-  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;
+      };
+    }, []);
+    const timeoutRef = useRef2(null);
+    useEffect14(() => {
+      if (isQualityMenuOpen || isSubtitleMenuOpen) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
         }
+        setOpacity("100");
+      } else {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        setOpacity("0");
+        timeoutRef.current = setTimeout(() => {
+          setIsControlBarPresent(false);
+        }, 3e3);
       }
-    };
-  }, []);
-  const timeoutRef = useRef2(null);
-  useEffect14(() => {
-    if (isQualityMenuOpen || isSubtitleMenuOpen) {
+    }, [isQualityMenuOpen, isSubtitleMenuOpen]);
+    const handlePlayerClick = async (e, isTimerOnly = false) => {
+      e.preventDefault();
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
       setOpacity("100");
-    } else {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      setOpacity("0");
+      setIsControlBarPresent(true);
       timeoutRef.current = setTimeout(() => {
+        setOpacity("0");
+        setBgColor("transparent");
         setIsControlBarPresent(false);
       }, 3e3);
-    }
-  }, [isQualityMenuOpen, isSubtitleMenuOpen]);
-  const handlePlayerClick = async (e, isTimerOnly = false) => {
-    e.preventDefault();
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setOpacity("100");
-    setIsControlBarPresent(true);
-    timeoutRef.current = setTimeout(() => {
-      setOpacity("0");
-      setBgColor("transparent");
-      setIsControlBarPresent(false);
-    }, 3e3);
-    if (isTimerOnly) {
-      return;
-    }
-    if (!isControlBarPresent) {
-      return;
-    }
-    if (playerRef.current) {
-      if (playerRef.current.paused()) {
-        try {
-          await playerRef.current.play();
-          setIsPaused(false);
-        } catch (error) {
-          console.error("Failed to play video:", error);
-        }
-      } else {
-        playerRef.current.pause();
-        setIsPaused(true);
-        if (onPause) onPause(playerRef.current.currentTime() || 0);
+      if (isTimerOnly) {
+        return;
       }
-    }
-  };
-  const videoRefs = useRef2(null);
-  useEffect14(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          var _a2, _b;
-          if (entry.isIntersecting === false) {
-            if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.paused()) === false) {
-              try {
-                (_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
-                setIsPaused(true);
-              } catch (error) {
-                console.error("Failed to play video:", error);
-              }
-            }
-          }
-        });
-      },
-      {
-        threshold: 0.1
-        // The amount of the component that must be visible (0.1 means 10% visible)
+      if (!isControlBarPresent) {
+        return;
       }
-    );
-    if (videoRefs.current) {
-      observer.observe(videoRefs.current);
-    }
-    return () => {
-      if (videoRefs.current) {
-        observer.unobserve(videoRef.current);
-      }
-    };
-  }, []);
-  const [timeSeeker, setTimeSeeker] = useState13("0");
-  useEffect14(() => {
-    const updateTimeSeeker = () => {
-      var _a2, _b, _c, _d;
-      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);
-        if (duration2 && currentTime !== void 0) {
-          const value = `${currentTime / duration2 * 100}%`;
-          setTimeSeeker(value);
+      if (playerRef.current) {
+        if (playerRef.current.paused()) {
+          try {
+            await playerRef.current.play();
+            setIsPaused(false);
+          } catch (error) {
+            console.error("Failed to play video:", error);
+          }
         } else {
-          setTimeSeeker("0");
+          playerRef.current.pause();
+          setIsPaused(true);
+          if (onPause) onPause(playerRef.current.currentTime() || 0);
         }
       }
     };
-    updateTimeSeeker();
-  }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
-  return /* @__PURE__ */ jsxs14(
-    "div",
-    {
-      ref: videoRefs,
-      id: `video-container-${id}`,
-      onMouseMove: () => {
-        handlePlayerClick(event, true);
-      },
-      className: "sb-relative  sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ",
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: [
-        /* @__PURE__ */ jsx35(
-          "div",
-          {
-            className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"}`,
-            style: {
-              width: timeSeeker
+    const videoRefs = useRef2(null);
+    useEffect14(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            var _a2, _b;
+            if (entry.isIntersecting === false) {
+              if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.paused()) === false) {
+                try {
+                  (_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
+                  setIsPaused(true);
+                } catch (error) {
+                  console.error("Failed to play video:", error);
+                }
+              }
             }
+          });
+        },
+        {
+          threshold: 0.1
+          // The amount of the component that must be visible (0.1 means 10% visible)
+        }
+      );
+      if (videoRefs.current) {
+        observer.observe(videoRefs.current);
+      }
+      return () => {
+        if (videoRefs.current) {
+          observer.unobserve(videoRef.current);
+        }
+      };
+    }, []);
+    const [timeSeeker, setTimeSeeker] = useState13("0");
+    useEffect14(() => {
+      const updateTimeSeeker = () => {
+        var _a2, _b, _c, _d;
+        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);
+          if (duration2 && currentTime !== void 0) {
+            const value = `${currentTime / duration2 * 100}%`;
+            setTimeSeeker(value);
+          } else {
+            setTimeSeeker("0");
           }
-        ),
-        /* @__PURE__ */ jsx35(
-          "div",
-          {
-            className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
-            "data-vjs-player": true,
-            children: /* @__PURE__ */ jsx35(
-              "div",
-              {
-                onClick: handlePlayerClick,
-                ref: videoRef,
-                className: "sb-h-full sb-w-full sb-relative"
+        }
+      };
+      updateTimeSeeker();
+    }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
+    return /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        ref: videoRefs,
+        id: `video-container-${id}`,
+        onMouseMove: () => {
+          handlePlayerClick(event, true);
+        },
+        className: "sb-relative sb-rounded-md  sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ",
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ jsx35(
+            "div",
+            {
+              ref: childRef,
+              onClick: handlePlayerClick,
+              className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"}`,
+              style: {
+                width: timeSeeker
               }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
+            }
+          ),
+          /* @__PURE__ */ jsx35(
+            "div",
+            {
+              className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
+              "data-vjs-player": true,
+              children: /* @__PURE__ */ jsx35(
+                "div",
+                {
+                  onClick: handlePlayerClick,
+                  ref: videoRef,
+                  className: "sb-h-full sb-w-full sb-relative"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 var VideoPlayerComponent_default = VideoPlayerComponent;
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
@@ -1764,69 +1769,73 @@ var DEFAULT_OPTIONS = {
   sources: [],
   tracks: []
 };
-var Component = ({
-  options,
-  notes,
-  chapters,
-  startTime = 0,
-  handleSaveNoteAction,
-  onPlay,
-  onPause,
-  isFocused = true,
-  disableNote
-}) => {
-  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 [tracks, setTracks] = useState14([]);
-  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);
+var Component = forwardRef2(
+  ({
+    options,
+    notes,
+    chapters,
+    startTime = 0,
+    handleSaveNoteAction,
+    onPlay,
+    onPause,
+    isFocused = true,
+    disableNote,
+    childRef
+  }) => {
+    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 [tracks, setTracks] = useState14([]);
+    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
+            }));
           }
-          newTracks.push(__spreadProps(__spreadValues({}, s), {
-            src
-          }));
-        }
-      setTracks(newTracks);
-    };
-    getTracks();
-  }, [options == null ? void 0 : options.tracks]);
-  const id = (Date.now() + Math.random() * 100).toString();
-  return /* @__PURE__ */ jsx36(
-    VideoPlayerComponent_default,
-    {
-      id,
-      chapters,
-      options: __spreadProps(__spreadValues({}, options), { tracks }),
-      notes,
-      poster: "",
-      startTime,
-      handleSaveNoteAction,
-      disableNote,
-      onPause,
-      onPlay
-    }
-  );
-};
+        setTracks(newTracks);
+      };
+      getTracks();
+    }, [options == null ? void 0 : options.tracks]);
+    const id = (Date.now() + Math.random() * 100).toString();
+    return /* @__PURE__ */ jsx36(
+      VideoPlayerComponent_default,
+      {
+        id,
+        chapters,
+        options: __spreadProps(__spreadValues({}, options), { tracks }),
+        notes,
+        poster: "",
+        startTime,
+        handleSaveNoteAction,
+        disableNote,
+        onPause,
+        onPlay,
+        childRef
+      }
+    );
+  }
+);
 var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
   return prevProps.options === nextProps.options && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
 });