softbuilders-react-video-player 1.1.7 → 1.1.9

package/dist/index.mjs

@@ -31,16 +31,16 @@ var __objRest = (source, exclude) => {
 };
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
-import { memo, useEffect as useEffect15, useState as useState13 } from "react";
+import { memo, useEffect as useEffect15, useState as useState14 } from "react";
 
 // src/components/VideoPlayerComponent/index.tsx
-import { useEffect as useEffect14, useRef as useRef2, useState as useState12 } from "react";
+import { useEffect as useEffect14, useRef as useRef2, useState as useState13 } 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 } from "react";
+import { useEffect as useEffect13, useState as useState12 } from "react";
 
 // src/utils/index.ts
 var durationFormater = (seconds) => {
@@ -163,12 +163,14 @@ var Slider = (_a) => {
     value,
     handleValueChange,
     min = 0,
-    max = 100
+    max = 100,
+    className
   } = _b, rest = __objRest(_b, [
     "value",
     "handleValueChange",
     "min",
-    "max"
+    "max",
+    "className"
   ]);
   return /* @__PURE__ */ jsx3(
     "input",
@@ -178,7 +180,8 @@ var Slider = (_a) => {
       max,
       value,
       onChange: handleValueChange,
-      className: "sb-w-full sb-h-2 sb-bg-transparent sb-bg-opacity-50 sb-rounded-lg sb-appearance-none sb-cursor-pointer sb-range-slider sb-slider-thumb " + rest.className,
+      className: `sb-w-full sb-h-2 sb-bg-transparent sb-bg-opacity-50 sb-rounded-lg sb-appearance-none sb-cursor-pointer sb-range-slider sb-slider-thumb 
+        ${className}`,
       style: {
         background: `linear-gradient(to right, #f97316 ${value}%, #30303070 ${value}%)`
       }
@@ -455,34 +458,59 @@ var UnmuteIcon_default = SvgUnmuteIcon;
 
 // src/components/icons/SubtitlesIcon.tsx
 import { jsx as jsx17, jsxs as jsxs2 } from "react/jsx-runtime";
-var SvgSubtitlesIcon = (props) => /* @__PURE__ */ jsxs2("svg", __spreadProps(__spreadValues({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em" }, props), { children: [
-  /* @__PURE__ */ jsx17(
-    "path",
-    {
-      fill: "#FFF",
-      d: "m78.649 64.733 4.772-.014c4.355-.012 8.711-.012 13.067-.01 4.703 0 9.407-.01 14.11-.02q13.815-.023 27.629-.023 11.23-.001 22.463-.012 31.861-.026 63.724-.025h6.94c18.57.001 37.138-.018 55.707-.046q28.618-.043 57.235-.04c10.706 0 21.413-.006 32.119-.027q13.673-.028 27.347-.009c4.647.006 9.295.007 13.943-.01q6.39-.024 12.783.004 2.303.005 4.605-.012c17.985-.122 33.209 4.858 46.137 17.55 8.927 9.239 14.882 21.979 14.901 34.934l.012 2.976-.003 3.246.01 3.467q.01 5.763.011 11.526l.015 8.254q.02 11.222.024 22.445l.012 14.022q.019 19.423.026 38.845v5.027l.002 5.048v2.53q.009 20.274.046 40.55.035 20.83.037 41.661-.001 11.69.025 23.38.023 9.956.012 19.913-.006 5.075.011 10.15c.013 3.677.007 7.353-.004 11.03l.025 3.206c-.1 15.234-5.618 28.587-16.181 39.571L478 426l-1.71 1.742c-12.91 12.154-30.359 13.722-47.23 13.639q-2.341.005-4.684.014c-4.25.013-8.502.007-12.753-.003-4.6-.007-9.2.004-13.8.012-8.996.013-17.991.01-26.987.002a15973 15973 0 0 0-25.105-.003q-3.18 0-6.358.003c-19.85.008-39.7-.002-59.55-.018a31884 31884 0 0 0-51.037.003 46445 46445 0 0 1-65.678.01l-3.148-.001q-10.951-.003-21.904.009-13.356.013-26.712-.01c-4.539-.008-9.077-.011-13.616-.001q-6.243.013-12.487-.012a631 631 0 0 0-4.493.006c-19.337.087-36.076-3.874-50.342-17.72-11.99-13.314-15.732-28.763-15.667-46.265l-.011-3.376c-.01-3.706-.007-7.412-.003-11.118q-.007-4.003-.015-8.006-.018-9.72-.012-19.439.002-7.905-.005-15.812l-.001-2.28-.004-4.584q-.014-21.467-.003-42.935c.006-13.068-.006-26.137-.025-39.205q-.03-20.168-.024-40.336.005-11.307-.014-22.614-.019-9.625-.002-19.252.01-4.903-.005-9.806c-.063-21.392.482-40.17 16.182-56.468L33 80l1.64-1.707C46.883 66.577 62.55 64.697 78.65 64.733M57 111c-3.615 5.55-3.427 10.594-3.394 16.994l-.019 3.364c-.017 3.722-.012 7.443-.007 11.165q-.01 4.002-.026 8.003c-.02 6.495-.025 12.99-.023 19.485a9577 9577 0 0 1-.017 20.405l-.003 2.295c-.019 14.32-.018 28.641-.01 42.961.005 13.096-.016 26.191-.05 39.287q-.05 20.178-.043 40.355c.002 7.55-.003 15.1-.028 22.65q-.033 9.641-.006 19.283.016 4.917-.01 9.834c-.019 3.558-.006 7.114.015 10.671l-.038 3.124c.093 7.623 1.84 12.297 7.234 17.703 6.322 4.896 14.068 4.11 21.659 4.042q2.337.007 4.673.02c4.269.017 8.537.003 12.806-.017 4.608-.015 9.216-.002 13.824.008 9.023.015 18.044.002 27.067-.02 10.505-.023 21.01-.021 31.516-.019 18.742.004 37.484-.017 56.226-.051q27.285-.05 54.569-.041 29.71.012 59.42-.015l3.173-.004 6.31-.006q10.986-.009 21.973-.006 13.386.003 26.77-.032c4.554-.012 9.107-.019 13.66-.013q6.252.006 12.502-.023 2.264-.008 4.526.001c2.05.007 4.098-.004 6.147-.02l3.45-.005c6.13-.735 10.246-3.731 14.154-8.378 3.27-6.025 3.426-11.188 3.381-17.962l.014-3.318c.012-3.663.003-7.326-.007-10.99q.007-3.942.016-7.885c.013-6.395.01-12.79.002-19.185a8074 8074 0 0 1-.003-17.841q0-2.258.003-4.514c.008-14.102-.002-28.204-.018-42.306q-.018-18.139.003-36.278a23436 23436 0 0 0 .01-46.65l-.001-2.235q-.003-7.785.009-15.572.014-10.484-.015-20.972-.006-3.847.004-7.696c.008-3.502-.002-7.004-.017-10.507l.02-3.075c-.055-6.664-.708-12.636-5.014-18.037l-1.7-1.352-1.675-1.398c-4.658-2.84-9.18-3.477-14.556-3.481-1.96-.01-1.96-.01-3.96-.018l-4.33.011-4.617-.011c-4.226-.01-8.452-.008-12.677-.004-4.559.002-9.117-.007-13.675-.014q-13.395-.018-26.788-.012a26146 26146 0 0 1-31.19-.01q-29.507-.013-59.014-.003c-18.001.006-36.002-.006-54.003-.025q-27.72-.03-55.438-.024c-10.376.002-20.753 0-31.13-.014q-13.248-.019-26.498-.002-6.76.011-13.521-.005-6.189-.015-12.378.007-2.239.004-4.478-.008c-10.356-.052-17.722-.02-24.759 8.386"
-    }
-  ),
-  /* @__PURE__ */ jsx17(
-    "path",
-    {
-      fill: "#FFF",
-      d: "M211.594 166.027C225.564 177.95 232.89 192.341 237 210v15h-38l-2-12c-3.428-9.924-9.002-16.527-18.25-21.375-8.317-3.952-19.394-4.22-28.062-1.187C141.226 194.932 134.624 202.24 131 212c-1.17 3.683-1.154 7.207-1.193 11.057l-.025 2.13q-.035 3.484-.055 6.97l-.017 2.417q-.039 6.342-.06 12.685-.02 5.22-.082 10.44c-.05 4.218-.074 8.437-.081 12.657a438 438 0 0 1-.046 4.793c-.172 12.03 1.188 23.276 9.907 32.394 7.225 6.372 16.431 10.19 26.16 9.809 8.312-1.173 15.45-3.473 21.492-9.352h2l.75-1.625c1.25-2.375 1.25-2.375 3.188-5 4.139-6.774 5.081-13.528 6.062-21.375h38c0 21.963-4.801 38.798-20.363 54.422L214 337l-1.918 2.016c-13.517 13.248-32.973 17.296-51.127 17.296-18.978-.262-36.43-7.932-49.955-21.312-16.343-18.293-21.143-37.855-21.203-61.969l-.009-2.324q-.022-6.097-.028-12.193c-.006-4.15-.03-8.301-.058-12.451a1811 1811 0 0 1-.026-9.7q-.004-2.29-.024-4.582c-.185-22.871 5.05-43.382 21.063-60.465 27.59-27.967 70.078-29.363 100.879-5.289M391 162.5a300 300 0 0 1 4 3.5l2 1.54c13.042 10.34 22.013 28.145 24 44.46v13h-38l-3-14c-4.092-9.822-9.492-15.253-19-20-8.913-3.553-18.759-3.316-27.625.25-9.012 4.09-14.51 10.719-18.187 19.813-2.989 7.986-2.348 17.084-2.356 25.457l-.01 3.922q-.009 4.095-.007 8.192c0 3.47-.014 6.939-.031 10.408-.014 3.347-.013 6.693-.014 10.04l-.022 3.729c.035 13.571 1.681 25.006 11.057 35.294 7.318 6.316 16.193 9.264 25.738 9.106 9.753-.837 18.156-5.38 24.77-12.524 5.983-7.59 7.067-14.967 8.687-24.687h38c0 20.87-4.852 37.261-19 53l-1.57 1.852c-10.837 11.926-28.103 20.027-44.063 21.37-21.875.91-40.916-3.117-57.91-17.921-13.741-12.868-23.846-30.701-24.597-49.89a557 557 0 0 1-.021-4.03l-.015-2.24q-.021-3.648-.027-7.297l-.009-2.538q-.022-6.658-.028-13.315c-.006-4.547-.03-9.095-.058-13.642a2163 2163 0 0 1-.026-10.584q-.004-2.512-.024-5.023c-.175-23.795 5.888-42.815 22.536-60.43C321.02 145.335 363.02 141.156 391 162.5"
-    }
-  )
-] }));
-var SubtitlesIcon_default = SvgSubtitlesIcon;
 
-// src/components/VolumeSlider/index.tsx
+// src/components/icons/SubIcon.tsx
 import { jsx as jsx18, jsxs as jsxs3 } from "react/jsx-runtime";
+var SvgSubIcon = (props) => /* @__PURE__ */ jsxs3(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 15 15"
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsx18(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          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__ */ jsx18(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          d: "M6.563 5.625H6.25c-.582 0-.874 0-1.103.095a1.25 1.25 0 0 0-.677.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .677.677c.23.095.52.095 1.103.095h.313m4.062-3.75h-.312c-.583 0-.874 0-1.104.095a1.25 1.25 0 0 0-.676.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .676.677c.23.095.521.095 1.104.095h.312"
+        }
+      )
+    ]
+  })
+);
+var SubIcon_default = SvgSubIcon;
+
+// src/components/VolumeSlider/index.tsx
+import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
 var MIN = 0;
 var MAX = 100;
