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

Comparing version 1.2.0 to 1.2.1

dist/components/Slider/index.d.ts

@@ -6,6 +6,7 @@ import React, { InputHTMLAttributes } from "react";
     handleValueChange: React.ChangeEventHandler<HTMLInputElement>;
+    handleSliderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     min?: number;
     max?: number;
 } & InputHTMLAttributes<HTMLInputElement>;
-declare const Slider: ({ value, handleValueChange, min, max, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Slider: ({ value, handleValueChange, min, max, className, handleSliderClick, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Slider;

dist/components/Slider/index.js

@@ -15,5 +15,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 const Slider = (_a) => {
-    var { value, handleValueChange, min = 0, max = 100, className } = _a, rest = __rest(_a, ["value", "handleValueChange", "min", "max", "className"]);
-    return (_jsx("input", Object.assign({ type: "range", min: min, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
+    var { value, handleValueChange, min = 0, max = 100, className, handleSliderClick = () => { } } = _a, rest = __rest(_a, ["value", "handleValueChange", "min", "max", "className", "handleSliderClick"]);
+    return (_jsx("input", Object.assign({ type: 'range', min: min, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
             e.stopPropagation();
+            handleSliderClick(e);
         }, onMouseUp: (e) => e.stopPropagation(), max: max, value: value, onChange: (e) => {
@@ -20,0 +21,0 @@ e.preventDefault();

dist/components/SoftBuildersVideoPlayer/index.js

@@ -5,2 +5,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { convertSRTtoVTT } from "../../utils";
+import { isEqual } from "lodash";
 const DEFAULT_OPTIONS = {
@@ -76,4 +77,6 @@ autoplay: false,
 const SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
-    return (prevProps.options === nextProps.options &&
-        // prevProps.notes === nextProps.notes &&
+    console.log(isEqual(prevProps.options, nextProps.options, "oooop"));
+    console.log(nextProps.notes, prevProps.notes, "oooop");
+    return (isEqual(prevProps.options, nextProps.options) &&
+        prevProps.notes === nextProps.notes &&
         prevProps.chapters === nextProps.chapters &&
@@ -80,0 +83,0 @@ prevProps.startTime === nextProps.startTime);

dist/components/TimeSlider/index.js

@@ -19,2 +19,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     };
+    const handleSliderClick = (e) => {
+        const slider = e.currentTarget; // Get the slider element
+        const rect = slider.getBoundingClientRect(); // Get the bounding rect of the slider
+        const offsetX = e.clientX - rect.left; // Get the click position relative to the slider
+        const newTimeSlider = (offsetX / rect.width) * DEFERENCE; // Calculate the new slider value
+        // Update the time using the same function
+        const time = (newTimeSlider * duration) / DEFERENCE;
+        player === null || player === void 0 ? void 0 : player.currentTime(time);
+        setTimeSlider(newTimeSlider); // Update the state to reflect the change
+    };
     useEffect(() => {
@@ -47,5 +57,5 @@ const intervalId = setInterval(() => {
     }, [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, 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: `
@@ -52,0 +62,0 @@ linear-gradient(to right,

dist/components/VideoPlayerComponent/index.js

@@ -11,2 +11,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import BigPlayButton from "../BigPlayButton";
+import { isEqual } from "lodash";
 let bigPlayButtonRoot = {};
@@ -62,2 +63,3 @@ const renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") => {
     const [isNoteOpen, setNoteOpen] = useState(false);
+    console.log("notes", notes);
     const onReady = (player) => {
@@ -92,14 +94,40 @@ console.log("onReady: ", onReady);
             var _a;
-            setIsReady(true);
             (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.currentTime(startTime);
         });
+        onReady(playerRef.current);
     };
     useEffect(() => {
         if (playerRef.current) {
-            playerRef.current.dispose();
-            playerRef.current = undefined;
+            if (!isEqual(playerRef.current.poster_, poster)) {
+                playerRef.current.dispose();
+                console.log("dispose: ");
+                playerRef.current = undefined;
+            }
         }
         initializePlayer();
+        console.log("initializePlayer: ghhh");
     }, [options]);
     useEffect(() => {
+        return () => {
+            if (playerRef.current) {
+                console.log(playerRef.current, options, "jk");
+                if (!isEqual(playerRef.current.poster_, poster)) {
+                    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);
+                }
+            }
+        };
+    }, [options]);
+    useEffect(() => {
         if (playerRef.current && isReady) {
@@ -120,2 +148,3 @@ const currentTime = playerRef.current.currentTime() || 0;
             const controlBarTimeout = setTimeout(() => {
+                console.log("isReady: ", isReady);
                 renderControlBar(id, playerRef.current, isPaused, setIsPaused, duration, notes, chapters, 5, handleSaveNoteAction, opacity, (e) => {
@@ -146,3 +175,3 @@ handlePlayerClick(e, true);
         }
-    }, [id, isPaused, isReady, opacity]);
+    }, [id, isPaused, isReady, opacity, options, notes]);
     useEffect(() => {
@@ -165,23 +194,2 @@ if (playerRef.current) {
     }, [startTime]);
-    useEffect(() => {
-        return () => {
-            if (playerRef.current) {
-                // Defer cleanup to avoid flushSync issues during rendering
-                setTimeout(() => {
-                    var _a;
-                    if (bigPlayButtonRoot[id]) {
-                        bigPlayButtonRoot[id].unmount();
-                        bigPlayButtonRoot[id] = undefined;
-                    }
-                    if (controlBarRoot[id]) {
-                        controlBarRoot[id].unmount();
-                        controlBarRoot[id] = undefined;
-                    }
-                    // Dispose the player after custom elements are cleaned up
-                    (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
-                    playerRef.current = undefined;
-                }, 0);
-            }
-        };
-    }, []);
     const timeoutRef = useRef(null);
@@ -206,4 +214,3 @@ useEffect(() => {
     useEffect(() => {
-        if (playerRef.current) {
-        }
+        console.log("notes: ", notes);
     }, [notes]);
@@ -210,0 +217,0 @@ const handlePlayerClick = async (e, isTimerOnly = false) => {

package.json

 {
   "name": "softbuilders-react-video-player",
   "description": "Standalone video player component",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
@@ -27,2 +27,3 @@ "types": "dist/index.d.ts",
   "dependencies": {
+    "lodash": "^4.17.21",
     "typescript": "^5.6.2",
@@ -29,0 +30,0 @@ "video.js": "^8.18.0"

No alert changes

Improved metrics

Total package byte prevSize

350194

increased by1.44%

Lines of code

7627

increased by0.94%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedlodash@^4.17.21

• + Addedlodash@4.17.21(transitive)