softbuilders-react-video-player 1.0.0

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

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

package/dist/components/QualityMenu/index.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from "react";
+import MenuButton from "../MenuButton";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { CheckedIcon, SettingsIcon, LeftArrowIcon, } from "../../icons";
+const QualityOption = ({ isSelected, quality, onClick, }) => {
+    return (React.createElement("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick: onClick },
+        React.createElement("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2" },
+            React.createElement("div", { className: "sb-col-span-3" }, isSelected ? React.createElement(CheckedIcon, { className: "sb-w-5 sb-h-5" }) : React.createElement("div", null)),
+            React.createElement("p", { className: "sb-text-left sb-col-span-9" }, quality.label))));
+};
+const QualityMenu = ({}) => {
+    const { player } = useSoftBuildersVideoPlayerContext();
+    const [closeMenuFunction, setCloseMenuFunction] = useState(undefined);
+    const [qualities, setQualities] = useState([]);
+    const [currentQualitySrc, setCurrentQualitySrc] = useState(undefined);
+    useEffect(() => {
+        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 (React.createElement(MenuButton, { buttonContent: React.createElement(SettingsIcon, { 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-[150px]" },
+            React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-3" },
+                React.createElement("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start" },
+                    React.createElement("button", { onClick: () => {
+                            if (closeMenuFunction) {
+                                closeMenuFunction();
+                            }
+                        }, className: "hover:sb-scale-150" },
+                        React.createElement(LeftArrowIcon, { className: "sb-w-3 sb-h-3" })),
+                    React.createElement("h3", null, "Quality")),
+                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-3 sb-items-start" }, qualities.map((q, i) => {
+                    return (React.createElement(QualityOption, { key: `quality-${q.label}-${i}`, isSelected: currentQualitySrc === q.src, quality: q, onClick: () => {
+                            const source = qualities.find((_q) => q.label == _q.label);
+                            if (source && source.src != currentQualitySrc) {
+                                player === null || player === void 0 ? void 0 : player.src(source.src);
+                                const currentTime = player === null || player === void 0 ? void 0 : player.currentTime();
+                                setCurrentQualitySrc(source.src);
+                                player === null || player === void 0 ? void 0 : player.currentTime(currentTime);
+                                player === null || player === void 0 ? void 0 : player.play();
+                            }
+                        } }));
+                })))), close: (fn) => {
+            setCloseMenuFunction(() => fn);
+        } }));
+};
+export default QualityMenu;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,10 @@
+import React, { InputHTMLAttributes } from "react";
+import "./style.css";
+type Props = {
+    value: number;
+    handleValueChange: React.ChangeEventHandler<HTMLInputElement>;
+    min?: number;
+    max?: number;
+} & InputHTMLAttributes<HTMLInputElement>;
+declare const Slider: ({ value, handleValueChange, min, max, ...rest }: Props) => React.JSX.Element;
+export default Slider;

package/dist/components/Slider/index.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import "./style.css";
+const Slider = (_a) => {
+    var { value, handleValueChange, min = 0, max = 100 } = _a, rest = __rest(_a, ["value", "handleValueChange", "min", "max"]);
+    return (React.createElement("input", Object.assign({ type: "range", min: min, max: max, value: 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)));
+};
+export default Slider;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAC7E,OAAO,aAAa,CAAC;AASrB,MAAM,MAAM,GAAG,CAAC,EAMR,EAAE,EAAE;QANI,EACd,KAAK,EACL,iBAAiB,EACjB,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,OAEH,EADH,IAAI,cALO,4CAMf,CADQ;IAEP,OAAO,CACL,6CACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EACP,yIAAyI;YACzI,IAAI,CAAC,SAAS,EAEhB,KAAK,EAAE;YACL,UAAU,EAAE,qCAAqC,KAAK,gBAAgB,KAAK,IAAI;SAChF,IACG,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Slider/style.css

@@ -0,0 +1,15 @@
+/* Styling the slider track */
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+          appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+}
+
+input[type="range"]:focus {
+  outline: none;
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { SoftBuildersVideoPlayerChapter, SoftBuildersVideoPlayerNote, SoftBuildersVideoPlayerOptions } from "../../types";
+export type Props<T = any> = {
+    options: SoftBuildersVideoPlayerOptions;
+    notes: SoftBuildersVideoPlayerNote[];
+    chapters: SoftBuildersVideoPlayerChapter[];
+    startTime?: number;
+    handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
+    onPlay?: (time: number) => void;
+    onPause?: (time: number) => void;
+};
+declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => React.JSX.Element)>;
+export default SoftBuildersVideoPlayer;

