@nikelroot/video-player 0.2.2 → 0.2.4

package/README.md

@@ -37,7 +37,7 @@ export function Example() {
 }
 ```
 
-When `active` is `true`, pressing `F` toggles fullscreen. When `active` is `false`, the player releases its media source and waits until it becomes active again. In lists with several players, pass `active={index === activeIndex}` so inactive videos do not keep HLS/media pipelines open.
+When `active` is `true`, pressing `F` toggles fullscreen. When `active` is `false`, the player releases native media loading so inactive MP4 players do not keep network requests open.
 
 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);
@@ -854,6 +858,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);
@@ -869,7 +874,6 @@ var VideoPlayerBase = (props, ref) => {
   const duration = durationProp != null ? durationProp : durationState;
   const currentTime = currentTimeState;
   const fullscreenAllowed = active != null ? active : true;
-  const shouldLoadMedia = active !== false;
   const onTimeChangeRef = (0, import_react3.useRef)(onTimeChange);
   const onDurationChangeRef = (0, import_react3.useRef)(onDurationChange);
   onTimeChangeRef.current = onTimeChange;
@@ -910,6 +914,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);
@@ -975,6 +993,7 @@ var VideoPlayerBase = (props, ref) => {
       if (prev) {
         prev.removeEventListener("timeupdate", onTime);
         prev.removeEventListener("durationchange", onDur);
+        exclusiveMediaReleasers.delete(prev);
       }
       videoRef.current = el;
       assignRef(externalVideoRef, el);
@@ -984,8 +1003,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) => {
@@ -994,8 +1014,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;
     },
@@ -1005,6 +1027,7 @@ var VideoPlayerBase = (props, ref) => {
     const el = videoRef.current;
     if (!el) return;
     pauseOtherVideos(el);
+    ensureNativeMediaAttached();
     try {
       await el.play();
       clearErrorState();
@@ -1026,7 +1049,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;
@@ -1104,6 +1136,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();
@@ -1246,6 +1279,7 @@ var VideoPlayerBase = (props, ref) => {
     if (loadId !== sourceLoadId.current) return;
     const video = videoRef.current;
     if (!video) return;
+    sourceLoadMode.current = "native";
     video.src = videoSrc;
     video.currentTime = initialTime;
     if (autoPlay) void playAction();
@@ -1253,6 +1287,7 @@ var VideoPlayerBase = (props, ref) => {
   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();
@@ -1388,6 +1423,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;
@@ -1399,32 +1438,26 @@ var VideoPlayerBase = (props, ref) => {
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
     resetMediaForSourceChange();
-    if (!shouldLoadMedia) {
-      setTimeD.current.cancel();
-      setCurrentTimeUi.current.cancel();
-      setDurationState(0);
-      setCurrentTimeState(0);
-      setPlayingState(false);
-      return () => {
-        sourceLoadId.current += 1;
-        resetMediaForSourceChange();
-      };
+    if (active === false) return;
+    const nextSourceLoadMode = sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(videoSrc) ? "hls" : "native";
+    sourceLoadMode.current = nextSourceLoadMode;
+    if (nextSourceLoadMode === "hls") {
+      if (sourceType === "hls") void loadVideo(initialTime, loadId);
+      else void loadVideoHls(loadId);
+    } else {
+      loadVideoNative(loadId);
     }
-    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 () => {
       sourceLoadId.current += 1;
       resetMediaForSourceChange();
     };
   }, [
     clearErrorState,
+    active,
     loadVideo,
     loadVideoHls,
     loadVideoNative,
     initialTime,
-    shouldLoadMedia,
     resetMediaForSourceChange,
     reloadKey,
     reloadToken,
@@ -1521,7 +1554,7 @@ var VideoPlayerBase = (props, ref) => {
               crossOrigin,
               playsInline: true,
               muted,
-              preload: shouldLoadMedia ? preload : "none",
+              preload,
               loop,
               onPlay: () => setNextPlaying(true),
               onPause: () => setNextPlaying(false),

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);
@@ -825,6 +829,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);
@@ -840,7 +845,6 @@ var VideoPlayerBase = (props, ref) => {
   const duration = durationProp != null ? durationProp : durationState;
   const currentTime = currentTimeState;
   const fullscreenAllowed = active != null ? active : true;
-  const shouldLoadMedia = active !== false;
   const onTimeChangeRef = useRef2(onTimeChange);
   const onDurationChangeRef = useRef2(onDurationChange);
   onTimeChangeRef.current = onTimeChange;
@@ -881,6 +885,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);
@@ -946,6 +964,7 @@ var VideoPlayerBase = (props, ref) => {
       if (prev) {
         prev.removeEventListener("timeupdate", onTime);
         prev.removeEventListener("durationchange", onDur);
+        exclusiveMediaReleasers.delete(prev);
       }
       videoRef.current = el;
       assignRef(externalVideoRef, el);
@@ -955,8 +974,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) => {
@@ -965,8 +985,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;
     },
@@ -976,6 +998,7 @@ var VideoPlayerBase = (props, ref) => {
     const el = videoRef.current;
     if (!el) return;
     pauseOtherVideos(el);
+    ensureNativeMediaAttached();
     try {
       await el.play();
       clearErrorState();
@@ -997,7 +1020,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;
@@ -1075,6 +1107,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();
@@ -1217,6 +1250,7 @@ var VideoPlayerBase = (props, ref) => {
     if (loadId !== sourceLoadId.current) return;
     const video = videoRef.current;
     if (!video) return;
+    sourceLoadMode.current = "native";
     video.src = videoSrc;
     video.currentTime = initialTime;
     if (autoPlay) void playAction();
@@ -1224,6 +1258,7 @@ var VideoPlayerBase = (props, ref) => {
   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();
@@ -1359,6 +1394,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;
@@ -1370,32 +1409,26 @@ var VideoPlayerBase = (props, ref) => {
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
     resetMediaForSourceChange();
-    if (!shouldLoadMedia) {
-      setTimeD.current.cancel();
-      setCurrentTimeUi.current.cancel();
-      setDurationState(0);
-      setCurrentTimeState(0);
-      setPlayingState(false);
-      return () => {
-        sourceLoadId.current += 1;
-        resetMediaForSourceChange();
-      };
+    if (active === false) return;
+    const nextSourceLoadMode = sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(videoSrc) ? "hls" : "native";
+    sourceLoadMode.current = nextSourceLoadMode;
+    if (nextSourceLoadMode === "hls") {
+      if (sourceType === "hls") void loadVideo(initialTime, loadId);
+      else void loadVideoHls(loadId);
+    } else {
+      loadVideoNative(loadId);
     }
-    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 () => {
       sourceLoadId.current += 1;
       resetMediaForSourceChange();
     };
   }, [
     clearErrorState,
+    active,
     loadVideo,
     loadVideoHls,
     loadVideoNative,
     initialTime,
-    shouldLoadMedia,
     resetMediaForSourceChange,
     reloadKey,
     reloadToken,
@@ -1492,7 +1525,7 @@ var VideoPlayerBase = (props, ref) => {
               crossOrigin,
               playsInline: true,
               muted,
-              preload: shouldLoadMedia ? preload : "none",
+              preload,
               loop,
               onPlay: () => setNextPlaying(true),
               onPause: () => setNextPlaying(false),

package/package.json

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