@nikelroot/video-player 0.2.4 → 0.2.5

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 native media loading so inactive MP4 players do not keep network requests open.
+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

@@ -781,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") {
@@ -1275,15 +1278,20 @@ 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;
-    sourceLoadMode.current = "native";
-    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") !== "";
@@ -1438,9 +1446,14 @@ var VideoPlayerBase = (props, ref) => {
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
     resetMediaForSourceChange();
-    if (active === false) return;
-    const nextSourceLoadMode = sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(videoSrc) ? "hls" : "native";
+    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);

package/dist/index.js

@@ -752,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") {
@@ -1246,15 +1249,20 @@ var VideoPlayerBase = (props, ref) => {
       videoSrc
     ]
   );
-  const loadVideoNative = useCallback((loadId = sourceLoadId.current) => {
-    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();
-  }, [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") !== "";
@@ -1409,9 +1417,14 @@ var VideoPlayerBase = (props, ref) => {
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
     resetMediaForSourceChange();
-    if (active === false) return;
-    const nextSourceLoadMode = sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(videoSrc) ? "hls" : "native";
+    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);

package/package.json

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