softbuilders-react-video-player 1.2.13 → 1.2.15

package/dist/index.mjs

@@ -352,31 +352,6 @@ var LeftArrowIcon_default = SvgLeftArrowIcon;
 
 // src/components/icons/MuteIcon.tsx
 import { jsx as jsx10, jsxs } from "react/jsx-runtime";
-var SvgMuteIcon = (props) => /* @__PURE__ */ jsxs(
-  "svg",
-  __spreadProps(__spreadValues({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 17 13"
-  }, props), {
-    children: [
-      /* @__PURE__ */ jsx10("path", { fill: "#FFF", d: "M7.925 1.5 4.59 4.357H1.925v4.286H4.59L7.925 11.5z" }),
-      /* @__PURE__ */ jsx10(
-        "path",
-        {
-          stroke: "#E5E7EB",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "m15.925 4.357-4 4.286m0-4.286 4 4.286m-8-7.143L4.59 4.357H1.925v4.286H4.59L7.925 11.5z"
-        }
-      )
-    ]
-  })
-);
-var MuteIcon_default = SvgMuteIcon;
 
 // src/components/icons/NoteIcon.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -447,58 +422,32 @@ var SvgSettingsIcon = (props) => /* @__PURE__ */ jsx15(
 );
 var SettingsIcon_default = SvgSettingsIcon;
 
-// src/components/icons/UnmuteIcon.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var SvgUnmuteIcon = (props) => /* @__PURE__ */ jsx16(
-  "svg",
-  __spreadProps(__spreadValues({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 8 15"
-  }, props), {
-    children: /* @__PURE__ */ jsx16(
-      "path",
-      {
-        fill: "#FFF",
-        d: "M7.659 14.275h-.001l-3.979-3.251a.16.16 0 0 0-.104-.035H2.252A1.33 1.33 0 0 1 .924 9.66V5.32A1.33 1.33 0 0 1 2.252 3.99h1.323a.16.16 0 0 0 .101-.035L7.66.725a.163.163 0 0 1 .265.126v13.297a.162.162 0 0 1-.264.127z"
-      }
-    )
-  })
-);
-var UnmuteIcon_default = SvgUnmuteIcon;
-
-// src/components/icons/SubtitlesIcon.tsx
-import { jsx as jsx17, jsxs as jsxs2 } from "react/jsx-runtime";
-
 // src/components/icons/SubIcon.tsx
