softbuilders-react-video-player 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 masri-softbuilders
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# Usage
+
+## install the package
+
+```bash
+    npm i soft-builders-video-player
+```
+
+## How to use
+
+```typescript
+import SoftBuildersVideoPlayer, {
+  SoftBuildersVideoPlayerOptions,
+  SoftBuildersVideoPlayerChapter,
+  SoftBuildersVideoPlayerNote,
+} from "soft-builders-video-player";
+
+const options: SoftBuildersVideoPlayerOptions = {
+  autoplay: false,
+  controls: true,
+  muted: true,
+  fluid: true,
+  poster: "http://example.com/thumbnail.png", // thumbnail preview image
+  height: 420,
+  width: 720,
+  sources: [
+    {
+      src: "https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.vp9.webm",
+      type: "video/webm",
+      label: "360p",
+    },
+    {
+      src: "https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.1080p.vp9.webm",
+      type: "video/webm",
+      label: "1080P",
+    },
+  ],
+  tracks: [
+    {
+      kind: "captions",
+      src: "https://raw.githubusercontent.com/brenopolanski/html5-video-webvtt-example/master/MIB2-subtitles-pt-BR.vtt",
+      srclang: "en",
+      label: "English",
+      memeType: "text/vtt", // text/vtt or text/srt
+      default: true,
+    },
+    {
+      kind: "captions",
+      src: "https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt",
+      srclang: "es",
+      label: "Espaniol",
+      memeType: "text/vtt", // text/vtt or text/srt
+    },
+  ], // only vtt suptitilers are supported for now
+};
+
+const initNotes: SoftBuildersVideoPlayerNote[] = [
+  {
+    time: 5,
+    label: "Start",
+  },
+  {
+    time: 30,
+    label: "Say Hello",
+  },
+  {
+    time: 69,
+    label: "Go deep",
+  },
+  {
+    time: 99,
+    label: "Details ...",
+  },
+  {
+    time: 140,
+    label: "End",
+  },
+];
+
+const initChapters: SoftBuildersVideoPlayerChapter[] = [
+  {
+    startTime: 25,
+    endTime: 50,
+    title: "01 Note: **** Important ****",
+  },
+  {
+    startTime: 70,
+    endTime: 100,
+    title: "02 Note: To Do",
+  },
+  { startTime: 110, endTime: 120, title: "03 Note: DIY (Do it yourself)" },
+  {
+    startTime: 125,
+    endTime: 140,
+    title: "05 Note: Conclusion ",
+  },
+];
+
+const Component = () => {
+  const handleSaveNoteAction = (time: number, note: string) => {
+    return new Promise((resolve) => {
+      resolve(true);
+    });
+  };
+
+  const onPause = (time: number) => {
+    console.log(`Video has been Paused at time (${time} sec)`);
+  };
+  const onPlay = (time: number) => {
+    console.log(`Video has been Played at time (${time} sec)`);
+  };
+
+  return (
+    <SoftBuildersVideoPlayer
+      options={options}
+      chapters={initChapters}
+      notes={initNotes}
+      handleSaveNoteAction={handleSaveNoteAction}
+      onPause={onPause}
+      onPlay={onPlay}
+    />
+  );
+};
+
+export default Component;
+```

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

@@ -0,0 +1,9 @@
+import React from "react";
+import Player from "video.js/dist/types/player";
+type Props = {
+    player: Player | undefined;
+    isPaused: boolean;
+    setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
+};
+declare const BigPlayButton: ({ player, isPaused, setIsPaused }: Props) => React.JSX.Element;
+export default BigPlayButton;