package/dist/components/SoftBuildersVideoPlayer/index.js

@@ -0,0 +1,55 @@
+import React, { memo, useEffect, useState } from "react";
+import VideoPlayerComponent from "../VideoPlayerComponent";
+import { convertSRTtoVTT } from "../../utils";
+const DEFAULT_OPTIONS = {
+    autoplay: false,
+    controls: true,
+    fluid: true,
+    muted: true,
+    height: 420,
+    width: 720,
+    sources: [],
+    tracks: [],
+};
+const Component = ({ options, notes, chapters, startTime = 0, handleSaveNoteAction, onPlay, onPause, }) => {
+    options = Object.assign(Object.assign({}, options), { responsive: true, inactivityTimeout: 0, fullscreen: {
+            navigationUI: "hide",
+        } });
+    if (options.autoplay === undefined)
+        options.autoplay = DEFAULT_OPTIONS.autoplay;
+    if (options.controls === undefined)
+        options.controls = DEFAULT_OPTIONS.controls;
+    if (options.fluid === undefined)
+        options.fluid = DEFAULT_OPTIONS.fluid;
+    if (options.muted === undefined)
+        options.muted = DEFAULT_OPTIONS.muted;
+    if (options.height === undefined)
+        options.height = DEFAULT_OPTIONS.height;
+    if (options.width === undefined)
+        options.width = DEFAULT_OPTIONS.width;
+    const [tracks, setTracks] = useState([]);
+    useEffect(() => {
+        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(Object.assign(Object.assign({}, s), { src }));
+            }
+            setTracks(newTracks);
+        };
+        getTracks();
+    }, [options.tracks]);
+    const id = (Date.now() + Math.random() * 100).toString();
+    return (React.createElement(VideoPlayerComponent, { id: id, chapters: chapters, options: Object.assign(Object.assign({}, options), { tracks }), notes: notes, startTime: startTime, handleSaveNoteAction: handleSaveNoteAction, onPause: onPause, onPlay: onPlay }));
+};
+const SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
+    return (prevProps.options === nextProps.options &&
+        prevProps.notes === nextProps.notes &&
+        prevProps.chapters === nextProps.chapters &&
+        prevProps.startTime === nextProps.startTime);
+});
+export default SoftBuildersVideoPlayer;
+//# sourceMappingURL=index.js.map

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

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

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

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

