@nikelroot/video-player 0.1.8 → 0.1.10

package/dist/index.cjs

@@ -864,9 +864,13 @@ 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);
   const setTimeD = (0, import_react3.useRef)(
     createThrottledNumberFn((value) => {
       const v = videoRef.current;
@@ -930,20 +934,28 @@ var VideoPlayerBase = (props, ref) => {
     },
     [onActiveChange]
   );
+  (0, import_react3.useEffect)(() => {
+    onTimeChangeRef.current = onTimeChange;
+  }, [onTimeChange]);
+  (0, import_react3.useEffect)(() => {
+    onDurationChangeRef.current = onDurationChange;
+  }, [onDurationChange]);
   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;
@@ -1438,6 +1450,14 @@ var VideoPlayerBase = (props, ref) => {
       destroy();
     };
   }, [destroy]);
+  const lastActiveState = (0, import_react3.useRef)(active);
+  (0, import_react3.useEffect)(() => {
+    const prevActive = lastActiveState.current;
+    lastActiveState.current = active;
+    if (active === true && prevActive !== true) {
+      void playAction();
+    }
+  }, [active, playAction]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     VideoPlayerStyles,
     {

package/dist/index.js

@@ -835,9 +835,13 @@ 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);
   const setTimeD = useRef2(
     createThrottledNumberFn((value) => {
       const v = videoRef.current;
@@ -901,20 +905,28 @@ var VideoPlayerBase = (props, ref) => {
     },
     [onActiveChange]
   );
+  useEffect(() => {
+    onTimeChangeRef.current = onTimeChange;
+  }, [onTimeChange]);
+  useEffect(() => {
+    onDurationChangeRef.current = onDurationChange;
+  }, [onDurationChange]);
   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;
@@ -1409,6 +1421,14 @@ var VideoPlayerBase = (props, ref) => {
       destroy();
     };
   }, [destroy]);
+  const lastActiveState = useRef2(active);
+  useEffect(() => {
+    const prevActive = lastActiveState.current;
+    lastActiveState.current = active;
+    if (active === true && prevActive !== true) {
+      void playAction();
+    }
+  }, [active, playAction]);
   return /* @__PURE__ */ jsxs2(
     VideoPlayerStyles,
     {

package/package.json

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