softbuilders-react-video-player 1.0.5 → 1.0.7

package/dist/components/TimeSlider/index.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from "react";
+import Slider from "../Slider";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { SoftBuildersVideoPlayerChapter } from "../../types";
+
+const MIN = 0,
+  MAX = 100;
+const DEFERENCE = Math.abs(MAX - MIN);
+const BAR_PERCENTAGE_WIDTH = 0.5;
+
+type Props = {
+  chapters: SoftBuildersVideoPlayerChapter[];
+};
+
+const TimeSlider = ({ chapters }: Props) => {
+  const [timeSlider, setTimeSlider] = useState(0);
+
+  const { player, duration, downloadedBufferPercentage } =
+    useSoftBuildersVideoPlayerContext();
+
+  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newTimeSlider = Number(e.target.value);
+    setTimeSlider(newTimeSlider);
+
+    const time = (newTimeSlider * duration) / DEFERENCE;
+
+    player?.currentTime(time);
+  };
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const currentTime = 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: string[] = ["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 (
+    <div className=" sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center">
+      <div className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10">
+        <Slider
+          value={timeSlider}
+          handleValueChange={handleValueChange}
+          min={MIN}
+          max={MAX}
+          style={{
+            background: "transparent",
+          }}
+        />
+      </div>
+
+      <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",
+        }}
+      ></div>
+    </div>
+  );
+};
+
+export default TimeSlider;

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

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

package/dist/components/TimeSliderContainer/index.js

@@ -1,14 +1,9 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 })));
+    return (_jsxs("div", { id: "time-slider-container", className: "sb-w-full sb-relative sb-flex sb-items-center sb-justify-center", children: [_jsx("div", { id: "notes-panal", className: "sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0", children: _jsx(NotesPanal, { notes: notes }) }), _jsx("div", { className: "sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0", children: _jsx(ChaptersPanal, { chapters: chapters }) }), _jsx(TimeSlider, { chapters: chapters })] }));
 };
 export default TimeSliderContainer;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TimeSliderContainer/index.tsx"],"names":[],"mappings":";AACA,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,eACE,EAAE,EAAC,uBAAuB,EAC1B,SAAS,EAAC,iEAAiE,aAE3E,cACE,EAAE,EAAC,aAAa,EAChB,SAAS,EAAC,wDAAwD,YAElE,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,GACxB,EAEN,cAAK,SAAS,EAAC,oDAAoD,YACjE,KAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,GAAI,GACjC,EACN,KAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,GAAI,IAC9B,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/TimeSliderContainer/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import NotesPanal from "../NotesPanal";
+import ChaptersPanal from "../ChaptersPanal";
+import TimeSlider from "../TimeSlider";
+import {
+  SoftBuildersVideoPlayerChapter,
+  SoftBuildersVideoPlayerNote,
+} from "../../types";
+
+type Props = {
+  notes: SoftBuildersVideoPlayerNote[];
+  chapters: SoftBuildersVideoPlayerChapter[];
+};
+const TimeSliderContainer = ({ notes, chapters }: Props) => {
+  return (
+    <div
+      id="time-slider-container"
+      className="sb-w-full sb-relative sb-flex sb-items-center sb-justify-center"
+    >
+      <div
+        id="notes-panal"
+        className="sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0"
+      >
+        <NotesPanal notes={notes} />
+      </div>
+
+      <div className="sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0">
+        <ChaptersPanal chapters={chapters} />
+      </div>
+      <TimeSlider chapters={chapters} />
+    </div>
+  );
+};
+
+export default TimeSliderContainer;

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

@@ -3,5 +3,5 @@ type Props = {
     open: boolean;
     children: React.ReactNode;
 };
-declare const Tooltip: ({ open, children }: Props) => React.JSX.Element;
+declare const Tooltip: ({ open, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/components/Tooltip/index.js

@@ -1,8 +1,8 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 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));
+    return (_jsx("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: children }));
 };
 export default Tooltip;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":";AAMA,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5C,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,OAAO,CACL,cAAK,SAAS,EAAC,8GAA8G,YAC1H,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Tooltip/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+type Props = {
+  open: boolean;
+  children: React.ReactNode;
+};
+const Tooltip = ({ open, children }: Props) => {
+  if (!open) return null;
+  return (
+    <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}
+    </div>
+  );
+};
+
+export default Tooltip;

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

@@ -1,4 +1,3 @@
-import React from "react";
 import "video.js/dist/video-js.css";
 import { SoftBuildersVideoPlayerChapter, SoftBuildersVideoPlayerNote, SoftBuildersVideoPlayerOptions } from "../../types";
 import "./style/style.css";
@@ -13,5 +12,5 @@ export type Props<T = any> = {
     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;
+declare const VideoPlayerComponent: <T>({ id, options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default VideoPlayerComponent;

package/dist/components/VideoPlayerComponent/index.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
@@ -17,7 +18,7 @@ const renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
                 // 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 }));
+            bigPlayButtonRoot[id].render(_jsx(BigPlayButton, { player: player, isPaused: isPaused, setIsPaused: setIsPaused }));
         }
     }
 };
