softbuilders-react-video-player 1.1.14 → 1.1.16

package/dist/components/VideoPlayerComponent/provider.tsx

@@ -1,82 +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;
-};
+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;
+};

package/dist/components/VideoPlayerComponent/style/style.css

@@ -1,36 +1,36 @@
-.video-js .vjs-control-bar {
-  background-color: transparent;
-  display: none;
-}
-
-.video-js .vjs-big-play-button {
-  background-color: transparent;
-  display: block;
-  border: none;
-  padding: 0px;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-
-.video-js:hover .vjs-big-play-button {
-  background-color: transparent;
-  border: none;
-  padding: 0px;
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
-}
-
-.vjs-poster {
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  background-color: black;
-}
+.video-js .vjs-control-bar {
+  background-color: transparent;
+  display: none;
+}
+
+.video-js .vjs-big-play-button {
+  background-color: transparent;
+  display: block;
+  border: none;
+  padding: 0px;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.video-js:hover .vjs-big-play-button {
+  background-color: transparent;
+  border: none;
+  padding: 0px;
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.vjs-poster {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  background-color: black;
+}

package/dist/components/VolumeSlider/index.js

@@ -4,7 +4,7 @@ import Slider from "../Slider";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 import { MuteIcon, UnmuteIcon } from "../../images";
 const MIN = 0, MAX = 100;
-const VolumeSlider = ({ width }) => {
+const VolumeSlider = ({ width = 0 }) => {
     const { player } = useSoftBuildersVideoPlayerContext();
     const [isVisible, setVisible] = useState(false);
     const [volume, setVolume] = useState(0);

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

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

package/dist/components/VolumeSlider/index.tsx

@@ -2,44 +2,35 @@ import React, { useEffect, useState } from "react";
 import Slider from "../Slider";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 import { MuteIcon, UnmuteIcon } from "../../images";
-
 const MIN = 0,
   MAX = 100;
-
 type Props = {
   width?: number;
 };
-
-const VolumeSlider = ({ width }: Props) => {
+const VolumeSlider = ({ width = 0 }: Props) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [isVisible, setVisible] = useState(false);
   const [volume, setVolume] = useState(0);
-
   useEffect(() => {
     setVolume(player?.muted() ? 0 : Number(player?.volume()) * 100 || 0);
   }, [player]);
-  const toggleVisiblity = (e) => {
+  const toggleVisiblity = (e: any) => {
     e.preventDefault();
     e.stopPropagation();
     setVisible((prev) => !prev);
   };
-
   const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
     e.stopPropagation();
     const newVolume = Number(e.target.value);
-
     setVolume(newVolume);
-
     player?.volume(newVolume / 100);
-
     if (newVolume === 0) {
       player?.muted(true);
     } else {
       player?.muted(false);
     }
   };
-
   return (
     <div
       className={`sb-flex  sb-flex-col-reverse ${
@@ -91,5 +82,4 @@ const VolumeSlider = ({ width }: Props) => {
     </div>
   );
 };
-
 export default VolumeSlider;

package/dist/index.mjs

@@ -510,7 +510,7 @@ var SubIcon_default = SvgSubIcon;
 import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
 var MIN = 0;
 var MAX = 100;
-var VolumeSlider = ({ width }) => {
+var VolumeSlider = ({ width = 0 }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [isVisible, setVisible] = useState2(false);
   const [volume, setVolume] = useState2(0);
@@ -1129,7 +1129,7 @@ var ControlBar = ({
   handleSaveNoteAction
 }) => {
   const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
-  const [width, setwidth] = useState12(null);
+  const [width, setwidth] = useState12(0);
   const seek = (duration2) => {
     const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
     player == null ? void 0 : player.currentTime(currentTime + duration2);
@@ -1148,7 +1148,6 @@ var ControlBar = ({
   const togglePlay = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    console.log("ok");
     if (isPaused) player == null ? void 0 : player.play();
     else player == null ? void 0 : player.pause();
     setIsPaused(!isPaused);
@@ -1408,7 +1407,7 @@ var VideoPlayerComponent = ({
       } else {
         playerRef.current.pause();
         setIsPaused(true);
-        if (onPause) onPause(playerRef.current.currentTime());
+        if (onPause) onPause(playerRef.current.currentTime() || 0);
       }
     }
   };