@nikelroot/video-player 0.2.6 → 0.2.8

package/dist/index.cjs

@@ -862,6 +862,7 @@ var VideoPlayerBase = (props, ref) => {
   const controlTime = (0, import_react3.useRef)(null);
   const sourceLoadId = (0, import_react3.useRef)(0);
   const sourceLoadMode = (0, import_react3.useRef)("native");
+  const pendingPlay = (0, import_react3.useRef)(false);
   const [playingState, setPlayingState] = (0, import_react3.useState)(!!defaultPlaying);
   const [mutedState, setMutedState] = (0, import_react3.useState)(!!defaultMuted);
   const [durationState, setDurationState] = (0, import_react3.useState)(0);
@@ -907,6 +908,7 @@ var VideoPlayerBase = (props, ref) => {
   }, []);
   const resetMediaForSourceChange = (0, import_react3.useCallback)(() => {
     clearTimers();
+    pendingPlay.current = false;
     if (hlsRef.current) {
       hlsRef.current.destroy();
       hlsRef.current = null;
@@ -920,6 +922,7 @@ var VideoPlayerBase = (props, ref) => {
   const releaseNativeMedia = (0, import_react3.useCallback)(() => {
     const video = videoRef.current;
     if (!video) return;
+    pendingPlay.current = false;
     video.pause();
     if (sourceLoadMode.current !== "native" || !isVideoSourceAttached(video)) return;
     video.removeAttribute("src");
@@ -927,9 +930,11 @@ var VideoPlayerBase = (props, ref) => {
   }, []);
   const ensureNativeMediaAttached = (0, import_react3.useCallback)(() => {
     const video = videoRef.current;
-    if (!video || sourceLoadMode.current !== "native" || isVideoSourceAttached(video)) return;
+    if (!video || sourceLoadMode.current !== "native" || isVideoSourceAttached(video)) return false;
     video.src = videoSrc;
     if (initialTime > 0) video.currentTime = initialTime;
+    video.load();
+    return true;
   }, [initialTime, videoSrc]);
   const setNextPlaying = (0, import_react3.useCallback)(
     (value) => {
@@ -1029,15 +1034,25 @@ var VideoPlayerBase = (props, ref) => {
   const playAction = (0, import_react3.useCallback)(async () => {
     const el = videoRef.current;
     if (!el) return;
+    pendingPlay.current = true;
     pauseOtherVideos(el);
-    ensureNativeMediaAttached();
+    const attachedNativeMedia = ensureNativeMediaAttached();
+    if (sourceLoadMode.current === "native" && !canAttemptPlayback(el)) {
+      if (attachedNativeMedia) clearErrorState();
+      return;
+    }
     try {
       await el.play();
+      pendingPlay.current = false;
       clearErrorState();
       setNextPlaying(true);
       notifyActiveChange(el, "play");
     } catch (e) {
-      if (isInterruptedPlayRequestError(e)) return;
+      if (isInterruptedPlayRequestError(e)) {
+        pendingPlay.current = true;
+        return;
+      }
+      pendingPlay.current = false;
       console.debug(e);
       reportError(e, { type: "play" }, messages.playFailed);
     }
@@ -1065,6 +1080,7 @@ var VideoPlayerBase = (props, ref) => {
   const pauseAction = (0, import_react3.useCallback)(() => {
     const el = videoRef.current;
     if (!el) return;
+    pendingPlay.current = false;
     el.pause();
     setNextPlaying(false);
     notifyActiveChange(el, "pause");
@@ -1393,11 +1409,14 @@ var VideoPlayerBase = (props, ref) => {
     const error = video == null ? void 0 : video.error;
     const src = (video == null ? void 0 : video.currentSrc) || videoSrc;
     if (hlsRef.current && src.startsWith("blob:")) return;
+    pendingPlay.current = false;
     reportError(error, { type: "native", src }, getNativeVideoErrorMessage(error, messages));
   }, [messages, reportError, videoSrc]);
   const videoLoadedHandler = (0, import_react3.useCallback)(() => {
     clearErrorState();
-  }, [clearErrorState]);
+    if (!pendingPlay.current || active === false || !canAttemptPlayback(videoRef.current)) return;
+    void playAction();
+  }, [active, clearErrorState, playAction]);
   const mouseMoveHandler = (0, import_react3.useCallback)(() => {
     if (controlTime.current) clearTimeout(controlTime.current);
     if (!showControlRef.current) {
@@ -1427,7 +1446,6 @@ var VideoPlayerBase = (props, ref) => {
   }, [muted]);
   (0, import_react3.useEffect)(() => {
     if (playingProp === void 0) return;
-    if (!canAttemptPlayback(videoRef.current)) return;
     if (playingProp) void playAction();
     else pauseAction();
   }, [pauseAction, playAction, playingProp]);
@@ -1572,6 +1590,7 @@ var VideoPlayerBase = (props, ref) => {
               onPlay: () => setNextPlaying(true),
               onPause: () => setNextPlaying(false),
               onEnded: () => setNextPlaying(false),
+              onLoadedMetadata: videoLoadedHandler,
               onLoadedData: videoLoadedHandler,
               onCanPlay: videoLoadedHandler,
               onError: videoErrorHandler,

package/dist/index.js

@@ -833,6 +833,7 @@ var VideoPlayerBase = (props, ref) => {
   const controlTime = useRef2(null);
   const sourceLoadId = useRef2(0);
   const sourceLoadMode = useRef2("native");
+  const pendingPlay = useRef2(false);
   const [playingState, setPlayingState] = useState(!!defaultPlaying);
   const [mutedState, setMutedState] = useState(!!defaultMuted);
   const [durationState, setDurationState] = useState(0);
@@ -878,6 +879,7 @@ var VideoPlayerBase = (props, ref) => {
   }, []);
   const resetMediaForSourceChange = useCallback(() => {
     clearTimers();
+    pendingPlay.current = false;
     if (hlsRef.current) {
       hlsRef.current.destroy();
       hlsRef.current = null;
@@ -891,6 +893,7 @@ var VideoPlayerBase = (props, ref) => {
   const releaseNativeMedia = useCallback(() => {
     const video = videoRef.current;
     if (!video) return;
+    pendingPlay.current = false;
     video.pause();
     if (sourceLoadMode.current !== "native" || !isVideoSourceAttached(video)) return;
     video.removeAttribute("src");
@@ -898,9 +901,11 @@ var VideoPlayerBase = (props, ref) => {
   }, []);
   const ensureNativeMediaAttached = useCallback(() => {
     const video = videoRef.current;
-    if (!video || sourceLoadMode.current !== "native" || isVideoSourceAttached(video)) return;
+    if (!video || sourceLoadMode.current !== "native" || isVideoSourceAttached(video)) return false;
     video.src = videoSrc;
     if (initialTime > 0) video.currentTime = initialTime;
+    video.load();
+    return true;
   }, [initialTime, videoSrc]);
   const setNextPlaying = useCallback(
     (value) => {
@@ -1000,15 +1005,25 @@ var VideoPlayerBase = (props, ref) => {
   const playAction = useCallback(async () => {
     const el = videoRef.current;
     if (!el) return;
+    pendingPlay.current = true;
     pauseOtherVideos(el);
-    ensureNativeMediaAttached();
+    const attachedNativeMedia = ensureNativeMediaAttached();
+    if (sourceLoadMode.current === "native" && !canAttemptPlayback(el)) {
+      if (attachedNativeMedia) clearErrorState();
+      return;
+    }
     try {
       await el.play();
+      pendingPlay.current = false;
       clearErrorState();
       setNextPlaying(true);
       notifyActiveChange(el, "play");
     } catch (e) {
-      if (isInterruptedPlayRequestError(e)) return;
+      if (isInterruptedPlayRequestError(e)) {
+        pendingPlay.current = true;
+        return;
+      }
+      pendingPlay.current = false;
       console.debug(e);
       reportError(e, { type: "play" }, messages.playFailed);
     }
@@ -1036,6 +1051,7 @@ var VideoPlayerBase = (props, ref) => {
   const pauseAction = useCallback(() => {
     const el = videoRef.current;
     if (!el) return;
+    pendingPlay.current = false;
     el.pause();
     setNextPlaying(false);
     notifyActiveChange(el, "pause");
@@ -1364,11 +1380,14 @@ var VideoPlayerBase = (props, ref) => {
     const error = video == null ? void 0 : video.error;
     const src = (video == null ? void 0 : video.currentSrc) || videoSrc;
     if (hlsRef.current && src.startsWith("blob:")) return;
+    pendingPlay.current = false;
     reportError(error, { type: "native", src }, getNativeVideoErrorMessage(error, messages));
   }, [messages, reportError, videoSrc]);
   const videoLoadedHandler = useCallback(() => {
     clearErrorState();
-  }, [clearErrorState]);
+    if (!pendingPlay.current || active === false || !canAttemptPlayback(videoRef.current)) return;
+    void playAction();
+  }, [active, clearErrorState, playAction]);
   const mouseMoveHandler = useCallback(() => {
     if (controlTime.current) clearTimeout(controlTime.current);
     if (!showControlRef.current) {
@@ -1398,7 +1417,6 @@ var VideoPlayerBase = (props, ref) => {
   }, [muted]);
   useEffect(() => {
     if (playingProp === void 0) return;
-    if (!canAttemptPlayback(videoRef.current)) return;
     if (playingProp) void playAction();
     else pauseAction();
   }, [pauseAction, playAction, playingProp]);
@@ -1543,6 +1561,7 @@ var VideoPlayerBase = (props, ref) => {
               onPlay: () => setNextPlaying(true),
               onPause: () => setNextPlaying(false),
               onEnded: () => setNextPlaying(false),
+              onLoadedMetadata: videoLoadedHandler,
               onLoadedData: videoLoadedHandler,
               onCanPlay: videoLoadedHandler,
               onError: videoErrorHandler,

package/package.json

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