@nikelroot/video-player 0.1.11 → 0.2.0

package/dist/index.cjs

@@ -471,39 +471,39 @@ var TimeBlock = ({ duration, currentTime }) => {
     formatTime(duration)
   ] });
 };
+var ICON_PATHS = {
+  back: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11 7l-6 5 6 5V7z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 7l-6 5 6 5V7z" })
+  ] }),
+  forward: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 7l6 5-6 5V7z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 7l6 5-6 5V7z" })
+  ] }),
+  fullscreen: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 10V5h5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 5h5v5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 14v5h-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 19H5v-5" })
+  ] }),
+  mute: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 10v4h4l5 4V6l-5 4H4z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 9l4 6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 9l-4 6" })
+  ] }),
+  pause: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 6h3v12H8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 6h3v12h-3z" })
+  ] }),
+  play: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 5v14l11-7L8 5z" }),
+  sound: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 10v4h4l5 4V6l-5 4H4z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 9a4 4 0 010 6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18.5 6.5a8 8 0 010 11" })
+  ] })
+};
 var Icon = ({ name }) => {
-  const paths = {
-    back: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11 7l-6 5 6 5V7z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 7l-6 5 6 5V7z" })
-    ] }),
-    forward: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 7l6 5-6 5V7z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 7l6 5-6 5V7z" })
-    ] }),
-    fullscreen: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 10V5h5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 5h5v5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 14v5h-5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 19H5v-5" })
-    ] }),
-    mute: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 10v4h4l5 4V6l-5 4H4z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 9l4 6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 9l-4 6" })
-    ] }),
-    pause: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 6h3v12H8z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 6h3v12h-3z" })
-    ] }),
-    play: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 5v14l11-7L8 5z" }),
-    sound: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 10v4h4l5 4V6l-5 4H4z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 9a4 4 0 010 6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18.5 6.5a8 8 0 010 11" })
-    ] })
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", className: "video-player-icon", focusable: "false", viewBox: "0 0 24 24", children: paths[name] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", className: "video-player-icon", focusable: "false", viewBox: "0 0 24 24", children: ICON_PATHS[name] });
 };
 var ControlButton = ({
   disabled,
@@ -828,7 +828,6 @@ var VideoPlayerBase = (props, ref) => {
     scrollTo = true,
     muted: mutedProp,
     defaultMuted = false,
-    currentTime: currentTimeProp,
     duration: durationProp,
     hlsConfig,
     vodHlsConfig,
@@ -854,6 +853,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);
@@ -862,17 +862,19 @@ var VideoPlayerBase = (props, ref) => {
   const [showControl, setControlVisible] = (0, import_react3.useState)(true);
   const [errorState, setErrorState] = (0, import_react3.useState)(null);
   const [reloadToken, setReloadToken] = (0, import_react3.useState)(0);
+  const showControlRef = (0, import_react3.useRef)(showControl);
   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 currentTime = 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;
+  showControlRef.current = showControl;
+  const { currentTime: _ignoredCurrentTime, ...domVideoProps } = videoProps;
   const setTimeD = (0, import_react3.useRef)(
     createThrottledNumberFn((value) => {
       const v = videoRef.current;
@@ -880,6 +882,7 @@ var VideoPlayerBase = (props, ref) => {
       v.currentTime = value;
     }, 30)
   );
+  const setCurrentTimeUi = (0, import_react3.useRef)(createThrottledNumberFn((value) => setCurrentTimeState(value), 250));
   const clearTimers = (0, import_react3.useCallback)(() => {
     if (reloadTimer.current) {
       clearTimeout(reloadTimer.current);
@@ -894,6 +897,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);
@@ -941,9 +956,9 @@ var VideoPlayerBase = (props, ref) => {
     const el = videoRef.current;
     if (!el) return;
     const nextTime = Number.isFinite(el.currentTime) ? el.currentTime : 0;
-    if (!isCurrentTimeControlled) setCurrentTimeState(nextTime);
+    setCurrentTimeUi.current(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;
@@ -1024,10 +1039,11 @@ var VideoPlayerBase = (props, ref) => {
       if (!el) return;
       const next = clampTime(value, duration);
       setTimeD.current(next);
-      if (currentTimeProp === void 0) setCurrentTimeState(next);
+      setCurrentTimeUi.current.cancel();
+      setCurrentTimeState(next);
       notifyActiveChange(el, "seek");
     },
-    [currentTimeProp, duration, notifyActiveChange]
+    [duration, notifyActiveChange]
   );
   const seekPrevAction = (0, import_react3.useCallback)(
     (sec = 15) => {
@@ -1084,7 +1100,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;
@@ -1094,13 +1110,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) {
@@ -1121,7 +1140,7 @@ var VideoPlayerBase = (props, ref) => {
                     hlsRef.current.destroy();
                     hlsRef.current = null;
                   }
-                  void loadVideo(resumeTime2);
+                  void loadVideo(resumeTime2, loadId);
                 }, 250);
               }
               return;
@@ -1141,7 +1160,7 @@ var VideoPlayerBase = (props, ref) => {
                 hlsRef.current.destroy();
                 hlsRef.current = null;
               }
-              void loadVideo(resumeTime);
+              void loadVideo(resumeTime, loadId);
             }, backoffMs);
             return;
           }
@@ -1185,12 +1204,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;
@@ -1220,14 +1241,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;
@@ -1237,13 +1259,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);
@@ -1268,10 +1291,10 @@ var VideoPlayerBase = (props, ref) => {
     notifyActiveChange(null, "destroy");
     setNextPlaying(false);
     if (durationProp === void 0) setDurationState(0);
-    if (currentTimeProp === void 0) setCurrentTimeState(0);
+    setCurrentTimeUi.current.cancel();
+    setCurrentTimeState(0);
   }, [
     clearTimers,
-    currentTimeProp,
     durationProp,
     notifyActiveChange,
     onDur,
@@ -1333,8 +1356,12 @@ var VideoPlayerBase = (props, ref) => {
   }, [clearErrorState]);
   const mouseMoveHandler = (0, import_react3.useCallback)(() => {
     if (controlTime.current) clearTimeout(controlTime.current);
-    setControlVisible(true);
+    if (!showControlRef.current) {
+      showControlRef.current = true;
+      setControlVisible(true);
+    }
     controlTime.current = setTimeout(() => {
+      showControlRef.current = false;
       setControlVisible(false);
     }, 1e3 * 10);
   }, []);
@@ -1360,42 +1387,32 @@ var VideoPlayerBase = (props, ref) => {
     if (playingProp) void playAction();
     else pauseAction();
   }, [pauseAction, playAction, playingProp]);
-  (0, import_react3.useEffect)(() => {
-    const el = videoRef.current;
-    if (!el || currentTimeProp === void 0) return;
-    if (Math.abs(el.currentTime - currentTimeProp) < 0.25) return;
-    el.currentTime = clampTime(currentTimeProp, duration);
-  }, [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,
@@ -1443,6 +1460,7 @@ var VideoPlayerBase = (props, ref) => {
   (0, import_react3.useEffect)(() => {
     return () => {
       setTimeD.current.cancel();
+      setCurrentTimeUi.current.cancel();
       destroy();
     };
   }, [destroy]);
@@ -1484,7 +1502,7 @@ var VideoPlayerBase = (props, ref) => {
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "video",
             {
-              ...videoProps,
+              ...domVideoProps,
               controls: false,
               ref: setVideoEl,
               crossOrigin,

package/dist/index.d.cts

@@ -58,7 +58,6 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     defaultPlaying?: boolean;
     playing?: boolean;
     onPlayingChange?: (playing: boolean) => void;
-    currentTime?: number;
     duration?: number;
     onTimeChange?: (time: number, video: HTMLVideoElement) => void;
     onDurationChange?: (duration: number, video: HTMLVideoElement) => void;

package/dist/index.d.ts

@@ -58,7 +58,6 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     defaultPlaying?: boolean;
     playing?: boolean;
     onPlayingChange?: (playing: boolean) => void;
-    currentTime?: number;
     duration?: number;
     onTimeChange?: (time: number, video: HTMLVideoElement) => void;
     onDurationChange?: (duration: number, video: HTMLVideoElement) => void;

package/dist/index.js

@@ -442,39 +442,39 @@ var TimeBlock = ({ duration, currentTime }) => {
     formatTime(duration)
   ] });
 };
+var ICON_PATHS = {
+  back: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11 7l-6 5 6 5V7z" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 7l-6 5 6 5V7z" })
+  ] }),
+  forward: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 7l6 5-6 5V7z" }),
+    /* @__PURE__ */ jsx("path", { d: "M13 7l6 5-6 5V7z" })
+  ] }),
+  fullscreen: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 10V5h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 5h5v5" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 14v5h-5" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 19H5v-5" })
+  ] }),
+  mute: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 10v4h4l5 4V6l-5 4H4z" }),
+    /* @__PURE__ */ jsx("path", { d: "M17 9l4 6" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 9l-4 6" })
+  ] }),
+  pause: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 6h3v12H8z" }),
+    /* @__PURE__ */ jsx("path", { d: "M13 6h3v12h-3z" })
+  ] }),
+  play: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7L8 5z" }),
+  sound: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 10v4h4l5 4V6l-5 4H4z" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 9a4 4 0 010 6" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.5 6.5a8 8 0 010 11" })
+  ] })
+};
 var Icon = ({ name }) => {
-  const paths = {
-    back: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("path", { d: "M11 7l-6 5 6 5V7z" }),
-      /* @__PURE__ */ jsx("path", { d: "M19 7l-6 5 6 5V7z" })
-    ] }),
-    forward: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("path", { d: "M5 7l6 5-6 5V7z" }),
-      /* @__PURE__ */ jsx("path", { d: "M13 7l6 5-6 5V7z" })
-    ] }),
-    fullscreen: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("path", { d: "M5 10V5h5" }),
-      /* @__PURE__ */ jsx("path", { d: "M14 5h5v5" }),
-      /* @__PURE__ */ jsx("path", { d: "M19 14v5h-5" }),
-      /* @__PURE__ */ jsx("path", { d: "M10 19H5v-5" })
-    ] }),
-    mute: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("path", { d: "M4 10v4h4l5 4V6l-5 4H4z" }),
-      /* @__PURE__ */ jsx("path", { d: "M17 9l4 6" }),
-      /* @__PURE__ */ jsx("path", { d: "M21 9l-4 6" })
-    ] }),
-    pause: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("path", { d: "M8 6h3v12H8z" }),
-      /* @__PURE__ */ jsx("path", { d: "M13 6h3v12h-3z" })
-    ] }),
-    play: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7L8 5z" }),
-    sound: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("path", { d: "M4 10v4h4l5 4V6l-5 4H4z" }),
-      /* @__PURE__ */ jsx("path", { d: "M16 9a4 4 0 010 6" }),
-      /* @__PURE__ */ jsx("path", { d: "M18.5 6.5a8 8 0 010 11" })
-    ] })
-  };
-  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "video-player-icon", focusable: "false", viewBox: "0 0 24 24", children: paths[name] });
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "video-player-icon", focusable: "false", viewBox: "0 0 24 24", children: ICON_PATHS[name] });
 };
 var ControlButton = ({
   disabled,
@@ -799,7 +799,6 @@ var VideoPlayerBase = (props, ref) => {
     scrollTo = true,
     muted: mutedProp,
     defaultMuted = false,
-    currentTime: currentTimeProp,
     duration: durationProp,
     hlsConfig,
     vodHlsConfig,
@@ -825,6 +824,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);
@@ -833,17 +833,19 @@ var VideoPlayerBase = (props, ref) => {
   const [showControl, setControlVisible] = useState(true);
   const [errorState, setErrorState] = useState(null);
   const [reloadToken, setReloadToken] = useState(0);
+  const showControlRef = useRef2(showControl);
   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 currentTime = currentTimeState;
   const fullscreenAllowed = active != null ? active : true;
   const onTimeChangeRef = useRef2(onTimeChange);
   const onDurationChangeRef = useRef2(onDurationChange);
   onTimeChangeRef.current = onTimeChange;
   onDurationChangeRef.current = onDurationChange;
+  showControlRef.current = showControl;
+  const { currentTime: _ignoredCurrentTime, ...domVideoProps } = videoProps;
   const setTimeD = useRef2(
     createThrottledNumberFn((value) => {
       const v = videoRef.current;
@@ -851,6 +853,7 @@ var VideoPlayerBase = (props, ref) => {
       v.currentTime = value;
     }, 30)
   );
+  const setCurrentTimeUi = useRef2(createThrottledNumberFn((value) => setCurrentTimeState(value), 250));
   const clearTimers = useCallback(() => {
     if (reloadTimer.current) {
       clearTimeout(reloadTimer.current);
@@ -865,6 +868,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);
@@ -912,9 +927,9 @@ var VideoPlayerBase = (props, ref) => {
     const el = videoRef.current;
     if (!el) return;
     const nextTime = Number.isFinite(el.currentTime) ? el.currentTime : 0;
-    if (!isCurrentTimeControlled) setCurrentTimeState(nextTime);
+    setCurrentTimeUi.current(nextTime);
     (_a = onTimeChangeRef.current) == null ? void 0 : _a.call(onTimeChangeRef, nextTime, el);
-  }, [isCurrentTimeControlled]);
+  }, []);
   const onDur = useCallback(() => {
     var _a;
     const el = videoRef.current;
@@ -995,10 +1010,11 @@ var VideoPlayerBase = (props, ref) => {
       if (!el) return;
       const next = clampTime(value, duration);
       setTimeD.current(next);
-      if (currentTimeProp === void 0) setCurrentTimeState(next);
+      setCurrentTimeUi.current.cancel();
+      setCurrentTimeState(next);
       notifyActiveChange(el, "seek");
     },
-    [currentTimeProp, duration, notifyActiveChange]
+    [duration, notifyActiveChange]
   );
   const seekPrevAction = useCallback(
     (sec = 15) => {
@@ -1055,7 +1071,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;
@@ -1065,13 +1081,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) {
@@ -1092,7 +1111,7 @@ var VideoPlayerBase = (props, ref) => {
                     hlsRef.current.destroy();
                     hlsRef.current = null;
                   }
-                  void loadVideo(resumeTime2);
+                  void loadVideo(resumeTime2, loadId);
                 }, 250);
               }
               return;
@@ -1112,7 +1131,7 @@ var VideoPlayerBase = (props, ref) => {
                 hlsRef.current.destroy();
                 hlsRef.current = null;
               }
-              void loadVideo(resumeTime);
+              void loadVideo(resumeTime, loadId);
             }, backoffMs);
             return;
           }
