@nikelroot/video-player 0.1.2 → 0.1.4

package/README.md

@@ -17,11 +17,15 @@ npm install react react-dom styled-components
 ## Usage
 
 ```tsx
+import { useRef } from 'react';
 import VideoPlayer from '@nikelroot/video-player';
 
 export function Example() {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
   return (
     <VideoPlayer
+      videoRef={videoRef}
       videoSrc="https://example.com/stream.m3u8"
       controlsVariant="full"
       live={false}

package/dist/index.cjs

@@ -740,6 +740,14 @@ var isLikelyHlsSource = (src) => {
     return /\.m3u8($|[?#])/i.test(src);
   }
 };
+var assignRef = (ref, value) => {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+};
 var VideoPlayerBase = (props, ref) => {
   const {
     controlsVariant = "none",
@@ -760,6 +768,7 @@ var VideoPlayerBase = (props, ref) => {
     alwaysShowSegments = false,
     initialTime = 0,
     reloadKey,
+    videoRef: externalVideoRef,
     onVideoRefChange,
     handleClick = true,
     onPointerDown,
@@ -901,6 +910,7 @@ var VideoPlayerBase = (props, ref) => {
         prev.removeEventListener("durationchange", onDur);
       }
       videoRef.current = el;
+      assignRef(externalVideoRef, el);
       onVideoRefChange == null ? void 0 : onVideoRefChange(el);
       notifyActiveChange(el, "ref");
       if (!el) return;
@@ -908,7 +918,7 @@ var VideoPlayerBase = (props, ref) => {
       el.addEventListener("timeupdate", onTime);
       el.addEventListener("durationchange", onDur);
     },
-    [muted, notifyActiveChange, onDur, onTime, onVideoRefChange]
+    [externalVideoRef, muted, notifyActiveChange, onDur, onTime, onVideoRefChange]
   );
   const pauseOtherVideos = (0, import_react2.useCallback)(
     (el) => {
@@ -1400,6 +1410,7 @@ var VideoPlayerBase = (props, ref) => {
             "video",
             {
               ...videoProps,
+              controls: false,
               ref: setVideoEl,
               crossOrigin,
               playsInline: true,

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;
     autoPlay?: boolean;
     preload?: '' | 'none' | 'auto' | 'metadata';
     loop?: boolean;
@@ -61,6 +61,7 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     duration?: number;
     onTimeChange?: (time: number, video: HTMLVideoElement) => void;
     onDurationChange?: (duration: number, video: HTMLVideoElement) => void;
+    videoRef?: React.Ref<HTMLVideoElement>;
     onVideoRefChange?: (video: HTMLVideoElement | null) => void;
     onActiveChange?: (payload: VideoPlayerActiveChangePayload) => void;
     onPlaybackError?: (payload: VideoPlayerPlaybackError) => void;

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;
     autoPlay?: boolean;
     preload?: '' | 'none' | 'auto' | 'metadata';
     loop?: boolean;
@@ -61,6 +61,7 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     duration?: number;
     onTimeChange?: (time: number, video: HTMLVideoElement) => void;
     onDurationChange?: (duration: number, video: HTMLVideoElement) => void;
+    videoRef?: React.Ref<HTMLVideoElement>;
     onVideoRefChange?: (video: HTMLVideoElement | null) => void;
     onActiveChange?: (payload: VideoPlayerActiveChangePayload) => void;
     onPlaybackError?: (payload: VideoPlayerPlaybackError) => void;

package/dist/index.js

@@ -711,6 +711,14 @@ var isLikelyHlsSource = (src) => {
     return /\.m3u8($|[?#])/i.test(src);
   }
 };
+var assignRef = (ref, value) => {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+};
 var VideoPlayerBase = (props, ref) => {
   const {
     controlsVariant = "none",
@@ -731,6 +739,7 @@ var VideoPlayerBase = (props, ref) => {
     alwaysShowSegments = false,
     initialTime = 0,
     reloadKey,
+    videoRef: externalVideoRef,
     onVideoRefChange,
     handleClick = true,
     onPointerDown,
@@ -872,6 +881,7 @@ var VideoPlayerBase = (props, ref) => {
         prev.removeEventListener("durationchange", onDur);
       }
       videoRef.current = el;
+      assignRef(externalVideoRef, el);
       onVideoRefChange == null ? void 0 : onVideoRefChange(el);
       notifyActiveChange(el, "ref");
       if (!el) return;
@@ -879,7 +889,7 @@ var VideoPlayerBase = (props, ref) => {
       el.addEventListener("timeupdate", onTime);
       el.addEventListener("durationchange", onDur);
     },
-    [muted, notifyActiveChange, onDur, onTime, onVideoRefChange]
+    [externalVideoRef, muted, notifyActiveChange, onDur, onTime, onVideoRefChange]
   );
   const pauseOtherVideos = useCallback(
     (el) => {
@@ -1371,6 +1381,7 @@ var VideoPlayerBase = (props, ref) => {
             "video",
             {
               ...videoProps,
+              controls: false,
               ref: setVideoEl,
               crossOrigin,
               playsInline: true,

package/package.json

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