package/dist/components/SubtitleMenu/index.js

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import MenuButton from "../MenuButton";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { CheckedIcon, LeftArrowIcon, SubtitlesIcon, } from "../../icons";
+const SubtitleOption = ({ isSelected, subtitle, onClick, }) => {
+    return (React.createElement("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick: onClick },
+        React.createElement("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2" },
+            React.createElement("div", { className: "sb-col-span-3" }, isSelected ? React.createElement(CheckedIcon, { className: "sb-w-5 sb-h-5" }) : React.createElement("div", null)),
+            React.createElement("p", { className: "sb-text-left sb-col-span-9" }, subtitle.label))));
+};
+const SubtitleMenu = ({}) => {
+    const { player } = useSoftBuildersVideoPlayerContext();
+    const [closeMenuFunction, setCloseMenuFunction] = useState(undefined);
+    const [subtitles, setSubtitles] = useState([]);
+    const handleSelectSubtitle = (textTrack) => {
+        const newSubtitles = subtitles.map((s) => {
+            if (s.label === textTrack.label) {
+                s.mode = "showing";
+            }
+            else {
+                s.mode = "disabled";
+            }
+            return s;
+        });
+        setSubtitles(newSubtitles);
+    };
+    useEffect(() => {
+        var _a;
+        if (player) {
+            const textTracks = (_a = player.textTracks()) === null || _a === void 0 ? void 0 : _a.tracks_;
+            setSubtitles(textTracks);
+        }
+    }, [player]);
+    return (React.createElement(MenuButton, { buttonContent: React.createElement(SubtitlesIcon, { 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-[150px]" },
+            React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-3" },
+                React.createElement("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start" },
+                    React.createElement("button", { onClick: () => {
+                            if (closeMenuFunction) {
+                                closeMenuFunction();
+                            }
+                        }, className: "hover:sb-scale-150" },
+                        React.createElement(LeftArrowIcon, { className: "sb-w-3 sb-h-3" })),
+                    React.createElement("h3", null, "Subtitle")),
+                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-3 sb-items-start" }, subtitles.map((q, i) => {
+                    return (React.createElement(SubtitleOption, { key: `subtitle-${q.label}-${i}`, isSelected: q.mode === "showing", subtitle: q, onClick: () => {
+                            handleSelectSubtitle(q);
+                        } }));
+                })))), close: (fn) => {
+            setCloseMenuFunction(() => fn);
+        } }));
+};
+export default SubtitleMenu;
+//# sourceMappingURL=index.js.map

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

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

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

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

package/dist/components/TimeSlider/index.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import Slider from "../Slider";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+const MIN = 0, MAX = 100;
+const DEFERENCE = Math.abs(MAX - MIN);
+const BAR_PERCENTAGE_WIDTH = 0.5;
+const TimeSlider = ({ chapters }) => {
+    const [timeSlider, setTimeSlider] = useState(0);
+    const { player, duration, downloadedBufferPercentage } = useSoftBuildersVideoPlayerContext();
+    const handleValueChange = (e) => {
+        const newTimeSlider = Number(e.target.value);
+        setTimeSlider(newTimeSlider);
+        const time = (newTimeSlider * duration) / DEFERENCE;
+        player === null || player === void 0 ? void 0 : player.currentTime(time);
+    };
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            const currentTime = (player === null || player === void 0 ? void 0 : player.currentTime()) || 0;
+            const time = (currentTime * DEFERENCE) / duration;
+            setTimeSlider(time);
+        }, 1000);
+        // Cleanup function to clear the interval
+        return () => clearInterval(intervalId);
+    }, [player, duration]);
+    const [maskCuttes, setMaskCuttes] = useState("");
+    useEffect(() => {
+        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 (React.createElement("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center" },
+        React.createElement("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10" },
+            React.createElement(Slider, { value: timeSlider, handleValueChange: handleValueChange, min: MIN, max: MAX, style: {
+                    background: "transparent",
+                } })),
+        React.createElement("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",
+            } })));
+};
+export default TimeSlider;
+//# sourceMappingURL=index.js.map

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

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

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

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

