@nikelroot/video-player 0.2.8 → 0.2.10

package/README.md

@@ -25,9 +25,8 @@ export function Example() {
 
   return (
     <VideoPlayer
-      videoRef={videoRef}
       videoSrc="https://example.com/stream.m3u8"
-      controlsVariant="full"
+      videoRef={videoRef}
       active={true}
       live={false}
       autoPlay={false}
@@ -37,6 +36,8 @@ export function Example() {
 }
 ```
 
+Only `videoSrc` is required. `controlsVariant` defaults to `"none"`; set it to `"full"`, `"fullscreen-only"`, or `"tiny"` to render built-in controls.
+
 When `active` is `true`, pressing `F` toggles fullscreen.
 
 ## Multiple MP4 players

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);
@@ -1036,12 +1037,9 @@ var VideoPlayerBase = (props, ref) => {
     if (!el) return;
     pendingPlay.current = true;
     pauseOtherVideos(el);
-    const attachedNativeMedia = ensureNativeMediaAttached();
-    if (sourceLoadMode.current === "native" && !canAttemptPlayback(el)) {
-      if (attachedNativeMedia) clearErrorState();
-      return;
-    }
+    ensureNativeMediaAttached();
     try {
+      playRequestInFlight.current = true;
       await el.play();
       pendingPlay.current = false;
       clearErrorState();
@@ -1055,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();
@@ -1414,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]);

package/dist/index.d.cts

@@ -36,7 +36,7 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     videoSrc: string;
     sourceType?: 'auto' | 'hls' | 'native';
     type?: string;
-    controlsVariant: ControlsVariant;
+    controlsVariant?: ControlsVariant;
     active?: boolean;
     autoPlay?: boolean;
     preload?: '' | 'none' | 'auto' | 'metadata';

package/dist/index.d.ts

@@ -36,7 +36,7 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     videoSrc: string;
     sourceType?: 'auto' | 'hls' | 'native';
     type?: string;
-    controlsVariant: ControlsVariant;
+    controlsVariant?: ControlsVariant;
     active?: boolean;
     autoPlay?: boolean;
     preload?: '' | 'none' | 'auto' | 'metadata';

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);
@@ -1007,12 +1008,9 @@ var VideoPlayerBase = (props, ref) => {
     if (!el) return;
     pendingPlay.current = true;
     pauseOtherVideos(el);
-    const attachedNativeMedia = ensureNativeMediaAttached();
-    if (sourceLoadMode.current === "native" && !canAttemptPlayback(el)) {
-      if (attachedNativeMedia) clearErrorState();
-      return;
-    }
+    ensureNativeMediaAttached();
     try {
+      playRequestInFlight.current = true;
       await el.play();
       pendingPlay.current = false;
       clearErrorState();
@@ -1026,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();
@@ -1385,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]);

package/package.json

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