@nikelroot/video-player 0.1.6 → 0.1.8

package/README.md

@@ -37,6 +37,8 @@ export function Example() {
 }
 ```
 
+When `active` is `true`, pressing `F` toggles fullscreen.
+
 Build before publishing:
 
 ```bash

package/dist/index.cjs

@@ -548,6 +548,19 @@ var VideoPlayerControls = (props) => {
   } = props;
   const [, isMobile] = useWindowWidth();
   if (variant === "none") return null;
+  if (variant === "tiny") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoPlayerControlStyles, { $tiny: true, $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)(SeekSlider, { playAction, duration, currentTime, seekSetTime })
+    ] }) });
+  }
+  if (variant === "fullscreen-only") {
+    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, { 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: [
     playing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: "pause", label: "Pause", onClick: pauseAction }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: "play", label: "Play", onClick: playAction }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: "back", label: "Back 15 seconds", onClick: () => seekPrevAction() }),
@@ -772,6 +785,10 @@ var assignRef = (ref, value) => {
   }
   ref.current = value;
 };
+var isEditableKeyTarget = (target) => {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+};
 var VideoPlayerBase = (props, ref) => {
   const {
     controlsVariant = "none",
@@ -1382,6 +1399,21 @@ var VideoPlayerBase = (props, ref) => {
     if (!canAttemptPlayback(videoRef.current)) return;
     void playAction();
   }, [autoPlay, playAction]);
+  (0, import_react3.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const handleKeyDown = (event) => {
+      if (event.code !== "KeyF") return;
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+      if (active !== true) return;
+      if (isEditableKeyTarget(event.target)) return;
+      event.preventDefault();
+      fullScreenAction();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [active, fullScreenAction]);
   (0, import_react3.useEffect)(() => {
     if (typeof document === "undefined") return;
     const doc = document;
@@ -1411,7 +1443,7 @@ var VideoPlayerBase = (props, ref) => {
     {
       ref: containerRef,
       onMouseMove: mouseMoveHandler,
-      className: "VideoPlayer",
+      className: isFullscreen ? "VideoPlayer VideoPlayer--fullscreen" : "VideoPlayer",
       type,
       $isMobile: isMobile,
       $mobileType: mobileType,

package/dist/index.js

@@ -519,6 +519,19 @@ var VideoPlayerControls = (props) => {
   } = props;
   const [, isMobile] = useWindowWidth();
   if (variant === "none") return null;
+  if (variant === "tiny") {
+    return /* @__PURE__ */ jsx(VideoPlayerControlStyles, { $tiny: true, $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ jsxs("div", { className: "video-player-control-row", children: [
+      /* @__PURE__ */ jsx("div", { className: "full" }),
+      /* @__PURE__ */ jsx(SeekSlider, { playAction, duration, currentTime, seekSetTime })
+    ] }) });
+  }
+  if (variant === "fullscreen-only") {
+    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, { 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: [
     playing ? /* @__PURE__ */ jsx(ControlButton, { icon: "pause", label: "Pause", onClick: pauseAction }) : /* @__PURE__ */ jsx(ControlButton, { icon: "play", label: "Play", onClick: playAction }),
     /* @__PURE__ */ jsx(ControlButton, { icon: "back", label: "Back 15 seconds", onClick: () => seekPrevAction() }),
@@ -743,6 +756,10 @@ var assignRef = (ref, value) => {
   }
   ref.current = value;
 };
+var isEditableKeyTarget = (target) => {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+};
 var VideoPlayerBase = (props, ref) => {
   const {
     controlsVariant = "none",
@@ -1353,6 +1370,21 @@ var VideoPlayerBase = (props, ref) => {
     if (!canAttemptPlayback(videoRef.current)) return;
     void playAction();
   }, [autoPlay, playAction]);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const handleKeyDown = (event) => {
+      if (event.code !== "KeyF") return;
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+      if (active !== true) return;
+      if (isEditableKeyTarget(event.target)) return;
+      event.preventDefault();
+      fullScreenAction();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [active, fullScreenAction]);
   useEffect(() => {
     if (typeof document === "undefined") return;
     const doc = document;
@@ -1382,7 +1414,7 @@ var VideoPlayerBase = (props, ref) => {
     {
       ref: containerRef,
       onMouseMove: mouseMoveHandler,
-      className: "VideoPlayer",
+      className: isFullscreen ? "VideoPlayer VideoPlayer--fullscreen" : "VideoPlayer",
       type,
       $isMobile: isMobile,
       $mobileType: mobileType,

package/package.json

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