softbuilders-react-video-player 1.1.54 → 1.1.56

package/dist/components/VideoPlayerComponent/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import videojs from "video.js";
 import Player from "video.js/dist/types/player";
@@ -111,70 +111,161 @@ export type Props<T = any> = {
   onPlay?: (time: number) => void;
   onPause?: (time: number) => void;
   disableNote?: boolean;
+  childRef?: React.Ref<HTMLDivElement>;
 };
-const VideoPlayerComponent = <T,>({
-  id,
-  options,
-  notes,
-  chapters,
-  startTime = 0,
-  handleSaveNoteAction,
-  poster,
-  onPlay,
-  onPause,
-  disableNote,
-}: 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, setDuration] = useState(1);
-  const [opacity, setOpacity] = useState("0");
-  const [isControlBarPresent, setIsControlBarPresent] = useState(true);
-  const [bgColor, setBgColor] = useState("transparent");
-  const [isQualityMenuOpen, setIsQualityMenuOpen] = useState(false);
-  const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const onReady = (player: Player) => {
-    if (playerRef) {
-      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() || 0;
-        setDuration(d);
-      });
-    }
-  };
-  useEffect(() => {
-    if (!playerRef.current) {
-      const videoElement = document.createElement("video-js");
+const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
+  ({
+    id,
+    options,
+    notes,
+    chapters,
+    startTime = 0,
+    handleSaveNoteAction,
+    poster,
+    onPlay,
+    onPause,
+    disableNote,
+    childRef,
+  }: Props) => {
+    const videoRef = useRef<any>(undefined);
+    const playerRef = useRef<Player | undefined>(undefined);
+    const [isReady, setIsReady] = useState(false);
+    const [isPaused, setIsPaused] = useState(!options.autoplay);
+    const [duration, setDuration] = useState(1);
+    const [opacity, setOpacity] = useState("0");
+    const [isControlBarPresent, setIsControlBarPresent] = useState(true);
+    const [bgColor, setBgColor] = useState("transparent");
+    const [isQualityMenuOpen, setIsQualityMenuOpen] = useState(false);
+    const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const onReady = (player: Player) => {
+      if (playerRef) {
+        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() || 0;
+          setDuration(d);
+        });
+      }
+    };
+    useEffect(() => {
+      if (!playerRef.current) {
+        const videoElement = document.createElement("video-js");
+
+        videoElement.setAttribute("playsinline", "true");
 
-      videoElement.setAttribute("playsinline", "true");
+        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);
+        });
+      }
+      return () => {
+        if (playerRef.current) {
+          playerRef.current.dispose();
+          playerRef.current = undefined;
+          setTimeout(() => {
+            if (bigPlayButtonRoot[id]) {
+              bigPlayButtonRoot[id].unmount();
+              bigPlayButtonRoot[id] = undefined;
+            }
+            if (controlBarRoot[id]) {
+              controlBarRoot[id].unmount();
+              controlBarRoot[id] = undefined;
+            }
+          }, 0);
+        }
+      };
+    }, [options, poster]); // Added poster to dependency array
+    useEffect(() => {
+      if (playerRef.current && isReady) {
+        const currentTime = playerRef.current.currentTime() || 0;
+        if (isPaused) {
+          if (onPause) onPause(currentTime);
+        } else {
+          if (onPlay) onPlay(currentTime);
+        }
+      }
+    }, [isPaused, isReady]);
 
