softbuilders-react-video-player 1.1.70 → 1.1.72

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,
               {
@@ -677,7 +690,7 @@ var MenuButton = ({
 var MenuButton_default = MenuButton;
 
 // src/components/QualityMenu/index.tsx
-import { Fragment, jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
 var QualityOption = ({
   isSelected,
   quality,
@@ -760,8 +773,8 @@ 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) => {
-              return /* @__PURE__ */ jsx21(Fragment, { children: /* @__PURE__ */ jsx21(
+            /* @__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(
                 QualityOption,
                 {
                   width,
@@ -781,7 +794,7 @@ var QualityMenu = ({ width, onClick }) => {
                   }
                 },
                 `quality-${q.label}-${i}`
-              ) });
+              );
             }) })
           ] })
         }
@@ -875,23 +888,12 @@ import { useEffect as useEffect5, useState as useState6 } from "react";
 
 // src/components/Tooltip/index.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
-var Tooltip = ({
-  open,
-  children,
-  position = "top"
-}) => {
+var Tooltip = ({ open, children }) => {
   if (!open) return null;
-  console.log("tool tip");
-  const positionClasses = {
-    top: "sb-bottom-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mb-2",
-    bottom: "sb-top-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mt-2",
-    left: "sb-right-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-mr-2",
-    right: "sb-left-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-ml-2"
-  };
   return /* @__PURE__ */ jsx23(
     "div",
     {
-      className: `sb-relative sb-bg-black sb-text-white sb-text-sm sb-px-2 sb-py-1 sb-rounded sb-shadow-md sb-z-50 ${positionClasses[position]}`,
+      className: "sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap",
       children
     }
   );
@@ -1130,7 +1132,7 @@ var TimeSliderContainer_default = TimeSliderContainer;
 
 // src/components/BufferTracker/index.tsx
 import { useEffect as useEffect10 } from "react";
-import { Fragment as Fragment2, jsx as jsx30 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx30 } from "react/jsx-runtime";
 var BufferTracker = () => {
   const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
   useEffect10(() => {
@@ -1139,13 +1141,13 @@ var BufferTracker = () => {
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx30(Fragment2, {});
+  return /* @__PURE__ */ jsx30(Fragment, {});
 };
 var BufferTracker_default = BufferTracker;
 
 // src/components/CurrentTimeTracker/index.tsx
 import { useEffect as useEffect11 } from "react";
-import { Fragment as Fragment3, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx31 } from "react/jsx-runtime";
 var CurrentTimeTracker = () => {
   const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
   useEffect11(() => {
@@ -1154,7 +1156,7 @@ var CurrentTimeTracker = () => {
     }, 500);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx31(Fragment3, {});
+  return /* @__PURE__ */ jsx31(Fragment2, {});
 };
 var CurrentTimeTracker_default = CurrentTimeTracker;
 
@@ -1263,8 +1265,59 @@ var SubtitleMenu = ({
 };
 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,
@@ -1283,24 +1336,14 @@ var ControlBar = ({
   noteButtonClick
 }) => {
   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);
   }
@@ -1324,40 +1367,64 @@ 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("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx34(
+          GlobalTooltip_default,
+          {
+            width,
+            content: /* @__PURE__ */ jsx34("p", { children: isPaused ? "Play" : "pause" }),
+            isLeft: true,
+            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 ? {
@@ -1367,15 +1434,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,
@@ -1384,7 +1451,7 @@ var ControlBar = ({
             handleControlDisplayTimer
           }
         ) }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Quality" }), children: /* @__PURE__ */ jsx34(
           QualityMenu_default,
           {
             width,
@@ -1393,12 +1460,10 @@ 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,
           {
-            onMouseEnter: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: true })),
-            onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: false })),
             handleSaveNoteAction,
             width,
             setNoteOpen,
@@ -1409,23 +1474,18 @@ var ControlBar = ({
               });
             }
           }
-        ),
-        /* @__PURE__ */ jsx33(
+        ) }),
+        /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx34(
           SubtitleMenu_default,
           {
-            onMouseEnter: () => {
-              console.log("get well");
-              setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { sub: true }));
-            },
-            onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { sub: false })),
             width,
             onClick: (e, isOpen) => {
               setVolumeToggler(!volumeSliderToggler);
               setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
             }
           }
-        ),
-        /* @__PURE__ */ jsx33(
+        ) }),
+        /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx34(
           "button",
           {
             onClick: (e) => {
@@ -1437,9 +1497,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" })
           }
-        )
+        ) })
       ]
     }
   );
@@ -1447,26 +1507,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}`);
@@ -1479,7 +1539,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") =
         bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
       }
       bigPlayButtonRoot[id].render(
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           BigPlayButton_default,
           {
             player,
@@ -1509,7 +1569,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,
@@ -1548,20 +1608,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;
@@ -1795,7 +1855,7 @@ var VideoPlayerComponent = forwardRef(
         }
       };
     }, []);
-    const [timeSeeker, setTimeSeeker] = useState13("0");
+    const [timeSeeker, setTimeSeeker] = useState14("0");
     useEffect14(() => {
       const updateTimeSeeker = () => {
         var _a2, _b, _c, _d;
@@ -1812,7 +1872,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,
@@ -1824,7 +1884,7 @@ var VideoPlayerComponent = forwardRef(
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          bottomRedBar && /* @__PURE__ */ jsx35(
+          bottomRedBar && /* @__PURE__ */ jsx36(
             "div",
             {
               ref: childRef,
@@ -1835,12 +1895,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,
@@ -1858,7 +1918,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,
@@ -1883,7 +1943,7 @@ var Component = forwardRef2(
     childRef,
     bottomRedBar,
     noteButtonClick
-  }) => {
+  }, ref) => {
     options = __spreadProps(__spreadValues({}, options), {
       responsive: true,
       inactivityTimeout: 0,
@@ -1899,7 +1959,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(() => {
@@ -1920,7 +1980,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,