softbuilders-react-video-player 1.1.73 → 1.1.75

package/dist/index.mjs

@@ -642,8 +642,8 @@ var MenuButton = ({
     setIsOpen(false);
   }, []);
   useEffect3(() => {
-    const handleClickOutside = (event2) => {
-      if (buttonRef.current && !buttonRef.current.contains(event2.target) && menuRef.current && !menuRef.current.contains(event2.target)) {
+    const handleClickOutside = (event) => {
+      if (buttonRef.current && !buttonRef.current.contains(event.target) && menuRef.current && !menuRef.current.contains(event.target)) {
         setIsOpen(false);
       }
     };
@@ -668,10 +668,10 @@ var MenuButton = ({
           {
             ref: buttonRef,
             onClick: (e) => {
-              isOpen && e.stopPropagation();
+              e.stopPropagation();
               toggleMenu();
               onClick && onClick(e, !isOpen);
-              noteButtonClick && noteButtonClick(!isOpen);
+              noteButtonClick && noteButtonClick(true);
             },
             "aria-haspopup": "true",
             "aria-expanded": isOpen,
@@ -815,7 +815,7 @@ var QualityMenu = ({ width, onClick }) => {
 var QualityMenu_default = QualityMenu;
 
 // src/components/CreateNoteMenu/index.tsx
-import { useState as useState5 } from "react";
+import React5, { useState as useState5 } from "react";
 import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
 var CreateNoteMenu = ({
   handleSaveNoteAction,
@@ -885,13 +885,13 @@ var CreateNoteMenu = ({
     }
   );
 };
-var CreateNoteMenu_default = CreateNoteMenu;
+var CreateNoteMenu_default = React5.memo(CreateNoteMenu);
 
 // src/components/NotesPanal/index.tsx
 import { useEffect as useEffect6, useState as useState7 } from "react";
 
 // src/components/NoteTooltip/index.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useState as useState6 } from "react";
 
 // src/components/Tooltip/index.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -911,18 +911,14 @@ var Tooltip_default = Tooltip;
 import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
 var NoteTooltip = ({ note }) => {
   const [open, setOpen] = useState6(false);
-  const { currentTime } = useSoftBuildersVideoPlayerContext();
-  useEffect5(() => {
-    if (currentTime === Math.floor(note.time)) {
-      setOpen(true);
-      setTimeout(() => {
-        setOpen(false);
-      }, 5e3);
-    }
-  }, [currentTime, note.time]);
+  const { currentTime, player } = useSoftBuildersVideoPlayerContext();
+  const handleValueChange = () => {
+    player == null ? void 0 : player.currentTime(note.time);
+  };
   return /* @__PURE__ */ jsx24(
     "div",
     {
+      onClick: handleValueChange,
       className: "sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30",
       style: { left: `${note.percentage}%` },
       onMouseEnter: () => setOpen(true),
@@ -1479,6 +1475,7 @@ var ControlBar = ({
                 time: Number((player == null ? void 0 : player.currentTime()) || 0),
                 isOpen: e
               });
+              player.pause();
             }
           }
         ) }),
@@ -1562,19 +1559,22 @@ 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]) {
         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,
@@ -1626,9 +1626,9 @@ 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);
     const onReady = (player) => {
+      console.log("onReady: ", onReady);
       if (playerRef) {
         playerRef.current = player;
         setIsReady(true);
@@ -1661,22 +1661,6 @@ var VideoPlayerComponent = forwardRef(
           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) {
@@ -1712,7 +1696,7 @@ var VideoPlayerComponent = forwardRef(
             setNoteOpen,
             noteButtonClick
           );
-        }, 500);
+        }, 0);
         return () => clearTimeout(controlBarTimeout);
       }
     }, [
@@ -1749,6 +1733,14 @@ var VideoPlayerComponent = forwardRef(
         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]);
     useEffect14(() => {
       return () => {
         if (playerRef.current) {
@@ -1786,22 +1778,12 @@ var VideoPlayerComponent = forwardRef(
       }
     }, [isQualityMenuOpen, isSubtitleMenuOpen]);
     useEffect14(() => {
-      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);
+      if (playerRef.current) {
       }
-    }, [isNoteOpen]);
+    }, [notes]);
     const handlePlayerClick = async (e, isTimerOnly = false) => {
       e.preventDefault();
+      console.log("handlePlayerClick: ", isTimerOnly);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
@@ -1869,9 +1851,8 @@ var VideoPlayerComponent = forwardRef(
     const [timeSeeker, setTimeSeeker] = useState14("0");
     useEffect14(() => {
       const updateTimeSeeker = () => {
-        var _a;
-        if (playerRef == null ? void 0 : playerRef.current) {
-          const currentTime = (_a = playerRef.current) == null ? void 0 : _a.currentTime();
+        if (playerRef.current) {
+          const currentTime = playerRef.current.currentTime();
           const duration2 = playerRef.current.duration();
           if (duration2 && currentTime !== void 0) {
             setTimeSeeker(`${currentTime / duration2 * 100}%`);
@@ -1888,12 +1869,10 @@ var VideoPlayerComponent = forwardRef(
       {
         ref: videoRefs,
         id: `video-container-${id}`,
-        onMouseMove: () => {
-          !isNoteOpen ? handlePlayerClick(event, true) : "";
+        onMouseMove: (e) => {
+          handlePlayerClick(e, 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",
@@ -2002,7 +1981,8 @@ var Component = forwardRef2(
   }
 );
 var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
-  return prevProps.options === nextProps.options && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
+  return prevProps.options === nextProps.options && // prevProps.notes === nextProps.notes &&
+  prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
 });
 var SoftBuildersVideoPlayer_default = SoftBuildersVideoPlayer;