softbuilders-react-video-player 1.1.69 → 1.1.71

package/dist/index.mjs

@@ -31,16 +31,16 @@ var __objRest = (source, exclude) => {
 };
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
-import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState14 } 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 useState13 } from "react";
+import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState14 } from "react";
 import ReactDOM from "react-dom/client";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
 
 // src/components/ControlBar/index.tsx
-import { useEffect as useEffect13, useState as useState12 } from "react";
+import { useEffect as useEffect13, useState as useState13 } from "react";
 
 // src/utils/index.ts
 var durationFormater = (seconds) => {
@@ -520,13 +520,21 @@ var VolumeSlider = ({
   const [isVisible, setVisible] = useState2(false);
   const [volume, setVolume] = useState2(0);
   useEffect2(() => {
-    setVolume((player == null ? void 0 : player.muted()) ? 0 : Number(player == null ? void 0 : player.volume()) * 100 || 0);
+    const updateVolumeState = () => {
+      const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number(player == null ? void 0 : player.volume()) * 100;
+      setVolume(currentVolume);
+    };
+    updateVolumeState();
+    player == null ? void 0 : player.on("volumechange", updateVolumeState);
+    return () => {
+      player == null ? void 0 : player.off("volumechange", updateVolumeState);
+    };
   }, [player]);
   const timeoutRef = React2.useRef(null);
   useEffect2(() => {
     setVisible(false);
   }, [volumeSliderToggler]);
-  const toggleVisiblity = (e) => {
+  const toggleVisibility = (e) => {
     e.preventDefault();
     e.stopPropagation();
     handleControlDisplayTimer(e);
@@ -534,6 +542,11 @@ var VolumeSlider = ({
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
+    if (volume == 0 && !isVisible) {
+      setVolume(60);
+      player == null ? void 0 : player.volume(0.6);
+      player == null ? void 0 : player.muted(false);
+    }
     setVisible((prev) => !prev);
     timeoutRef.current = setTimeout(() => {
       setVisible(false);
@@ -554,17 +567,17 @@ var VolumeSlider = ({
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: `sb-flex ${isVisible ? "" : ""}  ${width > 400 ? "sb-flex-col-reverse  " : "sb-flex-col !sb-justify-start"} ${false ? "!sb-flex-row !sb-items-start " : ""} sb-items-center sb-gap-1 sb-h-full`,
+      className: `sb-flex ${isVisible ? "" : ""}  ${width > 400 ? "sb-flex-col-reverse" : "sb-flex-col !sb-justify-start"} sb-items-center sb-gap-1 sb-h-full`,
       children: [
         /* @__PURE__ */ jsx19(
           "div",
           {
-            className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"}  `,
-            onClick: toggleVisiblity,
-            children: volume === 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
+            className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"}`,
+            onClick: toggleVisibility,
+            children: volume == 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
               MuteIcon_default,
               {
-                className: `sb-w-3 sb-h-3 ${width < 400 ? " " : ""}  sb-h-5 sb-w-5`
+                className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5`
               }
             ) : /* @__PURE__ */ jsx19(
               UnmuteIcon_default,
@@ -574,10 +587,10 @@ var VolumeSlider = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx19("div", { className: "sb-flex  sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
           "div",
           {
-            className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : " sb-w-[22px] sb-opacity-0 sb-invisible"}  ${width > 400 ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative ${false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""}`,
+            className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400 ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative`,
             children: /* @__PURE__ */ jsx19(
               Slider_default,
               {
@@ -610,7 +623,9 @@ var MenuButton = ({
   onClick,
   setNoteOpen,
   noteButtonClick,
-  disablePopUp = false
+  disablePopUp = false,
+  onMouseEnter,
+  onMouseLeave
 }) => {
   const [isOpen, setIsOpen] = useState3(false);
   const buttonRef = useRef(null);
@@ -634,35 +649,43 @@ var MenuButton = ({
   useEffect3(() => {
     setNoteOpen && setNoteOpen(isOpen);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs5("div", { className: "sb-relative  sb-flex sb-items-end", children: [
-    /* @__PURE__ */ jsx20(
-      "button",
-      {
-        ref: buttonRef,
-        onClick: (e) => {
-          isOpen && e.stopPropagation();
-          toggleMenu();
-          onClick && onClick(e, !isOpen);
-          noteButtonClick && noteButtonClick(!isOpen);
-        },
-        "aria-haspopup": "true",
-        "aria-expanded": isOpen,
-        "aria-label": "Open menu",
-        children: buttonContent
-      }
-    ),
-    !disablePopUp && isOpen && /* @__PURE__ */ jsx20(
-      "div",
-      {
-        ref: menuRef,
-        role: "menu",
-        "aria-orientation": "vertical",
-        "aria-labelledby": "Open menu",
-        className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
-        children: menuContent
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      onMouseEnter,
+      onMouseLeave,
+      className: "sb-relative  sb-flex sb-items-end",
+      children: [
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            ref: buttonRef,
+            onClick: (e) => {
+              isOpen && e.stopPropagation();
+              toggleMenu();
+              onClick && onClick(e, !isOpen);
+              noteButtonClick && noteButtonClick(!isOpen);
+            },
+            "aria-haspopup": "true",
+            "aria-expanded": isOpen,
+            "aria-label": "Open menu",
+            children: buttonContent
+          }
+        ),
+        !disablePopUp && isOpen && /* @__PURE__ */ jsx20(
+          "div",
+          {
+            ref: menuRef,
+            role: "menu",
+            "aria-orientation": "vertical",
+            "aria-labelledby": "Open menu",
+            className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
+            children: menuContent
+          }
+        )
+      ]
+    }
+  );
 };
 var MenuButton_default = MenuButton;
 
@@ -750,7 +773,7 @@ var QualityMenu = ({ width, onClick }) => {
               }
             ),
             /* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-            /* @__PURE__ */ jsx21("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
+            /* @__PURE__ */ jsx21("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities == null ? void 0 : qualities.map((q, i) => {
               return /* @__PURE__ */ jsx21(Fragment, { children: /* @__PURE__ */ jsx21(
                 QualityOption,
                 {
@@ -791,7 +814,9 @@ var CreateNoteMenu = ({
   handleSaveNoteAction,
   width,
   setNoteOpen,
-  noteButtonClick
+  noteButtonClick,
+  onMouseEnter,
+  onMouseLeave
 }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [note, setNote] = useState5("");
@@ -810,6 +835,8 @@ var CreateNoteMenu = ({
   return /* @__PURE__ */ jsx22(
     MenuButton_default,
     {
+      onMouseEnter,
+      onMouseLeave,
       disablePopUp: true,
       noteButtonClick,
       setNoteOpen,
@@ -1156,7 +1183,12 @@ var SubtitleOption = ({
     }
   );
 };
-var SubtitleMenu = ({ width, onClick }) => {
+var SubtitleMenu = ({
+  width,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
+}) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
   const [subtitles, setSubtitles] = useState11([]);
@@ -1181,6 +1213,8 @@ var SubtitleMenu = ({ width, onClick }) => {
   return /* @__PURE__ */ jsx32(
     MenuButton_default,
     {
+      onMouseEnter,
+      onMouseLeave,
       onClick: (e, isOpen) => {
         onClick && onClick(e, isOpen);
       },
@@ -1231,8 +1265,59 @@ var SubtitleMenu = ({ width, onClick }) => {
 };
 var SubtitleMenu_default = SubtitleMenu;
 
-// src/components/ControlBar/index.tsx
+// src/components/Tooltip/GlobalTooltip.tsx
+import { useState as useState12 } from "react";
 import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+var TooltipModal = ({
+  content,
+  children,
+  isLeft = false,
+  width = 0
+}) => {
+  const [isOpen, setIsOpen] = useState12(false);
+  const showTooltip = () => setIsOpen(true);
+  const hideTooltip = () => setIsOpen(false);
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: "tooltip-container",
+      style: { position: "relative", display: "inline-block" },
+      children: [
+        /* @__PURE__ */ jsx33(
+          "div",
+          {
+            onMouseEnter: showTooltip,
+            onMouseLeave: hideTooltip,
+            style: { cursor: "pointer" },
+            children
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx33(
+          "div",
+          {
+            className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 ? "sb-bottom-[105]" : "sb-top-[105%]"}`,
+            style: {
+              position: "absolute",
+              left: !isLeft ? "-100%" : "100%",
+              transform: !isLeft ? "translateX(-50%)" : "translateX(0%)",
+              backgroundColor: "white",
+              padding: "8px",
+              borderRadius: "4px",
+              whiteSpace: "nowrap",
+              boxShadow: "0px 0px 5px grey",
+              zIndex: 1e3
+            },
+            children: content
+          }
+        )
+      ]
+    }
+  );
+};
+var GlobalTooltip_default = TooltipModal;
+
+// src/components/ControlBar/index.tsx
+import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
 var ControlBar = ({
   player,
   isPaused,
@@ -1250,26 +1335,15 @@ var ControlBar = ({
   disableNote,
   noteButtonClick
 }) => {
-  console.log("432", notes);
   const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
-  const [width, setWidth] = useState12(0);
-  const [isSeeking, setIsSeeking] = useState12(true);
+  const [width, setWidth] = useState13(0);
+  const [isSeeking, setIsSeeking] = useState13(true);
   const seek = (duration2) => {
     const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
     player == null ? void 0 : player.currentTime(currentTime + duration2);
   };
-  const [volumeSliderToggler, setVolumeToggler] = useState12(false);
+  const [volumeSliderToggler, setVolumeToggler] = useState13(false);
   const container = document.getElementById(`video-container-${id}`);
-  const [isToolTip, setIsToolTip] = useState12({
-    sub: false,
-    seekForward: false,
-    seekBackward: false,
-    play: false,
-    pause: false,
-    volume: false,
-    quality: false,
-    fullScreen: false
-  });
   function handleWidthChange(width2) {
     setWidth(width2);
   }
@@ -1293,40 +1367,63 @@ var ControlBar = ({
   useEffect13(() => {
     setDuration(duration);
   }, [duration]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: ` !sb-px-4 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full  ${width > 400 ? "sb-absolute sb-bottom-1 sb-items-end sb-mb-1 sb-pb-2 " : "sb-items-start"} sb-pb-2`,
       children: [
-        /* @__PURE__ */ jsx33(BufferTracker_default, {}),
-        /* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(BufferTracker_default, {}),
+        /* @__PURE__ */ jsx34(CurrentTimeTracker_default, {}),
+        /* @__PURE__ */ jsx34(
           "button",
           {
             onClick: () => {
               seek(-seekStep);
             },
-            children: /* @__PURE__ */ jsx33(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
+            children: /* @__PURE__ */ jsx34(
+              GlobalTooltip_default,
+              {
+                width,
+                content: /* @__PURE__ */ jsx34("p", { children: "Backward 5 sec" }),
+                isLeft: true,
+                children: /* @__PURE__ */ jsx34(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsx33("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx33(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx33(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
+          GlobalTooltip_default,
+          {
+            content: /* @__PURE__ */ jsx34("p", { children: isPaused ? "Play" : "pause" }),
+            isLeft: true,
+            children: /* @__PURE__ */ jsx34("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx34(
           "button",
           {
             onClick: (e) => {
               e.preventDefault();
               seek(seekStep);
             },
-            children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
+            children: /* @__PURE__ */ jsx34(
+              GlobalTooltip_default,
+              {
+                width,
+                content: /* @__PURE__ */ jsx34("p", { children: "Forward 5 sec" }),
+                isLeft: true,
+                children: /* @__PURE__ */ jsx34(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
+              }
+            )
           }
         ),
         // isSeeking ||
         // width > 400 &&
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "div",
           {
             className: `${width < 400 ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
-            children: /* @__PURE__ */ jsxs13(
+            children: /* @__PURE__ */ jsxs14(
               "div",
               {
                 style: width < 400 ? {
@@ -1336,15 +1433,15 @@ var ControlBar = ({
                 } : { width: "98%" },
                 className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
                 children: [
-                  /* @__PURE__ */ jsx33(CurrentTimeLabel_default, {}),
-                  /* @__PURE__ */ jsx33(TimeSliderContainer_default, { chapters, notes }),
-                  /* @__PURE__ */ jsx33("p", { children: durationFormater(duration) })
+                  /* @__PURE__ */ jsx34(CurrentTimeLabel_default, {}),
+                  /* @__PURE__ */ jsx34(TimeSliderContainer_default, { chapters, notes }),
+                  /* @__PURE__ */ jsx34("p", { children: durationFormater(duration) })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx34(
           VolumeSlider_default,
           {
             volumeSliderToggler,
@@ -1353,7 +1450,7 @@ var ControlBar = ({
             handleControlDisplayTimer
           }
         ) }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Quality" }), children: /* @__PURE__ */ jsx34(
           QualityMenu_default,
           {
             width,
@@ -1362,8 +1459,8 @@ var ControlBar = ({
               setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
             }
           }
-        ),
-        disableNote && /* @__PURE__ */ jsx33(
+        ) }),
+        disableNote && /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Create note" }), children: /* @__PURE__ */ jsx34(
           CreateNoteMenu_default,
           {
             handleSaveNoteAction,
@@ -1376,8 +1473,8 @@ var ControlBar = ({
               });
             }
           }
-        ),
-        /* @__PURE__ */ jsx33(Tooltip_default, { open: isToolTip.sub == true, children: /* @__PURE__ */ jsx33(
+        ) }),
+        /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx34(
           SubtitleMenu_default,
           {
             width,
@@ -1387,7 +1484,7 @@ var ControlBar = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx34(
           "button",
           {
             onClick: (e) => {
@@ -1399,9 +1496,9 @@ var ControlBar = ({
                 player == null ? void 0 : player.requestFullscreen();
               }
             },
-            children: /* @__PURE__ */ jsx33(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
+            children: /* @__PURE__ */ jsx34(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
           }
-        )
+        ) })
       ]
     }
   );
@@ -1409,26 +1506,26 @@ var ControlBar = ({
 var ControlBar_default = ControlBar;
 
 // src/components/BigPlayButton/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var BigPlayButton = ({ player, isPaused, setIsPaused }) => {
   const togglePlay = () => {
     if (isPaused) player == null ? void 0 : player.play();
     else player == null ? void 0 : player.pause();
     setIsPaused(!isPaused);
   };
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       onClick: togglePlay,
       className: "sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center ",
-      children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
+      children: isPaused ? /* @__PURE__ */ jsx35(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx35(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
     }
   );
 };
 var BigPlayButton_default = BigPlayButton;
 
 // src/components/VideoPlayerComponent/index.tsx
-import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
 var bigPlayButtonRoot = {};
 var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") => {
   const container = document.getElementById(`video-container-${id}`);
@@ -1441,7 +1538,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") =
         bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
       }
       bigPlayButtonRoot[id].render(
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           BigPlayButton_default,
           {
             player,
@@ -1471,7 +1568,7 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
       element.style.height = "100%";
       element.style.alignItems = "flex-end";
       controlBarRoot[id].render(
-        /* @__PURE__ */ jsx35(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx36(
           ControlBar_default,
           {
             id,
@@ -1510,20 +1607,20 @@ var VideoPlayerComponent = forwardRef(
     childRef,
     bottomRedBar = true,
     noteButtonClick
-  }) => {
+  }, ref) => {
     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 [isNoteOpen, setNoteOpen] = useState13(false);
+    const [isReady, setIsReady] = useState14(false);
+    const [isPaused, setIsPaused] = useState14(!options.autoplay);
+    const [duration, setDuration] = useState14(1);
+    const [opacity, setOpacity] = useState14("0");
+    const [isControlBarPresent, setIsControlBarPresent] = useState14(true);
+    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) => {
       if (playerRef) {
         playerRef.current = player;
@@ -1712,6 +1809,7 @@ var VideoPlayerComponent = forwardRef(
       if (playerRef.current) {
         if (playerRef.current.paused()) {
           try {
+            startTime && playerRef.current.currentTime(startTime);
             await playerRef.current.play();
             setIsPaused(false);
           } catch (error) {
@@ -1756,7 +1854,7 @@ var VideoPlayerComponent = forwardRef(
         }
       };
     }, []);
-    const [timeSeeker, setTimeSeeker] = useState13("0");
+    const [timeSeeker, setTimeSeeker] = useState14("0");
     useEffect14(() => {
       const updateTimeSeeker = () => {
         var _a2, _b, _c, _d;
@@ -1773,7 +1871,7 @@ var VideoPlayerComponent = forwardRef(
       };
       updateTimeSeeker();
     }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         ref: videoRefs,
@@ -1785,7 +1883,7 @@ var VideoPlayerComponent = forwardRef(
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          bottomRedBar && /* @__PURE__ */ jsx35(
+          bottomRedBar && /* @__PURE__ */ jsx36(
             "div",
             {
               ref: childRef,
@@ -1796,12 +1894,12 @@ var VideoPlayerComponent = forwardRef(
               }
             }
           ),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             "div",
             {
               className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
               "data-vjs-player": true,
-              children: /* @__PURE__ */ jsx35(
+              children: /* @__PURE__ */ jsx36(
                 "div",
                 {
                   onClick: handlePlayerClick,
@@ -1819,7 +1917,7 @@ var VideoPlayerComponent = forwardRef(
 var VideoPlayerComponent_default = VideoPlayerComponent;
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = {
   autoplay: false,
   controls: true,
@@ -1844,7 +1942,7 @@ var Component = forwardRef2(
     childRef,
     bottomRedBar,
     noteButtonClick
-  }) => {
+  }, ref) => {
     options = __spreadProps(__spreadValues({}, options), {
       responsive: true,
       inactivityTimeout: 0,
@@ -1860,7 +1958,7 @@ var Component = forwardRef2(
     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([]);
+    const [tracks, setTracks] = useState15([]);
     useEffect15(() => {
     }, [isFocused]);
     useEffect15(() => {
@@ -1881,7 +1979,7 @@ var Component = forwardRef2(
       getTracks();
     }, [options == null ? void 0 : options.tracks]);
     const id = (Date.now() + Math.random() * 100).toString();
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       VideoPlayerComponent_default,
       {
         id,