-import { jsx as jsx18, jsxs as jsxs3 } from "react/jsx-runtime";
-var SvgSubIcon = (props) => /* @__PURE__ */ jsxs3(
+import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
+var SvgSubIcon = (props) => /* @__PURE__ */ jsxs2(
   "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(
+      /* @__PURE__ */ jsx16(
         "path",
         {
-          stroke: "currentColor",
+          stroke: "#D1D5DB",
           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(
+      /* @__PURE__ */ jsx16(
         "path",
         {
-          stroke: "currentColor",
+          stroke: "#D1D5DB",
           strokeLinecap: "round",
           strokeLinejoin: "round",
           strokeWidth: 1.5,
@@ -510,15 +459,105 @@ var SvgSubIcon = (props) => /* @__PURE__ */ jsxs3(
 );
 var SubIcon_default = SvgSubIcon;
 
-// src/components/VolumeSlider/index.tsx
+// src/components/icons/SubtitlesIcon.tsx
+import { jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/components/icons/UnmuteIcon.tsx
+import { jsx as jsx18 } 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(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "#fff",
+    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" })
+    ]
+  })
+);
+var VolumeHigh_default = SvgVolumeHigh;
+
+// src/components/icons/VolumeLow.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var SvgVolumeLow = (props) => /* @__PURE__ */ jsx20(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    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" })
+  })
+);
+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(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "#fff",
+    viewBox: "0 0 512 512"
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsx21(
+        "path",
+        {
+          d: "M416 432 64 80",
+          style: {
+            fill: "none",
+            stroke: "#fff",
+            strokeLinecap: "round",
+            strokeMiterlimit: 10,
+            strokeWidth: 32
+          }
+        }
+      ),
+      /* @__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" })
+    ]
+  })
+);
+var VolumeMute_default = SvgVolumeMute;
+
+// src/components/icons/VolumeVLow.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var SvgVolumeVLow = (props) => /* @__PURE__ */ jsx22(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    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" })
+  })
+);
+var VolumeVLow_default = SvgVolumeVLow;
+
+// src/components/VolumeSlider/index.tsx
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
 var MIN = 0;
 var MAX = 100;
 var VolumeSlider = ({
   width = 0,
   setIsSeeking,
   handleControlDisplayTimer,
-  volumeSliderToggler
+  volumeSliderToggler,
+  isTrailer
 }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [isVisible, setVisible] = useState2(false);
@@ -534,6 +573,20 @@ var VolumeSlider = ({
       player == null ? void 0 : player.off("volumechange", updateVolumeState);
     };
   }, [player]);
+  const handleVolumeSliderClick = (e) => {
+    e.stopPropagation();
+    const slider = e.currentTarget;
+    const rect = slider.getBoundingClientRect();
+    const offsetX = e.clientY - rect.top;
+    const 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);
@@ -549,7 +602,7 @@ var VolumeSlider = ({
     if (volume == 0 && !isVisible) {
       setVolume(60);
       player == null ? void 0 : player.volume(0.6);
-      player == null ? void 0 : player.muted(false);
+      player && (player == null ? void 0 : player.muted(false));
     }
     setVisible((prev) => !prev);
     timeoutRef.current = setTimeout(() => {
@@ -563,46 +616,62 @@ var VolumeSlider = ({
     setVolume(newVolume);
     player == null ? void 0 : player.volume(newVolume / 100);
     if (newVolume === 0) {
-      player == null ? void 0 : player.muted(true);
+      player && (player == null ? void 0 : player.muted(true));
     } else {
-      player == null ? void 0 : player.muted(false);
+      player && (player == null ? void 0 : player.muted(false));
     }
   };
-  return /* @__PURE__ */ jsxs4(
+  const handleDoubleClick = (e) => {
+    setVolume(0);
+    player == null ? void 0 : player.muted(true);
+  };
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
-      className: `sb-flex ${isVisible ? "" : ""}  ${width > 400 ? "sb-flex-col-reverse" : "sb-flex-col !sb-justify-start"} sb-items-center sb-gap-1 sb-h-full`,
+      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__ */ jsx19(
+        /* @__PURE__ */ jsx23(
           "div",
           {
-            className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"}`,
+            className: `sb-flex sb-relative ${width < 400 || isTrailer ? "-sb-top-1" : "sb-top-1"}`,
             onClick: toggleVisibility,
-            children: volume == 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
-              MuteIcon_default,
+            onDoubleClick: handleDoubleClick,
+            children: volume == 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx23(
+              VolumeMute_default,
               {
-                className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5`
+                className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
               }
-            ) : /* @__PURE__ */ jsx19(
-              UnmuteIcon_default,
+            ) : volume < 25 ? /* @__PURE__ */ jsx23(
+              VolumeVLow_default,
               {
-                className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5`
+                className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
+              }
+            ) : volume < 50 ? /* @__PURE__ */ jsx23(
+              VolumeLow_default,
+              {
+                className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
+              }
+            ) : /* @__PURE__ */ jsx23(
+              VolumeHigh_default,
+              {
+                className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx23("div", { className: "sb-flex sb-w-fit sb-h-fit sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx23(
           "div",
           {
-            className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400 ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative`,
-            children: /* @__PURE__ */ jsx19(
+            className: `sb-p-1 !sb-h-fit  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(
               Slider_default,
               {
                 value: volume,
                 handleValueChange,
                 min: MIN,
                 max: MAX,
-                className: "!sb-w-16"
+                className: "!sb-w-16 ",
+                handleSliderClick: handleVolumeSliderClick
               }
             )
           }
@@ -618,7 +687,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 jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 var MenuButton = ({
   buttonContent,
   menuContent,
@@ -653,14 +722,14 @@ var MenuButton = ({
   useEffect3(() => {
     setNoteOpen && setNoteOpen(isOpen);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       onMouseEnter,
       onMouseLeave,
       className: "sb-relative  sb-flex sb-items-end",
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx24(
           "button",
           {
             ref: buttonRef,
@@ -676,7 +745,7 @@ var MenuButton = ({
             children: buttonContent
           }
         ),
-        !disablePopUp && isOpen && /* @__PURE__ */ jsx20(
+        !disablePopUp && isOpen && /* @__PURE__ */ jsx24(
           "div",
           {
             ref: menuRef,
@@ -694,31 +763,32 @@ var MenuButton = ({
 var MenuButton_default = MenuButton;
 
 // src/components/QualityMenu/index.tsx
-import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
 var QualityOption = ({
   isSelected,
   quality,
   onClick,
-  width
+  width,
+  isTrailer
 }) => {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx25(
     "button",
     {
-      className: `hover:sb-text-orange-500 ${width > 400 ? "sb-p-2" : "sp-pb-1"}`,
+      className: `hover:sb-text-orange-500 ${width > 400 && !isTrailer ? "sb-p-2" : "sp-pb-1"}`,
       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(
+      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(
           CheckedIcon_default,
           {
-            className: `${width > 400 ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}`
+            className: `${width > 400 && !isTrailer ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}`
           }
-        ) : /* @__PURE__ */ jsx21("div", {}) }),
-        /* @__PURE__ */ jsx21("p", { className: "sb-text-left sb-col-span-9", children: quality == null ? void 0 : quality.label })
+        ) : /* @__PURE__ */ jsx25("div", {}) }),
+        /* @__PURE__ */ jsx25("p", { className: "sb-text-left sb-col-span-9", children: quality == null ? void 0 : quality.label })
       ] })
     }
   );
 };
-var QualityMenu = ({ width, onClick }) => {
+var QualityMenu = ({ width, onClick, isTrailer }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [closeMenuFunction, setCloseMenuFunction] = useState4(void 0);
   const [qualities, setQualities] = useState4(
@@ -742,25 +812,25 @@ var QualityMenu = ({ width, onClick }) => {
       }
     }
   }, [player]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx25(
     MenuButton_default,
     {
-      classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`,
+      classContainer: `${width < 400 || isTrailer ? "!sb-top-8 -sb-left-9" : ""}`,
       onClick: (e, isOpen) => {
         onClick && onClick(e, isOpen);
       },
-      buttonContent: /* @__PURE__ */ jsx21(SettingsIcon_default, { className: "sb-w-3 sb-h-3" }),
-      menuContent: /* @__PURE__ */ jsx21(
+      buttonContent: /* @__PURE__ */ jsx25(SettingsIcon_default, { className: "sb-w-3 sb-h-3" }),
+      menuContent: /* @__PURE__ */ jsx25(
         "div",
         {
-          className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50  ${width > 400 ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
-          children: /* @__PURE__ */ jsxs6("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
-            /* @__PURE__ */ jsxs6(
+          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(
               "div",
               {
                 className: `sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2`,
                 children: [
-                  /* @__PURE__ */ jsx21(
+                  /* @__PURE__ */ jsx25(
                     "button",
                     {
                       onClick: () => {
@@ -769,19 +839,20 @@ var QualityMenu = ({ width, onClick }) => {
                         }
                       },
                       className: "hover:sb-scale-150",
-                      children: /* @__PURE__ */ jsx21(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
+                      children: /* @__PURE__ */ jsx25(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
                     }
                   ),
-                  /* @__PURE__ */ jsx21("h3", { children: "Quality" })
+                  /* @__PURE__ */ jsx25("h3", { children: "Quality" })
                 ]
               }
             ),
-            /* @__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 == null ? void 0 : qualities.map((q, i) => {
-              return /* @__PURE__ */ jsx21(
+            /* @__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(
                 QualityOption,
                 {
                   width,
+                  isTrailer,
                   isSelected: currentQualitySrc === (q == null ? void 0 : q.label),
                   quality: q,
                   onClick: () => {
@@ -813,7 +884,7 @@ var QualityMenu_default = QualityMenu;
 
 // src/components/CreateNoteMenu/index.tsx
 import React5, { useState as useState5 } from "react";
-import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var CreateNoteMenu = ({
   handleSaveNoteAction,
   width,
@@ -836,7 +907,7 @@ var CreateNoteMenu = ({
       );
     }
   };
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx26(
     MenuButton_default,
     {
       onMouseEnter,
@@ -845,21 +916,21 @@ var CreateNoteMenu = ({
       noteButtonClick,
       setNoteOpen,
       classContainer: `${width < 400 ? "!sb-top-8 -sb-left-[9.75rem]" : ""}`,
-      buttonContent: /* @__PURE__ */ jsx22(ClosedNoteIcon_default, { className: "sb-w-3 sb-h-3" }),
-      menuContent: /* @__PURE__ */ jsx22(
+      buttonContent: /* @__PURE__ */ jsx26(ClosedNoteIcon_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 ? " sb-py-5 sb-w-[220px]" : "sb-py-1 sb-w-[150px]"}`,
-          children: /* @__PURE__ */ jsxs7(
+          children: /* @__PURE__ */ jsxs9(
             "div",
             {
               className: "sb-flex sb-flex-col sb-gap-3 sb-items-center sb-justify-center",
               onClick: (e) => e.stopPropagation(),
               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(
+                /* @__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(
                     "input",
                     {
                       onClick: (e) => e.stopPropagation(),
@@ -872,7 +943,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__ */ 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" }) })
+                  /* @__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" }) })
                 ] })
               ]
             }
@@ -891,10 +962,10 @@ import { useEffect as useEffect6, useState as useState7 } from "react";
 import { useState as useState6 } from "react";
 
 // src/components/Tooltip/index.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Tooltip = ({ open, children }) => {
   if (!open) return null;
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx27(
     "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",
@@ -905,14 +976,14 @@ var Tooltip = ({ open, children }) => {
 var Tooltip_default = Tooltip;
 
 // src/components/NoteTooltip/index.tsx
-import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs10 } 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__ */ jsx24(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       onClick: handleValueChange,
@@ -920,9 +991,9 @@ var NoteTooltip = ({ note }) => {
       style: { left: `${note == null ? void 0 : note.percentage}%` },
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
-      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 == null ? void 0 : note.label }),
-        /* @__PURE__ */ jsx24("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: durationFormater(note.time) })
+      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) })
       ] }) }) })
     }
   );
@@ -930,7 +1001,7 @@ var NoteTooltip = ({ note }) => {
 var NoteTooltip_default = NoteTooltip;
 
 // src/components/NotesPanal/index.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var NotesPanal = ({ notes }) => {
   const [ns, setNs] = useState7([]);
   const { duration } = useSoftBuildersVideoPlayerContext();
@@ -943,7 +1014,7 @@ var NotesPanal = ({ notes }) => {
     });
     newNs && setNs(newNs);
   }, [notes, duration]);
-  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}`)) });
+  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}`)) });
 };
 var NotesPanal_default = NotesPanal;
 
@@ -952,7 +1023,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 jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
 var ChapterTooltip = ({ chapter }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [open, setOpen] = useState8(false);
@@ -974,7 +1045,7 @@ var ChapterTooltip = ({ chapter }) => {
     const clickedTime = chapter.startTime + clickPercentage * (chapter.endTime - chapter.startTime);
     player == null ? void 0 : player.currentTime(clickedTime);
   };
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       id: `ii-section-${chapter.title}`,
@@ -985,15 +1056,15 @@ var ChapterTooltip = ({ chapter }) => {
       },
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
-      children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx30(
         "button",
         {
           id: `section-${chapter.title}`,
           className: "sb-h-full sb-w-full",
           onClick: handleClickChapter,
-          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: [
+          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: [
               durationFormater(chapter.startTime),
               " -",
               " ",
@@ -1008,7 +1079,7 @@ var ChapterTooltip = ({ chapter }) => {
 var ChapterTooltip_default = ChapterTooltip;
 
 // src/components/ChaptersPanal/index.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var ChaptersPanal = ({ chapters }) => {
   const [cs, setCs] = useState9([]);
   const { duration } = useSoftBuildersVideoPlayerContext();
@@ -1023,13 +1094,13 @@ var ChaptersPanal = ({ chapters }) => {
     });
     newCs && setCs(newCs);
   }, [chapters, duration]);
-  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}`)) });
+  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}`)) });
 };
 var ChaptersPanal_default = ChaptersPanal;
 
 // src/components/TimeSlider/index.tsx
 import { useEffect as useEffect9, useState as useState10 } from "react";
-import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 var MIN2 = 0;
 var MAX2 = 100;
 var DEFERENCE = Math.abs(MAX2 - MIN2);
@@ -1078,8 +1149,8 @@ var TimeSlider = ({ chapters }) => {
     arr.push(`black 100%`);
     setMaskCuttes(arr.toString());
   }, [chapters, duration]);
-  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(
+  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(
       Slider_default,
       {
         value: timeSlider,
@@ -1092,7 +1163,7 @@ var TimeSlider = ({ chapters }) => {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx32(
       "div",
       {
         className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md",
@@ -1122,24 +1193,24 @@ var TimeSlider = ({ chapters }) => {
 var TimeSlider_default = TimeSlider;
 
 // src/components/TimeSliderContainer/index.tsx
-import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 var TimeSliderContainer = ({ notes, chapters }) => {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       id: "time-slider-container",
       className: "sb-w-full sb-relative sb-flex sb-items-center sb-justify-center",
       children: [
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx33(
           "div",
           {
             id: "notes-panal",
             className: "sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0",
-            children: /* @__PURE__ */ jsx29(NotesPanal_default, { notes })
+            children: /* @__PURE__ */ jsx33(NotesPanal_default, { notes })
           }
         ),
-        /* @__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 })
+        /* @__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 })
       ]
     }
   );
@@ -1148,7 +1219,7 @@ var TimeSliderContainer_default = TimeSliderContainer;
 
 // src/components/BufferTracker/index.tsx
 import { useEffect as useEffect10 } from "react";
-import { Fragment, jsx as jsx30 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx34 } from "react/jsx-runtime";
 var BufferTracker = () => {
   const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
   useEffect10(() => {
@@ -1157,13 +1228,13 @@ var BufferTracker = () => {
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx30(Fragment, {});
+  return /* @__PURE__ */ jsx34(Fragment, {});
 };
 var BufferTracker_default = BufferTracker;
 
 // src/components/CurrentTimeTracker/index.tsx
 import { useEffect as useEffect11 } from "react";
-import { Fragment as Fragment2, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx35 } from "react/jsx-runtime";
 var CurrentTimeTracker = () => {
   const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
   useEffect11(() => {
@@ -1172,19 +1243,19 @@ var CurrentTimeTracker = () => {
     }, 500);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx31(Fragment2, {});
+  return /* @__PURE__ */ jsx35(Fragment2, {});
 };
 var CurrentTimeTracker_default = CurrentTimeTracker;
 
 // src/components/SubtitleMenu/index.tsx
 import { useEffect as useEffect12, useState as useState11 } from "react";
-import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 var SubtitleOption = ({
   isSelected,
   subtitle,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx36(
     "button",
     {
       className: "hover:sb-text-orange-500 sb-p-2",
@@ -1192,9 +1263,9 @@ var SubtitleOption = ({
         e.stopPropagation();
         onClick(e);
       },
-      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 })
+      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 })
       ] })
     }
   );
@@ -1203,7 +1274,8 @@ var SubtitleMenu = ({
   width,
   onClick,
   onMouseEnter,
-  onMouseLeave
+  onMouseLeave,
+  isTrailer
 }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
@@ -1226,7 +1298,7 @@ var SubtitleMenu = ({
       setSubtitles(textTracks);
     }
   }, [player]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx36(
     MenuButton_default,
     {
       onMouseEnter,
@@ -1234,15 +1306,15 @@ var SubtitleMenu = ({
       onClick: (e, isOpen) => {
         onClick && onClick(e, isOpen);
       },
-      classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`,
-      buttonContent: /* @__PURE__ */ jsx32(SubIcon_default, { className: "sb-w-4 sb-h-4 sb-text-white " }),
-      menuContent: /* @__PURE__ */ jsx32(
+      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(
         "div",
         {
-          className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400 ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
-          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-center sb-justify-center", children: [
-              /* @__PURE__ */ jsx32(
+          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(
                 "button",
                 {
                   onClick: () => {
@@ -1251,14 +1323,14 @@ var SubtitleMenu = ({
                     }
                   },
                   className: "hover:sb-scale-150",
-                  children: /* @__PURE__ */ jsx32(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
+                  children: /* @__PURE__ */ jsx36(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
                 }
               ),
-              /* @__PURE__ */ jsx32("h3", { children: "Subtitle" })
+              /* @__PURE__ */ jsx36("h3", { children: "Subtitle" })
             ] }),
-            /* @__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(
+            /* @__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(
                 SubtitleOption,
                 {
                   isSelected: q.mode === "showing",
@@ -1283,7 +1355,7 @@ var SubtitleMenu_default = SubtitleMenu;
 
 // src/components/Tooltip/GlobalTooltip.tsx
 import { useState as useState12 } from "react";
-import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var TooltipModal = ({
   content,
   children,
@@ -1293,13 +1365,13 @@ var TooltipModal = ({
   const [isOpen, setIsOpen] = useState12(false);
   const showTooltip = () => setIsOpen(true);
   const hideTooltip = () => setIsOpen(false);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: "tooltip-container",
       style: { position: "relative", display: "inline-block" },
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx37(
           "div",
           {
             onMouseEnter: showTooltip,
@@ -1308,7 +1380,7 @@ var TooltipModal = ({
             children
           }
         ),
-        isOpen && /* @__PURE__ */ jsx33(
+        isOpen && /* @__PURE__ */ jsx37(
           "div",
           {
             className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 ? "!sb-bottom-[105%]" : "!sb-top-[105%]"}`,
@@ -1333,7 +1405,7 @@ var TooltipModal = ({
 var GlobalTooltip_default = TooltipModal;
 
 // src/components/ControlBar/index.tsx
-import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var ControlBar = ({
   player,
   isPaused,
@@ -1349,7 +1421,8 @@ var ControlBar = ({
   setIsSubtitleMenuOpen,
   setNoteOpen,
   disableNote,
-  noteButtonClick
+  noteButtonClick,
+  isTrailer
 }) => {
   const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
   const [width, setWidth] = useState13(0);
@@ -1383,93 +1456,98 @@ var ControlBar = ({
   useEffect13(() => {
     setDuration(duration);
   }, [duration]);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
-      className: ` !sb-px-4 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full  ${width > 400 ? "sb-absolute sb-bottom-1 sb-items-end sb-mb-1 sb-pb-2 " : "sb-items-start"} sb-pb-2`,
+      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__ */ jsx34(BufferTracker_default, {}),
-        /* @__PURE__ */ jsx34(CurrentTimeTracker_default, {}),
-        /* @__PURE__ */ jsx34(
-          "button",
-          {
-            onClick: () => {
-              seek(-seekStep);
-            },
-            children: /* @__PURE__ */ jsx34(
-              GlobalTooltip_default,
-              {
-                width,
-                content: /* @__PURE__ */ jsx34("p", { children: "Backward 5 sec" }),
-                isLeft: true,
-                children: /* @__PURE__ */ jsx34(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx34("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx34(
-          GlobalTooltip_default,
-          {
-            width,
-            content: /* @__PURE__ */ jsx34("p", { children: isPaused ? "Play" : "pause" }),
-            isLeft: true,
-            children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-3 sb-h-3" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx34(
-          "button",
-          {
-            onClick: (e) => {
-              e.preventDefault();
-              seek(seekStep);
-            },
-            children: /* @__PURE__ */ jsx34(
-              GlobalTooltip_default,
-              {
-                width,
-                content: /* @__PURE__ */ jsx34("p", { children: "Forward 5 sec" }),
-                isLeft: true,
-                children: /* @__PURE__ */ jsx34(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
-              }
-            )
-          }
-        ),
+        /* @__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" })
+                }
+              )
+            }
+          )
+        ] }),
         // isSeeking ||
         // width > 400 &&
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx38(
           "div",
           {
-            className: `${width < 400 ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
-            children: /* @__PURE__ */ jsxs14(
+            className: `${width < 400 && !isTrailer ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
+            children: /* @__PURE__ */ jsxs16(
               "div",
               {
-                style: width < 400 ? {
+                style: width < 400 && !isTrailer ? {
                   width: `${width * 0.9}px`,
                   left: "5%",
                   top: "90%"
                 } : { width: "98%" },
-                className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
+                className: `flex gap-2 ${width < 400 && !isTrailer ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
                 children: [
-                  /* @__PURE__ */ jsx34(CurrentTimeLabel_default, {}),
-                  /* @__PURE__ */ jsx34(TimeSliderContainer_default, { chapters, notes }),
-                  /* @__PURE__ */ jsx34("p", { children: durationFormater(duration) })
+                  /* @__PURE__ */ jsx38(CurrentTimeLabel_default, {}),
+                  /* @__PURE__ */ jsx38(TimeSliderContainer_default, { chapters, notes }),
+                  /* @__PURE__ */ jsx38("p", { children: durationFormater(duration) })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx34("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx38("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx38(
           VolumeSlider_default,
           {
+            isTrailer,
             volumeSliderToggler,
             width,
             setIsSeeking: (val) => setIsSeeking(val),
             handleControlDisplayTimer
           }
         ) }),
-        /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Quality" }), children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx38(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx38("p", { children: "Quality" }), children: /* @__PURE__ */ jsx38(
           QualityMenu_default,
           {
+            isTrailer,
             width,
             onClick: (e, isOpen) => {
               setVolumeToggler(!volumeSliderToggler);
@@ -1477,7 +1555,7 @@ var ControlBar = ({
             }
           }
         ) }),
-        disableNote && /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Create note" }), children: /* @__PURE__ */ jsx34(
+        disableNote && /* @__PURE__ */ jsx38(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx38("p", { children: "Create note" }), children: /* @__PURE__ */ jsx38(
           CreateNoteMenu_default,
           {
             handleSaveNoteAction,
@@ -1492,9 +1570,10 @@ var ControlBar = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx38(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx38("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx38(
           SubtitleMenu_default,
           {
+            isTrailer,
             width,
             onClick: (e, isOpen) => {
               setVolumeToggler(!volumeSliderToggler);
@@ -1502,7 +1581,7 @@ var ControlBar = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx38(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx38("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx38(
           "button",
           {
             onClick: (e) => {
@@ -1514,7 +1593,7 @@ var ControlBar = ({
                 player == null ? void 0 : player.requestFullscreen();
               }
             },
-            children: /* @__PURE__ */ jsx34(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
+            children: /* @__PURE__ */ jsx38(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
           }
         ) })
       ]
@@ -1527,28 +1606,36 @@ var ControlBar_default = ControlBar;
 import { isEqual } from "lodash";
 
 // src/components/BigPlayButton/index.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var BigPlayButton = ({ player, isPaused, setIsPaused }) => {
+import { jsx as jsx39 } from "react/jsx-runtime";
+var BigPlayButton = ({
+  player,
+  isPaused,
+  setIsPaused,
+  height,
+  id,
+  heightValue
+}) => {
   const togglePlay = () => {
     if (isPaused) player == null ? void 0 : player.play();
     else player == null ? void 0 : player.pause();
     setIsPaused(!isPaused);
   };
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
+      style: __spreadValues({}, height ? { 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__ */ jsx35(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx35(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
+      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" })
     }
   );
 };
 var BigPlayButton_default = BigPlayButton;
 
 // src/components/VideoPlayerComponent/index.tsx
-import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
 var bigPlayButtonRoot = {};
-var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") => {
+var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100", height, heightValue) => {
   const container = document.getElementById(`video-container-${id}`);
   if (container) {
     container.style.height = "100%";
@@ -1559,12 +1646,14 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") =
         bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
       }
       bigPlayButtonRoot[id].render(
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx40(
           BigPlayButton_default,
           {
             player,
             isPaused,
-            setIsPaused
+            setIsPaused,
+            height,
+            heightValue
           }
         )
       );
@@ -1573,7 +1662,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") =
 };
 var controlBarRoot = {};
 var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => {
-}, bgColor = "transparent", setIsQualityMenuOpen, setIsSubtitleMenuOpen, disableNote, setNoteOpen, noteButtonClick) => {
+}, bgColor = "transparent", setIsQualityMenuOpen, setIsSubtitleMenuOpen, disableNote, setNoteOpen, noteButtonClick, isTrailer) => {
   const container = document.getElementById(`video-container-${id}`);
   if (container) {
     container.style.height = "100%";
@@ -1589,7 +1678,7 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
       element.style.height = "100%";
       element.style.alignItems = "flex-end";
       controlBarRoot[id].render(
-        /* @__PURE__ */ jsx36(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx40(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx40(
           ControlBar_default,
           {
             id,
@@ -1606,7 +1695,8 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
             setIsQualityMenuOpen,
             disableNote,
             setNoteOpen,
-            noteButtonClick
+            noteButtonClick,
+            isTrailer
           }
         ) })
       );
@@ -1628,7 +1718,9 @@ var VideoPlayerComponent = forwardRef(
     childRef,
     bottomRedBar = true,
     noteButtonClick,
-    videoID
+    videoID,
+    isTrailer,
+    height
   }, ref) => {
     const videoRef = useRef2(void 0);
     const playerRef = useRef2(void 0);
@@ -1643,6 +1735,7 @@ var VideoPlayerComponent = forwardRef(
     const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
     const [isHovered, setIsHovered] = useState14(false);
     const [isNoteOpen, setNoteOpen] = useState14(false);
+    const [heightValue, setHeightValue] = useState14(0);
     const onReady = (player) => {
       if (playerRef) {
         playerRef.current = player;
@@ -1767,7 +1860,8 @@ var VideoPlayerComponent = forwardRef(
           setIsSubtitleMenuOpen,
           disableNote,
           setNoteOpen,
-          noteButtonClick
+          noteButtonClick,
+          isTrailer
         );
       }, 0);
       return () => clearTimeout(controlBarTimeout);
@@ -1789,12 +1883,14 @@ var VideoPlayerComponent = forwardRef(
             playerRef.current,
             isPaused,
             setIsPaused,
-            opacity
+            opacity,
+            height,
+            heightValue
           );
         }, 500);
         return () => clearTimeout(playButtonTimeout);
       }
-    }, [isPaused, opacity, isReady, id]);
+    }, [isPaused, opacity, isReady, id, height, heightValue]);
     useEffect14(() => {
       if (playerRef.current) {
         const intervalId = setInterval(() => {
@@ -1841,11 +1937,6 @@ var VideoPlayerComponent = forwardRef(
       }
       setOpacity("100");
       setIsControlBarPresent(true);
-      timeoutRef.current = setTimeout(() => {
-        setOpacity("0");
-        setBgColor("transparent");
-        setIsControlBarPresent(false);
-      }, 3e3);
       if (isTimerOnly) {
         return;
       }
@@ -1915,7 +2006,20 @@ var VideoPlayerComponent = forwardRef(
       const interval = setInterval(updateTimeSeeker, 500);
       return () => clearInterval(interval);
     }, [playerRef]);
-    return /* @__PURE__ */ jsxs15(
+    const container = document.getElementById(`video-container-${id}`);
+    function handleWidthChange(height2) {
+      setHeightValue(height2);
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const currentHeight = entry.contentRect.height;
+        handleWidthChange(currentHeight);
+      }
+    });
+    container && resizeObserver.observe(
+      container && container.querySelector(".vjs-control-bar")
+    );
+    return /* @__PURE__ */ jsx40(Fragment4, { children: /* @__PURE__ */ jsxs17(
       "div",
       {
         ref: videoRefs,
@@ -1927,7 +2031,7 @@ var VideoPlayerComponent = forwardRef(
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          bottomRedBar && /* @__PURE__ */ jsx36(
+          bottomRedBar && /* @__PURE__ */ jsx40(
             "div",
             {
               ref: childRef,
@@ -1938,12 +2042,12 @@ var VideoPlayerComponent = forwardRef(
               }
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx40(
             "div",
             {
               className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
               "data-vjs-player": true,
-              children: /* @__PURE__ */ jsx36(
+              children: /* @__PURE__ */ jsx40(
                 "div",
                 {
                   onClick: handlePlayerClick,
@@ -1955,7 +2059,7 @@ var VideoPlayerComponent = forwardRef(
           )
         ]
       }
-    );
+    ) });
   }
 );
 var VideoPlayerComponent_default = VideoPlayerComponent;
@@ -1963,7 +2067,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 jsx37 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = {
   autoplay: false,
   controls: true,
@@ -1988,7 +2092,9 @@ var Component = forwardRef2(
     childRef,
     bottomRedBar,
     noteButtonClick,
-    videoId
+    videoId,
+    isTrailer = false,
+    height
   }) => {
     options = __spreadProps(__spreadValues({}, options), {
       responsive: true,
@@ -2030,7 +2136,7 @@ var Component = forwardRef2(
     useEffect15(() => {
       setUuid(uuidv4());
     }, []);
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx41(
       VideoPlayerComponent_default,
       {
         id: uuid,
@@ -2045,7 +2151,9 @@ var Component = forwardRef2(
         onPlay,
         childRef,
         bottomRedBar,
-        noteButtonClick
+        noteButtonClick,
+        isTrailer,
+        height
       }
     );
   }