-      videoElement.classList.add("vjs-big-play-centered");
-      // Set the poster attribute here
-      if (poster) {
-        videoElement.setAttribute("poster", poster);
+    useEffect(() => {
+      if (isReady) {
+        const controlBarTimeout = setTimeout(() => {
+          renderControlBar(
+            id,
+            playerRef.current,
+            isPaused,
+            setIsPaused,
+            duration,
+            notes,
+            chapters,
+            5,
+            handleSaveNoteAction,
+            opacity,
+            (e: any) => {
+              handlePlayerClick(e, true);
+            },
+            bgColor,
+            setIsQualityMenuOpen,
+            setIsSubtitleMenuOpen,
+            disableNote
+          );
+        }, 500);
+        return () => clearTimeout(controlBarTimeout);
       }
-      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);
-      });
-    }
-    return () => {
+    }, [
+      id,
+      playerRef,
+      isPaused,
+      setIsPaused,
+      notes,
+      chapters,
+      isReady,
+      handleSaveNoteAction,
+      duration,
+      opacity,
+    ]);
+    useEffect(() => {
+      if (isReady) {
+        const playButtonTimeout = setTimeout(() => {
+          renderBigPlayButton(
+            id,
+            playerRef.current,
+            isPaused,
+            setIsPaused,
+            opacity
+          );
+        }, 500);
+        return () => clearTimeout(playButtonTimeout);
+      }
+    }, [id, isPaused, isReady, opacity]);
+    useEffect(() => {
       if (playerRef.current) {
-        playerRef.current.dispose();
-        playerRef.current = undefined;
-        setTimeout(() => {
+        const intervalId = setInterval(() => {
+          if (playerRef.current) setIsPaused(playerRef.current.paused());
+        }, 500);
+        return () => clearInterval(intervalId);
+      }
+    }, []);
+    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;
@@ -183,234 +274,149 @@ const VideoPlayerComponent = <T,>({
             controlBarRoot[id].unmount();
             controlBarRoot[id] = undefined;
           }
-        }, 0);
-      }
-    };
-  }, [options, poster]); // Added poster to dependency array
-  useEffect(() => {
-    if (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,
-          opacity,
-          (e: any) => {
-            handlePlayerClick(e, true);
-          },
-          bgColor,
-          setIsQualityMenuOpen,
-          setIsSubtitleMenuOpen,
-          disableNote
-        );
-      }, 500);
-      return () => clearTimeout(controlBarTimeout);
-    }
-  }, [
-    id,
-    playerRef,
-    isPaused,
-    setIsPaused,
-    notes,
-    chapters,
-    isReady,
-    handleSaveNoteAction,
-    duration,
-    opacity,
-  ]);
-  useEffect(() => {
-    if (isReady) {
-      const playButtonTimeout = setTimeout(() => {
-        renderBigPlayButton(
-          id,
-          playerRef.current,
-          isPaused,
-          setIsPaused,
-          opacity
-        );
-      }, 500);
-      return () => clearTimeout(playButtonTimeout);
-    }
-  }, [id, isPaused, isReady, opacity]);
-  useEffect(() => {
-    if (playerRef.current) {
-      const intervalId = setInterval(() => {
-        if (playerRef.current) setIsPaused(playerRef.current.paused());
-      }, 500);
-      return () => clearInterval(intervalId);
-    }
-  }, []);
-  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) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        setOpacity("100");
+      } else {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
         }
+        setOpacity("0");
+
+        timeoutRef.current = setTimeout(() => {
+          setIsControlBarPresent(false);
+        }, 3000);
       }
-    };
-  }, []);
-  const timeoutRef = useRef<any>(null);
-  useEffect(() => {
-    if (isQualityMenuOpen || isSubtitleMenuOpen) {
+    }, [isQualityMenuOpen, isSubtitleMenuOpen]);
+
+    const handlePlayerClick = async (e: any, isTimerOnly = false) => {
+      e.preventDefault();
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
       setOpacity("100");
-    } else {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      setOpacity("0");
-
+      setIsControlBarPresent(true);
+      // setBgColor("rgba(200, 200, 200, 0.5)");
+      // not using now
       timeoutRef.current = setTimeout(() => {
+        setOpacity("0");
+        setBgColor("transparent");
         setIsControlBarPresent(false);
       }, 3000);
-    }
-  }, [isQualityMenuOpen, isSubtitleMenuOpen]);
-
-  const handlePlayerClick = async (e: any, isTimerOnly = false) => {
-    e.preventDefault();
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setOpacity("100");
-    setIsControlBarPresent(true);
-    // setBgColor("rgba(200, 200, 200, 0.5)");
-    // not using now
-    timeoutRef.current = setTimeout(() => {
-      setOpacity("0");
-      setBgColor("transparent");
-      setIsControlBarPresent(false);
-    }, 3000);
-    if (isTimerOnly) {
-      return;
-    }
-    if (!isControlBarPresent) {
-      return;
-    }
-    if (playerRef.current) {
-      if (playerRef.current.paused()) {
-        try {
-          await playerRef.current.play();
-          setIsPaused(false);
-        } catch (error) {
-          console.error("Failed to play video:", error);
+      if (isTimerOnly) {
+        return;
+      }
+      if (!isControlBarPresent) {
+        return;
+      }
+      if (playerRef.current) {
+        if (playerRef.current.paused()) {
+          try {
+            await playerRef.current.play();
+            setIsPaused(false);
+          } catch (error) {
+            console.error("Failed to play video:", error);
+          }
+        } else {
+          playerRef.current.pause();
+          setIsPaused(true);
+          if (onPause) onPause(playerRef.current.currentTime() || 0);
         }
-      } else {
-        playerRef.current.pause();
-        setIsPaused(true);
-        if (onPause) onPause(playerRef.current.currentTime() || 0);
       }
-    }
-  };
-  const videoRefs = useRef<HTMLDivElement>(null); // Create a reference for the element
+    };
+    const videoRefs = useRef<HTMLDivElement>(null); // Create a reference for the element
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting === false) {
-            if (playerRef?.current?.paused() === false) {
-              try {
-                playerRef?.current?.pause();
-                setIsPaused(true);
-              } catch (error) {
-                console.error("Failed to play video:", error);
+    useEffect(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting === false) {
+              if (playerRef?.current?.paused() === false) {
+                try {
+                  playerRef?.current?.pause();
+                  setIsPaused(true);
+                } catch (error) {
+                  console.error("Failed to play video:", error);
+                }
               }
             }
-          }
-        });
-      },
-      {
-        threshold: 0.1, // The amount of the component that must be visible (0.1 means 10% visible)
-      }
-    );
-
-    if (videoRefs.current) {
-      observer.observe(videoRefs.current); // Start observing the component
-    }
+          });
+        },
+        {
+          threshold: 0.1, // The amount of the component that must be visible (0.1 means 10% visible)
+        }
+      );
 