package/dist/components/BigPlayButton/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { PauseIcon, PlayIcon } from "../../icons";
+const BigPlayButton = ({ player, isPaused, setIsPaused }) => {
+    const togglePlay = () => {
+        if (isPaused)
+            player === null || player === void 0 ? void 0 : player.play();
+        else
+            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" })))));
+};
+export default BigPlayButton;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BigPlayButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAOlD,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"}

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

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

package/dist/components/BufferTracker/index.js

@@ -0,0 +1,16 @@
+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 React.createElement(React.Fragment, null);
+};
+export default BufferTracker;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { SoftBuildersVideoPlayerChapter } from "../../types";
+type Chapter = SoftBuildersVideoPlayerChapter & {
+    startPercentage: number;
+    endPercentage: number;
+};
+type Props = {
+    chapter: Chapter;
+};
+declare const ChapterTooltip: ({ chapter }: Props) => React.JSX.Element;
+export default ChapterTooltip;

package/dist/components/ChapterTooltip/index.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import Tooltip from "../Tooltip";
+import { durationFormater } from "../../utils";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+const ChapterTooltip = ({ chapter }) => {
+    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 === 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: {
+            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))))))));
+};
+export default ChapterTooltip;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

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

package/dist/components/ChaptersPanal/index.js

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from "react";
+import ChapterTooltip from "../ChapterTooltip";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+const ChaptersPanal = ({ chapters }) => {
+    const [cs, setCs] = useState([]);
+    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 Object.assign(Object.assign({}, c), { startPercentage,
+                endPercentage });
+        });
+        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 })))));
+};
+export default ChaptersPanal;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import Player from "video.js/dist/types/player";
+import { SoftBuildersVideoPlayerChapter, SoftBuildersVideoPlayerNote } from "../../types";
+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>;
+};
+declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, handleSaveNoteAction, }: Props<T>) => React.JSX.Element;
+export default ControlBar;

package/dist/components/ControlBar/index.js

@@ -0,0 +1,64 @@
+import React, { useEffect } from "react";
+import CurrentTimeLabel from "../CurrentTimeLabel";
+import { durationFormater } from "../../utils";
+import VolumeSlider from "../VolumeSlider";
+import QualityMenu from "../QualityMenu";
+import CreateNoteMenu from "../CreateNoteMenu";
+import { BackwardIcon, PlayIcon, PauseIcon, ForwardIcon, FullScreenIcon, } from "../../icons";
+import TimeSliderContainer from "../TimeSliderContainer";
+import BufferTracker from "../BufferTracker";
+import CurrentTimeTracker from "../CurrentTimeTracker";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import SubtitleMenu from "../SubtitleMenu";
+const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, }) => {
+    const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
+    const seek = (duration) => {
+        const currentTime = Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0);
+        player === null || player === void 0 ? void 0 : player.currentTime(currentTime + duration);
+    };
+    const togglePlay = () => {
+        if (isPaused)
+            player === null || player === void 0 ? void 0 : player.play();
+        else
+            player === null || player === void 0 ? void 0 : player.pause();
+        setIsPaused(!isPaused);
+    };
+    useEffect(() => {
+        setPlayer(player);
+    }, [player]);
+    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)));
+};
+export default ControlBar;
+//# sourceMappingURL=index.js.map

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

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

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

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