@@ -32,8 +33,7 @@ const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, ch
                 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 })));
+            controlBarRoot[id].render(_jsx(SoftBuildersVideoPlayerProvider, { children: _jsx(ControlBar, { player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction }) }));
         }
     }
 };
@@ -132,9 +132,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
             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 }))));
+    return (_jsx("div", { id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden", children: _jsx("div", { "data-vjs-player": true, children: _jsx("div", { ref: videoRef }) }) }));
 };
 export default VideoPlayerComponent;
 //# sourceMappingURL=index.js.map

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

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

package/dist/components/VideoPlayerComponent/index.tsx

@@ -0,0 +1,244 @@
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom/client";
+import videojs from "video.js";
+import Player from "video.js/dist/types/player";
+import "video.js/dist/video-js.css";
+import ControlBar from "../ControlBar";
+import {
+  SoftBuildersVideoPlayerChapter,
+  SoftBuildersVideoPlayerNote,
+  SoftBuildersVideoPlayerOptions,
+} from "../../types";
+
+import "./style/style.css";
+import "../../styles/tailwind.css";
+import { SoftBuildersVideoPlayerProvider } from "./provider";
+import BigPlayButton from "../BigPlayButton";
+
+let bigPlayButtonRoot: {
+  [key: string]: ReactDOM.Root | undefined;
+} = {};
+
+const renderBigPlayButton = (
+  id: string,
+  player: Player | undefined,
+  isPaused: boolean,
+  setIsPaused: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+  const container = document.getElementById(`video-container-${id}`);
+  if (container) {
+    const element: any = container.querySelector(".vjs-big-play-button");
+    if (element) {
+      if (!bigPlayButtonRoot[id]) {
+        // If bigPlayButtonRoot hasn't been created, create it
+        bigPlayButtonRoot[id] = ReactDOM.createRoot(element as HTMLElement);
+      }
+
+      bigPlayButtonRoot[id].render(
+        <BigPlayButton
+          player={player}
+          isPaused={isPaused}
+          setIsPaused={setIsPaused}
+        />
+      );
+    }
+  }
+};
+
+let controlBarRoot: {
+  [key: string]: ReactDOM.Root | undefined;
+} = {};
+
+const renderControlBar = <T,>(
+  id: string,
+  player: Player | undefined,
+  isPaused: boolean,
+  setIsPaused: React.Dispatch<React.SetStateAction<boolean>>,
+  duration: number,
+  notes: SoftBuildersVideoPlayerNote[],
+  chapters: SoftBuildersVideoPlayerChapter[],
+  seekStep: number = 5,
+  handleSaveNoteAction?: (time: number, note: string) => Promise<T>
+) => {
+  const container = document.getElementById(`video-container-${id}`);
+  if (container) {
+    const element: any = container.querySelector(".vjs-control-bar");
+    if (element) {
+      if (!controlBarRoot[id]) {
+        // If controlBarRoot hasn't been created, create it
+        controlBarRoot[id] = ReactDOM.createRoot(element as HTMLElement);
+      }
+
+      element.style.display = "block";
+      controlBarRoot[id].render(
+        <SoftBuildersVideoPlayerProvider>
+          <ControlBar
+            player={player}
+            isPaused={isPaused}
+            setIsPaused={setIsPaused}
+            duration={duration}
+            notes={notes}
+            chapters={chapters}
+            seekStep={seekStep}
+            handleSaveNoteAction={handleSaveNoteAction}
+          />
+        </SoftBuildersVideoPlayerProvider>
+      );
+    }
+  }
+};
+
+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;
+};
+
+const VideoPlayerComponent = <T,>({
+  id,
+  options,
+  notes,
+  chapters,
+  startTime = 0,
+  handleSaveNoteAction,
+  onPlay,
+  onPause,
+}: Props<T>) => {
+  const videoRef = useRef<any>(undefined);
+  const playerRef = useRef<Player | undefined>(undefined);
+
+  const [isReady, setIsReady] = useState(false);
+  const [isPaused, setIsPaused] = useState(!options.autoplay);
+  const [duration, setDuratoin] = useState(1);
+
+  const onReady = (player: 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 as Player);
+      });
+    }
+
+    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?.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 (
+    <div
+      id={`video-container-${id}`}
+      className="sb-relative sb-rounded-md sb-overflow-hidden"
+    >
+      <div data-vjs-player>
+        <div ref={videoRef} />
+      </div>
+    </div>
+  );
+};
+
+export default VideoPlayerComponent;

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

