@nikelroot/video-player 0.1.3 → 0.1.5

package/README.md

@@ -17,13 +17,18 @@ 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"
+      active={true}
       live={false}
       autoPlay={false}
       onTimeChange={(time) => console.log(time)}

package/dist/index.cjs

@@ -87,6 +87,15 @@ var VideoPlayerControlStyles = import_styled_components.styled.div`
     outline: none;
   }
 
+  .video-player-control-button:disabled {
+    opacity: 0.42;
+    cursor: not-allowed;
+  }
+
+  .video-player-control-button:disabled:hover {
+    background: rgba(255, 255, 255, 0.12);
+  }
+
   .video-player-icon {
     width: 17px;
     height: 17px;
@@ -482,11 +491,23 @@ var Icon = ({ name }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", className: "video-player-icon", focusable: "false", viewBox: "0 0 24 24", children: paths[name] });
 };
 var ControlButton = ({
+  disabled,
   icon,
   label,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { "aria-label": label, className: "video-player-control-button", onClick: () => void onClick(), title: label, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: icon }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      "aria-label": label,
+      className: "video-player-control-button",
+      disabled,
+      onClick: () => void onClick(),
+      title: label,
+      type: "button",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: icon })
+    }
+  );
 };
 var stopControlClick = (e) => {
   e.preventDefault();
@@ -496,6 +517,7 @@ var VideoPlayerControls = (props) => {
   const {
     variant,
     fullScreenAction,
+    fullscreenAllowed,
     showControl,
     playAction,
     pauseAction,
@@ -521,7 +543,7 @@ var VideoPlayerControls = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoPlayerControlStyles, { $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "video-player-control-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "full" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: muted ? "mute" : "sound", label: muted ? "Unmute" : "Mute", onClick: () => onMutedChange(!muted) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { disabled: !fullscreenAllowed, icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
     ] }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoPlayerControlStyles, { $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "video-player-control-row", children: [
@@ -533,7 +555,7 @@ var VideoPlayerControls = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SeekSlider, { playAction, duration, currentTime, seekSetTime }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimeBlock, { duration, currentTime }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: muted ? "mute" : "sound", label: muted ? "Unmute" : "Mute", onClick: () => onMutedChange(!muted) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { disabled: !fullscreenAllowed, icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
   ] }) });
 };
 
@@ -740,9 +762,18 @@ 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",
+    active,
     autoPlay = false,
     preload = "metadata",
     loop = false,
@@ -760,6 +791,7 @@ var VideoPlayerBase = (props, ref) => {
     alwaysShowSegments = false,
     initialTime = 0,
     reloadKey,
+    videoRef: externalVideoRef,
     onVideoRefChange,
     handleClick = true,
     onPointerDown,
@@ -815,6 +847,7 @@ var VideoPlayerBase = (props, ref) => {
   const muted = mutedProp != null ? mutedProp : mutedState;
   const duration = durationProp != null ? durationProp : durationState;
   const currentTime = currentTimeProp != null ? currentTimeProp : currentTimeState;
+  const fullscreenAllowed = active != null ? active : true;
   const setTimeD = (0, import_react2.useRef)(
     createThrottledNumberFn((value) => {
       const v = videoRef.current;
@@ -901,6 +934,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 +942,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) => {
@@ -1235,6 +1269,7 @@ var VideoPlayerBase = (props, ref) => {
       else if (doc.msExitFullscreen) void doc.msExitFullscreen();
       return;
     }
+    if (!fullscreenAllowed) return;
     if (containerEl) {
       if (containerEl.requestFullscreen) void containerEl.requestFullscreen();
       else if (containerEl.webkitRequestFullscreen) void containerEl.webkitRequestFullscreen();
@@ -1246,7 +1281,7 @@ var VideoPlayerBase = (props, ref) => {
       if (videoEl.requestFullscreen) void videoEl.requestFullscreen();
       else if (videoEl.webkitEnterFullscreen) void videoEl.webkitEnterFullscreen();
     }
-  }, []);
+  }, [fullscreenAllowed]);
   const videoDbClickHandler = (0, import_react2.useCallback)(() => {
     if (!handleClick) return;
     fullScreenAction();
@@ -1429,6 +1464,7 @@ var VideoPlayerBase = (props, ref) => {
           {
             variant: controlsVariant,
             fullScreenAction,
+            fullscreenAllowed,
             showControl,
             playAction,
             pauseAction,

package/dist/index.d.cts

@@ -37,6 +37,7 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     sourceType?: 'auto' | 'hls' | 'native';
     type?: string;
     controlsVariant: ControlsVariant;
+    active?: boolean;
     autoPlay?: boolean;
     preload?: '' | 'none' | 'auto' | 'metadata';
     loop?: boolean;
@@ -61,6 +62,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

@@ -37,6 +37,7 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     sourceType?: 'auto' | 'hls' | 'native';
     type?: string;
     controlsVariant: ControlsVariant;
+    active?: boolean;
     autoPlay?: boolean;
     preload?: '' | 'none' | 'auto' | 'metadata';
     loop?: boolean;
@@ -61,6 +62,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

@@ -58,6 +58,15 @@ var VideoPlayerControlStyles = styled.div`
     outline: none;
   }
 
