@nikelroot/video-player 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -854,6 +854,7 @@ var VideoPlayerBase = (props, ref) => {
   const liveStabilityMode = (0, import_react3.useRef)(false);
   const liveStallEvents = (0, import_react3.useRef)([]);
   const controlTime = (0, import_react3.useRef)(null);
+  const sourceLoadId = (0, import_react3.useRef)(0);
   const [playingState, setPlayingState] = (0, import_react3.useState)(!!defaultPlaying);
   const [mutedState, setMutedState] = (0, import_react3.useState)(!!defaultMuted);
   const [durationState, setDurationState] = (0, import_react3.useState)(0);
@@ -871,6 +872,8 @@ var VideoPlayerBase = (props, ref) => {
   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;
@@ -892,6 +895,18 @@ var VideoPlayerBase = (props, ref) => {
       controlTime.current = null;
     }
   }, []);
+  const resetMediaForSourceChange = (0, import_react3.useCallback)(() => {
+    clearTimers();
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    const video = videoRef.current;
+    if (!video) return;
+    video.pause();
+    video.removeAttribute("src");
+    video.load();
+  }, [clearTimers]);
   const setNextPlaying = (0, import_react3.useCallback)(
     (value) => {
       if (playingProp === void 0) setPlayingState(value);
@@ -934,12 +949,6 @@ 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;
@@ -1088,7 +1097,7 @@ var VideoPlayerBase = (props, ref) => {
     );
   }, [hlsConfig, hlsCredentials, live, liveHlsConfig, vodHlsConfig]);
   const loadVideo = (0, import_react3.useCallback)(
-    async (startAt = initialTime) => {
+    async (startAt = initialTime, loadId = sourceLoadId.current) => {
       const startVideoRef = videoRef.current;
       if (!startVideoRef) return;
       let HlsCtor;
@@ -1098,13 +1107,16 @@ var VideoPlayerBase = (props, ref) => {
         reportError(error, { type: "hls-loader", src: videoSrc }, messages.streamLoadFailed);
         return;
       }
+      if (loadId !== sourceLoadId.current) return;
       if (!videoRef.current || videoRef.current !== startVideoRef) return;
       const video = videoRef.current;
       if (!video) return;
       const h = new HlsCtor(resolvedHlsConfig());
       hlsRef.current = h;
+      const isStaleLoad = () => loadId !== sourceLoadId.current || hlsRef.current !== h || videoRef.current !== video;
       h.on(HlsCtor.Events.ERROR, (_evt, data) => {
         var _a, _b;
+        if (isStaleLoad()) return;
         const { type: errorType, details, fatal } = data;
         if (details === HlsCtor.ErrorDetails.BUFFER_APPEND_ERROR || details === "bufferAppendingError") return;
         if (!fatal) {
@@ -1125,7 +1137,7 @@ var VideoPlayerBase = (props, ref) => {
                     hlsRef.current.destroy();
                     hlsRef.current = null;
                   }
-                  void loadVideo(resumeTime2);
+                  void loadVideo(resumeTime2, loadId);
                 }, 250);
               }
               return;
@@ -1145,7 +1157,7 @@ var VideoPlayerBase = (props, ref) => {
                 hlsRef.current.destroy();
                 hlsRef.current = null;
               }
-              void loadVideo(resumeTime);
+              void loadVideo(resumeTime, loadId);
             }, backoffMs);
             return;
           }
@@ -1189,12 +1201,14 @@ var VideoPlayerBase = (props, ref) => {
           hlsRef.current.destroy();
           hlsRef.current = null;
         }
