softbuilders-react-video-player 1.2.4 → 1.2.6

package/dist/components/VideoPlayerComponent/index.tsx

@@ -4,6 +4,8 @@ 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 { isEqual } from "lodash";
+
 import {
   SoftBuildersVideoPlayerChapter,
   SoftBuildersVideoPlayerNote,
@@ -13,8 +15,7 @@ import "./style/style.css";
 import "../../styles/tailwind.css";
 import { SoftBuildersVideoPlayerProvider } from "./provider";
 import BigPlayButton from "../BigPlayButton";
-import { isEqual } from "lodash";
-
+import { use } from "video.js/dist/types/tech/middleware";
 let bigPlayButtonRoot: {
   [key: string]: ReactDOM.Root | undefined;
 } = {};
@@ -69,27 +70,21 @@ const renderControlBar = <T,>(
   noteButtonClick?: (e: any) => void
 ) => {
   const container = document.getElementById(`video-container-${id}`);
-  console.log("container: ", container);
-
   if (container) {
-    console.log("container1: ");
-
     container.style.height = "100%";
     container.style.aspectRatio = "16 / 9";
     const element: any = container.querySelector(".vjs-control-bar");
     if (element) {
-      console.log("container2: ");
-
       if (!controlBarRoot[id]) {
+        console.log("pooklo");
+
         controlBarRoot[id] = ReactDOM.createRoot(element as HTMLElement);
-        element.style.display = "flex";
-        element.style.height = "100%";
-        element.style.alignItems = "flex-end";
       }
-
+      element.style.display = "flex";
       element.style.opacity = opacity;
       element.style.backgroundColor = `${bgColor} !important`;
-
+      element.style.height = "100%";
+      element.style.alignItems = "flex-end";
       controlBarRoot[id].render(
         <SoftBuildersVideoPlayerProvider>
           <ControlBar
@@ -128,8 +123,8 @@ export type Props<T = any> = {
   bottomRedBar?: boolean;
   childRef?: React.Ref<HTMLDivElement>;
   noteButtonClick?: (e: any) => void;
+  videoID?: string;
 };
-
 const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
   (
     {
@@ -146,11 +141,14 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
       childRef,
       bottomRedBar = true,
       noteButtonClick,
+      videoID,
     }: Props,
-    ref?: any
+    ref: any
   ) => {
     const videoRef = useRef<any>(undefined);
     const playerRef = useRef<Player | undefined>(undefined);
+    const idRef = useRef<any | undefined>(undefined);
+
     const [isReady, setIsReady] = useState(false);
     const [isPaused, setIsPaused] = useState(!options.autoplay);
     const [duration, setDuration] = useState(1);
@@ -159,15 +157,15 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
     const [bgColor, setBgColor] = useState("transparent");
     const [isQualityMenuOpen, setIsQualityMenuOpen] = useState(false);
     const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
     const [isNoteOpen, setNoteOpen] = useState(false);
-    console.log("notes", notes);
-
     const onReady = (player: Player) => {
-      console.log("onReady: ", onReady);
       if (playerRef) {
         playerRef.current = player;
         setIsReady(true);
+
         player?.currentTime(startTime);
+        console.log("startTime: ", startTime);
 
         player.on("waiting", () => {});
         player.on("dispose", () => {
@@ -180,42 +178,32 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
         });
       }
     };
+    useEffect(() => {
+      if (!playerRef.current) {
+        const videoElement = document.createElement("video-js");
 
-    const initializePlayer = () => {
-      const videoElement = document.createElement("video-js");
-      videoElement.setAttribute("playsinline", "true");
-      videoElement.classList.add("vjs-big-play-centered");
-      if (poster) {
-        videoElement.setAttribute("poster", poster);
-      }
-      videoRef.current.appendChild(videoElement);
-      videoElement.style.width = "100%";
-      videoElement.style.height = "100%";
+        videoElement.setAttribute("playsinline", "true");
 
-      playerRef.current = videojs(videoElement, options, () => {
-        playerRef.current?.currentTime(startTime);
-      });
-      onReady(playerRef.current);
-    };
-    useEffect(() => {
-      if (playerRef.current) {
-        if (!isEqual(playerRef.current.poster_, poster)) {
-          playerRef.current.dispose();
-          console.log("dispose: ");
-          playerRef.current = undefined;
+        videoElement.classList.add("vjs-big-play-centered");
+        // Set the poster attribute here
+        if (poster) {
+          videoElement.setAttribute("poster", poster);
         }
+        videoRef.current.appendChild(videoElement);
+        videoElement.style.width = "100%";
+        videoElement.style.height = "100%";
+        videoElement.style.objectFit = "cover";
+        playerRef.current = videojs(videoElement, options, () => {
+          onReady(playerRef.current as Player);
+        });
       }
-      initializePlayer();
-      console.log("initializePlayer: ghhh");
-    }, [options]);
-    useEffect(() => {
       return () => {
         if (playerRef.current) {
-          console.log(playerRef.current, options, "jk");
-          if (!isEqual(playerRef.current.poster_, poster)) {
+          if (!isEqual(idRef?.current?.sources ?? "", options.sources)) {
+            idRef.current = options;
             playerRef.current.dispose();
-            console.log("dispose7: ");
             playerRef.current = undefined;
+            console.log("dispose8: ");
             setTimeout(() => {
               if (bigPlayButtonRoot[id]) {
                 bigPlayButtonRoot[id].unmount();
@@ -227,60 +215,74 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
               }
             }, 0);
           }
+
+          // setTimeout(() => {
+          //   if (bigPlayButtonRoot[id]) {
+          //     bigPlayButtonRoot[id].unmount();
+          //     bigPlayButtonRoot[id] = undefined;
+          //   }
+          //   if (controlBarRoot[id]) {
+          //     controlBarRoot[id].unmount();
+          //     controlBarRoot[id] = undefined;
+          //   }
+          // }, 0);
         }
       };
     }, [options]);
+    // Added poster to dependency array
+
+    useEffect(() => {
+      if (playerRef.current) {
+        console.log("time");
+
+        playerRef.current.currentTime(startTime);
+      }
+    }, [startTime]);
     useEffect(() => {
       if (playerRef.current && isReady) {
         const currentTime = playerRef.current.currentTime() || 0;
+        console.log("currentTime: ", currentTime);
         if (isPaused) {
           if (onPause) onPause(currentTime);
         } else {
           if (onPlay) onPlay(currentTime);
         }
       }
-    }, [isPaused, isReady]);
+    }, [isPaused]);
 
     useEffect(() => {
-      if (isReady) {
-        const controlBarTimeout = setTimeout(() => {
-          console.log("isReady: ", isReady);
-
-          renderControlBar(
-            id,
-            playerRef.current,
-            isPaused,
-            setIsPaused,
-            duration,
-            notes,
-            chapters,
-            5,
-            handleSaveNoteAction,
-            opacity,
-            (e: any) => {
-              handlePlayerClick(e, true);
-            },
-            bgColor,
-            setIsQualityMenuOpen,
-            setIsSubtitleMenuOpen,
-            disableNote,
-            setNoteOpen,
-            noteButtonClick
-          );
-        }, 0);
-        return () => clearTimeout(controlBarTimeout);
-      }
+      const controlBarTimeout = setTimeout(() => {
+        renderControlBar(
+          id,
+          playerRef.current,
+          isPaused,
+          setIsPaused,
+          duration,
+          notes,
+          chapters,
+          5,
+          handleSaveNoteAction,
+          opacity,
+          (e: any) => {
+            handlePlayerClick(e, true);
+          },
+          bgColor,
+          setIsQualityMenuOpen,
+          setIsSubtitleMenuOpen,
+          disableNote,
+          setNoteOpen,
+          noteButtonClick
+        );
+      }, 0);
+      return () => clearTimeout(controlBarTimeout);
     }, [
-      id,
-      playerRef,
       isPaused,
       setIsPaused,
       notes,
-      chapters,
-      isReady,
       handleSaveNoteAction,
       duration,
       opacity,
+      isReady,
     ]);
     useEffect(() => {
       if (isReady) {
@@ -295,36 +297,32 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
         }, 500);
         return () => clearTimeout(playButtonTimeout);
       }
-    }, [id, isPaused, isReady, opacity, options, notes]);
+    }, [isPaused, opacity, isReady, options]);
     useEffect(() => {
       if (playerRef.current) {
-        playerRef.current.dispose();
-        console.log("dispose7: ");
-        playerRef.current = undefined;
-        setTimeout(() => {
-          if (bigPlayButtonRoot[id]) {
-            bigPlayButtonRoot[id].unmount();
-            bigPlayButtonRoot[id] = undefined;
-          }
-          if (controlBarRoot[id]) {
-            controlBarRoot[id].unmount();
-            controlBarRoot[id] = undefined;
-          }
-        }, 0);
         const intervalId = setInterval(() => {
           if (playerRef.current) setIsPaused(playerRef.current.paused());
         }, 500);
         return () => clearInterval(intervalId);
       }
     }, []);
-    useEffect(() => {
-      if (playerRef.current) {
-        playerRef.current?.currentTime(startTime);
-        console.log("startTimenotes: ", startTime);
-        playerRef.current?.play();
-      }
-    }, [startTime]);
-
+    // useEffect(() => {
+    //   return () => {
+    //     if (playerRef.current) {
+    //       playerRef.current.dispose();
+    //       playerRef.current = undefined;
+    //       // Cleanup play button and control bar renders
+    //       if (bigPlayButtonRoot[id]) {
+    //         bigPlayButtonRoot[id].unmount();
+    //         bigPlayButtonRoot[id] = undefined;
+    //       }
+    //       if (controlBarRoot[id]) {
+    //         controlBarRoot[id].unmount();
+    //         controlBarRoot[id] = undefined;
+    //       }
+    //     }
+    //   };
+    // }, []);
     const timeoutRef = useRef<any>(null);
     useEffect(() => {
       if (isQualityMenuOpen || isSubtitleMenuOpen) {
@@ -343,14 +341,26 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
         }, 3000);
       }
     }, [isQualityMenuOpen, isSubtitleMenuOpen]);
-
     useEffect(() => {
-      console.log("notes: ", notes);
-    }, [notes]);
+      console.log("isNoteOpen: ", isNoteOpen);
+
+      if (isNoteOpen) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      } else {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = setTimeout(() => {
+          setIsControlBarPresent(false);
+        }, 3000);
+      }
+    }, [isNoteOpen]);
 
     const handlePlayerClick = async (e: any, isTimerOnly = false) => {
       e.preventDefault();
-
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
@@ -372,8 +382,6 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
       if (playerRef.current) {
         if (playerRef.current.paused()) {
           try {
-            // startTime && playerRef.current.currentTime(startTime);
-            console.log("startTime: ", startTime);
             await playerRef.current.play();
             setIsPaused(false);
           } catch (error) {
@@ -421,12 +429,12 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
     }, []);
 
     const [timeSeeker, setTimeSeeker] = useState<string>("0");
-
     useEffect(() => {
       const updateTimeSeeker = () => {
-        if (playerRef.current) {
+        if (playerRef.current && isReady) {
           const currentTime = playerRef.current.currentTime();
           const duration = playerRef.current.duration();
+          console.log("duration: ", duration, currentTime);
 
           if (duration && currentTime !== undefined) {
             setTimeSeeker(`${(currentTime / duration) * 100}%`);
@@ -445,10 +453,12 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
       <div
         ref={videoRefs}
         id={`video-container-${id}`}
-        onMouseMove={(e) => {
-          handlePlayerClick(e, true);
+        onMouseMove={() => {
+          !isNoteOpen ? handlePlayerClick(event, true) : "";
         }}
         className="sb-relative sb-rounded-md  sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 "
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
         {bottomRedBar && (
           <div

package/dist/index.d.mts

@@ -52,6 +52,7 @@ type Props<T = any> = {
     bottomRedBar?: boolean;
     childRef?: React$1.Ref<HTMLDivElement>;
     noteButtonClick?: (e: any) => void;
+    videoId?: string;
 };
 declare const SoftBuildersVideoPlayer: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Props<any> & React$1.RefAttributes<HTMLDivElement>>>;