+  .video-player-control-button:disabled {
+    opacity: 0.42;
+    cursor: not-allowed;
+  }
+
+  .video-player-control-button:disabled:hover {
+    background: rgba(255, 255, 255, 0.12);
+  }
+
   .video-player-icon {
     width: 17px;
     height: 17px;
@@ -453,11 +462,23 @@ var Icon = ({ name }) => {
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "video-player-icon", focusable: "false", viewBox: "0 0 24 24", children: paths[name] });
 };
 var ControlButton = ({
+  disabled,
   icon,
   label,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx("button", { "aria-label": label, className: "video-player-control-button", onClick: () => void onClick(), title: label, type: "button", children: /* @__PURE__ */ jsx(Icon, { name: icon }) });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": label,
+      className: "video-player-control-button",
+      disabled,
+      onClick: () => void onClick(),
+      title: label,
+      type: "button",
+      children: /* @__PURE__ */ jsx(Icon, { name: icon })
+    }
+  );
 };
 var stopControlClick = (e) => {
   e.preventDefault();
@@ -467,6 +488,7 @@ var VideoPlayerControls = (props) => {
   const {
     variant,
     fullScreenAction,
+    fullscreenAllowed,
     showControl,
     playAction,
     pauseAction,
@@ -492,7 +514,7 @@ var VideoPlayerControls = (props) => {
     return /* @__PURE__ */ jsx(VideoPlayerControlStyles, { $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ jsxs("div", { className: "video-player-control-row", children: [
       /* @__PURE__ */ jsx("div", { className: "full" }),
       /* @__PURE__ */ jsx(ControlButton, { icon: muted ? "mute" : "sound", label: muted ? "Unmute" : "Mute", onClick: () => onMutedChange(!muted) }),
-      /* @__PURE__ */ jsx(ControlButton, { icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
+      /* @__PURE__ */ jsx(ControlButton, { disabled: !fullscreenAllowed, icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
     ] }) });
   }
   return /* @__PURE__ */ jsx(VideoPlayerControlStyles, { $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ jsxs("div", { className: "video-player-control-row", children: [
@@ -504,7 +526,7 @@ var VideoPlayerControls = (props) => {
     /* @__PURE__ */ jsx(SeekSlider, { playAction, duration, currentTime, seekSetTime }),
     /* @__PURE__ */ jsx(TimeBlock, { duration, currentTime }),
     /* @__PURE__ */ jsx(ControlButton, { icon: muted ? "mute" : "sound", label: muted ? "Unmute" : "Mute", onClick: () => onMutedChange(!muted) }),
-    /* @__PURE__ */ jsx(ControlButton, { icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
+    /* @__PURE__ */ jsx(ControlButton, { disabled: !fullscreenAllowed, icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
   ] }) });
 };
 
@@ -711,9 +733,18 @@ 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",
+    active,
     autoPlay = false,
     preload = "metadata",
     loop = false,
@@ -731,6 +762,7 @@ var VideoPlayerBase = (props, ref) => {
     alwaysShowSegments = false,
     initialTime = 0,
     reloadKey,
+    videoRef: externalVideoRef,
     onVideoRefChange,
     handleClick = true,
     onPointerDown,
@@ -786,6 +818,7 @@ var VideoPlayerBase = (props, ref) => {
   const muted = mutedProp != null ? mutedProp : mutedState;
   const duration = durationProp != null ? durationProp : durationState;
   const currentTime = currentTimeProp != null ? currentTimeProp : currentTimeState;
+  const fullscreenAllowed = active != null ? active : true;
   const setTimeD = useRef(
     createThrottledNumberFn((value) => {
       const v = videoRef.current;
@@ -872,6 +905,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 +913,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) => {
@@ -1206,6 +1240,7 @@ var VideoPlayerBase = (props, ref) => {
       else if (doc.msExitFullscreen) void doc.msExitFullscreen();
       return;
     }
+    if (!fullscreenAllowed) return;
     if (containerEl) {
       if (containerEl.requestFullscreen) void containerEl.requestFullscreen();
       else if (containerEl.webkitRequestFullscreen) void containerEl.webkitRequestFullscreen();
@@ -1217,7 +1252,7 @@ var VideoPlayerBase = (props, ref) => {
       if (videoEl.requestFullscreen) void videoEl.requestFullscreen();
       else if (videoEl.webkitEnterFullscreen) void videoEl.webkitEnterFullscreen();
     }
-  }, []);
+  }, [fullscreenAllowed]);
   const videoDbClickHandler = useCallback(() => {
     if (!handleClick) return;
     fullScreenAction();
@@ -1400,6 +1435,7 @@ var VideoPlayerBase = (props, ref) => {
           {
             variant: controlsVariant,
             fullScreenAction,
+            fullscreenAllowed,
             showControl,
             playAction,
             pauseAction,

package/package.json

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