softbuilders-react-video-player 1.2.17 → 1.2.19

package/dist/index.mjs

@@ -166,26 +166,37 @@ var Slider = (_a) => {
     max = 100,
     className,
     handleSliderClick = () => {
-    }
+    },
+    setClicked,
+    onMouseMove
   } = _b, rest = __objRest(_b, [
     "value",
     "handleValueChange",
     "min",
     "max",
     "className",
-    "handleSliderClick"
+    "handleSliderClick",
+    "setClicked",
+    "onMouseMove"
   ]);
   return /* @__PURE__ */ jsx3(
     "input",
     __spreadValues({
       type: "range",
       min,
-      onMouseDown: (e) => e.stopPropagation(),
+      onMouseMove: (e) => onMouseMove && onMouseMove(e),
+      onMouseDown: (e) => {
+        e.stopPropagation();
+        setClicked && setClicked(true);
+      },
       onClick: (e) => {
         e.stopPropagation();
         handleSliderClick(e);
       },
-      onMouseUp: (e) => e.stopPropagation(),
+      onMouseUp: (e) => {
+        e.stopPropagation();
+        setClicked && setClicked(false);
+      },
       max,
       value,
       onChange: (e) => {
@@ -422,9 +433,47 @@ var SvgSettingsIcon = (props) => /* @__PURE__ */ jsx15(
 );
 var SettingsIcon_default = SvgSettingsIcon;
 
-// src/components/icons/SubIcon.tsx
+// src/components/icons/SkillamiIcon.tsx
 import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
-var SvgSubIcon = (props) => /* @__PURE__ */ jsxs2(
+var SvgSkillamiIcon = (props) => /* @__PURE__ */ jsxs2(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 45 46",
+    width: "1em",
+    height: "1em"
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsx16(
+        "path",
+        {
+          fill: "#fff",
+          d: "m22.736 37.857-11.924-3.255-3.194-12.153a.99.99 0 0 0-1.213-.714c-.53.145-.843.7-.7 1.236l3.343 12.715a.991.991 0 0 0 .7.714l12.476 3.406a.985.985 0 0 0 1.213-.713 1.01 1.01 0 0 0-.7-1.236M44.733 25.943 39.51 6.074a1 1 0 0 0-.7-.714L19.308.033a.98.98 0 0 0-.957.26L9.389 9.428a1.02 1.02 0 0 0 0 1.428.976.976 0 0 0 1.402 0l8.56-8.717 18.39 5.024 4.93 18.741-8.56 8.724a1.02 1.02 0 0 0 0 1.428.977.977 0 0 0 1.4 0l8.963-9.133c.249-.254.348-.627.256-.975z"
+        }
+      ),
+      /* @__PURE__ */ jsx16(
+        "path",
+        {
+          fill: "#fff",
+          d: "m24.323 30.829-7.735-2.113-2.074-7.883a.99.99 0 0 0-1.213-.714c-.53.145-.842.7-.7 1.236l2.223 8.445a.991.991 0 0 0 .7.714l8.287 2.265a.985.985 0 0 0 1.212-.714 1.01 1.01 0 0 0-.7-1.236M15.887 15.86l5.573-5.68 4.278 1.168a.985.985 0 0 0 1.213-.714 1.01 1.01 0 0 0-.7-1.236l-4.83-1.32a.98.98 0 0 0-.957.262l-5.979 6.092a1.02 1.02 0 0 0 0 1.428.977.977 0 0 0 1.402 0M29.206 30.858a.976.976 0 0 0 1.4 0l5.98-6.093c.248-.253.348-.627.255-.975l-1.294-4.921a.99.99 0 0 0-1.213-.715c-.53.145-.843.7-.7 1.236l1.145 4.36-5.574 5.68a1.02 1.02 0 0 0 0 1.428"
+        }
+      ),
+      /* @__PURE__ */ jsx16(
+        "path",
+        {
+          fill: "#F26C21",
+          d: "m29.383 36.008-2.99-11 2.745-2.798-1.007-3.83 2.45-2.498 3.76 1.026 3.56-3.628L36.6 8.322l-4.865-1.327-3.56 3.628 1.007 3.831-2.45 2.497-3.76-1.026-2.745 2.799-10.794-3.049-1.007-3.834-4.865-1.327L0 14.142l1.302 4.959 4.865 1.326 2.745-2.798 10.794 3.048 1.007 3.835 3.762 1.025 2.991 11-2.745 2.798 1.302 4.959 4.865 1.326 3.56-3.628-1.302-4.958-3.763-1.03zM32.328 9.25l2.653.725.712 2.704-1.942 1.979-2.653-.725-.712-2.704zM5.573 18.173l-2.653-.725-.711-2.704 1.941-1.979 2.653.725.712 2.704zm16.761 4.686-.71-2.704 1.941-1.979 2.653.725.711 2.704-1.941 1.979zm7.963 20.507-2.653-.725-.711-2.704 1.942-1.979 2.653.725.711 2.704z"
+        }
+      )
+    ]
+  })
+);
+var SkillamiIcon_default = SvgSkillamiIcon;
+
+// src/components/icons/SubIcon.tsx
+import { jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
+var SvgSubIcon = (props) => /* @__PURE__ */ jsxs3(
   "svg",
   __spreadProps(__spreadValues({
     xmlns: "http://www.w3.org/2000/svg",
@@ -434,7 +483,7 @@ var SvgSubIcon = (props) => /* @__PURE__ */ jsxs2(
     viewBox: "0 0 15 15"
   }, props), {
     children: [
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         "path",
         {
           stroke: "#D1D5DB",
@@ -444,7 +493,7 @@ var SvgSubIcon = (props) => /* @__PURE__ */ jsxs2(
           d: "M1.25 7.5c0-2.487 0-3.731.658-4.561q.159-.2.346-.367c.785-.697 1.96-.697 4.309-.697h1.875c2.349 0 3.523 0 4.307.697q.19.168.347.367c.658.83.658 2.074.658 4.561s0 3.731-.658 4.561q-.157.2-.347.367c-.784.697-1.957.697-4.307.697H6.562c-2.349 0-3.523 0-4.308-.697a3 3 0 0 1-.346-.367c-.658-.83-.658-2.073-.658-4.561"
         }
       ),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         "path",
         {
           stroke: "#D1D5DB",
@@ -460,14 +509,14 @@ var SvgSubIcon = (props) => /* @__PURE__ */ jsxs2(
 var SubIcon_default = SvgSubIcon;
 
 // src/components/icons/SubtitlesIcon.tsx
-import { jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/components/icons/UnmuteIcon.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 
 // src/components/icons/VolumeHigh.tsx
-import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
-var SvgVolumeHigh = (props) => /* @__PURE__ */ jsxs4(
+import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+var SvgVolumeHigh = (props) => /* @__PURE__ */ jsxs5(
   "svg",
   __spreadProps(__spreadValues({
     xmlns: "http://www.w3.org/2000/svg",
@@ -477,16 +526,16 @@ var SvgVolumeHigh = (props) => /* @__PURE__ */ jsxs4(
     viewBox: "0 0 512 512"
   }, props), {
     children: [
-      /* @__PURE__ */ jsx19("path", { d: "M264 416.19a23.92 23.92 0 0 1-14.21-4.69l-.66-.51-91.46-75H88a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.65l91.46-75 .66-.51A24 24 0 0 1 288 119.83v272.34a24 24 0 0 1-24 24ZM352 336a16 16 0 0 1-14.29-23.18c9.49-18.9 14.3-38 14.3-56.82 0-19.36-4.66-37.92-14.25-56.73a16 16 0 0 1 28.5-14.54C378.2 208.16 384 231.47 384 256c0 23.83-6 47.78-17.7 71.18A16 16 0 0 1 352 336" }),
-      /* @__PURE__ */ jsx19("path", { d: "M400 384a16 16 0 0 1-13.87-24C405 327.05 416 299.45 416 256c0-44.12-10.94-71.52-29.83-103.95A16 16 0 0 1 413.83 136C434.92 172.16 448 204.88 448 256c0 50.36-13.06 83.24-34.12 120a16 16 0 0 1-13.88 8" })
+      /* @__PURE__ */ jsx20("path", { d: "M264 416.19a23.92 23.92 0 0 1-14.21-4.69l-.66-.51-91.46-75H88a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.65l91.46-75 .66-.51A24 24 0 0 1 288 119.83v272.34a24 24 0 0 1-24 24ZM352 336a16 16 0 0 1-14.29-23.18c9.49-18.9 14.3-38 14.3-56.82 0-19.36-4.66-37.92-14.25-56.73a16 16 0 0 1 28.5-14.54C378.2 208.16 384 231.47 384 256c0 23.83-6 47.78-17.7 71.18A16 16 0 0 1 352 336" }),
+      /* @__PURE__ */ jsx20("path", { d: "M400 384a16 16 0 0 1-13.87-24C405 327.05 416 299.45 416 256c0-44.12-10.94-71.52-29.83-103.95A16 16 0 0 1 413.83 136C434.92 172.16 448 204.88 448 256c0 50.36-13.06 83.24-34.12 120a16 16 0 0 1-13.88 8" })
     ]
   })
 );
 var VolumeHigh_default = SvgVolumeHigh;
 
 // src/components/icons/VolumeLow.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var SvgVolumeLow = (props) => /* @__PURE__ */ jsx20(
+import { jsx as jsx21 } from "react/jsx-runtime";
+var SvgVolumeLow = (props) => /* @__PURE__ */ jsx21(
   "svg",
   __spreadProps(__spreadValues({
     xmlns: "http://www.w3.org/2000/svg",
@@ -495,14 +544,14 @@ var SvgVolumeLow = (props) => /* @__PURE__ */ jsx20(
     fill: "#fff",
     viewBox: "0 0 512 512"
   }, props), {
-    children: /* @__PURE__ */ jsx20("path", { d: "M296 416.19a23.92 23.92 0 0 1-14.21-4.69l-.66-.51-91.46-75H120a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.65l91.46-75 .66-.51A24 24 0 0 1 320 119.83v272.34a24 24 0 0 1-24 24ZM384 336a16 16 0 0 1-14.29-23.18c9.49-18.9 14.3-38 14.3-56.82 0-19.36-4.66-37.92-14.25-56.73a16 16 0 0 1 28.5-14.54C410.2 208.16 416 231.47 416 256c0 23.83-6 47.78-17.7 71.18A16 16 0 0 1 384 336" })
+    children: /* @__PURE__ */ jsx21("path", { d: "M296 416.19a23.92 23.92 0 0 1-14.21-4.69l-.66-.51-91.46-75H120a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.65l91.46-75 .66-.51A24 24 0 0 1 320 119.83v272.34a24 24 0 0 1-24 24ZM384 336a16 16 0 0 1-14.29-23.18c9.49-18.9 14.3-38 14.3-56.82 0-19.36-4.66-37.92-14.25-56.73a16 16 0 0 1 28.5-14.54C410.2 208.16 416 231.47 416 256c0 23.83-6 47.78-17.7 71.18A16 16 0 0 1 384 336" })
   })
 );
 var VolumeLow_default = SvgVolumeLow;
 
 // src/components/icons/VolumeMute.tsx
-import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
-var SvgVolumeMute = (props) => /* @__PURE__ */ jsxs5(
+import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
+var SvgVolumeMute = (props) => /* @__PURE__ */ jsxs6(
   "svg",
   __spreadProps(__spreadValues({
     xmlns: "http://www.w3.org/2000/svg",
@@ -512,7 +561,7 @@ var SvgVolumeMute = (props) => /* @__PURE__ */ jsxs5(
     viewBox: "0 0 512 512"
   }, props), {
     children: [
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         "path",
         {
           d: "M416 432 64 80",
@@ -525,16 +574,16 @@ var SvgVolumeMute = (props) => /* @__PURE__ */ jsxs5(
           }
         }
       ),
-      /* @__PURE__ */ jsx21("path", { d: "M243.33 98.86a23.89 23.89 0 0 0-25.55 1.82l-.66.51-28.52 23.35a8 8 0 0 0-.59 11.85l54.33 54.33a8 8 0 0 0 13.66-5.66v-64.49a24.51 24.51 0 0 0-12.67-21.71M251.33 335.29 96.69 180.69A16 16 0 0 0 85.38 176H56a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h69.76l92 75.31a23.9 23.9 0 0 0 25.87 1.69A24.51 24.51 0 0 0 256 391.45v-44.86a16 16 0 0 0-4.67-11.3M352 256c0-24.56-5.81-47.87-17.75-71.27a16 16 0 1 0-28.5 14.55C315.34 218.06 320 236.62 320 256q0 4-.31 8.13a8 8 0 0 0 2.32 6.25l14.36 14.36a8 8 0 0 0 13.55-4.31A146 146 0 0 0 352 256M416 256c0-51.18-13.08-83.89-34.18-120.06a16 16 0 0 0-27.64 16.12C373.07 184.44 384 211.83 384 256c0 23.83-3.29 42.88-9.37 60.65a8 8 0 0 0 1.9 8.26L389 337.4a8 8 0 0 0 13.13-2.79C411 311.76 416 287.26 416 256" }),
-      /* @__PURE__ */ jsx21("path", { d: "M480 256c0-74.25-20.19-121.11-50.51-168.61a16 16 0 1 0-27 17.22C429.82 147.38 448 189.5 448 256c0 46.19-8.43 80.27-22.43 110.53a8 8 0 0 0 1.59 9l11.92 11.92a8 8 0 0 0 12.92-2.16C471.6 344.9 480 305 480 256" })
+      /* @__PURE__ */ jsx22("path", { d: "M243.33 98.86a23.89 23.89 0 0 0-25.55 1.82l-.66.51-28.52 23.35a8 8 0 0 0-.59 11.85l54.33 54.33a8 8 0 0 0 13.66-5.66v-64.49a24.51 24.51 0 0 0-12.67-21.71M251.33 335.29 96.69 180.69A16 16 0 0 0 85.38 176H56a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h69.76l92 75.31a23.9 23.9 0 0 0 25.87 1.69A24.51 24.51 0 0 0 256 391.45v-44.86a16 16 0 0 0-4.67-11.3M352 256c0-24.56-5.81-47.87-17.75-71.27a16 16 0 1 0-28.5 14.55C315.34 218.06 320 236.62 320 256q0 4-.31 8.13a8 8 0 0 0 2.32 6.25l14.36 14.36a8 8 0 0 0 13.55-4.31A146 146 0 0 0 352 256M416 256c0-51.18-13.08-83.89-34.18-120.06a16 16 0 0 0-27.64 16.12C373.07 184.44 384 211.83 384 256c0 23.83-3.29 42.88-9.37 60.65a8 8 0 0 0 1.9 8.26L389 337.4a8 8 0 0 0 13.13-2.79C411 311.76 416 287.26 416 256" }),
+      /* @__PURE__ */ jsx22("path", { d: "M480 256c0-74.25-20.19-121.11-50.51-168.61a16 16 0 1 0-27 17.22C429.82 147.38 448 189.5 448 256c0 46.19-8.43 80.27-22.43 110.53a8 8 0 0 0 1.59 9l11.92 11.92a8 8 0 0 0 12.92-2.16C471.6 344.9 480 305 480 256" })
     ]
   })
 );
 var VolumeMute_default = SvgVolumeMute;
 
 // src/components/icons/VolumeVLow.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var SvgVolumeVLow = (props) => /* @__PURE__ */ jsx22(
+import { jsx as jsx23 } from "react/jsx-runtime";
+var SvgVolumeVLow = (props) => /* @__PURE__ */ jsx23(
   "svg",
   __spreadProps(__spreadValues({
     xmlns: "http://www.w3.org/2000/svg",
@@ -543,13 +592,13 @@ var SvgVolumeVLow = (props) => /* @__PURE__ */ jsx22(
     fill: "#fff",
     viewBox: "0 0 512 512"
   }, props), {
-    children: /* @__PURE__ */ jsx22("path", { d: "M344 416a23.92 23.92 0 0 1-14.21-4.69c-.23-.16-.44-.33-.66-.51l-91.46-74.9H168a24 24 0 0 1-24-24V200.07a24 24 0 0 1 24-24h69.65l91.46-74.9c.22-.18.43-.35.66-.51A24 24 0 0 1 368 120v272a24 24 0 0 1-24 24" })
+    children: /* @__PURE__ */ jsx23("path", { d: "M344 416a23.92 23.92 0 0 1-14.21-4.69c-.23-.16-.44-.33-.66-.51l-91.46-74.9H168a24 24 0 0 1-24-24V200.07a24 24 0 0 1 24-24h69.65l91.46-74.9c.22-.18.43-.35.66-.51A24 24 0 0 1 368 120v272a24 24 0 0 1-24 24" })
   })
 );
 var VolumeVLow_default = SvgVolumeVLow;
 
 // src/components/VolumeSlider/index.tsx
-import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 var MIN = 0;
 var MAX = 100;
 var VolumeSlider = ({
@@ -562,6 +611,7 @@ var VolumeSlider = ({
   const { player } = useSoftBuildersVideoPlayerContext();
   const [isVisible, setVisible] = useState2(false);
   const [volume, setVolume] = useState2(0);
+  const [isClicked, setClicked] = useState2(false);
   useEffect2(() => {
     const updateVolumeState = () => {
       const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number((player == null ? void 0 : player.volume()) || 0) * 100;
@@ -577,8 +627,15 @@ var VolumeSlider = ({
     e.stopPropagation();
     const slider = e.currentTarget;
     const rect = slider.getBoundingClientRect();
-    const offsetX = e.clientY - rect.top;
-    const newVolume = offsetX / rect.height * 100;
+    let offsetX;
+    let newVolume;
+    if (!isTrailer && width > 400) {
+      offsetX = e.clientY - rect.bottom;
+      newVolume = offsetX / rect.height * -100;
+    } else {
+      offsetX = e.clientY - rect.top;
+      newVolume = offsetX / rect.height * 100;
+    }
     setVolume(newVolume);
     player == null ? void 0 : player.volume(newVolume / 100);
     if (newVolume === 0) {
@@ -587,6 +644,28 @@ var VolumeSlider = ({
       player == null ? void 0 : player.muted(false);
     }
   };
+  const onMouseMove = (e) => {
+    if (isClicked) {
+      const slider = e.currentTarget;
+      const rect = slider.getBoundingClientRect();
+      let offsetX;
+      let newVolume;
+      if (!isTrailer && width > 400) {
+        offsetX = e.clientY - rect.bottom;
+        newVolume = offsetX / rect.height * -100;
+      } else {
+        offsetX = e.clientY - rect.top;
+        newVolume = offsetX / rect.height * 100;
+      }
+      setVolume(newVolume);
+      player == null ? void 0 : player.volume(newVolume / 100);
+      if (newVolume === 0) {
+        player == null ? void 0 : player.muted(true);
+      } else {
+        player == null ? void 0 : player.muted(false);
+      }
+    }
+  };
   const timeoutRef = React2.useRef(null);
   useEffect2(() => {
     setVisible(false);
@@ -625,33 +704,33 @@ var VolumeSlider = ({
     setVolume(0);
     player == null ? void 0 : player.muted(true);
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: `sb-flex ${isVisible ? "" : ""}  ${width > 400 && !isTrailer ? "sb-flex-col-reverse" : `sb-flex-col ${isTrailer ? "sb-justify-start" : ""}`} sb-items-center sb-gap-1 sb-h-full`,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "div",
           {
             className: `sb-flex sb-relative ${width < 400 || isTrailer ? "-sb-top-1" : "sb-top-1"}`,
             onClick: toggleVisibility,
             onDoubleClick: handleDoubleClick,
-            children: volume == 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx23(
+            children: volume == 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx24(
               VolumeMute_default,
               {
                 className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
               }
-            ) : volume < 25 ? /* @__PURE__ */ jsx23(
+            ) : volume < 25 ? /* @__PURE__ */ jsx24(
               VolumeVLow_default,
               {
                 className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
               }
-            ) : volume < 50 ? /* @__PURE__ */ jsx23(
+            ) : volume < 50 ? /* @__PURE__ */ jsx24(
               VolumeLow_default,
               {
                 className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
               }
-            ) : /* @__PURE__ */ jsx23(
+            ) : /* @__PURE__ */ jsx24(
               VolumeHigh_default,
               {
                 className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
@@ -659,19 +738,21 @@ var VolumeSlider = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx23("div", { className: "sb-flex  sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("div", { className: "sb-flex  sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx24(
           "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 && !isTrailer ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative`,
-            children: /* @__PURE__ */ jsx23(
+            children: /* @__PURE__ */ jsx24(
               Slider_default,
               {
+                onMouseMove: (e) => onMouseMove(e),
                 value: volume,
                 handleValueChange,
                 min: MIN,
                 max: MAX,
                 className: "!sb-w-16 ",
-                handleSliderClick: handleVolumeSliderClick
+                handleSliderClick: handleVolumeSliderClick,
+                setClicked
               }
             )
           }
@@ -687,7 +768,7 @@ import { useEffect as useEffect4, useState as useState4 } from "react";
 
 // src/components/MenuButton/index.tsx
 import { useCallback, useEffect as useEffect3, useRef, useState as useState3 } from "react";
-import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
 var MenuButton = ({
   buttonContent,
   menuContent,
@@ -722,14 +803,14 @@ var MenuButton = ({
   useEffect3(() => {
     setNoteOpen && setNoteOpen(isOpen);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       onMouseEnter,
       onMouseLeave,
       className: "sb-relative  sb-flex sb-items-end",
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "button",
           {
             ref: buttonRef,
@@ -745,7 +826,7 @@ var MenuButton = ({
             children: buttonContent
           }
         ),
-        !disablePopUp && isOpen && /* @__PURE__ */ jsx24(
+        !disablePopUp && isOpen && /* @__PURE__ */ jsx25(
           "div",
           {
             ref: menuRef,
@@ -763,7 +844,7 @@ var MenuButton = ({
 var MenuButton_default = MenuButton;
 
 // src/components/QualityMenu/index.tsx
-import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var QualityOption = ({
   isSelected,
   quality,
@@ -771,19 +852,19 @@ var QualityOption = ({
   width,
   isTrailer
 }) => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "button",
     {
       className: `hover:sb-text-orange-500 ${width > 400 && !isTrailer ? "sb-p-2" : "sp-pb-1"}`,
       onClick,
-      children: /* @__PURE__ */ jsxs8("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
-        /* @__PURE__ */ jsx25("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsxs9("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
+        /* @__PURE__ */ jsx26("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx26(
           CheckedIcon_default,
           {
             className: `${width > 400 && !isTrailer ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}`
           }
-        ) : /* @__PURE__ */ jsx25("div", {}) }),
-        /* @__PURE__ */ jsx25("p", { className: "sb-text-left sb-col-span-9", children: quality == null ? void 0 : quality.label })
+        ) : /* @__PURE__ */ jsx26("div", {}) }),
+        /* @__PURE__ */ jsx26("p", { className: "sb-text-left sb-col-span-9", children: quality == null ? void 0 : quality.label })
       ] })
     }
   );
@@ -812,25 +893,25 @@ var QualityMenu = ({ width, onClick, isTrailer }) => {
       }
     }
   }, [player]);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     MenuButton_default,
     {
       classContainer: `${width < 400 || isTrailer ? "!sb-top-8 -sb-left-9" : ""}`,
       onClick: (e, isOpen) => {
         onClick && onClick(e, isOpen);
       },
-      buttonContent: /* @__PURE__ */ jsx25(SettingsIcon_default, { className: "sb-w-3 sb-h-3" }),
-      menuContent: /* @__PURE__ */ jsx25(
+      buttonContent: /* @__PURE__ */ jsx26(SettingsIcon_default, { className: "sb-w-3 sb-h-3" }),
+      menuContent: /* @__PURE__ */ jsx26(
         "div",
         {
           className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50  ${width > 400 && !isTrailer ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
-          children: /* @__PURE__ */ jsxs8("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
-            /* @__PURE__ */ jsxs8(
+          children: /* @__PURE__ */ jsxs9("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
+            /* @__PURE__ */ jsxs9(
               "div",
               {
                 className: `sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2`,
                 children: [
-                  /* @__PURE__ */ jsx25(
+                  /* @__PURE__ */ jsx26(
                     "button",
                     {
                       onClick: () => {
@@ -839,16 +920,16 @@ var QualityMenu = ({ width, onClick, isTrailer }) => {
                         }
                       },
                       className: "hover:sb-scale-150",
-                      children: /* @__PURE__ */ jsx25(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
+                      children: /* @__PURE__ */ jsx26(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
                     }
                   ),
-                  /* @__PURE__ */ jsx25("h3", { children: "Quality" })
+                  /* @__PURE__ */ jsx26("h3", { children: "Quality" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx25("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-            /* @__PURE__ */ jsx25("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__ */ jsx25(
+            /* @__PURE__ */ jsx26("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
+            /* @__PURE__ */ jsx26("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__ */ jsx26(
                 QualityOption,
                 {
                   width,
@@ -884,7 +965,7 @@ var QualityMenu_default = QualityMenu;
 
 // src/components/CreateNoteMenu/index.tsx
 import React5, { useState as useState5 } from "react";
-import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 var CreateNoteMenu = ({
   handleSaveNoteAction,
   width,
@@ -907,7 +988,7 @@ var CreateNoteMenu = ({
       );
     }
   };
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     MenuButton_default,
     {
       onMouseEnter,
@@ -916,21 +997,21 @@ var CreateNoteMenu = ({
       noteButtonClick,
       setNoteOpen,
       classContainer: `${width < 400 ? "!sb-top-8 -sb-left-[9.75rem]" : ""}`,
-      buttonContent: /* @__PURE__ */ jsx26(ClosedNoteIcon_default, { className: "sb-w-3 sb-h-3" }),
-      menuContent: /* @__PURE__ */ jsx26(
+      buttonContent: /* @__PURE__ */ jsx27(ClosedNoteIcon_default, { className: "sb-w-3 sb-h-3" }),
+      menuContent: /* @__PURE__ */ jsx27(
         "div",
         {
           className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400 ? " sb-py-5 sb-w-[220px]" : "sb-py-1 sb-w-[150px]"}`,
-          children: /* @__PURE__ */ jsxs9(
+          children: /* @__PURE__ */ jsxs10(
             "div",
             {
               className: "sb-flex sb-flex-col sb-gap-3 sb-items-center sb-justify-center",
               onClick: (e) => e.stopPropagation(),
               children: [
-                /* @__PURE__ */ jsx26("h3", { className: "sb-px-5", children: "Add Note" }),
-                /* @__PURE__ */ jsx26("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-                /* @__PURE__ */ jsxs9("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start", children: [
-                  /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27("h3", { className: "sb-px-5", children: "Add Note" }),
+                /* @__PURE__ */ jsx27("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
+                /* @__PURE__ */ jsxs10("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start", children: [
+                  /* @__PURE__ */ jsx27(
                     "input",
                     {
                       onClick: (e) => e.stopPropagation(),
@@ -943,7 +1024,7 @@ var CreateNoteMenu = ({
                       className: "sb-text-white placeholder:sb-text-white sb-w-full sb-bg-transparent sb-px-4 sb-py-3 sb-border sb-border-[#AAAAAA] sb-rounded-md"
                     }
                   ),
-                  /* @__PURE__ */ jsx26("button", { className: "sb-w-full", onClick: handleSaveNote, children: /* @__PURE__ */ jsx26("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md", children: "Save" }) })
+                  /* @__PURE__ */ jsx27("button", { className: "sb-w-full", onClick: handleSaveNote, children: /* @__PURE__ */ jsx27("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md", children: "Save" }) })
                 ] })
               ]
             }
@@ -962,10 +1043,10 @@ import { useEffect as useEffect6, useState as useState7 } from "react";
 import { useState as useState6 } from "react";
 
 // src/components/Tooltip/index.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Tooltip = ({ open, children }) => {
   if (!open) return null;
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       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",
@@ -976,14 +1057,14 @@ var Tooltip = ({ open, children }) => {
 var Tooltip_default = Tooltip;
 
 // src/components/NoteTooltip/index.tsx
-import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
 var NoteTooltip = ({ note }) => {
   const [open, setOpen] = useState6(false);
   const { currentTime, player } = useSoftBuildersVideoPlayerContext();
   const handleValueChange = () => {
     player == null ? void 0 : player.currentTime(note.time);
   };
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       onClick: handleValueChange,
@@ -991,9 +1072,9 @@ var NoteTooltip = ({ note }) => {
       style: { left: `${note == null ? void 0 : note.percentage}%` },
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
-      children: /* @__PURE__ */ jsx28("div", { className: "sb-relative", children: /* @__PURE__ */ jsx28(Tooltip_default, { open, children: /* @__PURE__ */ jsxs10("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [
-        /* @__PURE__ */ jsx28("p", { children: note == null ? void 0 : note.label }),
-        /* @__PURE__ */ jsx28("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: durationFormater(note.time) })
+      children: /* @__PURE__ */ jsx29("div", { className: "sb-relative", children: /* @__PURE__ */ jsx29(Tooltip_default, { open, children: /* @__PURE__ */ jsxs11("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [
+        /* @__PURE__ */ jsx29("p", { children: note == null ? void 0 : note.label }),
+        /* @__PURE__ */ jsx29("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: durationFormater(note.time) })
       ] }) }) })
     }
   );
@@ -1001,7 +1082,7 @@ var NoteTooltip = ({ note }) => {
 var NoteTooltip_default = NoteTooltip;
 
 // src/components/NotesPanal/index.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var NotesPanal = ({ notes }) => {
   const [ns, setNs] = useState7([]);
   const { duration } = useSoftBuildersVideoPlayerContext();
@@ -1014,7 +1095,7 @@ var NotesPanal = ({ notes }) => {
     });
     newNs && setNs(newNs);
   }, [notes, duration]);
-  return /* @__PURE__ */ jsx29("div", { id: "notes-panal", className: "sb-w-full sb-h-full sb-relative ", children: ns.map((n, i) => /* @__PURE__ */ jsx29(NoteTooltip_default, { note: n }, `note-${i}-${n.time}`)) });
+  return /* @__PURE__ */ jsx30("div", { id: "notes-panal", className: "sb-w-full sb-h-full sb-relative ", children: ns.map((n, i) => /* @__PURE__ */ jsx30(NoteTooltip_default, { note: n }, `note-${i}-${n.time}`)) });
 };
 var NotesPanal_default = NotesPanal;
 
@@ -1023,7 +1104,7 @@ import { useEffect as useEffect8, useState as useState9 } from "react";
 
 // src/components/ChapterTooltip/index.tsx
 import { useEffect as useEffect7, useState as useState8 } from "react";
-import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
 var ChapterTooltip = ({ chapter }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [open, setOpen] = useState8(false);
@@ -1045,7 +1126,7 @@ var ChapterTooltip = ({ chapter }) => {
     const clickedTime = chapter.startTime + clickPercentage * (chapter.endTime - chapter.startTime);
     player == null ? void 0 : player.currentTime(clickedTime);
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       id: `ii-section-${chapter.title}`,
@@ -1056,15 +1137,15 @@ var ChapterTooltip = ({ chapter }) => {
       },
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         "button",
         {
           id: `section-${chapter.title}`,
           className: "sb-h-full sb-w-full",
           onClick: handleClickChapter,
-          children: /* @__PURE__ */ jsx30("div", { className: "sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center", children: /* @__PURE__ */ jsx30(Tooltip_default, { open, children: /* @__PURE__ */ jsxs11("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [
-            /* @__PURE__ */ jsx30("p", { children: chapter.title }),
-            /* @__PURE__ */ jsxs11("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: [
+          children: /* @__PURE__ */ jsx31("div", { className: "sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center", children: /* @__PURE__ */ jsx31(Tooltip_default, { open, children: /* @__PURE__ */ jsxs12("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [
+            /* @__PURE__ */ jsx31("p", { children: chapter.title }),
+            /* @__PURE__ */ jsxs12("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: [
               durationFormater(chapter.startTime),
               " -",
               " ",
@@ -1079,7 +1160,7 @@ var ChapterTooltip = ({ chapter }) => {
 var ChapterTooltip_default = ChapterTooltip;
 
 // src/components/ChaptersPanal/index.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var ChaptersPanal = ({ chapters }) => {
   const [cs, setCs] = useState9([]);
   const { duration } = useSoftBuildersVideoPlayerContext();
@@ -1094,19 +1175,20 @@ var ChaptersPanal = ({ chapters }) => {
     });
     newCs && setCs(newCs);
   }, [chapters, duration]);
-  return /* @__PURE__ */ jsx31("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative ", children: cs.map((c, i) => /* @__PURE__ */ jsx31(ChapterTooltip_default, { chapter: c }, `chapter-${i}-${c.startTime}`)) });
+  return /* @__PURE__ */ jsx32("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative ", children: cs.map((c, i) => /* @__PURE__ */ jsx32(ChapterTooltip_default, { chapter: c }, `chapter-${i}-${c.startTime}`)) });
 };
 var ChaptersPanal_default = ChaptersPanal;
 
 // src/components/TimeSlider/index.tsx
 import { useEffect as useEffect9, useState as useState10 } from "react";
-import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 var MIN2 = 0;
 var MAX2 = 100;
 var DEFERENCE = Math.abs(MAX2 - MIN2);
 var BAR_PERCENTAGE_WIDTH = 0.5;
 var TimeSlider = ({ chapters }) => {
   const [timeSlider, setTimeSlider] = useState10(0);
+  const [isClicked, setClicked] = useState10(false);
   const { player, duration, downloadedBufferPercentage } = useSoftBuildersVideoPlayerContext();
   const handleValueChange = (e) => {
     const newTimeSlider = Number(e.target.value);
@@ -1114,14 +1196,16 @@ var TimeSlider = ({ chapters }) => {
     const time = newTimeSlider * duration / DEFERENCE;
     player == null ? void 0 : player.currentTime(time);
   };
-  const handleSliderClick = (e) => {
-    const slider = e.currentTarget;
-    const rect = slider.getBoundingClientRect();
-    const offsetX = e.clientX - rect.left;
-    const newTimeSlider = offsetX / rect.width * DEFERENCE;
-    const time = newTimeSlider * duration / DEFERENCE;
-    player == null ? void 0 : player.currentTime(time);
-    setTimeSlider(newTimeSlider);
+  const onMouseMove = (e) => {
+    if (isClicked) {
+      const slider = e.currentTarget;
+      const rect = slider.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left;
+      const newTimeSlider = offsetX / rect.width * DEFERENCE;
+      const time = newTimeSlider * duration / DEFERENCE;
+      player == null ? void 0 : player.currentTime(time);
+      setTimeSlider(newTimeSlider);
+    }
   };
   useEffect9(() => {
     const intervalId = setInterval(() => {
@@ -1149,13 +1233,14 @@ var TimeSlider = ({ chapters }) => {
     arr.push(`black 100%`);
     setMaskCuttes(arr.toString());
   }, [chapters, duration]);
-  return /* @__PURE__ */ jsxs12("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center", children: [
-    /* @__PURE__ */ jsx32("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10", children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs13("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center", children: [
+    /* @__PURE__ */ jsx33("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10", children: /* @__PURE__ */ jsx33(
       Slider_default,
       {
+        onMouseMove: (e) => onMouseMove(e),
+        setClicked,
         value: timeSlider,
         handleValueChange,
-        handleSliderClick,
         min: MIN2,
         max: MAX2,
         style: {
@@ -1163,7 +1248,7 @@ var TimeSlider = ({ chapters }) => {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md",
@@ -1193,24 +1278,24 @@ var TimeSlider = ({ chapters }) => {
 var TimeSlider_default = TimeSlider;
 
 // src/components/TimeSliderContainer/index.tsx
-import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
 var TimeSliderContainer = ({ notes, chapters }) => {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       id: "time-slider-container",
       className: "sb-w-full sb-relative sb-flex sb-items-center sb-justify-center",
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "div",
           {
             id: "notes-panal",
             className: "sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0",
-            children: /* @__PURE__ */ jsx33(NotesPanal_default, { notes })
+            children: /* @__PURE__ */ jsx34(NotesPanal_default, { notes })
           }
         ),
-        /* @__PURE__ */ jsx33("div", { className: "sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0", children: /* @__PURE__ */ jsx33(ChaptersPanal_default, { chapters }) }),
-        /* @__PURE__ */ jsx33(TimeSlider_default, { chapters })
+        /* @__PURE__ */ jsx34("div", { className: "sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0", children: /* @__PURE__ */ jsx34(ChaptersPanal_default, { chapters }) }),
+        /* @__PURE__ */ jsx34(TimeSlider_default, { chapters })
       ]
     }
   );
@@ -1219,7 +1304,7 @@ var TimeSliderContainer_default = TimeSliderContainer;
 
 // src/components/BufferTracker/index.tsx
 import { useEffect as useEffect10 } from "react";
-import { Fragment, jsx as jsx34 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx35 } from "react/jsx-runtime";
 var BufferTracker = () => {
   const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
   useEffect10(() => {
@@ -1228,13 +1313,13 @@ var BufferTracker = () => {
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx34(Fragment, {});
+  return /* @__PURE__ */ jsx35(Fragment, {});
 };
 var BufferTracker_default = BufferTracker;
 
 // src/components/CurrentTimeTracker/index.tsx
 import { useEffect as useEffect11 } from "react";
-import { Fragment as Fragment2, jsx as jsx35 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx36 } from "react/jsx-runtime";
 var CurrentTimeTracker = () => {
   const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
   useEffect11(() => {
@@ -1243,19 +1328,19 @@ var CurrentTimeTracker = () => {
     }, 500);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx35(Fragment2, {});
+  return /* @__PURE__ */ jsx36(Fragment2, {});
 };
 var CurrentTimeTracker_default = CurrentTimeTracker;
 
 // src/components/SubtitleMenu/index.tsx
 import { useEffect as useEffect12, useState as useState11 } from "react";
-import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var SubtitleOption = ({
   isSelected,
   subtitle,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "button",
     {
       className: "hover:sb-text-orange-500 sb-p-2",
@@ -1263,9 +1348,9 @@ var SubtitleOption = ({
         e.stopPropagation();
         onClick(e);
       },
-      children: /* @__PURE__ */ jsxs14("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
-        /* @__PURE__ */ jsx36("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx36(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx36("div", {}) }),
-        /* @__PURE__ */ jsx36("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })
+      children: /* @__PURE__ */ jsxs15("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
+        /* @__PURE__ */ jsx37("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx37(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx37("div", {}) }),
+        /* @__PURE__ */ jsx37("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })
       ] })
     }
   );
@@ -1298,7 +1383,7 @@ var SubtitleMenu = ({
       setSubtitles(textTracks);
     }
   }, [player]);
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     MenuButton_default,
     {
       onMouseEnter,
@@ -1307,14 +1392,14 @@ var SubtitleMenu = ({
         onClick && onClick(e, isOpen);
       },
       classContainer: `${width < 400 || isTrailer ? "!sb-top-8 -sb-left-9" : ""}`,
-      buttonContent: /* @__PURE__ */ jsx36(SubIcon_default, { className: "sb-w-4 sb-h-4 sb-text-white " }),
-      menuContent: /* @__PURE__ */ jsx36(
+      buttonContent: /* @__PURE__ */ jsx37(SubIcon_default, { className: "sb-w-4 sb-h-4 sb-text-white " }),
+      menuContent: /* @__PURE__ */ jsx37(
         "div",
         {
           className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400 && !isTrailer ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
-          children: /* @__PURE__ */ jsxs14("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
-            /* @__PURE__ */ jsxs14("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-center sb-justify-center", children: [
-              /* @__PURE__ */ jsx36(
+          children: /* @__PURE__ */ jsxs15("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
+            /* @__PURE__ */ jsxs15("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-center sb-justify-center", children: [
+              /* @__PURE__ */ jsx37(
                 "button",
                 {
                   onClick: () => {
@@ -1323,14 +1408,14 @@ var SubtitleMenu = ({
                     }
                   },
                   className: "hover:sb-scale-150",
-                  children: /* @__PURE__ */ jsx36(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
+                  children: /* @__PURE__ */ jsx37(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
                 }
               ),
-              /* @__PURE__ */ jsx36("h3", { children: "Subtitle" })
+              /* @__PURE__ */ jsx37("h3", { children: "Subtitle" })
             ] }),
-            /* @__PURE__ */ jsx36("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-            /* @__PURE__ */ jsx36("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: subtitles.map((q, i) => {
-              return /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
+            /* @__PURE__ */ jsx37("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: subtitles.map((q, i) => {
+              return /* @__PURE__ */ jsx37(
                 SubtitleOption,
                 {
                   isSelected: q.mode === "showing",
@@ -1355,7 +1440,7 @@ var SubtitleMenu_default = SubtitleMenu;
 
 // src/components/Tooltip/GlobalTooltip.tsx
 import { useState as useState12 } from "react";
-import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var TooltipModal = ({
   content,
   children,
@@ -1365,13 +1450,13 @@ var TooltipModal = ({
   const [isOpen, setIsOpen] = useState12(false);
   const showTooltip = () => setIsOpen(true);
   const hideTooltip = () => setIsOpen(false);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: "tooltip-container",
       style: { position: "relative", display: "inline-block" },
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "div",
           {
             onMouseEnter: showTooltip,
@@ -1380,7 +1465,7 @@ var TooltipModal = ({
             children
           }
         ),
-        isOpen && /* @__PURE__ */ jsx37(
+        isOpen && /* @__PURE__ */ jsx38(
           "div",
           {
             className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 ? "!sb-bottom-[105%]" : "!sb-top-[105%]"}`,
@@ -1405,7 +1490,7 @@ var TooltipModal = ({
 var GlobalTooltip_default = TooltipModal;
 
 // src/components/ControlBar/index.tsx
-import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
 var ControlBar = ({
   player,
   isPaused,
@@ -1456,67 +1541,64 @@ var ControlBar = ({
   useEffect13(() => {
     setDuration(duration);
   }, [duration]);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: ` !sb-px-4 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full  ${width > 400 && !isTrailer ? "sb-absolute sb-bottom-1 sb-items-end sb-mb-1 sb-pb-2 " : "sb-items-start"} sb-pb-2`,
       children: [
-        /* @__PURE__ */ jsx38(BufferTracker_default, {}),
-        /* @__PURE__ */ jsx38(CurrentTimeTracker_default, {}),
-        !isTrailer && /* @__PURE__ */ jsxs16(Fragment3, { children: [
-          " ",
-          /* @__PURE__ */ jsx38(
-            "button",
-            {
-              onClick: () => {
-                seek(-seekStep);
-              },
-              children: /* @__PURE__ */ jsx38(
-                GlobalTooltip_default,
-                {
-                  width,
-                  content: /* @__PURE__ */ jsx38("p", { children: "Backward 5 sec" }),
-                  isLeft: true,
-                  children: /* @__PURE__ */ jsx38(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx38("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx38(
-            GlobalTooltip_default,
-            {
-              width,
-              content: /* @__PURE__ */ jsx38("p", { children: isPaused ? "Play" : "pause" }),
-              isLeft: true,
-              children: isPaused ? /* @__PURE__ */ jsx38(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx38(PauseIcon_default, { className: "sb-w-3 sb-h-3" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx38(
-            "button",
-            {
-              onClick: (e) => {
-                e.preventDefault();
-                seek(seekStep);
-              },
-              children: /* @__PURE__ */ jsx38(
-                GlobalTooltip_default,
-                {
-                  width,
-                  content: /* @__PURE__ */ jsx38("p", { children: "Forward 5 sec" }),
-                  isLeft: true,
-                  children: /* @__PURE__ */ jsx38(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
-                }
-              )
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx39(BufferTracker_default, {}),
+        /* @__PURE__ */ jsx39(CurrentTimeTracker_default, {}),
+        !isTrailer && /* @__PURE__ */ jsx39(
+          "button",
+          {
+            onClick: () => {
+              seek(-seekStep);
+            },
+            children: /* @__PURE__ */ jsx39(
+              GlobalTooltip_default,
+              {
+                width,
+                content: /* @__PURE__ */ jsx39("p", { children: "Backward 5 sec" }),
+                isLeft: true,
+                children: /* @__PURE__ */ jsx39(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx39("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx39(
+          GlobalTooltip_default,
+          {
+            width,
+            content: /* @__PURE__ */ jsx39("p", { children: isPaused ? "Play" : "pause" }),
+            isLeft: true,
+            children: isPaused ? /* @__PURE__ */ jsx39(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx39(PauseIcon_default, { className: "sb-w-3 sb-h-3" })
+          }
+        ) }),
+        !isTrailer && /* @__PURE__ */ jsx39(
+          "button",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              seek(seekStep);
+            },
+            children: /* @__PURE__ */ jsx39(
+              GlobalTooltip_default,
+              {
+                width,
+                content: /* @__PURE__ */ jsx39("p", { children: "Forward 5 sec" }),
+                isLeft: true,
+                children: /* @__PURE__ */ jsx39(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
+              }
+            )
+          }
+        ),
         // isSeeking ||
         // width > 400 &&
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           "div",
           {
             className: `${width < 400 && !isTrailer ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
-            children: /* @__PURE__ */ jsxs16(
+            children: /* @__PURE__ */ jsxs17(
               "div",
               {
                 style: width < 400 && !isTrailer ? {
@@ -1526,15 +1608,15 @@ var ControlBar = ({
                 } : { width: "98%" },
                 className: `flex gap-2 ${width < 400 && !isTrailer ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
                 children: [
-                  /* @__PURE__ */ jsx38(CurrentTimeLabel_default, {}),
-                  /* @__PURE__ */ jsx38(TimeSliderContainer_default, { chapters, notes }),
-                  /* @__PURE__ */ jsx38("p", { children: durationFormater(duration) })
+                  /* @__PURE__ */ jsx39(CurrentTimeLabel_default, {}),
+                  /* @__PURE__ */ jsx39(TimeSliderContainer_default, { chapters, notes }),
+                  /* @__PURE__ */ jsx39("p", { children: durationFormater(duration) })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx38("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx39(
           VolumeSlider_default,
           {
             isTrailer,
@@ -1544,7 +1626,7 @@ var ControlBar = ({
             handleControlDisplayTimer
           }
         ) }),
-        /* @__PURE__ */ jsx38(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx38("p", { children: "Quality" }), children: /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx39("p", { children: "Quality" }), children: /* @__PURE__ */ jsx39(
           QualityMenu_default,
           {
             isTrailer,
@@ -1555,7 +1637,7 @@ var ControlBar = ({
             }
           }
         ) }),
-        disableNote && /* @__PURE__ */ jsx38(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx38("p", { children: "Create note" }), children: /* @__PURE__ */ jsx38(
+        disableNote && /* @__PURE__ */ jsx39(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx39("p", { children: "Create note" }), children: /* @__PURE__ */ jsx39(
           CreateNoteMenu_default,
           {
             handleSaveNoteAction,
@@ -1570,7 +1652,7 @@ var ControlBar = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx38(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx38("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx39("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx39(
           SubtitleMenu_default,
           {
             isTrailer,
@@ -1581,7 +1663,7 @@ var ControlBar = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx38(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx38("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx39("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx39(
           "button",
           {
             onClick: (e) => {
@@ -1593,7 +1675,7 @@ var ControlBar = ({
                 player == null ? void 0 : player.requestFullscreen();
               }
             },
-            children: /* @__PURE__ */ jsx38(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
+            children: /* @__PURE__ */ jsx39(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
           }
         ) })
       ]
@@ -1606,36 +1688,40 @@ var ControlBar_default = ControlBar;
 import { isEqual } from "lodash";
 
 // src/components/BigPlayButton/index.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
 var BigPlayButton = ({
   player,
   isPaused,
   setIsPaused,
   height,
   id,
-  heightValue
+  heightValue,
+  isLoading
 }) => {
   const togglePlay = () => {
     if (isPaused) player == null ? void 0 : player.play();
     else player == null ? void 0 : player.pause();
     setIsPaused(!isPaused);
   };
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       style: __spreadValues({}, height && heightValue ? { position: "absolute", top: `-${(heightValue - height) / 2}px` } : {}),
       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__ */ jsx39(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx39(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
+      className: ` sb-w-16 sb-h-16 sb-rounded-full ${!isLoading ? "sb-bg-white/30 sb-backdrop-blur-lg" : ""} sb-flex sb-items-center sb-justify-center`,
+      children: isPaused || isLoading ? /* @__PURE__ */ jsxs18("div", { children: [
+        !isLoading && /* @__PURE__ */ jsx40(PlayIcon_default, { className: "sb-w-4 sb-h-4" }),
+        isLoading && /* @__PURE__ */ jsx40(SkillamiIcon_default, { className: " sb-w-16 sb-h-16 sb-animate-spin sb-absolute -sb-top-2 -sb-right-2 " })
+      ] }) : /* @__PURE__ */ jsx40(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
     }
   );
 };
 var BigPlayButton_default = BigPlayButton;
 
 // src/components/VideoPlayerComponent/index.tsx
-import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
 var bigPlayButtonRoot = {};
-var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100", height, heightValue) => {
+var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100", height, heightValue, isLoading) => {
   const container = document.getElementById(`video-container-${id}`);
   if (container) {
     container.style.height = "100%";
@@ -1646,14 +1732,15 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100", h
         bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
       }
       bigPlayButtonRoot[id].render(
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           BigPlayButton_default,
           {
             player,
             isPaused,
             setIsPaused,
             height,
-            heightValue
+            heightValue,
+            isLoading
           }
         )
       );
@@ -1678,7 +1765,7 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
       element.style.height = "100%";
       element.style.alignItems = "flex-end";
       controlBarRoot[id].render(
-        /* @__PURE__ */ jsx40(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx41(
           ControlBar_default,
           {
             id,
@@ -1736,6 +1823,7 @@ var VideoPlayerComponent = forwardRef(
     const [isHovered, setIsHovered] = useState14(false);
     const [isNoteOpen, setNoteOpen] = useState14(false);
     const [heightValue, setHeightValue] = useState14(0);
+    const [isLoading, setIsloading] = useState14(false);
     const onReady = (player) => {
       if (playerRef) {
         playerRef.current = player;
@@ -1885,12 +1973,13 @@ var VideoPlayerComponent = forwardRef(
             setIsPaused,
             opacity,
             height,
-            heightValue
+            heightValue,
+            isLoading
           );
         }, 500);
         return () => clearTimeout(playButtonTimeout);
       }
-    }, [isPaused, opacity, isReady, id, height, heightValue]);
+    }, [isPaused, opacity, isReady, id, height, heightValue, isLoading]);
     useEffect14(() => {
       if (playerRef.current) {
         const intervalId = setInterval(() => {
@@ -2020,7 +2109,27 @@ var VideoPlayerComponent = forwardRef(
     if (controlBar) {
       resizeObserver.observe(controlBar);
     }
-    return /* @__PURE__ */ jsx40(Fragment4, { children: /* @__PURE__ */ jsxs17(
+    function debounce(func, delay) {
+      let timeoutId;
+      return function(arg) {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+          func(arg);
+        }, delay);
+      };
+    }
+    if (playerRef.current) {
+      playerRef.current.on("waiting", function() {
+        console.log("The player is buffering...");
+        debounce((arg) => setIsloading(arg), 300)(true);
+      });
+      playerRef.current.on("playing", function() {
+        debounce((arg) => setIsloading(arg), 300)(false);
+      });
+    }
+    return /* @__PURE__ */ jsx41(Fragment3, { children: /* @__PURE__ */ jsxs19(
       "div",
       {
         ref: videoRefs,
@@ -2032,7 +2141,7 @@ var VideoPlayerComponent = forwardRef(
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          bottomRedBar && /* @__PURE__ */ jsx40(
+          bottomRedBar && /* @__PURE__ */ jsx41(
             "div",
             {
               ref: childRef,
@@ -2043,12 +2152,12 @@ var VideoPlayerComponent = forwardRef(
               }
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41(
             "div",
             {
               className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
               "data-vjs-player": true,
-              children: /* @__PURE__ */ jsx40(
+              children: /* @__PURE__ */ jsx41(
                 "div",
                 {
                   onClick: handlePlayerClick,
@@ -2068,7 +2177,7 @@ var VideoPlayerComponent_default = VideoPlayerComponent;
 // src/components/SoftBuildersVideoPlayer/index.tsx
 import { isEqual as isEqual2 } from "lodash";
 import { v4 as uuidv4 } from "uuid";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = {
   autoplay: false,
   controls: true,
@@ -2137,7 +2246,7 @@ var Component = forwardRef2(
     useEffect15(() => {
       setUuid(uuidv4());
     }, []);
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx42(
       VideoPlayerComponent_default,
       {
         id: uuid,
@@ -2160,7 +2269,7 @@ var Component = forwardRef2(
   }
 );
 var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
-  return isEqual2(prevProps.options, nextProps.options) && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
+  return isEqual2(prevProps.options, nextProps.options) && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime && prevProps.height === nextProps.height;
 });
 var SoftBuildersVideoPlayer_default = SoftBuildersVideoPlayer;