package/dist/components/TimeSliderContainer/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import NotesPanal from "../NotesPanal";
+import ChaptersPanal from "../ChaptersPanal";
+import TimeSlider from "../TimeSlider";
+const TimeSliderContainer = ({ notes, chapters }) => {
+    return (React.createElement("div", { id: "time-slider-container", className: "sb-w-full sb-relative sb-flex sb-items-center sb-justify-center" },
+        React.createElement("div", { id: "notes-panal", className: "sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0" },
+            React.createElement(NotesPanal, { notes: notes })),
+        React.createElement("div", { className: "sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0" },
+            React.createElement(ChaptersPanal, { chapters: chapters })),
+        React.createElement(TimeSlider, { chapters: chapters })));
+};
+export default TimeSliderContainer;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TimeSliderContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,UAAU,MAAM,eAAe,CAAC;AAUvC,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAS,EAAE,EAAE;IACzD,OAAO,CACL,6BACE,EAAE,EAAC,uBAAuB,EAC1B,SAAS,EAAC,iEAAiE;QAE3E,6BACE,EAAE,EAAC,aAAa,EAChB,SAAS,EAAC,wDAAwD;YAElE,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CACxB;QAEN,6BAAK,SAAS,EAAC,oDAAoD;YACjE,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,GAAI,CACjC;QACN,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAC9B,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    open: boolean;
+    children: React.ReactNode;
+};
+declare const Tooltip: ({ open, children }: Props) => React.JSX.Element;
+export default Tooltip;

