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

Comparing version 1.1.73 to 1.1.74

dist/components/ControlBar/index.js

@@ -76,2 +76,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
                             });
+                        player.pause();
                     } }) })), _jsx(TooltipModal, { width: width, content: _jsx("p", { children: "Subtitle" }), children: _jsx(SubtitleMenu, { width: width, onClick: (e, isOpen) => {
@@ -78,0 +79,0 @@ setVolumeToggler(!volumeSliderToggler);

dist/components/CreateNoteMenu/index.d.ts

@@ -0,1 +1,2 @@
+import React from "react";
 type Props<T> = {
@@ -9,3 +10,3 @@ handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
 };
-declare const CreateNoteMenu: <T>({ handleSaveNoteAction, width, setNoteOpen, noteButtonClick, onMouseEnter, onMouseLeave, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
-export default CreateNoteMenu;
+declare const _default: React.MemoExoticComponent<(<T>({ handleSaveNoteAction, width, setNoteOpen, noteButtonClick, onMouseEnter, onMouseLeave, }: Props<T>) => import("react/jsx-runtime").JSX.Element)>;
+export default _default;

dist/components/CreateNoteMenu/index.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import React, { useState } from "react";
 import MenuButton from "../MenuButton";
@@ -22,3 +22,3 @@ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 };
-export default CreateNoteMenu;
+export default React.memo(CreateNoteMenu);
 //# sourceMappingURL=index.js.map

dist/components/MenuButton/index.js

@@ -31,3 +31,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     return (_jsxs("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: "sb-relative  sb-flex sb-items-end", children: [_jsx("button", { ref: buttonRef, onClick: (e) => {
-                    isOpen && e.stopPropagation();
+                    e.stopPropagation();
                     // if (!disablePopUp) {
@@ -37,3 +37,3 @@ toggleMenu();
                     // }
-                    noteButtonClick && noteButtonClick(!isOpen);
+                    noteButtonClick && noteButtonClick(true);
                 }, "aria-haspopup": "true", "aria-expanded": isOpen, "aria-label": "Open menu", children: buttonContent }), !disablePopUp && isOpen && (_jsx("div", { ref: menuRef, role: "menu", "aria-orientation": "vertical", "aria-labelledby": "Open menu", className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`, children: menuContent }))] }));
@@ -40,0 +40,0 @@ };

dist/components/NoteTooltip/index.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Tooltip from "../Tooltip";
@@ -8,14 +8,17 @@ import { durationFormater } from "../../utils";
     const [open, setOpen] = useState(false);
-    const { currentTime } = useSoftBuildersVideoPlayerContext();
-    useEffect(() => {
-        if (currentTime === Math.floor(note.time)) {
-            setOpen(true);
-            setTimeout(() => {
-                setOpen(false);
-            }, 5000);
-        }
-    }, [currentTime, note.time]);
-    return (_jsx("div", { 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) })] }) }) }) }));
+    const { currentTime, player } = useSoftBuildersVideoPlayerContext();
+    const handleValueChange = () => {
+        player === null || player === void 0 ? void 0 : player.currentTime(note.time);
+    };
+    // useEffect(() => {
+    //   if (currentTime === Math.floor(note.time)) {
+    //     setOpen(true);
+    //     setTimeout(() => {
+    //       setOpen(false);
+    //     }, 5000);
+    //   }
+    // }, [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) })] }) }) }) }));
 };
 export default NoteTooltip;
 //# sourceMappingURL=index.js.map

dist/components/SoftBuildersVideoPlayer/index.js

@@ -76,3 +76,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
     return (prevProps.options === nextProps.options &&
-        prevProps.notes === nextProps.notes &&
+        // prevProps.notes === nextProps.notes &&
         prevProps.chapters === nextProps.chapters &&
@@ -79,0 +79,0 @@ prevProps.startTime === nextProps.startTime);

dist/components/VideoPlayerComponent/index.js

@@ -29,3 +29,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     const container = document.getElementById(`video-container-${id}`);
+    console.log("container: ", container);
     if (container) {
+        console.log("container1: ");
         container.style.height = "100%";
@@ -35,10 +37,11 @@ container.style.aspectRatio = "16 / 9";
         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(_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 }) }));
@@ -59,5 +62,5 @@ }
     const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
     const [isNoteOpen, setNoteOpen] = useState(false);
     const onReady = (player) => {
+        console.log("onReady: ", onReady);
         if (playerRef) {
@@ -95,18 +98,2 @@ playerRef.current = 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
@@ -132,3 +119,3 @@ useEffect(() => {
                 }, bgColor, setIsQualityMenuOpen, setIsSubtitleMenuOpen, disableNote, setNoteOpen, noteButtonClick);
-            }, 500);
+            }, 0);
             return () => clearTimeout(controlBarTimeout);
@@ -166,2 +153,10 @@ }
     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 () => {
@@ -206,19 +201,8 @@ if (playerRef.current) {
     useEffect(() => {
-        console.log("isNoteOpen: ", isNoteOpen);
-        if (isNoteOpen) {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
+        if (playerRef.current) {
         }
-        else {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            timeoutRef.current = setTimeout(() => {
-                setIsControlBarPresent(false);
-            }, 3000);
-        }
-    }, [isNoteOpen]);
+    }, [notes]);
     const handlePlayerClick = async (e, isTimerOnly = false) => {
         e.preventDefault();
+        console.log("handlePlayerClick: ", isTimerOnly);
         if (timeoutRef.current) {
@@ -293,5 +277,4 @@ clearTimeout(timeoutRef.current);
         const updateTimeSeeker = () => {
-            var _a;
-            if (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) {
-                const currentTime = (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.currentTime();
+            if (playerRef.current) {
+                const currentTime = playerRef.current.currentTime();
                 const duration = playerRef.current.duration();
@@ -306,9 +289,8 @@ if (duration && currentTime !== undefined) {
         };
-        // Set up an interval to update the seeker
         const interval = setInterval(updateTimeSeeker, 500); // Update every 500ms
         return () => clearInterval(interval); // Cleanup interval on unmount
     }, [playerRef]);
-    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: {
+    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: {
                     width: timeSeeker,
@@ -315,0 +297,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.1.73",
+  "version": "1.1.74",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

342743

decreased by-0.49%

Lines of code

7509

decreased by-0.6%

No dependency changes