@nikelroot/video-player 0.2.0 → 0.2.1

package/README.md

@@ -37,7 +37,19 @@ 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 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.
+
+For public CDN-hosted videos, prefer non-credentialed requests unless the CDN is explicitly configured for cookies:
+
+```tsx
+<VideoPlayer
+  videoSrc="https://cdn.example.com/stream.m3u8"
+  hlsCredentials="same-origin"
+  crossOrigin="anonymous"
+/>
+```
+
+If you use `hlsCredentials="include"` or `crossOrigin="use-credentials"`, the CDN must allow credentialed CORS and should not forward `Cookie` into the cache key for public media.
 
 Build before publishing:
 

package/dist/index.cjs

@@ -869,6 +869,7 @@ 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;
@@ -1398,6 +1399,17 @@ 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 (sourceType === "native" || type === "video") loadVideoNative(loadId);
     else if (sourceType === "hls") void loadVideo(initialTime, loadId);
     else if (isLikelyHlsSource(videoSrc)) void loadVideoHls(loadId);
@@ -1412,6 +1424,7 @@ var VideoPlayerBase = (props, ref) => {
     loadVideoHls,
     loadVideoNative,
     initialTime,
+    shouldLoadMedia,
     resetMediaForSourceChange,
     reloadKey,
     reloadToken,
@@ -1508,7 +1521,7 @@ var VideoPlayerBase = (props, ref) => {
               crossOrigin,
               playsInline: true,
               muted,
-              preload,
+              preload: shouldLoadMedia ? preload : "none",
               loop,
               onPlay: () => setNextPlaying(true),
               onPause: () => setNextPlaying(false),

package/dist/index.js

@@ -840,6 +840,7 @@ 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;
@@ -1369,6 +1370,17 @@ 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 (sourceType === "native" || type === "video") loadVideoNative(loadId);
     else if (sourceType === "hls") void loadVideo(initialTime, loadId);
     else if (isLikelyHlsSource(videoSrc)) void loadVideoHls(loadId);
@@ -1383,6 +1395,7 @@ var VideoPlayerBase = (props, ref) => {
     loadVideoHls,
     loadVideoNative,
     initialTime,
+    shouldLoadMedia,
     resetMediaForSourceChange,
     reloadKey,
     reloadToken,
@@ -1479,7 +1492,7 @@ var VideoPlayerBase = (props, ref) => {
               crossOrigin,
               playsInline: true,
               muted,
-              preload,
+              preload: shouldLoadMedia ? preload : "none",
               loop,
               onPlay: () => setNextPlaying(true),
               onPause: () => setNextPlaying(false),

package/package.json

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