softbuilders-react-video-player 1.0.6 → 1.0.8

package/dist/components/BigPlayButton/index.d.ts

@@ -5,5 +5,5 @@ type Props = {
     isPaused: boolean;
     setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
 };
-declare const BigPlayButton: ({ player, isPaused, setIsPaused }: Props) => React.JSX.Element;
+declare const BigPlayButton: ({ player, isPaused, setIsPaused }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BigPlayButton;

package/dist/components/BigPlayButton/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PauseIcon, PlayIcon } from "../../images";
 const BigPlayButton = ({ player, isPaused, setIsPaused }) => {
     const togglePlay = () => {
@@ -8,8 +8,7 @@ const BigPlayButton = ({ player, isPaused, setIsPaused }) => {
             player === null || player === void 0 ? void 0 : player.pause();
         setIsPaused(!isPaused);
     };
-    return (React.createElement("button", { onClick: togglePlay },
-        React.createElement("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 " }, isPaused ? (React.createElement(PlayIcon, { className: "sb-w-4 sb-h-4" })) : (React.createElement(PauseIcon, { className: "sb-w-4 sb-h-4" })))));
+    return (_jsx("button", { onClick: togglePlay, children: _jsx("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 ? (_jsx(PlayIcon, { className: "sb-w-4 sb-h-4" })) : (_jsx(PauseIcon, { className: "sb-w-4 sb-h-4" })) }) }));
 };
 export default BigPlayButton;
 //# sourceMappingURL=index.js.map

package/dist/components/BigPlayButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BigPlayButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAOnD,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAS,EAAE,EAAE;IACjE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,QAAQ;YAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,CAAC;;YACxB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAC;QAErB,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,gCAAQ,OAAO,EAAE,UAAU;QACzB,6BAAK,SAAS,EAAC,+GAA+G,IAC3H,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,CACvC,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IAAC,SAAS,EAAC,eAAe,GAAG,CACxC,CACG,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BigPlayButton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAOnD,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAS,EAAE,EAAE;IACjE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,QAAQ;YAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,CAAC;;YACxB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAC;QAErB,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,iBAAQ,OAAO,EAAE,UAAU,YACzB,cAAK,SAAS,EAAC,+GAA+G,YAC3H,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,CACvC,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,SAAS,EAAC,eAAe,GAAG,CACxC,GACG,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/BigPlayButton/index.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Player from "video.js/dist/types/player";
+import { PauseIcon, PlayIcon } from "../../images";
+
+type Props = {
+  player: Player | undefined;
+  isPaused: boolean;
+  setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
+};
+const BigPlayButton = ({ player, isPaused, setIsPaused }: Props) => {
+  const togglePlay = () => {
+    if (isPaused) player?.play();
+    else player?.pause();
+
+    setIsPaused(!isPaused);
+  };
+
+  return (
+    <button onClick={togglePlay}>
+      <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 ">
+        {isPaused ? (
+          <PlayIcon className="sb-w-4 sb-h-4" />
+        ) : (
+          <PauseIcon className="sb-w-4 sb-h-4" />
+        )}
+      </div>
+    </button>
+  );
+};
+
+export default BigPlayButton;

package/dist/components/BufferTracker/index.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
-declare const BufferTracker: () => React.JSX.Element;
+declare const BufferTracker: () => import("react/jsx-runtime").JSX.Element;
 export default BufferTracker;

package/dist/components/BufferTracker/index.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 const BufferTracker = () => {
     const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
@@ -10,7 +11,7 @@ const BufferTracker = () => {
         // Cleanup function to clear the interval
         return () => clearInterval(intervalId);
     }, [player]);
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 };
 export default BufferTracker;
 //# sourceMappingURL=index.js.map

package/dist/components/BufferTracker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BufferTracker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAErF,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,EAAE,MAAM,EAAE,gCAAgC,EAAE,GAChD,iCAAiC,EAAE,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAClC,IAAI,MAAM;gBAAE,gCAAgC,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;QACrE,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,yCAAyC;QACzC,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BufferTracker/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAErF,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,EAAE,MAAM,EAAE,gCAAgC,EAAE,GAChD,iCAAiC,EAAE,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAClC,IAAI,MAAM;gBAAE,gCAAgC,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;QACrE,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,yCAAyC;QACzC,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,mBAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/BufferTracker/index.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+
+const BufferTracker = () => {
+  const { player, setDownloadedBufferTimeufferTime } =
+    useSoftBuildersVideoPlayerContext();
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (player) setDownloadedBufferTimeufferTime(player.bufferedEnd());
+    }, 1000);
+
+    // Cleanup function to clear the interval
+    return () => clearInterval(intervalId);
+  }, [player]);
+  return <></>;
+};
+
+export default BufferTracker;

