softbuilders-react-video-player 1.2.4 → 1.2.6

package/dist/index.mjs

@@ -31,14 +31,7 @@ var __objRest = (source, exclude) => {
 };
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
-import {
-  forwardRef as forwardRef2,
-  memo,
-  useCallback as useCallback4,
-  useEffect as useEffect15,
-  useMemo,
-  useState as useState15
-} from "react";
+import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState15 } from "react";
 
 // src/components/VideoPlayerComponent/index.tsx
 import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState14 } from "react";
@@ -646,8 +639,8 @@ var MenuButton = ({
     setIsOpen(false);
   }, []);
   useEffect3(() => {
-    const handleClickOutside = (event) => {
-      if (buttonRef.current && !buttonRef.current.contains(event.target) && menuRef.current && !menuRef.current.contains(event.target)) {
+    const handleClickOutside = (event2) => {
+      if (buttonRef.current && !buttonRef.current.contains(event2.target) && menuRef.current && !menuRef.current.contains(event2.target)) {
         setIsOpen(false);
       }
     };
@@ -720,7 +713,7 @@ var QualityOption = ({
             className: `${width > 400 ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}`
           }
         ) : /* @__PURE__ */ jsx21("div", {}) }),
-        /* @__PURE__ */ jsx21("p", { className: "sb-text-left sb-col-span-9", children: quality.label })
+        /* @__PURE__ */ jsx21("p", { className: "sb-text-left sb-col-span-9", children: quality == null ? void 0 : quality.label })
       ] })
     }
   );
@@ -745,7 +738,7 @@ var QualityMenu = ({ width, onClick }) => {
       );
       if (qs) {
         const el = qs == null ? void 0 : qs.find((ele) => ele.default);
-        el ? setCurrentQualitySrc(el.label) : setCurrentQualitySrc(qs[0].label);
+        el ? setCurrentQualitySrc(el == null ? void 0 : el.label) : setCurrentQualitySrc(qs[0].label);
       }
     }
   }, [player]);
@@ -789,22 +782,22 @@ var QualityMenu = ({ width, onClick }) => {
                 QualityOption,
                 {
                   width,
-                  isSelected: currentQualitySrc === q.label,
+                  isSelected: currentQualitySrc === (q == null ? void 0 : q.label),
                   quality: q,
                   onClick: () => {
                     const source = qualities.find(
-                      (_q) => q.label == _q.label
+                      (_q) => (q == null ? void 0 : q.label) == (_q == null ? void 0 : _q.label)
                     );
                     if (source && source.src != currentQualitySrc) {
                       player == null ? void 0 : player.src(source.src);
                       const currentTime = player == null ? void 0 : player.currentTime();
-                      setCurrentQualitySrc(source.label);
+                      setCurrentQualitySrc(source == null ? void 0 : source.label);
                       player == null ? void 0 : player.currentTime(currentTime);
                       player == null ? void 0 : player.play();
                     }
                   }
                 },
-                `quality-${q.label}-${i}`
+                `quality-${q == null ? void 0 : q.label}-${i}`
               );
             }) })
           ] })
@@ -924,11 +917,11 @@ var NoteTooltip = ({ note }) => {
     {
       onClick: handleValueChange,
       className: "sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30",
-      style: { left: `${note.percentage}%` },
+      style: { left: `${note == null ? void 0 : note.percentage}%` },
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
       children: /* @__PURE__ */ jsx24("div", { className: "sb-relative", children: /* @__PURE__ */ jsx24(Tooltip_default, { open, children: /* @__PURE__ */ jsxs8("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [
-        /* @__PURE__ */ jsx24("p", { children: note.label }),
+        /* @__PURE__ */ jsx24("p", { children: note == null ? void 0 : note.label }),
         /* @__PURE__ */ jsx24("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: durationFormater(note.time) })
       ] }) }) })
     }
