softbuilders-react-video-player 1.0.6 → 1.0.7

package/dist/index.mjs

@@ -0,0 +1,1383 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/components/SoftBuildersVideoPlayer/index.tsx
+import { memo, useEffect as useEffect15, useState as useState13 } from "react";
+
+// src/components/VideoPlayerComponent/index.tsx
+import { useEffect as useEffect14, useRef as useRef2, useState as useState12 } 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";
+
+// src/utils/index.ts
+var durationFormater = (seconds) => {
+  seconds = Math.floor(seconds);
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const secs = seconds % 60;
+  if (hours > 0) {
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(
+      2,
+      "0"
+    )}:${String(secs).padStart(2, "0")}`;
+  } else {
+    return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(
+      2,
+      "0"
+    )}`;
+  }
+};
+var SRTtoVTT = (srt) => {
+  const lines = srt.split(/\r?\n/).filter((line) => line.trim() !== "");
+  let vttContent = "WEBVTT\n\n";
+  let currentEntry = "";
+  lines.forEach((line) => {
+    if (/^\d+$/.test(line)) {
+      return;
+    }
+    const timestampMatch = line.match(
+      /(\d{2}:\d{2}:\d{2}),(\d{3}) --> (\d{2}:\d{2}:\d{2}),(\d{3})/
+    );
+    if (timestampMatch) {
+      if (currentEntry) {
+        vttContent += currentEntry.trim() + "\n\n";
+      }
+      currentEntry = `${timestampMatch[1]}.${timestampMatch[2]} --> ${timestampMatch[3]}.${timestampMatch[4]}
+`;
+    } else if (currentEntry) {
+      currentEntry += line + "\n";
+    }
+  });
+  if (currentEntry) {
+    vttContent += currentEntry.trim();
+  }
+  return vttContent.trim();
+};
+var convertSRTtoVTT = async (srtLink) => {
+  const response = await fetch(srtLink);
+  const srtText = await response.text();
+  const vttText = SRTtoVTT(srtText);
+  const blob = new Blob([vttText], { type: "text/vtt" });
+  const vttUrl = URL.createObjectURL(blob);
+  return vttUrl;
+};
+
+// src/components/VideoPlayerComponent/provider.tsx
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var SoftBuildersVideoPlayerContext = createContext(void 0);
+var SoftBuildersVideoPlayerProvider = ({
+  children
+}) => {
+  const [player, setPlayer] = useState(void 0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(1);
+  const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
+  const [downloadedBufferPercentage, setDownloadedBufferPercentage] = useState(0);
+  useEffect(() => {
+    setDownloadedBufferPercentage(downloadedBufferTime * 100 / duration);
+  }, [downloadedBufferTime]);
+  return /* @__PURE__ */ jsx(
+    SoftBuildersVideoPlayerContext.Provider,
+    {
+      value: {
+        player,
+        setPlayer,
+        duration,
+        setDuration,
+        currentTime,
+        setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
+        // isPaused,
+        // setIsPaused,
+        downloadedBufferTime,
+        setDownloadedBufferTimeufferTime,
+        downloadedBufferPercentage
+      },
+      children
+    }
+  );
+};
+var useSoftBuildersVideoPlayerContext = () => {
+  const context = useContext(SoftBuildersVideoPlayerContext);
+  if (!context) {
+    throw new Error(
+      "useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
+    );
+  }
+  return context;
+};
+
+// src/components/CurrentTimeLabel/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CurrentTimeLabel = ({}) => {
+  const { currentTime } = useSoftBuildersVideoPlayerContext();
+  return /* @__PURE__ */ jsx2("p", { children: durationFormater(currentTime) });
+};
+var CurrentTimeLabel_default = CurrentTimeLabel;
+
+// src/components/VolumeSlider/index.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/components/Slider/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Slider = (_a) => {
+  var _b = _a, {
+    value,
+    handleValueChange,
+    min = 0,
+    max = 100
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "handleValueChange",
+    "min",
+    "max"
+  ]);
+  return /* @__PURE__ */ jsx3(
+    "input",
+    __spreadValues({
+      type: "range",
+      min,
+      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,
+      style: {
+        background: `linear-gradient(to right, #f97316 ${value}%, #30303070 ${value}%)`
+      }
+    }, rest)
+  );
+};
+var Slider_default = Slider;
+
+// src/components/icons/BackwardIcon.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SvgBackwardIcon = (props) => /* @__PURE__ */ jsx4(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 15"
+  }, props), {
+    children: /* @__PURE__ */ jsx4(
+      "path",
+      {
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M1 2.16v4m0 0h4m-4 0 3.093-2.906a6 6 0 1 1-1.42 6.24"
+      }
+    )
+  })
+);
+var BackwardIcon_default = SvgBackwardIcon;
+
+// src/components/icons/CheckedIcon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SvgCheckedIcon = (props) => /* @__PURE__ */ jsx5(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 12 10"
+  }, props), {
+    children: /* @__PURE__ */ jsx5(
+      "path",
+      {
+        stroke: "#FFF",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M1 5.8 3.857 9 11 1"
+      }
+    )
+  })
+);
+var CheckedIcon_default = SvgCheckedIcon;
+
+// src/components/icons/ClosedNoteIcon.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SvgClosedNoteIcon = (props) => /* @__PURE__ */ jsx6(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 13 12"
+  }, props), {
+    children: /* @__PURE__ */ jsx6(
+      "path",
+      {
+        fill: "#fff",
+        d: "M12.428 9a2.5 2.5 0 0 1-.657 1.053l-1.27 1.214a2.6 2.6 0 0 1-1.1.63V9.5c0-.276.235-.5.523-.5zm.108-6.5V8H9.924c-.864 0-1.567.673-1.567 1.5V12H2.612C1.172 12 0 10.879 0 9.5v-7C0 1.122 1.172 0 2.612 0h7.312c1.44 0 2.612 1.122 2.612 2.5m-8.88 6.25c0-.414-.35-.75-.783-.75s-.784.336-.784.75.351.75.784.75c.432 0 .783-.336.783-.75m0-2.75c0-.414-.35-.75-.783-.75s-.784.336-.784.75.351.75.784.75c.432 0 .783-.336.783-.75m0-2.75c0-.414-.35-.75-.783-.75s-.784.336-.784.75.351.75.784.75c.432 0 .783-.336.783-.75"
+      }
+    )
+  })
+);
+var ClosedNoteIcon_default = SvgClosedNoteIcon;
+
+// src/components/icons/ForwardIcon.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SvgForwardIcon = (props) => /* @__PURE__ */ jsx7(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 15"
+  }, props), {
+    children: /* @__PURE__ */ jsx7(
+      "path",
+      {
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M14.85 2.165v4m0 0h-4m4 0L11.764 3.26a6 6 0 1 0 1.413 6.24"
+      }
+    )
+  })
+);
+var ForwardIcon_default = SvgForwardIcon;
+
+// src/components/icons/FullScreenIcon.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SvgFullScreenIcon = (props) => /* @__PURE__ */ jsx8(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 11 11"
+  }, props), {
+    children: /* @__PURE__ */ jsx8(
+      "path",
+      {
+        stroke: "#FFF",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M7 1h3m0 0v3m0-3L6.5 4.5M4 10H1m0 0V7m0 3 3.5-3.5"
+      }
+    )
+  })
+);
+var FullScreenIcon_default = SvgFullScreenIcon;
+
+// src/components/icons/LeftArrowIcon.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var SvgLeftArrowIcon = (props) => /* @__PURE__ */ jsx9(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 6 11"
+  }, props), {
+    children: /* @__PURE__ */ jsx9(
+      "path",
+      {
+        stroke: "#FFF",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "m5 9.97-4-4 4-4"
+      }
+    )
+  })
+);
+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";
+
+// src/components/icons/OpenNoteIcon.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+
+// src/components/icons/PauseIcon.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var SvgPauseIcon = (props) => /* @__PURE__ */ jsx13(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 9 14"
+  }, props), {
+    children: /* @__PURE__ */ jsx13("path", { fill: "#fff", d: "M2.89 0H0v13.333h2.89zM8.78 0H5.89v13.333h2.89z" })
+  })
+);
+var PauseIcon_default = SvgPauseIcon;
+
+// src/components/icons/PlayIcon.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var SvgPlayIcon = (props) => /* @__PURE__ */ jsx14(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 13 15"
+  }, props), {
+    children: /* @__PURE__ */ jsx14(
+      "path",
+      {
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "m1.37 1 10.11 6.5L1.37 14z"
+      }
+    )
+  })
+);
+var PlayIcon_default = SvgPlayIcon;
+
+// src/components/icons/SettingsIcon.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var SvgSettingsIcon = (props) => /* @__PURE__ */ jsx15(
+  "svg",
+  __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 13 13"
+  }, props), {
+    children: /* @__PURE__ */ jsx15(
+      "path",
+      {
+        fill: "#FFF",
+        d: "m12.507 8.062-1.117-.645a5 5 0 0 0 0-1.84l1.117-.644a.32.32 0 0 0 .144-.367 6.5 6.5 0 0 0-1.434-2.48.315.315 0 0 0-.388-.06l-1.116.645a5 5 0 0 0-1.594-.92V.464a.314.314 0 0 0-.246-.307 6.6 6.6 0 0 0-2.862 0 .314.314 0 0 0-.247.307v1.29a5.1 5.1 0 0 0-1.593.92l-1.114-.645a.31.31 0 0 0-.388.06 6.5 6.5 0 0 0-1.434 2.48.314.314 0 0 0 .144.366l1.117.645a5 5 0 0 0 0 1.84l-1.117.645a.32.32 0 0 0-.144.367c.291.933.787 1.777 1.434 2.48.1.106.262.133.388.06l1.116-.645c.47.403 1.01.715 1.594.92v1.29c0 .146.102.274.246.306a6.6 6.6 0 0 0 2.862 0 .314.314 0 0 0 .247-.307v-1.29a5.1 5.1 0 0 0 1.593-.92l1.117.645c.128.074.288.05.388-.06a6.5 6.5 0 0 0 1.433-2.48.324.324 0 0 0-.146-.369m-6.065.532a2.1 2.1 0 0 1-2.097-2.097 2.1 2.1 0 0 1 2.097-2.096 2.1 2.1 0 0 1 2.096 2.096 2.1 2.1 0 0 1-2.096 2.097"
+      }
+    )
+  })
+);
+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";
+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
+import { jsx as jsx18, jsxs as jsxs3 } from "react/jsx-runtime";
+var MIN = 0;
+var MAX = 100;
+var VolumeSlider = ({}) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+  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 handleValueChange = (e) => {
+    const newVolume = Number(e.target.value);
+    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);
+    }
+  };
+  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
+      }
+    )
+  ] });
+};
+var VolumeSlider_default = VolumeSlider;
+
+// src/components/QualityMenu/index.tsx
+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";
+var MenuButton = ({ buttonContent, menuContent, close }) => {
+  const [isOpen, setIsOpen] = useState3(false);
+  const buttonRef = useRef(null);
+  const menuRef = useRef(null);
+  const toggleMenu = () => setIsOpen((prev) => !prev);
+  const closeMenu = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  useEffect3(() => {
+    const handleClickOutside = (event) => {
+      if (buttonRef.current && !buttonRef.current.contains(event.target) && menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect3(() => {
+    if (close) close(closeMenu);
+  }, [close, closeMenu]);
+  return /* @__PURE__ */ jsxs4("div", { className: "sb-relative", children: [
+    /* @__PURE__ */ jsx19(
+      "button",
+      {
+        ref: buttonRef,
+        onClick: toggleMenu,
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        "aria-label": "Open menu",
+        children: buttonContent
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx19(
+      "div",
+      {
+        ref: menuRef,
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-labelledby": "Open menu",
+        className: "sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10",
+        children: menuContent
+      }
+    )
+  ] });
+};
+var MenuButton_default = MenuButton;
+
+// src/components/QualityMenu/index.tsx
+import { jsx as jsx20, jsxs as jsxs5 } 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 })
+  ] }) });
+};
+var QualityMenu = ({}) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+  const [closeMenuFunction, setCloseMenuFunction] = useState4(void 0);
+  const [qualities, setQualities] = useState4(
+    []
+  );
+  const [currentQualitySrc, setCurrentQualitySrc] = useState4(void 0);
+  useEffect4(() => {
+    if (player) {
+      const sources = player.currentSources();
+      const qs = JSON.parse(
+        JSON.stringify(sources)
+      );
+      setQualities(qs);
+      const source = player.currentSource();
+      const quality = JSON.parse(
+        JSON.stringify(source)
+      );
+      setCurrentQualitySrc(quality.src);
+    }
+  }, [player]);
+  return /* @__PURE__ */ jsx20(
+    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(
+            "button",
+            {
+              onClick: () => {
+                if (closeMenuFunction) {
+                  closeMenuFunction();
+                }
+              },
+              className: "hover:sb-scale-150",
+              children: /* @__PURE__ */ jsx20(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
+            }
+          ),
+          /* @__PURE__ */ jsx20("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(
+            QualityOption,
+            {
+              isSelected: currentQualitySrc === q.src,
+              quality: q,
+              onClick: () => {
+                const source = qualities.find(
+                  (_q) => q.label == _q.label
+                );
+                if (source && source.src != currentQualitySrc) {
+                  player == null ? void 0 : player.src(source.src);
+                  const currentTime = player == null ? void 0 : player.currentTime();
+                  setCurrentQualitySrc(source.src);
+                  player == null ? void 0 : player.currentTime(currentTime);
+                  player == null ? void 0 : player.play();
+                }
+              }
+            },
+            `quality-${q.label}-${i}`
+          );
+        }) })
+      ] }) }),
+      close: (fn) => {
+        setCloseMenuFunction(() => fn);
+      }
+    }
+  );
+};
+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";
+var CreateNoteMenu = ({ handleSaveNoteAction }) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+  const [note, setNote] = useState5("");
+  const handleSaveNote = () => {
+    if (handleSaveNoteAction) {
+      const time = (player == null ? void 0 : player.currentTime()) || 0;
+      handleSaveNoteAction(time, note).then((response) => {
+        setNote("");
+      });
+    } else {
+      window.alert(
+        "Video Player, there is no implementation for the handleSaveNoteAction function"
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx21(
+    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(
+            "input",
+            {
+              name: "note",
+              type: "text",
+              placeholder: "Add a note",
+              value: note,
+              onChange: (e) => setNote(e.target.value),
+              required: true,
+              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" }) })
+        ] })
+      ] }) })
+    }
+  );
+};
+var CreateNoteMenu_default = CreateNoteMenu;
+
+// src/components/NotesPanal/index.tsx
+import { useEffect as useEffect6, useState as useState7 } from "react";
+
+// src/components/NoteTooltip/index.tsx
+import { useEffect as useEffect5, useState as useState6 } from "react";
+
+// src/components/Tooltip/index.tsx
+import { jsx as jsx22 } 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 });
+};
+var Tooltip_default = Tooltip;
+
+// src/components/NoteTooltip/index.tsx
+import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+var NoteTooltip = ({ note }) => {
+  const [open, setOpen] = useState6(false);
+  const { currentTime } = useSoftBuildersVideoPlayerContext();
+  useEffect5(() => {
+    if (currentTime === Math.floor(note.time)) {
+      setOpen(true);
+      setTimeout(() => {
+        setOpen(false);
+      }, 5e3);
+    }
+  }, [currentTime, note.time]);
+  return /* @__PURE__ */ jsx23(
+    "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) })
+      ] }) }) })
+    }
+  );
+};
+var NoteTooltip_default = NoteTooltip;
+
+// src/components/NotesPanal/index.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var NotesPanal = ({ notes }) => {
+  const [ns, setNs] = useState7([]);
+  const { duration } = useSoftBuildersVideoPlayerContext();
+  useEffect6(() => {
+    const newNs = notes.map((n) => {
+      const percentage = Math.floor(n.time * 100 / duration);
+      return __spreadProps(__spreadValues({}, n), {
+        percentage
+      });
+    });
+    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}`)) });
+};
+var NotesPanal_default = NotesPanal;
+
+// src/components/ChaptersPanal/index.tsx
+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";
+var ChapterTooltip = ({ chapter }) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+  const [open, setOpen] = useState8(false);
+  const { currentTime } = useSoftBuildersVideoPlayerContext();
+  useEffect7(() => {
+    if (currentTime === Math.floor(chapter.startTime)) {
+      setOpen(true);
+      setTimeout(() => {
+        setOpen(false);
+      }, 5e3);
+    }
+  }, [currentTime, chapter.startTime]);
+  const handleClickChapter = () => {
+    player == null ? void 0 : player.currentTime(chapter.startTime);
+  };
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      id: `ii-section-${chapter.title}`,
+      className: "sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20",
+      style: {
+        left: `${chapter.startPercentage}%`,
+        width: `${chapter.endPercentage - chapter.startPercentage}%`
+      },
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      children: /* @__PURE__ */ jsx25(
+        "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: [
+              durationFormater(chapter.startTime),
+              " -",
+              " ",
+              durationFormater(chapter.endTime)
+            ] })
+          ] }) }) })
+        }
+      )
+    }
+  );
+};
+var ChapterTooltip_default = ChapterTooltip;
+
+// src/components/ChaptersPanal/index.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ChaptersPanal = ({ chapters }) => {
+  const [cs, setCs] = useState9([]);
+  const { duration } = useSoftBuildersVideoPlayerContext();
+  useEffect8(() => {
+    const newCs = chapters.map((c) => {
+      const startPercentage = Math.floor(c.startTime * 100 / duration);
+      const endPercentage = Math.floor(c.endTime * 100 / duration);
+      return __spreadProps(__spreadValues({}, c), {
+        startPercentage,
+        endPercentage
+      });
+    });
+    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}`)) });
+};
+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";
+var MIN2 = 0;
+var MAX2 = 100;
+var DEFERENCE = Math.abs(MAX2 - MIN2);
+var BAR_PERCENTAGE_WIDTH = 0.5;
+var TimeSlider = ({ chapters }) => {
+  const [timeSlider, setTimeSlider] = useState10(0);
+  const { player, duration, downloadedBufferPercentage } = useSoftBuildersVideoPlayerContext();
+  const handleValueChange = (e) => {
+    const newTimeSlider = Number(e.target.value);
+    setTimeSlider(newTimeSlider);
+    const time = newTimeSlider * duration / DEFERENCE;
+    player == null ? void 0 : player.currentTime(time);
+  };
+  useEffect9(() => {
+    const intervalId = setInterval(() => {
+      const currentTime = (player == null ? void 0 : player.currentTime()) || 0;
+      const time = currentTime * DEFERENCE / duration;
+      setTimeSlider(time);
+    }, 1e3);
+    return () => clearInterval(intervalId);
+  }, [player, duration]);
+  const [maskCuttes, setMaskCuttes] = useState10("");
+  useEffect9(() => {
+    const arr = ["black 0%"];
+    chapters.forEach((c) => {
+      const startPercentage = Math.floor(c.startTime * 100 / duration);
+      const endPercentage = Math.floor(c.endTime * 100 / duration);
+      arr.push(`black ${startPercentage}%`);
+      arr.push(`transparent ${startPercentage}%`);
+      arr.push(`transparent ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
+      arr.push(`black ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
+      arr.push(`black ${endPercentage}%`);
+      arr.push(`transparent ${endPercentage}%`);
+      arr.push(`transparent ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
+      arr.push(`black ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
+    });
+    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(
+      Slider_default,
+      {
+        value: timeSlider,
+        handleValueChange,
+        min: MIN2,
+        max: MAX2,
+        style: {
+          background: "transparent"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx27(
+      "div",
+      {
+        className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md",
+        style: {
+          background: `
+          linear-gradient(to right,
+            #f97316 0%,
+            #f97316 ${timeSlider}%,
+            #f9731640 ${timeSlider}%,
+            #f9731640 ${downloadedBufferPercentage}%,
+            #30303030 ${timeSlider}%,
+            #30303030 100%
+          )
+        `,
+          maskImage: `
+          linear-gradient(to right,
+            ${maskCuttes}
+          )
+        `,
+          maskSize: "100% 100%",
+          maskRepeat: "no-repeat"
+        }
+      }
+    )
+  ] });
+};
+var TimeSlider_default = TimeSlider;
+
+// src/components/TimeSliderContainer/index.tsx
+import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
+var TimeSliderContainer = ({ notes, chapters }) => {
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      id: "time-slider-container",
+      className: "sb-w-full sb-relative sb-flex sb-items-center sb-justify-center",
+      children: [
+        /* @__PURE__ */ jsx28(
+          "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 })
+          }
+        ),
+        /* @__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 })
+      ]
+    }
+  );
+};
+var TimeSliderContainer_default = TimeSliderContainer;
+
+// src/components/BufferTracker/index.tsx
+import { useEffect as useEffect10 } from "react";
+import { Fragment, jsx as jsx29 } from "react/jsx-runtime";
+var BufferTracker = () => {
+  const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
+  useEffect10(() => {
+    const intervalId = setInterval(() => {
+      if (player) setDownloadedBufferTimeufferTime(player.bufferedEnd());
+    }, 1e3);
+    return () => clearInterval(intervalId);
+  }, [player]);
+  return /* @__PURE__ */ jsx29(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";
+var CurrentTimeTracker = () => {
+  const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
+  useEffect11(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime((player == null ? void 0 : player.currentTime()) || 0);
+    }, 500);
+    return () => clearInterval(intervalId);
+  }, [player]);
+  return /* @__PURE__ */ jsx30(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";
+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 })
+  ] }) });
+};
+var SubtitleMenu = ({}) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+  const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
+  const [subtitles, setSubtitles] = useState11([]);
+  const handleSelectSubtitle = (textTrack) => {
+    const newSubtitles = subtitles.map((s) => {
+      if (s.label === textTrack.label) {
+        s.mode = "showing";
+      } else {
+        s.mode = "disabled";
+      }
+      return s;
+    });
+    setSubtitles(newSubtitles);
+  };
+  useEffect12(() => {
+    var _a;
+    if (player) {
+      const textTracks = (_a = player.textTracks()) == null ? void 0 : _a.tracks_;
+      setSubtitles(textTracks);
+    }
+  }, [player]);
+  return /* @__PURE__ */ jsx31(
+    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(
+            "button",
+            {
+              onClick: () => {
+                if (closeMenuFunction) {
+                  closeMenuFunction();
+                }
+              },
+              className: "hover:sb-scale-150",
+              children: /* @__PURE__ */ jsx31(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
+            }
+          ),
+          /* @__PURE__ */ jsx31("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(
+            SubtitleOption,
+            {
+              isSelected: q.mode === "showing",
+              subtitle: q,
+              onClick: () => {
+                handleSelectSubtitle(q);
+              }
+            },
+            `subtitle-${q.label}-${i}`
+          );
+        }) })
+      ] }) }),
+      close: (fn) => {
+        setCloseMenuFunction(() => fn);
+      }
+    }
+  );
+};
+var SubtitleMenu_default = SubtitleMenu;
+
+// src/components/ControlBar/index.tsx
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+var ControlBar = ({
+  player,
+  isPaused,
+  setIsPaused,
+  duration,
+  notes,
+  chapters,
+  seekStep = 5,
+  handleSaveNoteAction
+}) => {
+  const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
+  const seek = (duration2) => {
+    const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
+    player == null ? void 0 : player.currentTime(currentTime + duration2);
+  };
+  const togglePlay = () => {
+    if (isPaused) player == null ? void 0 : player.play();
+    else player == null ? void 0 : player.pause();
+    setIsPaused(!isPaused);
+  };
+  useEffect13(() => {
+    setPlayer(player);
+  }, [player]);
+  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(
+      "button",
+      {
+        onClick: () => {
+          seek(-seekStep);
+        },
+        children: /* @__PURE__ */ jsx32(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(
+      "button",
+      {
+        onClick: () => {
+          seek(seekStep);
+        },
+        children: /* @__PURE__ */ jsx32(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(
+      "button",
+      {
+        onClick: () => {
+          if (player == null ? void 0 : player.isFullscreen()) {
+            player == null ? void 0 : player.exitFullscreen();
+          } else {
+            player == null ? void 0 : player.requestFullscreen();
+          }
+        },
+        children: /* @__PURE__ */ jsx32(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
+      }
+    ),
+    handleSaveNoteAction && /* @__PURE__ */ jsx32(CreateNoteMenu_default, { handleSaveNoteAction }),
+    /* @__PURE__ */ jsx32(SubtitleMenu_default, {})
+  ] });
+};
+var ControlBar_default = ControlBar;
+
+// src/components/BigPlayButton/index.tsx
+import { jsx as jsx33 } 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" }) }) });
+};
+var BigPlayButton_default = BigPlayButton;
+
+// src/components/VideoPlayerComponent/index.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+var bigPlayButtonRoot = {};
+var renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
+  const container = document.getElementById(`video-container-${id}`);
+  if (container) {
+    const element = container.querySelector(".vjs-big-play-button");
+    if (element) {
+      if (!bigPlayButtonRoot[id]) {
+        bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
+      }
+      bigPlayButtonRoot[id].render(
+        /* @__PURE__ */ jsx34(
+          BigPlayButton_default,
+          {
+            player,
+            isPaused,
+            setIsPaused
+          }
+        )
+      );
+    }
+  }
+};
+var controlBarRoot = {};
+var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction) => {
+  const container = document.getElementById(`video-container-${id}`);
+  if (container) {
+    const element = container.querySelector(".vjs-control-bar");
+    if (element) {
+      if (!controlBarRoot[id]) {
+        controlBarRoot[id] = ReactDOM.createRoot(element);
+      }
+      element.style.display = "block";
+      controlBarRoot[id].render(
+        /* @__PURE__ */ jsx34(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx34(
+          ControlBar_default,
+          {
+            player,
+            isPaused,
+            setIsPaused,
+            duration,
+            notes,
+            chapters,
+            seekStep,
+            handleSaveNoteAction
+          }
+        ) })
+      );
+    }
+  }
+};
+var VideoPlayerComponent = ({
+  id,
+  options,
+  notes,
+  chapters,
+  startTime = 0,
+  handleSaveNoteAction,
+  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 onReady = (player) => {
+    playerRef.current = player;
+    setIsReady(true);
+    player.currentTime(startTime);
+    player.on("waiting", () => {
+    });
+    player.on("dispose", () => {
+      videojs.log("player will dispose");
+      setIsReady(false);
+    });
+    player.on("loadedmetadata", () => {
+      const d = player.duration();
+      setDuratoin(d);
+    });
+  };
+  useEffect14(() => {
+    if (!playerRef.current) {
+      const videoElement = document.createElement("video-js");
+      videoElement.classList.add("vjs-big-play-centered");
+      videoRef.current.appendChild(videoElement);
+      playerRef.current = videojs(videoElement, options, () => {
+        onReady(playerRef.current);
+      });
+    }
+    return () => {
+      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]);
+  useEffect14(() => {
+    if (playerRef && (playerRef == null ? void 0 : playerRef.current) && isReady) {
+      const currentTime = playerRef.current.currentTime() || 0;
+      if (isPaused) {
+        if (onPause) onPause(currentTime);
+      } else {
+        if (onPlay) onPlay(currentTime);
+      }
+    }
+  }, [isPaused, isReady]);
+  useEffect14(() => {
+    if (isReady) {
+      const controlBarTimeout = setTimeout(() => {
+        renderControlBar(
+          id,
+          playerRef.current,
+          isPaused,
+          setIsPaused,
+          duration,
+          notes,
+          chapters,
+          5,
+          handleSaveNoteAction
+        );
+      }, 500);
+      return () => clearTimeout(controlBarTimeout);
+    }
+  }, [
+    id,
+    playerRef,
+    isPaused,
+    setIsPaused,
+    notes,
+    chapters,
+    isReady,
+    handleSaveNoteAction,
+    duration
+  ]);
+  useEffect14(() => {
+    if (isReady) {
+      const playButtonTimeout = setTimeout(() => {
+        renderBigPlayButton(id, playerRef.current, isPaused, setIsPaused);
+      }, 500);
+      return () => clearTimeout(playButtonTimeout);
+    }
+  }, [id, isPaused, isReady]);
+  useEffect14(() => {
+    if (playerRef.current) {
+      const intervalId = setInterval(() => {
+        setIsPaused(playerRef.current.paused());
+      }, 500);
+      return () => clearInterval(intervalId);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx34(
+    "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 }) })
+    }
+  );
+};
+var VideoPlayerComponent_default = VideoPlayerComponent;
+
+// src/components/SoftBuildersVideoPlayer/index.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+var DEFAULT_OPTIONS = {
+  autoplay: false,
+  controls: true,
+  fluid: true,
+  muted: true,
+  height: 420,
+  width: 720,
+  sources: [],
+  tracks: []
+};
+var Component = ({
+  options,
+  notes,
+  chapters,
+  startTime = 0,
+  handleSaveNoteAction,
+  onPlay,
+  onPause
+}) => {
+  options = __spreadProps(__spreadValues({}, options), {
+    responsive: true,
+    inactivityTimeout: 0,
+    fullscreen: {
+      navigationUI: "hide"
+    }
+  });
+  if (options.autoplay === void 0)
+    options.autoplay = DEFAULT_OPTIONS.autoplay;
+  if (options.controls === void 0)
+    options.controls = DEFAULT_OPTIONS.controls;
+  if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
+  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([]);
+  useEffect15(() => {
+    const getTracks = async () => {
+      const newTracks = [];
+      for (const [i, s] of options.tracks.entries()) {
+        let src = s.src;
+        if (s.memeType == "text/srt") {
+          src = await convertSRTtoVTT(s.src);
+        }
+        newTracks.push(__spreadProps(__spreadValues({}, s), {
+          src
+        }));
+      }
+      setTracks(newTracks);
+    };
+    getTracks();
+  }, [options.tracks]);
+  const id = (Date.now() + Math.random() * 100).toString();
+  return /* @__PURE__ */ jsx35(
+    VideoPlayerComponent_default,
+    {
+      id,
+      chapters,
+      options: __spreadProps(__spreadValues({}, options), { tracks }),
+      notes,
+      startTime,
+      handleSaveNoteAction,
+      onPause,
+      onPlay
+    }
+  );
+};
+var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
+  return prevProps.options === nextProps.options && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
+});
+var SoftBuildersVideoPlayer_default = SoftBuildersVideoPlayer;
+
+// src/index.ts
+var src_default = SoftBuildersVideoPlayer_default;
+export {
+  src_default as default
+};