@@ -13,6 +13,6 @@ interface SoftBuildersVideoPlayerContextType {
 }
 export declare const SoftBuildersVideoPlayerProvider: ({ children, }: {
     children: ReactNode;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useSoftBuildersVideoPlayerContext: () => SoftBuildersVideoPlayerContextType;
 export {};

package/dist/components/VideoPlayerComponent/provider.js

@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useState, useEffect, } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, } from "react";
 const SoftBuildersVideoPlayerContext = createContext(undefined);
 // Create a provider component
 export const SoftBuildersVideoPlayerProvider = ({ children, }) => {
@@ -11,7 +12,7 @@ export const SoftBuildersVideoPlayerProvider = ({ children, }) => {
     useEffect(() => {
         setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
     }, [downloadedBufferTime]);
-    return (React.createElement(SoftBuildersVideoPlayerContext.Provider, { value: {
+    return (_jsx(SoftBuildersVideoPlayerContext.Provider, { value: {
             player,
             setPlayer,
             duration,
@@ -23,7 +24,7 @@ export const SoftBuildersVideoPlayerProvider = ({ children, }) => {
             downloadedBufferTime,
             setDownloadedBufferTimeufferTime,
             downloadedBufferPercentage,
-        } }, children));
+        }, children: children }));
 };
 // Custom hook to use the context
 export const useSoftBuildersVideoPlayerContext = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EACV,QAAQ,EAER,SAAS,GACV,MAAM,OAAO,CAAC;AAuBf,MAAM,8BAA8B,GAAG,aAAa,CAElD,SAAS,CAAC,CAAC;AAEb,8BAA8B;AAC9B,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,EAC9C,QAAQ,GAGT,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACpD,mDAAmD;IACnD,MAAM,CAAC,oBAAoB,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC7E,MAAM,CAAC,0BAA0B,EAAE,6BAA6B,CAAC,GAC/D,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,6BAA6B,CAAC,CAAC,oBAAoB,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,oBAAC,8BAA8B,CAAC,QAAQ,IACtC,KAAK,EAAE;YACL,MAAM;YACN,SAAS;YACT,QAAQ;YACR,WAAW;YACX,WAAW;YACX,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC5D,YAAY;YACZ,eAAe;YACf,oBAAoB;YACpB,gCAAgC;YAChC,0BAA0B;SAC3B,IAEA,QAAQ,CAC+B,CAC3C,CAAC;AACJ,CAAC,CAAC;AAEF,iCAAiC;AACjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,EAAE;IACpD,MAAM,OAAO,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAC;IAC3D,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,0FAA0F,CAC3F,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/provider.tsx"],"names":[],"mappings":";AAAA,OAAc,EACZ,aAAa,EACb,UAAU,EACV,QAAQ,EAER,SAAS,GACV,MAAM,OAAO,CAAC;AAuBf,MAAM,8BAA8B,GAAG,aAAa,CAElD,SAAS,CAAC,CAAC;AAEb,8BAA8B;AAC9B,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,EAC9C,QAAQ,GAGT,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACpD,mDAAmD;IACnD,MAAM,CAAC,oBAAoB,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC7E,MAAM,CAAC,0BAA0B,EAAE,6BAA6B,CAAC,GAC/D,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,6BAA6B,CAAC,CAAC,oBAAoB,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,KAAC,8BAA8B,CAAC,QAAQ,IACtC,KAAK,EAAE;YACL,MAAM;YACN,SAAS;YACT,QAAQ;YACR,WAAW;YACX,WAAW;YACX,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC5D,YAAY;YACZ,eAAe;YACf,oBAAoB;YACpB,gCAAgC;YAChC,0BAA0B;SAC3B,YAEA,QAAQ,GAC+B,CAC3C,CAAC;AACJ,CAAC,CAAC;AAEF,iCAAiC;AACjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,EAAE;IACpD,MAAM,OAAO,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAC;IAC3D,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,0FAA0F,CAC3F,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/dist/components/VideoPlayerComponent/provider.tsx

@@ -0,0 +1,82 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} 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>>;
+
+  // isPaused: boolean;
+  // setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
+
+  downloadedBufferPercentage: number;
+  downloadedBufferTime: number;
+  setDownloadedBufferTimeufferTime: React.Dispatch<
+    React.SetStateAction<number>
+  >;
+}
+
+const SoftBuildersVideoPlayerContext = createContext<
+  SoftBuildersVideoPlayerContextType | undefined
+>(undefined);
+
+// Create a provider component
+export const SoftBuildersVideoPlayerProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [player, setPlayer] = useState<Player | undefined>(undefined);
+  const [currentTime, setCurrentTime] = useState<number>(0);
+  const [duration, setDuration] = useState<number>(1);
+  // const [isPaused, setIsPaused] = useState(false);
+  const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
+  const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
+    useState(0);
+
+  useEffect(() => {
+    setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
+  }, [downloadedBufferTime]);
+
+  return (
+    <SoftBuildersVideoPlayerContext.Provider
+      value={{
+        player,
+        setPlayer,
+        duration,
+        setDuration,
+        currentTime,
+        setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
+        // isPaused,
+        // setIsPaused,
+        downloadedBufferTime,
+        setDownloadedBufferTimeufferTime,
+        downloadedBufferPercentage,
+      }}
+    >
+      {children}
+    </SoftBuildersVideoPlayerContext.Provider>
+  );
+};
+
+// 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;
+};