@nikelroot/video-player 0.2.7 → 0.2.9

package/dist/index.cjs

@@ -740,7 +740,7 @@ var canAttemptPlayback = (video) => {
   return !!video && video.readyState >= HTMLMediaElement.HAVE_METADATA;
 };
 var isVideoSourceAttached = (video) => {
-  return !!video.currentSrc || !!video.getAttribute("src");
+  return !!video.getAttribute("src");
 };
 function hasNativeHlsSupport() {
   if (typeof navigator === "undefined" || typeof document === "undefined") return false;
@@ -863,6 +863,7 @@ var VideoPlayerBase = (props, ref) => {
   const sourceLoadId = (0, import_react3.useRef)(0);
   const sourceLoadMode = (0, import_react3.useRef)("native");
   const pendingPlay = (0, import_react3.useRef)(false);
+  const playRequestInFlight = (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);
@@ -930,9 +931,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) => {
@@ -1035,8 +1038,8 @@ var VideoPlayerBase = (props, ref) => {
     pendingPlay.current = true;
     pauseOtherVideos(el);
     ensureNativeMediaAttached();
-    if (sourceLoadMode.current === "native" && !canAttemptPlayback(el)) return;
     try {
+      playRequestInFlight.current = true;
       await el.play();
       pendingPlay.current = false;
       clearErrorState();
@@ -1050,6 +1053,8 @@ var VideoPlayerBase = (props, ref) => {
       pendingPlay.current = false;
       console.debug(e);
       reportError(e, { type: "play" }, messages.playFailed);
+    } finally {
+      playRequestInFlight.current = false;
     }
     if (scrollTo === true) {
       const rect = el.getBoundingClientRect();
@@ -1409,6 +1414,7 @@ var VideoPlayerBase = (props, ref) => {
   }, [messages, reportError, videoSrc]);
   const videoLoadedHandler = (0, import_react3.useCallback)(() => {
     clearErrorState();
+    if (playRequestInFlight.current) return;
     if (!pendingPlay.current || active === false || !canAttemptPlayback(videoRef.current)) return;
     void playAction();
   }, [active, clearErrorState, playAction]);
@@ -1441,7 +1447,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]);
@@ -1586,6 +1591,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

@@ -711,7 +711,7 @@ var canAttemptPlayback = (video) => {
   return !!video && video.readyState >= HTMLMediaElement.HAVE_METADATA;
 };
 var isVideoSourceAttached = (video) => {
-  return !!video.currentSrc || !!video.getAttribute("src");
+  return !!video.getAttribute("src");
 };
 function hasNativeHlsSupport() {
   if (typeof navigator === "undefined" || typeof document === "undefined") return false;
@@ -834,6 +834,7 @@ var VideoPlayerBase = (props, ref) => {
   const sourceLoadId = useRef2(0);
   const sourceLoadMode = useRef2("native");
   const pendingPlay = useRef2(false);
+  const playRequestInFlight = useRef2(false);
   const [playingState, setPlayingState] = useState(!!defaultPlaying);
   const [mutedState, setMutedState] = useState(!!defaultMuted);
   const [durationState, setDurationState] = useState(0);
@@ -901,9 +902,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) => {
@@ -1006,8 +1009,8 @@ var VideoPlayerBase = (props, ref) => {
     pendingPlay.current = true;
     pauseOtherVideos(el);
     ensureNativeMediaAttached();
-    if (sourceLoadMode.current === "native" && !canAttemptPlayback(el)) return;
     try {
+      playRequestInFlight.current = true;
       await el.play();
       pendingPlay.current = false;
       clearErrorState();
@@ -1021,6 +1024,8 @@ var VideoPlayerBase = (props, ref) => {
       pendingPlay.current = false;
       console.debug(e);
       reportError(e, { type: "play" }, messages.playFailed);
+    } finally {
+      playRequestInFlight.current = false;
     }
     if (scrollTo === true) {
       const rect = el.getBoundingClientRect();
@@ -1380,6 +1385,7 @@ var VideoPlayerBase = (props, ref) => {
   }, [messages, reportError, videoSrc]);
   const videoLoadedHandler = useCallback(() => {
     clearErrorState();
+    if (playRequestInFlight.current) return;
     if (!pendingPlay.current || active === false || !canAttemptPlayback(videoRef.current)) return;
     void playAction();
   }, [active, clearErrorState, playAction]);
@@ -1412,7 +1418,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]);
@@ -1557,6 +1562,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.7",
+  "version": "0.2.9",
   "description": "Standalone React video player with HLS support.",
   "type": "module",
   "main": "./dist/index.cjs",