package/dist/components/CreateNoteMenu/index.js

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import MenuButton from "../MenuButton";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { ClosedNoteIcon } from "../../icons";
+const CreateNoteMenu = ({ handleSaveNoteAction }) => {
+    const { player } = useSoftBuildersVideoPlayerContext();
+    const [note, setNote] = useState("");
+    const handleSaveNote = () => {
+        if (handleSaveNoteAction) {
+            const time = (player === null || player === void 0 ? 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 (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"))))) }));
+};
+export default CreateNoteMenu;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;AAErF,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK7C,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"}

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

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

package/dist/components/CurrentTimeLabel/index.js

@@ -0,0 +1,10 @@
+"use client";
+import React from "react";
+import { durationFormater } from "../../utils";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+const CurrentTimeLabel = ({}) => {
+    const { currentTime } = useSoftBuildersVideoPlayerContext();
+    return React.createElement("p", null, durationFormater(currentTime));
+};
+export default CurrentTimeLabel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CurrentTimeLabel/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAGrF,MAAM,gBAAgB,GAAG,CAAC,EAAS,EAAE,EAAE;IACrC,MAAM,EAAE,WAAW,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAE5D,OAAO,+BAAI,gBAAgB,CAAC,WAAW,CAAC,CAAK,CAAC;AAChD,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const CurrentTimeTracker: () => React.JSX.Element;
+export default CurrentTimeTracker;

package/dist/components/CurrentTimeTracker/index.js

@@ -0,0 +1,15 @@
+import React, { useEffect } from "react";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+const CurrentTimeTracker = () => {
+    const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            setCurrentTime((player === null || player === void 0 ? void 0 : player.currentTime()) || 0);
+        }, 500);
+        // Cleanup function to clear the interval
+        return () => clearInterval(intervalId);
+    }, [player]);
+    return React.createElement(React.Fragment, null);
+};
+export default CurrentTimeTracker;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CurrentTimeTracker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAErF,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAClC,cAAc,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC,CAAC;QAC7C,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,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,kBAAkB,CAAC"}

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

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    name: string;
+};
+declare const Menu: ({ name }: Props) => React.JSX.Element;
+export default Menu;

package/dist/components/Menu/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+const Menu = ({ name }) => {
+    return (React.createElement("div", { className: "absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg focus:outline-none" },
+        React.createElement("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", "aria-labelledby": `${name}-button` },
+            React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem" }, "Dashboard"),
+            React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem" }, "Settings"),
+            React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem" }, "Profile"),
+            React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem" }, "Logout"))));
+};
+export default Menu;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAS,EAAE,EAAE;IAC/B,OAAO,CACL,6BAAK,SAAS,EAAC,0HAA0H;QACvI,6BACE,SAAS,EAAC,MAAM,EAChB,IAAI,EAAC,MAAM,sBACM,UAAU,qBACV,GAAG,IAAI,SAAS;YAEjC,2BACE,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,6EAA6E,EACvF,IAAI,EAAC,UAAU,gBAGb;YACJ,2BACE,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,6EAA6E,EACvF,IAAI,EAAC,UAAU,eAGb;YACJ,2BACE,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,6EAA6E,EACvF,IAAI,EAAC,UAAU,cAGb;YACJ,2BACE,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,6EAA6E,EACvF,IAAI,EAAC,UAAU,aAGb,CACA,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,8 @@
+import React from "react";
+type Props = {
+    buttonContent: React.ReactNode;
+    menuContent: React.ReactNode;
+    close?: (fun: Function) => void;
+};
+declare const MenuButton: ({ buttonContent, menuContent, close }: Props) => React.JSX.Element;
+export default MenuButton;

package/dist/components/MenuButton/index.js

@@ -0,0 +1,31 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+const MenuButton = ({ buttonContent, menuContent, close }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    const toggleMenu = () => setIsOpen((prev) => !prev);
+    const closeMenu = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    useEffect(() => {
+        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);
+    }, []);
+    useEffect(() => {
+        if (close)
+            close(closeMenu);
+    }, [close, closeMenu]);
+    return (React.createElement("div", { className: "sb-relative" },
+        React.createElement("button", { ref: buttonRef, onClick: toggleMenu, "aria-haspopup": "true", "aria-expanded": isOpen, "aria-label": "Open menu" }, buttonContent),
+        isOpen && (React.createElement("div", { ref: menuRef, role: "menu", "aria-orientation": "vertical", "aria-labelledby": "Open menu", className: "sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10" }, menuContent))));
+};
+export default MenuButton;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQxE,MAAM,UAAU,GAAG,CAAC,EAAE,aAAa,EAAE,WAAW,EAAE,KAAK,EAAS,EAAE,EAAE;IAClE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IACE,SAAS,CAAC,OAAO;gBACjB,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBACjD,OAAO,CAAC,OAAO;gBACf,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAC/C,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC7E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK;YAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,6BAAK,SAAS,EAAC,aAAa;QAC1B,gCACE,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,UAAU,mBACL,MAAM,mBACL,MAAM,gBACV,WAAW,IAErB,aAAa,CACP;QAER,MAAM,IAAI,CACT,6BACE,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,MAAM,sBACM,UAAU,qBACX,WAAW,EAC3B,SAAS,EAAC,kDAAkD,IAE3D,WAAW,CACR,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { SoftBuildersVideoPlayerNote } from "../../types";
+type Note = SoftBuildersVideoPlayerNote & {
+    percentage: number;
+};
+type Props = {
+    note: Note;
+};
+declare const NoteTooltip: ({ note }: Props) => React.JSX.Element;
+export default NoteTooltip;

package/dist/components/NoteTooltip/index.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+import Tooltip from "../Tooltip";
+import { durationFormater } from "../../utils";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+const NoteTooltip = ({ note }) => {
+    const [open, setOpen] = useState(false);
+    const { currentTime } = useSoftBuildersVideoPlayerContext();
+    useEffect(() => {
+        if (currentTime === Math.floor(note.time)) {
+            setOpen(true);
+            setTimeout(() => {
+                setOpen(false);
+            }, 5000);
+        }
+    }, [currentTime, note.time]);
+    return (React.createElement("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) },
+        React.createElement("div", { className: "sb-relative" },
+            React.createElement(Tooltip, { open: open },
+                React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center" },
+                    React.createElement("p", null, note.label),
+                    React.createElement("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md" }, durationFormater(note.time)))))));
+};
+export default NoteTooltip;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NoteTooltip/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;AAC/C,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAQrF,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAS,EAAE,EAAE;IACtC,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,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1C,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,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7B,OAAO,CACL,6BACE,SAAS,EAAC,+DAA+D,EACzE,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG,EAAE,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EACjC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;QAElC,6BAAK,SAAS,EAAC,aAAa;YAC1B,oBAAC,OAAO,IAAC,IAAI,EAAE,IAAI;gBACjB,6BAAK,SAAS,EAAC,8CAA8C;oBAC3D,+BAAI,IAAI,CAAC,KAAK,CAAK;oBACnB,2BAAG,SAAS,EAAC,uDAAuD,IACjE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAC1B,CACA,CACE,CACN,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { SoftBuildersVideoPlayerNote } from "../../types";
+type Props = {
+    notes: SoftBuildersVideoPlayerNote[];
+};
+declare const NotesPanal: ({ notes }: Props) => React.JSX.Element;
+export default NotesPanal;