-var VolumeSlider = ({}) => {
+var VolumeSlider = ({ width }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
+  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);
   }, [player]);
+  const toggleVisiblity = () => {
+    setVisible((prev) => !prev);
+  };
   const handleValueChange = (e) => {
     const newVolume = Number(e.target.value);
     setVolume(newVolume);
@@ -493,18 +521,48 @@ var VolumeSlider = ({}) => {
       player == null ? void 0 : player.muted(false);
     }
   };
-  return /* @__PURE__ */ jsxs3("div", { className: "sb-flex sb-items-center sb-gap-2", children: [
-    volume === 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx18(MuteIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx18(UnmuteIcon_default, { className: "sb-w-3 sb-h-3" }),
-    /* @__PURE__ */ jsx18(
-      Slider_default,
-      {
-        value: volume,
-        handleValueChange,
-        min: MIN,
-        max: MAX
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `sb-flex  sb-flex-col-reverse ${width > 600 ? "!sb-flex-row !sb-items-end" : ""} sb-items-center sb-justify-start sb-gap-2 sb-h-full`,
+      children: [
+        /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: `sb-flex sb-relative ${width > 600 ? "" : ""} sb-top-1 sb-items-end`,
+            onClick: toggleVisiblity,
+            children: volume === 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
+              MuteIcon_default,
+              {
+                className: `sb-w-3 sb-h-3 ${width > 600 ? " " : ""}  sb-h-5 sb-w-5`
+              }
+            ) : /* @__PURE__ */ jsx19(
+              UnmuteIcon_default,
+              {
+                className: `sb-w-3 sb-h-3 ${width > 600 ? "" : ""} sb-h-5 sb-w-5`
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: `${isVisible && width < 600 ? " sb-w-[22px]" : !isVisible && width < 600 ? "sb-hidden" : ""}   -sb-rotate-90 -sb-translate-y-2 sb-relative ${width > 600 ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : "sb-translate-y-0"}`,
+            children: /* @__PURE__ */ jsx19(
+              Slider_default,
+              {
+                value: volume,
+                handleValueChange,
+                min: MIN,
+                max: MAX,
+                className: "!sb-w-16"
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
 };
 var VolumeSlider_default = VolumeSlider;
 
@@ -513,7 +571,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 jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
 var MenuButton = ({ buttonContent, menuContent, close }) => {
   const [isOpen, setIsOpen] = useState3(false);
   const buttonRef = useRef(null);
@@ -534,8 +592,8 @@ var MenuButton = ({ buttonContent, menuContent, close }) => {
   useEffect3(() => {
     if (close) close(closeMenu);
   }, [close, closeMenu]);
-  return /* @__PURE__ */ jsxs4("div", { className: "sb-relative", children: [
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs5("div", { className: "sb-relative  sb-flex sb-items-end", children: [
+    /* @__PURE__ */ jsx20(
       "button",
       {
         ref: buttonRef,
@@ -546,7 +604,7 @@ var MenuButton = ({ buttonContent, menuContent, close }) => {
         children: buttonContent
       }
     ),
-    isOpen && /* @__PURE__ */ jsx19(
+    isOpen && /* @__PURE__ */ jsx20(
       "div",
       {
         ref: menuRef,
@@ -562,15 +620,15 @@ var MenuButton = ({ buttonContent, menuContent, close }) => {
 var MenuButton_default = MenuButton;
 
 // src/components/QualityMenu/index.tsx
-import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
 var QualityOption = ({
   isSelected,
   quality,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx20("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick, children: /* @__PURE__ */ jsxs5("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
-    /* @__PURE__ */ jsx20("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx20(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx20("div", {}) }),
-    /* @__PURE__ */ jsx20("p", { className: "sb-text-left sb-col-span-9", children: quality.label })
+  return /* @__PURE__ */ jsx21("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick, children: /* @__PURE__ */ jsxs6("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
+    /* @__PURE__ */ jsx21("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx21(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx21("div", {}) }),
+    /* @__PURE__ */ jsx21("p", { className: "sb-text-left sb-col-span-9", children: quality.label })
   ] }) });
 };
 var QualityMenu = ({}) => {
@@ -594,13 +652,13 @@ var QualityMenu = ({}) => {
       setCurrentQualitySrc(quality.src);
     }
   }, [player]);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     MenuButton_default,
     {
-      buttonContent: /* @__PURE__ */ jsx20(SettingsIcon_default, { className: "sb-w-3 sb-h-3" }),
-      menuContent: /* @__PURE__ */ jsx20("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: /* @__PURE__ */ jsxs5("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [
-          /* @__PURE__ */ jsx20(
+      buttonContent: /* @__PURE__ */ jsx21(SettingsIcon_default, { className: "sb-w-3 sb-h-3" }),
+      menuContent: /* @__PURE__ */ jsx21("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: /* @__PURE__ */ jsxs6("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2", children: [
+          /* @__PURE__ */ jsx21(
             "button",
             {
               onClick: () => {
@@ -609,14 +667,14 @@ var QualityMenu = ({}) => {
                 }
               },
               className: "hover:sb-scale-150",
-              children: /* @__PURE__ */ jsx20(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
+              children: /* @__PURE__ */ jsx21(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
             }
           ),
-          /* @__PURE__ */ jsx20("h3", { children: "Quality" })
+          /* @__PURE__ */ jsx21("h3", { children: "Quality" })
         ] }),
-        /* @__PURE__ */ jsx20("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-        /* @__PURE__ */ jsx20("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: qualities.map((q, i) => {
-          return /* @__PURE__ */ jsx20(
+        /* @__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(
             QualityOption,
             {
               isSelected: currentQualitySrc === q.src,
@@ -648,7 +706,7 @@ var QualityMenu_default = QualityMenu;
 
 // src/components/CreateNoteMenu/index.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
 var CreateNoteMenu = ({ handleSaveNoteAction }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [note, setNote] = useState5("");
@@ -664,15 +722,15 @@ var CreateNoteMenu = ({ handleSaveNoteAction }) => {
       );
     }
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     MenuButton_default,
     {
-      buttonContent: /* @__PURE__ */ jsx21(ClosedNoteIcon_default, { className: "sb-w-3 sb-h-3" }),
-      menuContent: /* @__PURE__ */ jsx21("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[220px]", children: /* @__PURE__ */ jsxs6("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
-        /* @__PURE__ */ jsx21("h3", { className: "sb-px-5", children: "Add Note" }),
-        /* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-        /* @__PURE__ */ jsxs6("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start", children: [
-          /* @__PURE__ */ jsx21(
+      buttonContent: /* @__PURE__ */ jsx22(ClosedNoteIcon_default, { className: "sb-w-3 sb-h-3" }),
+      menuContent: /* @__PURE__ */ jsx22("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[220px]", children: /* @__PURE__ */ jsxs7("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
+        /* @__PURE__ */ jsx22("h3", { className: "sb-px-5", children: "Add Note" }),
+        /* @__PURE__ */ jsx22("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
+        /* @__PURE__ */ jsxs7("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start", children: [
+          /* @__PURE__ */ jsx22(
             "input",
             {
               name: "note",
@@ -684,7 +742,7 @@ var CreateNoteMenu = ({ handleSaveNoteAction }) => {
               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__ */ jsx21("button", { className: "sb-w-full", onClick: handleSaveNote, children: /* @__PURE__ */ jsx21("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md", children: "Save" }) })
+          /* @__PURE__ */ jsx22("button", { className: "sb-w-full", onClick: handleSaveNote, children: /* @__PURE__ */ jsx22("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md", children: "Save" }) })
         ] })
       ] }) })
     }
@@ -699,15 +757,15 @@ import { useEffect as useEffect6, useState as useState7 } from "react";
 import { useEffect as useEffect5, useState as useState6 } from "react";
 
 // src/components/Tooltip/index.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Tooltip = ({ open, children }) => {
   if (!open) return null;
-  return /* @__PURE__ */ jsx22("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", children });
+  return /* @__PURE__ */ jsx23("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", children });
 };
 var Tooltip_default = Tooltip;
 
 // src/components/NoteTooltip/index.tsx
-import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
 var NoteTooltip = ({ note }) => {
   const [open, setOpen] = useState6(false);
   const { currentTime } = useSoftBuildersVideoPlayerContext();
@@ -719,16 +777,16 @@ var NoteTooltip = ({ note }) => {
       }, 5e3);
     }
   }, [currentTime, note.time]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: "sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30",
       style: { left: `${note.percentage}%` },
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
-      children: /* @__PURE__ */ jsx23("div", { className: "sb-relative", children: /* @__PURE__ */ jsx23(Tooltip_default, { open, children: /* @__PURE__ */ jsxs7("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [
-        /* @__PURE__ */ jsx23("p", { children: note.label }),
-        /* @__PURE__ */ jsx23("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: durationFormater(note.time) })
+      children: /* @__PURE__ */ jsx24("div", { className: "sb-relative", children: /* @__PURE__ */ jsx24(Tooltip_default, { open, children: /* @__PURE__ */ jsxs8("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [
+        /* @__PURE__ */ jsx24("p", { children: note.label }),
+        /* @__PURE__ */ jsx24("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: durationFormater(note.time) })
       ] }) }) })
     }
   );
@@ -736,7 +794,7 @@ var NoteTooltip = ({ note }) => {
 var NoteTooltip_default = NoteTooltip;
 
 // src/components/NotesPanal/index.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var NotesPanal = ({ notes }) => {
   const [ns, setNs] = useState7([]);
   const { duration } = useSoftBuildersVideoPlayerContext();
@@ -749,7 +807,7 @@ var NotesPanal = ({ notes }) => {
     });
     setNs(newNs);
   }, [notes, duration]);
-  return /* @__PURE__ */ jsx24("div", { id: "notes-panal", className: "sb-w-full sb-h-full sb-relative ", children: ns.map((n, i) => /* @__PURE__ */ jsx24(NoteTooltip_default, { note: n }, `note-${i}-${n.time}`)) });
+  return /* @__PURE__ */ jsx25("div", { id: "notes-panal", className: "sb-w-full sb-h-full sb-relative ", children: ns.map((n, i) => /* @__PURE__ */ jsx25(NoteTooltip_default, { note: n }, `note-${i}-${n.time}`)) });
 };
 var NotesPanal_default = NotesPanal;
 
@@ -758,7 +816,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 jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var ChapterTooltip = ({ chapter }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [open, setOpen] = useState8(false);
@@ -774,7 +832,7 @@ var ChapterTooltip = ({ chapter }) => {
   const handleClickChapter = () => {
     player == null ? void 0 : player.currentTime(chapter.startTime);
   };
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       id: `ii-section-${chapter.title}`,
@@ -785,15 +843,15 @@ var ChapterTooltip = ({ chapter }) => {
       },
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx26(
         "button",
         {
           id: `section-${chapter.title}`,
           className: "sb-h-full sb-w-full",
           onClick: handleClickChapter,
-          children: /* @__PURE__ */ jsx25("div", { className: "sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center", children: /* @__PURE__ */ jsx25(Tooltip_default, { open, children: /* @__PURE__ */ jsxs8("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [
-            /* @__PURE__ */ jsx25("p", { children: chapter.title }),
-            /* @__PURE__ */ jsxs8("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: [
+          children: /* @__PURE__ */ jsx26("div", { className: "sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center", children: /* @__PURE__ */ jsx26(Tooltip_default, { open, children: /* @__PURE__ */ jsxs9("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [
+            /* @__PURE__ */ jsx26("p", { children: chapter.title }),
+            /* @__PURE__ */ jsxs9("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: [
               durationFormater(chapter.startTime),
               " -",
               " ",
@@ -808,7 +866,7 @@ var ChapterTooltip = ({ chapter }) => {
 var ChapterTooltip_default = ChapterTooltip;
 
 // src/components/ChaptersPanal/index.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ChaptersPanal = ({ chapters }) => {
   const [cs, setCs] = useState9([]);
   const { duration } = useSoftBuildersVideoPlayerContext();
@@ -823,13 +881,13 @@ var ChaptersPanal = ({ chapters }) => {
     });
     setCs(newCs);
   }, [chapters, duration]);
-  return /* @__PURE__ */ jsx26("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative ", children: cs.map((c, i) => /* @__PURE__ */ jsx26(ChapterTooltip_default, { chapter: c }, `chapter-${i}-${c.startTime}`)) });
+  return /* @__PURE__ */ jsx27("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative ", children: cs.map((c, i) => /* @__PURE__ */ jsx27(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 jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
 var MIN2 = 0;
 var MAX2 = 100;
 var DEFERENCE = Math.abs(MAX2 - MIN2);
@@ -869,8 +927,8 @@ var TimeSlider = ({ chapters }) => {
     arr.push(`black 100%`);
     setMaskCuttes(arr.toString());
   }, [chapters, duration]);
-  return /* @__PURE__ */ jsxs9("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center", children: [
-    /* @__PURE__ */ jsx27("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10", children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs10("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center", children: [
+    /* @__PURE__ */ jsx28("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10", children: /* @__PURE__ */ jsx28(
       Slider_default,
       {
         value: timeSlider,
@@ -882,7 +940,7 @@ var TimeSlider = ({ chapters }) => {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       "div",
       {
         className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md",
@@ -912,24 +970,24 @@ var TimeSlider = ({ chapters }) => {
 var TimeSlider_default = TimeSlider;
 
 // src/components/TimeSliderContainer/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 TimeSliderContainer = ({ notes, chapters }) => {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       id: "time-slider-container",
       className: "sb-w-full sb-relative sb-flex sb-items-center sb-justify-center",
       children: [
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           "div",
           {
             id: "notes-panal",
             className: "sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0",
-            children: /* @__PURE__ */ jsx28(NotesPanal_default, { notes })
+            children: /* @__PURE__ */ jsx29(NotesPanal_default, { notes })
           }
         ),
-        /* @__PURE__ */ jsx28("div", { className: "sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0", children: /* @__PURE__ */ jsx28(ChaptersPanal_default, { chapters }) }),
-        /* @__PURE__ */ jsx28(TimeSlider_default, { chapters })
+        /* @__PURE__ */ jsx29("div", { className: "sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0", children: /* @__PURE__ */ jsx29(ChaptersPanal_default, { chapters }) }),
+        /* @__PURE__ */ jsx29(TimeSlider_default, { chapters })
       ]
     }
   );
@@ -938,7 +996,7 @@ var TimeSliderContainer_default = TimeSliderContainer;
 
 // src/components/BufferTracker/index.tsx
 import { useEffect as useEffect10 } from "react";
-import { Fragment, jsx as jsx29 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx30 } from "react/jsx-runtime";
 var BufferTracker = () => {
   const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
   useEffect10(() => {
@@ -947,13 +1005,13 @@ var BufferTracker = () => {
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx29(Fragment, {});
+  return /* @__PURE__ */ jsx30(Fragment, {});
 };
 var BufferTracker_default = BufferTracker;
 
 // src/components/CurrentTimeTracker/index.tsx
 import { useEffect as useEffect11 } from "react";
-import { Fragment as Fragment2, jsx as jsx30 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx31 } from "react/jsx-runtime";
 var CurrentTimeTracker = () => {
   const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
   useEffect11(() => {
@@ -962,21 +1020,21 @@ var CurrentTimeTracker = () => {
     }, 500);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx30(Fragment2, {});
+  return /* @__PURE__ */ jsx31(Fragment2, {});
 };
 var CurrentTimeTracker_default = CurrentTimeTracker;
 
 // src/components/SubtitleMenu/index.tsx
 import { useEffect as useEffect12, useState as useState11 } from "react";
-import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 var SubtitleOption = ({
   isSelected,
   subtitle,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx31("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick, children: /* @__PURE__ */ jsxs11("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
-    /* @__PURE__ */ jsx31("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx31(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx31("div", {}) }),
-    /* @__PURE__ */ jsx31("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })
+  return /* @__PURE__ */ jsx32("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick, children: /* @__PURE__ */ jsxs12("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
+    /* @__PURE__ */ jsx32("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx32(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx32("div", {}) }),
+    /* @__PURE__ */ jsx32("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })
   ] }) });
 };
 var SubtitleMenu = ({}) => {
@@ -1001,13 +1059,13 @@ var SubtitleMenu = ({}) => {
       setSubtitles(textTracks);
     }
   }, [player]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     MenuButton_default,
     {
-      buttonContent: /* @__PURE__ */ jsx31(SubtitlesIcon_default, { className: "sb-w-3 sb-h-3" }),
-      menuContent: /* @__PURE__ */ jsx31("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: /* @__PURE__ */ jsxs11("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [
-          /* @__PURE__ */ jsx31(
+      buttonContent: /* @__PURE__ */ jsx32(SubIcon_default, { className: "sb-w-4 sb-h-4 sb-text-white " }),
+      menuContent: /* @__PURE__ */ jsx32("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: /* @__PURE__ */ jsxs12("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [
+          /* @__PURE__ */ jsx32(
             "button",
             {
               onClick: () => {
@@ -1016,14 +1074,14 @@ var SubtitleMenu = ({}) => {
                 }
               },
               className: "hover:sb-scale-150",
-              children: /* @__PURE__ */ jsx31(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
+              children: /* @__PURE__ */ jsx32(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
             }
           ),
-          /* @__PURE__ */ jsx31("h3", { children: "Subtitle" })
+          /* @__PURE__ */ jsx32("h3", { children: "Subtitle" })
         ] }),
-        /* @__PURE__ */ jsx31("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-        /* @__PURE__ */ jsx31("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: subtitles.map((q, i) => {
-          return /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
+        /* @__PURE__ */ jsx32("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: subtitles.map((q, i) => {
+          return /* @__PURE__ */ jsx32(
             SubtitleOption,
             {
               isSelected: q.mode === "showing",
@@ -1045,7 +1103,7 @@ var SubtitleMenu = ({}) => {
 var SubtitleMenu_default = SubtitleMenu;
 
 // src/components/ControlBar/index.tsx
-import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 var ControlBar = ({
   player,
   isPaused,
@@ -1054,13 +1112,27 @@ var ControlBar = ({
   notes,
   chapters,
   seekStep = 5,
+  id,
   handleSaveNoteAction
 }) => {
   const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
+  const [width, setwidth] = useState12(null);
   const seek = (duration2) => {
     const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
     player == null ? void 0 : player.currentTime(currentTime + duration2);
   };
+  const container = document.getElementById(`video-container-${id}`);
+  function handleWidthChange(width2) {
+    setwidth(width2);
+    console.log(width2);
+  }
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (let entry of entries) {
+      const currentWidth = entry.contentRect.width;
+      handleWidthChange(currentWidth);
+    }
+  });
+  resizeObserver.observe(container);
   const togglePlay = () => {
     if (isPaused) player == null ? void 0 : player.play();
     else player == null ? void 0 : player.pause();
@@ -1072,34 +1144,34 @@ var ControlBar = ({
   useEffect13(() => {
     setDuration(duration);
   }, [duration]);
-  return /* @__PURE__ */ jsxs12("div", { className: "sb-flex sb-items-center sb-justify-center sb-gap-3 sb-w-full", children: [
-    /* @__PURE__ */ jsx32(BufferTracker_default, {}),
-    /* @__PURE__ */ jsx32(CurrentTimeTracker_default, {}),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs13("div", { className: " sb-px-2 sb-flex  sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end pb-2", children: [
+    /* @__PURE__ */ jsx33(BufferTracker_default, {}),
+    /* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
+    /* @__PURE__ */ jsx33(
       "button",
       {
         onClick: () => {
           seek(-seekStep);
         },
-        children: /* @__PURE__ */ jsx32(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
+        children: /* @__PURE__ */ jsx33(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
       }
     ),
-    /* @__PURE__ */ jsx32("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx32(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx32(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) }),
-    /* @__PURE__ */ jsx32(
+    /* @__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(
       "button",
       {
         onClick: () => {
           seek(seekStep);
         },
-        children: /* @__PURE__ */ jsx32(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
+        children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
       }
     ),
-    /* @__PURE__ */ jsx32(CurrentTimeLabel_default, {}),
-    /* @__PURE__ */ jsx32("div", { className: "sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500", children: /* @__PURE__ */ jsx32(TimeSliderContainer_default, { chapters, notes }) }),
-    /* @__PURE__ */ jsx32("p", { children: durationFormater(duration) }),
-    /* @__PURE__ */ jsx32("div", { className: "sb-w-[10%]", children: /* @__PURE__ */ jsx32(VolumeSlider_default, {}) }),
-    /* @__PURE__ */ jsx32(QualityMenu_default, {}),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(CurrentTimeLabel_default, {}),
+    /* @__PURE__ */ jsx33("div", { className: "sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500", children: /* @__PURE__ */ jsx33(TimeSliderContainer_default, { chapters, notes }) }),
+    /* @__PURE__ */ jsx33("p", { children: durationFormater(duration) }),
+    /* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(VolumeSlider_default, { width }) }),
+    /* @__PURE__ */ jsx33(QualityMenu_default, {}),
+    /* @__PURE__ */ jsx33(
       "button",
       {
         onClick: () => {
@@ -1109,29 +1181,29 @@ var ControlBar = ({
             player == null ? void 0 : player.requestFullscreen();
           }
         },
-        children: /* @__PURE__ */ jsx32(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
+        children: /* @__PURE__ */ jsx33(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
       }
     ),
-    handleSaveNoteAction && /* @__PURE__ */ jsx32(CreateNoteMenu_default, { handleSaveNoteAction }),
-    /* @__PURE__ */ jsx32(SubtitleMenu_default, {})
+    handleSaveNoteAction && /* @__PURE__ */ jsx33(CreateNoteMenu_default, { handleSaveNoteAction }),
+    /* @__PURE__ */ jsx33(SubtitleMenu_default, {})
   ] });
 };
 var ControlBar_default = ControlBar;
 
 // src/components/BigPlayButton/index.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } 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__ */ jsx33("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx33("div", { 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__ */ jsx33(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx33(PauseIcon_default, { className: "sb-w-4 sb-h-4" }) }) });
+  return /* @__PURE__ */ jsx34("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx34("div", { 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" }) }) });
 };
 var BigPlayButton_default = BigPlayButton;
 
 // src/components/VideoPlayerComponent/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var bigPlayButtonRoot = {};
 var renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
   const container = document.getElementById(`video-container-${id}`);
@@ -1142,7 +1214,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
         bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
       }
       bigPlayButtonRoot[id].render(
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           BigPlayButton_default,
           {
             player,
@@ -1163,11 +1235,14 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
       if (!controlBarRoot[id]) {
         controlBarRoot[id] = ReactDOM.createRoot(element);
       }
-      element.style.display = "block";
+      element.style.display = "flex";
+      element.style.height = "100%";
+      element.style.alignItems = "flex-end";
       controlBarRoot[id].render(
-        /* @__PURE__ */ jsx34(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx35(
           ControlBar_default,
           {
+            id,
             player,
             isPaused,
             setIsPaused,
@@ -1189,14 +1264,15 @@ var VideoPlayerComponent = ({
   chapters,
   startTime = 0,
   handleSaveNoteAction,
+  poster,
   onPlay,
   onPause
 }) => {
   const videoRef = useRef2(void 0);
   const playerRef = useRef2(void 0);
-  const [isReady, setIsReady] = useState12(false);
-  const [isPaused, setIsPaused] = useState12(!options.autoplay);
-  const [duration, setDuratoin] = useState12(1);
+  const [isReady, setIsReady] = useState13(false);
+  const [isPaused, setIsPaused] = useState13(!options.autoplay);
+  const [duration, setDuratoin] = useState13(1);
   const onReady = (player) => {
     if (playerRef) {
       playerRef.current = player;
@@ -1218,32 +1294,33 @@ var VideoPlayerComponent = ({
     if (!playerRef.current) {
       const videoElement = document.createElement("video-js");
       videoElement.classList.add("vjs-big-play-centered");
+      if (poster) {
+        videoElement.setAttribute("poster", poster);
+      }
       videoRef.current.appendChild(videoElement);
       playerRef.current = videojs(videoElement, options, () => {
         onReady(playerRef.current);
       });
     }
     return () => {
-      if (playerRef) {
-        if (playerRef.current) {
-          playerRef.current.dispose();
-          playerRef.current = void 0;
-          setTimeout(() => {
-            if (bigPlayButtonRoot[id]) {
-              bigPlayButtonRoot[id].unmount();
-              bigPlayButtonRoot[id] = void 0;
-            }
-            if (controlBarRoot[id]) {
-              controlBarRoot[id].unmount();
-              controlBarRoot[id] = void 0;
-            }
-          }, 0);
-        }
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = void 0;
+        setTimeout(() => {
+          if (bigPlayButtonRoot[id]) {
+            bigPlayButtonRoot[id].unmount();
+            bigPlayButtonRoot[id] = void 0;
+          }
+          if (controlBarRoot[id]) {
+            controlBarRoot[id].unmount();
+            controlBarRoot[id] = void 0;
+          }
+        }, 0);
       }
     };
-  }, [options]);
+  }, [options, poster]);
   useEffect14(() => {
-    if (playerRef && (playerRef == null ? void 0 : playerRef.current) && isReady) {
+    if (playerRef.current && isReady) {
       const currentTime = playerRef.current.currentTime() || 0;
       if (isPaused) {
         if (onPause) onPause(currentTime);
@@ -1281,7 +1358,7 @@ var VideoPlayerComponent = ({
     duration
   ]);
   useEffect14(() => {
-    if (isReady && playerRef) {
+    if (isReady) {
       const playButtonTimeout = setTimeout(() => {
         renderBigPlayButton(id, playerRef.current, isPaused, setIsPaused);
       }, 500);
@@ -1289,28 +1366,37 @@ var VideoPlayerComponent = ({
     }
   }, [id, isPaused, isReady]);
   useEffect14(() => {
-    if (playerRef) {
-      if (playerRef.current) {
-        const intervalId = setInterval(() => {
-          setIsPaused(playerRef.current.paused());
-        }, 500);
-        return () => clearInterval(intervalId);
-      }
+    if (playerRef.current) {
+      const intervalId = setInterval(() => {
+        if (playerRef.current) setIsPaused(playerRef.current.paused());
+      }, 500);
+      return () => clearInterval(intervalId);
     }
   }, []);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       id: `video-container-${id}`,
       className: "sb-relative sb-rounded-md sb-overflow-hidden",
-      children: /* @__PURE__ */ jsx34("div", { "data-vjs-player": true, children: /* @__PURE__ */ jsx34("div", { ref: videoRef }) })
+      children: /* @__PURE__ */ jsx35(
+        "div",
+        {
+          "data-vjs-player": true,
+          style: {
+            height: "100%",
+            // Adjust height as needed
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsx35("div", { ref: videoRef })
+        }
+      )
     }
   );
 };
 var VideoPlayerComponent_default = VideoPlayerComponent;
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = {
   autoplay: false,
   controls: true,
@@ -1345,7 +1431,7 @@ var Component = ({
   if (options.muted === void 0) options.muted = 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] = useState13([]);
+  const [tracks, setTracks] = useState14([]);
   useEffect15(() => {
     const getTracks = async () => {
       const newTracks = [];
@@ -1364,13 +1450,14 @@ var Component = ({
     getTracks();
   }, [options.tracks]);
   const id = (Date.now() + Math.random() * 100).toString();
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     VideoPlayerComponent_default,
     {
       id,
       chapters,
       options: __spreadProps(__spreadValues({}, options), { tracks }),
       notes,
+      poster: "",
       startTime,
       handleSaveNoteAction,
       onPause,