package/dist/components/Tooltip/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+const Tooltip = ({ open, children }) => {
+    if (!open)
+        return null;
+    return (React.createElement("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));
+};
+export default Tooltip;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5C,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,OAAO,CACL,6BAAK,SAAS,EAAC,8GAA8G,IAC1H,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,17 @@
+import React from "react";
+import "video.js/dist/video-js.css";
+import { SoftBuildersVideoPlayerChapter, SoftBuildersVideoPlayerNote, SoftBuildersVideoPlayerOptions } from "../../types";
+import "./style/style.css";
+import "../../styles/tailwind.css";
+export type Props<T = any> = {
+    id: string;
+    options: SoftBuildersVideoPlayerOptions;
+    notes: SoftBuildersVideoPlayerNote[];
+    chapters: SoftBuildersVideoPlayerChapter[];
+    startTime?: number;
+    handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
+    onPlay?: (time: number) => void;
+    onPause?: (time: number) => void;
+};
+declare const VideoPlayerComponent: <T>({ id, options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => React.JSX.Element;
+export default VideoPlayerComponent;

package/dist/components/VideoPlayerComponent/index.js

@@ -0,0 +1,140 @@
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom/client";
+import videojs from "video.js";
+import "video.js/dist/video-js.css";
+import ControlBar from "../ControlBar";
+import "./style/style.css";
+import "../../styles/tailwind.css";
+import { SoftBuildersVideoPlayerProvider } from "./provider";
+import BigPlayButton from "../BigPlayButton";
+let bigPlayButtonRoot = {};
+const 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]) {
+                // If bigPlayButtonRoot hasn't been created, create it
+                bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
+            }
+            bigPlayButtonRoot[id].render(React.createElement(BigPlayButton, { player: player, isPaused: isPaused, setIsPaused: setIsPaused }));
+        }
+    }
+};
+let controlBarRoot = {};
+const 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]) {
+                // If controlBarRoot hasn't been created, create it
+                controlBarRoot[id] = ReactDOM.createRoot(element);
+            }
+            element.style.display = "block";
+            controlBarRoot[id].render(React.createElement(SoftBuildersVideoPlayerProvider, null,
+                React.createElement(ControlBar, { player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction })));
+        }
+    }
+};
+const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, handleSaveNoteAction, onPlay, onPause, }) => {
+    const videoRef = useRef(undefined);
+    const playerRef = useRef(undefined);
+    const [isReady, setIsReady] = useState(false);
+    const [isPaused, setIsPaused] = useState(!options.autoplay);
+    const [duration, setDuratoin] = useState(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);
+        });
+    };
+    useEffect(() => {
+        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) {
+                // Dispose of the player properly on component unmount
+                playerRef.current.dispose();
+                playerRef.current = undefined;
+                // Defer unmounting of big play button and control bar to avoid race conditions
+                setTimeout(() => {
+                    if (bigPlayButtonRoot[id]) {
+                        bigPlayButtonRoot[id].unmount();
+                        bigPlayButtonRoot[id] = undefined;
+                    }
+                    if (controlBarRoot[id]) {
+                        controlBarRoot[id].unmount();
+                        controlBarRoot[id] = undefined;
+                    }
+                }, 0);
+            }
+        };
+    }, [options]);
+    useEffect(() => {
+        if (playerRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && isReady) {
+            const currentTime = playerRef.current.currentTime() || 0;
+            if (isPaused) {
+                if (onPause)
+                    onPause(currentTime);
+            }
+            else {
+                if (onPlay)
+                    onPlay(currentTime);
+            }
+        }
+    }, [isPaused, isReady]);
+    useEffect(() => {
+        if (isReady) {
+            const controlBarTimeout = setTimeout(() => {
+                renderControlBar(id, playerRef.current, isPaused, setIsPaused, duration, notes, chapters, 5, handleSaveNoteAction);
+            }, 500);
+            return () => clearTimeout(controlBarTimeout); // Clean up the timeout
+        }
+    }, [
+        id,
+        playerRef,
+        isPaused,
+        setIsPaused,
+        notes,
+        chapters,
+        isReady,
+        handleSaveNoteAction,
+        duration,
+    ]);
+    useEffect(() => {
+        if (isReady) {
+            const playButtonTimeout = setTimeout(() => {
+                renderBigPlayButton(id, playerRef.current, isPaused, setIsPaused);
+            }, 500);
+            return () => clearTimeout(playButtonTimeout); // Clean up the timeout
+        }
+    }, [id, isPaused, isReady]);
+    useEffect(() => {
+        if (playerRef.current) {
+            const intervalId = setInterval(() => {
+                setIsPaused(playerRef.current.paused());
+            }, 500);
+            return () => clearInterval(intervalId);
+        }
+    }, []);
+    return (React.createElement("div", { id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden" },
+        React.createElement("div", { "data-vjs-player": true },
+            React.createElement("div", { ref: videoRef }))));
+};
+export default VideoPlayerComponent;
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/VideoPlayerComponent/provider.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import Player from "video.js/dist/types/player";
+interface SoftBuildersVideoPlayerContextType {
+    player: Player | undefined;
+    setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
+    currentTime: number;
+    setCurrentTime: (value: number) => void;
+    duration: number;
+    setDuration: React.Dispatch<React.SetStateAction<number>>;
+    downloadedBufferPercentage: number;
+    downloadedBufferTime: number;
+    setDownloadedBufferTimeufferTime: React.Dispatch<React.SetStateAction<number>>;
+}
+export declare const SoftBuildersVideoPlayerProvider: ({ children, }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export declare const useSoftBuildersVideoPlayerContext: () => SoftBuildersVideoPlayerContextType;
+export {};

package/dist/components/VideoPlayerComponent/provider.js

@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState, useEffect, } from "react";
+const SoftBuildersVideoPlayerContext = createContext(undefined);
+// Create a provider component
+export const SoftBuildersVideoPlayerProvider = ({ children, }) => {
+    const [player, setPlayer] = useState(undefined);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(1);
+    // const [isPaused, setIsPaused] = useState(false);
+    const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
+    const [downloadedBufferPercentage, setDownloadedBufferPercentage] = useState(0);
+    useEffect(() => {
+        setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
+    }, [downloadedBufferTime]);
+    return (React.createElement(SoftBuildersVideoPlayerContext.Provider, { value: {
+            player,
+            setPlayer,
+            duration,
+            setDuration,
+            currentTime,
+            setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
+            // isPaused,
+            // setIsPaused,
+            downloadedBufferTime,
+            setDownloadedBufferTimeufferTime,
+            downloadedBufferPercentage,
+        } }, children));
+};
+// Custom hook to use the context
+export const useSoftBuildersVideoPlayerContext = () => {
+    const context = useContext(SoftBuildersVideoPlayerContext);
+    if (!context) {
+        throw new Error("useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider");
+    }
+    return context;
+};
+//# sourceMappingURL=provider.js.map