softbuilders-react-video-player 1.1.72 → 1.1.74

package/dist/index.mjs

@@ -31,7 +31,14 @@ var __objRest = (source, exclude) => {
 };
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
-import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState15 } from "react";
+import {
+  forwardRef as forwardRef2,
+  memo,
+  useCallback as useCallback4,
+  useEffect as useEffect15,
+  useMemo,
+  useState as useState15
+} from "react";
 
 // src/components/VideoPlayerComponent/index.tsx
 import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState14 } from "react";
@@ -521,7 +528,7 @@ var VolumeSlider = ({
   const [volume, setVolume] = useState2(0);
   useEffect2(() => {
     const updateVolumeState = () => {
-      const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number(player == null ? void 0 : player.volume()) * 100;
+      const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number((player == null ? void 0 : player.volume()) || 0) * 100;
       setVolume(currentVolume);
     };
     updateVolumeState();
@@ -635,8 +642,8 @@ var MenuButton = ({
     setIsOpen(false);
   }, []);
   useEffect3(() => {
-    const handleClickOutside = (event2) => {
-      if (buttonRef.current && !buttonRef.current.contains(event2.target) && menuRef.current && !menuRef.current.contains(event2.target)) {
+    const handleClickOutside = (event) => {
+      if (buttonRef.current && !buttonRef.current.contains(event.target) && menuRef.current && !menuRef.current.contains(event.target)) {
         setIsOpen(false);
       }
     };
@@ -661,10 +668,10 @@ var MenuButton = ({
           {
             ref: buttonRef,
             onClick: (e) => {
-              isOpen && e.stopPropagation();
+              e.stopPropagation();
               toggleMenu();
               onClick && onClick(e, !isOpen);
-              noteButtonClick && noteButtonClick(!isOpen);
+              noteButtonClick && noteButtonClick(true);
             },
             "aria-haspopup": "true",
             "aria-expanded": isOpen,
@@ -808,7 +815,7 @@ var QualityMenu = ({ width, onClick }) => {
 var QualityMenu_default = QualityMenu;
 
 // src/components/CreateNoteMenu/index.tsx
-import { useState as useState5 } from "react";
+import React5, { useState as useState5 } from "react";
 import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
 var CreateNoteMenu = ({
   handleSaveNoteAction,
@@ -878,13 +885,13 @@ var CreateNoteMenu = ({
     }
   );
 };
-var CreateNoteMenu_default = CreateNoteMenu;
+var CreateNoteMenu_default = React5.memo(CreateNoteMenu);
 
 // src/components/NotesPanal/index.tsx
 import { useEffect as useEffect6, useState as useState7 } from "react";
 
 // src/components/NoteTooltip/index.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useState as useState6 } from "react";
 
 // src/components/Tooltip/index.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -904,18 +911,14 @@ var Tooltip_default = Tooltip;
 import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
 var NoteTooltip = ({ note }) => {
   const [open, setOpen] = useState6(false);
-  const { currentTime } = useSoftBuildersVideoPlayerContext();
-  useEffect5(() => {
-    if (currentTime === Math.floor(note.time)) {
-      setOpen(true);
-      setTimeout(() => {
-        setOpen(false);
-      }, 5e3);
-    }
-  }, [currentTime, note.time]);
+  const { currentTime, player } = useSoftBuildersVideoPlayerContext();
+  const handleValueChange = () => {
+    player == null ? void 0 : player.currentTime(note.time);
+  };
   return /* @__PURE__ */ jsx24(
     "div",
     {
+      onClick: handleValueChange,
       className: "sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30",
       style: { left: `${note.percentage}%` },
       onMouseEnter: () => setOpen(true),
@@ -1472,6 +1475,7 @@ var ControlBar = ({
                 time: Number((player == null ? void 0 : player.currentTime()) || 0),
                 isOpen: e
               });
+              player.pause();
             }
           }
         ) }),
@@ -1555,19 +1559,22 @@ var controlBarRoot = {};
 var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => {
 }, bgColor = "transparent", setIsQualityMenuOpen, setIsSubtitleMenuOpen, disableNote, setNoteOpen, noteButtonClick) => {
   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 = container.querySelector(".vjs-control-bar");
     if (element) {
+      console.log("container2: ");
       if (!controlBarRoot[id]) {
         controlBarRoot[id] = ReactDOM.createRoot(element);
+        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(
         /* @__PURE__ */ jsx36(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx36(
           ControlBar_default,
@@ -1609,7 +1616,6 @@ var VideoPlayerComponent = forwardRef(
     bottomRedBar = true,
     noteButtonClick
   }, ref) => {
-    var _a;
     const videoRef = useRef2(void 0);
     const playerRef = useRef2(void 0);
     const [isReady, setIsReady] = useState14(false);
@@ -1620,9 +1626,9 @@ var VideoPlayerComponent = forwardRef(
     const [bgColor, setBgColor] = useState14("transparent");
     const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
     const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
-    const [isHovered, setIsHovered] = useState14(false);
     const [isNoteOpen, setNoteOpen] = useState14(false);
     const onReady = (player) => {
+      console.log("onReady: ", onReady);
       if (playerRef) {
         playerRef.current = player;
         setIsReady(true);
@@ -1655,20 +1661,6 @@ var VideoPlayerComponent = forwardRef(
           onReady(playerRef.current);
         });
       }
-      return () => {
-        if (playerRef.current) {
-          setTimeout(() => {
-            if (bigPlayButtonRoot[id]) {
-              bigPlayButtonRoot[id].unmount();
-              bigPlayButtonRoot[id] = void 0;
-            }
-            if (controlBarRoot[id]) {
-              controlBarRoot[id].unmount();
-              controlBarRoot[id] = void 0;
-            }
-          }, 0);
-        }
-      };
     }, [options, poster]);
     useEffect14(() => {
       if (playerRef.current && isReady) {
@@ -1704,7 +1696,7 @@ var VideoPlayerComponent = forwardRef(
             setNoteOpen,
             noteButtonClick
           );
-        }, 500);
+        }, 0);
         return () => clearTimeout(controlBarTimeout);
       }
     }, [
@@ -1741,19 +1733,30 @@ var VideoPlayerComponent = forwardRef(
         return () => clearInterval(intervalId);
       }
     }, []);
+    useEffect14(() => {
+      var _a, _b;
+      if (playerRef.current) {
+        (_a = playerRef.current) == null ? void 0 : _a.currentTime(startTime);
+        console.log("startTimenotes: ", startTime);
+        (_b = playerRef.current) == null ? void 0 : _b.play();
+      }
+    }, [startTime]);
     useEffect14(() => {
       return () => {
         if (playerRef.current) {
-          playerRef.current.dispose();
-          playerRef.current = void 0;
-          if (bigPlayButtonRoot[id]) {
-            bigPlayButtonRoot[id].unmount();
-            bigPlayButtonRoot[id] = void 0;
-          }
-          if (controlBarRoot[id]) {
-            controlBarRoot[id].unmount();
-            controlBarRoot[id] = void 0;
-          }
+          setTimeout(() => {
+            var _a;
+            if (bigPlayButtonRoot[id]) {
+              bigPlayButtonRoot[id].unmount();
+              bigPlayButtonRoot[id] = void 0;
+            }
+            if (controlBarRoot[id]) {
+              controlBarRoot[id].unmount();
+              controlBarRoot[id] = void 0;
+            }
+            (_a = playerRef.current) == null ? void 0 : _a.dispose();
+            playerRef.current = void 0;
+          }, 0);
         }
       };
     }, []);
@@ -1775,22 +1778,12 @@ var VideoPlayerComponent = forwardRef(
       }
     }, [isQualityMenuOpen, isSubtitleMenuOpen]);
     useEffect14(() => {
-      console.log("isNoteOpen: ", isNoteOpen);
-      if (isNoteOpen) {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-      } else {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
-          setIsControlBarPresent(false);
-        }, 3e3);
+      if (playerRef.current) {
       }
-    }, [isNoteOpen]);
+    }, [notes]);
     const handlePlayerClick = async (e, isTimerOnly = false) => {
       e.preventDefault();
+      console.log("handlePlayerClick: ", isTimerOnly);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
@@ -1828,9 +1821,9 @@ var VideoPlayerComponent = forwardRef(
       const observer = new IntersectionObserver(
         (entries) => {
           entries.forEach((entry) => {
-            var _a2, _b;
+            var _a, _b;
             if (entry.isIntersecting === false) {
-              if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.paused()) === false) {
+              if (((_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.paused()) === false) {
                 try {
                   (_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
                   setIsPaused(true);
@@ -1858,31 +1851,28 @@ var VideoPlayerComponent = forwardRef(
     const [timeSeeker, setTimeSeeker] = useState14("0");
     useEffect14(() => {
       const updateTimeSeeker = () => {
-        var _a2, _b, _c, _d;
-        if (playerRef == null ? void 0 : playerRef.current) {
-          const currentTime = (_b = (_a2 = playerRef.current) == null ? void 0 : _a2.currentTime) == null ? void 0 : _b.call(_a2);
-          const duration2 = (_d = (_c = playerRef.current) == null ? void 0 : _c.duration) == null ? void 0 : _d.call(_c);
+        if (playerRef.current) {
+          const currentTime = playerRef.current.currentTime();
+          const duration2 = playerRef.current.duration();
           if (duration2 && currentTime !== void 0) {
-            const value = `${currentTime / duration2 * 100}%`;
-            setTimeSeeker(value);
+            setTimeSeeker(`${currentTime / duration2 * 100}%`);
           } else {
             setTimeSeeker("0");
           }
         }
       };
-      updateTimeSeeker();
-    }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
+      const interval = setInterval(updateTimeSeeker, 500);
+      return () => clearInterval(interval);
+    }, [playerRef]);
     return /* @__PURE__ */ jsxs15(
       "div",
       {
         ref: videoRefs,
         id: `video-container-${id}`,
-        onMouseMove: () => {
-          !isNoteOpen ? handlePlayerClick(event, true) : "";
+        onMouseMove: (e) => {
+          handlePlayerClick(e, 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),
         children: [
           bottomRedBar && /* @__PURE__ */ jsx36(
             "div",
@@ -1944,48 +1934,38 @@ var Component = forwardRef2(
     bottomRedBar,
     noteButtonClick
   }, ref) => {
-    options = __spreadProps(__spreadValues({}, options), {
-      responsive: true,
-      inactivityTimeout: 0,
-      fullscreen: {
-        navigationUI: "hide"
-      }
-    });
-    if (options.autoplay === void 0)
-      options.autoplay = DEFAULT_OPTIONS.autoplay;
-    if (options.controls === void 0)
-      options.controls = DEFAULT_OPTIONS.controls;
-    if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
-    if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
-    if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
-    if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
+    const mergedOptions = useMemo(
+      () => __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options), {
+        responsive: true,
+        inactivityTimeout: 0,
+        fullscreen: { navigationUI: "hide" }
+      }),
+      [options]
+    );
     const [tracks, setTracks] = useState15([]);
-    useEffect15(() => {
-    }, [isFocused]);
-    useEffect15(() => {
-      const getTracks = async () => {
-        const newTracks = [];
-        if (Array.isArray(options == null ? void 0 : options.tracks))
-          for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
-            let src = s.src;
-            if (s.memeType == "text/srt") {
-              src = await convertSRTtoVTT(s.src);
-            }
-            newTracks.push(__spreadProps(__spreadValues({}, s), {
-              src
-            }));
+    const getTracks = useCallback4(async () => {
+      const newTracks = [];
+      if (Array.isArray(mergedOptions.tracks)) {
+        for (const s of mergedOptions.tracks) {
+          let src = s.src;
+          if (s.memeType === "text/srt") {
+            src = await convertSRTtoVTT(s.src);
           }
-        setTracks(newTracks);
-      };
+          newTracks.push(__spreadProps(__spreadValues({}, s), { src }));
+        }
+      }
+      setTracks(newTracks);
+    }, [mergedOptions.tracks]);
+    useEffect15(() => {
       getTracks();
-    }, [options == null ? void 0 : options.tracks]);
-    const id = (Date.now() + Math.random() * 100).toString();
+    }, [getTracks]);
+    const id = useMemo(() => (Date.now() + Math.random() * 100).toString(), []);
     return /* @__PURE__ */ jsx37(
       VideoPlayerComponent_default,
       {
         id,
         chapters,
-        options: __spreadProps(__spreadValues({}, options), { tracks }),
+        options: __spreadProps(__spreadValues({}, mergedOptions), { tracks }),
         notes,
         poster: "",
         startTime,
@@ -2001,7 +1981,8 @@ var Component = forwardRef2(
   }
 );
 var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
-  return prevProps.options === nextProps.options && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
+  return prevProps.options === nextProps.options && // prevProps.notes === nextProps.notes &&
+  prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
 });
 var SoftBuildersVideoPlayer_default = SoftBuildersVideoPlayer;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "softbuilders-react-video-player",
   "description": "Standalone video player component",
-  "version": "1.1.72",
+  "version": "1.1.74",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -33,6 +33,7 @@
     "@swc/core": "^1.7.26",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "@types/video.js": "^7.3.58",
     "autoprefixer": "^10.4.20",
     "concurrently": "^9.0.1",
     "copyfiles": "^2.4.1",