@@ -1219,7 +1212,7 @@ var SubtitleMenu = ({
   const [subtitles, setSubtitles] = useState11([]);
   const handleSelectSubtitle = (textTrack) => {
     const newSubtitles = subtitles.map((s) => {
-      if (s.label === textTrack.label) {
+      if ((s == null ? void 0 : s.label) === (textTrack == null ? void 0 : textTrack.label)) {
         s.mode = "showing";
       } else {
         s.mode = "disabled";
@@ -1532,6 +1525,9 @@ var ControlBar = ({
 };
 var ControlBar_default = ControlBar;
 
+// src/components/VideoPlayerComponent/index.tsx
+import { isEqual } from "lodash";
+
 // src/components/BigPlayButton/index.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
 var BigPlayButton = ({ player, isPaused, setIsPaused }) => {
@@ -1552,7 +1548,6 @@ var BigPlayButton = ({ player, isPaused, setIsPaused }) => {
 var BigPlayButton_default = BigPlayButton;
 
 // src/components/VideoPlayerComponent/index.tsx
-import { isEqual } from "lodash";
 import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
 var bigPlayButtonRoot = {};
 var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") => {
@@ -1582,22 +1577,20 @@ var controlBarRoot = {};
 var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => {
 }, bgColor = "transparent", setIsQualityMenuOpen, setIsSubtitleMenuOpen, disableNote, setNoteOpen, noteButtonClick) => {
   const container = document.getElementById(`video-container-${id}`);
-  console.log("container: ", container);
   if (container) {
-    console.log("container1: ");
     container.style.height = "100%";
     container.style.aspectRatio = "16 / 9";
     const element = container.querySelector(".vjs-control-bar");
     if (element) {
-      console.log("container2: ");
       if (!controlBarRoot[id]) {
+        console.log("pooklo");
         controlBarRoot[id] = ReactDOM.createRoot(element);
-        element.style.display = "flex";
-        element.style.height = "100%";
-        element.style.alignItems = "flex-end";
       }
+      element.style.display = "flex";
       element.style.opacity = opacity;
       element.style.backgroundColor = `${bgColor} !important`;
+      element.style.height = "100%";
+      element.style.alignItems = "flex-end";
       controlBarRoot[id].render(
         /* @__PURE__ */ jsx36(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx36(
           ControlBar_default,
@@ -1637,10 +1630,12 @@ var VideoPlayerComponent = forwardRef(
     disableNote,
     childRef,
     bottomRedBar = true,
-    noteButtonClick
+    noteButtonClick,
+    videoID
   }, ref) => {
     const videoRef = useRef2(void 0);
     const playerRef = useRef2(void 0);
+    const idRef = useRef2(void 0);
     const [isReady, setIsReady] = useState14(false);
     const [isPaused, setIsPaused] = useState14(!options.autoplay);
     const [duration, setDuration] = useState14(1);
@@ -1649,14 +1644,14 @@ var VideoPlayerComponent = forwardRef(
     const [bgColor, setBgColor] = useState14("transparent");
     const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
     const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
+    const [isHovered, setIsHovered] = useState14(false);
     const [isNoteOpen, setNoteOpen] = useState14(false);
-    console.log("notes", notes);
     const onReady = (player) => {
-      console.log("onReady: ", onReady);
       if (playerRef) {
         playerRef.current = player;
         setIsReady(true);
         player == null ? void 0 : player.currentTime(startTime);
+        console.log("startTime: ", startTime);
         player.on("waiting", () => {
         });
         player.on("dispose", () => {
@@ -1669,41 +1664,30 @@ var VideoPlayerComponent = forwardRef(
         });
       }
     };
-    const initializePlayer = () => {
-      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%";
-      playerRef.current = videojs(videoElement, options, () => {
-        var _a;
-        (_a = playerRef.current) == null ? void 0 : _a.currentTime(startTime);
-      });
-      onReady(playerRef.current);
-    };
     useEffect14(() => {
-      if (playerRef.current) {
-        if (!isEqual(playerRef.current.poster_, poster)) {
-          playerRef.current.dispose();
-          console.log("dispose: ");
-          playerRef.current = void 0;
+      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);
+        });
       }
-      initializePlayer();
-      console.log("initializePlayer: ghhh");
-    }, [options]);
-    useEffect14(() => {
       return () => {
+        var _a, _b;
         if (playerRef.current) {
-          console.log(playerRef.current, options, "jk");
-          if (!isEqual(playerRef.current.poster_, poster)) {
+          if (!isEqual((_b = (_a = idRef == null ? void 0 : idRef.current) == null ? void 0 : _a.sources) != null ? _b : "", options.sources)) {
+            idRef.current = options;
             playerRef.current.dispose();
-            console.log("dispose7: ");
             playerRef.current = void 0;
+            console.log("dispose8: ");
             setTimeout(() => {
               if (bigPlayButtonRoot[id]) {
                 bigPlayButtonRoot[id].unmount();
@@ -1718,55 +1702,56 @@ var VideoPlayerComponent = forwardRef(
         }
       };
     }, [options]);
+    useEffect14(() => {
+      if (playerRef.current) {
+        console.log("time");
+        playerRef.current.currentTime(startTime);
+      }
+    }, [startTime]);
     useEffect14(() => {
       if (playerRef.current && isReady) {
         const currentTime = playerRef.current.currentTime() || 0;
+        console.log("currentTime: ", currentTime);
         if (isPaused) {
           if (onPause) onPause(currentTime);
         } else {
           if (onPlay) onPlay(currentTime);
         }
       }
-    }, [isPaused, isReady]);
+    }, [isPaused]);
     useEffect14(() => {
-      if (isReady) {
-        const controlBarTimeout = setTimeout(() => {
-          console.log("isReady: ", isReady);
-          renderControlBar(
-            id,
-            playerRef.current,
-            isPaused,
-            setIsPaused,
-            duration,
-            notes,
-            chapters,
-            5,
-            handleSaveNoteAction,
-            opacity,
-            (e) => {
-              handlePlayerClick(e, true);
-            },
-            bgColor,
-            setIsQualityMenuOpen,
-            setIsSubtitleMenuOpen,
-            disableNote,
-            setNoteOpen,
-            noteButtonClick
-          );
-        }, 0);
-        return () => clearTimeout(controlBarTimeout);
-      }
+      const controlBarTimeout = setTimeout(() => {
+        renderControlBar(
+          id,
+          playerRef.current,
+          isPaused,
+          setIsPaused,
+          duration,
+          notes,
+          chapters,
+          5,
+          handleSaveNoteAction,
+          opacity,
+          (e) => {
+            handlePlayerClick(e, true);
+          },
+          bgColor,
+          setIsQualityMenuOpen,
+          setIsSubtitleMenuOpen,
+          disableNote,
+          setNoteOpen,
+          noteButtonClick
+        );
+      }, 0);
+      return () => clearTimeout(controlBarTimeout);
     }, [
-      id,
-      playerRef,
       isPaused,
       setIsPaused,
       notes,
-      chapters,
-      isReady,
       handleSaveNoteAction,
       duration,
-      opacity
+      opacity,
+      isReady
     ]);
     useEffect14(() => {
       if (isReady) {
@@ -1781,36 +1766,15 @@ var VideoPlayerComponent = forwardRef(
         }, 500);
         return () => clearTimeout(playButtonTimeout);
       }
-    }, [id, isPaused, isReady, opacity, options, notes]);
+    }, [isPaused, opacity, isReady, options]);
     useEffect14(() => {
       if (playerRef.current) {
-        playerRef.current.dispose();
-        console.log("dispose7: ");
-        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);
         const intervalId = setInterval(() => {
           if (playerRef.current) setIsPaused(playerRef.current.paused());
         }, 500);
         return () => clearInterval(intervalId);
       }
     }, []);
-    useEffect14(() => {
-      var _a, _b;
-      if (playerRef.current) {
-        (_a = playerRef.current) == null ? void 0 : _a.currentTime(startTime);
-        console.log("startTimenotes: ", startTime);
-        (_b = playerRef.current) == null ? void 0 : _b.play();
-      }
-    }, [startTime]);
     const timeoutRef = useRef2(null);
     useEffect14(() => {
       if (isQualityMenuOpen || isSubtitleMenuOpen) {
@@ -1829,8 +1793,20 @@ var VideoPlayerComponent = forwardRef(
       }
     }, [isQualityMenuOpen, isSubtitleMenuOpen]);
     useEffect14(() => {
-      console.log("notes: ", notes);
-    }, [notes]);
+      console.log("isNoteOpen: ", isNoteOpen);
+      if (isNoteOpen) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      } else {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+          setIsControlBarPresent(false);
+        }, 3e3);
+      }
+    }, [isNoteOpen]);
     const handlePlayerClick = async (e, isTimerOnly = false) => {
       e.preventDefault();
       if (timeoutRef.current) {
@@ -1852,7 +1828,6 @@ var VideoPlayerComponent = forwardRef(
       if (playerRef.current) {
         if (playerRef.current.paused()) {
           try {
-            console.log("startTime: ", startTime);
             await playerRef.current.play();
             setIsPaused(false);
           } catch (error) {
@@ -1900,9 +1875,10 @@ var VideoPlayerComponent = forwardRef(
     const [timeSeeker, setTimeSeeker] = useState14("0");
     useEffect14(() => {
       const updateTimeSeeker = () => {
-        if (playerRef.current) {
+        if (playerRef.current && isReady) {
           const currentTime = playerRef.current.currentTime();
           const duration2 = playerRef.current.duration();
+          console.log("duration: ", duration2, currentTime);
           if (duration2 && currentTime !== void 0) {
             setTimeSeeker(`${currentTime / duration2 * 100}%`);
           } else {
@@ -1918,10 +1894,12 @@ var VideoPlayerComponent = forwardRef(
       {
         ref: videoRefs,
         id: `video-container-${id}`,
-        onMouseMove: (e) => {
-          handlePlayerClick(e, true);
+        onMouseMove: () => {
+          !isNoteOpen ? 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: [
           bottomRedBar && /* @__PURE__ */ jsx36(
             "div",
@@ -1982,40 +1960,52 @@ var Component = forwardRef2(
     disableNote,
     childRef,
     bottomRedBar,
-    noteButtonClick
-  }, ref) => {
-    const mergedOptions = useMemo(
-      () => __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options), {
-        responsive: true,
-        inactivityTimeout: 0,
-        fullscreen: { navigationUI: "hide" }
-      }),
-      [options]
-    );
-    const [tracks, setTracks] = useState15([]);
-    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);
-          }
-          newTracks.push(__spreadProps(__spreadValues({}, s), { src }));
-        }
+    noteButtonClick,
+    videoId
+  }) => {
+    options = __spreadProps(__spreadValues({}, options), {
+      responsive: true,
+      inactivityTimeout: 0,
+      fullscreen: {
+        navigationUI: "hide"
       }
-      setTracks(newTracks);
-    }, [mergedOptions.tracks]);
+    });
+    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] = 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
+            }));
+          }
+        setTracks(newTracks);
+      };
       getTracks();
-    }, [getTracks]);
-    const id = useMemo(() => (Date.now() + Math.random() * 100).toString(), []);
+    }, [options == null ? void 0 : options.tracks]);
+    const id = (Date.now() + Math.random() * 100).toString();
+    console.log("id: ", id);
     return /* @__PURE__ */ jsx37(
       VideoPlayerComponent_default,
       {
-        id,
+        id: "videoID",
         chapters,
-        options: __spreadProps(__spreadValues({}, mergedOptions), { tracks }),
+        options: __spreadProps(__spreadValues({}, options), { tracks }),
         notes,
         poster: "",
         startTime,
@@ -2031,8 +2021,6 @@ var Component = forwardRef2(
   }
 );
 var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
-  console.log(isEqual2(prevProps.options, nextProps.options));
-  console.log(nextProps.notes, prevProps.notes);
   return isEqual2(prevProps.options, nextProps.options) && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
 });
 var SoftBuildersVideoPlayer_default = SoftBuildersVideoPlayer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "softbuilders-react-video-player",
   "description": "Standalone video player component",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [