softbuilders-react-video-player - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

dist/components/ControlBar/index.js

@@ -37,2 +37,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     const togglePlay = (e) => {
+        console.log(player.currentTime());
         e.preventDefault();
@@ -39,0 +40,0 @@ e.stopPropagation();

dist/components/NoteTooltip/index.js

@@ -20,5 +20,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     // }, [currentTime, note.time]);
-    return (_jsx("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), onMouseLeave: () => setOpen(false), children: _jsx("div", { className: "sb-relative", children: _jsx(Tooltip, { open: open, children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [_jsx("p", { children: note.label }), _jsx("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: durationFormater(note.time) })] }) }) }) }));
+    return (_jsx("div", { onClick: handleValueChange, className: "sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30", style: { left: `${note === null || note === void 0 ? void 0 : note.percentage}%` }, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: _jsx("div", { className: "sb-relative", children: _jsx(Tooltip, { open: open, children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [_jsx("p", { children: note === null || note === void 0 ? void 0 : note.label }), _jsx("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: durationFormater(note.time) })] }) }) }) }));
 };
 export default NoteTooltip;
 //# sourceMappingURL=index.js.map

dist/components/QualityMenu/index.js

@@ -7,3 +7,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const QualityOption = ({ isSelected, quality, onClick, width, }) => {
-    return (_jsx("button", { className: `hover:sb-text-orange-500 ${width > 400 ? "sb-p-2" : "sp-pb-1"}`, onClick: onClick, children: _jsxs("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [_jsx("div", { className: "sb-col-span-3", children: isSelected ? (_jsx(CheckedIcon, { className: `${width > 400 ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}` })) : (_jsx("div", {})) }), _jsx("p", { className: "sb-text-left sb-col-span-9", children: quality.label })] }) }));
+    return (_jsx("button", { className: `hover:sb-text-orange-500 ${width > 400 ? "sb-p-2" : "sp-pb-1"}`, onClick: onClick, children: _jsxs("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [_jsx("div", { className: "sb-col-span-3", children: isSelected ? (_jsx(CheckedIcon, { className: `${width > 400 ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}` })) : (_jsx("div", {})) }), _jsx("p", { className: "sb-text-left sb-col-span-9", children: quality === null || quality === void 0 ? void 0 : quality.label })] }) }));
 };
@@ -25,3 +25,5 @@ const QualityMenu = ({ width, onClick }) => {
                 const el = qs === null || qs === void 0 ? void 0 : qs.find((ele) => ele.default);
-                el ? setCurrentQualitySrc(el.label) : setCurrentQualitySrc(qs[0].label);
+                el
+                    ? setCurrentQualitySrc(el === null || el === void 0 ? void 0 : el.label)
+                    : setCurrentQualitySrc(qs[0].label);
             }
@@ -39,12 +41,12 @@ }
                                 }, className: "hover:sb-scale-150", children: _jsx(LeftArrowIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("h3", { children: "Quality" })] }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsx("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities === null || qualities === void 0 ? void 0 : qualities.map((q, i) => {
-                            return (_jsx(QualityOption, { width: width, isSelected: currentQualitySrc === q.label, quality: q, onClick: () => {
-                                    const source = qualities.find((_q) => q.label == _q.label);
+                            return (_jsx(QualityOption, { width: width, isSelected: currentQualitySrc === (q === null || q === void 0 ? void 0 : q.label), quality: q, onClick: () => {
+                                    const source = qualities.find((_q) => (q === null || q === void 0 ? void 0 : q.label) == (_q === null || _q === void 0 ? void 0 : _q.label));
                                     if (source && source.src != currentQualitySrc) {
                                         player === null || player === void 0 ? void 0 : player.src(source.src);
                                         const currentTime = player === null || player === void 0 ? void 0 : player.currentTime();
-                                        setCurrentQualitySrc(source.label);
+                                        setCurrentQualitySrc(source === null || source === void 0 ? void 0 : source.label);
                                         player === null || player === void 0 ? void 0 : player.currentTime(currentTime);
                                         player === null || player === void 0 ? void 0 : player.play();
                                     }
-                                } }, `quality-${q.label}-${i}`));
+                                } }, `quality-${q === null || q === void 0 ? void 0 : q.label}-${i}`));
                         }) })] }) }), close: (fn) => {
@@ -51,0 +53,0 @@ setCloseMenuFunction(() => fn);

dist/components/SoftBuildersVideoPlayer/index.d.ts

@@ -16,4 +16,5 @@ import React from "react";
     noteButtonClick?: (e: any) => void;
+    videoId?: string;
 };
 declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props<any> & React.RefAttributes<HTMLDivElement>>>;
 export default SoftBuildersVideoPlayer;

dist/components/SoftBuildersVideoPlayer/index.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, memo, useCallback, useEffect, useMemo, useState, } from "react";
+import { forwardRef, memo, useEffect, useState } from "react";
 import VideoPlayerComponent from "../VideoPlayerComponent";
@@ -16,64 +16,40 @@ import { convertSRTtoVTT } from "../../utils";
 };
-const Component = forwardRef(({ options, notes, chapters, startTime = 0, handleSaveNoteAction, onPlay, onPause, isFocused = true, disableNote, childRef, bottomRedBar, noteButtonClick, }, ref) => {
-    // options = {
-    //   ...options,
-    //   responsive: true,
-    //   inactivityTimeout: 0,
-    //   fullscreen: {
-    //     navigationUI: "hide",
-    //   },
-    // } as any;
-    const mergedOptions = useMemo(() => (Object.assign(Object.assign(Object.assign({}, DEFAULT_OPTIONS), options), { responsive: true, inactivityTimeout: 0, fullscreen: { navigationUI: "hide" } })), [options]);
-    // if (options.autoplay === undefined)
-    //   options.autoplay = DEFAULT_OPTIONS.autoplay;
-    // if (options.controls === undefined)
-    //   options.controls = DEFAULT_OPTIONS.controls;
-    // if (options.fluid === undefined) options.fluid = DEFAULT_OPTIONS.fluid;
-    // if (options?.muted === undefined) options.muted = DEFAULT_OPTIONS?.muted;
-    // if (options.height === undefined) options.height = DEFAULT_OPTIONS.height;
-    // if (options.width === undefined) options.width = DEFAULT_OPTIONS.width;
-    // const [tracks, setTracks] = useState<SoftBuildersVideoPlayerTrack[]>([]);
-    // useEffect(() => {}, [isFocused]);
-    // useEffect(() => {
-    //   const getTracks = async () => {
-    //     const newTracks: SoftBuildersVideoPlayerTrack[] = [];
-    //     if (Array.isArray(options?.tracks))
-    //       for (const [i, s] of options?.tracks.entries()) {
-    //         let src = s.src;
-    //         if (s.memeType == "text/srt") {
-    //           src = await convertSRTtoVTT(s.src);
-    //         }
-    //         newTracks.push({
-    //           ...s,
-    //           src,
-    //         });
-    //       }
-    //     setTracks(newTracks);
-    //   };
-    //   getTracks();
-    // }, [options?.tracks]);
-    // const id = (Date.now() + Math.random() * 100).toString();
+const Component = forwardRef(({ options, notes, chapters, startTime = 0, handleSaveNoteAction, onPlay, onPause, isFocused = true, disableNote, childRef, bottomRedBar, noteButtonClick, videoId, }) => {
+    options = Object.assign(Object.assign({}, options), { responsive: true, inactivityTimeout: 0, fullscreen: {
+            navigationUI: "hide",
+        } });
+    if (options.autoplay === undefined)
+        options.autoplay = DEFAULT_OPTIONS.autoplay;
+    if (options.controls === undefined)
+        options.controls = DEFAULT_OPTIONS.controls;
+    if (options.fluid === undefined)
+        options.fluid = DEFAULT_OPTIONS.fluid;
+    if ((options === null || options === void 0 ? void 0 : options.muted) === undefined)
+        options.muted = DEFAULT_OPTIONS === null || DEFAULT_OPTIONS === void 0 ? void 0 : DEFAULT_OPTIONS.muted;
+    if (options.height === undefined)
+        options.height = DEFAULT_OPTIONS.height;
+    if (options.width === undefined)
+        options.width = DEFAULT_OPTIONS.width;
     const [tracks, setTracks] = useState([]);
-    const getTracks = useCallback(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);
+    useEffect(() => { }, [isFocused]);
+    useEffect(() => {
+        const getTracks = async () => {
+            const newTracks = [];
+            if (Array.isArray(options === null || options === void 0 ? void 0 : options.tracks))
+                for (const [i, s] of options === null || options === void 0 ? void 0 : options.tracks.entries()) {
+                    let src = s.src;
+                    if (s.memeType == "text/srt") {
+                        src = await convertSRTtoVTT(s.src);
+                    }
+                    newTracks.push(Object.assign(Object.assign({}, s), { src }));
                 }
-                newTracks.push(Object.assign(Object.assign({}, s), { src }));
-            }
-        }
-        setTracks(newTracks);
-    }, [mergedOptions.tracks]);
-    useEffect(() => {
+            setTracks(newTracks);
+        };
         getTracks();
-    }, [getTracks]);
-    const id = useMemo(() => (Date.now() + Math.random() * 100).toString(), []);
-    return (_jsx(VideoPlayerComponent, { id: id, chapters: chapters, options: Object.assign(Object.assign({}, mergedOptions), { tracks }), notes: notes, poster: "", startTime: startTime, handleSaveNoteAction: handleSaveNoteAction, disableNote: disableNote, onPause: onPause, onPlay: onPlay, childRef: childRef, bottomRedBar: bottomRedBar, noteButtonClick: noteButtonClick }));
+    }, [options === null || options === void 0 ? void 0 : options.tracks]);
+    const id = (Date.now() + Math.random() * 100).toString();
+    console.log("id: ", id);
+    return (_jsx(VideoPlayerComponent, { id: "videoID", chapters: chapters, options: Object.assign(Object.assign({}, options), { tracks }), notes: notes, poster: "", startTime: startTime, handleSaveNoteAction: handleSaveNoteAction, disableNote: disableNote, onPause: onPause, onPlay: onPlay, childRef: childRef, bottomRedBar: bottomRedBar, noteButtonClick: noteButtonClick }));
 });
 const SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
-    console.log(isEqual(prevProps.options, nextProps.options));
-    console.log(nextProps.notes, prevProps.notes);
     return (isEqual(prevProps.options, nextProps.options) &&
@@ -80,0 +56,0 @@ prevProps.notes === nextProps.notes &&

dist/components/SubtitleMenu/index.js

@@ -18,3 +18,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
         const newSubtitles = subtitles.map((s) => {
-            if (s.label === textTrack.label) {
+            if ((s === null || s === void 0 ? void 0 : s.label) === (textTrack === null || textTrack === void 0 ? void 0 : textTrack.label)) {
                 s.mode = "showing";
@@ -21,0 +21,0 @@ }

dist/components/TimeSlider/index.js

@@ -38,2 +38,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     }, [player, duration]);
+    // useLayoutEffect(() => {
+    //   const currentTime = player?.currentTime() || 0;
+    //   const time = (currentTime * DEFERENCE) / duration;
+    //   setTimeSlider(time);
+    //   console.log("currentTime: ", time);
+    // }, []);
     const [maskCuttes, setMaskCuttes] = useState("");
@@ -57,5 +63,5 @@ useEffect(() => {
     }, [chapters, duration]);
-    return (_jsxs("div", { className: ' sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center', children: [_jsx("div", { className: 'sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10', children: _jsx(Slider, { value: timeSlider, handleValueChange: handleValueChange, handleSliderClick: handleSliderClick, min: MIN, max: MAX, style: {
+    return (_jsxs("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center", children: [_jsx("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10", children: _jsx(Slider, { value: timeSlider, handleValueChange: handleValueChange, handleSliderClick: handleSliderClick, min: MIN, max: MAX, style: {
                         background: "transparent",
-                    } }) }), _jsx("div", { className: 'sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md', style: {
+                    } }) }), _jsx("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: `
@@ -62,0 +68,0 @@ linear-gradient(to right,

dist/components/VideoPlayerComponent/index.d.ts

@@ -20,4 +20,5 @@ import React from "react";
     noteButtonClick?: (e: any) => void;
+    videoID?: string;
 };
 declare const VideoPlayerComponent: React.ForwardRefExoticComponent<Props<any> & React.RefAttributes<HTMLDivElement>>;
 export default VideoPlayerComponent;

dist/components/VideoPlayerComponent/index.js

@@ -7,2 +7,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ControlBar from "../ControlBar";
+import { isEqual } from "lodash";
 import "./style/style.css";
@@ -12,3 +13,2 @@ import "../../styles/tailwind.css";
 import BigPlayButton from "../BigPlayButton";
-import { isEqual } from "lodash";
 let bigPlayButtonRoot = {};
@@ -32,5 +32,3 @@ const renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") => {
     const container = document.getElementById(`video-container-${id}`);
-    console.log("container: ", container);
     if (container) {
-        console.log("container1: ");
         container.style.height = "100%";
@@ -40,11 +38,11 @@ container.style.aspectRatio = "16 / 9";
         if (element) {
-            console.log("container2: ");
             if (!controlBarRoot[id]) {
+                console.log("pooklo");
                 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(_jsx(SoftBuildersVideoPlayerProvider, { children: _jsx(ControlBar, { id: id, player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction, handleControlDisplayTimer: handleControlDisplayTimer, setIsSubtitleMenuOpen: setIsSubtitleMenuOpen, setIsQualityMenuOpen: setIsQualityMenuOpen, disableNote: disableNote, setNoteOpen: setNoteOpen, noteButtonClick: noteButtonClick }) }));
@@ -54,5 +52,6 @@ }
 };
-const VideoPlayerComponent = forwardRef(({ id, options, notes, chapters, startTime = 0, handleSaveNoteAction, poster, onPlay, onPause, disableNote, childRef, bottomRedBar = true, noteButtonClick, }, ref) => {
+const VideoPlayerComponent = forwardRef(({ id, options, notes, chapters, startTime = 0, handleSaveNoteAction, poster, onPlay, onPause, disableNote, childRef, bottomRedBar = true, noteButtonClick, videoID, }) => {
     const videoRef = useRef(undefined);
     const playerRef = useRef(undefined);
+    const idRef = useRef(undefined);
     const [isReady, setIsReady] = useState(false);
@@ -66,6 +65,5 @@ const [isPaused, setIsPaused] = useState(!options.autoplay);
     const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
     const [isNoteOpen, setNoteOpen] = useState(false);
-    console.log("notes", notes);
     const onReady = (player) => {
-        console.log("onReady: ", onReady);
         if (playerRef) {
@@ -75,2 +73,3 @@ playerRef.current = player;
             player === null || player === void 0 ? void 0 : player.currentTime(startTime);
+            console.log("startTime: ", startTime);
             player.on("waiting", () => { });
@@ -87,37 +86,27 @@ player.on("dispose", () => {
     };
-    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%";
-        playerRef.current = videojs(videoElement, options, () => {
-            var _a;
-            (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.currentTime(startTime);
-        });
-        onReady(playerRef.current);
-    };
     useEffect(() => {
-        if (playerRef.current) {
-            if (!isEqual(playerRef.current.poster_, poster)) {
-                playerRef.current.dispose();
-                console.log("dispose: ");
-                playerRef.current = undefined;
+        if (!playerRef.current) {
+            const videoElement = document.createElement("video-js");
+            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);
+            });
         }
-        initializePlayer();
-        console.log("initializePlayer: ghhh");
-    }, [options]);
-    useEffect(() => {
         return () => {
+            var _a, _b;
             if (playerRef.current) {
-                console.log(playerRef.current, options, "jk");
-                if (!isEqual(playerRef.current.poster_, poster)) {
+                if (!isEqual((_b = (_a = idRef === null || idRef === void 0 ? void 0 : idRef.current) === null || _a === void 0 ? void 0 : _a.sources) !== null && _b !== void 0 ? _b : "", options.sources)) {
+                    idRef.current = options;
                     playerRef.current.dispose();
-                    console.log("dispose7: ");
                     playerRef.current = undefined;
+                    console.log("dispose8: ");
                     setTimeout(() => {
@@ -134,8 +123,26 @@ if (bigPlayButtonRoot[id]) {
                 }
+                // 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) {
@@ -150,24 +157,18 @@ if (onPause)
         }
-    }, [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) => {
-                    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) => {
+                handlePlayerClick(e, true);
+            }, bgColor, setIsQualityMenuOpen, setIsSubtitleMenuOpen, disableNote, setNoteOpen, noteButtonClick);
+        }, 0);
+        return () => clearTimeout(controlBarTimeout);
     }, [
-        id,
-        playerRef,
         isPaused,
         setIsPaused,
         notes,
-        chapters,
-        isReady,
         handleSaveNoteAction,
         duration,
         opacity,
+        isReady,
     ]);
@@ -181,18 +182,5 @@ useEffect(() => {
         }
-    }, [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(() => {
@@ -205,10 +193,19 @@ if (playerRef.current)
     }, []);
-    useEffect(() => {
-        var _a, _b;
-        if (playerRef.current) {
-            (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.currentTime(startTime);
-            console.log("startTimenotes: ", startTime);
-            (_b = playerRef.current) === null || _b === void 0 ? void 0 : _b.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(null);
@@ -233,4 +230,17 @@ useEffect(() => {
     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, isTimerOnly = false) => {
@@ -259,4 +269,2 @@ e.preventDefault();
                 try {
-                    // startTime && playerRef.current.currentTime(startTime);
-                    console.log("startTime: ", startTime);
                     await playerRef.current.play();
@@ -309,5 +317,6 @@ setIsPaused(false);
         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) {
@@ -324,5 +333,5 @@ setTimeSeeker(`${(currentTime / duration) * 100}%`);
     }, [playerRef]);
-    return (_jsxs("div", { ref: videoRefs, id: `video-container-${id}`, onMouseMove: (e) => {
-            handlePlayerClick(e, true);
-        }, className: "sb-relative sb-rounded-md  sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ", children: [bottomRedBar && (_jsx("div", { ref: childRef, onClick: handlePlayerClick, 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: {
+    return (_jsxs("div", { ref: videoRefs, id: `video-container-${id}`, 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), children: [bottomRedBar && (_jsx("div", { ref: childRef, onClick: handlePlayerClick, 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,
@@ -329,0 +338,0 @@ } })), _jsx("div", { className: "hover:sb-cursor-pointer sb-w-full sb-h-full", "data-vjs-player": true, children: _jsx("div", { onClick: handlePlayerClick, ref: videoRef, className: "sb-h-full sb-w-full sb-relative" }) })] }));

package.json

 {
   "name": "softbuilders-react-video-player",
   "description": "Standalone video player component",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

352858

increased by0.23%

Worsened metrics

Lines of code

7633

decreased by-0.43%

No dependency changes