package/dist/components/NotesPanal/index.js

@@ -0,0 +1,17 @@
+import React, { useEffect, useState } from "react";
+import NoteTooltip from "../NoteTooltip";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+const NotesPanal = ({ notes }) => {
+    const [ns, setNs] = useState([]);
+    const { duration } = useSoftBuildersVideoPlayerContext();
+    useEffect(() => {
+        const newNs = notes.map((n) => {
+            const percentage = Math.floor((n.time * 100) / duration);
+            return Object.assign(Object.assign({}, n), { percentage });
+        });
+        setNs(newNs);
+    }, [notes, duration]);
+    return (React.createElement("div", { id: "notes-panal", className: "sb-w-full sb-h-full sb-relative " }, ns.map((n, i) => (React.createElement(NoteTooltip, { key: `note-${i}-${n.time}`, note: n })))));
+};
+export default NotesPanal;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NotesPanal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAOrF,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE;IACtC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEzC,MAAM,EAAE,QAAQ,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;YACzD,uCACK,CAAC,KACJ,UAAU,IACV;QACJ,CAAC,CAAC,CAAC;QACH,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,OAAO,CACL,6BAAK,EAAE,EAAC,aAAa,EAAC,SAAS,EAAC,kCAAkC,IAC/D,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAChB,oBAAC,WAAW,IAAC,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,GAAI,CACrD,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}