-    return () => {
       if (videoRefs.current) {
-        observer.unobserve(videoRef.current); // Clean up the observer when the component unmounts
+        observer.observe(videoRefs.current); // Start observing the component
       }
-    };
-  }, []);
 
-  const [timeSeeker, setTimeSeeker] = useState<string>("0");
-  useEffect(() => {
-    const updateTimeSeeker = () => {
-      if (playerRef?.current) {
-        const currentTime = playerRef.current?.currentTime?.();
-        const duration = playerRef.current?.duration?.();
+      return () => {
+        if (videoRefs.current) {
+          observer.unobserve(videoRef.current); // Clean up the observer when the component unmounts
+        }
+      };
+    }, []);
 
-        if (duration && currentTime !== undefined) {
-          const value = `${(currentTime / duration) * 100}%`;
-          setTimeSeeker(value);
-        } else {
-          setTimeSeeker("0");
+    const [timeSeeker, setTimeSeeker] = useState<string>("0");
+    useEffect(() => {
+      const updateTimeSeeker = () => {
+        if (playerRef?.current) {
+          const currentTime = playerRef.current?.currentTime?.();
+          const duration = playerRef.current?.duration?.();
+
+          if (duration && currentTime !== undefined) {
+            const value = `${(currentTime / duration) * 100}%`;
+            setTimeSeeker(value);
+          } else {
+            setTimeSeeker("0");
+          }
         }
-      }
-    };
-    updateTimeSeeker();
-  }, [playerRef?.current?.currentTime()]);
+      };
+      updateTimeSeeker();
+    }, [playerRef?.current?.currentTime()]);
 
-  return (
-    <div
-      ref={videoRefs}
-      id={`video-container-${id}`}
-      onMouseMove={() => {
-        handlePlayerClick(event, true);
-      }}
-      className="sb-relative  sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 "
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
+    return (
       <div
-        className={`sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${
-          opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"
-        }`}
-        style={{
-          width: timeSeeker,
+        ref={videoRefs}
+        id={`video-container-${id}`}
+        onMouseMove={() => {
+          handlePlayerClick(event, true);
         }}
-      ></div>
-      <div
-        className="hover:sb-cursor-pointer sb-w-full sb-h-full"
-        // Attach click event
-        data-vjs-player
+        className="sb-relative sb-rounded-md  sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 "
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
         <div
+          ref={childRef}
           onClick={handlePlayerClick}
-          ref={videoRef}
-          className="sb-h-full sb-w-full sb-relative"
+          className={`sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${
+            opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"
+          }`}
+          style={{
+            width: timeSeeker,
+          }}
         ></div>
+        <div
+          className="hover:sb-cursor-pointer sb-w-full sb-h-full"
+          // Attach click event
+          data-vjs-player
+        >
+          <div
+            onClick={handlePlayerClick}
+            ref={videoRef}
+            className="sb-h-full sb-w-full sb-relative"
+          ></div>
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 export default VideoPlayerComponent;

package/dist/index.d.mts

@@ -1,5 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React$1 from 'react';
 
 type SoftBuildersVideoPlayerSource = {
     src: string;
@@ -25,6 +24,7 @@ type SoftBuildersVideoPlayerOptions = {
     tracks?: SoftBuildersVideoPlayerTrack[];
     width?: number;
     height?: number;
+    childRef?: React.Ref<HTMLDivElement>;
 };
 interface SoftBuildersVideoPlayerNote {
     time: number;
@@ -46,7 +46,8 @@ type Props<T = any> = {
     onPause?: (time: number) => void;
     isFocused?: boolean;
     disableNote?: boolean;
+    childRef?: React$1.Ref<HTMLDivElement>;
 };
-declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, isFocused, disableNote, }: Props<T>) => react_jsx_runtime.JSX.Element)>;
+declare const SoftBuildersVideoPlayer: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Props<any> & React$1.RefAttributes<HTMLDivElement>>>;
 
 export { type SoftBuildersVideoPlayerChapter, type SoftBuildersVideoPlayerNote, type SoftBuildersVideoPlayerOptions, type SoftBuildersVideoPlayerSource, type SoftBuildersVideoPlayerTrack, SoftBuildersVideoPlayer as default };