package/dist/components/ChapterTooltip/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { SoftBuildersVideoPlayerChapter } from "../../types";
 type Chapter = SoftBuildersVideoPlayerChapter & {
     startPercentage: number;
@@ -7,5 +6,5 @@ type Chapter = SoftBuildersVideoPlayerChapter & {
 type Props = {
     chapter: Chapter;
 };
-declare const ChapterTooltip: ({ chapter }: Props) => React.JSX.Element;
+declare const ChapterTooltip: ({ chapter }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ChapterTooltip;

package/dist/components/ChapterTooltip/index.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import Tooltip from "../Tooltip";
 import { durationFormater } from "../../utils";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
@@ -17,20 +18,10 @@ const ChapterTooltip = ({ chapter }) => {
     const handleClickChapter = () => {
         player === null || player === void 0 ? void 0 : player.currentTime(chapter.startTime);
     };
-    return (React.createElement("div", { id: `ii-section-${chapter.title}`, className: "sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20", style: {
+    return (_jsx("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) },
-        React.createElement("button", { id: `section-${chapter.title}`, className: "sb-h-full sb-w-full", onClick: handleClickChapter },
-            React.createElement("div", { className: "sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center" },
-                React.createElement(Tooltip, { open: open },
-                    React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center" },
-                        React.createElement("p", null, chapter.title),
-                        React.createElement("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md" },
-                            durationFormater(chapter.startTime),
-                            " -",
-                            " ",
-                            durationFormater(chapter.endTime))))))));
+        }, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: _jsx("button", { id: `section-${chapter.title}`, className: "sb-h-full sb-w-full", onClick: handleClickChapter, children: _jsx("div", { className: "sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center", children: _jsx(Tooltip, { open: open, children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [_jsx("p", { children: chapter.title }), _jsxs("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: [durationFormater(chapter.startTime), " -", " ", durationFormater(chapter.endTime)] })] }) }) }) }) }));
 };
 export default ChapterTooltip;
 //# sourceMappingURL=index.js.map

package/dist/components/ChapterTooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChapterTooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAQrF,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IAC5C,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YAClD,OAAO,CAAC,IAAI,CAAC,CAAC;YAEd,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAErC,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,EAAE,EAAE,cAAc,OAAO,CAAC,KAAK,EAAE,EACjC,SAAS,EAAC,iEAAiE,EAC3E,KAAK,EAAE;YACL,IAAI,EAAE,GAAG,OAAO,CAAC,eAAe,GAAG;YACnC,KAAK,EAAE,GAAG,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,eAAe,GAAG;SAC7D,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EACjC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;QAElC,gCACE,EAAE,EAAE,WAAW,OAAO,CAAC,KAAK,EAAE,EAC9B,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,kBAAkB;YAE3B,6BAAK,SAAS,EAAC,4EAA4E;gBACzF,oBAAC,OAAO,IAAC,IAAI,EAAE,IAAI;oBACjB,6BAAK,SAAS,EAAC,8CAA8C;wBAC3D,+BAAI,OAAO,CAAC,KAAK,CAAK;wBACtB,2BAAG,SAAS,EAAC,uDAAuD;4BACjE,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC;;4BAAI,GAAG;4BAC1C,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,CAChC,CACA,CACE,CACN,CACC,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChapterTooltip/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAQrF,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IAC5C,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YAClD,OAAO,CAAC,IAAI,CAAC,CAAC;YAEd,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAErC,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACL,cACE,EAAE,EAAE,cAAc,OAAO,CAAC,KAAK,EAAE,EACjC,SAAS,EAAC,iEAAiE,EAC3E,KAAK,EAAE;YACL,IAAI,EAAE,GAAG,OAAO,CAAC,eAAe,GAAG;YACnC,KAAK,EAAE,GAAG,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,eAAe,GAAG;SAC7D,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EACjC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YAElC,iBACE,EAAE,EAAE,WAAW,OAAO,CAAC,KAAK,EAAE,EAC9B,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,kBAAkB,YAE3B,cAAK,SAAS,EAAC,4EAA4E,YACzF,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,YACjB,eAAK,SAAS,EAAC,8CAA8C,aAC3D,sBAAI,OAAO,CAAC,KAAK,GAAK,EACtB,aAAG,SAAS,EAAC,uDAAuD,aACjE,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,QAAI,GAAG,EAC1C,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,IAChC,IACA,GACE,GACN,GACC,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/ChapterTooltip/index.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import Tooltip from "../Tooltip";
+import { durationFormater } from "../../utils";
+import { SoftBuildersVideoPlayerChapter } from "../../types";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+type Chapter = SoftBuildersVideoPlayerChapter & {
+  startPercentage: number;
+  endPercentage: number;
+};
+type Props = {
+  chapter: Chapter;
+};
+const ChapterTooltip = ({ chapter }: Props) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+
+  const [open, setOpen] = useState(false);
+  const { currentTime } = useSoftBuildersVideoPlayerContext();
+
+  useEffect(() => {
+    if (currentTime === Math.floor(chapter.startTime)) {
+      setOpen(true);
+
+      setTimeout(() => {
+        setOpen(false);
+      }, 5000);
+    }
+  }, [currentTime, chapter.startTime]);
+
+  const handleClickChapter = () => {
+    player?.currentTime(chapter.startTime);
+  };
+
+  return (
+    <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)}
+    >
+      <button
+        id={`section-${chapter.title}`}
+        className="sb-h-full sb-w-full"
+        onClick={handleClickChapter}
+      >
+        <div className="sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center">
+          <Tooltip open={open}>
+            <div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
+              <p>{chapter.title}</p>
+              <p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
+                {durationFormater(chapter.startTime)} -{" "}
+                {durationFormater(chapter.endTime)}
+              </p>
+            </div>
+          </Tooltip>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default ChapterTooltip;

package/dist/components/ChaptersPanal/index.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import { SoftBuildersVideoPlayerChapter } from "../../types";
 type Props = {
     chapters: SoftBuildersVideoPlayerChapter[];
 };
-declare const ChaptersPanal: ({ chapters }: Props) => React.JSX.Element;
+declare const ChaptersPanal: ({ chapters }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ChaptersPanal;

package/dist/components/ChaptersPanal/index.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import ChapterTooltip from "../ChapterTooltip";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 const ChaptersPanal = ({ chapters }) => {
@@ -13,7 +14,7 @@ const ChaptersPanal = ({ chapters }) => {
         });
         setCs(newCs);
     }, [chapters, duration]);
-    return (React.createElement("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative " }, cs.map((c, i) => (React.createElement(ChapterTooltip, { key: `chapter-${i}-${c.startTime}`, chapter: c })))));
+    return (_jsx("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative ", children: cs.map((c, i) => (_jsx(ChapterTooltip, { chapter: c }, `chapter-${i}-${c.startTime}`))) }));
 };
 export default ChaptersPanal;
 //# sourceMappingURL=index.js.map

package/dist/components/ChaptersPanal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChaptersPanal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AASrF,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5C,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,CAAC;IAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAC/B,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;YACnE,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;YAC/D,uCACK,CAAC,KACJ,eAAe;gBACf,aAAa,IACb;QACJ,CAAC,CAAC,CAAC;QACH,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,6BAAK,EAAE,EAAC,gBAAgB,EAAC,SAAS,EAAC,kCAAkC,IAClE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAChB,oBAAC,cAAc,IAAC,GAAG,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,GAAI,CACnE,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChaptersPanal/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AASrF,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5C,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,CAAC;IAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAC/B,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;YACnE,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;YAC/D,uCACK,CAAC,KACJ,eAAe;gBACf,aAAa,IACb;QACJ,CAAC,CAAC,CAAC;QACH,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,cAAK,EAAE,EAAC,gBAAgB,EAAC,SAAS,EAAC,kCAAkC,YAClE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAChB,KAAC,cAAc,IAAqC,OAAO,EAAE,CAAC,IAAzC,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,CAAgB,CACnE,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/ChaptersPanal/index.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+
+import ChapterTooltip from "../ChapterTooltip";
+import { SoftBuildersVideoPlayerChapter } from "../../types";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+
+type Chapter = SoftBuildersVideoPlayerChapter & {
+  startPercentage: number;
+  endPercentage: number;
+};
+type Props = {
+  chapters: SoftBuildersVideoPlayerChapter[];
+};
+const ChaptersPanal = ({ chapters }: Props) => {
+  const [cs, setCs] = useState<Chapter[]>([]);
+  const { duration } = useSoftBuildersVideoPlayerContext();
+
+  useEffect(() => {
+    const newCs = chapters.map((c) => {
+      const startPercentage = Math.floor((c.startTime * 100) / duration);
+      const endPercentage = Math.floor((c.endTime * 100) / duration);
+      return {
+        ...c,
+        startPercentage,
+        endPercentage,
+      };
+    });
+    setCs(newCs);
+  }, [chapters, duration]);
+
+  return (
+    <div id="chapters-panal" className="sb-w-full sb-h-full sb-relative ">
+      {cs.map((c, i) => (
+        <ChapterTooltip key={`chapter-${i}-${c.startTime}`} chapter={c} />
+      ))}
+    </div>
+  );
+};
+
+export default ChaptersPanal;

package/dist/components/ControlBar/index.d.ts

@@ -11,5 +11,5 @@ type Props<T> = {
     seekStep?: number;
     handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
 };
-declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, handleSaveNoteAction, }: Props<T>) => React.JSX.Element;
+declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, handleSaveNoteAction, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default ControlBar;

package/dist/components/ControlBar/index.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import CurrentTimeLabel from "../CurrentTimeLabel";
 import { durationFormater } from "../../utils";
 import VolumeSlider from "../VolumeSlider";
@@ -29,36 +30,18 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
     useEffect(() => {
         setDuration(duration);
     }, [duration]);
-    return (React.createElement("div", { className: "sb-flex sb-items-center sb-justify-center sb-gap-3 sb-w-full" },
-        React.createElement(BufferTracker, null),
-        React.createElement(CurrentTimeTracker, null),
-        React.createElement("button", { onClick: () => {
-                seek(-seekStep);
-            } },
-            React.createElement(BackwardIcon, { className: "sb-w-3 sb-h-3" })),
-        React.createElement("button", { onClick: togglePlay }, isPaused ? (React.createElement(PlayIcon, { className: "sb-w-3 sb-h-3" })) : (React.createElement(PauseIcon, { className: "sb-w-3 sb-h-3" }))),
-        React.createElement("button", { onClick: () => {
-                seek(seekStep);
-            } },
-            React.createElement(ForwardIcon, { className: "sb-w-3 sb-h-3" })),
-        React.createElement(CurrentTimeLabel, null),
-        React.createElement("div", { className: "sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500" },
-            React.createElement(TimeSliderContainer, { chapters: chapters, notes: notes })),
-        React.createElement("p", null, durationFormater(duration)),
-        React.createElement("div", { className: "sb-w-[10%]" },
-            React.createElement(VolumeSlider, null)),
-        React.createElement(QualityMenu, null),
-        React.createElement("button", { onClick: () => {
-                if (player === null || player === void 0 ? void 0 : player.isFullscreen()) {
-                    player === null || player === void 0 ? void 0 : player.exitFullscreen();
-                }
-                else {
-                    player === null || player === void 0 ? void 0 : player.requestFullscreen();
-                }
-            } },
-            React.createElement(FullScreenIcon, { className: "sb-w-3 sb-h-3" })),
-        handleSaveNoteAction && (React.createElement(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })),
-        React.createElement(SubtitleMenu, null)));
+    return (_jsxs("div", { className: "sb-flex sb-items-center sb-justify-center sb-gap-3 sb-w-full", children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), _jsx("button", { onClick: () => {
+                    seek(-seekStep);
+                }, children: _jsx(BackwardIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("button", { onClick: togglePlay, children: isPaused ? (_jsx(PlayIcon, { className: "sb-w-3 sb-h-3" })) : (_jsx(PauseIcon, { className: "sb-w-3 sb-h-3" })) }), _jsx("button", { onClick: () => {
+                    seek(seekStep);
+                }, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx(CurrentTimeLabel, {}), _jsx("div", { className: "sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500", children: _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }) }), _jsx("p", { children: durationFormater(duration) }), _jsx("div", { className: "sb-w-[10%]", children: _jsx(VolumeSlider, {}) }), _jsx(QualityMenu, {}), _jsx("button", { onClick: () => {
+                    if (player === null || player === void 0 ? void 0 : player.isFullscreen()) {
+                        player === null || player === void 0 ? void 0 : player.exitFullscreen();
+                    }
+                    else {
+                        player === null || player === void 0 ? void 0 : player.requestFullscreen();
+                    }
+                }, children: _jsx(FullScreenIcon, { className: "sb-w-3 sb-h-3" }) }), handleSaveNoteAction && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })), _jsx(SubtitleMenu, {})] }));
 };
 export default ControlBar;
 //# sourceMappingURL=index.js.map

package/dist/components/ControlBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/ControlBar/index.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect } from "react";
+
+import Player from "video.js/dist/types/player";
+import CurrentTimeLabel from "../CurrentTimeLabel";
+import { durationFormater } from "../../utils";
+import VolumeSlider from "../VolumeSlider";
+import QualityMenu from "../QualityMenu";
+
+import CreateNoteMenu from "../CreateNoteMenu";
+import TimeSliderContainer from "../TimeSliderContainer";
+import BufferTracker from "../BufferTracker";
+import CurrentTimeTracker from "../CurrentTimeTracker";
+import {
+  SoftBuildersVideoPlayerChapter,
+  SoftBuildersVideoPlayerNote,
+} from "../../types";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import SubtitleMenu from "../SubtitleMenu";
+import { BackwardIcon, ForwardIcon, FullScreenIcon, PauseIcon, PlayIcon } from "../../images";
+
+type Props<T> = {
+  player: Player | undefined;
+  isPaused: boolean;
+  setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
+  duration: number;
+  notes: SoftBuildersVideoPlayerNote[];
+  chapters: SoftBuildersVideoPlayerChapter[];
+  seekStep?: number;
+  handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
+};
+const ControlBar = <T,>({
+  player,
+  isPaused,
+  setIsPaused,
+  duration,
+  notes,
+  chapters,
+  seekStep = 5,
+  handleSaveNoteAction,
+}: Props<T>) => {
+  const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
+
+  const seek = (duration: number) => {
+    const currentTime = Number(player?.currentTime() || 0);
+    player?.currentTime(currentTime + duration);
+  };
+
+  const togglePlay = () => {
+    if (isPaused) player?.play();
+    else player?.pause();
+
+    setIsPaused(!isPaused);
+  };
+
+  useEffect(() => {
+    setPlayer(player);
+  }, [player]);
+
+  useEffect(() => {
+    setDuration(duration);
+  }, [duration]);
+
+  return (
+    <div className="sb-flex sb-items-center sb-justify-center sb-gap-3 sb-w-full">
+      {/* Doesn't display anything, just set the downloaded buffer persentage */}
+      <BufferTracker />
+      {/* Doesn't display anything, just set the current time */}
+      <CurrentTimeTracker />
+
+      <button
+        onClick={() => {
+          seek(-seekStep);
+        }}
+      >
+        <BackwardIcon className="sb-w-3 sb-h-3" />
+      </button>
+      <button onClick={togglePlay}>
+        {isPaused ? (
+          <PlayIcon className="sb-w-3 sb-h-3" />
+        ) : (
+          <PauseIcon className="sb-w-3 sb-h-3" />
+        )}
+      </button>
+      <button
+        onClick={() => {
+          seek(seekStep);
+        }}
+      >
+        <ForwardIcon className="sb-w-3 sb-h-3" />
+      </button>
+
+      <CurrentTimeLabel />
+
+      <div className="sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500">
+        <TimeSliderContainer chapters={chapters} notes={notes} />
+      </div>
+
+      <p>{durationFormater(duration)}</p>
+
+      <div className="sb-w-[10%]">
+        <VolumeSlider />
+      </div>
+
+      <QualityMenu />
+
+      <button
+        onClick={() => {
+          if (player?.isFullscreen()) {
+            player?.exitFullscreen();
+          } else {
+            player?.requestFullscreen();
+          }
+        }}
+      >
+        <FullScreenIcon className="sb-w-3 sb-h-3" />
+      </button>
+
+      {handleSaveNoteAction && (
+        <CreateNoteMenu handleSaveNoteAction={handleSaveNoteAction} />
+      )}
+
+      <SubtitleMenu />
+    </div>
+  );
+};
+
+export default ControlBar;

