@nikelroot/video-player 0.2.3 → 0.2.5

package/README.md

@@ -37,7 +37,7 @@ export function Example() {
 }
 ```
 
-When `active` is `true`, pressing `F` toggles fullscreen.
+When `active` is `true`, pressing `F` toggles fullscreen. When `active` is `false`, the player releases native playback loading so inactive MP4 players do not keep playback requests open; with `preload="metadata"`, inactive native videos still load metadata.
 
 For public CDN-hosted videos, prefer non-credentialed requests unless the CDN is explicitly configured for cookies:
 

package/dist/index.cjs

@@ -725,6 +725,7 @@ var LIVE_STALL_WINDOW_MS = 2e4;
 var LIVE_STALLS_BEFORE_STABILITY = 3;
 var hlsCtorPromise = null;
 var activeExclusiveVideo = null;
+var exclusiveMediaReleasers = /* @__PURE__ */ new WeakMap();
 var loadHlsCtor = () => {
   if (!hlsCtorPromise) {
     hlsCtorPromise = import("hls.js").then((mod) => mod.default);
@@ -738,6 +739,9 @@ var isInterruptedPlayRequestError = (error) => {
 var canAttemptPlayback = (video) => {
   return !!video && video.readyState >= HTMLMediaElement.HAVE_METADATA;
 };
+var isVideoSourceAttached = (video) => {
+  return !!video.currentSrc || !!video.getAttribute("src");
+};
 function hasNativeHlsSupport() {
   if (typeof navigator === "undefined" || typeof document === "undefined") return false;
   const isSafari = /^((?!chrome|android|firefox|opera|edg).)*safari/i.test(navigator.userAgent);
@@ -777,6 +781,9 @@ var isLikelyHlsSource = (src) => {
     return /\.m3u8($|[?#])/i.test(src);
   }
 };
+var getSourceLoadMode = (sourceType, type, src) => {
+  return sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(src) ? "hls" : "native";
+};
 var assignRef = (ref, value) => {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -854,6 +861,7 @@ var VideoPlayerBase = (props, ref) => {
   const liveStallEvents = (0, import_react3.useRef)([]);
   const controlTime = (0, import_react3.useRef)(null);
   const sourceLoadId = (0, import_react3.useRef)(0);
+  const sourceLoadMode = (0, import_react3.useRef)("native");
   const [playingState, setPlayingState] = (0, import_react3.useState)(!!defaultPlaying);
   const [mutedState, setMutedState] = (0, import_react3.useState)(!!defaultMuted);
   const [durationState, setDurationState] = (0, import_react3.useState)(0);
@@ -909,6 +917,20 @@ var VideoPlayerBase = (props, ref) => {
     video.removeAttribute("src");
     video.load();
   }, [clearTimers]);
+  const releaseNativeMedia = (0, import_react3.useCallback)(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.pause();
+    if (sourceLoadMode.current !== "native" || !isVideoSourceAttached(video)) return;
+    video.removeAttribute("src");
+    video.load();
+  }, []);
+  const ensureNativeMediaAttached = (0, import_react3.useCallback)(() => {
+    const video = videoRef.current;
+    if (!video || sourceLoadMode.current !== "native" || isVideoSourceAttached(video)) return;
+    video.src = videoSrc;
+    if (initialTime > 0) video.currentTime = initialTime;
+  }, [initialTime, videoSrc]);
   const setNextPlaying = (0, import_react3.useCallback)(
     (value) => {
       if (playingProp === void 0) setPlayingState(value);
@@ -974,6 +996,7 @@ var VideoPlayerBase = (props, ref) => {
       if (prev) {
         prev.removeEventListener("timeupdate", onTime);
         prev.removeEventListener("durationchange", onDur);
+        exclusiveMediaReleasers.delete(prev);
       }
       videoRef.current = el;
       assignRef(externalVideoRef, el);
@@ -983,8 +1006,9 @@ var VideoPlayerBase = (props, ref) => {
       el.muted = muted;
       el.addEventListener("timeupdate", onTime);
       el.addEventListener("durationchange", onDur);
+      exclusiveMediaReleasers.set(el, releaseNativeMedia);
     },
-    [externalVideoRef, muted, notifyActiveChange, onDur, onTime, onVideoRefChange]
+    [externalVideoRef, muted, notifyActiveChange, onDur, onTime, onVideoRefChange, releaseNativeMedia]
   );
   const pauseOtherVideos = (0, import_react3.useCallback)(
     (el) => {
@@ -993,8 +1017,10 @@ var VideoPlayerBase = (props, ref) => {
         exclusivePlayback.pauseOthers(el);
         return;
       }
-      if (activeExclusiveVideo && activeExclusiveVideo !== el && !activeExclusiveVideo.paused) {
-        activeExclusiveVideo.pause();
+      if (activeExclusiveVideo && activeExclusiveVideo !== el) {
+        const releasePrevious = exclusiveMediaReleasers.get(activeExclusiveVideo);
+        if (releasePrevious) releasePrevious();
+        else activeExclusiveVideo.pause();
       }
       activeExclusiveVideo = el;
     },
@@ -1004,6 +1030,7 @@ var VideoPlayerBase = (props, ref) => {
     const el = videoRef.current;
     if (!el) return;
     pauseOtherVideos(el);
+    ensureNativeMediaAttached();
     try {
       await el.play();
       clearErrorState();
@@ -1025,7 +1052,16 @@ var VideoPlayerBase = (props, ref) => {
         });
       }
     }
-  }, [clearErrorState, messages.playFailed, notifyActiveChange, pauseOtherVideos, reportError, scrollTo, setNextPlaying]);
+  }, [
+    clearErrorState,
+    ensureNativeMediaAttached,
+    messages.playFailed,
+    notifyActiveChange,
+    pauseOtherVideos,
+    reportError,
+    scrollTo,
+    setNextPlaying
+  ]);
   const pauseAction = (0, import_react3.useCallback)(() => {
     const el = videoRef.current;
     if (!el) return;
@@ -1103,6 +1139,7 @@ var VideoPlayerBase = (props, ref) => {
     async (startAt = initialTime, loadId = sourceLoadId.current) => {
       const startVideoRef = videoRef.current;
       if (!startVideoRef) return;
+      sourceLoadMode.current = "hls";
       let HlsCtor;
       try {
         HlsCtor = await loadHlsCtor();
@@ -1241,17 +1278,24 @@ var VideoPlayerBase = (props, ref) => {
       videoSrc
     ]
   );
-  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 loadVideoNative = (0, import_react3.useCallback)(
+    (loadId = sourceLoadId.current, options) => {
+      if (loadId !== sourceLoadId.current) return;
+      const video = videoRef.current;
+      if (!video) return;
+      sourceLoadMode.current = "native";
+      video.src = videoSrc;
+      if (!(options == null ? void 0 : options.metadataOnly)) {
+        video.currentTime = initialTime;
+        if (autoPlay) void playAction();
+      }
+    },
+    [autoPlay, initialTime, playAction, videoSrc]
+  );
   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") !== "";
+    sourceLoadMode.current = "hls";
     let HlsCtor;
     try {
       HlsCtor = await loadHlsCtor();
@@ -1387,6 +1431,10 @@ var VideoPlayerBase = (props, ref) => {
     if (playingProp) void playAction();
     else pauseAction();
   }, [pauseAction, playAction, playingProp]);
+  (0, import_react3.useEffect)(() => {
+    if (active !== false) return;
+    releaseNativeMedia();
+  }, [active, releaseNativeMedia]);
   (0, import_react3.useEffect)(() => {
     if (!videoRef.current) return;
     const loadId = sourceLoadId.current + 1;
@@ -1398,16 +1446,27 @@ var VideoPlayerBase = (props, ref) => {
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
     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);
+    const nextSourceLoadMode = getSourceLoadMode(sourceType, type, videoSrc);
+    sourceLoadMode.current = nextSourceLoadMode;
+    if (active === false) {
+      if (nextSourceLoadMode === "native" && preload === "metadata") {
+        loadVideoNative(loadId, { metadataOnly: true });
+      }
+      return;
+    }
+    if (nextSourceLoadMode === "hls") {
+      if (sourceType === "hls") void loadVideo(initialTime, loadId);
+      else void loadVideoHls(loadId);
+    } else {
+      loadVideoNative(loadId);
+    }
     return () => {
       sourceLoadId.current += 1;
       resetMediaForSourceChange();
     };
   }, [
     clearErrorState,
+    active,
     loadVideo,
     loadVideoHls,
     loadVideoNative,

package/dist/index.js

@@ -696,6 +696,7 @@ var LIVE_STALL_WINDOW_MS = 2e4;
 var LIVE_STALLS_BEFORE_STABILITY = 3;
 var hlsCtorPromise = null;
 var activeExclusiveVideo = null;
+var exclusiveMediaReleasers = /* @__PURE__ */ new WeakMap();
 var loadHlsCtor = () => {
   if (!hlsCtorPromise) {
     hlsCtorPromise = import("hls.js").then((mod) => mod.default);
@@ -709,6 +710,9 @@ var isInterruptedPlayRequestError = (error) => {
 var canAttemptPlayback = (video) => {
   return !!video && video.readyState >= HTMLMediaElement.HAVE_METADATA;
 };
+var isVideoSourceAttached = (video) => {
+  return !!video.currentSrc || !!video.getAttribute("src");
+};
 function hasNativeHlsSupport() {
   if (typeof navigator === "undefined" || typeof document === "undefined") return false;
   const isSafari = /^((?!chrome|android|firefox|opera|edg).)*safari/i.test(navigator.userAgent);
@@ -748,6 +752,9 @@ var isLikelyHlsSource = (src) => {
     return /\.m3u8($|[?#])/i.test(src);
   }
 };
+var getSourceLoadMode = (sourceType, type, src) => {
+  return sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(src) ? "hls" : "native";
+};
 var assignRef = (ref, value) => {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -825,6 +832,7 @@ var VideoPlayerBase = (props, ref) => {
   const liveStallEvents = useRef2([]);
   const controlTime = useRef2(null);
   const sourceLoadId = useRef2(0);
+  const sourceLoadMode = useRef2("native");
   const [playingState, setPlayingState] = useState(!!defaultPlaying);
   const [mutedState, setMutedState] = useState(!!defaultMuted);
   const [durationState, setDurationState] = useState(0);
@@ -880,6 +888,20 @@ var VideoPlayerBase = (props, ref) => {
     video.removeAttribute("src");
     video.load();
   }, [clearTimers]);
+  const releaseNativeMedia = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.pause();
+    if (sourceLoadMode.current !== "native" || !isVideoSourceAttached(video)) return;
+    video.removeAttribute("src");
+    video.load();
+  }, []);
+  const ensureNativeMediaAttached = useCallback(() => {
+    const video = videoRef.current;
+    if (!video || sourceLoadMode.current !== "native" || isVideoSourceAttached(video)) return;
+    video.src = videoSrc;
+    if (initialTime > 0) video.currentTime = initialTime;
+  }, [initialTime, videoSrc]);
   const setNextPlaying = useCallback(
     (value) => {
       if (playingProp === void 0) setPlayingState(value);
@@ -945,6 +967,7 @@ var VideoPlayerBase = (props, ref) => {
       if (prev) {
         prev.removeEventListener("timeupdate", onTime);
         prev.removeEventListener("durationchange", onDur);
+        exclusiveMediaReleasers.delete(prev);
       }
       videoRef.current = el;
       assignRef(externalVideoRef, el);
@@ -954,8 +977,9 @@ var VideoPlayerBase = (props, ref) => {
       el.muted = muted;
       el.addEventListener("timeupdate", onTime);
       el.addEventListener("durationchange", onDur);
+      exclusiveMediaReleasers.set(el, releaseNativeMedia);
     },
-    [externalVideoRef, muted, notifyActiveChange, onDur, onTime, onVideoRefChange]
+    [externalVideoRef, muted, notifyActiveChange, onDur, onTime, onVideoRefChange, releaseNativeMedia]
   );
   const pauseOtherVideos = useCallback(
     (el) => {
@@ -964,8 +988,10 @@ var VideoPlayerBase = (props, ref) => {
         exclusivePlayback.pauseOthers(el);
         return;
       }
-      if (activeExclusiveVideo && activeExclusiveVideo !== el && !activeExclusiveVideo.paused) {
-        activeExclusiveVideo.pause();
+      if (activeExclusiveVideo && activeExclusiveVideo !== el) {
+        const releasePrevious = exclusiveMediaReleasers.get(activeExclusiveVideo);
+        if (releasePrevious) releasePrevious();
+        else activeExclusiveVideo.pause();
       }
       activeExclusiveVideo = el;
     },
@@ -975,6 +1001,7 @@ var VideoPlayerBase = (props, ref) => {
     const el = videoRef.current;
     if (!el) return;
     pauseOtherVideos(el);
+    ensureNativeMediaAttached();
     try {
       await el.play();
       clearErrorState();
@@ -996,7 +1023,16 @@ var VideoPlayerBase = (props, ref) => {
         });
       }
     }
-  }, [clearErrorState, messages.playFailed, notifyActiveChange, pauseOtherVideos, reportError, scrollTo, setNextPlaying]);
+  }, [
+    clearErrorState,
+    ensureNativeMediaAttached,
+    messages.playFailed,
+    notifyActiveChange,
+    pauseOtherVideos,
+    reportError,
+    scrollTo,
+    setNextPlaying
+  ]);
   const pauseAction = useCallback(() => {
     const el = videoRef.current;
     if (!el) return;
@@ -1074,6 +1110,7 @@ var VideoPlayerBase = (props, ref) => {
     async (startAt = initialTime, loadId = sourceLoadId.current) => {
       const startVideoRef = videoRef.current;
       if (!startVideoRef) return;
+      sourceLoadMode.current = "hls";
       let HlsCtor;
       try {
         HlsCtor = await loadHlsCtor();
@@ -1212,17 +1249,24 @@ var VideoPlayerBase = (props, ref) => {
       videoSrc
     ]
   );
-  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 loadVideoNative = useCallback(
+    (loadId = sourceLoadId.current, options) => {
+      if (loadId !== sourceLoadId.current) return;
+      const video = videoRef.current;
+      if (!video) return;
+      sourceLoadMode.current = "native";
+      video.src = videoSrc;
+      if (!(options == null ? void 0 : options.metadataOnly)) {
+        video.currentTime = initialTime;
+        if (autoPlay) void playAction();
+      }
+    },
+    [autoPlay, initialTime, playAction, videoSrc]
+  );
   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") !== "";
+    sourceLoadMode.current = "hls";
     let HlsCtor;
     try {
       HlsCtor = await loadHlsCtor();
@@ -1358,6 +1402,10 @@ var VideoPlayerBase = (props, ref) => {
     if (playingProp) void playAction();
     else pauseAction();
   }, [pauseAction, playAction, playingProp]);
+  useEffect(() => {
+    if (active !== false) return;
+    releaseNativeMedia();
+  }, [active, releaseNativeMedia]);
   useEffect(() => {
     if (!videoRef.current) return;
     const loadId = sourceLoadId.current + 1;
@@ -1369,16 +1417,27 @@ var VideoPlayerBase = (props, ref) => {
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
     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);
+    const nextSourceLoadMode = getSourceLoadMode(sourceType, type, videoSrc);
+    sourceLoadMode.current = nextSourceLoadMode;
+    if (active === false) {
+      if (nextSourceLoadMode === "native" && preload === "metadata") {
+        loadVideoNative(loadId, { metadataOnly: true });
+      }
+      return;
+    }
+    if (nextSourceLoadMode === "hls") {
+      if (sourceType === "hls") void loadVideo(initialTime, loadId);
+      else void loadVideoHls(loadId);
+    } else {
+      loadVideoNative(loadId);
+    }
     return () => {
       sourceLoadId.current += 1;
       resetMediaForSourceChange();
     };
   }, [
     clearErrorState,
+    active,
     loadVideo,
     loadVideoHls,
     loadVideoNative,

package/package.json

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