@nikelroot/video-player 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -864,9 +864,15 @@ var VideoPlayerBase = (props, ref) => {
   const [reloadToken, setReloadToken] = (0, import_react3.useState)(0);
   const playing = playingProp != null ? playingProp : playingState;
   const muted = mutedProp != null ? mutedProp : mutedState;
+  const isDurationControlled = durationProp !== void 0;
+  const isCurrentTimeControlled = currentTimeProp !== void 0;
   const duration = durationProp != null ? durationProp : durationState;
   const currentTime = currentTimeProp != null ? currentTimeProp : currentTimeState;
   const fullscreenAllowed = active != null ? active : true;
+  const onTimeChangeRef = (0, import_react3.useRef)(onTimeChange);
+  const onDurationChangeRef = (0, import_react3.useRef)(onDurationChange);
+  onTimeChangeRef.current = onTimeChange;
+  onDurationChangeRef.current = onDurationChange;
   const setTimeD = (0, import_react3.useRef)(
     createThrottledNumberFn((value) => {
       const v = videoRef.current;
@@ -931,19 +937,21 @@ var VideoPlayerBase = (props, ref) => {
     [onActiveChange]
   );
   const onTime = (0, import_react3.useCallback)(() => {
+    var _a;
     const el = videoRef.current;
     if (!el) return;
     const nextTime = Number.isFinite(el.currentTime) ? el.currentTime : 0;
-    if (currentTimeProp === void 0) setCurrentTimeState(nextTime);
-    onTimeChange == null ? void 0 : onTimeChange(nextTime, el);
-  }, [currentTimeProp, onTimeChange]);
+    if (!isCurrentTimeControlled) setCurrentTimeState(nextTime);
+    (_a = onTimeChangeRef.current) == null ? void 0 : _a.call(onTimeChangeRef, nextTime, el);
+  }, [isCurrentTimeControlled]);
   const onDur = (0, import_react3.useCallback)(() => {
+    var _a;
     const el = videoRef.current;
     if (!el) return;
     const nextDuration = Number.isFinite(el.duration) ? el.duration : 0;
-    if (durationProp === void 0) setDurationState(nextDuration);
-    onDurationChange == null ? void 0 : onDurationChange(nextDuration, el);
-  }, [durationProp, onDurationChange]);
+    if (!isDurationControlled) setDurationState(nextDuration);
+    (_a = onDurationChangeRef.current) == null ? void 0 : _a.call(onDurationChangeRef, nextDuration, el);
+  }, [isDurationControlled]);
   const setVideoEl = (0, import_react3.useCallback)(
     (el) => {
       const prev = videoRef.current;
@@ -1440,11 +1448,12 @@ var VideoPlayerBase = (props, ref) => {
   }, [destroy]);
   const lastActiveState = (0, import_react3.useRef)(active);
   (0, import_react3.useEffect)(() => {
-    if (active !== lastActiveState.current) {
-      playAction();
-      lastActiveState.current = active;
+    const prevActive = lastActiveState.current;
+    lastActiveState.current = active;
+    if (active === true && prevActive !== true) {
+      void playAction();
     }
-  }, [active]);
+  }, [active, playAction]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     VideoPlayerStyles,
     {

package/dist/index.js

@@ -835,9 +835,15 @@ var VideoPlayerBase = (props, ref) => {
   const [reloadToken, setReloadToken] = useState(0);
   const playing = playingProp != null ? playingProp : playingState;
   const muted = mutedProp != null ? mutedProp : mutedState;
+  const isDurationControlled = durationProp !== void 0;
+  const isCurrentTimeControlled = currentTimeProp !== void 0;
   const duration = durationProp != null ? durationProp : durationState;
   const currentTime = currentTimeProp != null ? currentTimeProp : currentTimeState;
   const fullscreenAllowed = active != null ? active : true;
+  const onTimeChangeRef = useRef2(onTimeChange);
+  const onDurationChangeRef = useRef2(onDurationChange);
+  onTimeChangeRef.current = onTimeChange;
+  onDurationChangeRef.current = onDurationChange;
   const setTimeD = useRef2(
     createThrottledNumberFn((value) => {
       const v = videoRef.current;
@@ -902,19 +908,21 @@ var VideoPlayerBase = (props, ref) => {
     [onActiveChange]
   );
   const onTime = useCallback(() => {
+    var _a;
     const el = videoRef.current;
     if (!el) return;
     const nextTime = Number.isFinite(el.currentTime) ? el.currentTime : 0;
-    if (currentTimeProp === void 0) setCurrentTimeState(nextTime);
-    onTimeChange == null ? void 0 : onTimeChange(nextTime, el);
-  }, [currentTimeProp, onTimeChange]);
+    if (!isCurrentTimeControlled) setCurrentTimeState(nextTime);
+    (_a = onTimeChangeRef.current) == null ? void 0 : _a.call(onTimeChangeRef, nextTime, el);
+  }, [isCurrentTimeControlled]);
   const onDur = useCallback(() => {
+    var _a;
     const el = videoRef.current;
     if (!el) return;
     const nextDuration = Number.isFinite(el.duration) ? el.duration : 0;
-    if (durationProp === void 0) setDurationState(nextDuration);
-    onDurationChange == null ? void 0 : onDurationChange(nextDuration, el);
-  }, [durationProp, onDurationChange]);
+    if (!isDurationControlled) setDurationState(nextDuration);
+    (_a = onDurationChangeRef.current) == null ? void 0 : _a.call(onDurationChangeRef, nextDuration, el);
+  }, [isDurationControlled]);
   const setVideoEl = useCallback(
     (el) => {
       const prev = videoRef.current;
@@ -1411,11 +1419,12 @@ var VideoPlayerBase = (props, ref) => {
   }, [destroy]);
   const lastActiveState = useRef2(active);
   useEffect(() => {
-    if (active !== lastActiveState.current) {
-      playAction();
-      lastActiveState.current = active;
+    const prevActive = lastActiveState.current;
+    lastActiveState.current = active;
+    if (active === true && prevActive !== true) {
+      void playAction();
     }
-  }, [active]);
+  }, [active, playAction]);
   return /* @__PURE__ */ jsxs2(
     VideoPlayerStyles,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikelroot/video-player",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Standalone React video player with HLS support.",
   "type": "module",
   "main": "./dist/index.cjs",