package/dist/components/CreateNoteMenu/index.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 type Props<T> = {
     handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
 };
-declare const CreateNoteMenu: <T>({ handleSaveNoteAction }: Props<T>) => React.JSX.Element;
+declare const CreateNoteMenu: <T>({ handleSaveNoteAction }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default CreateNoteMenu;

package/dist/components/CreateNoteMenu/index.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import MenuButton from "../MenuButton";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 import { ClosedNoteIcon } from "../../images";
@@ -16,14 +17,7 @@ const CreateNoteMenu = ({ handleSaveNoteAction }) => {
             window.alert("Video Player, there is no implementation for the handleSaveNoteAction function");
         }
     };
-    return (React.createElement(MenuButton, { buttonContent: React.createElement(ClosedNoteIcon, { className: "sb-w-3 sb-h-3" }), menuContent: React.createElement("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[220px]" },
-            React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-3" },
-                React.createElement("h3", { className: "sb-px-5" }, "Add Note"),
-                React.createElement("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-                React.createElement("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start" },
-                    React.createElement("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" }),
-                    React.createElement("button", { className: "sb-w-full", onClick: handleSaveNote },
-                        React.createElement("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md" }, "Save"))))) }));
+    return (_jsx(MenuButton, { buttonContent: _jsx(ClosedNoteIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[220px]", children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [_jsx("h3", { className: "sb-px-5", children: "Add Note" }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsxs("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start", children: [_jsx("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" }), _jsx("button", { className: "sb-w-full", onClick: handleSaveNote, children: _jsx("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md", children: "Save" }) })] })] }) }) }));
 };
 export default CreateNoteMenu;
 //# sourceMappingURL=index.js.map

package/dist/components/CreateNoteMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CreateNoteMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,cAAc,GAAG,CAAK,EAAE,oBAAoB,EAAY,EAAE,EAAE;IAChE,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAErC,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,oBAAoB,EAAE,CAAC;YACzB,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC;YACxC,oBAAoB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACjD,OAAO,CAAC,EAAE,CAAC,CAAC;YACd,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,KAAK,CACV,gFAAgF,CACjF,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,aAAa,EAAE,oBAAC,cAAc,IAAC,SAAS,EAAC,eAAe,GAAG,EAC3D,WAAW,EACT,6BAAK,SAAS,EAAC,qEAAqE;YAClF,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,4BAAI,SAAS,EAAC,SAAS,eAAc;gBAErC,6BAAK,SAAS,EAAC,wDAAwD,GAAG;gBAE1E,6BAAK,SAAS,EAAC,qDAAqD;oBAClE,+BACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,YAAY,EACxB,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,QAAQ,QACR,SAAS,EAAC,iIAAiI,GAC3I;oBAEF,gCAAQ,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,cAAc;wBACnD,6BAAK,SAAS,EAAC,4EAA4E,WAErF,CACC,CACL,CACF,CACF,GAER,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CreateNoteMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,cAAc,GAAG,CAAK,EAAE,oBAAoB,EAAY,EAAE,EAAE;IAChE,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAErC,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,oBAAoB,EAAE,CAAC;YACzB,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC;YACxC,oBAAoB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACjD,OAAO,CAAC,EAAE,CAAC,CAAC;YACd,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,KAAK,CACV,gFAAgF,CACjF,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,UAAU,IACT,aAAa,EAAE,KAAC,cAAc,IAAC,SAAS,EAAC,eAAe,GAAG,EAC3D,WAAW,EACT,cAAK,SAAS,EAAC,qEAAqE,YAClF,eAAK,SAAS,EAAC,8BAA8B,aAC3C,aAAI,SAAS,EAAC,SAAS,yBAAc,EAErC,cAAK,SAAS,EAAC,wDAAwD,GAAG,EAE1E,eAAK,SAAS,EAAC,qDAAqD,aAClE,gBACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,YAAY,EACxB,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,QAAQ,QACR,SAAS,EAAC,iIAAiI,GAC3I,EAEF,iBAAQ,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,cAAc,YACnD,cAAK,SAAS,EAAC,4EAA4E,qBAErF,GACC,IACL,IACF,GACF,GAER,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/CreateNoteMenu/index.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import MenuButton from "../MenuButton";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { ClosedNoteIcon } from "../../images";
+
+type Props<T> = {
+  handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
+};
+const CreateNoteMenu = <T,>({ handleSaveNoteAction }: Props<T>) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+
+  const [note, setNote] = useState("");
+
+  const handleSaveNote = () => {
+    if (handleSaveNoteAction) {
+      const time = player?.currentTime() || 0;
+      handleSaveNoteAction(time, note).then((response) => {
+        setNote("");
+      });
+    } else {
+      window.alert(
+        "Video Player, there is no implementation for the handleSaveNoteAction function"
+      );
+    }
+  };
+
+  return (
+    <MenuButton
+      buttonContent={<ClosedNoteIcon className="sb-w-3 sb-h-3" />}
+      menuContent={
+        <div className="sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[220px]">
+          <div className="sb-flex sb-flex-col sb-gap-3">
+            <h3 className="sb-px-5">Add Note</h3>
+
+            <div className="sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" />
+
+            <div className="sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start">
+              <input
+                name="note"
+                type="text"
+                placeholder="Add a note"
+                value={note}
+                onChange={(e) => setNote(e.target.value)}
+                required
+                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"
+              />
+
+              <button className="sb-w-full" onClick={handleSaveNote}>
+                <div className="sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md">
+                  Save
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+    />
+  );
+};
+
+export default CreateNoteMenu;

package/dist/components/CurrentTimeLabel/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 type Props = {};
-declare const CurrentTimeLabel: ({}: Props) => React.JSX.Element;
+declare const CurrentTimeLabel: ({}: Props) => import("react/jsx-runtime").JSX.Element;
 export default CurrentTimeLabel;