-        void loadVideo(resumeTime);
+        void loadVideo(resumeTime, loadId);
       });
       h.on(HlsCtor.Events.MEDIA_ATTACHED, () => {
+        if (isStaleLoad()) return;
         h.loadSource(videoSrc);
       });
       h.on(HlsCtor.Events.MANIFEST_PARSED, () => {
+        if (isStaleLoad()) return;
         fatalReloadCount.current = 0;
         netRetryCount.current = 0;
         mediaRecoverCount.current = 0;
@@ -1224,14 +1238,15 @@ var VideoPlayerBase = (props, ref) => {
       videoSrc
     ]
   );
-  const loadVideoNative = (0, import_react3.useCallback)(() => {
+  const loadVideoNative = (0, import_react3.useCallback)((loadId = sourceLoadId.current) => {
+    if (loadId !== sourceLoadId.current) return;
     const video = videoRef.current;
     if (!video) return;
     video.src = videoSrc;
     video.currentTime = initialTime;
     if (autoPlay) void playAction();
   }, [autoPlay, initialTime, playAction, videoSrc]);
-  const loadVideoHls = (0, import_react3.useCallback)(async () => {
+  const loadVideoHls = (0, import_react3.useCallback)(async (loadId = sourceLoadId.current) => {
     const video = videoRef.current;
     const canNativeHls = !!(video == null ? void 0 : video.canPlayType) && video.canPlayType("application/vnd.apple.mpegurl") !== "";
     let HlsCtor;
@@ -1241,13 +1256,14 @@ var VideoPlayerBase = (props, ref) => {
       reportError(error, { type: "hls-loader", src: videoSrc }, messages.streamLoadFailed);
       return;
     }
+    if (loadId !== sourceLoadId.current) return;
     if (!videoRef.current || videoRef.current !== video) return;
     if (HlsCtor.isSupported()) {
-      void loadVideo(initialTime);
+      void loadVideo(initialTime, loadId);
       return;
     }
     if (canNativeHls) {
-      loadVideoNative();
+      loadVideoNative(loadId);
       return;
     }
     reportError(null, { type: "hls", src: videoSrc, reason: "HLS is not supported in this browser" }, messages.unsupported);
@@ -1372,34 +1388,30 @@ var VideoPlayerBase = (props, ref) => {
   }, [currentTimeProp, duration]);
   (0, import_react3.useEffect)(() => {
     if (!videoRef.current) return;
+    const loadId = sourceLoadId.current + 1;
+    sourceLoadId.current = loadId;
     clearErrorState();
     fatalReloadCount.current = 0;
     netRetryCount.current = 0;
     mediaRecoverCount.current = 0;
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
-    if (hlsRef.current) {
-      hlsRef.current.destroy();
-      hlsRef.current = null;
-    }
-    if (sourceType === "native" || type === "video") loadVideoNative();
-    else if (sourceType === "hls") void loadVideo(initialTime);
-    else if (isLikelyHlsSource(videoSrc)) void loadVideoHls();
-    else loadVideoNative();
+    resetMediaForSourceChange();
+    if (sourceType === "native" || type === "video") loadVideoNative(loadId);
+    else if (sourceType === "hls") void loadVideo(initialTime, loadId);
+    else if (isLikelyHlsSource(videoSrc)) void loadVideoHls(loadId);
+    else loadVideoNative(loadId);
     return () => {
-      clearTimers();
-      if (hlsRef.current) {
-        hlsRef.current.destroy();
-        hlsRef.current = null;
-      }
+      sourceLoadId.current += 1;
+      resetMediaForSourceChange();
     };
   }, [
     clearErrorState,
-    clearTimers,
     loadVideo,
     loadVideoHls,
     loadVideoNative,
     initialTime,
+    resetMediaForSourceChange,
     reloadKey,
     reloadToken,
     sourceType,

package/dist/index.js

@@ -825,6 +825,7 @@ var VideoPlayerBase = (props, ref) => {
   const liveStabilityMode = useRef2(false);
   const liveStallEvents = useRef2([]);
   const controlTime = useRef2(null);
+  const sourceLoadId = useRef2(0);
   const [playingState, setPlayingState] = useState(!!defaultPlaying);
   const [mutedState, setMutedState] = useState(!!defaultMuted);
   const [durationState, setDurationState] = useState(0);
@@ -842,6 +843,8 @@ var VideoPlayerBase = (props, ref) => {
   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;
@@ -863,6 +866,18 @@ var VideoPlayerBase = (props, ref) => {
       controlTime.current = null;
     }
   }, []);
+  const resetMediaForSourceChange = useCallback(() => {
+    clearTimers();
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    const video = videoRef.current;
+    if (!video) return;
+    video.pause();
+    video.removeAttribute("src");
+    video.load();
+  }, [clearTimers]);
   const setNextPlaying = useCallback(
     (value) => {
       if (playingProp === void 0) setPlayingState(value);
@@ -905,12 +920,6 @@ var VideoPlayerBase = (props, ref) => {
     },
     [onActiveChange]
   );
-  useEffect(() => {
-    onTimeChangeRef.current = onTimeChange;
-  }, [onTimeChange]);
-  useEffect(() => {
-    onDurationChangeRef.current = onDurationChange;
-  }, [onDurationChange]);
   const onTime = useCallback(() => {
     var _a;
     const el = videoRef.current;
@@ -1059,7 +1068,7 @@ var VideoPlayerBase = (props, ref) => {
     );
   }, [hlsConfig, hlsCredentials, live, liveHlsConfig, vodHlsConfig]);
   const loadVideo = useCallback(
-    async (startAt = initialTime) => {
+    async (startAt = initialTime, loadId = sourceLoadId.current) => {
       const startVideoRef = videoRef.current;
       if (!startVideoRef) return;
       let HlsCtor;
@@ -1069,13 +1078,16 @@ var VideoPlayerBase = (props, ref) => {
         reportError(error, { type: "hls-loader", src: videoSrc }, messages.streamLoadFailed);
         return;
       }
+      if (loadId !== sourceLoadId.current) return;
       if (!videoRef.current || videoRef.current !== startVideoRef) return;
       const video = videoRef.current;
       if (!video) return;
       const h = new HlsCtor(resolvedHlsConfig());
       hlsRef.current = h;
+      const isStaleLoad = () => loadId !== sourceLoadId.current || hlsRef.current !== h || videoRef.current !== video;
       h.on(HlsCtor.Events.ERROR, (_evt, data) => {
         var _a, _b;
+        if (isStaleLoad()) return;
         const { type: errorType, details, fatal } = data;
         if (details === HlsCtor.ErrorDetails.BUFFER_APPEND_ERROR || details === "bufferAppendingError") return;
         if (!fatal) {
@@ -1096,7 +1108,7 @@ var VideoPlayerBase = (props, ref) => {
                     hlsRef.current.destroy();
                     hlsRef.current = null;
                   }
-                  void loadVideo(resumeTime2);
+                  void loadVideo(resumeTime2, loadId);
                 }, 250);
               }
               return;
@@ -1116,7 +1128,7 @@ var VideoPlayerBase = (props, ref) => {
                 hlsRef.current.destroy();
                 hlsRef.current = null;
               }
-              void loadVideo(resumeTime);
+              void loadVideo(resumeTime, loadId);
             }, backoffMs);
             return;
           }
@@ -1160,12 +1172,14 @@ var VideoPlayerBase = (props, ref) => {
           hlsRef.current.destroy();
           hlsRef.current = null;
         }
-        void loadVideo(resumeTime);
+        void loadVideo(resumeTime, loadId);
       });
       h.on(HlsCtor.Events.MEDIA_ATTACHED, () => {
+        if (isStaleLoad()) return;
         h.loadSource(videoSrc);
       });
       h.on(HlsCtor.Events.MANIFEST_PARSED, () => {
+        if (isStaleLoad()) return;
         fatalReloadCount.current = 0;
         netRetryCount.current = 0;
         mediaRecoverCount.current = 0;
@@ -1195,14 +1209,15 @@ var VideoPlayerBase = (props, ref) => {
       videoSrc
     ]
   );
-  const loadVideoNative = useCallback(() => {
+  const loadVideoNative = useCallback((loadId = sourceLoadId.current) => {
+    if (loadId !== sourceLoadId.current) return;
     const video = videoRef.current;
     if (!video) return;
     video.src = videoSrc;
     video.currentTime = initialTime;
     if (autoPlay) void playAction();
   }, [autoPlay, initialTime, playAction, videoSrc]);
-  const loadVideoHls = useCallback(async () => {
+  const loadVideoHls = useCallback(async (loadId = sourceLoadId.current) => {
     const video = videoRef.current;
     const canNativeHls = !!(video == null ? void 0 : video.canPlayType) && video.canPlayType("application/vnd.apple.mpegurl") !== "";
     let HlsCtor;
@@ -1212,13 +1227,14 @@ var VideoPlayerBase = (props, ref) => {
       reportError(error, { type: "hls-loader", src: videoSrc }, messages.streamLoadFailed);
       return;
     }
+    if (loadId !== sourceLoadId.current) return;
     if (!videoRef.current || videoRef.current !== video) return;
     if (HlsCtor.isSupported()) {
-      void loadVideo(initialTime);
+      void loadVideo(initialTime, loadId);
       return;
     }
     if (canNativeHls) {
-      loadVideoNative();
+      loadVideoNative(loadId);
       return;
     }
     reportError(null, { type: "hls", src: videoSrc, reason: "HLS is not supported in this browser" }, messages.unsupported);
@@ -1343,34 +1359,30 @@ var VideoPlayerBase = (props, ref) => {
   }, [currentTimeProp, duration]);
   useEffect(() => {
     if (!videoRef.current) return;
+    const loadId = sourceLoadId.current + 1;
+    sourceLoadId.current = loadId;
     clearErrorState();
     fatalReloadCount.current = 0;
     netRetryCount.current = 0;
     mediaRecoverCount.current = 0;
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
-    if (hlsRef.current) {
-      hlsRef.current.destroy();
-      hlsRef.current = null;
-    }
-    if (sourceType === "native" || type === "video") loadVideoNative();
-    else if (sourceType === "hls") void loadVideo(initialTime);
-    else if (isLikelyHlsSource(videoSrc)) void loadVideoHls();
-    else loadVideoNative();
+    resetMediaForSourceChange();
+    if (sourceType === "native" || type === "video") loadVideoNative(loadId);
+    else if (sourceType === "hls") void loadVideo(initialTime, loadId);
+    else if (isLikelyHlsSource(videoSrc)) void loadVideoHls(loadId);
+    else loadVideoNative(loadId);
     return () => {
-      clearTimers();
-      if (hlsRef.current) {
-        hlsRef.current.destroy();
-        hlsRef.current = null;
-      }
+      sourceLoadId.current += 1;
+      resetMediaForSourceChange();
     };
   }, [
     clearErrorState,
-    clearTimers,
     loadVideo,
     loadVideoHls,
     loadVideoNative,
     initialTime,
+    resetMediaForSourceChange,
     reloadKey,
     reloadToken,
     sourceType,

package/package.json

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