@@ -1156,12 +1175,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;
@@ -1191,14 +1212,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;
@@ -1208,13 +1230,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);
@@ -1239,10 +1262,10 @@ var VideoPlayerBase = (props, ref) => {
     notifyActiveChange(null, "destroy");
     setNextPlaying(false);
     if (durationProp === void 0) setDurationState(0);
-    if (currentTimeProp === void 0) setCurrentTimeState(0);
+    setCurrentTimeUi.current.cancel();
+    setCurrentTimeState(0);
   }, [
     clearTimers,
-    currentTimeProp,
     durationProp,
     notifyActiveChange,
     onDur,
@@ -1304,8 +1327,12 @@ var VideoPlayerBase = (props, ref) => {
   }, [clearErrorState]);
   const mouseMoveHandler = useCallback(() => {
     if (controlTime.current) clearTimeout(controlTime.current);
-    setControlVisible(true);
+    if (!showControlRef.current) {
+      showControlRef.current = true;
+      setControlVisible(true);
+    }
     controlTime.current = setTimeout(() => {
+      showControlRef.current = false;
       setControlVisible(false);
     }, 1e3 * 10);
   }, []);
@@ -1331,42 +1358,32 @@ var VideoPlayerBase = (props, ref) => {
     if (playingProp) void playAction();
     else pauseAction();
   }, [pauseAction, playAction, playingProp]);
-  useEffect(() => {
-    const el = videoRef.current;
-    if (!el || currentTimeProp === void 0) return;
-    if (Math.abs(el.currentTime - currentTimeProp) < 0.25) return;
-    el.currentTime = clampTime(currentTimeProp, duration);
-  }, [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,
@@ -1414,6 +1431,7 @@ var VideoPlayerBase = (props, ref) => {
   useEffect(() => {
     return () => {
       setTimeD.current.cancel();
+      setCurrentTimeUi.current.cancel();
       destroy();
     };
   }, [destroy]);
@@ -1455,7 +1473,7 @@ var VideoPlayerBase = (props, ref) => {
           /* @__PURE__ */ jsx2(
             "video",
             {
-              ...videoProps,
+              ...domVideoProps,
               controls: false,
               ref: setVideoEl,
               crossOrigin,

package/package.json

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